added basic colorpicker

* shows a color pick option when using hex codes or rgb values
* invoke color picker using Ctrl+K

Author: ameybh

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

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

package-lock.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",