codemirror dynamic conf

Author: luarmr

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

@@ -41,6 +41,29 @@ export const EditorPanel = ({ editorWidth }: { editorWidth: number }) => {
     };
   }, []);
 
+  // Calculate number of lines in current document
+  const lineCount = useMemo(() => {
+    return localValue.split('\n').length;
+  }, [localValue]);
+
+  // Dynamic options based on document size
+  const dynamicEditorOptions = useMemo(() => {
+    const isLargeDocument = lineCount > 50; // Threshold for "large" document
+    const isVeryLargeDocument = lineCount > 200; // Very large threshold
+
+    return {
+      ...editorOptions,
+      // Disable expensive features for large documents
+      lineNumbers: !isLargeDocument, // Line numbers are VERY expensive!
+      foldGutter: !isLargeDocument,  // Code folding gutter
+      gutters: isLargeDocument ? [] : ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
+
+      // More aggressive optimization for very large documents
+      viewportMargin: isVeryLargeDocument ? 5 : 10, // Smaller buffer for huge docs
+      theme: isVeryLargeDocument ? "default" : editorOptions.theme, // Simpler theme
+    };
+  }, [lineCount]);
+
   // Handler for editor changes - updates local state immediately and debounces actual config update
   const handleEditorChange = useCallback(
     (_editor: any, _data: any, value: string) => {
@@ -116,7 +139,7 @@ export const EditorPanel = ({ editorWidth }: { editorWidth: number }) => {
   return (
     <div ref={containerRef} className="flex flex-col min-w-0 h-full" style={{ width: `${editorWidth}%` }}>
       {/* CodeEditor (top) */}
-      <div className="flex-1 min-h-0">
+      <div className="flex-1 min-h-0 relative">
         <CodeEditor
           ref={editorRef}
           value={localValue}
@@ -128,8 +151,14 @@ export const EditorPanel = ({ editorWidth }: { editorWidth: number }) => {
           smartIndent
           detach
           extensions={editorExtensions}
-          options={editorOptions}
+          options={dynamicEditorOptions}
         />
+        {/* Performance mode indicator */}
+        {lineCount > 50 && (
+          <div className="absolute top-2 right-2 bg-yellow-100 border border-yellow-400 text-yellow-800 px-2 py-1 rounded text-xs z-10">
+            ⚡ Performance mode ({lineCount} lines)
+          </div>
+        )}
       </div>
       {/* Divider for resizing (only when not collapsed) */}
       {!isCollapsed && (