@pie-lib/editable-html 9.5.13 → 10.0.0-beta.1

package/src/editor.jsx

@@ -1,21 +1,327 @@
-import { Editor as SlateEditor, findNode, getEventRange, getEventTransfer } from 'slate-react';
-import SlateTypes from 'slate-prop-types';
+import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
+import {
+  Editor as OldSlateEditor,
+  findNode,
+  getEventRange,
+  getEventTransfer,
+  useSlateStatic
+} from 'slate-react';
+import RootRef from '@material-ui/core/RootRef';
 
 import isEqual from 'lodash/isEqual';
-import * as serialization from './serialization';
+import * as serialization from './new-serialization';
 import PropTypes from 'prop-types';
-import React from 'react';
 import { Value, Block, Inline } from 'slate';
-import { buildPlugins, ALL_PLUGINS, DEFAULT_PLUGINS } from './plugins';
+import { ALL_PLUGINS, DEFAULT_PLUGINS, buildPlugins, withPlugins } from './plugins';
 import debug from 'debug';
 import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
 import { color } from '@pie-lib/render-ui';
 import Plain from 'slate-plain-serializer';
 
-import { getBase64 } from './serialization';
+import { getBase64, htmlToValue, valueToHtml } from './new-serialization';
 import InsertImageHandler from './plugins/image/insert-image-handler';
 
+import isHotkey from 'is-hotkey';
+import { Editable, useFocused, withReact, useSlate, Slate } from 'slate-react';
+import { Editor, Transforms, createEditor, Element as SlateElement } from 'slate';
+import { withHistory } from 'slate-history';
+import { MathPreview } from '@pie-lib/math-toolbar';
+
+import { Button, Icon, Toolbar } from './components';
+import EditorAndToolbar from './plugins/toolbar/editor-and-toolbar';
+
+const HOTKEYS = {
+  'mod+b': 'bold',
+  'mod+i': 'italic',
+  'mod+u': 'underline',
+  'mod+`': 'code'
+};
+
+const LIST_TYPES = ['numbered-list', 'bulleted-list'];
+const TEXT_ALIGN_TYPES = ['left', 'center', 'right', 'justify'];
+
+const initialValue = [
+  {
+    type: 'paragraph',
+    children: [
+      {
+        type: 'math',
+        data: {
+          latex: '\\frac{1}{2}',
+          wrapper: 'round_brackets'
+        },
+        children: [
+          {
+            text: '\\(\\frac{1}{2}\\)'
+          }
+        ]
+      }
+    ]
+  }
+];
+
+const SlateEditor = editorProps => {
+  const { value, plugins } = editorProps;
+  const renderElement = useCallback(props => <Element {...props} plugins={plugins} />, []);
+  const renderLeaf = useCallback(props => <Leaf {...props} />, []);
+  const editor = useMemo(() => withPlugins(createEditor(), plugins), []);
+  const [isFocused, setIsFocused] = useState(false);
+  const editorRef = useRef(null);
+
+  useEffect(() => {
+    if (editorProps.onEditor) {
+      editorProps.onEditor(editor);
+    }
+  }, [editor]);
+
+  const slateValue = useMemo(() => {
+    // Slate throws an error if the value on the initial render is invalid
+    // so we directly set the value on the editor in order
+    // to be able to trigger normalization on the initial value before rendering
+    editor.children = value;
+    Editor.normalize(editor, { force: true });
+    // We return the normalized internal value so that the rendering can take over from here
+    return editor.children;
+  }, [editor, value]);
+
+  const onKeyDown = event => {
+    if (event.key === 'Enter' && event.shiftKey === true) {
+      editor.insertText('\n');
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    for (const hotkey in HOTKEYS) {
+      if (isHotkey(hotkey, event)) {
+        event.preventDefault();
+        const mark = HOTKEYS[hotkey];
+        toggleMark(editor, mark);
+      }
+    }
+  };
+  const onFocus = () => setIsFocused(true);
+  const onBlur = () => {
+    setTimeout(() => {
+      if (!editorRef.current || !editorRef.current.contains(document.activeElement)) {
+        setIsFocused(false);
+      }
+    }, 50);
+  };
+
+  return (
+    <Slate editor={editor} value={slateValue}>
+      <RootRef rootRef={editorRef}>
+        <EditorAndToolbar
+          {...editorProps}
+          editor={editor}
+          isFocused={isFocused}
+          onDone={() => {
+            setIsFocused(false);
+            editorProps.onDone(editor);
+          }}
+        >
+          <Editable
+            renderElement={renderElement}
+            renderLeaf={renderLeaf}
+            placeholder="Enter some rich text…"
+            spellCheck
+            onKeyDown={onKeyDown}
+            onFocus={onFocus}
+            onBlur={onBlur}
+          />
+        </EditorAndToolbar>
+      </RootRef>
+    </Slate>
+  );
+};
+
+const toggleBlock = (editor, format) => {
+  const isActive = isBlockActive(
+    editor,
+    format,
+    TEXT_ALIGN_TYPES.includes(format) ? 'align' : 'type'
+  );
+  const isList = LIST_TYPES.includes(format);
+
+  Transforms.unwrapNodes(editor, {
+    match: n =>
+      !Editor.isEditor(n) &&
+      SlateElement.isElement(n) &&
+      LIST_TYPES.includes(n.type) &&
+      !TEXT_ALIGN_TYPES.includes(format),
+    split: true
+  });
+  let newProperties;
+  if (TEXT_ALIGN_TYPES.includes(format)) {
+    newProperties = {
+      align: isActive ? undefined : format
+    };
+  } else {
+    newProperties = {
+      type: isActive ? 'paragraph' : isList ? 'list_item' : format
+    };
+  }
+  Transforms.setNodes(editor, newProperties);
+
+  if (!isActive && isList) {
+    const block = { type: format, children: [] };
+    Transforms.wrapNodes(editor, block);
+  }
+};
+
+const toggleMark = (editor, format) => {
+  const isActive = isMarkActive(editor, format);
+
+  if (isActive) {
+    Editor.removeMark(editor, format);
+  } else {
+    Editor.addMark(editor, format, true);
+  }
+};
+
+const isBlockActive = (editor, format, blockType = 'type') => {
+  const { selection } = editor;
+  if (!selection) return false;
+
+  const [match] = Array.from(
+    Editor.nodes(editor, {
+      at: Editor.unhangRange(editor, selection),
+      match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n[blockType] === format
+    })
+  );
+
+  return !!match;
+};
+
+const isMarkActive = (editor, format) => {
+  const marks = Editor.marks(editor);
+  return marks ? marks[format] === true : false;
+};
+
+const Element = props => {
+  const editor = useSlateStatic();
+  const focused = useFocused();
+  const { attributes, children, element, plugins } = props;
+  const style = { textAlign: element.align };
+
+  const nodeProps = { ...attributes, ...props, node: { ...element }, children };
+  const pluginToRender = plugins.find(
+    plugin => typeof plugin.supports === 'function' && plugin.supports(element)
+  );
+
+  if (pluginToRender) {
+    return pluginToRender.renderNode({ ...nodeProps, editor, focused });
+  }
+
+  switch (element.type) {
+    case 'block-quote':
+      return (
+        <blockquote style={style} {...attributes}>
+          {children}
+        </blockquote>
+      );
+    case 'bulleted-list':
+      return (
+        <ul style={style} {...attributes}>
+          {children}
+        </ul>
+      );
+    case 'heading-one':
+      return (
+        <h1 style={style} {...attributes}>
+          {children}
+        </h1>
+      );
+    case 'heading-two':
+      return (
+        <h2 style={style} {...attributes}>
+          {children}
+        </h2>
+      );
+    case 'list-item':
+      return (
+        <li style={style} {...attributes}>
+          {children}
+        </li>
+      );
+    case 'numbered-list':
+      return (
+        <ol style={style} {...attributes}>
+          {children}
+        </ol>
+      );
+    default:
+      return (
+        <div
+          style={{
+            ...style,
+            margin: 0
+          }}
+          {...attributes}
+        >
+          {children}
+        </div>
+      );
+  }
+};
+
+const Leaf = ({ attributes, children, leaf }) => {
+  if (leaf.bold) {
+    children = <strong>{children}</strong>;
+  }
+
+  if (leaf.code) {
+    children = <code>{children}</code>;
+  }
+
+  if (leaf.italic) {
+    children = <em>{children}</em>;
+  }
+
+  if (leaf.underline) {
+    children = <u>{children}</u>;
+  }
+
+  if (leaf.strikethrough) {
+    children = <del>{children}</del>;
+  }
+
+  return <span {...attributes}>{children}</span>;
+};
+
+const BlockButton = ({ format, icon }) => {
+  const editor = useSlate();
+  return (
+    <Button
+      active={isBlockActive(editor, format, TEXT_ALIGN_TYPES.includes(format) ? 'align' : 'type')}
+      onMouseDown={event => {
+        event.preventDefault();
+        toggleBlock(editor, format);
+      }}
+    >
+      <Icon>{icon}</Icon>
+    </Button>
+  );
+};
+
+const MarkButton = ({ format, icon }) => {
+  const editor = useSlate();
+  return (
+    <Button
+      active={isMarkActive(editor, format)}
+      onMouseDown={event => {
+        event.preventDefault();
+        toggleMark(editor, format);
+      }}
+    >
+      <Icon>{icon}</Icon>
+    </Button>
+  );
+};
+
+// old-editable
+
 export { ALL_PLUGINS, DEFAULT_PLUGINS, serialization };
 
 const log = debug('editable-html:editor');
@@ -25,41 +331,44 @@ const defaultToolbarOpts = {
   alignment: 'left',
   alwaysVisible: false,
   showDone: true,
-  doneOn: 'blur',
+  doneOn: 'blur'
 };
 
 const defaultResponseAreaProps = {
   options: {},
   respAreaToolbar: () => {},
-  onHandleAreaChange: () => {},
+  onHandleAreaChange: () => {}
 };
 
 const defaultLanguageCharactersProps = [];
 
-const createToolbarOpts = (toolbarOpts, error) => {
+const createToolbarOpts = toolbarOpts => {
   return {
     ...defaultToolbarOpts,
-    ...toolbarOpts,
-    error,
+    ...toolbarOpts
   };
 };
 
-export class Editor extends React.Component {
+export class EditorComponent extends React.Component {
   static propTypes = {
     autoFocus: PropTypes.bool,
-    editorRef: PropTypes.func.isRequired,
     onRef: PropTypes.func.isRequired,
     onChange: PropTypes.func.isRequired,
+    onEditor: PropTypes.func,
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
     onKeyDown: PropTypes.func,
-    focus: PropTypes.func.isRequired,
-    value: SlateTypes.value.isRequired,
+    value: PropTypes.arrayOf(
+      PropTypes.shape({
+        type: PropTypes.string,
+        children: PropTypes.array,
+        data: PropTypes.object
+      })
+    ),
     imageSupport: PropTypes.object,
-    disableImageAlignmentButtons: PropTypes.bool,
     uploadSoundSupport: PropTypes.shape({
       add: PropTypes.func,
-      delete: PropTypes.func,
+      delete: PropTypes.func
     }),
     charactersLimit: PropTypes.number,
     width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -77,33 +386,40 @@ export class Editor extends React.Component {
     pluginProps: PropTypes.any,
     placeholder: PropTypes.string,
     responseAreaProps: PropTypes.shape({
-      type: PropTypes.oneOf(['explicit-constructed-response', 'inline-dropdown', 'drag-in-the-blank']),
+      type: PropTypes.oneOf([
+        'explicit-constructed-response',
+        'inline-dropdown',
+        'drag-in-the-blank'
+      ]),
       options: PropTypes.object,
       respAreaToolbar: PropTypes.func,
-      onHandleAreaChange: PropTypes.func,
+      onHandleAreaChange: PropTypes.func
     }),
     languageCharactersProps: PropTypes.arrayOf(
       PropTypes.shape({
         language: PropTypes.string,
         characterIcon: PropTypes.string,
-        characters: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
-      }),
+        characters: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string))
+      })
     ),
     toolbarOpts: PropTypes.shape({
       position: PropTypes.oneOf(['bottom', 'top']),
       alignment: PropTypes.oneOf(['left', 'right']),
       alwaysVisible: PropTypes.bool,
       showDone: PropTypes.bool,
-      doneOn: PropTypes.string,
+      doneOn: PropTypes.string
     }),
-    activePlugins: PropTypes.arrayOf((values) => {
-      const allValid = values.every((v) => ALL_PLUGINS.includes(v));
+    activePlugins: PropTypes.arrayOf(values => {
+      const allValid = values.every(v => ALL_PLUGINS.includes(v));
 
-      return !allValid && new Error(`Invalid values: ${values}, values must be one of [${ALL_PLUGINS.join(',')}]`);
+      return (
+        !allValid &&
+        new Error(`Invalid values: ${values}, values must be one of [${ALL_PLUGINS.join(',')}]`)
+      );
     }),
     className: PropTypes.string,
     maxImageWidth: PropTypes.number,
-    maxImageHeight: PropTypes.number,
+    maxImageHeight: PropTypes.number
   };
 
   static defaultProps = {
@@ -113,14 +429,14 @@ export class Editor extends React.Component {
     onKeyDown: () => {},
     toolbarOpts: defaultToolbarOpts,
     responseAreaProps: defaultResponseAreaProps,
-    languageCharactersProps: defaultLanguageCharactersProps,
+    languageCharactersProps: defaultLanguageCharactersProps
   };
 
   constructor(props) {
     super(props);
     this.state = {
       value: props.value,
-      toolbarOpts: createToolbarOpts(props.toolbarOpts, props.error),
+      toolbarOpts: createToolbarOpts(props.toolbarOpts)
     };
 
     this.onResize = () => {
@@ -130,31 +446,30 @@ export class Editor extends React.Component {
     this.handlePlugins(this.props);
   }
 
-  handlePlugins = (props) => {
+  handlePlugins = props => {
     const normalizedResponseAreaProps = {
       ...defaultResponseAreaProps,
-      ...props.responseAreaProps,
+      ...props.responseAreaProps
     };
 
     this.plugins = buildPlugins(props.activePlugins, {
       math: {
         onClick: this.onMathClick,
         onFocus: this.onPluginFocus,
-        onBlur: this.onPluginBlur,
+        onBlur: this.onPluginBlur
       },
       image: {
-        disableImageAlignmentButtons: props.disableImageAlignmentButtons,
         onDelete:
           props.imageSupport &&
           props.imageSupport.delete &&
           ((src, done) => {
-            props.imageSupport.delete(src, (e) => {
+            props.imageSupport.delete(src, e => {
               done(e, this.state.value);
             });
           }),
         insertImageRequested:
           props.imageSupport &&
-          ((getHandler) => {
+          (getHandler => {
             /**
              * The handler is the object through which the outer context
              * communicates file upload events like: fileChosen, cancel, progress
@@ -165,7 +480,7 @@ export class Editor extends React.Component {
         onFocus: this.onPluginFocus,
         onBlur: this.onPluginBlur,
         maxImageWidth: this.props.maxImageWidth,
-        maxImageHeight: this.props.maxImageHeight,
+        maxImageHeight: this.props.maxImageHeight
       },
       toolbar: {
         /**
@@ -174,22 +489,7 @@ export class Editor extends React.Component {
          */
         disableScrollbar: !!props.disableScrollbar,
         disableUnderline: props.disableUnderline,
-        autoWidth: props.autoWidthToolbar,
-        onDone: () => {
-          const { nonEmpty } = props;
-
-          log('[onDone]');
-          this.setState({ toolbarInFocus: false, focusedNode: null });
-          this.editor.blur();
-
-          if (nonEmpty && this.state.value.startText?.text?.length === 0) {
-            this.resetValue(true).then(() => {
-              this.onEditingDone();
-            });
-          } else {
-            this.onEditingDone();
-          }
-        },
+        autoWidth: props.autoWidthToolbar
       },
       table: {
         onFocus: () => {
@@ -199,7 +499,7 @@ export class Editor extends React.Component {
         onBlur: () => {
           log('[table:onBlur]...');
           this.onPluginBlur();
-        },
+        }
       },
       responseArea: {
         type: normalizedResponseAreaProps.type,
@@ -215,15 +515,14 @@ export class Editor extends React.Component {
         onBlur: () => {
           log('[table:onBlur]...');
           this.onPluginBlur();
-        },
+        }
       },
       languageCharacters: props.languageCharactersProps,
       media: {
         focus: this.focus,
-        createChange: () => this.state.value.change(),
         onChange: this.onChange,
-        uploadSoundSupport: props.uploadSoundSupport,
-      },
+        uploadSoundSupport: props.uploadSoundSupport
+      }
     });
   };
 
@@ -236,9 +535,9 @@ export class Editor extends React.Component {
     if (this.editor && this.props.autoFocus) {
       Promise.resolve().then(() => {
         if (this.editor) {
-          const editorDOM = document.querySelector(`[data-key="${this.editor.value.document.key}"]`);
-
-          this.editor.focus();
+          const editorDOM = document.querySelector(
+            `[data-key="${this.editor.value.document.key}"]`
+          );
 
           if (editorDOM) {
             editorDOM.focus();
@@ -250,11 +549,11 @@ export class Editor extends React.Component {
 
   componentWillReceiveProps(nextProps) {
     const { toolbarOpts } = this.state;
-    const newToolbarOpts = createToolbarOpts(nextProps.toolbarOpts, nextProps.error);
+    const newToolbarOpts = createToolbarOpts(nextProps.toolbarOpts);
 
     if (!isEqual(newToolbarOpts, toolbarOpts)) {
       this.setState({
-        toolbarOpts: newToolbarOpts,
+        toolbarOpts: newToolbarOpts
       });
     }
 
@@ -268,13 +567,13 @@ export class Editor extends React.Component {
     // so we increase the width to at least 2px in order for the user to see it
     const zeroWidthEls = document.querySelectorAll('[data-slate-zero-width="z"]');
 
-    Array.from(zeroWidthEls).forEach((el) => {
+    Array.from(zeroWidthEls).forEach(el => {
       el.style.minWidth = '2px';
       el.style.display = 'inline-block';
     });
   }
 
-  onPluginBlur = (e) => {
+  onPluginBlur = e => {
     log('[onPluginBlur]', e && e.relatedTarget);
     const target = e && e.relatedTarget;
 
@@ -285,7 +584,7 @@ export class Editor extends React.Component {
     });
   };
 
-  onPluginFocus = (e) => {
+  onPluginFocus = e => {
     log('[onPluginFocus]', e && e.target);
     const target = e && e.target;
     if (target) {
@@ -300,16 +599,24 @@ export class Editor extends React.Component {
     this.stashValue();
   };
 
-  onMathClick = (node) => {
-    this.editor.change((c) => c.collapseToStartOf(node));
+  onMathClick = node => {
     this.setState({ selectedNode: node });
   };
 
-  onEditingDone = () => {
+  onEditingDone = editor => {
     log('[onEditingDone]');
     this.setState({ stashedValue: null, focusedNode: null });
     log('[onEditingDone] value: ', this.state.value);
-    this.props.onChange(this.state.value, true);
+    this.props.onChange(editor, true);
+  };
+
+  onDone = editor => {
+    const { nonEmpty } = this.props;
+
+    log('[onDone]');
+    this.setState({ toolbarInFocus: false, focusedNode: null });
+
+    this.onEditingDone(editor);
   };
 
   /**
@@ -320,18 +627,14 @@ export class Editor extends React.Component {
   }
 
   // Allowing time for onChange to take effect if it is called
-  handleBlur = (resolve) => {
+  handleBlur = resolve => {
     const { nonEmpty } = this.props;
     const {
-      toolbarOpts: { doneOn },
+      toolbarOpts: { doneOn }
     } = this.state;
 
     this.setState({ toolbarInFocus: false, focusedNode: null });
 
-    if (this.editor) {
-      this.editor.blur();
-    }
-
     if (doneOn === 'blur') {
       if (nonEmpty && this.state.value.startText?.text?.length === 0) {
         this.resetValue(true).then(() => {
@@ -345,7 +648,7 @@ export class Editor extends React.Component {
     }
   };
 
-  onBlur = (event) => {
+  onBlur = event => {
     log('[onBlur]');
     const target = event.relatedTarget;
 
@@ -353,16 +656,16 @@ export class Editor extends React.Component {
 
     log('[onBlur] node: ', node);
 
-    return new Promise((resolve) => {
+    return new Promise(resolve => {
       this.setState(
         { preBlurValue: this.state.value, focusedNode: !node ? null : node },
-        this.handleBlur.bind(this, resolve),
+        this.handleBlur.bind(this, resolve)
       );
       this.props.onBlur(event);
     });
   };
 
-  handleDomBlur = (e) => {
+  handleDomBlur = e => {
     const editorDOM = document.querySelector(`[data-key="${this.state.value.document.key}"]`);
 
     setTimeout(() => {
@@ -372,10 +675,13 @@ export class Editor extends React.Component {
         return;
       }
 
-      const editorElement = !editorDOM || document.activeElement.closest(`[class*="${editorDOM.className}"]`);
+      const editorElement =
+        !editorDOM || document.activeElement.closest(`[class*="${editorDOM.className}"]`);
       const toolbarElement =
-        !this.toolbarRef || document.activeElement.closest(`[class*="${this.toolbarRef.className}"]`);
-      const isInCurrentComponent = this.wrapperRef.contains(editorElement) || this.wrapperRef.contains(toolbarElement);
+        !this.toolbarRef ||
+        document.activeElement.closest(`[class*="${this.toolbarRef.className}"]`);
+      const isInCurrentComponent =
+        this.wrapperRef.contains(editorElement) || this.wrapperRef.contains(toolbarElement);
 
       if (!isInCurrentComponent) {
         editorDOM.removeEventListener('blur', this.handleDomBlur);
@@ -395,7 +701,7 @@ export class Editor extends React.Component {
    * Note: The use of promises has been causing issues with MathQuill
    * */
   onFocus = () =>
-    new Promise((resolve) => {
+    new Promise(resolve => {
       const editorDOM = document.querySelector(`[data-key="${this.state.value.document.key}"]`);
 
       log('[onFocus]', document.activeElement);
@@ -443,7 +749,7 @@ export class Editor extends React.Component {
   /**
    * Reset the value if the user didn't click done.
    */
-  resetValue = (force) => {
+  resetValue = force => {
     const { value, focusedNode } = this.state;
 
     const stopReset = this.plugins.reduce((s, p) => {
@@ -459,7 +765,7 @@ export class Editor extends React.Component {
       const newValue = Value.fromJSON(this.state.stashedValue.toJSON());
 
       log('newValue: ', newValue.document);
-      return new Promise((resolve) => {
+      return new Promise(resolve => {
         setTimeout(() => {
           this.setState({ value: newValue, stashedValue: null }, () => {
             log('value now: ', this.state.value.document.toJSON());
@@ -472,16 +778,18 @@ export class Editor extends React.Component {
     }
   };
 
-  onChange = (change, done) => {
+  onChange = (editor, done) => {
     log('[onChange]');
-
-    const { value } = change;
     const { charactersLimit } = this.props;
+    const allText = Editor.string(editor, []);
 
-    if (value && value.document && value.document.text && value.document.text.length > charactersLimit) {
+    if (allText > charactersLimit) {
       return;
     }
 
+    const html = valueToHtml(editor);
+    const value = htmlToValue(html);
+
     this.setState({ value }, () => {
       log('[onChange], call done()');
 
@@ -500,15 +808,15 @@ export class Editor extends React.Component {
   };
 
   UNSAFE_componentWillReceiveProps(props) {
-    if (!props.value.document.equals(this.props.value.document)) {
+    if (!isEqual(props.value, this.props.value)) {
       this.setState({
         focus: false,
-        value: props.value,
+        value: props.value
       });
     }
   }
 
-  valueToSize = (v) => {
+  valueToSize = v => {
     if (!v) {
       return;
     }
@@ -537,11 +845,11 @@ export class Editor extends React.Component {
       width: this.valueToSize(width),
       height: this.valueToSize(height),
       minHeight: this.valueToSize(minHeight),
-      maxHeight: this.valueToSize(maxHeight),
+      maxHeight: this.valueToSize(maxHeight)
     };
   }
 
-  validateNode = (node) => {
+  validateNode = node => {
     if (node.object !== 'block') return;
 
     const last = node.nodes.last();
@@ -558,25 +866,6 @@ export class Editor extends React.Component {
     return undefined;
   };
 
-  changeData = (key, data) => {
-    log('[changeData]. .. ', key, data);
-
-    /**
-     * HACK ALERT: We should be calling setState here and storing the change data:
-     *
-     * <code>this.setState({changeData: { key, data}})</code>
-     * However this is causing issues with the Mathquill instance. The 'input' event stops firing on the element and no
-     * more changes get through. The issues seem to be related to the promises in onBlur/onFocus. But removing these
-     * brings it's own problems. A major clean up is planned for this component so I've decided to temporarily settle
-     * on this hack rather than spend more time on this.
-     */
-
-    // Uncomment this line to see the bug described above.
-    // this.setState({changeData: {key, data}})
-
-    this.__TEMPORARY_CHANGE_DATA = { key, data };
-  };
-
   focus = (pos, node) => {
     const position = pos || 'end';
 
@@ -592,7 +881,10 @@ export class Editor extends React.Component {
     const fragment = transfer.fragment;
     const text = transfer.text;
 
-    if (file && (file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png')) {
+    if (
+      file &&
+      (file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png')
+    ) {
       if (!this.props.imageSupport) {
         return;
       }
@@ -604,8 +896,8 @@ export class Editor extends React.Component {
           isVoid: true,
           data: {
             loading: false,
-            src,
-          },
+            src
+          }
         });
 
         if (dropContext) {
@@ -631,7 +923,7 @@ export class Editor extends React.Component {
         return;
       }
       const {
-        value: { document, selection, startBlock },
+        value: { document, selection, startBlock }
       } = change;
 
       if (startBlock.isVoid) {
@@ -642,13 +934,13 @@ export class Editor extends React.Component {
       const defaultMarks = document.getInsertMarksAtRange(selection);
       const frag = Plain.deserialize(text, {
         defaultBlock,
-        defaultMarks,
+        defaultMarks
       }).document;
       change.insertFragment(frag);
     }
   };
 
-  renderPlaceholder = (props) => {
+  renderPlaceholder = props => {
     const { editor } = props;
     const { document } = editor.value;
 
@@ -666,7 +958,7 @@ export class Editor extends React.Component {
           whiteSpace: 'nowrap',
           opacity: '0.33',
           pointerEvents: 'none',
-          userSelect: 'none',
+          userSelect: 'none'
         }}
       >
         {editor.props.placeholder}
@@ -683,7 +975,7 @@ export class Editor extends React.Component {
       className,
       placeholder,
       pluginProps,
-      onKeyDown,
+      onKeyDown
     } = this.props;
 
     const { value, focusedNode, toolbarOpts } = this.state;
@@ -693,22 +985,69 @@ export class Editor extends React.Component {
     const names = classNames(
       {
         [classes.withBg]: highlightShape,
-        [classes.toolbarOnTop]: toolbarOpts.alwaysVisible && toolbarOpts.position === 'top',
+        [classes.toolbarOnTop]: toolbarOpts.alwaysVisible && toolbarOpts.position === 'top'
       },
       className,
+      classes.slateEditor
     );
 
     return (
-      <div ref={(ref) => (this.wrapperRef = ref)} style={{ width: sizeStyle.width }} className={names}>
+      <div
+        ref={ref => (this.wrapperRef = ref)}
+        style={{ width: sizeStyle.width }}
+        className={names}
+      >
         <SlateEditor
           plugins={this.plugins}
-          innerRef={(r) => {
+          toolbarRef={r => {
             if (r) {
-              this.slateEditor = r;
+              this.toolbarRef = r;
             }
           }}
-          ref={(r) => (this.editor = r && this.props.editorRef(r))}
-          toolbarRef={(r) => {
+          onEditor={this.props.onEditor}
+          value={value}
+          focus={this.focus}
+          onKeyDown={onKeyDown}
+          onChange={this.onChange}
+          getFocusedValue={this.getFocusedValue}
+          onBlur={this.onBlur}
+          onDrop={(event, editor) => this.onDropPaste(event, editor, true)}
+          onPaste={(event, editor) => this.onDropPaste(event, editor)}
+          onFocus={this.onFocus}
+          onEditingDone={this.onEditingDone}
+          onDone={this.onDone}
+          focusedNode={focusedNode}
+          normalize={this.normalize}
+          readOnly={disabled}
+          spellCheck={spellCheck}
+          className={classNames(
+            {
+              [classes.noPadding]: toolbarOpts && toolbarOpts.noBorder
+            },
+            classes.slateEditor
+          )}
+          style={{
+            minHeight: sizeStyle.minHeight,
+            height: sizeStyle.height,
+            maxHeight: sizeStyle.maxHeight
+          }}
+          pluginProps={pluginProps}
+          toolbarOpts={toolbarOpts}
+          placeholder={placeholder}
+          renderPlaceholder={this.renderPlaceholder}
+        />
+      </div>
+    );
+
+    return (
+      <div
+        ref={ref => (this.wrapperRef = ref)}
+        style={{ width: sizeStyle.width }}
+        className={names}
+      >
+        <OldSlateEditor
+          plugins={this.plugins}
+          toolbarRef={r => {
             if (r) {
               this.toolbarRef = r;
             }
@@ -727,23 +1066,21 @@ export class Editor extends React.Component {
           normalize={this.normalize}
           readOnly={disabled}
           spellCheck={spellCheck}
-          autoCorrect={spellCheck}
           className={classNames(
             {
-              [classes.noPadding]: toolbarOpts && toolbarOpts.noBorder,
+              [classes.noPadding]: toolbarOpts && toolbarOpts.noBorder
             },
-            classes.slateEditor,
+            classes.slateEditor
           )}
           style={{
             minHeight: sizeStyle.minHeight,
             height: sizeStyle.height,
-            maxHeight: sizeStyle.maxHeight,
+            maxHeight: sizeStyle.maxHeight
           }}
           pluginProps={pluginProps}
           toolbarOpts={toolbarOpts}
           placeholder={placeholder}
           renderPlaceholder={this.renderPlaceholder}
-          onDataChange={this.changeData}
         />
       </div>
     );
@@ -753,7 +1090,7 @@ export class Editor extends React.Component {
 // TODO color - hardcoded gray background and keypad colors will need to change too
 const styles = {
   withBg: {
-    backgroundColor: 'rgba(0,0,0,0.06)',
+    backgroundColor: 'rgba(0,0,0,0.06)'
   },
   slateEditor: {
     fontFamily: 'Roboto, sans-serif',
@@ -763,10 +1100,10 @@ const styles = {
       width: '100%',
       borderCollapse: 'collapse',
       color: color.text(),
-      backgroundColor: color.background(),
+      backgroundColor: color.background()
     },
     '& table:not([border="1"]) tr': {
-      borderTop: '1px solid #dfe2e5',
+      borderTop: '1px solid #dfe2e5'
       // TODO perhaps secondary color for background, for now disable
       // '&:nth-child(2n)': {
       //   backgroundColor: '#f6f8fa'
@@ -774,18 +1111,18 @@ const styles = {
     },
     '& td, th': {
       padding: '.6em 1em',
-      textAlign: 'center',
+      textAlign: 'center'
     },
     '& table:not([border="1"]) td, th': {
-      border: '1px solid #dfe2e5',
-    },
+      border: '1px solid #dfe2e5'
+    }
   },
   toolbarOnTop: {
-    marginTop: '45px',
+    marginTop: '45px'
   },
   noPadding: {
-    padding: '0 !important',
-  },
+    padding: '0 !important'
+  }
 };
 
-export default withStyles(styles)(Editor);
+export default withStyles(styles)(EditorComponent);