Merge pull request #4006 from processing/cm6-color-picker-import

[codemirror6] Fix color picker to work in Javascript

Author: raclim

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

@@ -37,7 +37,6 @@ import {
   indentLess
 } from '@codemirror/commands';
 import { lintGutter } from '@codemirror/lint';
-import { color as colorPicker } from '@uiw/codemirror-extensions-color';
 import {
   expandAbbreviation,
   abbreviationTracker
@@ -52,6 +51,7 @@ import { JSHINT } from 'jshint';
 import { HTMLHint } from 'htmlhint';
 import { CSSLint } from 'csslint';
 import { emmetConfig } from '@emmetio/codemirror6-plugin';
+import { color as colorPicker } from '@connieye/codemirror-color-picker';
 
 import p5JavaScript from './p5JavaScript';
 import { tidyCodeWithPrettier } from './tidier';
@@ -336,13 +336,19 @@ export function createNewFileState(filename, document, settings) {
     // Misc extensions
     indentOnInput(),
     bracketMatching(),
-    colorPicker,
     errorDecorationStateField,
 
     // Setup the event listeners on the CodeMirror instance.
     EditorView.updateListener.of(onViewUpdate)
   ];
 
+  // Only enable the color picker for Javascript and CSS, which
+  // have both been tested.
+  const fileMode = getFileMode(filename);
+  if (fileMode === 'javascript' || fileMode === 'css') {
+    extensions.push(colorPicker);
+  }
+
   const fileLanguage = getFileLanguage(filename);
   const fileLinter = getFileLinter(filename, onUpdateLinting);
   const fileEmmetConfig = getFileEmmetConfig(filename);

package-lock.json

@@ -229,7 +229,8 @@
     "@codemirror/lint": "^6.8.5",
     "@codemirror/search": "^6.5.11",
     "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.36.5",
+    "@codemirror/view": "^6.40.0",
+    "@connieye/codemirror-color-picker": "^1.0.3",
     "@emmetio/codemirror-plugin": "^1.2.4",
     "@emmetio/codemirror6-plugin": "^0.4.0",
     "@gatsbyjs/webpack-hot-middleware": "^2.25.3",
@@ -240,7 +241,6 @@
     "@redux-devtools/log-monitor": "^4.0.2",
     "@reduxjs/toolkit": "^1.9.3",
     "@types/express": "^5.0.3",
-    "@uiw/codemirror-extensions-color": "^4.23.12",
     "acorn": "^8.14.1",
     "acorn-walk": "^8.3.4",
     "async": "^3.2.3",