codemirror v5 -> v6

Author: khanniie

client/modules/IDE/components/Editor/codemirror.js

@@ -1,46 +1,39 @@
 import { useRef, useEffect } from 'react';
-import CodeMirror from 'codemirror';
-import 'codemirror/mode/css/css';
-import 'codemirror/mode/clike/clike';
-import 'codemirror/addon/selection/active-line';
-import 'codemirror/addon/lint/lint';
-import 'codemirror/addon/lint/javascript-lint';
-import 'codemirror/addon/lint/css-lint';
-import 'codemirror/addon/lint/html-lint';
-import 'codemirror/addon/fold/brace-fold';
-import 'codemirror/addon/fold/comment-fold';
-import 'codemirror/addon/fold/foldcode';
-import 'codemirror/addon/fold/foldgutter';
-import 'codemirror/addon/fold/indent-fold';
-import 'codemirror/addon/fold/xml-fold';
-import 'codemirror/addon/comment/comment';
-import 'codemirror/keymap/sublime';
-import 'codemirror/addon/search/searchcursor';
-import 'codemirror/addon/search/matchesonscrollbar';
-import 'codemirror/addon/search/match-highlighter';
-import 'codemirror/addon/search/jump-to-line';
-import 'codemirror/addon/edit/matchbrackets';
-import 'codemirror/addon/edit/closebrackets';
-import 'codemirror/addon/selection/mark-selection';
-import 'codemirror-colorpicker';
+import { EditorView, lineNumbers as lineNumbersExt } from '@codemirror/view';
+import { closeBrackets } from '@codemirror/autocomplete';
+
+// TODO: Check what the v6 variants of these addons are.
+// import 'codemirror/addon/search/searchcursor';
+// import 'codemirror/addon/search/matchesonscrollbar';
+// import 'codemirror/addon/search/match-highlighter';
+// import 'codemirror/addon/search/jump-to-line';
 
 import { debounce } from 'lodash';
-import emmet from '@emmetio/codemirror-plugin';
 
+import {
+  getFileMode,
+  createNewFileState,
+  updateFileStates
+} from './stateUtils';
 import { useEffectWithComparison } from '../../hooks/custom-hooks';
-import { metaKey } from '../../../../utils/metaKey';
-import { showHint } from './hinter';
-import tidyCode from './tidier';
-import getFileMode from './utils';
-
-const INDENTATION_AMOUNT = 2;
-
-emmet(CodeMirror);
-
-/**
- * This is a custom React hook that manages CodeMirror state.
- * TODO(Connie Ye): Revisit the linting on file switch.
- */
+import tidyCodeWithPrettier from './tidier';
+
+// ----- GENERAL TODOS (in order of priority) -----
+// - autocomplete (hinter)
+// - p5-javascript
+// - search, find & replace
+// - color themes
+// - javascript color picker (extension works for css but needs to be forked for js)
+// - revisit keymap differences, esp around sublime
+// - emmet doesn't trigger if text is copy pasted in
+// - need to re-implement emmet auto rename tag
+// - color picker should be triggered by metakey cmd k
+// - clike addon
+// ----- QUESTIONS -----
+// do we want shift tab to indent less? existing behavior is explicitly turned off but i think its nice to have
+// do we want any extra emmet functionality? https://www.npmjs.com/package/@emmetio/codemirror6-plugin
+
+/** This is a custom React hook that manages CodeMirror state. */
 export default function useCodeMirror({
   theme,
   lineNumbers,
@@ -61,34 +54,9 @@ export default function useCodeMirror({
   onUpdateLinting
 }) {
   // The codemirror instance.
-  const cmInstance = useRef();
+  const cmView = useRef();
   // The current codemirror files.
-  const docs = useRef();
-
-  function onKeyUp() {
-    const lineNumber = parseInt(cmInstance.current.getCursor().line + 1, 10);
-    setCurrentLine(lineNumber);
-  }
-
-  function onKeyDown(_cm, e) {
-    // Show hint
-    const mode = cmInstance.current.getOption('mode');
-    if (/^[a-z]$/i.test(e.key) && (mode === 'css' || mode === 'javascript')) {
-      showHint(_cm, autocompleteHinter, fontSize);
-    }
-    if (e.key === 'Escape') {
-      e.preventDefault();
-      const selections = cmInstance.current.listSelections();
-
-      if (selections.length > 1) {
-        const firstPos = selections[0].head || selections[0].anchor;
-        cmInstance.current.setSelection(firstPos);
-        cmInstance.current.scrollIntoView(firstPos);
-      } else {
-        cmInstance.current.getInputField().blur();
-      }
-    }
-  }
+  const fileStates = useRef();
 
   // We have to create a ref for the file ID, or else the debouncer
   // will old onto an old version of the fileId and just overrwrite the initial file.
@@ -99,118 +67,96 @@ export default function useCodeMirror({
   function onChange() {
     setUnsavedChanges(true);
     hideRuntimeErrorWarning();
-    updateFileContent(fileId.current, cmInstance.current.getValue());
+    updateFileContent(fileId.current, cmView.current.state.doc.toString());
     if (autorefresh && isPlaying) {
       clearConsole();
       startSketch();
     }
   }
+  // Call onChange at most once every second.
   const debouncedOnChange = debounce(onChange, 1000);
 
+  // This is called when the CM view updates.
+  function onViewUpdate(updateView) {
+    const { state } = updateView;
+
+    // TODO - check if need to subtract one
+    setCurrentLine(state.doc.lineAt(state.selection.main.head).number);
+
+    if (updateView.docChanged) {
+      debouncedOnChange();
+    }
+  }
+
   // When the container component enters the DOM, we want this function
   // to be called so we can setup the CodeMirror instance with the container.
   function setupCodeMirrorOnContainerMounted(container) {
-    cmInstance.current = CodeMirror(container, {
-      theme: `p5-${theme}`,
-      lineNumbers,
-      styleActiveLine: true,
-      inputStyle: 'contenteditable',
-      lineWrapping: linewrap,
-      fixedGutter: false,
-      foldGutter: true,
-      foldOptions: { widget: '\u2026' },
-      gutters: ['CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
-      keyMap: 'sublime',
-      highlightSelectionMatches: true, // highlight current search match
-      matchBrackets: true,
-      emmet: {
-        preview: ['html'],
-        markTagPairs: true,
-        autoRenameTags: true
-      },
-      autoCloseBrackets: autocloseBracketsQuotes,
-      styleSelectedText: true,
-      lint: {
-        onUpdateLinting,
-        options: {
-          asi: true,
-          eqeqeq: false,
-          '-W041': false,
-          esversion: 11
-        }
-      },
-      colorpicker: {
-        type: 'sketch',
-        mode: 'edit'
-      }
+    cmView.current = new EditorView({
+      parent: container
     });
-
-    delete cmInstance.current.options.lint.options.errors;
-
-    const replaceCommand =
-      metaKey === 'Ctrl' ? `${metaKey}-H` : `${metaKey}-Option-F`;
-    cmInstance.current.setOption('extraKeys', {
-      Tab: (tabCm) => {
-        if (!tabCm.execCommand('emmetExpandAbbreviation')) return;
-        // might need to specify and indent more?
-        const selection = tabCm.doc.getSelection();
-        if (selection.length > 0) {
-          tabCm.execCommand('indentMore');
-        } else {
-          tabCm.replaceSelection(' '.repeat(INDENTATION_AMOUNT));
-        }
-      },
-      Enter: 'emmetInsertLineBreak',
-      Esc: 'emmetResetAbbreviation',
-      [`Shift-Tab`]: false,
-      [`${metaKey}-Enter`]: () => null,
-      [`Shift-${metaKey}-Enter`]: () => null,
-      [`${metaKey}-F`]: 'findPersistent',
-      [`Shift-${metaKey}-F`]: () => tidyCode(cmInstance.current),
-      [`${metaKey}-G`]: 'findPersistentNext',
-      [`Shift-${metaKey}-G`]: 'findPersistentPrev',
-      [replaceCommand]: 'replace',
-      // Cassie Tarakajian: If you don't set a default color, then when you
-      // choose a color, it deletes characters inline. This is a
-      // hack to prevent that.
-      [`${metaKey}-K`]: (metaCm, event) =>
-        metaCm.state.colorpicker.popup_color_picker({ length: 0 }),
-      [`${metaKey}-.`]: 'toggleComment' // Note: most adblockers use the shortcut ctrl+.
-    });
-
-    // Setup the event listeners on the CodeMirror instance.
-    cmInstance.current.on('change', debouncedOnChange);
-    cmInstance.current.on('keyup', onKeyUp);
-    cmInstance.current.on('keydown', onKeyDown);
-
-    cmInstance.current.getWrapperElement().style['font-size'] = `${fontSize}px`;
   }
 
   // When settings change, we pass those changes into CodeMirror.
+  // TODO: There should be a useEffect hook for when the theme changes.
   useEffect(() => {
-    cmInstance.current.getWrapperElement().style['font-size'] = `${fontSize}px`;
+    cmView.current.dom.style['font-size'] = `${fontSize}px`;
   }, [fontSize]);
   useEffect(() => {
-    cmInstance.current.setOption('lineWrapping', linewrap);
+    const reconfigureEffect = (fileState) =>
+      fileState.lineWrappingCpt.reconfigure(
+        linewrap ? EditorView.lineWrapping : []
+      );
+    updateFileStates({
+      fileStates: fileStates.current,
+      cmView: cmView.current,
+      file,
+      reconfigureEffect
+    });
   }, [linewrap]);
   useEffect(() => {
-    cmInstance.current.setOption('theme', `p5-${theme}`);
-  }, [theme]);
-  useEffect(() => {
-    cmInstance.current.setOption('lineNumbers', lineNumbers);
+    const reconfigureEffect = (fileState) =>
+      fileState.lineNumbersCpt.reconfigure(lineNumbers ? lineNumbersExt() : []);
+    updateFileStates({
+      fileStates: fileStates.current,
+      cmView: cmView.current,
+      file,
+      reconfigureEffect
+    });
   }, [lineNumbers]);
   useEffect(() => {
-    cmInstance.current.setOption('autoCloseBrackets', autocloseBracketsQuotes);
+    const reconfigureEffect = (fileState) =>
+      fileState.closeBracketsCpt.reconfigure(
+        autocloseBracketsQuotes ? closeBrackets() : []
+      );
+    updateFileStates({
+      fileStates: fileStates.current,
+      cmView: cmView.current,
+      file,
+      reconfigureEffect
+    });
   }, [autocloseBracketsQuotes]);
 
-  // Initializes the files as CodeMirror documents.
+  // Initializes the files as CodeMirror states.
   function initializeDocuments() {
-    docs.current = {};
+    if (!fileStates.current) {
+      fileStates.current = {};
+    }
+
     files.forEach((currentFile) => {
-      if (currentFile.name !== 'root') {
-        docs.current[currentFile.id] = CodeMirror.Doc(
+      if (
+        currentFile.name !== 'root' &&
+        !(currentFile.id in fileStates.current)
+      ) {
+        fileStates.current[currentFile.id] = createNewFileState(
+          currentFile.name,
           currentFile.content,
-          getFileMode(currentFile.name)
+          {
+            linewrap,
+            lineNumbers,
+            autocloseBracketsQuotes,
+            onUpdateLinting,
+            onViewUpdate
+          }
         );
       }
     });
@@ -219,64 +165,47 @@ export default function useCodeMirror({
   // When the files change, reinitialize the documents.
   useEffect(initializeDocuments, [files]);
 
-  // When the file changes, we change the file mode and
-  // make the CodeMirror call to swap out the document.
+  // When the file changes, make the CodeMirror call to swap out the document.
   useEffectWithComparison(
     (_, prevProps) => {
-      const fileMode = getFileMode(file.name);
-      if (fileMode === 'javascript') {
-        // Define the new Emmet configuration based on the file mode
-        const emmetConfig = {
-          preview: ['html'],
-          markTagPairs: false,
-          autoRenameTags: true
-        };
-        cmInstance.current.setOption('emmet', emmetConfig);
-      }
-      const oldDoc = cmInstance.current.swapDoc(docs.current[file.id]);
-      if (prevProps?.file) {
-        docs.current[prevProps.file.id] = oldDoc;
+      // We need to save the previous CodeMirror state so we can restore it
+      // when we switch back to it.
+      const previousState = cmView.current.state;
+      if (Array.isArray(prevProps) && prevProps.length > 0 && previousState) {
+        const prevId = prevProps[0];
+        fileStates.current[prevId].cmState = previousState;
       }
-      cmInstance.current.focus();
 
-      for (let i = 0; i < cmInstance.current.lineCount(); i += 1) {
-        cmInstance.current.removeLineClass(
-          i,
-          'background',
-          'line-runtime-error'
-        );
-      }
+      const { cmState } = fileStates.current[file.id];
+      cmView.current.setState(cmState);
     },
     [file.id]
   );
 
-  // Remove the CM listeners on component teardown.
-  function teardownCodeMirror() {
-    cmInstance.current.off('keyup', onKeyUp);
-    cmInstance.current.off('change', debouncedOnChange);
-    cmInstance.current.off('keydown', onKeyDown);
-  }
-
   const getContent = () => {
-    const content = cmInstance.current.getValue();
+    const content = cmView.current.state.doc.toString();
     const updatedFile = Object.assign({}, file, { content });
     return updatedFile;
   };
 
-  const showFind = () => {
-    cmInstance.current.execCommand('findPersistent');
-  };
-
-  const showReplace = () => {
-    cmInstance.current.execCommand('replace');
+  // TODO: Add find and replace functionality.
+  // const showFind = () => {
+  //   cmInstance.current.execCommand('findPersistent');
+  // };
+  // const showReplace = () => {
+  //   cmInstance.current.execCommand('replace');
+  // };
+
+  const tidyCode = () => {
+    const fileMode = getFileMode(file.name);
+    tidyCodeWithPrettier(cmView.current, fileMode);
   };
 
   return {
     setupCodeMirrorOnContainerMounted,
-    teardownCodeMirror,
-    cmInstance,
     getContent,
-    showFind,
-    showReplace
+    tidyCode
+    // showFind,
+    // showReplace
   };
 }