Fix Codemirror performance!!

src-web/components/Editor/Editor.css

@@ -1,5 +1,5 @@
 .cm-wrapper {
-    @apply h-full;
+    @apply h-full overflow-hidden;
 
     .cm-editor {
         @apply w-full block text-base;
@@ -109,8 +109,7 @@
     @apply hover:text-gray-800 hover:border-gray-400;
 }
 
-.cm-editor .cm-activeLineGutter,
-.cm-editor .cm-activeLine {
+.cm-editor .cm-activeLineGutter {
     @apply bg-transparent;
 }
 
@@ -118,6 +117,7 @@
     &.cm-focused .cm-activeLineGutter {
         @apply text-gray-800;
     }
+
     .cm-cursor {
         @apply border-l-2 border-gray-800;
     }

src-web/components/Editor/Editor.tsx

@@ -1,14 +1,13 @@
 import { defaultKeymap } from '@codemirror/commands';
+import { useUnmount } from 'react-use';
 import { Compartment, EditorState } from '@codemirror/state';
 import { keymap, placeholder as placeholderExt, tooltips } from '@codemirror/view';
 import classnames from 'classnames';
 import { EditorView } from 'codemirror';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import './Editor.css';
-import { singleLineExt } from './singleLine';
-
 import { baseExtensions, getLanguageExtension, multiLineExtensions } from './extensions';
-// const { baseExtensions, getLanguageExtension, multiLineExtensions } = await import('./extensions');
+import { singleLineExt } from './singleLine';
 
 export interface EditorProps {
   id?: string;
@@ -17,7 +16,6 @@ export interface EditorProps {
   heightMode?: 'auto' | 'full';
   contentType?: string;
   autoFocus?: boolean;
-  valueKey?: string | number;
   defaultValue?: string;
   placeholder?: string;
   tooltipContainer?: HTMLElement;
@@ -32,75 +30,65 @@ export function Editor({
   contentType,
   autoFocus,
   placeholder,
-  valueKey,
   useTemplating,
   defaultValue,
   onChange,
   className,
   singleLine,
-  ...props
 }: EditorProps) {
   const [cm, setCm] = useState<{ view: EditorView; langHolder: Compartment } | null>(null);
-  const ref = useRef<HTMLDivElement>(null);
-  const extensions = useMemo(
-    () =>
-      getExtensions({
-        container: ref.current,
-        readOnly,
-        placeholder,
-        singleLine,
-        onChange,
-        contentType,
-        useTemplating,
-      }),
-    [contentType, ref.current],
-  );
+  const [divRef, setDivRef] = useState<HTMLDivElement | null>(null);
 
-  // Create codemirror instance when ref initializes
-  useEffect(() => {
-    const parent = ref.current;
-    if (parent === null) return;
+  // Unmount editor when component unmounts
+  useUnmount(() => cm?.view.destroy());
+
+  const initDivRef = (el: HTMLDivElement | null) => {
+    setDivRef(el);
+    if (divRef !== null || el === null) return;
 
-    // console.log('INIT EDITOR');
-    let view: EditorView | null = null;
     try {
       const langHolder = new Compartment();
       const langExt = getLanguageExtension({ contentType, useTemplating });
       const state = EditorState.create({
         doc: `${defaultValue ?? ''}`,
-        extensions: [...extensions, langHolder.of(langExt)],
+        extensions: [
+          langHolder.of(langExt),
+          ...getExtensions({
+            container: divRef,
+            readOnly,
+            placeholder,
+            singleLine,
+            onChange,
+            contentType,
+            useTemplating,
+          }),
+        ],
       });
-      view = new EditorView({ state, parent });
-      syncGutterBg({ parent, className });
-      setCm({ view, langHolder });
-      if (autoFocus && view) view.focus();
+      let newView;
+      if (cm) {
+        newView = cm.view;
+        newView.setState(state);
+      } else {
+        newView = new EditorView({ state, parent: el });
+      }
+      setCm({ view: newView, langHolder });
+      syncGutterBg({ parent: el, className });
+      if (autoFocus && newView) newView.focus();
     } catch (e) {
       console.log('Failed to initialize Codemirror', e);
     }
-    return () => view?.destroy();
-  }, [ref.current, valueKey]);
-
-  // Update value when valueKey changes
-  // TODO: This would be more efficient but the onChange handler gets fired on update
-  // useEffect(() => {
-  //   if (cm === null) return;
-  //   console.log('NEW DOC', valueKey, defaultValue);
-  //   cm.view.dispatch({
-  //     changes: { from: 0, to: cm.view.state.doc.length, insert: `${defaultValue ?? ''}` },
-  //   });
-  // }, [valueKey]);
+  };
 
   // Update language extension when contentType changes
   useEffect(() => {
     if (cm === null) return;
-    // console.log('UPDATE LANG');
     const ext = getLanguageExtension({ contentType, useTemplating });
     cm.view.dispatch({ effects: cm.langHolder.reconfigure(ext) });
   }, [contentType]);
 
   return (
     <div
-      ref={ref}
+      ref={initDivRef}
       className={classnames(
         className,
         'cm-wrapper text-base bg-gray-50',
@@ -108,7 +96,6 @@ export function Editor({
         singleLine ? 'cm-singleline' : 'cm-multiline',
         readOnly && 'cm-readonly',
       )}
-      {...props}
     />
   );
 }
@@ -142,7 +129,6 @@ function getExtensions({
     ...(ext ? [ext] : []),
     ...(readOnly ? [EditorState.readOnly.of(true)] : []),
     ...(placeholder ? [placeholderExt(placeholder)] : []),
-
     ...(singleLine
       ? [
           EditorView.domEventHandlers({

src-web/components/Editor/autocomplete.ts

@@ -11,12 +11,15 @@ export function debouncedAutocompletionDisplay({ millis }: { millis: number }) {
     startCompletion(view);
   }, millis);
 
-  return EditorView.updateListener.of(({ view, docChanged }) => {
+  return EditorView.updateListener.of(({ view, docChanged, focusChanged }) => {
     // const completions = currentCompletions(view.state);
     // const status = completionStatus(view.state);
 
-    // If the document hasn't changed, we don't need to do anything
-    if (!docChanged) return;
+    if (!view.hasFocus) {
+      debouncedStartCompletion.cancel();
+      closeCompletion(view);
+      return;
+    }
 
     if (view.state.doc.length === 0) {
       debouncedStartCompletion.cancel();
@@ -24,6 +27,9 @@ export function debouncedAutocompletionDisplay({ millis }: { millis: number }) {
       return;
     }
 
-    debouncedStartCompletion(view);
+    // If the document hasn't changed, we don't need to do anything
+    if (docChanged) {
+      debouncedStartCompletion(view);
+    }
   });
 }

src-web/components/Editor/extensions.ts

@@ -25,7 +25,6 @@ import {
   crosshairCursor,
   drawSelection,
   dropCursor,
-  highlightActiveLine,
   highlightActiveLineGutter,
   highlightSpecialChars,
   keymap,
@@ -116,7 +115,6 @@ export const baseExtensions = [
 
 export const multiLineExtensions = [
   lineNumbers(),
-  highlightActiveLineGutter(),
   foldGutter({
     markerDOM: (open) => {
       const el = document.createElement('div');
@@ -130,11 +128,10 @@ export const multiLineExtensions = [
   }),
   EditorState.allowMultipleSelections.of(true),
   indentOnInput(),
-  bracketMatching(),
   closeBrackets(),
   rectangularSelection(),
   crosshairCursor(),
-  highlightActiveLine(),
+  highlightActiveLineGutter(),
   highlightSelectionMatches({ minSelectionLength: 2 }),
   keymap.of([
     ...closeBracketsKeymap,