From 17e23e25e1200da5f4c8d55fc8ac6a2c1999bbce Mon Sep 17 00:00:00 2001 From: Amey Bhavsar <28699912+ameybhavsar24@users.noreply.github.com> Date: Tue, 20 Jul 2021 12:49:32 +0530 Subject: [PATCH 1/4] added basic colorpicker * shows a color pick option when using hex codes or rgb values * invoke color picker using Ctrl+K --- client/modules/IDE/components/Editor.jsx | 8 +++- client/styles/main.scss | 1 + package-lock.json | 54 ++++++++++++++++++++---- package.json | 1 + 4 files changed, 55 insertions(+), 9 deletions(-) diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx index e7e82fa8ae..a22f711882 100644 --- a/client/modules/IDE/components/Editor.jsx +++ b/client/modules/IDE/components/Editor.jsx @@ -28,6 +28,7 @@ import 'codemirror/addon/search/jump-to-line'; import 'codemirror/addon/edit/matchbrackets'; import 'codemirror/addon/edit/closebrackets'; import 'codemirror/addon/selection/mark-selection'; +import 'codemirror-colorpicker'; import { JSHINT } from 'jshint'; import { CSSLint } from 'csslint'; @@ -124,6 +125,10 @@ class Editor extends React.Component { '-W041': false, esversion: 7 } + }, + colorpicker: { + type: 'sketch', + mode: 'edit' } }); @@ -149,7 +154,8 @@ class Editor extends React.Component { [`${metaKey}-F`]: 'findPersistent', [`${metaKey}-G`]: 'findPersistentNext', [`Shift-${metaKey}-G`]: 'findPersistentPrev', - [replaceCommand]: 'replace' + [replaceCommand]: 'replace', + [`${metaKey}-K`]: (cm, event) => cm.state.colorpicker.popup_color_picker() }); this.initializeDocuments(this.props.files); diff --git a/client/styles/main.scss b/client/styles/main.scss index b9e4fa53c4..5df987a1b9 100644 --- a/client/styles/main.scss +++ b/client/styles/main.scss @@ -8,6 +8,7 @@ @import 'node_modules/codemirror/lib/codemirror'; @import 'node_modules/codemirror/addon/lint/lint'; +@import 'node_modules/codemirror-colorpicker/addon/codemirror-colorpicker'; @import 'node_modules/dropzone/dist/dropzone'; @import 'node_modules/primer-tooltips/build/build'; diff --git a/package-lock.json b/package-lock.json index 007c2f504b..be328d9fda 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7566,7 +7566,8 @@ }, "ssri": { "version": "7.1.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/ssri/-/ssri-7.1.0.tgz", + "integrity": "sha512-77/WrDZUWocK0mvA5NTRQyveUf+wsrIc6vyrxpS8tVvYBcX215QbafrJR3KtkpskIzoFLqqNuuYQvxaMjXJ/0g==", "dev": true, "requires": { "figgy-pudding": "^3.5.1", @@ -9694,7 +9695,8 @@ }, "browserslist": { "version": "4.16.1", - "resolved": "", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.1.tgz", + "integrity": "sha512-UXhDrwqsNcpTYJBTZsbGATDxZbiVDsx6UjpmRUmtnP10pr8wAYr5LgFoEFw9ixriQH2mv/NX2SfGzE/o8GndLA==", "dev": true, "requires": { "caniuse-lite": "^1.0.30001173", @@ -12863,7 +12865,8 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "" + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", + "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==" } } }, @@ -13919,6 +13922,11 @@ "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.58.2.tgz", "integrity": "sha512-K/hOh24cCwRutd1Mk3uLtjWzNISOkm4fvXiMO7LucCrqbh6aJDdtqUziim3MZUI6wOY0rvY1SlL1Ork01uMy6w==" }, + "codemirror-colorpicker": { + "version": "1.9.72", + "resolved": "https://registry.npmjs.org/codemirror-colorpicker/-/codemirror-colorpicker-1.9.72.tgz", + "integrity": "sha512-ZD8IenGqnj3gfutn2mxuinvEkBZnLJalcs/v6809KQe7UjevYrwx0BWSmXpp/kHp/o/cpoSrdUnrlkaI6d8t5Q==" + }, "collapse-white-space": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.6.tgz", @@ -19578,7 +19586,8 @@ }, "ini": { "version": "1.3.5", - "resolved": "", + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", + "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "optional": true }, "is-fullwidth-code-point": { @@ -27277,6 +27286,12 @@ "package-json": "^6.3.0" } }, + "lazy-cache": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz", + "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=", + "dev": true + }, "lazy-universal-dotenv": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/lazy-universal-dotenv/-/lazy-universal-dotenv-3.0.1.tgz", @@ -28486,7 +28501,8 @@ }, "merge-deep": { "version": "3.0.2", - "resolved": "", + "resolved": "https://registry.npmjs.org/merge-deep/-/merge-deep-3.0.2.tgz", + "integrity": "sha512-T7qC8kg4Zoti1cFd8Cr0M+qaZfOwjlPDEdZIIPPB2JZctjaPM4fX+i7HOId69tAti2fvO6X5ldfYUONDODsrkA==", "dev": true, "requires": { "arr-union": "^3.1.0", @@ -28503,6 +28519,7 @@ "for-own": "^0.1.3", "is-plain-object": "^2.0.1", "kind-of": "^3.0.2", + "lazy-cache": "^1.0.3", "shallow-clone": "^0.1.2" } }, @@ -28514,7 +28531,8 @@ "requires": { "is-extendable": "^0.1.1", "kind-of": "^2.0.1", - "lazy-cache": "^0.2.3" + "lazy-cache": "^0.2.3", + "mixin-object": "^2.0.1" }, "dependencies": { "kind-of": { @@ -28858,6 +28876,24 @@ } } }, + "mixin-object": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/mixin-object/-/mixin-object-2.0.1.tgz", + "integrity": "sha1-T7lJRB2rGCVA8f4DW6YOGUel5X4=", + "dev": true, + "requires": { + "for-in": "^0.1.3", + "is-extendable": "^0.1.1" + }, + "dependencies": { + "for-in": { + "version": "0.1.8", + "resolved": "https://registry.npmjs.org/for-in/-/for-in-0.1.8.tgz", + "integrity": "sha1-2Hc5COMSVhCZUrH9ubP6hn0ndeE=", + "dev": true + } + } + }, "mjml": { "version": "3.3.5", "resolved": "https://registry.npmjs.org/mjml/-/mjml-3.3.5.tgz", @@ -37644,7 +37680,8 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "" + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", + "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==" } } }, @@ -42214,7 +42251,8 @@ }, "ws": { "version": "7.3.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/ws/-/ws-7.3.0.tgz", + "integrity": "sha512-iFtXzngZVXPGgpTlP1rBqsUK82p9tKqsWRPg5L56egiljujJT3vGAYnHANvFxBieXrTFavhzhxW52jnaWV+w2w==", "dev": true }, "xdg-basedir": { diff --git a/package.json b/package.json index 210164bd6c..cc2d46a1d9 100644 --- a/package.json +++ b/package.json @@ -156,6 +156,7 @@ "classnames": "^2.2.6", "clipboard": "^1.7.1", "codemirror": "^5.58.2", + "codemirror-colorpicker": "^1.9.72", "connect-mongo": "^1.3.2", "console-feed": "^2.8.11", "cookie-parser": "^1.4.3", From c908282516c85ab3854653a8cc243bf9c4a5037a Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Tue, 12 Oct 2021 15:36:26 -0400 Subject: [PATCH 2/4] [#1867] Fix default color bug, add to keyboard shortcuts --- client/modules/IDE/components/Editor.jsx | 6 +- .../IDE/components/KeyboardShortcutModal.jsx | 4 + package-lock.json | 6538 +++++++++-------- translations/locales/en-US/translations.json | 3 +- 4 files changed, 3543 insertions(+), 3008 deletions(-) diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx index 353b8d521e..5f3c7f91e5 100644 --- a/client/modules/IDE/components/Editor.jsx +++ b/client/modules/IDE/components/Editor.jsx @@ -155,7 +155,11 @@ class Editor extends React.Component { [`${metaKey}-G`]: 'findPersistentNext', [`Shift-${metaKey}-G`]: 'findPersistentPrev', [replaceCommand]: 'replace', - [`${metaKey}-K`]: (cm, event) => cm.state.colorpicker.popup_color_picker() + // Cassie Tarakajian: If you don't set a default color, then when you + // choose a color, it deletes characters inline. This is a + // hack to prevent that. + [`${metaKey}-K`]: (cm, event) => + cm.state.colorpicker.popup_color_picker({ length: 0 }) }); this.initializeDocuments(this.props.files); diff --git a/client/modules/IDE/components/KeyboardShortcutModal.jsx b/client/modules/IDE/components/KeyboardShortcutModal.jsx index 19c0478899..bc67430a88 100644 --- a/client/modules/IDE/components/KeyboardShortcutModal.jsx +++ b/client/modules/IDE/components/KeyboardShortcutModal.jsx @@ -61,6 +61,10 @@ function KeyboardShortcutModal() { {metaKeyName} + / {t('KeyboardShortcuts.CodeEditing.CommentLine')} +
  • + {metaKeyName} + K + {t('KeyboardShortcuts.CodeEditing.ColorPicker')} +

    • General