import { liquid } from "@codemirror/lang-liquid";
import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
import { product_cfg } from ".";
import { v_option_cfg, v_quantity_rule_cfg, variant_cfg } from "./variant.cfg";
export const liquid_lang = liquid({
base: markdown({ base: markdownLanguage }),
tags: [
{
label: "for",
apply: " for in %} \n\n {% endfor ",
},
{
label: "form",
apply: " form '' %} \n\n {% endform ",
},
],
variables: [
{ label: "product", type: "variable" },
{ label: "variant", type: "variable" },
{ label: "all_product", apply: "all_product['']", type: "variable" },
],
properties: (path) => {
const join_path = path.join(".");
if (join_path === "product") return product_cfg;
if (join_path.startsWith("product.option")) return v_option_cfg;
if (join_path === "variant") return variant_cfg;
if (join_path === "variant.quantity_rule") return v_quantity_rule_cfg;
return [];
},
});
I have modified lang-liquid to apply my custom tag. Here “endform” tag is not highlighted. Now how can I highlight it? I am using it on my react project I give the component code in below.
import { liquid_lang } from "@/app/language/liquid";
import { css } from "@codemirror/lang-css";
import { javascript } from "@codemirror/lang-javascript";
// import { liquidLanguage } from "@codemirror/lang-liquid";
// import { LRLanguage } from "@codemirror/language";
// import { styleTags, tags } from "@lezer/highlight";
import CodeMirror, { ReactCodeMirrorRef, basicSetup } from "@uiw/react-codemirror";
import { forwardRef } from "react";
// const cld = LRLanguage.define({
// parser: liquidLanguage.parser.configure({
// props: [styleTags({ endform: tags.keyword })],
// // tokenizers: [{from: ""}]
// }),
// });
type CodeEditorProps = {
value?: string;
custom_class?: string;
height?: string;
extension?: string;
onChange?: (value: string) => void;
onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
};
const CodeEditor = forwardRef<ReactCodeMirrorRef, CodeEditorProps>(
({ value, custom_class, height, extension = "js", onChange, onKeyDown }, ref) => {
const handleLangGrammar = () => {
if (["html", "liquid"].includes(extension)) return liquid_lang;
if (["js", "json"].includes(extension)) return javascript({ typescript: true });
if (["css"].includes(extension)) return css();
return basicSetup();
};
return (
<CodeMirror
ref={ref}
value={value}
height={height || "200px"}
className={custom_class || ""}
extensions={[handleLangGrammar()]}
onChange={onChange}
onKeyDown={onKeyDown}
/>
// <div ref={editorRef}></div>
);
}
);
export default CodeEditor;