folding, console input

Author: lindapaiste

Diff for: client/modules/CodeMirror/CodeMirrorEditor.jsx

@@ -6,6 +6,9 @@ import PropTypes from 'prop-types';
 
 const StyledRoot = styled.article`
   font-size: ${(props) => props.fontSize}px;
+  .cm-editor.cm-focused {
+    outline: none;
+  }
 `;
 
 StyledRoot.propTypes = {
@@ -22,11 +25,11 @@ const ElementWithClasses = forwardRef((props, ref) => {
 
   return (
     <StyledRoot
-      className={classNames(`cm-s-p5-${theme}`, props.className)}
       fontSize={fontSize}
       lineWrap={lineWrap}
       lineNumbers={lineNumbers}
       {...props}
+      className={classNames(`cm-s-p5-${theme}`, props.className)}
       ref={ref}
     />
   );

Diff for: client/modules/CodeMirror/CoreStyled.jsx

@@ -131,7 +131,7 @@ const p5LightCodemirrorTheme = EditorView.theme(
     '.cm-p5-variable': {
       color: pink
     },
-    '.CodeMirror-foldmarker': {
+    '.cm-foldPlaceholder': {
       backgroundColor: grays.dark,
       color: colors.white
     },

Diff for: client/modules/CodeMirror/_p5-light-codemirror-theme.js

@@ -0,0 +1,50 @@
+import { EditorView } from '@codemirror/view';
+import { remSize } from '../../theme';
+
+const lintStyleOverrides = EditorView.baseTheme({
+  '.cm-gutter-lint': {
+    '& .cm-gutterElement': {
+      padding: 0,
+      '& .cm-lint-marker': {
+        width: '100%',
+        height: '100%',
+        opacity: 0.2
+      },
+      '& .cm-lint-marker-error': {
+        content: 'none',
+        backgroundColor: 'rgb(255, 95, 82)'
+      },
+      '& .cm-lint-marker-warning': {
+        content: 'none',
+        backgroundColor: 'rgb(255, 190, 5)'
+      }
+    }
+  }
+});
+// TODO: lintPoint, zig-zag underline
+
+const foldStyleOverrides = EditorView.baseTheme({
+  '.cm-foldGutter .cm-gutterElement': {
+    cursor: 'pointer',
+    textAlign: 'right',
+    color: 'rgba(0,0,0,0.2)' // TODO: correct color based on theme
+  },
+  '.cm-foldPlaceholder': {
+    // TODO: is currently in _editor.scss
+  }
+});
+
+const baseP5Theme = EditorView.baseTheme({
+  '.cm-scroller': {
+    fontFamily: 'Inconsolata, monospace'
+  },
+  '.cm-gutters': {
+    width: remSize(48)
+  },
+  '.cm-gutter': {
+    width: '100%',
+    position: 'absolute'
+  }
+});
+
+export default [lintStyleOverrides, foldStyleOverrides, baseP5Theme];

Diff for: client/modules/CodeMirror/baseTheme.js

@@ -0,0 +1,28 @@
+import { autocompletion, completeFromList } from '@codemirror/autocomplete';
+import {
+  p5FunctionKeywords,
+  p5VariableKeywords
+} from '../../utils/p5-keywords';
+
+const p5AutocompleteSource = completeFromList(
+  Object.keys(p5FunctionKeywords)
+    .map((keyword) => ({
+      label: keyword,
+      type: 'function',
+      boost: 99 // TODO: detail
+    }))
+    .concat(
+      Object.keys(p5VariableKeywords).map((keyword) => ({
+        label: keyword,
+        type: 'constant',
+        boost: 50 // TODO: detail
+      }))
+    )
+);
+
+// TODO: only if language is js!!
+const p5AutocompleteExt = autocompletion({
+  override: [p5AutocompleteSource] // TODO: include native JS
+});
+
+export default p5AutocompleteExt;

Diff for: client/modules/CodeMirror/p5Autocomplete.js

@@ -0,0 +1,75 @@
+import { EditorView, Decoration } from '@codemirror/view';
+import {
+  StateEffect,
+  StateField,
+  RangeSet,
+  RangeSetBuilder
+} from '@codemirror/state';
+
+export const setRuntimeErrorsEffect = StateEffect.define();
+
+export const clearRuntimeErrorsEffect = StateEffect.define();
+
+export const clearRuntimeErrors = (view) => {
+  view.dispatch({
+    effects: clearRuntimeErrorsEffect.of()
+  });
+  return true; // TODO: only return true if there were errors to clear.
+};
+
+const lineError = Decoration.line({
+  attributes: { class: 'line-runtime-error' }
+});
+
+function createDecorations(errors, doc) {
+  console.log('creating', errors);
+  const builder = new RangeSetBuilder();
+  errors.forEach((error) => {
+    const line = doc.line(error.line);
+    // Could add additional deco with the character range of the error.
+    builder.add(line.from, line.to, lineError);
+  });
+  return builder.finish();
+}
+
+const emptyState = () => {
+  console.log('cleared error deco');
+  return {
+    lastClearedTime: Date.now(),
+    decorations: RangeSet.empty
+  };
+};
+
+const runtimeErrorState = StateField.define({
+  create() {
+    return emptyState();
+  },
+  update(prevState, transaction) {
+    let state = prevState;
+
+    if (transaction.docChanged) {
+      state = emptyState();
+    }
+
+    transaction.effects.forEach((effect) => {
+      if (effect.is(setRuntimeErrorsEffect)) {
+        state.decorations = createDecorations(
+          [effect.value],
+          transaction.state.doc
+        );
+      } else if (effect.is(clearRuntimeErrorsEffect)) {
+        state = emptyState();
+      }
+    });
+
+    console.log('decorations', state.decorations.size);
+
+    return state;
+  },
+  provide: (field) =>
+    EditorView.decorations.from(field, (state) => state.decorations)
+});
+
+export default runtimeErrorState;
+
+// Can also define plugin with   EditorView.decorations.compute()

Diff for: client/modules/CodeMirror/runtimeErrors.js

@@ -1,10 +1,20 @@
 /**
  * @param {import('@codemirror/view').EditorView} editor
  * @param {string} content
+ * @return {void}
  */
 // eslint-disable-next-line import/prefer-default-export
 export function replaceContent(editor, content) {
   editor.dispatch({
     changes: { from: 0, to: editor.state.doc.length, insert: content }
   });
 }
+
+/**
+ * @param {import('@codemirror/view').EditorView} editor
+ * @return {number}
+ */
+export function cursorLineNumber(editor) {
+  const cursor = editor.state.selection.main.head;
+  return editor.state.doc.lineAt(cursor).number;
+}

Diff for: client/modules/CodeMirror/util.js

@@ -273,9 +273,8 @@ const Console = () => {
             key={`${theme}-${fontSize}`}
           />
         </div>
-        {isExpanded && isPlaying && false && (
+        {isExpanded && isPlaying && (
           <ConsoleInput
-            theme={theme}
             dispatchConsoleEvent={dispatchConsoleEvent}
             fontSize={fontSize}
           />