lazy import code editor once, externalized codemirror

This commit is contained in:
dswbx
2025-01-14 15:07:09 +01:00
parent 7b0a41b297
commit a81aa875a8
7 changed files with 51 additions and 150 deletions

View File

@@ -1,7 +1,7 @@
import { liquid } from "@codemirror/lang-liquid";
import type { ReactCodeMirrorProps } from "@uiw/react-codemirror";
import { Suspense, lazy } from "react";
import { twMerge } from "tailwind-merge";
import type { CodeEditorProps } from "./CodeEditor";
const CodeEditor = lazy(() => import("./CodeEditor"));
const filters = [
@@ -106,7 +106,7 @@ const tags = [
{ label: "when" }
];
export function LiquidJsEditor({ editable, ...props }: ReactCodeMirrorProps) {
export function LiquidJsEditor({ editable, ...props }: CodeEditorProps) {
return (
<Suspense fallback={null}>
<CodeEditor
@@ -115,7 +115,9 @@ export function LiquidJsEditor({ editable, ...props }: ReactCodeMirrorProps) {
!editable && "opacity-70"
)}
editable={editable}
extensions={[liquid({ filters, tags })]}
_extensions={{
liquid: { filters, tags }
}}
{...props}
/>
</Suspense>