From fcc47fda86b05024b763a1fd63ccb3c87797e828 Mon Sep 17 00:00:00 2001 From: Connie Ye Date: Tue, 17 Mar 2026 14:20:45 -0700 Subject: [PATCH] Import my modified colorpicker library works on javascript and has a few UX improvements! --- .../IDE/components/Editor/stateUtils.js | 10 +- package-lock.json | 121 +++++++----------- package.json | 4 +- 3 files changed, 56 insertions(+), 79 deletions(-) diff --git a/client/modules/IDE/components/Editor/stateUtils.js b/client/modules/IDE/components/Editor/stateUtils.js index e3a90e813a..245eb4c89b 100644 --- a/client/modules/IDE/components/Editor/stateUtils.js +++ b/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); diff --git a/package-lock.json b/package-lock.json index f89c3fef0f..2572067036 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,7 +26,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", @@ -37,7 +38,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", @@ -6665,19 +6665,22 @@ } }, "node_modules/@codemirror/state": { - "version": "6.5.2", - "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.2.tgz", - "integrity": "sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==", + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.6.0.tgz", + "integrity": "sha512-4nbvra5R5EtiCzr9BTHiTLc+MLXK2QGiAVYMyi8PkQd3SR+6ixar/Q/01Fa21TBIDOZXgeWV4WppsQolSreAPQ==", + "license": "MIT", "dependencies": { "@marijn/find-cluster-break": "^1.0.0" } }, "node_modules/@codemirror/view": { - "version": "6.36.5", - "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.36.5.tgz", - "integrity": "sha512-cd+FZEUlu3GQCYnguYm3EkhJ8KJVisqqUsCOKedBoAt/d9c76JUUap6U0UrpElln5k6VyrEOYliMuDAKIeDQLg==", + "version": "6.40.0", + "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.40.0.tgz", + "integrity": "sha512-WA0zdU7xfF10+5I3HhUUq3kqOx3KjqmtQ9lqZjfK7jtYk4G72YW9rezcSywpaUMCWOMlq+6E0pO1IWg1TNIhtg==", + "license": "MIT", "dependencies": { - "@codemirror/state": "^6.5.0", + "@codemirror/state": "^6.6.0", + "crelt": "^1.0.6", "style-mod": "^4.1.0", "w3c-keyname": "^2.2.4" } @@ -6692,6 +6695,22 @@ "node": ">=0.1.90" } }, + "node_modules/@connieye/codemirror-color-picker": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@connieye/codemirror-color-picker/-/codemirror-color-picker-1.0.3.tgz", + "integrity": "sha512-e22W5t1kT8l0MCvYayax51QFdhEr/6P+TMb6+gEpDuEeNpIoxK9NE1aLrFUCgN8fhsefv1qo8bfr4BbL/od2Pw==", + "license": "MIT", + "dependencies": { + "colors-named": "^1.0.0", + "colors-named-hex": "^1.0.0", + "hsl-matcher": "^1.2.3" + }, + "peerDependencies": { + "@codemirror/language": ">=6.0.0", + "@codemirror/state": ">=6.0.0", + "@codemirror/view": ">=6.40.0" + } + }, "node_modules/@csstools/convert-colors": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz", @@ -16020,24 +16039,6 @@ "url": "https://opencollective.com/typescript-eslint" } }, - "node_modules/@uiw/codemirror-extensions-color": { - "version": "4.23.12", - "resolved": "https://registry.npmjs.org/@uiw/codemirror-extensions-color/-/codemirror-extensions-color-4.23.12.tgz", - "integrity": "sha512-jpcSGG4yNkh+wM1/ImRIK5n22d6ubwCKvLQ29a6B1IFB5ojZUCXWt/hJN0LW02SrGrZtuUuH2p3eUVIKQ9MDPQ==", - "dependencies": { - "colors-named": "^1.0.0", - "colors-named-hex": "^1.0.0", - "hsl-matcher": "^1.2.3" - }, - "funding": { - "url": "https://jaywcjlove.github.io/#/sponsor" - }, - "peerDependencies": { - "@codemirror/language": ">=6.0.0", - "@codemirror/state": ">=6.0.0", - "@codemirror/view": ">=6.0.0" - } - }, "node_modules/@webassemblyjs/ast": { "version": "1.12.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz", @@ -26275,24 +26276,6 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/jest-circus/node_modules/babel-plugin-macros": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", - "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "@babel/runtime": "^7.12.5", - "cosmiconfig": "^7.0.0", - "resolve": "^1.19.0" - }, - "engines": { - "node": ">=10", - "npm": ">=6" - } - }, "node_modules/jest-circus/node_modules/chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -44710,19 +44693,20 @@ } }, "@codemirror/state": { - "version": "6.5.2", - "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.2.tgz", - "integrity": "sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==", + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.6.0.tgz", + "integrity": "sha512-4nbvra5R5EtiCzr9BTHiTLc+MLXK2QGiAVYMyi8PkQd3SR+6ixar/Q/01Fa21TBIDOZXgeWV4WppsQolSreAPQ==", "requires": { "@marijn/find-cluster-break": "^1.0.0" } }, "@codemirror/view": { - "version": "6.36.5", - "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.36.5.tgz", - "integrity": "sha512-cd+FZEUlu3GQCYnguYm3EkhJ8KJVisqqUsCOKedBoAt/d9c76JUUap6U0UrpElln5k6VyrEOYliMuDAKIeDQLg==", + "version": "6.40.0", + "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.40.0.tgz", + "integrity": "sha512-WA0zdU7xfF10+5I3HhUUq3kqOx3KjqmtQ9lqZjfK7jtYk4G72YW9rezcSywpaUMCWOMlq+6E0pO1IWg1TNIhtg==", "requires": { - "@codemirror/state": "^6.5.0", + "@codemirror/state": "^6.6.0", + "crelt": "^1.0.6", "style-mod": "^4.1.0", "w3c-keyname": "^2.2.4" } @@ -44734,6 +44718,16 @@ "dev": true, "optional": true }, + "@connieye/codemirror-color-picker": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@connieye/codemirror-color-picker/-/codemirror-color-picker-1.0.3.tgz", + "integrity": "sha512-e22W5t1kT8l0MCvYayax51QFdhEr/6P+TMb6+gEpDuEeNpIoxK9NE1aLrFUCgN8fhsefv1qo8bfr4BbL/od2Pw==", + "requires": { + "colors-named": "^1.0.0", + "colors-named-hex": "^1.0.0", + "hsl-matcher": "^1.2.3" + } + }, "@csstools/convert-colors": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz", @@ -51522,16 +51516,6 @@ "eslint-visitor-keys": "^3.3.0" } }, - "@uiw/codemirror-extensions-color": { - "version": "4.23.12", - "resolved": "https://registry.npmjs.org/@uiw/codemirror-extensions-color/-/codemirror-extensions-color-4.23.12.tgz", - "integrity": "sha512-jpcSGG4yNkh+wM1/ImRIK5n22d6ubwCKvLQ29a6B1IFB5ojZUCXWt/hJN0LW02SrGrZtuUuH2p3eUVIKQ9MDPQ==", - "requires": { - "colors-named": "^1.0.0", - "colors-named-hex": "^1.0.0", - "hsl-matcher": "^1.2.3" - } - }, "@webassemblyjs/ast": { "version": "1.12.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz", @@ -58983,19 +58967,6 @@ "color-convert": "^2.0.1" } }, - "babel-plugin-macros": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", - "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", - "dev": true, - "optional": true, - "peer": true, - "requires": { - "@babel/runtime": "^7.12.5", - "cosmiconfig": "^7.0.0", - "resolve": "^1.19.0" - } - }, "chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", diff --git a/package.json b/package.json index bfe2322645..db74a9bf14 100644 --- a/package.json +++ b/package.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",