@pie-lib/editable-html 10.0.0-beta.7 → 10.0.0

package/lib/editor.js

@@ -1,7 +1,9 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,356 +19,69 @@ Object.defineProperty(exports, "DEFAULT_PLUGINS", {
     return _plugins.DEFAULT_PLUGINS;
   }
 });
-exports.serialization = exports["default"] = exports.EditorComponent = void 0;
+exports.serialization = exports["default"] = exports.Editor = void 0;
+
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireWildcard(require("react"));
+
 var _slateReact = require("slate-react");
-var _RootRef = _interopRequireDefault(require("@material-ui/core/RootRef"));
+
+var _slatePropTypes = _interopRequireDefault(require("slate-prop-types"));
+
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
-var serialization = _interopRequireWildcard(require("./new-serialization"));
+
+var serialization = _interopRequireWildcard(require("./serialization"));
+
 exports.serialization = serialization;
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
 var _slate = require("slate");
+
 var _plugins = require("./plugins");
+
 var _debug = _interopRequireDefault(require("debug"));
+
 var _styles = require("@material-ui/core/styles");
+
 var _classnames = _interopRequireDefault(require("classnames"));
+
 var _renderUi = require("@pie-lib/render-ui");
+
 var _slatePlainSerializer = _interopRequireDefault(require("slate-plain-serializer"));
+
+var _configUi = require("@pie-lib/config-ui");
+
 var _insertImageHandler = _interopRequireDefault(require("./plugins/image/insert-image-handler"));
-var _isHotkey = _interopRequireDefault(require("is-hotkey"));
-var _components = require("./components");
-var _editorAndToolbar = _interopRequireDefault(require("./plugins/toolbar/editor-and-toolbar"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-window.Path = _slate.Path;
-window.SlateNode = _slate.Node;
-window.ReactEditor = _slateReact.ReactEditor;
-window.Editor = _slate.Editor;
-var HOTKEYS = {
-  'mod+b': 'bold',
-  'mod+i': 'italic',
-  'mod+u': 'underline',
-  'mod+`': 'code'
-};
-var LIST_TYPES = ['numbered-list', 'bulleted-list'];
-var TEXT_ALIGN_TYPES = ['left', 'center', 'right', 'justify'];
-var initialValue = [{
-  type: 'paragraph',
-  children: [{
-    type: 'math',
-    data: {
-      latex: '\\frac{1}{2}',
-      wrapper: 'round_brackets'
-    },
-    children: [{
-      text: '\\(\\frac{1}{2}\\)'
-    }]
-  }]
-}];
-var SlateEditor = function SlateEditor(editorProps) {
-  var mounted = (0, _react.useRef)(false);
-  var autoFocus = editorProps.autoFocus,
-    value = editorProps.value,
-    plugins = editorProps.plugins,
-    actionsRef = editorProps.actionsRef,
-    onEditingDone = editorProps.onEditingDone;
-  var renderElement = (0, _react.useCallback)(function (props) {
-    return /*#__PURE__*/_react["default"].createElement(Element, (0, _extends2["default"])({}, props, {
-      plugins: plugins
-    }));
-  }, []);
-  var renderLeaf = (0, _react.useCallback)(function (props) {
-    return /*#__PURE__*/_react["default"].createElement(Leaf, props);
-  }, []);
-  var editor = (0, _react.useMemo)(function () {
-    return (0, _plugins.withPlugins)((0, _slate.createEditor)(), plugins);
-  }, []);
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    isFocused = _useState2[0],
-    setIsFocused = _useState2[1];
-  var editorRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
-    mounted.current = true;
-    return function () {
-      mounted.current = false;
-    };
-  }, []);
-  (0, _react.useEffect)(function () {
-    if (editorProps.onEditor) {
-      editorProps.onEditor(editor);
-    }
-    if (autoFocus) {
-      _slate.Transforms.select(editor, [0, 0]);
-      _slateReact.ReactEditor.focus(editor);
-      if (mounted.current) {
-        setIsFocused(true);
-      }
-    }
-  }, [editor]);
-  var slateValue = (0, _react.useMemo)(function () {
-    // 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.marks = {};
-    _slate.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]);
-  window.editor = editor;
-  var onKeyDown = function onKeyDown(event) {
-    if (event.key === 'Enter' && event.shiftKey === true) {
-      editor.insertText('\n');
-      event.preventDefault();
-      event.stopPropagation();
-      return;
-    }
-    for (var hotkey in HOTKEYS) {
-      if ((0, _isHotkey["default"])(hotkey, event)) {
-        event.preventDefault();
-        var mark = HOTKEYS[hotkey];
-        toggleMark(editor, mark);
-      }
-    }
-  };
-  var onFocus = function onFocus() {
-    return setIsFocused(true);
-  };
-  var onBlur = function onBlur(e) {
-    setTimeout(function () {
-      if (!editorRef.current || !editorRef.current.contains(document.activeElement)) {
-        if (editorProps.onBlur) {
-          editorProps.onBlur(e);
-        }
-        if (mounted.current) {
-          setIsFocused(false);
-        }
-      }
-    }, 50);
-  };
-  var actions = {
-    focus: function focus(position, node) {
-      var _ref = node ? _slate.Editor.leaf(editor, _slateReact.ReactEditor.findPath(editor, node), {
-          edge: 'end'
-        }) : _slate.Editor.leaf(editor, [0], {
-          edge: 'end'
-        }),
-        _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
-        textPath = _ref2[1];
-      _slate.Transforms.select(editor, textPath);
-      _slateReact.ReactEditor.focus(editor);
-    },
-    finishEditing: function finishEditing() {
-      // if (!mounted.current) {
-      //   return;
-      // }
 
-      if (typeof onEditingDone === 'function') {
-        onEditingDone(editor);
-      }
-    }
-  };
-  if (actionsRef) {
-    actionsRef(actions);
-  }
-  return /*#__PURE__*/_react["default"].createElement(_slateReact.Slate, {
-    editor: editor,
-    initialValue: slateValue
-  }, /*#__PURE__*/_react["default"].createElement(_RootRef["default"], {
-    rootRef: editorRef
-  }, /*#__PURE__*/_react["default"].createElement(_editorAndToolbar["default"], (0, _extends2["default"])({}, editorProps, {
-    editor: editor,
-    isFocused: isFocused,
-    onDone: function onDone() {
-      setIsFocused(false);
-      document.activeElement.blur();
-      editorProps.onDone(editor);
-    }
-  }), /*#__PURE__*/_react["default"].createElement(_slateReact.Editable, {
-    renderElement: renderElement,
-    renderLeaf: renderLeaf,
-    placeholder: "Enter some rich text\u2026",
-    spellCheck: true,
-    onKeyDown: onKeyDown,
-    onFocus: onFocus,
-    onBlur: onBlur
-  }))));
-};
-var toggleBlock = function toggleBlock(editor, format) {
-  var isActive = isBlockActive(editor, format, TEXT_ALIGN_TYPES.includes(format) ? 'align' : 'type');
-  var isList = LIST_TYPES.includes(format);
-  _slate.Transforms.unwrapNodes(editor, {
-    match: function match(n) {
-      return !_slate.Editor.isEditor(n) && _slate.Element.isElement(n) && LIST_TYPES.includes(n.type) && !TEXT_ALIGN_TYPES.includes(format);
-    },
-    split: true
-  });
-  var newProperties;
-  if (TEXT_ALIGN_TYPES.includes(format)) {
-    newProperties = {
-      align: isActive ? undefined : format
-    };
-  } else {
-    newProperties = {
-      type: isActive ? 'paragraph' : isList ? 'list_item' : format
-    };
-  }
-  _slate.Transforms.setNodes(editor, newProperties);
-  if (!isActive && isList) {
-    var block = {
-      type: format,
-      children: []
-    };
-    _slate.Transforms.wrapNodes(editor, block);
-  }
-};
-var toggleMark = function toggleMark(editor, format) {
-  var isActive = isMarkActive(editor, format);
-  if (isActive) {
-    _slate.Editor.removeMark(editor, format);
-  } else {
-    _slate.Editor.addMark(editor, format, true);
-  }
-};
-var isBlockActive = function isBlockActive(editor, format) {
-  var blockType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'type';
-  var selection = editor.selection;
-  if (!selection) return false;
-  var _Array$from = Array.from(_slate.Editor.nodes(editor, {
-      at: _slate.Editor.unhangRange(editor, selection),
-      match: function match(n) {
-        return !_slate.Editor.isEditor(n) && _slate.Element.isElement(n) && n[blockType] === format;
-      }
-    })),
-    _Array$from2 = (0, _slicedToArray2["default"])(_Array$from, 1),
-    match = _Array$from2[0];
-  return !!match;
-};
-var isMarkActive = function isMarkActive(editor, format) {
-  var marks = _slate.Editor.marks(editor);
-  return marks ? marks[format] === true : false;
-};
-var Element = function Element(props) {
-  var editor = (0, _slateReact.useSlateStatic)();
-  var focused = (0, _slateReact.useFocused)();
-  var attributes = props.attributes,
-    children = props.children,
-    element = props.element,
-    plugins = props.plugins;
-  var style = {
-    textAlign: element.align
-  };
-  var nodeProps = _objectSpread(_objectSpread(_objectSpread({}, attributes), props), {}, {
-    node: _objectSpread({}, element),
-    children: children
-  });
-  var pluginToRender = plugins.find(function (plugin) {
-    return typeof plugin.supports === 'function' && plugin.supports(element);
-  });
-  if (pluginToRender) {
-    return pluginToRender.renderNode(_objectSpread(_objectSpread({}, nodeProps), {}, {
-      editor: editor,
-      focused: focused
-    }));
-  }
-  switch (element.type) {
-    case 'block-quote':
-      return /*#__PURE__*/_react["default"].createElement("blockquote", (0, _extends2["default"])({
-        style: style
-      }, attributes), children);
-    case 'bulleted-list':
-      return /*#__PURE__*/_react["default"].createElement("ul", (0, _extends2["default"])({
-        style: style
-      }, attributes), children);
-    case 'heading-one':
-      return /*#__PURE__*/_react["default"].createElement("h1", (0, _extends2["default"])({
-        style: style
-      }, attributes), children);
-    case 'heading-two':
-      return /*#__PURE__*/_react["default"].createElement("h2", (0, _extends2["default"])({
-        style: style
-      }, attributes), children);
-    case 'list-item':
-      return /*#__PURE__*/_react["default"].createElement("li", (0, _extends2["default"])({
-        style: style
-      }, attributes), children);
-    case 'numbered-list':
-      return /*#__PURE__*/_react["default"].createElement("ol", (0, _extends2["default"])({
-        style: style
-      }, attributes), children);
-    default:
-      return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
-        style: _objectSpread(_objectSpread({}, style), {}, {
-          margin: 0
-        })
-      }, attributes), children);
-  }
-};
-var Leaf = function Leaf(_ref3) {
-  var attributes = _ref3.attributes,
-    children = _ref3.children,
-    leaf = _ref3.leaf;
-  if (leaf.bold) {
-    children = /*#__PURE__*/_react["default"].createElement("strong", null, children);
-  }
-  if (leaf.code) {
-    children = /*#__PURE__*/_react["default"].createElement("code", null, children);
-  }
-  if (leaf.italic) {
-    children = /*#__PURE__*/_react["default"].createElement("em", null, children);
-  }
-  if (leaf.underline) {
-    children = /*#__PURE__*/_react["default"].createElement("u", null, children);
-  }
-  if (leaf.strikethrough) {
-    children = /*#__PURE__*/_react["default"].createElement("del", null, children);
-  }
-  return /*#__PURE__*/_react["default"].createElement("span", attributes, children);
-};
-var BlockButton = function BlockButton(_ref4) {
-  var format = _ref4.format,
-    icon = _ref4.icon;
-  var editor = (0, _slateReact.useSlate)();
-  return /*#__PURE__*/_react["default"].createElement(_components.Button, {
-    active: isBlockActive(editor, format, TEXT_ALIGN_TYPES.includes(format) ? 'align' : 'type'),
-    onMouseDown: function onMouseDown(event) {
-      event.preventDefault();
-      toggleBlock(editor, format);
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_components.Icon, null, icon));
-};
-var MarkButton = function MarkButton(_ref5) {
-  var format = _ref5.format,
-    icon = _ref5.icon;
-  var editor = (0, _slateReact.useSlate)();
-  return /*#__PURE__*/_react["default"].createElement(_components.Button, {
-    active: isMarkActive(editor, format),
-    onMouseDown: function onMouseDown(event) {
-      event.preventDefault();
-      toggleMark(editor, format);
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_components.Icon, null, icon));
-};
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-// old-editable
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var log = (0, _debug["default"])('editable-html:editor');
 var defaultToolbarOpts = {
@@ -382,26 +97,63 @@ var defaultResponseAreaProps = {
   onHandleAreaChange: function onHandleAreaChange() {}
 };
 var defaultLanguageCharactersProps = [];
-var createToolbarOpts = function createToolbarOpts(toolbarOpts, error) {
+
+var createToolbarOpts = function createToolbarOpts(toolbarOpts, error, isHtmlMode) {
   return _objectSpread(_objectSpread(_objectSpread({}, defaultToolbarOpts), toolbarOpts), {}, {
-    error: error
+    error: error,
+    isHtmlMode: isHtmlMode
   });
 };
-var EditorComponent = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(EditorComponent, _React$Component);
-  var _super = _createSuper(EditorComponent);
-  function EditorComponent(_props) {
+
+var Editor = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Editor, _React$Component);
+
+  var _super = _createSuper(Editor);
+
+  function Editor(_props) {
     var _this;
-    (0, _classCallCheck2["default"])(this, EditorComponent);
+
+    (0, _classCallCheck2["default"])(this, Editor);
     _this = _super.call(this, _props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleAlertDialog", function (open, extraDialogProps, callback) {
+      _this.setState({
+        dialog: _objectSpread({
+          open: open
+        }, extraDialogProps),
+        isEdited: false
+      }, callback);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleHtmlMode", function () {
+      _this.setState(function (prevState) {
+        return {
+          isHtmlMode: !prevState.isHtmlMode
+        };
+      }, function () {
+        var error = _this.props.error;
+        var toolbarOpts = _this.state.toolbarOpts;
+        var newToolbarOpts = createToolbarOpts(toolbarOpts, error, _this.state.isHtmlMode);
+
+        _this.setState({
+          toolbarOpts: newToolbarOpts
+        });
+      });
+    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handlePlugins", function (props) {
       var normalizedResponseAreaProps = _objectSpread(_objectSpread({}, defaultResponseAreaProps), props.responseAreaProps);
+
+      var htmlPluginOpts = {
+        isHtmlMode: _this.state.isHtmlMode,
+        isEdited: _this.state.isEdited,
+        toggleHtmlMode: _this.toggleHtmlMode,
+        handleAlertDialog: _this.handleAlertDialog
+      };
       _this.plugins = (0, _plugins.buildPlugins)(props.activePlugins, {
         math: _objectSpread({
           onClick: _this.onMathClick,
           onFocus: _this.onPluginFocus,
           onBlur: _this.onPluginBlur
         }, props.mathMlOptions),
+        html: htmlPluginOpts,
         image: {
           disableImageAlignmentButtons: props.disableImageAlignmentButtons,
           onDelete: props.imageSupport && props.imageSupport["delete"] && function (src, done) {
@@ -431,15 +183,38 @@ var EditorComponent = /*#__PURE__*/function (_React$Component) {
            */
           disableScrollbar: !!props.disableScrollbar,
           disableUnderline: props.disableUnderline,
-          autoWidth: props.autoWidthToolbar
+          autoWidth: props.autoWidthToolbar,
+          onDone: function onDone() {
+            var _this$state$value$sta, _this$state$value$sta2;
+
+            var nonEmpty = props.nonEmpty;
+            log('[onDone]');
+
+            _this.setState({
+              toolbarInFocus: false,
+              focusedNode: null
+            });
+
+            _this.editor.blur();
+
+            if (nonEmpty && ((_this$state$value$sta = _this.state.value.startText) === null || _this$state$value$sta === void 0 ? void 0 : (_this$state$value$sta2 = _this$state$value$sta.text) === null || _this$state$value$sta2 === void 0 ? void 0 : _this$state$value$sta2.length) === 0) {
+              _this.resetValue(true).then(function () {
+                _this.onEditingDone();
+              });
+            } else {
+              _this.onEditingDone();
+            }
+          }
         },
         table: {
           onFocus: function onFocus() {
             log('[table:onFocus]...');
+
             _this.onPluginFocus();
           },
           onBlur: function onBlur() {
             log('[table:onBlur]...');
+
             _this.onPluginBlur();
           }
         },
@@ -452,20 +227,26 @@ var EditorComponent = /*#__PURE__*/function (_React$Component) {
           error: normalizedResponseAreaProps.error,
           onFocus: function onFocus() {
             log('[table:onFocus]...');
+
             _this.onPluginFocus();
           },
           onBlur: function onBlur() {
             log('[table:onBlur]...');
+
             _this.onPluginBlur();
           }
         },
         languageCharacters: props.languageCharactersProps,
         media: {
           focus: _this.focus,
+          createChange: function createChange() {
+            return _this.state.value.change();
+          },
           onChange: _this.onChange,
           uploadSoundSupport: props.uploadSoundSupport
         }
       });
+
       if (props.mathMlOptions.mmlOutput || props.mathMlOptions.mmlEditing) {
         _this.props.runSerializationOnMarkup();
       }
@@ -475,6 +256,7 @@ var EditorComponent = /*#__PURE__*/function (_React$Component) {
       var target = e && e.relatedTarget;
       var node = target ? (0, _slateReact.findNode)(target, _this.state.value) : null;
       log('[onPluginBlur] node: ', node);
+
       _this.setState({
         focusedNode: node
       }, function () {
@@ -484,10 +266,12 @@ var EditorComponent = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onPluginFocus", function (e) {
       log('[onPluginFocus]', e && e.target);
       var target = e && e.target;
+
       if (target) {
         var node = (0, _slateReact.findNode)(target, _this.state.value);
         log('[onPluginFocus] node: ', node);
         var stashedValue = _this.state.stashedValue || _this.state.value;
+
         _this.setState({
           focusedNode: node,
           stashedValue: stashedValue
@@ -497,60 +281,70 @@ var EditorComponent = /*#__PURE__*/function (_React$Component) {
           focusedNode: null
         });
       }
+
       _this.stashValue();
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onMathClick", function (node) {
+      _this.editor.change(function (c) {
+        return c.collapseToStartOf(node);
+      });
+
       _this.setState({
         selectedNode: node
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onEditingDone", function (editor) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onEditingDone", function () {
       log('[onEditingDone]');
-      // this.setState({ stashedValue: null, focusedNode: null });
-      log('[onEditingDone] value: ', _this.state.value);
-      _this.props.onChange(editor, true);
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onDone", function (editor) {
-      var nonEmpty = _this.props.nonEmpty;
-      log('[onDone]');
+
       _this.setState({
-        toolbarInFocus: false,
+        stashedValue: null,
         focusedNode: null
       });
-      _this.onEditingDone(editor);
+
+      log('[onEditingDone] value: ', _this.state.value);
+
+      _this.props.onChange(_this.state.value, true);
     });
-    // Allowing time for onChange to take effect if it is called
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleBlur", function (resolve) {
       var nonEmpty = _this.props.nonEmpty;
       var doneOn = _this.state.toolbarOpts.doneOn;
+
       _this.setState({
         toolbarInFocus: false,
         focusedNode: null
       });
+
+      if (_this.editor) {
+        _this.editor.blur();
+      }
+
       if (doneOn === 'blur') {
-        var _this$state$value$sta;
-        if (nonEmpty && ((_this$state$value$sta = _this.state.value.startText) === null || _this$state$value$sta === void 0 || (_this$state$value$sta = _this$state$value$sta.text) === null || _this$state$value$sta === void 0 ? void 0 : _this$state$value$sta.length) === 0) {
+        var _this$state$value$sta3, _this$state$value$sta4;
+
+        if (nonEmpty && ((_this$state$value$sta3 = _this.state.value.startText) === null || _this$state$value$sta3 === void 0 ? void 0 : (_this$state$value$sta4 = _this$state$value$sta3.text) === null || _this$state$value$sta4 === void 0 ? void 0 : _this$state$value$sta4.length) === 0) {
           _this.resetValue(true).then(function () {
             _this.onEditingDone();
+
             resolve();
           });
         } else {
           _this.onEditingDone();
+
           resolve();
         }
       }
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onBlur", function (event) {
-      return _this.props.onBlur(event);
       log('[onBlur]');
       var target = event.relatedTarget;
-      var node = _slateReact.ReactEditor.toSlateNode(editor, target);
+      var node = target ? (0, _slateReact.findNode)(target, _this.state.value) : null;
       log('[onBlur] node: ', node);
       return new Promise(function (resolve) {
         _this.setState({
           preBlurValue: _this.state.value,
           focusedNode: !node ? null : node
         }, _this.handleBlur.bind((0, _assertThisInitialized2["default"])(_this), resolve));
+
         _this.props.onBlur(event);
       });
     });
@@ -558,44 +352,44 @@ var EditorComponent = /*#__PURE__*/function (_React$Component) {
       var editorDOM = document.querySelector("[data-key=\"".concat(_this.state.value.document.key, "\"]"));
       setTimeout(function () {
         var stateValue = _this.state.value;
+
         if (!_this.wrapperRef) {
           return;
         }
+
         var editorElement = !editorDOM || document.activeElement.closest("[class*=\"".concat(editorDOM.className, "\"]"));
         var toolbarElement = !_this.toolbarRef || document.activeElement.closest("[class*=\"".concat(_this.toolbarRef.className, "\"]"));
+
         var isInCurrentComponent = _this.wrapperRef.contains(editorElement) || _this.wrapperRef.contains(toolbarElement);
+
         if (!isInCurrentComponent) {
           editorDOM.removeEventListener('blur', _this.handleDomBlur);
+
           if (stateValue.isFocused) {
             _this.onBlur(e);
           }
         }
       }, 50);
     });
-    /*
-     * Needs to be wrapped otherwise it causes issues because of race conditions
-     * Known issue for slatejs. See: https://github.com/ianstormtaylor/slate/issues/2097
-     * Using timeout I wasn't able to test this
-     *
-     * Note: The use of promises has been causing issues with MathQuill
-     * */
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onFocus", function () {
       return new Promise(function (resolve) {
         var editorDOM = document.querySelector("[data-key=\"".concat(_this.state.value.document.key, "\"]"));
         log('[onFocus]', document.activeElement);
-
         /**
          * This is a temporary hack - @see changeData below for some more information.
          */
+
         if (_this.__TEMPORARY_CHANGE_DATA) {
           var _this$__TEMPORARY_CHA = _this.__TEMPORARY_CHANGE_DATA,
-            key = _this$__TEMPORARY_CHA.key,
-            data = _this$__TEMPORARY_CHA.data;
+              key = _this$__TEMPORARY_CHA.key,
+              data = _this$__TEMPORARY_CHA.data;
           var domEl = document.querySelector("[data-key=\"".concat(key, "\"]"));
+
           if (domEl) {
             var change = _this.state.value.change().setNodeByKey(key, {
               data: data
             });
+
             _this.setState({
               value: change.value
             }, function () {
@@ -603,46 +397,53 @@ var EditorComponent = /*#__PURE__*/function (_React$Component) {
             });
           }
         }
-
         /**
          * This is needed just in case the browser decides to make the editor
          * lose focus without triggering the onBlur event (can happen in a few cases).
          * This will also trigger onBlur if the user clicks outside of the page when the editor
          * is focused.
          */
+
+
         if (editorDOM === document.activeElement) {
           editorDOM.removeEventListener('blur', _this.handleDomBlur);
           editorDOM.addEventListener('blur', _this.handleDomBlur);
         }
+
         _this.stashValue();
+
         _this.props.onFocus();
+
         resolve();
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "stashValue", function () {
       log('[stashValue]');
+
       if (!_this.state.stashedValue) {
         _this.setState({
           stashedValue: _this.state.value
         });
       }
     });
-    /**
-     * Reset the value if the user didn't click done.
-     */
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "resetValue", function (force) {
       var _this$state = _this.state,
-        value = _this$state.value,
-        focusedNode = _this$state.focusedNode;
+          value = _this$state.value,
+          focusedNode = _this$state.focusedNode;
+
       var stopReset = _this.plugins.reduce(function (s, p) {
         return s || p.stopReset && p.stopReset(_this.state.value);
       }, false);
+
       log('[resetValue]', value.isFocused, focusedNode, 'stopReset: ', stopReset);
+
       if (_this.state.stashedValue && !value.isFocused && !focusedNode && !stopReset || force) {
         log('[resetValue] resetting...');
         log('stashed', _this.state.stashedValue.document.toObject());
         log('current', _this.state.value.document.toObject());
+
         var newValue = _slate.Value.fromJSON(_this.state.stashedValue.toJSON());
+
         log('newValue: ', newValue.document);
         return new Promise(function (resolve) {
           setTimeout(function () {
@@ -659,19 +460,32 @@ var EditorComponent = /*#__PURE__*/function (_React$Component) {
         return Promise.resolve({});
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (editor, done) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (change, done) {
       log('[onChange]');
+      var value = change.value;
       var charactersLimit = _this.props.charactersLimit;
-      var allText = _slate.Editor.string(editor, []);
-      if (allText > charactersLimit) {
+
+      if (value && value.document && value.document.text && value.document.text.length > charactersLimit) {
         return;
       }
-      var html = (0, serialization.valueToHtml)(editor);
-      var value = (0, serialization.htmlToValue)(html);
+
+      if (!_this.state.isHtmlMode) {
+        _this.setState({
+          isEdited: false
+        });
+      }
+
+      if (_this.state.isHtmlMode && !(0, _isEqual["default"])(_this.state.value.document.text, value.document.text)) {
+        _this.setState({
+          isEdited: true
+        });
+      }
+
       _this.setState({
         value: value
       }, function () {
         log('[onChange], call done()');
+
         if (done) {
           done();
         }
@@ -681,12 +495,14 @@ var EditorComponent = /*#__PURE__*/function (_React$Component) {
       if (_this.state.value.isFocused) {
         return _this.state.value;
       }
+
       return _this.state.preBlurValue;
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "valueToSize", function (v) {
       if (!v) {
         return;
       }
+
       if (typeof v === 'string') {
         if (v.endsWith('%')) {
           return undefined;
@@ -697,9 +513,11 @@ var EditorComponent = /*#__PURE__*/function (_React$Component) {
           return isNaN(value) ? value : "".concat(value, "px");
         }
       }
+
       if (typeof v === 'number') {
         return "".concat(v, "px");
       }
+
       return;
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "validateNode", function (node) {
@@ -709,123 +527,175 @@ var EditorComponent = /*#__PURE__*/function (_React$Component) {
       if (last.type !== 'image') return;
       log('[validateNode] last is image..');
       var parent = last.getParent(last.key);
+
       var p = _slate.Block.getParent(last.key);
+
       log('[validateNode] parent:', parent, p);
       return undefined;
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeData", function (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: key,
+        data: data
+      };
+    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "focus", function (pos, node) {
       var position = pos || 'end';
+
       _this.props.focus(position, node);
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onDropPaste", /*#__PURE__*/function () {
-      var _ref6 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(event, change, dropContext) {
+      var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(event, change, dropContext) {
         var editor, transfer, file, type, fragment, text, src, inline, range, ch, handler, _change$value, _document, selection, startBlock, defaultBlock, defaultMarks, frag;
+
         return _regenerator["default"].wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              editor = change.editor;
-              transfer = (0, _slateReact.getEventTransfer)(event);
-              file = transfer.files && transfer.files[0];
-              type = transfer.type;
-              fragment = transfer.fragment;
-              text = transfer.text;
-              if (!(file && (file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png'))) {
-                _context.next = 28;
-                break;
-              }
-              if (_this.props.imageSupport) {
-                _context.next = 9;
-                break;
-              }
-              return _context.abrupt("return");
-            case 9:
-              _context.prev = 9;
-              log('[onDropPaste]');
-              _context.next = 13;
-              return (0, serialization.getBase64)(file);
-            case 13:
-              src = _context.sent;
-              inline = _slate.Inline.create({
-                type: 'image',
-                isVoid: true,
-                data: {
-                  loading: false,
-                  src: src
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                editor = change.editor;
+                transfer = (0, _slateReact.getEventTransfer)(event);
+                file = transfer.files && transfer.files[0];
+                type = transfer.type;
+                fragment = transfer.fragment;
+                text = transfer.text;
+
+                if (!(file && (file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png'))) {
+                  _context.next = 28;
+                  break;
                 }
-              });
-              if (dropContext) {
-                _this.focus();
-              } else {
-                range = (0, _slateReact.getEventRange)(event, editor);
-                if (range) {
-                  change.select(range);
+
+                if (_this.props.imageSupport) {
+                  _context.next = 9;
+                  break;
                 }
-              }
-              ch = change.insertInline(inline);
-              _this.onChange(ch);
-              handler = new _insertImageHandler["default"](inline, function () {
-                return _this.state.value;
-              }, _this.onChange, true);
-              handler.fileChosen(file);
-              _this.props.imageSupport.add(handler);
-              _context.next = 26;
-              break;
-            case 23:
-              _context.prev = 23;
-              _context.t0 = _context["catch"](9);
-              log('[onDropPaste] error: ', _context.t0);
-            case 26:
-              _context.next = 42;
-              break;
-            case 28:
-              if (!(type === 'fragment')) {
-                _context.next = 32;
+
+                return _context.abrupt("return");
+
+              case 9:
+                _context.prev = 9;
+                log('[onDropPaste]');
+                _context.next = 13;
+                return (0, serialization.getBase64)(file);
+
+              case 13:
+                src = _context.sent;
+                inline = _slate.Inline.create({
+                  type: 'image',
+                  isVoid: true,
+                  data: {
+                    loading: false,
+                    src: src
+                  }
+                });
+
+                if (dropContext) {
+                  _this.focus();
+                } else {
+                  range = (0, _slateReact.getEventRange)(event, editor);
+
+                  if (range) {
+                    change.select(range);
+                  }
+                }
+
+                ch = change.insertInline(inline);
+
+                _this.onChange(ch);
+
+                handler = new _insertImageHandler["default"](inline, function () {
+                  return _this.state.value;
+                }, _this.onChange, true);
+                handler.fileChosen(file);
+
+                _this.props.imageSupport.add(handler);
+
+                _context.next = 26;
                 break;
-              }
-              change.insertFragment(fragment);
-              _context.next = 42;
-              break;
-            case 32:
-              if (!(type === 'text' || type === 'html')) {
+
+              case 23:
+                _context.prev = 23;
+                _context.t0 = _context["catch"](9);
+                log('[onDropPaste] error: ', _context.t0);
+
+              case 26:
                 _context.next = 42;
                 break;
-              }
-              if (text) {
-                _context.next = 35;
-                break;
-              }
-              return _context.abrupt("return");
-            case 35:
-              _change$value = change.value, _document = _change$value.document, selection = _change$value.selection, startBlock = _change$value.startBlock;
-              if (!startBlock.isVoid) {
-                _context.next = 38;
+
+              case 28:
+                if (!(type === 'fragment')) {
+                  _context.next = 32;
+                  break;
+                }
+
+                change.insertFragment(fragment);
+                _context.next = 42;
                 break;
-              }
-              return _context.abrupt("return");
-            case 38:
-              defaultBlock = startBlock;
-              defaultMarks = _document.getInsertMarksAtRange(selection);
-              frag = _slatePlainSerializer["default"].deserialize(text, {
-                defaultBlock: defaultBlock,
-                defaultMarks: defaultMarks
-              }).document;
-              change.insertFragment(frag);
-            case 42:
-            case "end":
-              return _context.stop();
+
+              case 32:
+                if (!(type === 'text' || type === 'html')) {
+                  _context.next = 42;
+                  break;
+                }
+
+                if (text) {
+                  _context.next = 35;
+                  break;
+                }
+
+                return _context.abrupt("return");
+
+              case 35:
+                _change$value = change.value, _document = _change$value.document, selection = _change$value.selection, startBlock = _change$value.startBlock;
+
+                if (!startBlock.isVoid) {
+                  _context.next = 38;
+                  break;
+                }
+
+                return _context.abrupt("return");
+
+              case 38:
+                defaultBlock = startBlock;
+                defaultMarks = _document.getInsertMarksAtRange(selection);
+                frag = _slatePlainSerializer["default"].deserialize(text, {
+                  defaultBlock: defaultBlock,
+                  defaultMarks: defaultMarks
+                }).document;
+                change.insertFragment(frag);
+
+              case 42:
+              case "end":
+                return _context.stop();
+            }
           }
         }, _callee, null, [[9, 23]]);
       }));
+
       return function (_x, _x2, _x3) {
-        return _ref6.apply(this, arguments);
+        return _ref.apply(this, arguments);
       };
     }());
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderPlaceholder", function (props) {
       var editor = props.editor;
       var document = editor.value.document;
+
       if (!editor.props.placeholder || document.text !== '' || document.nodes.size !== 1) {
         return false;
       }
+
       return /*#__PURE__*/_react["default"].createElement("span", {
         contentEditable: false,
         style: {
@@ -842,23 +712,40 @@ var EditorComponent = /*#__PURE__*/function (_React$Component) {
     });
     _this.state = {
       value: _props.value,
-      toolbarOpts: createToolbarOpts(_props.toolbarOpts, _props.error)
+      toolbarOpts: createToolbarOpts(_props.toolbarOpts, _props.error),
+      isHtmlMode: false,
+      isEdited: false,
+      dialog: {
+        open: false
+      }
     };
+    _this.toggleHtmlMode = _this.toggleHtmlMode.bind((0, _assertThisInitialized2["default"])(_this));
+
     _this.onResize = function () {
       _props.onChange(_this.state.value, true);
     };
+
     _this.handlePlugins(_this.props);
+
     return _this;
   }
-  (0, _createClass2["default"])(EditorComponent, [{
+
+  (0, _createClass2["default"])(Editor, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
+
+      // onRef is needed to get the ref of the component because we export it using withStyles
+      this.props.onRef(this);
       window.addEventListener('resize', this.onResize);
+
       if (this.editor && this.props.autoFocus) {
         Promise.resolve().then(function () {
           if (_this2.editor) {
             var editorDOM = document.querySelector("[data-key=\"".concat(_this2.editor.value.document.key, "\"]"));
+
+            _this2.editor.focus();
+
             if (editorDOM) {
               editorDOM.focus();
             }
@@ -869,19 +756,25 @@ var EditorComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var toolbarOpts = this.state.toolbarOpts;
-      var newToolbarOpts = createToolbarOpts(nextProps.toolbarOpts, nextProps.error);
+      var _this$state2 = this.state,
+          isHtmlMode = _this$state2.isHtmlMode,
+          toolbarOpts = _this$state2.toolbarOpts;
+      var newToolbarOpts = createToolbarOpts(nextProps.toolbarOpts, nextProps.error, isHtmlMode);
+
       if (!(0, _isEqual["default"])(newToolbarOpts, toolbarOpts)) {
         this.setState({
           toolbarOpts: newToolbarOpts
         });
       }
+
       var differentCharacterProps = !(0, _isEqual["default"])(nextProps.languageCharactersProps, this.props.languageCharactersProps);
       var differentMathMlProps = !(0, _isEqual["default"])(nextProps.mathMlOptions, this.props.mathMlOptions);
+
       if (differentCharacterProps || differentMathMlProps) {
         this.handlePlugins(nextProps);
       }
-      if (!(0, _isEqual["default"])(nextProps.value, this.props.value)) {
+
+      if (!nextProps.value.document.equals(this.props.value.document)) {
         this.setState({
           focus: false,
           value: nextProps.value
@@ -890,9 +783,14 @@ var EditorComponent = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate() {
+    value: function componentDidUpdate(prevProps, prevState) {
       // The cursor is on a zero width element and when that is placed near void elements, it is not visible
       // so we increase the width to at least 2px in order for the user to see it
+      if (this.state.isHtmlMode !== prevState.isHtmlMode || prevState.isEdited !== this.state.isEdited) {
+        this.handlePlugins(this.props);
+        this.onEditingDone();
+      }
+
       var zeroWidthEls = document.querySelectorAll('[data-slate-zero-width="z"]');
       Array.from(zeroWidthEls).forEach(function (el) {
         el.style.minWidth = '2px';
@@ -907,15 +805,16 @@ var EditorComponent = /*#__PURE__*/function (_React$Component) {
      */
     function componentWillUnmount() {
       window.removeEventListener('resize', this.onResize);
-    }
+    } // Allowing time for onChange to take effect if it is called
+
   }, {
     key: "buildSizeStyle",
     value: function buildSizeStyle() {
       var _this$props = this.props,
-        width = _this$props.width,
-        minHeight = _this$props.minHeight,
-        height = _this$props.height,
-        maxHeight = _this$props.maxHeight;
+          width = _this$props.width,
+          minHeight = _this$props.minHeight,
+          height = _this$props.height,
+          maxHeight = _this$props.maxHeight;
       return {
         width: this.valueToSize(width),
         height: this.valueToSize(height),
@@ -927,82 +826,43 @@ var EditorComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _classNames,
-        _this3 = this;
+          _this3 = this;
+
       var _this$props2 = this.props,
-        autoFocus = _this$props2.autoFocus,
-        disabled = _this$props2.disabled,
-        spellCheck = _this$props2.spellCheck,
-        highlightShape = _this$props2.highlightShape,
-        classes = _this$props2.classes,
-        className = _this$props2.className,
-        placeholder = _this$props2.placeholder,
-        pluginProps = _this$props2.pluginProps,
-        onKeyDown = _this$props2.onKeyDown;
-      var _this$state2 = this.state,
-        value = _this$state2.value,
-        focusedNode = _this$state2.focusedNode,
-        toolbarOpts = _this$state2.toolbarOpts;
+          disabled = _this$props2.disabled,
+          spellCheck = _this$props2.spellCheck,
+          highlightShape = _this$props2.highlightShape,
+          classes = _this$props2.classes,
+          className = _this$props2.className,
+          placeholder = _this$props2.placeholder,
+          pluginProps = _this$props2.pluginProps,
+          onKeyDown = _this$props2.onKeyDown;
+      var _this$state3 = this.state,
+          value = _this$state3.value,
+          focusedNode = _this$state3.focusedNode,
+          toolbarOpts = _this$state3.toolbarOpts,
+          dialog = _this$state3.dialog;
       log('[render] value: ', value);
       var sizeStyle = this.buildSizeStyle();
-      var names = (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.withBg, highlightShape), (0, _defineProperty2["default"])(_classNames, classes.toolbarOnTop, toolbarOpts.alwaysVisible && toolbarOpts.position === 'top'), _classNames), className, classes.slateEditor);
+      var names = (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.withBg, highlightShape), (0, _defineProperty2["default"])(_classNames, classes.toolbarOnTop, toolbarOpts.alwaysVisible && toolbarOpts.position === 'top'), _classNames), className);
       return /*#__PURE__*/_react["default"].createElement("div", {
-        ref: function ref(_ref7) {
-          return _this3.wrapperRef = _ref7;
+        ref: function ref(_ref2) {
+          return _this3.wrapperRef = _ref2;
         },
         style: {
           width: sizeStyle.width
         },
         className: names
-      }, /*#__PURE__*/_react["default"].createElement(SlateEditor, {
+      }, /*#__PURE__*/_react["default"].createElement(_slateReact.Editor, {
         plugins: this.plugins,
-        toolbarRef: function toolbarRef(r) {
+        innerRef: function innerRef(r) {
           if (r) {
-            _this3.toolbarRef = r;
+            _this3.slateEditor = r;
           }
         },
-        autoFocus: autoFocus,
-        actionsRef: this.props.onRef,
-        onEditor: this.props.onEditor,
-        value: value,
-        focus: this.focus,
-        onKeyDown: onKeyDown,
-        onChange: this.onChange,
-        getFocusedValue: this.getFocusedValue,
-        onBlur: this.onBlur,
-        onDrop: function onDrop(event, editor) {
-          return _this3.onDropPaste(event, editor, true);
-        },
-        onPaste: function onPaste(event, editor) {
-          return _this3.onDropPaste(event, editor);
-        },
-        onFocus: this.onFocus,
-        onEditingDone: this.onEditingDone,
-        onDone: this.onDone,
-        focusedNode: focusedNode,
-        normalize: this.normalize,
-        readOnly: disabled,
-        spellCheck: spellCheck,
-        className: (0, _classnames["default"])((0, _defineProperty2["default"])({}, classes.noPadding, toolbarOpts && toolbarOpts.noBorder), classes.slateEditor),
-        style: {
-          minHeight: sizeStyle.minHeight,
-          height: sizeStyle.height,
-          maxHeight: sizeStyle.maxHeight
+        ref: function ref(r) {
+          return _this3.editor = r && _this3.props.editorRef(r);
         },
-        pluginProps: pluginProps,
-        toolbarOpts: toolbarOpts,
-        placeholder: placeholder,
-        renderPlaceholder: this.renderPlaceholder
-      }));
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        ref: function ref(_ref8) {
-          return _this3.wrapperRef = _ref8;
-        },
-        style: {
-          width: sizeStyle.width
-        },
-        className: names
-      }, /*#__PURE__*/_react["default"].createElement(_slateReact.Editor, {
-        plugins: this.plugins,
         toolbarRef: function toolbarRef(r) {
           if (r) {
             _this3.toolbarRef = r;
@@ -1036,27 +896,33 @@ var EditorComponent = /*#__PURE__*/function (_React$Component) {
         pluginProps: pluginProps,
         toolbarOpts: toolbarOpts,
         placeholder: placeholder,
-        renderPlaceholder: this.renderPlaceholder
+        renderPlaceholder: this.renderPlaceholder,
+        onDataChange: this.changeData
+      }), /*#__PURE__*/_react["default"].createElement(_configUi.AlertDialog, {
+        open: dialog.open,
+        title: dialog.title,
+        text: dialog.text,
+        onClose: dialog.onClose,
+        onConfirm: dialog.onConfirm
       }));
     }
   }]);
-  return EditorComponent;
+  return Editor;
 }(_react["default"].Component); // TODO color - hardcoded gray background and keypad colors will need to change too
-exports.EditorComponent = EditorComponent;
-(0, _defineProperty2["default"])(EditorComponent, "propTypes", {
+
+
+exports.Editor = Editor;
+(0, _defineProperty2["default"])(Editor, "propTypes", {
   autoFocus: _propTypes["default"].bool,
+  editorRef: _propTypes["default"].func.isRequired,
   error: _propTypes["default"].any,
   onRef: _propTypes["default"].func.isRequired,
   onChange: _propTypes["default"].func.isRequired,
-  onEditor: _propTypes["default"].func,
   onFocus: _propTypes["default"].func,
   onBlur: _propTypes["default"].func,
   onKeyDown: _propTypes["default"].func,
-  value: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    type: _propTypes["default"].string,
-    children: _propTypes["default"].array,
-    data: _propTypes["default"].object
-  })),
+  focus: _propTypes["default"].func.isRequired,
+  value: _slatePropTypes["default"].value.isRequired,
   imageSupport: _propTypes["default"].object,
   mathMlOptions: _propTypes["default"].shape({
     mmlOutput: _propTypes["default"].bool,
@@ -1111,7 +977,7 @@ exports.EditorComponent = EditorComponent;
   maxImageWidth: _propTypes["default"].number,
   maxImageHeight: _propTypes["default"].number
 });
-(0, _defineProperty2["default"])(EditorComponent, "defaultProps", {
+(0, _defineProperty2["default"])(Editor, "defaultProps", {
   disableUnderline: true,
   onFocus: function onFocus() {},
   onBlur: function onBlur() {},
@@ -1139,13 +1005,12 @@ var styles = {
       backgroundColor: _renderUi.color.background()
     },
     '& table:not([border="1"]) tr': {
-      borderTop: '1px solid #dfe2e5'
-      // TODO perhaps secondary color for background, for now disable
+      borderTop: '1px solid #dfe2e5' // TODO perhaps secondary color for background, for now disable
       // '&:nth-child(2n)': {
       //   backgroundColor: '#f6f8fa'
       // }
-    },
 
+    },
     '& td, th': {
       padding: '.6em 1em',
       textAlign: 'center'
@@ -1161,6 +1026,8 @@ var styles = {
     padding: '0 !important'
   }
 };
-var _default = (0, _styles.withStyles)(styles)(EditorComponent);
+
+var _default = (0, _styles.withStyles)(styles)(Editor);
+
 exports["default"] = _default;
 //# sourceMappingURL=editor.js.map