add color picker

package.json

@@ -9,6 +9,7 @@
     "ramda": "^0.27.0",
     "react": "^16.2.0",
     "react-async-hook": "^3.6.1",
+    "react-color": "^2.18.1",
     "react-dom": "^16.2.0",
     "react-icons": "^3.10.0",
     "react-scripts": "1.1.1",

src/text-editor/plugins/color-picker/ColorPicker.css

@@ -0,0 +1,22 @@
+.color-picker {
+  position: relative;
+  display: inline-block;
+}
+
+.color-picker__button {
+  background-color: transparent;
+  border: none;
+  padding: 5px 5px;
+}
+
+.color-picker__button:hover {
+  background-color: lightgrey;
+}
+
+.color-picker__content {
+  position: absolute;
+  top: 35px;
+  left: -8px;
+  z-index: 2;
+}
+

src/text-editor/plugins/color-picker/ColorPicker.js

@@ -0,0 +1,44 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { GithubPicker } from 'react-color';
+import { FaPalette } from 'react-icons/fa';
+import './ColorPicker.css';
+import { EditorSelectionContext } from '../../TextEditor';
+import useConstant from 'use-constant';
+
+function ColorPicker() {
+  const [opened, setOpened] = useState(false);
+  const [color, setColor] = useState(null);
+  const editorSelectionContext = useContext(EditorSelectionContext);
+
+  const selectionChangeListener = useConstant(() => () => setColor(document.queryCommandValue('foreColor')));
+
+  useEffect(
+    () => editorSelectionContext.registerSelectionChangeListener(selectionChangeListener),
+    []
+  );
+
+  const onColorSelected = (color) => {
+    document.execCommand('styleWithCSS', true);
+    document.execCommand('foreColor', true, color.hex);
+    document.execCommand('styleWithCSS', false);
+    setOpened(false);
+  }
+  return (
+    <div className="color-picker">
+      <button
+        type="button"
+        className="color-picker__button"
+        onClick={() => setOpened(!opened)}
+      >
+        <FaPalette color={color}/>
+      </button>
+      {opened && (
+        <div className="color-picker__content" onMouseDown={e => e.preventDefault()}>
+          <GithubPicker onChangeComplete={onColorSelected}/>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ColorPicker;

src/text-editor/plugins/color-picker/index.js

@@ -0,0 +1,5 @@
+import ColorPicker from './ColorPicker';
+
+export const COLOR_PICKER_PLUGIN_CONFIG = [{
+  component: ColorPicker
+}];

src/text-editor/plugins/index.js

@@ -1,9 +1,11 @@
 import { SIMPLE_ACTION_PLUGIN_CONFIG } from './simple-action';
 import { SYNONYMS_ACTION_PLUGIN_CONFIG } from './synonyms';
+import { COLOR_PICKER_PLUGIN_CONFIG } from './color-picker';
 
 const PLUGINS = [
   ...SIMPLE_ACTION_PLUGIN_CONFIG,
-  ...SYNONYMS_ACTION_PLUGIN_CONFIG
+  ...SYNONYMS_ACTION_PLUGIN_CONFIG,
+  ...COLOR_PICKER_PLUGIN_CONFIG
 ];
 
 export default PLUGINS;