Merge pull request #1907 from ameybhavsar24/fix-#1867

Fixes #1867 - Color picker feature

Author: catarak

client/modules/IDE/components/Editor.jsx

@@ -29,6 +29,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,12 @@ class Editor extends React.Component {
       [`${metaKey}-F`]: 'findPersistent',
       [`${metaKey}-G`]: 'findPersistentNext',
       [`Shift-${metaKey}-G`]: 'findPersistentPrev',
-      [replaceCommand]: 'replace'
+      [replaceCommand]: 'replace',
+      // 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);

client/modules/IDE/components/KeyboardShortcutModal.jsx

@@ -61,6 +61,10 @@ function KeyboardShortcutModal() {
           <span className="keyboard-shortcut__command">{metaKeyName} + /</span>
           <span>{t('KeyboardShortcuts.CodeEditing.CommentLine')}</span>
         </li>
+        <li className="keyboard-shortcut-item">
+          <span className="keyboard-shortcut__command">{metaKeyName} + K</span>
+          <span>{t('KeyboardShortcuts.CodeEditing.ColorPicker')}</span>
+        </li>
       </ul>
       <h3 className="keyboard-shortcuts__title">General</h3>
       <ul className="keyboard-shortcuts__list">

client/modules/IDE/components/Toolbar.jsx

@@ -135,7 +135,7 @@ class Toolbar extends React.Component {
             onClick={() => {
               if (canEditProjectName) {
                 this.props.showEditProjectName();
-                setTimeout(() => this.projectNameInput.focus(), 0);
+                setTimeout(() => this.projectNameInput.focus(), 100);
               }
             }}
             disabled={!canEditProjectName}

client/modules/IDE/components/Toolbar.unit.test.jsx

@@ -53,7 +53,7 @@ describe('<ToolbarComponent />', () => {
     await waitFor(() => expect(props.showEditProjectName).toHaveBeenCalled());
   });
 
-  it('non-owner can\t switch to sketch editing mode', async () => {
+  it("non-owner can't switch to sketch editing mode", async () => {
     const props = renderComponent({ currentUser: 'not-me' });
     const sketchName = screen.getByLabelText('Edit sketch name');
 

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';