merge upstream/develop-codemirror-v6 to resolve conflicts

Author: Geethegreat

client/modules/IDE/actions/ide.js

@@ -236,23 +236,10 @@ export function hideErrorModal() {
   };
 }
 
-export function hideRuntimeErrorWarning() {
-  return {
-    type: ActionTypes.HIDE_RUNTIME_ERROR_WARNING
-  };
-}
-
-export function showRuntimeErrorWarning() {
-  return {
-    type: ActionTypes.SHOW_RUNTIME_ERROR_WARNING
-  };
-}
-
 export function startSketch() {
   return (dispatch, getState) => {
     dispatch(clearConsole());
     dispatch(startVisualSketch());
-    dispatch(showRuntimeErrorWarning());
     const state = getState();
     dispatchMessage({
       type: MessageTypes.SKETCH,

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

@@ -18,10 +18,9 @@ import {
   AUTOCOMPLETE_OPTIONS
 } from './stateUtils';
 import { useEffectWithComparison } from '../../hooks/custom-hooks';
-import tidyCodeWithPrettier from './tidier';
+import { tidyCodeWithPrettier } from './tidier';
 
 // ----- GENERAL TODOS (in order of priority) -----
-// - color themes
 // - any features lost in the p5 conversion git merge
 // - javascript color picker (extension works for css but needs to be forked for js)
 // - revisit keymap differences, esp around sublime
@@ -32,13 +31,11 @@ import tidyCodeWithPrettier from './tidier';
 
 /** This is a custom React hook that manages CodeMirror state. */
 export default function useCodeMirror({
-  theme,
   lineNumbers,
   linewrap,
   autocloseBracketsQuotes,
   setUnsavedChanges,
   setCurrentLine,
-  hideRuntimeErrorWarning,
   updateFileContent,
   file,
   files,
@@ -63,7 +60,6 @@ export default function useCodeMirror({
   // When the file changes, update the file content and save status.
   function onChange() {
     setUnsavedChanges(true);
-    hideRuntimeErrorWarning();
     updateFileContent(fileId.current, cmView.current.state.doc.toString());
     if (autorefresh && isPlaying) {
       clearConsole();
@@ -102,7 +98,6 @@ export default function useCodeMirror({
   }
 
   // When settings change, we pass those changes into CodeMirror.
-  // TODO: There should be a useEffect hook for when the theme changes.
   useEffect(() => {
     cmView.current.dom.style['font-size'] = `${fontSize}px`;
   }, [fontSize]);
@@ -220,6 +215,7 @@ export default function useCodeMirror({
     teardownCodeMirror,
     getContent,
     tidyCode,
-    showSearch
+    showSearch,
+    codemirrorView: cmView
   };
 }

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

@@ -0,0 +1,52 @@
+import { StateField, StateEffect } from '@codemirror/state';
+import { EditorView, Decoration } from '@codemirror/view';
+
+// Effects for communicating with the state field
+const ADD_ERROR_DECORATION = StateEffect.define();
+const FILTER_ERROR_DECORATION = StateEffect.define();
+
+// An extension for managing error line decorations
+// Mostly adapted from the Marked Text demo in https://codemirror.net/docs/migration/
+// You can affect this by calling addErrorDecoration and removeErrorDecorations
+export const errorDecorationStateField = StateField.define({
+  // Start with an empty set of decorations
+  create() {
+    return Decoration.none;
+  },
+  // This is called whenever the editor updates
+  update(value, transaction) {
+    // Move the decorations to account for document changes
+    let newValue = value.map(transaction.changes);
+    for (let i = 0; i < transaction.effects.length; i++) {
+      const effect = transaction.effects[i];
+      if (effect.is(ADD_ERROR_DECORATION))
+        newValue = newValue.update({ add: effect.value, sort: true });
+      else if (effect.is(FILTER_ERROR_DECORATION))
+        newValue = newValue.update({ filter: effect.value });
+    }
+    return newValue;
+  },
+  // Indicate that this field provides a set of decorations
+  provide: (f) => EditorView.decorations.from(f)
+});
+
+const ERROR_DECORATION = Decoration.line({
+  class: 'cm-errorLine' // Defined in _editor.scss
+});
+
+// Add an error decoration to a specific line number
+export function addErrorDecoration(view, lineNumber) {
+  const docLineNumber = view.state.doc.line(lineNumber);
+  view.dispatch({
+    effects: ADD_ERROR_DECORATION.of([
+      ERROR_DECORATION.range(docLineNumber.from)
+    ])
+  });
+}
+
+// Remove all error decorations
+export function removeErrorDecorations(view) {
+  view.dispatch({
+    effects: FILTER_ERROR_DECORATION.of(() => false)
+  });
+}

client/modules/IDE/components/Editor/index.jsx

@@ -32,13 +32,16 @@ import { FolderIcon } from '../../../../common/icons';
 import { IconButton } from '../../../../common/IconButton';
 
 import useCodeMirror from './codemirror';
-import { useEffectWithComparison } from '../../hooks/custom-hooks';
+
+import {
+  addErrorDecoration,
+  removeErrorDecorations
+} from './consoleErrorDecoration';
 
 function Editor({
   provideController,
   files,
   file,
-  theme,
   linewrap,
   lineNumbers,
   closeProjectOptions,
@@ -57,8 +60,6 @@ function Editor({
   autocloseBracketsQuotes,
   fontSize,
   consoleEvents,
-  hideRuntimeErrorWarning,
-  runtimeErrorWarningVisible,
   expandConsole,
   isExpanded,
   t,
@@ -85,17 +86,15 @@ function Editor({
   const {
     setupCodeMirrorOnContainerMounted,
     teardownCodeMirror,
-    // cmInstance,
+    codemirrorView,
     getContent,
     tidyCode,
     showSearch
   } = useCodeMirror({
-    theme,
     lineNumbers,
     linewrap,
     autocloseBracketsQuotes,
     setUnsavedChanges,
-    hideRuntimeErrorWarning,
     updateFileContent,
     file,
     files,
@@ -132,54 +131,32 @@ function Editor({
     };
   }, []);
 
-  // Updates the error console.
-  // TODO: Need to revisit this functionality for v6.
-  useEffectWithComparison(
-    (_, prevProps) => {
-      if (runtimeErrorWarningVisible) {
-        if (
-          prevProps.consoleEvents &&
-          consoleEvents.length !== prevProps.consoleEvents.length
-        ) {
-          consoleEvents.forEach((consoleEvent) => {
-            if (consoleEvent.method === 'error') {
-              // It doesn't work if you create a new Error, but this works
-              // LOL
-              const errorObj = { stack: consoleEvent.data[0].toString() };
-              StackTrace.fromError(errorObj).then((stackLines) => {
-                expandConsole();
-                const line = stackLines.find(
-                  (l) => l.fileName && l.fileName.startsWith('/')
-                );
-                if (!line) return;
-                const fileNameArray = line.fileName.split('/');
-                const fileName = fileNameArray.slice(-1)[0];
-                const filePath = fileNameArray.slice(0, -1).join('/');
-                const fileWithError = files.find(
-                  (f) => f.name === fileName && f.filePath === filePath
-                );
-                setSelectedFile(fileWithError.id);
-                // cmInstance.current.addLineClass(
-                //   line.lineNumber - 1,
-                //   'background',
-                //   'line-runtime-error'
-                // );
-              });
-            }
-          });
-        } else {
-          // for (let i = 0; i < cmInstance.current.lineCount(); i += 1) {
-          //   cmInstance.current.removeLineClass(
-          //     i,
-          //     'background',
-          //     'line-runtime-error'
-          //   );
-          // }
-        }
-      }
-    },
-    [consoleEvents, runtimeErrorWarningVisible]
-  );
+  // Updates the runtime error console.
+  useEffect(() => {
+    const consoleErrors = consoleEvents.filter((e) => e.method === 'error');
+
+    if (consoleErrors.length > 0) {
+      const firstError = consoleErrors[0];
+      const errorObj = { stack: firstError.data[0].toString() };
+      StackTrace.fromError(errorObj).then((stackLines) => {
+        expandConsole();
+        const line = stackLines.find(
+          (l) => l.fileName && l.fileName.startsWith('/')
+        );
+        if (!line) return;
+        const fileNameArray = line.fileName.split('/');
+        const fileName = fileNameArray.slice(-1)[0];
+        const filePath = fileNameArray.slice(0, -1).join('/');
+        const fileWithError = files.find(
+          (f) => f.name === fileName && f.filePath === filePath
+        );
+        setSelectedFile(fileWithError.id);
+        addErrorDecoration(codemirrorView.current, line.lineNumber);
+      });
+    } else {
+      removeErrorDecorations(codemirrorView.current);
+    }
+  }, [consoleEvents]);
 
   const editorSectionClass = classNames({
     editor: true,
@@ -291,7 +268,6 @@ Editor.propTypes = {
   startSketch: PropTypes.func.isRequired,
   autorefresh: PropTypes.bool.isRequired,
   isPlaying: PropTypes.bool.isRequired,
-  theme: PropTypes.string.isRequired,
   files: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.string.isRequired,
@@ -304,8 +280,6 @@ Editor.propTypes = {
   closeProjectOptions: PropTypes.func.isRequired,
   expandSidebar: PropTypes.func.isRequired,
   clearConsole: PropTypes.func.isRequired,
-  hideRuntimeErrorWarning: PropTypes.func.isRequired,
-  runtimeErrorWarningVisible: PropTypes.bool.isRequired,
   provideController: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,
   setSelectedFile: PropTypes.func.isRequired,

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

@@ -0,0 +1,108 @@
+import { StateField, RangeSetBuilder } from '@codemirror/state';
+import { Decoration, EditorView, WidgetType } from '@codemirror/view';
+import { selectedCompletion, completionStatus } from '@codemirror/autocomplete';
+
+class GhostTextWidget extends WidgetType {
+  constructor(text) {
+    super();
+    this.text = text;
+  }
+
+  eq(other) {
+    return other.text === this.text;
+  }
+
+  toDOM() {
+    const span = document.createElement('span');
+    span.className = 'cm-ghostCompletion';
+    span.textContent = this.text;
+    return span;
+  }
+
+  ignoreEvent() {
+    return true;
+  }
+}
+
+function getCurrentWord(state) {
+  const { from, to, empty } = state.selection.main;
+  if (!empty) return null;
+
+  const line = state.doc.lineAt(from);
+  const before = line.text.slice(0, from - line.from);
+  const match = before.match(/\w+$/);
+
+  if (!match) return null;
+
+  const word = match[0];
+  return {
+    text: word,
+    from: from - word.length,
+    to
+  };
+}
+
+function buildGhostText(state) {
+  // only show ghost text if autocomplete is on,
+  // user is typing, and if preview matches typed text
+
+  if (completionStatus(state) !== 'active') return null;
+
+  const selected = selectedCompletion(state);
+  if (!selected) return null;
+
+  const word = getCurrentWord(state);
+  if (!word) return null;
+
+  const preview = selected.preview || selected.label;
+  if (!preview) return null;
+
+  if (!preview.toLowerCase().startsWith(word.text.toLowerCase())) return null;
+
+  const remainder = preview.slice(word.text.length);
+  if (!remainder) return null;
+
+  return {
+    pos: word.to,
+    text: remainder
+  };
+}
+
+const ghostTextField = StateField.define({
+  create(state) {
+    return Decoration.none;
+  },
+
+  update(deco, tr) {
+    const decorationBuilder = new RangeSetBuilder();
+    const ghost = buildGhostText(tr.state);
+
+    if (ghost) {
+      decorationBuilder.add(
+        ghost.pos,
+        ghost.pos,
+        Decoration.widget({
+          widget: new GhostTextWidget(ghost.text),
+          side: 1
+        })
+      );
+    }
+
+    return decorationBuilder.finish();
+  },
+
+  provide: (field) => EditorView.decorations.from(field)
+});
+
+export const p5CompletionPreviewTheme = EditorView.theme({
+  '.cm-ghostCompletion': {
+    opacity: '0.55',
+    fontStyle: 'italic',
+    pointerEvents: 'none',
+    whiteSpace: 'pre'
+  }
+});
+
+export function p5CompletionPreview() {
+  return [ghostTextField, p5CompletionPreviewTheme];
+}