fix: restored p5.js keyword highlighting for CM6 #3868

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

@@ -0,0 +1,50 @@
+import { ViewPlugin, Decoration } from '@codemirror/view';
+import { RangeSetBuilder } from '@codemirror/state';
+import { syntaxTree } from '@codemirror/language';
+import {
+  p5FunctionKeywords,
+  p5VariableKeywords
+} from '../../../../utils/p5-keywords';
+
+const p5Functions = new Set(Object.keys(p5FunctionKeywords));
+const p5Variables = new Set(Object.keys(p5VariableKeywords));
+
+const p5FunctionMark = Decoration.mark({ class: 'cm-p5-function' });
+const p5VariableMark = Decoration.mark({ class: 'cm-p5-variable' });
+
+function buildDecorations(view) {
+  const builder = new RangeSetBuilder();
+  view.visibleRanges.forEach(({ from, to }) => {
+    syntaxTree(view.state).iterate({
+      from,
+      to,
+      enter(node) {
+        const isVariable = node.name === 'VariableName';
+        const isDefinition = node.name === 'VariableDefinition';
+        if (!isVariable && !isDefinition) return;
+        const name = view.state.doc.sliceString(node.from, node.to);
+        if (p5Functions.has(name)) {
+          builder.add(node.from, node.to, p5FunctionMark);
+        } else if (p5Variables.has(name)) {
+          builder.add(node.from, node.to, p5VariableMark);
+        }
+      }
+    });
+  });
+  return builder.finish();
+}
+
+export const p5Highlight = ViewPlugin.fromClass(
+  class {
+    constructor(view) {
+      this.decorations = buildDecorations(view);
+    }
+
+    update(update) {
+      if (update.docChanged || update.viewportChanged) {
+        this.decorations = buildDecorations(update.view);
+      }
+    }
+  },
+  { decorations: (v) => v.decorations }
+);

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

@@ -59,6 +59,7 @@ import { Linter as ESLinter } from 'eslint-linter-browserify';
 import { tidyCodeWithPrettier } from './tidier';
 import p5JavaScript from './p5JavaScript';
 import { highlightStyle } from './highlightStyle';
+import { p5Highlight } from './p5Highlight';
 import { errorDecorationStateField } from './consoleErrorDecoration';
 
 // ----- TODOS -----
@@ -446,6 +447,7 @@ export function createNewFileState(filename, document, settings) {
     highlightSpecialChars(),
     highlightSelectionMatches(),
     syntaxHighlighting(highlightStyle),
+    p5Highlight,
     // Selection extensions
     drawSelection(),
     rectangularSelection(),

client/styles/components/_editor.scss

@@ -306,7 +306,20 @@
 // contentSeparator, monospace, strikethrough, inserted, deleted, changed, invalid, meta,
 // documentMeta, annotation, processingInstruction, standard, special, macroName
 
-// TODO(connie): Add p5 specific highlighting styles, like .cm-p5-function, .cm-p5-variable
+.cm-p5-function,
+.cm-p5-function .cm-variable {
+  @include themify() {
+    color: getThemifyVariable('highlight-style-variable-color');
+    font-weight: bold;
+  }
+}
+
+.cm-p5-variable,
+.cm-p5-variable .cm-variable {
+  @include themify() {
+    color: getThemifyVariable('highlight-style-atom-color');
+  }
+}
 
 // Additional matching selection styling
 .cm-matchingBracket {