codemirror

Author: luarmr

web/apps/playground/src/components/EditorPanel/EditorPanel.tsx

@@ -21,6 +21,44 @@ export const EditorPanel = ({ editorWidth }: { editorWidth: number }) => {
   const startHeight = useRef(0);
   const containerRef = useRef<HTMLDivElement>(null);
 
+  // Local state for immediate editor updates (no lag while typing)
+  const [localValue, setLocalValue] = useState(config);
+
+  // Ref for debounce timer
+  const debounceTimer = useRef<NodeJS.Timeout | null>(null);
+
+  // Sync local value when config changes from external source
+  useEffect(() => {
+    setLocalValue(config);
+  }, [config]);
+
+  // Cleanup debounce timer on unmount
+  useEffect(() => {
+    return () => {
+      if (debounceTimer.current) {
+        clearTimeout(debounceTimer.current);
+      }
+    };
+  }, []);
+
+  // Handler for editor changes - updates local state immediately and debounces actual config update
+  const handleEditorChange = useCallback(
+    (_editor: any, _data: any, value: string) => {
+      setLocalValue(value); // Update immediately for responsive typing
+
+      // Clear previous timer
+      if (debounceTimer.current) {
+        clearTimeout(debounceTimer.current);
+      }
+
+      // Set new timer to update config after 300ms of no typing
+      debounceTimer.current = setTimeout(() => {
+        setConfig(value);
+      }, 300);
+    },
+    [setConfig]
+  );
+
   // Drag logic for vertical resize
   const handleMouseDown = useCallback(
     (e: MouseEvent) => {
@@ -81,8 +119,8 @@ export const EditorPanel = ({ editorWidth }: { editorWidth: number }) => {
       <div className="flex-1 min-h-0">
         <CodeEditor
           ref={editorRef}
-          value={config}
-          onBeforeChange={(_editor: any, _data: any, value: string) => setConfig(value)}
+          value={localValue}
+          onBeforeChange={handleEditorChange}
           border={false}
           controlled
           // @ts-ignore

web/apps/playground/src/utils/codeEditor.ts

@@ -35,4 +35,9 @@ export const editorOptions = {
     "Ctrl-Space": "autocomplete",
   },
   hintOptions: { schemaInfo: tags },
+  // Performance optimizations for large XML documents
+  viewportMargin: 10, // Only render visible lines + 10 line buffer (HUGE performance boost!)
+  lineWrapping: false, // Faster rendering without wrapping
+  lineSeparator: "\n", // Faster line splitting
+  undoDepth: 200, // Limit undo history (default is 200, but being explicit)
 };