Files
bknd/app/src/ui/components/code/LiquidJsEditor.tsx

126 lines
3.1 KiB
TypeScript

import { Suspense, lazy } from "react";
import { twMerge } from "tailwind-merge";
import type { CodeEditorProps } from "./CodeEditor";
const CodeEditor = lazy(() => import("./CodeEditor"));
const filters = [
{ label: "abs" },
{ label: "append" },
{ label: "array_to_sentence_string" },
{ label: "at_least" },
{ label: "at_most" },
{ label: "capitalize" },
{ label: "ceil" },
{ label: "cgi_escape" },
{ label: "compact" },
{ label: "concat" },
{ label: "date" },
{ label: "date_to_long_string" },
{ label: "date_to_rfc822" },
{ label: "date_to_string" },
{ label: "date_to_xmlschema" },
{ label: "default" },
{ label: "divided_by" },
{ label: "downcase" },
{ label: "escape" },
{ label: "escape_once" },
{ label: "find" },
{ label: "find_exp" },
{ label: "first" },
{ label: "floor" },
{ label: "group_by" },
{ label: "group_by_exp" },
{ label: "inspect" },
{ label: "join" },
{ label: "json" },
{ label: "jsonify" },
{ label: "last" },
{ label: "lstrip" },
{ label: "map" },
{ label: "minus" },
{ label: "modulo" },
{ label: "newline_to_br" },
{ label: "normalize_whitespace" },
{ label: "number_of_words" },
{ label: "plus" },
{ label: "pop" },
{ label: "push" },
{ label: "prepend" },
{ label: "raw" },
{ label: "remove" },
{ label: "remove_first" },
{ label: "remove_last" },
{ label: "replace" },
{ label: "replace_first" },
{ label: "replace_last" },
{ label: "reverse" },
{ label: "round" },
{ label: "rstrip" },
{ label: "shift" },
{ label: "size" },
{ label: "slice" },
{ label: "slugify" },
{ label: "sort" },
{ label: "sort_natural" },
{ label: "split" },
{ label: "strip" },
{ label: "strip_html" },
{ label: "strip_newlines" },
{ label: "sum" },
{ label: "times" },
{ label: "to_integer" },
{ label: "truncate" },
{ label: "truncatewords" },
{ label: "uniq" },
{ label: "unshift" },
{ label: "upcase" },
{ label: "uri_escape" },
{ label: "url_decode" },
{ label: "url_encode" },
{ label: "where" },
{ label: "where_exp" },
{ label: "xml_escape" }
];
const tags = [
{ label: "assign" },
{ label: "capture" },
{ label: "case" },
{ label: "comment" },
{ label: "cycle" },
{ label: "decrement" },
{ label: "echo" },
{ label: "else" },
{ label: "elsif" },
{ label: "for" },
{ label: "if" },
{ label: "include" },
{ label: "increment" },
{ label: "layout" },
{ label: "liquid" },
{ label: "raw" },
{ label: "render" },
{ label: "tablerow" },
{ label: "unless" },
{ label: "when" }
];
export function LiquidJsEditor({ editable, ...props }: CodeEditorProps) {
return (
<Suspense fallback={null}>
<CodeEditor
className={twMerge(
"flex w-full border border-muted bg-white rounded-lg",
!editable && "opacity-70"
)}
editable={editable}
_extensions={{
liquid: { filters, tags }
}}
{...props}
/>
</Suspense>
);
}