@pie-lib/editable-html 12.0.0-next.0 → 12.1.0-next.2

package/lib/editor.js

@@ -1,1224 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "ALL_PLUGINS", {
-  enumerable: true,
-  get: function get() {
-    return _plugins.ALL_PLUGINS;
-  }
-});
-Object.defineProperty(exports, "DEFAULT_PLUGINS", {
-  enumerable: true,
-  get: function get() {
-    return _plugins.DEFAULT_PLUGINS;
-  }
-});
-exports.valueToSize = exports.serialization = exports["default"] = exports.buildSizeStyle = exports.Editor = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-var _slateReact = require("slate-react");
-var _slatePropTypes = _interopRequireDefault(require("slate-prop-types"));
-var _slate = require("slate");
-var _slatePlainSerializer = _interopRequireDefault(require("slate-plain-serializer"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
-var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _debug = _interopRequireDefault(require("debug"));
-var _styles = require("@mui/material/styles");
-var _renderUi = require("@pie-lib/render-ui");
-var _alertDialog = _interopRequireDefault(require("./shared/alert-dialog"));
-var _serialization = _interopRequireWildcard(require("./serialization"));
-var serialization = _serialization;
-exports.serialization = _serialization;
-var _insertImageHandler = _interopRequireDefault(require("./plugins/image/insert-image-handler"));
-var _plugins = require("./plugins");
-var _excluded = ["customPlugins", "showParagraphs", "separateParagraphs"];
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var log = (0, _debug["default"])('editable-html:editor');
-var defaultToolbarOpts = {
-  position: 'bottom',
-  alignment: 'left',
-  alwaysVisible: false,
-  showDone: true,
-  doneOn: 'blur'
-};
-var defaultResponseAreaProps = {
-  options: {},
-  respAreaToolbar: function respAreaToolbar() {},
-  onHandleAreaChange: function onHandleAreaChange() {}
-};
-var defaultLanguageCharactersProps = [];
-var createToolbarOpts = function createToolbarOpts(toolbarOpts, error, isHtmlMode) {
-  return _objectSpread(_objectSpread(_objectSpread({}, defaultToolbarOpts), toolbarOpts), {}, {
-    error: error,
-    isHtmlMode: isHtmlMode
-  });
-};
-
-/**
- * Converts a value to a CSS size string
- * @param {string|number} v - The value to convert
- * @returns {string|undefined} CSS size string or undefined
- */
-var valueToSize = exports.valueToSize = function valueToSize(v) {
-  if (!v) {
-    return;
-  }
-  var calcRegex = /^calc\((.*)\)$/;
-  if (typeof v === 'string') {
-    if (v.endsWith('%')) {
-      return undefined;
-    } else if (v.endsWith('px') || v.endsWith('vh') || v.endsWith('vw') || v.endsWith('ch') || v.endsWith('em') || v.match(calcRegex)) {
-      return v;
-    } else {
-      var value = parseInt(v, 10);
-      return isNaN(value) ? value : "".concat(value, "px");
-    }
-  }
-  if (typeof v === 'number') {
-    return "".concat(v, "px");
-  }
-};
-
-/**
- * Builds a style object for editor size constraints
- * @param {Object} props - Editor props containing size values
- * @returns {Object} Style object with width/height constraints
- */
-var _buildSizeStyle = exports.buildSizeStyle = function buildSizeStyle(props) {
-  var minWidth = props.minWidth,
-    width = props.width,
-    maxWidth = props.maxWidth,
-    minHeight = props.minHeight,
-    height = props.height,
-    maxHeight = props.maxHeight;
-  return {
-    width: valueToSize(width),
-    minWidth: valueToSize(minWidth),
-    maxWidth: valueToSize(maxWidth),
-    height: valueToSize(height),
-    minHeight: valueToSize(minHeight),
-    maxHeight: valueToSize(maxHeight)
-  };
-};
-
-/**
- * The maximum number of characters the editor can support
- * @type {number}
- */
-var MAX_CHARACTERS_LIMIT = 1000000;
-var Editor = exports.Editor = /*#__PURE__*/function (_React$Component) {
-  function Editor(_props) {
-    var _this;
-    (0, _classCallCheck2["default"])(this, Editor);
-    _this = _callSuper(this, Editor, [_props]);
-    (0, _defineProperty2["default"])(_this, "setKeypadInteraction", function (interacted) {
-      _this.keypadInteractionDetected = interacted;
-    });
-    (0, _defineProperty2["default"])(_this, "handleDialog", function (open) {
-      var extraDialogProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      var callback = arguments.length > 2 ? arguments[2] : undefined;
-      _this.setState({
-        dialog: _objectSpread({
-          open: open
-        }, extraDialogProps)
-      }, callback);
-    });
-    (0, _defineProperty2["default"])(_this, "toggleHtmlMode", function () {
-      _this.setState(function (prevState) {
-        return {
-          isHtmlMode: !prevState.isHtmlMode,
-          isEditedInHtmlMode: false
-        };
-      }, 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"])(_this, "handlePlugins", function (props) {
-      var normalizedResponseAreaProps = _objectSpread(_objectSpread({}, defaultResponseAreaProps), props.responseAreaProps);
-      var htmlPluginOpts = {
-        currentValue: _this.props.value,
-        isHtmlMode: _this.state.isHtmlMode,
-        isEditedInHtmlMode: _this.state.isEditedInHtmlMode,
-        toggleHtmlMode: _this.toggleHtmlMode,
-        handleAlertDialog: _this.handleDialog
-      };
-      var _ref = props.pluginProps || {},
-        customPlugins = _ref.customPlugins;
-      customPlugins = customPlugins || [];
-      _this.plugins = (0, _plugins.buildPlugins)(props.activePlugins, customPlugins, {
-        math: _objectSpread({
-          onClick: _this.onMathClick,
-          onFocus: _this.onPluginFocus,
-          onBlur: _this.onPluginBlur
-        }, props.mathMlOptions),
-        textAlign: {
-          getValue: function getValue() {
-            return _this.state.value;
-          },
-          onChange: _this.onChange
-        },
-        html: htmlPluginOpts,
-        extraCSSRules: props.extraCSSRules || {},
-        image: {
-          disableImageAlignmentButtons: props.disableImageAlignmentButtons,
-          onDelete: props.imageSupport && props.imageSupport["delete"] && function (node, done) {
-            var src = node.data.get('src');
-            props.imageSupport["delete"](src, function (e) {
-              var newPendingImages = _this.state.pendingImages.filter(function (img) {
-                return img.key !== node.key;
-              });
-              var oldScheduled = _this.state.scheduled;
-              var newState = {
-                pendingImages: newPendingImages,
-                scheduled: oldScheduled && newPendingImages.length === 0 ? false : oldScheduled
-              };
-              _this.setState(newState, function () {
-                return done(e, _this.state.value);
-              });
-            });
-          },
-          insertImageRequested: props.imageSupport && function (addedImage, getHandler) {
-            var pendingImages = _this.state.pendingImages;
-            var onFinish = function onFinish(result) {
-              var cb;
-              if (_this.state.scheduled && result) {
-                // finish editing only on success
-                cb = _this.onEditingDone.bind(_this);
-              }
-              var newPendingImages = _this.state.pendingImages.filter(function (img) {
-                return img.key !== addedImage.key;
-              });
-              var newState = {
-                pendingImages: newPendingImages
-              };
-              if (newPendingImages.length === 0) {
-                newState.scheduled = false;
-              }
-              _this.setState(newState, cb);
-            };
-            var callback = function callback() {
-              /**
-               * The handler is the object through which the outer context
-               * communicates file upload events like: fileChosen, cancel, progress
-               */
-              var handler = getHandler(onFinish, function () {
-                return _this.state.value;
-              });
-              props.imageSupport.add(handler);
-            };
-            _this.setState({
-              pendingImages: [].concat((0, _toConsumableArray2["default"])(pendingImages), [addedImage])
-            }, callback);
-          },
-          onFocus: _this.onPluginFocus,
-          onBlur: _this.onPluginBlur,
-          maxImageWidth: props.maxImageWidth,
-          maxImageHeight: props.maxImageHeight
-        },
-        toolbar: {
-          /**
-           * To minimize converting html -> state -> html
-           * We only emit markup once 'done' is clicked.
-           */
-          disableScrollbar: !!props.disableScrollbar,
-          disableUnderline: props.disableUnderline,
-          autoWidth: props.autoWidthToolbar,
-          onDone: function onDone() {
-            var _this$state$value$sta;
-            var nonEmpty = props.nonEmpty;
-            log('[onDone]');
-            _this.setState({
-              toolbarInFocus: false,
-              focusedNode: null,
-              focusToolbar: false
-            });
-            _this.editor.blur();
-            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) {
-              _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();
-          }
-        },
-        responseArea: {
-          type: normalizedResponseAreaProps.type,
-          options: normalizedResponseAreaProps.options,
-          maxResponseAreas: normalizedResponseAreaProps.maxResponseAreas,
-          respAreaToolbar: normalizedResponseAreaProps.respAreaToolbar,
-          onHandleAreaChange: normalizedResponseAreaProps.onHandleAreaChange,
-          error: normalizedResponseAreaProps.error,
-          onFocus: function onFocus() {
-            log('[table:onFocus]...');
-            _this.onPluginFocus();
-          },
-          onBlur: function onBlur() {
-            log('[table:onBlur]...');
-            _this.onPluginBlur();
-          }
-        },
-        languageCharacters: props.languageCharactersProps,
-        keyPadCharacterRef: _this.keyPadCharacterRef,
-        setKeypadInteraction: _this.setKeypadInteraction,
-        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();
-      }
-    });
-    (0, _defineProperty2["default"])(_this, "onPluginBlur", function (e) {
-      log('[onPluginBlur]', e && e.relatedTarget);
-      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 () {
-        _this.resetValue();
-      });
-    });
-    (0, _defineProperty2["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
-        });
-      } else {
-        _this.setState({
-          focusedNode: null
-        });
-      }
-      _this.stashValue();
-    });
-    (0, _defineProperty2["default"])(_this, "onMathClick", function (node) {
-      _this.editor.change(function (c) {
-        return c.collapseToStartOf(node);
-      });
-      _this.setState({
-        selectedNode: node
-      });
-    });
-    (0, _defineProperty2["default"])(_this, "onEditingDone", function () {
-      var _this$state = _this.state,
-        isHtmlMode = _this$state.isHtmlMode,
-        dialog = _this$state.dialog,
-        value = _this$state.value,
-        pendingImages = _this$state.pendingImages;
-
-      // Handling HTML mode and dialog state
-      if (isHtmlMode) {
-        // Early return if HTML mode is enabled
-        if (dialog !== null && dialog !== void 0 && dialog.open) return;
-        var currentValue = (0, _serialization.htmlToValue)(value.document.text);
-        var previewText = _this.renderHtmlPreviewContent();
-        _this.openHtmlModeConfirmationDialog(currentValue, previewText);
-        return;
-      }
-      if (pendingImages.length) {
-        // schedule image processing
-        _this.setState({
-          scheduled: true
-        });
-        return;
-      }
-
-      // Finalizing editing
-      log('[onEditingDone]');
-      _this.setState({
-        pendingImages: [],
-        stashedValue: null,
-        focusedNode: null
-      });
-      log('[onEditingDone] value: ', _this.state.value);
-      _this.props.onChange(_this.state.value, true);
-    });
-    /**
-     * Renders the HTML preview content to be displayed inside the dialog.
-     * This content includes the edited HTML and a prompt for the user.
-     */
-    (0, _defineProperty2["default"])(_this, "renderHtmlPreviewContent", function () {
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        ref: function ref(_ref2) {
-          return _this.elementRef = _ref2;
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", null, "Preview of Edited Html:"), /*#__PURE__*/_react["default"].createElement(StyledPreviewText, null, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-        prompt: _this.state.value.document.text
-      })), /*#__PURE__*/_react["default"].createElement("div", null, "Would you like to save these changes ?"));
-    });
-    /**
-     * Opens a confirmation dialog in HTML mode, displaying the preview of the current HTML content
-     * and offering options to save or continue editing.
-     */
-    (0, _defineProperty2["default"])(_this, "openHtmlModeConfirmationDialog", function (currentValue, previewText) {
-      _this.setState({
-        dialog: {
-          open: true,
-          title: 'Content Preview & Save',
-          text: previewText,
-          onConfirmText: 'Save changes',
-          onCloseText: 'Continue editing',
-          onConfirm: function onConfirm() {
-            _this.handleHtmlModeSaveConfirmation(currentValue);
-          },
-          onClose: _this.htmlModeContinueEditing
-        }
-      });
-    });
-    /**
-     * Handles the save confirmation action in HTML mode. This updates the value to the confirmed
-     * content, updates value on props, and exits the HTML mode.
-     * @param {string} currentValue - The confirmed value of the HTML content to save.
-     */
-    (0, _defineProperty2["default"])(_this, "handleHtmlModeSaveConfirmation", function (currentValue) {
-      _this.setState({
-        value: currentValue
-      });
-      _this.props.onChange(currentValue, true);
-      _this.handleDialog(false);
-      _this.toggleHtmlMode();
-    });
-    /**
-     * Closes the dialog in HTML mode and allows the user to continue editing the html content.
-     * This function is invoked when the user opts to not save the current changes.
-     */
-    (0, _defineProperty2["default"])(_this, "htmlModeContinueEditing", function () {
-      _this.handleDialog(false);
-    });
-    // Allowing time for onChange to take effect if it is called
-    (0, _defineProperty2["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$sta2;
-        if (nonEmpty && ((_this$state$value$sta2 = _this.state.value.startText) === null || _this$state$value$sta2 === void 0 || (_this$state$value$sta2 = _this$state$value$sta2.text) === null || _this$state$value$sta2 === void 0 ? void 0 : _this$state$value$sta2.length) === 0) {
-          _this.resetValue(true).then(function () {
-            _this.onEditingDone();
-            resolve();
-          });
-        } else {
-          _this.onEditingDone();
-          resolve();
-        }
-      }
-    });
-    (0, _defineProperty2["default"])(_this, "onBlur", function (event) {
-      var _this$doneButtonRef$c;
-      log('[onBlur]');
-      var relatedTarget = event.relatedTarget;
-      var toolbarElement = _this.toolbarRef && (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.closest("[class*=\"".concat(_this.toolbarRef.className, "\"]")));
-
-      // Check if relatedTarget is a done button
-      var isRawDoneButton = _this.doneButtonRef && (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.closest("[class*=\"".concat((_this$doneButtonRef$c = _this.doneButtonRef.current) === null || _this$doneButtonRef$c === void 0 ? void 0 : _this$doneButtonRef$c.className, "\"]")));
-
-      // Skip onBlur handling if relatedTarget is a button from the KeyPad characters
-      _this.skipBlurHandling = _this.keypadInteractionDetected && relatedTarget !== null;
-      if (toolbarElement && !isRawDoneButton && !_this.state.focusToolbar) {
-        _this.setState({
-          focusToolbar: true
-        });
-      }
-      var node = relatedTarget ? (0, _slateReact.findNode)(relatedTarget, _this.state.value) : null;
-      log('[onBlur] node: ', node);
-      return new Promise(function (resolve) {
-        if (!_this.skipBlurHandling) {
-          _this.setKeypadInteraction(false);
-          _this.setState({
-            preBlurValue: _this.state.value,
-            focusedNode: !node ? null : node
-          }, _this.handleBlur.bind(_this, resolve));
-        }
-        _this.props.onBlur(event);
-      });
-    });
-    (0, _defineProperty2["default"])(_this, "handleDomBlur", function (e) {
-      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"])(_this, "onFocus", function (event, change) {
-      return new Promise(function (resolve) {
-        var _navigator;
-        var editorDOM = document.querySelector("[data-key=\"".concat(_this.state.value.document.key, "\"]"));
-        var isTouchDevice = typeof window !== 'undefined' && ('ontouchstart' in window || ((_navigator = navigator) === null || _navigator === void 0 ? void 0 : _navigator.maxTouchPoints) > 0);
-        log('[onFocus]', document.activeElement);
-        if (_this.keypadInteractionDetected && _this.__TEMPORARY_CHANGE_DATA) {
-          _this.__TEMPORARY_CHANGE_DATA = null;
-        }
-
-        /**
-         * 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;
-          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 () {
-              _this.__TEMPORARY_CHANGE_DATA = null;
-            });
-          }
-        }
-
-        /**
-         * 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();
-
-        // Added for accessibility: Ensures the editor gains focus when tabbed to for improved keyboard navigation
-        var shouldFocusEditor = !_this.keypadInteractionDetected && !isTouchDevice;
-        if (shouldFocusEditor) {
-          change === null || change === void 0 || change.focus();
-        }
-        resolve();
-      });
-    });
-    (0, _defineProperty2["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"])(_this, "resetValue", function (force) {
-      var _this$state2 = _this.state,
-        value = _this$state2.value,
-        focusedNode = _this$state2.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 () {
-            _this.setState({
-              value: newValue,
-              stashedValue: null
-            }, function () {
-              log('value now: ', _this.state.value.document.toJSON());
-              resolve();
-            });
-          }, 50);
-        });
-      } else {
-        return Promise.resolve({});
-      }
-    });
-    (0, _defineProperty2["default"])(_this, "onChange", function (change, done) {
-      log('[onChange]');
-      window.me = _this;
-      var value = change.value;
-      var charactersLimit = _this.props.charactersLimit;
-      var limit = charactersLimit;
-      if (!limit || limit > MAX_CHARACTERS_LIMIT) {
-        limit = MAX_CHARACTERS_LIMIT;
-      }
-      if (value && value.document && value.document.text && value.document.text.length > limit) {
-        return;
-      }
-
-      // Mark the editor as edited when in HTML mode and its content has changed.
-      // This status will later be used to decide whether to prompt a warning to the user when exiting HTML mode.
-      var isEditedInHtmlMode = !_this.state.isHtmlMode ? false : _this.state.value.document.text !== value.document.text ? true : _this.state.isEditedInHtmlMode;
-      if (isEditedInHtmlMode != _this.state.isEditedInHtmlMode) {
-        _this.handlePlugins(_this.props);
-      }
-      _this.setState({
-        value: value,
-        isEditedInHtmlMode: isEditedInHtmlMode
-      }, function () {
-        log('[onChange], call done()');
-        if (done) {
-          done();
-        }
-      });
-    });
-    (0, _defineProperty2["default"])(_this, "getFocusedValue", function () {
-      if (_this.state.value.isFocused) {
-        return _this.state.value;
-      }
-      return _this.state.preBlurValue;
-    });
-    (0, _defineProperty2["default"])(_this, "validateNode", function (node) {
-      if (node.object !== 'block') return;
-      var last = node.nodes.last();
-      if (!last) return;
-      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"])(_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"])(_this, "focus", function (pos, node) {
-      var position = pos || 'end';
-      _this.props.focus(position, node);
-    });
-    (0, _defineProperty2["default"])(_this, "onDropPaste", /*#__PURE__*/function () {
-      var _ref3 = (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, _t;
-        return _regenerator["default"].wrap(function (_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 = 5;
-                break;
-              }
-              if (_this.props.imageSupport) {
-                _context.next = 1;
-                break;
-              }
-              return _context.abrupt("return");
-            case 1:
-              _context.prev = 1;
-              log('[onDropPaste]');
-              _context.next = 2;
-              return (0, _serialization.getBase64)(file);
-            case 2:
-              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 () {}, function () {
-                return _this.state.value;
-              }, _this.onChange, true);
-              handler.fileChosen(file);
-              _this.props.imageSupport.add(handler);
-              _context.next = 4;
-              break;
-            case 3:
-              _context.prev = 3;
-              _t = _context["catch"](1);
-              log('[onDropPaste] error: ', _t);
-            case 4:
-              _context.next = 9;
-              break;
-            case 5:
-              if (!(type === 'fragment')) {
-                _context.next = 6;
-                break;
-              }
-              change.insertFragment(fragment);
-              _context.next = 9;
-              break;
-            case 6:
-              if (!(type === 'text' || type === 'html')) {
-                _context.next = 9;
-                break;
-              }
-              if (text) {
-                _context.next = 7;
-                break;
-              }
-              return _context.abrupt("return");
-            case 7:
-              _change$value = change.value, _document = _change$value.document, selection = _change$value.selection, startBlock = _change$value.startBlock;
-              if (!startBlock.isVoid) {
-                _context.next = 8;
-                break;
-              }
-              return _context.abrupt("return");
-            case 8:
-              defaultBlock = startBlock;
-              defaultMarks = _document.getInsertMarksAtRange(selection);
-              frag = _slatePlainSerializer["default"].deserialize(text, {
-                defaultBlock: defaultBlock,
-                defaultMarks: defaultMarks
-              }).document;
-              change.insertFragment(frag);
-            case 9:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, null, [[1, 3]]);
-      }));
-      return function (_x, _x2, _x3) {
-        return _ref3.apply(this, arguments);
-      };
-    }());
-    (0, _defineProperty2["default"])(_this, "renderPlaceholder", function (props) {
-      var editor = props.editor;
-      var document = editor.value.document;
-      if (!editor.props.placeholder || document.text !== '' || document.nodes.size !== 1 || !document.isEmpty) {
-        return false;
-      }
-      return /*#__PURE__*/_react["default"].createElement("span", {
-        contentEditable: false,
-        style: {
-          display: 'inline-block',
-          width: 'fit-content',
-          // for centering the placeholder if text-align is set to center
-          maxWidth: '100%',
-          whiteSpace: 'nowrap',
-          opacity: '0.33',
-          pointerEvents: 'none',
-          userSelect: 'none'
-        }
-      }, editor.props.placeholder);
-    });
-    _this.state = {
-      value: _props.value,
-      toolbarOpts: createToolbarOpts(_props.toolbarOpts, _props.error),
-      pendingImages: [],
-      isHtmlMode: false,
-      isEditedInHtmlMode: false,
-      focusToolbar: false,
-      dialog: {
-        open: false
-      }
-    };
-    _this.keyPadCharacterRef = /*#__PURE__*/_react["default"].createRef();
-    _this.doneButtonRef = /*#__PURE__*/_react["default"].createRef();
-    _this.keypadInteractionDetected = false;
-    _this.toggleHtmlMode = _this.toggleHtmlMode.bind(_this);
-    _this.handleToolbarFocus = _this.handleToolbarFocus.bind(_this);
-    _this.handleToolbarBlur = _this.handleToolbarBlur.bind(_this);
-    _this.onResize = (0, _debounce["default"])(function () {
-      if (!_this.state.isHtmlMode && _props.onChange) {
-        _props.onChange(_this.state.value, true);
-      }
-    }, 50);
-    _this.handlePlugins(_this.props);
-    return _this;
-  }
-  (0, _inherits2["default"])(Editor, _React$Component);
-  return (0, _createClass2["default"])(Editor, [{
-    key: "handleToolbarFocus",
-    value: function handleToolbarFocus() {
-      if (this.state.focusToolbar) {
-        return;
-      }
-      this.setState({
-        focusToolbar: true
-      });
-    }
-  }, {
-    key: "handleToolbarBlur",
-    value: function handleToolbarBlur() {
-      var _this2 = this;
-      setTimeout(function () {
-        if (!_this2.toolbarContainsFocus()) {
-          _this2.setState({
-            focusToolbar: false
-          });
-        }
-      }, 0);
-    }
-  }, {
-    key: "toolbarContainsFocus",
-    value: function toolbarContainsFocus() {
-      if (!this.toolbarRef) return false;
-      var toolbarElement = this.toolbarRef;
-      var activeElement = document.activeElement;
-      return toolbarElement && toolbarElement.contains(activeElement);
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$props$className,
-        _this3 = this;
-      // onRef is needed to get the ref of the component
-      this.props.onRef(this);
-      window.addEventListener('resize', this.onResize);
-      var isResponseAreaEditor = (_this$props$className = this.props.className) === null || _this$props$className === void 0 ? void 0 : _this$props$className.includes('response-area-editor');
-      if (isResponseAreaEditor && this.editor) {
-        var responseAreaEditor = document.querySelector("[data-key=\"".concat(this.editor.value.document.key, "\"]"));
-        if (responseAreaEditor) {
-          responseAreaEditor.setAttribute('aria-label', 'Answer');
-        }
-      }
-      if (this.editor && this.props.autoFocus) {
-        Promise.resolve().then(function () {
-          if (_this3.editor) {
-            var editorDOM = document.querySelector("[data-key=\"".concat(_this3.editor.value.document.key, "\"]"));
-            _this3.editor.focus();
-            if (editorDOM) {
-              editorDOM.focus();
-            }
-          }
-        });
-      }
-    }
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var _nextProps$value, _this$props$value;
-      var _this$state3 = this.state,
-        isHtmlMode = _this$state3.isHtmlMode,
-        toolbarOpts = _this$state3.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);
-      var differentImageMaxDimensionsProps = !(0, _isEqual["default"])(nextProps.maxImageWidth, this.props.maxImageWidth) || !(0, _isEqual["default"])(nextProps.maxImageHeight, this.props.maxImageHeight);
-      if (differentCharacterProps || differentMathMlProps || differentImageMaxDimensionsProps) {
-        this.handlePlugins(nextProps);
-      }
-      if (!((_nextProps$value = nextProps.value) !== null && _nextProps$value !== void 0 && (_nextProps$value = _nextProps$value.document) !== null && _nextProps$value !== void 0 && _nextProps$value.equals((_this$props$value = this.props.value) === null || _this$props$value === void 0 ? void 0 : _this$props$value.document))) {
-        this.setState({
-          focus: false,
-          value: nextProps.value
-        });
-      }
-    }
-  }, {
-    key: "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
-
-      // Trigger plugins and finish editing if:
-      // 1. The 'isHtmlMode' state has been toggled.
-      // 2. We're currently in 'isHtmlMode' and the editor value has been modified.
-      if (this.state.isHtmlMode !== prevState.isHtmlMode || this.state.isHtmlMode && !prevState.isEditedInHtmlMode && this.state.isEditedInHtmlMode) {
-        this.handlePlugins(this.props);
-      }
-      var zeroWidthEls = document.querySelectorAll('[data-slate-zero-width="z"]');
-      Array.from(zeroWidthEls).forEach(function (el) {
-        el.style.minWidth = '2px';
-        el.style.display = 'inline-block';
-      });
-    }
-  }, {
-    key: "componentWillUnmount",
-    value:
-    /**
-     * Remove onResize event listener
-     */
-    function componentWillUnmount() {
-      window.removeEventListener('resize', this.onResize);
-    }
-  }, {
-    key: "buildSizeStyle",
-    value:
-    // Use the exported utility functions
-    function buildSizeStyle() {
-      return _buildSizeStyle(this.props);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this4 = this,
-        _value$document;
-      var _this$props = this.props,
-        disabled = _this$props.disabled,
-        spellCheck = _this$props.spellCheck,
-        highlightShape = _this$props.highlightShape,
-        className = _this$props.className,
-        placeholder = _this$props.placeholder,
-        pluginProps = _this$props.pluginProps,
-        onKeyDown = _this$props.onKeyDown,
-        slateEditorExtraStyles = _this$props.slateEditorExtraStyles;
-      // We don't want to send customPlugins to slate.
-      // Not sure if they would do any harm, but I think it's better to not send them.
-      // We use custom plugins to be able to add custom buttons
-      // eslint-disable-next-line no-unused-vars
-      var _ref4 = pluginProps || {},
-        customPlugins = _ref4.customPlugins,
-        showParagraphs = _ref4.showParagraphs,
-        separateParagraphs = _ref4.separateParagraphs,
-        otherPluginProps = (0, _objectWithoutProperties2["default"])(_ref4, _excluded);
-      var _this$state4 = this.state,
-        value = _this$state4.value,
-        focusedNode = _this$state4.focusedNode,
-        toolbarOpts = _this$state4.toolbarOpts,
-        dialog = _this$state4.dialog,
-        scheduled = _this$state4.scheduled;
-      log('[render] value: ', value);
-      var sizeStyle = this.buildSizeStyle();
-      var wrapperClassNames = (0, _classnames["default"])({
-        withBg: highlightShape,
-        toolbarOnTop: toolbarOpts.alwaysVisible && toolbarOpts.position === 'top',
-        scheduled: scheduled
-      }, className);
-      return /*#__PURE__*/_react["default"].createElement(StyledEditorWrapper, {
-        ref: function ref(_ref5) {
-          return _this4.wrapperRef = _ref5;
-        },
-        style: {
-          width: sizeStyle.width,
-          minWidth: sizeStyle.minWidth,
-          maxWidth: sizeStyle.maxWidth
-        },
-        className: wrapperClassNames,
-        id: "editor-".concat(value === null || value === void 0 || (_value$document = value.document) === null || _value$document === void 0 ? void 0 : _value$document.key)
-      }, scheduled && /*#__PURE__*/_react["default"].createElement(StyledUploadingMessage, null, "Uploading image and then saving..."), /*#__PURE__*/_react["default"].createElement(StyledSlateEditor, {
-        className: (0, _classnames["default"])({
-          noPadding: toolbarOpts === null || toolbarOpts === void 0 ? void 0 : toolbarOpts.noPadding,
-          showParagraph: showParagraphs && !showParagraphs.disabled,
-          separateParagraph: separateParagraphs && !separateParagraphs.disabled
-        })
-      }, /*#__PURE__*/_react["default"].createElement(_slateReact.Editor, {
-        plugins: this.plugins,
-        innerRef: function innerRef(r) {
-          if (r) {
-            _this4.slateEditor = r;
-          }
-        },
-        ref: function ref(r) {
-          return _this4.editor = r && _this4.props.editorRef(r);
-        },
-        toolbarRef: function toolbarRef(r) {
-          if (r) {
-            _this4.toolbarRef = r;
-          }
-        },
-        doneButtonRef: this.doneButtonRef,
-        value: value,
-        focusToolbar: this.state.focusToolbar,
-        onToolbarFocus: this.handleToolbarFocus,
-        onToolbarBlur: this.handleToolbarBlur,
-        focus: this.focus,
-        onKeyDown: onKeyDown,
-        onChange: this.onChange,
-        getFocusedValue: this.getFocusedValue,
-        onBlur: this.onBlur,
-        onDrop: function onDrop(event, editor) {
-          return _this4.onDropPaste(event, editor, true);
-        },
-        onPaste: function onPaste(event, editor) {
-          return _this4.onDropPaste(event, editor);
-        },
-        onFocus: this.onFocus,
-        onEditingDone: this.onEditingDone,
-        focusedNode: focusedNode,
-        normalize: this.normalize,
-        readOnly: disabled,
-        spellCheck: spellCheck,
-        autoCorrect: spellCheck,
-        style: _objectSpread({
-          minHeight: sizeStyle.minHeight,
-          height: sizeStyle.height,
-          maxHeight: sizeStyle.maxHeight
-        }, slateEditorExtraStyles),
-        pluginProps: otherPluginProps,
-        toolbarOpts: toolbarOpts,
-        placeholder: placeholder,
-        renderPlaceholder: this.renderPlaceholder,
-        onDataChange: this.changeData
-      })), /*#__PURE__*/_react["default"].createElement(_alertDialog["default"], {
-        open: dialog.open,
-        title: dialog.title,
-        text: dialog.text,
-        onClose: dialog.onClose,
-        onConfirm: dialog.onConfirm,
-        onConfirmText: dialog.onConfirmText,
-        onCloseText: dialog.onCloseText
-      }));
-    }
-  }]);
-}(_react["default"].Component); // TODO color - hardcoded gray background and keypad colors will need to change too
-(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,
-  onFocus: _propTypes["default"].func,
-  onBlur: _propTypes["default"].func,
-  onKeyDown: _propTypes["default"].func,
-  focus: _propTypes["default"].func.isRequired,
-  value: _slatePropTypes["default"].value.isRequired,
-  imageSupport: _propTypes["default"].object,
-  mathMlOptions: _propTypes["default"].shape({
-    mmlOutput: _propTypes["default"].bool,
-    mmlEditing: _propTypes["default"].bool
-  }),
-  disableImageAlignmentButtons: _propTypes["default"].bool,
-  uploadSoundSupport: _propTypes["default"].shape({
-    add: _propTypes["default"].func,
-    "delete": _propTypes["default"].func
-  }),
-  charactersLimit: _propTypes["default"].number,
-  width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  minWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  maxWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  minHeight: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  maxHeight: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  slateEditorExtraStyles: _propTypes["default"].object,
-  highlightShape: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool,
-  spellCheck: _propTypes["default"].bool,
-  nonEmpty: _propTypes["default"].bool,
-  disableScrollbar: _propTypes["default"].bool,
-  disableUnderline: _propTypes["default"].bool,
-  autoWidthToolbar: _propTypes["default"].bool,
-  pluginProps: _propTypes["default"].any,
-  // customPlugins should be inside pluginProps (a property inside pluginProps)
-  //   customPlugins: PropTypes.arrayOf(
-  //       PropTypes.shape({
-  //         event: PropTypes.string,
-  //         icon: PropTypes.string,
-  //         iconType: PropTypes.string,
-  //         iconAlt: PropTypes.string
-  //       }),
-  //   ),
-  placeholder: _propTypes["default"].string,
-  isEditor: _propTypes["default"].bool,
-  responseAreaProps: _propTypes["default"].shape({
-    type: _propTypes["default"].oneOf(['explicit-constructed-response', 'inline-dropdown', 'drag-in-the-blank', 'math-templated']),
-    options: _propTypes["default"].object,
-    respAreaToolbar: _propTypes["default"].func,
-    onHandleAreaChange: _propTypes["default"].func,
-    maxResponseAreas: _propTypes["default"].number,
-    error: _propTypes["default"].any
-  }),
-  extraCSSRules: _propTypes["default"].shape({
-    names: _propTypes["default"].arrayOf(_propTypes["default"].string),
-    rules: _propTypes["default"].string
-  }),
-  languageCharactersProps: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    language: _propTypes["default"].string,
-    characterIcon: _propTypes["default"].string,
-    characters: _propTypes["default"].arrayOf(_propTypes["default"].arrayOf(_propTypes["default"].string))
-  })),
-  runSerializationOnMarkup: _propTypes["default"].func,
-  toolbarOpts: _propTypes["default"].shape({
-    position: _propTypes["default"].oneOf(['bottom', 'top']),
-    alignment: _propTypes["default"].oneOf(['left', 'right']),
-    alwaysVisible: _propTypes["default"].bool,
-    showDone: _propTypes["default"].bool,
-    doneOn: _propTypes["default"].string,
-    minWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
-  }),
-  activePlugins: _propTypes["default"].arrayOf(function (values) {
-    var allValid = values.every(function (v) {
-      return _plugins.ALL_PLUGINS.includes(v);
-    });
-    return !allValid && new Error("Invalid values: ".concat(values, ", values must be one of [").concat(_plugins.ALL_PLUGINS.join(','), "]"));
-  }),
-  className: _propTypes["default"].string,
-  maxImageWidth: _propTypes["default"].number,
-  maxImageHeight: _propTypes["default"].number
-});
-(0, _defineProperty2["default"])(Editor, "defaultProps", {
-  disableUnderline: true,
-  onFocus: function onFocus() {},
-  onBlur: function onBlur() {},
-  onKeyDown: function onKeyDown() {},
-  runSerializationOnMarkup: function runSerializationOnMarkup() {},
-  mathMlOptions: {
-    mmlOutput: false,
-    mmlEditing: false
-  },
-  toolbarOpts: defaultToolbarOpts,
-  responseAreaProps: defaultResponseAreaProps,
-  languageCharactersProps: defaultLanguageCharactersProps,
-  extraCSSRules: null,
-  isEditor: false
-});
-var StyledEditorWrapper = (0, _styles.styled)('div')(function () {
-  return {
-    '&.withBg': {
-      backgroundColor: 'rgba(0,0,0,0.06)'
-    },
-    '&.scheduled': {
-      opacity: 0.5,
-      pointerEvents: 'none',
-      position: 'relative'
-    },
-    '&.toolbarOnTop': {
-      marginTop: '45px'
-    }
-  };
-});
-var StyledUploadingMessage = (0, _styles.styled)('div')({
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)'
-});
-var StyledSlateEditor = (0, _styles.styled)('div')(function () {
-  return {
-    '& table': {
-      tableLayout: 'fixed',
-      width: '100%',
-      borderCollapse: 'collapse',
-      color: _renderUi.color.text(),
-      backgroundColor: _renderUi.color.background()
-    },
-    '& table:not([border="1"]) tr': {
-      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'
-    },
-    '& table:not([border="1"]) td, th': {
-      border: '1px solid #dfe2e5'
-    },
-    '&.showParagraph': {
-      // a div that has a div after it
-      '& > div:has(+ div)::after': {
-        display: 'block',
-        content: '"¶"',
-        fontSize: '1em',
-        color: '#146EB3'
-      }
-    },
-    '&.separateParagraph': {
-      // a div that has a div after it
-      '& > div:has(+ div)': {
-        marginBottom: '1em'
-      }
-    },
-    '&.noPadding': {
-      padding: '0 !important'
-    }
-  };
-});
-var StyledPreviewText = (0, _styles.styled)('div')({
-  marginBottom: '36px',
-  marginTop: '6px',
-  padding: '20px',
-  backgroundColor: 'rgba(0,0,0,0.06)'
-});
-var _default = exports["default"] = Editor;
-//# sourceMappingURL=editor.js.map