Subject: [PATCH] lazy codemirror
---
Index: app/src/ui/components/code/LiquidJsEditor.tsx
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/app/src/ui/components/code/LiquidJsEditor.tsx b/app/src/ui/components/code/LiquidJsEditor.tsx
--- a/app/src/ui/components/code/LiquidJsEditor.tsx	(revision b1a32f370565aded3a34b79ffd254c3c45d1085c)
+++ b/app/src/ui/components/code/LiquidJsEditor.tsx	(date 1736687726081)
@@ -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 @@
    { label: "when" }
 ];
 
-export function LiquidJsEditor({ editable, ...props }: ReactCodeMirrorProps) {
+export function LiquidJsEditor({ editable, ...props }: CodeEditorProps) {
    return (
       <Suspense fallback={null}>
          <CodeEditor
@@ -115,7 +115,9 @@
                !editable && "opacity-70"
             )}
             editable={editable}
-            extensions={[liquid({ filters, tags })]}
+            _extensions={{
+               liquid: { filters, tags }
+            }}
             {...props}
          />
       </Suspense>
Index: app/src/ui/components/code/CodeEditor.tsx
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/app/src/ui/components/code/CodeEditor.tsx b/app/src/ui/components/code/CodeEditor.tsx
--- a/app/src/ui/components/code/CodeEditor.tsx	(revision b1a32f370565aded3a34b79ffd254c3c45d1085c)
+++ b/app/src/ui/components/code/CodeEditor.tsx	(date 1736687634668)
@@ -1,8 +1,22 @@
 import { default as CodeMirror, type ReactCodeMirrorProps } from "@uiw/react-codemirror";
-
 import { useBknd } from "ui/client/bknd";
 
-export default function CodeEditor({ editable, basicSetup, ...props }: ReactCodeMirrorProps) {
+import { json } from "@codemirror/lang-json";
+import { type LiquidCompletionConfig, liquid } from "@codemirror/lang-liquid";
+
+export type CodeEditorProps = ReactCodeMirrorProps & {
+   _extensions?: Partial<{
+      json: boolean;
+      liquid: LiquidCompletionConfig;
+   }>;
+};
+
+export default function CodeEditor({
+   editable,
+   basicSetup,
+   _extensions = {},
+   ...props
+}: CodeEditorProps) {
    const b = useBknd();
    const theme = b.app.getAdminConfig().color_scheme;
    const _basicSetup: Partial<ReactCodeMirrorProps["basicSetup"]> = !editable
@@ -13,11 +27,21 @@
         }
       : basicSetup;
 
+   const extensions = Object.entries(_extensions ?? {}).map(([ext, config]: any) => {
+      switch (ext) {
+         case "json":
+            return json();
+         case "liquid":
+            return liquid(config);
+      }
+   });
+
    return (
       <CodeMirror
          theme={theme === "dark" ? "dark" : "light"}
          editable={editable}
          basicSetup={_basicSetup}
+         extensions={extensions}
          {...props}
       />
    );
Index: app/src/ui/components/code/JsonEditor.tsx
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/app/src/ui/components/code/JsonEditor.tsx b/app/src/ui/components/code/JsonEditor.tsx
--- a/app/src/ui/components/code/JsonEditor.tsx	(revision b1a32f370565aded3a34b79ffd254c3c45d1085c)
+++ b/app/src/ui/components/code/JsonEditor.tsx	(date 1736687681965)
@@ -1,10 +1,9 @@
-import { json } from "@codemirror/lang-json";
-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"));
 
-export function JsonEditor({ editable, className, ...props }: ReactCodeMirrorProps) {
+export function JsonEditor({ editable, className, ...props }: CodeEditorProps) {
    return (
       <Suspense fallback={null}>
          <CodeEditor
@@ -14,7 +13,7 @@
                className
             )}
             editable={editable}
-            extensions={[json()]}
+            _extensions={{ json: true }}
             {...props}
          />
       </Suspense>