slate-react 0.56.1 → 0.57.3

package/dist/index.es.js

@@ -1,64 +1,75 @@
-import React, { useLayoutEffect, useEffect, useRef, createContext, useContext, useMemo, useCallback, useState } from 'react';
-import { Path, Node as Node$1, Editor, Text as Text$1, Range, Element as Element$1, Command } from 'slate';
-import debounce from 'debounce';
+import React, { createContext, useContext, useState, useMemo, useCallback, useEffect, useLayoutEffect, useRef } from 'react';
+import { Editor, Transforms, Range, Path, Node as Node$1, Text as Text$1, Element as Element$1 } from 'slate';
+import throttle from 'lodash/throttle';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import getDirection from 'direction';
-import { isKeyHotkey } from 'is-hotkey';
 import ReactDOM from 'react-dom';
+import { isKeyHotkey } from 'is-hotkey';
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
 
 /**
- * Leaf content strings.
- */
-const String = (props) => {
-    const { isLast, leaf, parent, text } = props;
-    const editor = useEditor();
-    const path = ReactEditor.findPath(editor, text);
-    const parentPath = Path.parent(path);
-    // COMPAT: Render text inside void nodes with a zero-width space.
-    // So the node can contain selection but the text is not visible.
-    if (editor.isVoid(parent)) {
-        return React.createElement(ZeroWidthString, { length: Node$1.string(parent).length });
-    }
-    // COMPAT: If this is the last text node in an empty block, render a zero-
-    // width space that will convert into a line break when copying and pasting
-    // to support expected plain text.
-    if (leaf.text === '' &&
-        parent.children[parent.children.length - 1] === text &&
-        !editor.isInline(parent) &&
-        Editor.string(editor, parentPath) === '') {
-        return React.createElement(ZeroWidthString, { isLineBreak: true });
-    }
-    // COMPAT: If the text is empty, it's because it's on the edge of an inline
-    // node, so we render a zero-width space so that the selection can be
-    // inserted next to it still.
-    if (leaf.text === '') {
-        return React.createElement(ZeroWidthString, null);
-    }
-    // COMPAT: Browsers will collapse trailing new lines at the end of blocks,
-    // so we need to add an extra trailing new lines to prevent that.
-    if (isLast && leaf.text.slice(-1) === '\n') {
-        return React.createElement(TextString, { isTrailing: true, text: leaf.text });
-    }
-    return React.createElement(TextString, { text: leaf.text });
-};
-/**
- * Leaf strings with text in them.
- */
-const TextString = (props) => {
-    const { text, isTrailing = false } = props;
-    return (React.createElement("span", { "data-slate-string": true },
-        text,
-        isTrailing ? '\n' : null));
-};
+ * An auto-incrementing identifier for keys.
+ */
+var n = 0;
 /**
- * Leaf strings without text, render as zero-width strings.
- */
-const ZeroWidthString = (props) => {
-    const { length = 0, isLineBreak = false } = props;
-    return (React.createElement("span", { "data-slate-zero-width": isLineBreak ? 'n' : 'z', "data-slate-length": length },
-        '\uFEFF',
-        isLineBreak ? React.createElement("br", null) : null));
-};
+ * A class that keeps track of a key string. We use a full class here because we
+ * want to be able to use them as keys in `WeakMap` objects.
+ */
+
+class Key {
+  constructor() {
+    this.id = "".concat(n++);
+  }
+
+}
 
 /**
  * Two weak maps that allow us rebuild a path given a node. They are populated
@@ -94,523 +105,51 @@ var EDITOR_TO_ON_CHANGE = new WeakMap();
 var PLACEHOLDER_SYMBOL = Symbol('placeholder');
 
 /**
- * Individual leaves in a text node with unique formatting.
- */
-const Leaf = (props) => {
-    const { leaf, isLast, text, parent, renderLeaf = (props) => React.createElement(DefaultLeaf, Object.assign({}, props)), } = props;
-    let children = (React.createElement(String, { isLast: isLast, leaf: leaf, parent: parent, text: text }));
-    if (leaf[PLACEHOLDER_SYMBOL]) {
-        children = (React.createElement(React.Fragment, null,
-            React.createElement("span", { contentEditable: false, style: {
-                    pointerEvents: 'none',
-                    display: 'inline-block',
-                    verticalAlign: 'text-top',
-                    width: '0',
-                    maxWidth: '100%',
-                    whiteSpace: 'nowrap',
-                    opacity: '0.333',
-                } }, leaf.placeholder),
-            children));
-    }
-    // COMPAT: Having the `data-` attributes on these leaf elements ensures that
-    // in certain misbehaving browsers they aren't weirdly cloned/destroyed by
-    // contenteditable behaviors. (2019/05/08)
-    const attributes = {
-        'data-slate-leaf': true,
-    };
-    return renderLeaf({ attributes, children, leaf, text });
-};
-const MemoizedLeaf = React.memo(Leaf, (prev, next) => {
-    return (next.parent === prev.parent &&
-        next.isLast === prev.isLast &&
-        next.renderLeaf === prev.renderLeaf &&
-        next.text === prev.text &&
-        Text$1.matches(next.leaf, prev.leaf));
-});
-/**
- * The default custom leaf renderer.
- */
-const DefaultLeaf = (props) => {
-    const { attributes, children } = props;
-    return React.createElement("span", Object.assign({}, attributes), children);
-};
-
-/**
- * Prevent warning on SSR by falling back to useEffect when window is not defined
- */
-
-var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-
-/**
- * Text.
- */
-const Text = (props) => {
-    const { decorations, isLast, parent, renderLeaf, text } = props;
-    const editor = useEditor();
-    const ref = useRef(null);
-    const leaves = getLeaves(text, decorations);
-    const key = ReactEditor.findKey(editor, text);
-    const children = [];
-    for (let i = 0; i < leaves.length; i++) {
-        const leaf = leaves[i];
-        children.push(React.createElement(MemoizedLeaf, { isLast: isLast && i === leaves.length - 1, key: `${key.id}-${i}`, leaf: leaf, text: text, parent: parent, renderLeaf: renderLeaf }));
-    }
-    // Update element-related weak maps with the DOM element ref.
-    useIsomorphicLayoutEffect(() => {
-        if (ref.current) {
-            KEY_TO_ELEMENT.set(key, ref.current);
-            NODE_TO_ELEMENT.set(text, ref.current);
-            ELEMENT_TO_NODE.set(ref.current, text);
-        }
-        else {
-            KEY_TO_ELEMENT.delete(key);
-            NODE_TO_ELEMENT.delete(text);
-        }
-    });
-    return (React.createElement("span", { "data-slate-node": "text", ref: ref }, children));
-};
-/**
- * Get the leaves for a text node given decorations.
- */
-const getLeaves = (node, decorations) => {
-    let leaves = [{ ...node }];
-    for (const dec of decorations) {
-        const { anchor, focus, ...rest } = dec;
-        const [start, end] = Range.edges(dec);
-        const next = [];
-        let o = 0;
-        for (const leaf of leaves) {
-            const { length } = leaf.text;
-            const offset = o;
-            o += length;
-            // If the range encompases the entire leaf, add the range.
-            if (start.offset <= offset && end.offset >= offset + length) {
-                Object.assign(leaf, rest);
-                next.push(leaf);
-                continue;
-            }
-            // If the range starts after the leaf, or ends before it, continue.
-            if (start.offset > offset + length ||
-                end.offset < offset ||
-                (end.offset === offset && offset !== 0)) {
-                next.push(leaf);
-                continue;
-            }
-            // Otherwise we need to split the leaf, at the start, end, or both,
-            // and add the range to the middle intersecting section. Do the end
-            // split first since we don't need to update the offset that way.
-            let middle = leaf;
-            let before;
-            let after;
-            if (end.offset < offset + length) {
-                const off = end.offset - offset;
-                after = { ...middle, text: middle.text.slice(off) };
-                middle = { ...middle, text: middle.text.slice(0, off) };
-            }
-            if (start.offset > offset) {
-                const off = start.offset - offset;
-                before = { ...middle, text: middle.text.slice(0, off) };
-                middle = { ...middle, text: middle.text.slice(off) };
-            }
-            Object.assign(middle, rest);
-            if (before) {
-                next.push(before);
-            }
-            next.push(middle);
-            if (after) {
-                next.push(after);
-            }
-        }
-        leaves = next;
-    }
-    return leaves;
-};
-const MemoizedText = React.memo(Text, (prev, next) => {
-    return (next.parent === prev.parent &&
-        next.isLast === prev.isLast &&
-        next.renderLeaf === prev.renderLeaf &&
-        next.text === prev.text);
-});
-
-/**
- * A React context for sharing the `selected` state of an element.
- */
-
-var SelectedContext = createContext(false);
-/**
- * Get the current `selected` state of an element.
- */
-
-var useSelected = function useSelected() {
-  return useContext(SelectedContext);
-};
-
-/**
- * Element.
- */
-const Element = (props) => {
-    const { decorate, decorations, element, renderElement = (p) => React.createElement(DefaultElement, Object.assign({}, p)), renderLeaf, selection, } = props;
-    const ref = useRef(null);
-    const editor = useEditor();
-    const readOnly = useReadOnly();
-    const isInline = editor.isInline(element);
-    const key = ReactEditor.findKey(editor, element);
-    let children = (React.createElement(Children, { decorate: decorate, decorations: decorations, node: element, renderElement: renderElement, renderLeaf: renderLeaf, selection: selection }));
-    // Attributes that the developer must mix into the element in their
-    // custom node renderer component.
-    const attributes = {
-        'data-slate-node': 'element',
-        ref,
-    };
-    if (isInline) {
-        attributes['data-slate-inline'] = true;
-    }
-    // If it's a block node with inline children, add the proper `dir` attribute
-    // for text direction.
-    if (!isInline && Editor.hasInlines(editor, element)) {
-        const text = Node$1.string(element);
-        const dir = getDirection(text);
-        if (dir === 'rtl') {
-            attributes.dir = dir;
-        }
-    }
-    // If it's a void node, wrap the children in extra void-specific elements.
-    if (Editor.isVoid(editor, element)) {
-        attributes['data-slate-void'] = true;
-        if (!readOnly && isInline) {
-            attributes.contentEditable = false;
-        }
-        const Tag = isInline ? 'span' : 'div';
-        const [[text]] = Node$1.texts(element);
-        children = readOnly ? null : (React.createElement(Tag, { "data-slate-spacer": true, style: {
-                height: '0',
-                color: 'transparent',
-                outline: 'none',
-                position: 'absolute',
-            } },
-            React.createElement(MemoizedText, { decorations: [], isLast: false, parent: element, text: text })));
-        NODE_TO_INDEX.set(text, 0);
-        NODE_TO_PARENT.set(text, element);
-    }
-    // Update element-related weak maps with the DOM element ref.
-    useIsomorphicLayoutEffect(() => {
-        if (ref.current) {
-            KEY_TO_ELEMENT.set(key, ref.current);
-            NODE_TO_ELEMENT.set(element, ref.current);
-            ELEMENT_TO_NODE.set(ref.current, element);
-        }
-        else {
-            KEY_TO_ELEMENT.delete(key);
-            NODE_TO_ELEMENT.delete(element);
-        }
-    });
-    return (React.createElement(SelectedContext.Provider, { value: !!selection }, renderElement({ attributes, children, element })));
-};
-const MemoizedElement = React.memo(Element, (prev, next) => {
-    return (prev.decorate === next.decorate &&
-        prev.element === next.element &&
-        prev.renderElement === next.renderElement &&
-        prev.renderLeaf === next.renderLeaf &&
-        isRangeListEqual(prev.decorations, next.decorations) &&
-        (prev.selection === next.selection ||
-            (!!prev.selection &&
-                !!next.selection &&
-                Range.equals(prev.selection, next.selection))));
-});
-/**
- * The default element renderer.
- */
-const DefaultElement = (props) => {
-    const { attributes, children, element } = props;
-    const editor = useEditor();
-    const Tag = editor.isInline(element) ? 'span' : 'div';
-    return (React.createElement(Tag, Object.assign({}, attributes, { style: { position: 'relative' } }), children));
-};
-/**
- * Check if a list of ranges is equal to another.
- *
- * PERF: this requires the two lists to also have the ranges inside them in the
- * same order, but this is an okay constraint for us since decorations are
- * kept in order, and the odd case where they aren't is okay to re-render for.
- */
-const isRangeListEqual = (list, another) => {
-    if (list.length !== another.length) {
-        return false;
-    }
-    for (let i = 0; i < list.length; i++) {
-        const range = list[i];
-        const other = another[i];
-        if (!Range.equals(range, other)) {
-            return false;
-        }
-    }
-    return true;
-};
-
-/**
- * A React context for sharing the `Editor` class.
- */
-const EditorContext = createContext(null);
-/**
- * Get the current `Editor` class that the component lives under.
- */
-const useEditor = () => {
-    const editor = useContext(EditorContext);
-    if (!editor) {
-        throw new Error(`The \`useEditor\` hook must be used inside the <Slate> component's context.`);
-    }
-    return editor;
-};
-
-/**
- * Children.
- */
-const Children = (props) => {
-    const { decorate, decorations, node, renderElement, renderLeaf, selection, } = props;
-    const editor = useEditor();
-    const path = ReactEditor.findPath(editor, node);
-    const children = [];
-    const isLeafBlock = Element$1.isElement(node) &&
-        !editor.isInline(node) &&
-        Editor.hasInlines(editor, node);
-    for (let i = 0; i < node.children.length; i++) {
-        const p = path.concat(i);
-        const n = node.children[i];
-        const key = ReactEditor.findKey(editor, n);
-        const range = Editor.range(editor, p);
-        const sel = selection && Range.intersection(range, selection);
-        const ds = decorate([n, p]);
-        for (const dec of decorations) {
-            const d = Range.intersection(dec, range);
-            if (d) {
-                ds.push(d);
-            }
-        }
-        if (Element$1.isElement(n)) {
-            children.push(React.createElement(MemoizedElement, { decorate: decorate, decorations: ds, element: n, key: key.id, renderElement: renderElement, renderLeaf: renderLeaf, selection: sel }));
-        }
-        else {
-            children.push(React.createElement(MemoizedText, { decorations: ds, key: key.id, isLast: isLeafBlock && i === node.children.length - 1, parent: node, renderLeaf: renderLeaf, text: n }));
-        }
-        NODE_TO_INDEX.set(n, i);
-        NODE_TO_PARENT.set(n, node);
-    }
-    return React.createElement(React.Fragment, null, children);
-};
-
-var IS_IOS = typeof navigator !== 'undefined' && typeof window !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
-var IS_APPLE = typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.userAgent);
-var IS_FIREFOX = typeof navigator !== 'undefined' && /^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);
-var IS_SAFARI = typeof navigator !== 'undefined' && /Version\/[\d\.]+.*Safari/.test(navigator.userAgent);
-
-/**
- * Hotkey mappings for each platform.
- */
-
-var HOTKEYS = {
-  bold: 'mod+b',
-  compose: ['down', 'left', 'right', 'up', 'backspace', 'enter'],
-  moveBackward: 'left',
-  moveForward: 'right',
-  moveWordBackward: 'ctrl+left',
-  moveWordForward: 'ctrl+right',
-  deleteBackward: 'shift?+backspace',
-  deleteForward: 'shift?+delete',
-  extendBackward: 'shift+left',
-  extendForward: 'shift+right',
-  italic: 'mod+i',
-  splitBlock: 'shift?+enter',
-  undo: 'mod+z'
-};
-var APPLE_HOTKEYS = {
-  moveLineBackward: 'opt+up',
-  moveLineForward: 'opt+down',
-  moveWordBackward: 'opt+left',
-  moveWordForward: 'opt+right',
-  deleteBackward: ['ctrl+backspace', 'ctrl+h'],
-  deleteForward: ['ctrl+delete', 'ctrl+d'],
-  deleteLineBackward: 'cmd+shift?+backspace',
-  deleteLineForward: ['cmd+shift?+delete', 'ctrl+k'],
-  deleteWordBackward: 'opt+shift?+backspace',
-  deleteWordForward: 'opt+shift?+delete',
-  extendLineBackward: 'opt+shift+up',
-  extendLineForward: 'opt+shift+down',
-  redo: 'cmd+shift+z',
-  transposeCharacter: 'ctrl+t'
-};
-var WINDOWS_HOTKEYS = {
-  deleteWordBackward: 'ctrl+shift?+backspace',
-  deleteWordForward: 'ctrl+shift?+delete',
-  redo: ['ctrl+y', 'ctrl+shift+z']
-};
-/**
- * Create a platform-aware hotkey checker.
- */
-
-var create = function create(key) {
-  var generic = HOTKEYS[key];
-  var apple = APPLE_HOTKEYS[key];
-  var windows = WINDOWS_HOTKEYS[key];
-  var isGeneric = generic && isKeyHotkey(generic);
-  var isApple = apple && isKeyHotkey(apple);
-  var isWindows = windows && isKeyHotkey(windows);
-  return function (event) {
-    if (isGeneric && isGeneric(event)) return true;
-    if (IS_APPLE && isApple && isApple(event)) return true;
-    if (!IS_APPLE && isWindows && isWindows(event)) return true;
-    return false;
-  };
-};
-/**
- * Hotkeys.
- */
-
-
-var Hotkeys = {
-  isBold: create('bold'),
-  isCompose: create('compose'),
-  isMoveBackward: create('moveBackward'),
-  isMoveForward: create('moveForward'),
-  isDeleteBackward: create('deleteBackward'),
-  isDeleteForward: create('deleteForward'),
-  isDeleteLineBackward: create('deleteLineBackward'),
-  isDeleteLineForward: create('deleteLineForward'),
-  isDeleteWordBackward: create('deleteWordBackward'),
-  isDeleteWordForward: create('deleteWordForward'),
-  isExtendBackward: create('extendBackward'),
-  isExtendForward: create('extendForward'),
-  isExtendLineBackward: create('extendLineBackward'),
-  isExtendLineForward: create('extendLineForward'),
-  isItalic: create('italic'),
-  isMoveLineBackward: create('moveLineBackward'),
-  isMoveLineForward: create('moveLineForward'),
-  isMoveWordBackward: create('moveWordBackward'),
-  isMoveWordForward: create('moveWordForward'),
-  isRedo: create('redo'),
-  isSplitBlock: create('splitBlock'),
-  isTransposeCharacter: create('transposeCharacter'),
-  isUndo: create('undo')
-};
-
-/**
- * A React context for sharing the `readOnly` state of the editor.
- */
-
-var ReadOnlyContext = createContext(false);
-/**
- * Get the current `readOnly` state of the editor.
+ * Types.
  */
-
-var useReadOnly = function useReadOnly() {
-  return useContext(ReadOnlyContext);
-};
-
-/**
- * A React context for sharing the `Editor` class, in a way that re-renders the
- * context whenever changes occur.
- */
-const SlateContext = createContext(null);
-/**
- * Get the current `Editor` class that the component lives under.
- */
-const useSlate = () => {
-    const context = useContext(SlateContext);
-    if (!context) {
-        throw new Error(`The \`useSlate\` hook must be used inside the <SlateProvider> component's context.`);
-    }
-    const [editor] = context;
-    return editor;
-};
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-var arrayWithHoles = _arrayWithHoles;
-
-function _iterableToArrayLimit(arr, i) {
-  if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
-    return;
-  }
-
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _e = undefined;
-
-  try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-var iterableToArrayLimit = _iterableToArrayLimit;
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance");
-}
-
-var nonIterableRest = _nonIterableRest;
-
-function _slicedToArray(arr, i) {
-  return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || nonIterableRest();
-}
-
-var slicedToArray = _slicedToArray;
-
 /**
  * Check if a DOM node is a comment node.
  */
 
-var isDOMComment = function isDOMComment(value) {
+var isDOMComment = value => {
   return isDOMNode(value) && value.nodeType === 8;
 };
 /**
  * Check if a DOM node is an element node.
  */
 
-var isDOMElement = function isDOMElement(value) {
+var isDOMElement = value => {
   return isDOMNode(value) && value.nodeType === 1;
 };
 /**
  * Check if a value is a DOM node.
  */
 
-var isDOMNode = function isDOMNode(value) {
+var isDOMNode = value => {
   return value instanceof Node;
 };
 /**
  * Check if a DOM node is an element node.
  */
 
-var isDOMText = function isDOMText(value) {
+var isDOMText = value => {
   return isDOMNode(value) && value.nodeType === 3;
 };
+/**
+ * Checks whether a paste event is a plaintext-only event.
+ */
+
+var isPlainTextOnlyPaste = event => {
+  return event.clipboardData && event.clipboardData.getData('text/plain') !== '' && event.clipboardData.types.length === 1;
+};
 /**
  * Normalize a DOM point so that it always refers to a text node.
  */
 
-var normalizeDOMPoint = function normalizeDOMPoint(domPoint) {
-  var _domPoint = slicedToArray(domPoint, 2),
-      node = _domPoint[0],
-      offset = _domPoint[1]; // If it's an element node, its offset refers to the index of its children
+var normalizeDOMPoint = domPoint => {
+  var [node, offset] = domPoint; // If it's an element node, its offset refers to the index of its children
   // including comment nodes, so try to find the right text child node.
 
-
   if (isDOMElement(node) && node.childNodes.length) {
     var isLast = offset === node.childNodes.length;
     var direction = isLast ? 'backward' : 'forward';
@@ -635,8 +174,10 @@ var normalizeDOMPoint = function normalizeDOMPoint(domPoint) {
  * `direction`.
  */
 
-var getEditableChild = function getEditableChild(parent, index, direction) {
-  var childNodes = parent.childNodes;
+var getEditableChild = (parent, index, direction) => {
+  var {
+    childNodes
+  } = parent;
   var child = childNodes[index];
   var i = index;
   var triedForward = false;
@@ -668,816 +209,54 @@ var getEditableChild = function getEditableChild(parent, index, direction) {
 
   return child;
 };
-
-/**
- * Editable.
- */
-const Editable = (props) => {
-    const { autoFocus, decorate = defaultDecorate, onDOMBeforeInput: propsOnDOMBeforeInput, placeholder, readOnly = false, renderElement, renderLeaf, style = {}, as: Component = 'div', ...attributes } = props;
-    const editor = useSlate();
-    const ref = useRef(null);
-    // Update internal state on each render.
-    IS_READ_ONLY.set(editor, readOnly);
-    // Keep track of some state for the event handler logic.
-    const state = useMemo(() => ({
-        isComposing: false,
-        isUpdatingSelection: false,
-        latestElement: null,
-    }), []);
-    // Update element-related weak maps with the DOM element ref.
-    useIsomorphicLayoutEffect(() => {
-        if (ref.current) {
-            EDITOR_TO_ELEMENT.set(editor, ref.current);
-            NODE_TO_ELEMENT.set(editor, ref.current);
-            ELEMENT_TO_NODE.set(ref.current, editor);
-        }
-        else {
-            NODE_TO_ELEMENT.delete(editor);
-        }
-    });
-    // Attach a native DOM event handler for `selectionchange`, because React's
-    // built-in `onSelect` handler doesn't fire for all selection changes. It's a
-    // leaky polyfill that only fires on keypresses or clicks. Instead, we want to
-    // fire for any change to the selection inside the editor. (2019/11/04)
-    // https://github.com/facebook/react/issues/5785
-    useIsomorphicLayoutEffect(() => {
-        window.document.addEventListener('selectionchange', onDOMSelectionChange);
-        return () => {
-            window.document.removeEventListener('selectionchange', onDOMSelectionChange);
-        };
-    }, []);
-    // Attach a native DOM event handler for `beforeinput` events, because React's
-    // built-in `onBeforeInput` is actually a leaky polyfill that doesn't expose
-    // real `beforeinput` events sadly... (2019/11/04)
-    // https://github.com/facebook/react/issues/11211
-    useIsomorphicLayoutEffect(() => {
-        if (ref.current) {
-            // @ts-ignore The `beforeinput` event isn't recognized.
-            ref.current.addEventListener('beforeinput', onDOMBeforeInput);
-        }
-        return () => {
-            if (ref.current) {
-                // @ts-ignore The `beforeinput` event isn't recognized.
-                ref.current.removeEventListener('beforeinput', onDOMBeforeInput);
-            }
-        };
-    }, []);
-    // Whenever the editor updates, make sure the DOM selection state is in sync.
-    useIsomorphicLayoutEffect(() => {
-        const { selection } = editor;
-        const domSelection = window.getSelection();
-        if (state.isComposing || !domSelection || !ReactEditor.isFocused(editor)) {
-            return;
-        }
-        const hasDomSelection = domSelection.type !== 'None';
-        // If the DOM selection is properly unset, we're done.
-        if (!selection && !hasDomSelection) {
-            return;
-        }
-        const newDomRange = selection && ReactEditor.toDOMRange(editor, selection);
-        // If the DOM selection is already correct, we're done.
-        if (hasDomSelection &&
-            newDomRange &&
-            isRangeEqual(domSelection.getRangeAt(0), newDomRange)) {
-            return;
-        }
-        // Otherwise the DOM selection is out of sync, so update it.
-        const el = ReactEditor.toDOMNode(editor, editor);
-        state.isUpdatingSelection = true;
-        domSelection.removeAllRanges();
-        if (newDomRange) {
-            domSelection.addRange(newDomRange);
-            const leafEl = newDomRange.startContainer.parentElement;
-            scrollIntoView(leafEl, { scrollMode: 'if-needed' });
-        }
-        setTimeout(() => {
-            // COMPAT: In Firefox, it's not enough to create a range, you also need
-            // to focus the contenteditable element too. (2016/11/16)
-            if (newDomRange && IS_FIREFOX) {
-                el.focus();
-            }
-            state.isUpdatingSelection = false;
-        });
-    });
-    // The autoFocus TextareaHTMLAttribute doesn't do anything on a div, so it
-    // needs to be manually focused.
-    useEffect(() => {
-        if (ref.current && autoFocus) {
-            ref.current.focus();
-        }
-    }, [autoFocus]);
-    // Listen on the native `beforeinput` event to get real "Level 2" events. This
-    // is required because React's `beforeinput` is fake and never really attaches
-    // to the real event sadly. (2019/11/01)
-    // https://github.com/facebook/react/issues/11211
-    const onDOMBeforeInput = useCallback((event) => {
-        if (!readOnly &&
-            hasEditableTarget(editor, event.target) &&
-            !isDOMEventHandled(event, propsOnDOMBeforeInput)) {
-            const { selection } = editor;
-            const { inputType: type } = event;
-            const data = event.dataTransfer || event.data || undefined;
-            // These two types occur while a user is composing text and can't be
-            // cancelled. Let them through and wait for the composition to end.
-            if (type === 'insertCompositionText' ||
-                type === 'deleteCompositionText') {
-                return;
-            }
-            event.preventDefault();
-            // COMPAT: For the deleting forward/backward input types we don't want
-            // to change the selection because it is the range that will be deleted,
-            // and those commands determine that for themselves.
-            if (!type.startsWith('delete') || type.startsWith('deleteBy')) {
-                const [targetRange] = event.getTargetRanges();
-                if (targetRange) {
-                    const range = ReactEditor.toSlateRange(editor, targetRange);
-                    if (!selection || !Range.equals(selection, range)) {
-                        Editor.select(editor, range);
-                    }
-                }
-            }
-            // COMPAT: If the selection is expanded, even if the command seems like
-            // a delete forward/backward command it should delete the selection.
-            if (selection &&
-                Range.isExpanded(selection) &&
-                type.startsWith('delete')) {
-                editor.exec({ type: 'delete_fragment' });
-                return;
-            }
-            switch (type) {
-                case 'deleteByComposition':
-                case 'deleteByCut':
-                case 'deleteByDrag': {
-                    editor.exec({ type: 'delete_fragment' });
-                    break;
-                }
-                case 'deleteContent':
-                case 'deleteContentForward': {
-                    editor.exec({ type: 'delete_forward', unit: 'character' });
-                    break;
-                }
-                case 'deleteContentBackward': {
-                    editor.exec({ type: 'delete_backward', unit: 'character' });
-                    break;
-                }
-                case 'deleteEntireSoftLine': {
-                    editor.exec({ type: 'delete_backward', unit: 'line' });
-                    editor.exec({ type: 'delete_forward', unit: 'line' });
-                    break;
-                }
-                case 'deleteHardLineBackward': {
-                    editor.exec({ type: 'delete_backward', unit: 'block' });
-                    break;
-                }
-                case 'deleteSoftLineBackward': {
-                    editor.exec({ type: 'delete_backward', unit: 'line' });
-                    break;
-                }
-                case 'deleteHardLineForward': {
-                    editor.exec({ type: 'delete_forward', unit: 'block' });
-                    break;
-                }
-                case 'deleteSoftLineForward': {
-                    editor.exec({ type: 'delete_forward', unit: 'line' });
-                    break;
-                }
-                case 'deleteWordBackward': {
-                    editor.exec({ type: 'delete_backward', unit: 'word' });
-                    break;
-                }
-                case 'deleteWordForward': {
-                    editor.exec({ type: 'delete_forward', unit: 'word' });
-                    break;
-                }
-                case 'insertLineBreak':
-                case 'insertParagraph': {
-                    editor.exec({ type: 'insert_break' });
-                    break;
-                }
-                case 'insertFromComposition':
-                case 'insertFromDrop':
-                case 'insertFromPaste':
-                case 'insertFromYank':
-                case 'insertReplacementText':
-                case 'insertText': {
-                    if (data instanceof DataTransfer) {
-                        editor.exec({ type: 'insert_data', data });
-                    }
-                    else if (typeof data === 'string') {
-                        editor.exec({ type: 'insert_text', text: data });
-                    }
-                    break;
-                }
-            }
-        }
-    }, []);
-    // Listen on the native `selectionchange` event to be able to update any time
-    // the selection changes. This is required because React's `onSelect` is leaky
-    // and non-standard so it doesn't fire until after a selection has been
-    // released. This causes issues in situations where another change happens
-    // while a selection is being dragged.
-    const onDOMSelectionChange = useCallback(debounce(() => {
-        if (!readOnly && !state.isComposing && !state.isUpdatingSelection) {
-            const { activeElement } = window.document;
-            const el = ReactEditor.toDOMNode(editor, editor);
-            const domSelection = window.getSelection();
-            const domRange = domSelection &&
-                domSelection.rangeCount > 0 &&
-                domSelection.getRangeAt(0);
-            if (activeElement === el) {
-                state.latestElement = activeElement;
-                IS_FOCUSED.set(editor, true);
-            }
-            else {
-                IS_FOCUSED.delete(editor);
-            }
-            if (domRange &&
-                hasEditableTarget(editor, domRange.startContainer) &&
-                hasEditableTarget(editor, domRange.endContainer)) {
-                const range = ReactEditor.toSlateRange(editor, domRange);
-                Editor.select(editor, range);
-            }
-            else {
-                Editor.deselect(editor);
-            }
-        }
-    }, 100), []);
-    const decorations = decorate([editor, []]);
-    if (placeholder &&
-        editor.children.length === 1 &&
-        Array.from(Node$1.texts(editor)).length === 1 &&
-        Node$1.string(editor) === '') {
-        const start = Editor.start(editor, []);
-        decorations.push({
-            [PLACEHOLDER_SYMBOL]: true,
-            placeholder,
-            anchor: start,
-            focus: start,
-        });
-    }
-    return (React.createElement(ReadOnlyContext.Provider, { value: readOnly },
-        React.createElement(Component
-        // COMPAT: The Grammarly Chrome extension works by changing the DOM
-        // out from under `contenteditable` elements, which leads to weird
-        // behaviors so we have to disable it like editor. (2017/04/24)
-        , Object.assign({ "data-gramm": false, role: readOnly ? undefined : 'textbox' }, attributes, { 
-            // COMPAT: Firefox doesn't support the `beforeinput` event, so we'd
-            // have to use hacks to make these replacement-based features work.
-            spellCheck: IS_FIREFOX ? undefined : attributes.spellCheck, autoCorrect: IS_FIREFOX ? undefined : attributes.autoCorrect, autoCapitalize: IS_FIREFOX ? undefined : attributes.autoCapitalize, "data-slate-editor": true, "data-slate-node": "value", contentEditable: readOnly ? undefined : true, suppressContentEditableWarning: true, ref: ref, style: {
-                // Prevent the default outline styles.
-                outline: 'none',
-                // Preserve adjacent whitespace and new lines.
-                whiteSpace: 'pre-wrap',
-                // Allow words to break if they are too long.
-                wordWrap: 'break-word',
-                // Allow for passed-in styles to override anything.
-                ...style,
-            }, onBeforeInput: useCallback((event) => {
-                // COMPAT: Firefox doesn't support the `beforeinput` event, so we
-                // fall back to React's leaky polyfill instead just for it. It
-                // only works for the `insertText` input type.
-                if (IS_FIREFOX && !readOnly) {
-                    event.preventDefault();
-                    const text = event.data;
-                    editor.exec({ type: 'insert_text', text });
-                }
-            }, [readOnly]), onBlur: useCallback((event) => {
-                if (readOnly ||
-                    state.isUpdatingSelection ||
-                    !hasEditableTarget(editor, event.target) ||
-                    isEventHandled(event, attributes.onBlur)) {
-                    return;
-                }
-                // COMPAT: If the current `activeElement` is still the previous
-                // one, this is due to the window being blurred when the tab
-                // itself becomes unfocused, so we want to abort early to allow to
-                // editor to stay focused when the tab becomes focused again.
-                if (state.latestElement === window.document.activeElement) {
-                    return;
-                }
-                const { relatedTarget } = event;
-                const el = ReactEditor.toDOMNode(editor, editor);
-                // COMPAT: The event should be ignored if the focus is returning
-                // to the editor from an embedded editable element (eg. an <input>
-                // element inside a void node).
-                if (relatedTarget === el) {
-                    return;
-                }
-                // COMPAT: The event should be ignored if the focus is moving from
-                // the editor to inside a void node's spacer element.
-                if (isDOMElement(relatedTarget) &&
-                    relatedTarget.hasAttribute('data-slate-spacer')) {
-                    return;
-                }
-                // COMPAT: The event should be ignored if the focus is moving to a
-                // non- editable section of an element that isn't a void node (eg.
-                // a list item of the check list example).
-                if (relatedTarget != null &&
-                    isDOMNode(relatedTarget) &&
-                    ReactEditor.hasDOMNode(editor, relatedTarget)) {
-                    const node = ReactEditor.toSlateNode(editor, relatedTarget);
-                    if (Element$1.isElement(node) && !editor.isVoid(node)) {
-                        return;
-                    }
-                }
-                IS_FOCUSED.delete(editor);
-            }, [readOnly, attributes.onBlur]), onClick: useCallback((event) => {
-                if (!readOnly &&
-                    hasTarget(editor, event.target) &&
-                    !isEventHandled(event, attributes.onClick) &&
-                    isDOMNode(event.target)) {
-                    const node = ReactEditor.toSlateNode(editor, event.target);
-                    const path = ReactEditor.findPath(editor, node);
-                    const start = Editor.start(editor, path);
-                    if (Editor.void(editor, { at: start })) {
-                        const range = Editor.range(editor, start);
-                        Editor.select(editor, range);
-                    }
-                }
-            }, [readOnly, attributes.onClick]), onCompositionEnd: useCallback((event) => {
-                if (hasEditableTarget(editor, event.target) &&
-                    !isEventHandled(event, attributes.onCompositionEnd)) {
-                    state.isComposing = false;
-                    // COMPAT: In Chrome, `beforeinput` events for compositions
-                    // aren't correct and never fire the "insertFromComposition"
-                    // type that we need. So instead, insert whenever a composition
-                    // ends since it will already have been committed to the DOM.
-                    if (!IS_SAFARI && !IS_FIREFOX && event.data) {
-                        editor.exec({ type: 'insert_text', text: event.data });
-                    }
-                }
-            }, [attributes.onCompositionEnd]), onCompositionStart: useCallback((event) => {
-                if (hasEditableTarget(editor, event.target) &&
-                    !isEventHandled(event, attributes.onCompositionStart)) {
-                    state.isComposing = true;
-                }
-            }, [attributes.onCompositionStart]), onCopy: useCallback((event) => {
-                if (hasEditableTarget(editor, event.target) &&
-                    !isEventHandled(event, attributes.onCopy)) {
-                    event.preventDefault();
-                    setFragmentData(event.clipboardData, editor);
-                }
-            }, [attributes.onCopy]), onCut: useCallback((event) => {
-                if (!readOnly &&
-                    hasEditableTarget(editor, event.target) &&
-                    !isEventHandled(event, attributes.onCut)) {
-                    event.preventDefault();
-                    setFragmentData(event.clipboardData, editor);
-                    const { selection } = editor;
-                    if (selection && Range.isExpanded(selection)) {
-                        editor.exec({ type: 'delete_fragment' });
-                    }
-                }
-            }, [readOnly, attributes.onCut]), onDragOver: useCallback((event) => {
-                if (hasTarget(editor, event.target) &&
-                    !isEventHandled(event, attributes.onDragOver)) {
-                    // Only when the target is void, call `preventDefault` to signal
-                    // that drops are allowed. Editable content is droppable by
-                    // default, and calling `preventDefault` hides the cursor.
-                    const node = ReactEditor.toSlateNode(editor, event.target);
-                    if (Editor.isVoid(editor, node)) {
-                        event.preventDefault();
-                    }
-                }
-            }, [attributes.onDragOver]), onDragStart: useCallback((event) => {
-                if (hasTarget(editor, event.target) &&
-                    !isEventHandled(event, attributes.onDragStart)) {
-                    const node = ReactEditor.toSlateNode(editor, event.target);
-                    const path = ReactEditor.findPath(editor, node);
-                    const voidMatch = Editor.void(editor, { at: path });
-                    // If starting a drag on a void node, make sure it is selected
-                    // so that it shows up in the selection's fragment.
-                    if (voidMatch) {
-                        const range = Editor.range(editor, path);
-                        Editor.select(editor, range);
-                    }
-                    setFragmentData(event.dataTransfer, editor);
-                }
-            }, [attributes.onDragStart]), onDrop: useCallback((event) => {
-                if (hasTarget(editor, event.target) &&
-                    !readOnly &&
-                    !isEventHandled(event, attributes.onDrop)) {
-                    // COMPAT: Firefox doesn't fire `beforeinput` events at all, and
-                    // Chromium browsers don't properly fire them for files being
-                    // dropped into a `contenteditable`. (2019/11/26)
-                    // https://bugs.chromium.org/p/chromium/issues/detail?id=1028668
-                    if (IS_FIREFOX ||
-                        (!IS_SAFARI && event.dataTransfer.files.length > 0)) {
-                        event.preventDefault();
-                        const range = ReactEditor.findEventRange(editor, event);
-                        const data = event.dataTransfer;
-                        Editor.select(editor, range);
-                        editor.exec({ type: 'insert_data', data });
-                    }
-                }
-            }, [readOnly, attributes.onDrop]), onFocus: useCallback((event) => {
-                if (!readOnly &&
-                    !state.isUpdatingSelection &&
-                    hasEditableTarget(editor, event.target) &&
-                    !isEventHandled(event, attributes.onFocus)) {
-                    const el = ReactEditor.toDOMNode(editor, editor);
-                    state.latestElement = window.document.activeElement;
-                    // COMPAT: If the editor has nested editable elements, the focus
-                    // can go to them. In Firefox, this must be prevented because it
-                    // results in issues with keyboard navigation. (2017/03/30)
-                    if (IS_FIREFOX && event.target !== el) {
-                        el.focus();
-                        return;
-                    }
-                    IS_FOCUSED.set(editor, true);
-                }
-            }, [readOnly, attributes.onFocus]), onKeyDown: useCallback((event) => {
-                if (!readOnly &&
-                    hasEditableTarget(editor, event.target) &&
-                    !isEventHandled(event, attributes.onKeyDown)) {
-                    const { nativeEvent } = event;
-                    const { selection } = editor;
-                    // COMPAT: Since we prevent the default behavior on
-                    // `beforeinput` events, the browser doesn't think there's ever
-                    // any history stack to undo or redo, so we have to manage these
-                    // hotkeys ourselves. (2019/11/06)
-                    if (Hotkeys.isRedo(nativeEvent)) {
-                        event.preventDefault();
-                        editor.exec({ type: 'redo' });
-                        return;
-                    }
-                    if (Hotkeys.isUndo(nativeEvent)) {
-                        event.preventDefault();
-                        editor.exec({ type: 'undo' });
-                        return;
-                    }
-                    // COMPAT: Certain browsers don't handle the selection updates
-                    // properly. In Chrome, the selection isn't properly extended.
-                    // And in Firefox, the selection isn't properly collapsed.
-                    // (2017/10/17)
-                    if (Hotkeys.isMoveLineBackward(nativeEvent)) {
-                        event.preventDefault();
-                        Editor.move(editor, { unit: 'line', reverse: true });
-                        return;
-                    }
-                    if (Hotkeys.isMoveLineForward(nativeEvent)) {
-                        event.preventDefault();
-                        Editor.move(editor, { unit: 'line' });
-                        return;
-                    }
-                    if (Hotkeys.isExtendLineBackward(nativeEvent)) {
-                        event.preventDefault();
-                        Editor.move(editor, {
-                            unit: 'line',
-                            edge: 'focus',
-                            reverse: true,
-                        });
-                        return;
-                    }
-                    if (Hotkeys.isExtendLineForward(nativeEvent)) {
-                        event.preventDefault();
-                        Editor.move(editor, { unit: 'line', edge: 'focus' });
-                        return;
-                    }
-                    // COMPAT: If a void node is selected, or a zero-width text node
-                    // adjacent to an inline is selected, we need to handle these
-                    // hotkeys manually because browsers won't be able to skip over
-                    // the void node with the zero-width space not being an empty
-                    // string.
-                    if (Hotkeys.isMoveBackward(nativeEvent)) {
-                        event.preventDefault();
-                        if (selection && Range.isCollapsed(selection)) {
-                            Editor.move(editor, { reverse: true });
-                        }
-                        else {
-                            Editor.collapse(editor, { edge: 'start' });
-                        }
-                        return;
-                    }
-                    if (Hotkeys.isMoveForward(nativeEvent)) {
-                        event.preventDefault();
-                        if (selection && Range.isCollapsed(selection)) {
-                            Editor.move(editor);
-                        }
-                        else {
-                            Editor.collapse(editor, { edge: 'end' });
-                        }
-                        return;
-                    }
-                    if (Hotkeys.isMoveWordBackward(nativeEvent)) {
-                        event.preventDefault();
-                        Editor.move(editor, { unit: 'word', reverse: true });
-                        return;
-                    }
-                    if (Hotkeys.isMoveWordForward(nativeEvent)) {
-                        event.preventDefault();
-                        Editor.move(editor, { unit: 'word' });
-                        return;
-                    }
-                    // COMPAT: Firefox doesn't support the `beforeinput` event, so we
-                    // fall back to guessing at the input intention for hotkeys.
-                    // COMPAT: In iOS, some of these hotkeys are handled in the
-                    if (IS_FIREFOX) {
-                        // We don't have a core behavior for these, but they change the
-                        // DOM if we don't prevent them, so we have to.
-                        if (Hotkeys.isBold(nativeEvent) ||
-                            Hotkeys.isItalic(nativeEvent) ||
-                            Hotkeys.isTransposeCharacter(nativeEvent)) {
-                            event.preventDefault();
-                            return;
-                        }
-                        if (Hotkeys.isSplitBlock(nativeEvent)) {
-                            event.preventDefault();
-                            editor.exec({ type: 'insert_break' });
-                            return;
-                        }
-                        if (Hotkeys.isDeleteBackward(nativeEvent)) {
-                            event.preventDefault();
-                            if (selection && Range.isExpanded(selection)) {
-                                editor.exec({ type: 'delete_fragment' });
-                            }
-                            else {
-                                editor.exec({ type: 'delete_backward', unit: 'character' });
-                            }
-                            return;
-                        }
-                        if (Hotkeys.isDeleteForward(nativeEvent)) {
-                            event.preventDefault();
-                            if (selection && Range.isExpanded(selection)) {
-                                editor.exec({ type: 'delete_fragment' });
-                            }
-                            else {
-                                editor.exec({ type: 'delete_forward', unit: 'character' });
-                            }
-                            return;
-                        }
-                        if (Hotkeys.isDeleteLineBackward(nativeEvent)) {
-                            event.preventDefault();
-                            if (selection && Range.isExpanded(selection)) {
-                                editor.exec({ type: 'delete_fragment' });
-                            }
-                            else {
-                                editor.exec({ type: 'delete_backward', unit: 'line' });
-                            }
-                            return;
-                        }
-                        if (Hotkeys.isDeleteLineForward(nativeEvent)) {
-                            event.preventDefault();
-                            if (selection && Range.isExpanded(selection)) {
-                                editor.exec({ type: 'delete_fragment' });
-                            }
-                            else {
-                                editor.exec({ type: 'delete_forward', unit: 'line' });
-                            }
-                            return;
-                        }
-                        if (Hotkeys.isDeleteWordBackward(nativeEvent)) {
-                            event.preventDefault();
-                            if (selection && Range.isExpanded(selection)) {
-                                editor.exec({ type: 'delete_fragment' });
-                            }
-                            else {
-                                editor.exec({ type: 'delete_backward', unit: 'word' });
-                            }
-                            return;
-                        }
-                        if (Hotkeys.isDeleteWordForward(nativeEvent)) {
-                            event.preventDefault();
-                            if (selection && Range.isExpanded(selection)) {
-                                editor.exec({ type: 'delete_fragment' });
-                            }
-                            else {
-                                editor.exec({ type: 'delete_forward', unit: 'word' });
-                            }
-                            return;
-                        }
-                    }
-                }
-            }, [readOnly, attributes.onKeyDown]), onPaste: useCallback((event) => {
-                // COMPAT: Firefox doesn't support the `beforeinput` event, so we
-                // fall back to React's `onPaste` here instead.
-                if (IS_FIREFOX &&
-                    !readOnly &&
-                    hasEditableTarget(editor, event.target) &&
-                    !isEventHandled(event, attributes.onPaste)) {
-                    event.preventDefault();
-                    editor.exec({
-                        type: 'insert_data',
-                        data: event.clipboardData,
-                    });
-                }
-            }, [readOnly, attributes.onPaste]) }),
-            React.createElement(Children, { decorate: decorate, decorations: decorations, node: editor, renderElement: renderElement, renderLeaf: renderLeaf, selection: editor.selection }))));
-};
-/**
- * A default memoized decorate function.
- */
-const defaultDecorate = () => [];
-/**
- * Check if two DOM range objects are equal.
- */
-const isRangeEqual = (a, b) => {
-    return ((a.startContainer === b.startContainer &&
-        a.startOffset === b.startOffset &&
-        a.endContainer === b.endContainer &&
-        a.endOffset === b.endOffset) ||
-        (a.startContainer === b.endContainer &&
-            a.startOffset === b.endOffset &&
-            a.endContainer === b.startContainer &&
-            a.endOffset === b.startOffset));
-};
-/**
- * Check if the target is in the editor.
- */
-const hasTarget = (editor, target) => {
-    return isDOMNode(target) && ReactEditor.hasDOMNode(editor, target);
-};
-/**
- * Check if the target is editable and in the editor.
- */
-const hasEditableTarget = (editor, target) => {
-    return (isDOMNode(target) &&
-        ReactEditor.hasDOMNode(editor, target, { editable: true }));
-};
-/**
- * Check if an event is overrided by a handler.
- */
-const isEventHandled = (event, handler) => {
-    if (!handler) {
-        return false;
-    }
-    handler(event);
-    return event.isDefaultPrevented() || event.isPropagationStopped();
-};
-/**
- * Check if a DOM event is overrided by a handler.
- */
-const isDOMEventHandled = (event, handler) => {
-    if (!handler) {
-        return false;
-    }
-    handler(event);
-    return event.defaultPrevented;
-};
-/**
- * Set the currently selected fragment to the clipboard.
- */
-const setFragmentData = (dataTransfer, editor) => {
-    const { selection } = editor;
-    if (!selection) {
-        return;
-    }
-    const [start, end] = Range.edges(selection);
-    const startVoid = Editor.void(editor, { at: start.path });
-    const endVoid = Editor.void(editor, { at: end.path });
-    if (Range.isCollapsed(selection) && !startVoid) {
-        return;
-    }
-    // Create a fake selection so that we can add a Base64-encoded copy of the
-    // fragment to the HTML, to decode on future pastes.
-    const domRange = ReactEditor.toDOMRange(editor, selection);
-    let contents = domRange.cloneContents();
-    let attach = contents.childNodes[0];
-    // Make sure attach is non-empty, since empty nodes will not get copied.
-    contents.childNodes.forEach(node => {
-        if (node.textContent && node.textContent.trim() !== '') {
-            attach = node;
-        }
-    });
-    // COMPAT: If the end node is a void node, we need to move the end of the
-    // range from the void node's spacer span, to the end of the void node's
-    // content, since the spacer is before void's content in the DOM.
-    if (endVoid) {
-        const [voidNode] = endVoid;
-        const r = domRange.cloneRange();
-        const domNode = ReactEditor.toDOMNode(editor, voidNode);
-        r.setEndAfter(domNode);
-        contents = r.cloneContents();
-    }
-    // COMPAT: If the start node is a void node, we need to attach the encoded
-    // fragment to the void node's content node instead of the spacer, because
-    // attaching it to empty `<div>/<span>` nodes will end up having it erased by
-    // most browsers. (2018/04/27)
-    if (startVoid) {
-        attach = contents.querySelector('[data-slate-spacer]');
-    }
-    // Remove any zero-width space spans from the cloned DOM so that they don't
-    // show up elsewhere when pasted.
-    Array.from(contents.querySelectorAll('[data-slate-zero-width]')).forEach(zw => {
-        const isNewline = zw.getAttribute('data-slate-zero-width') === 'n';
-        zw.textContent = isNewline ? '\n' : '';
-    });
-    // Set a `data-slate-fragment` attribute on a non-empty node, so it shows up
-    // in the HTML, and can be used for intra-Slate pasting. If it's a text
-    // node, wrap it in a `<span>` so we have something to set an attribute on.
-    if (isDOMText(attach)) {
-        const span = document.createElement('span');
-        // COMPAT: In Chrome and Safari, if we don't add the `white-space` style
-        // then leading and trailing spaces will be ignored. (2017/09/21)
-        span.style.whiteSpace = 'pre';
-        span.appendChild(attach);
-        contents.appendChild(span);
-        attach = span;
-    }
-    const fragment = Node$1.fragment(editor, selection);
-    const string = JSON.stringify(fragment);
-    const encoded = window.btoa(encodeURIComponent(string));
-    attach.setAttribute('data-slate-fragment', encoded);
-    dataTransfer.setData('application/x-slate-fragment', encoded);
-    // Add the content to a <div> so that we can get its inner HTML.
-    const div = document.createElement('div');
-    div.appendChild(contents);
-    dataTransfer.setData('text/html', div.innerHTML);
-    dataTransfer.setData('text/plain', getPlainText(div));
-};
 /**
  * Get a plaintext representation of the content of a node, accounting for block
  * elements which get a newline appended.
- */
-const getPlainText = (domNode) => {
-    let text = '';
-    if (isDOMText(domNode) && domNode.nodeValue) {
-        return domNode.nodeValue;
-    }
-    if (isDOMElement(domNode)) {
-        for (const childNode of Array.from(domNode.childNodes)) {
-            text += getPlainText(childNode);
-        }
-        const display = getComputedStyle(domNode).getPropertyValue('display');
-        if (display === 'block' || display === 'list' || domNode.tagName === 'BR') {
-            text += '\n';
-        }
-    }
-    return text;
-};
+ *
+ * The domNode must be attached to the DOM.
+ */
 
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) {
-    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
-      arr2[i] = arr[i];
-    }
+var getPlainText = domNode => {
+  var text = '';
 
-    return arr2;
+  if (isDOMText(domNode) && domNode.nodeValue) {
+    return domNode.nodeValue;
   }
-}
-
-var arrayWithoutHoles = _arrayWithoutHoles;
 
-function _iterableToArray(iter) {
-  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
-}
+  if (isDOMElement(domNode)) {
+    for (var childNode of Array.from(domNode.childNodes)) {
+      text += getPlainText(childNode);
+    }
 
-var iterableToArray = _iterableToArray;
+    var display = getComputedStyle(domNode).getPropertyValue('display');
 
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance");
-}
+    if (display === 'block' || display === 'list' || domNode.tagName === 'BR') {
+      text += '\n';
+    }
+  }
 
-var nonIterableSpread = _nonIterableSpread;
+  return text;
+};
 
-function _toConsumableArray(arr) {
-  return arrayWithoutHoles(arr) || iterableToArray(arr) || nonIterableSpread();
-}
+var ReactEditor = {
+  /**
+   * Find a key for a Slate node.
+   */
+  findKey(editor, node) {
+    var key = NODE_TO_KEY.get(node);
 
-var toConsumableArray = _toConsumableArray;
+    if (!key) {
+      key = new Key();
+      NODE_TO_KEY.set(node, key);
+    }
 
-function _classCallCheck(instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-}
-
-var classCallCheck = _classCallCheck;
-
-/**
- * An auto-incrementing identifier for keys.
- */
-var n = 0;
-/**
- * A class that keeps track of a key string. We use a full class here because we
- * want to be able to use them as keys in `WeakMap` objects.
- */
-
-var Key = function Key() {
-  classCallCheck(this, Key);
-
-  this.id = "".concat(n++);
-};
-
-var ReactEditor = {
-  /**
-   * Find a key for a Slate node.
-   */
-  findKey: function findKey(editor, node) {
-    var key = NODE_TO_KEY.get(node);
-
-    if (!key) {
-      key = new Key();
-      NODE_TO_KEY.set(node, key);
-    }
-
-    return key;
-  },
+    return key;
+  },
 
   /**
    * Find the path of Slate node.
    */
-  findPath: function findPath(editor, node) {
+  findPath(editor, node) {
     var path = [];
     var child = node;
 
@@ -1508,21 +287,21 @@ var ReactEditor = {
   /**
    * Check if the editor is focused.
    */
-  isFocused: function isFocused(editor) {
+  isFocused(editor) {
     return !!IS_FOCUSED.get(editor);
   },
 
   /**
    * Check if the editor is in read-only mode.
    */
-  isReadOnly: function isReadOnly(editor) {
+  isReadOnly(editor) {
     return !!IS_READ_ONLY.get(editor);
   },
 
   /**
    * Blur the editor.
    */
-  blur: function blur(editor) {
+  blur(editor) {
     var el = ReactEditor.toDOMNode(editor, editor);
     IS_FOCUSED.set(editor, false);
 
@@ -1534,7 +313,7 @@ var ReactEditor = {
   /**
    * Focus the editor.
    */
-  focus: function focus(editor) {
+  focus(editor) {
     var el = ReactEditor.toDOMNode(editor, editor);
     IS_FOCUSED.set(editor, true);
 
@@ -1548,8 +327,10 @@ var ReactEditor = {
   /**
    * Deselect the editor.
    */
-  deselect: function deselect(editor) {
-    var selection = editor.selection;
+  deselect(editor) {
+    var {
+      selection
+    } = editor;
     var domSelection = window.getSelection();
 
     if (domSelection && domSelection.rangeCount > 0) {
@@ -1557,42 +338,57 @@ var ReactEditor = {
     }
 
     if (selection) {
-      Editor.deselect(editor);
+      Transforms.deselect(editor);
     }
   },
 
   /**
    * Check if a DOM node is within the editor.
    */
-  hasDOMNode: function hasDOMNode(editor, target) {
+  hasDOMNode(editor, target) {
     var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-    var _options$editable = options.editable,
-        editable = _options$editable === void 0 ? false : _options$editable;
-    var el = ReactEditor.toDOMNode(editor, editor);
-    var element; // COMPAT: In Firefox, reading `target.nodeType` will throw an error if
+    var {
+      editable = false
+    } = options;
+    var editorEl = ReactEditor.toDOMNode(editor, editor);
+    var targetEl; // COMPAT: In Firefox, reading `target.nodeType` will throw an error if
     // target is originating from an internal "restricted" element (e.g. a
     // stepper arrow on a number input). (2018/05/04)
     // https://github.com/ianstormtaylor/slate/issues/1819
 
     try {
-      element = isDOMElement(target) ? target : target.parentElement;
+      targetEl = isDOMElement(target) ? target : target.parentElement;
     } catch (err) {
       if (!err.message.includes('Permission denied to access property "nodeType"')) {
         throw err;
       }
     }
 
-    if (!element) {
+    if (!targetEl) {
       return false;
     }
 
-    return element.closest("[data-slate-editor]") === el && (!editable || el.isContentEditable);
+    return targetEl.closest("[data-slate-editor]") === editorEl && (!editable || targetEl.isContentEditable || !!targetEl.getAttribute('data-slate-zero-width'));
+  },
+
+  /**
+   * Insert data from a `DataTransfer` into the editor.
+   */
+  insertData(editor, data) {
+    editor.insertData(data);
+  },
+
+  /**
+   * Sets data from the currently selected fragment on a `DataTransfer`.
+   */
+  setFragmentData(editor, data) {
+    editor.setFragmentData(data);
   },
 
   /**
    * Find the native DOM element from a Slate node.
    */
-  toDOMNode: function toDOMNode(editor, node) {
+  toDOMNode(editor, node) {
     var domNode = Editor.isEditor(node) ? EDITOR_TO_ELEMENT.get(editor) : KEY_TO_ELEMENT.get(ReactEditor.findKey(editor, node));
 
     if (!domNode) {
@@ -1605,16 +401,13 @@ var ReactEditor = {
   /**
    * Find a native DOM selection point from a Slate point.
    */
-  toDOMPoint: function toDOMPoint(editor, point) {
-    var _Editor$node = Editor.node(editor, point.path),
-        _Editor$node2 = slicedToArray(_Editor$node, 1),
-        node = _Editor$node2[0];
-
+  toDOMPoint(editor, point) {
+    var [node] = Editor.node(editor, point.path);
     var el = ReactEditor.toDOMNode(editor, node);
     var domPoint; // If we're inside a void node, force the offset to 0, otherwise the zero
     // width spacing character will result in an incorrect offset of 1
 
-    if (Editor["void"](editor, {
+    if (Editor.void(editor, {
       at: point
     })) {
       point = {
@@ -1630,15 +423,16 @@ var ReactEditor = {
     var texts = Array.from(el.querySelectorAll(selector));
     var start = 0;
 
-    for (var _i = 0, _texts = texts; _i < _texts.length; _i++) {
-      var text = _texts[_i];
+    for (var text of texts) {
       var domNode = text.childNodes[0];
 
       if (domNode == null || domNode.textContent == null) {
         continue;
       }
 
-      var length = domNode.textContent.length;
+      var {
+        length
+      } = domNode.textContent;
       var attr = text.getAttribute('data-slate-length');
       var trueLength = attr == null ? length : parseInt(attr, 10);
       var end = start + trueLength;
@@ -1662,23 +456,33 @@ var ReactEditor = {
   /**
    * Find a native DOM range from a Slate `range`.
    */
-  toDOMRange: function toDOMRange(editor, range) {
-    var anchor = range.anchor,
-        focus = range.focus;
+  toDOMRange(editor, range) {
+    var {
+      anchor,
+      focus
+    } = range;
+    var isBackward = Range.isBackward(range);
     var domAnchor = ReactEditor.toDOMPoint(editor, anchor);
     var domFocus = Range.isCollapsed(range) ? domAnchor : ReactEditor.toDOMPoint(editor, focus);
     var domRange = window.document.createRange();
-    var start = Range.isBackward(range) ? domFocus : domAnchor;
-    var end = Range.isBackward(range) ? domAnchor : domFocus;
-    domRange.setStart(start[0], start[1]);
-    domRange.setEnd(end[0], end[1]);
+    var [startNode, startOffset] = isBackward ? domFocus : domAnchor;
+    var [endNode, endOffset] = isBackward ? domAnchor : domFocus; // A slate Point at zero-width Leaf always has an offset of 0 but a native DOM selection at
+    // zero-width node has an offset of 1 so we have to check if we are in a zero-width node and
+    // adjust the offset accordingly.
+
+    var startEl = isDOMElement(startNode) ? startNode : startNode.parentElement;
+    var isStartAtZeroWidth = !!startEl.getAttribute('data-slate-zero-width');
+    var endEl = isDOMElement(endNode) ? endNode : endNode.parentElement;
+    var isEndAtZeroWidth = !!endEl.getAttribute('data-slate-zero-width');
+    domRange.setStart(startNode, isStartAtZeroWidth ? 1 : startOffset);
+    domRange.setEnd(endNode, isEndAtZeroWidth ? 1 : endOffset);
     return domRange;
   },
 
   /**
    * Find a Slate node from a native DOM `element`.
    */
-  toSlateNode: function toSlateNode(editor, domNode) {
+  toSlateNode(editor, domNode) {
     var domEl = isDOMElement(domNode) ? domNode : domNode.parentElement;
 
     if (domEl && !domEl.hasAttribute('data-slate-node')) {
@@ -1697,15 +501,16 @@ var ReactEditor = {
   /**
    * Get the target range from a DOM `event`.
    */
-  findEventRange: function findEventRange(editor, event) {
+  findEventRange(editor, event) {
     if ('nativeEvent' in event) {
       event = event.nativeEvent;
     }
 
-    var _event = event,
-        x = _event.clientX,
-        y = _event.clientY,
-        target = _event.target;
+    var {
+      clientX: x,
+      clientY: y,
+      target
+    } = event;
 
     if (x == null || y == null) {
       throw new Error("Cannot resolve a Slate range from a DOM event: ".concat(event));
@@ -1733,8 +538,9 @@ var ReactEditor = {
 
 
     var domRange;
-    var _window = window,
-        document = _window.document; // COMPAT: In Firefox, `caretRangeFromPoint` doesn't exist. (2016/07/25)
+    var {
+      document
+    } = window; // COMPAT: In Firefox, `caretRangeFromPoint` doesn't exist. (2016/07/25)
 
     if (document.caretRangeFromPoint) {
       domRange = document.caretRangeFromPoint(x, y);
@@ -1760,12 +566,8 @@ var ReactEditor = {
   /**
    * Find a Slate point from a DOM selection's `domNode` and `domOffset`.
    */
-  toSlatePoint: function toSlatePoint(editor, domPoint) {
-    var _normalizeDOMPoint = normalizeDOMPoint(domPoint),
-        _normalizeDOMPoint2 = slicedToArray(_normalizeDOMPoint, 2),
-        nearestNode = _normalizeDOMPoint2[0],
-        nearestOffset = _normalizeDOMPoint2[1];
-
+  toSlatePoint(editor, domPoint) {
+    var [nearestNode, nearestOffset] = normalizeDOMPoint(domPoint);
     var parentNode = nearestNode.parentNode;
     var textNode = null;
     var offset = 0;
@@ -1782,8 +584,8 @@ var ReactEditor = {
         range.setStart(textNode, 0);
         range.setEnd(nearestNode, nearestOffset);
         var contents = range.cloneContents();
-        var removals = [].concat(toConsumableArray(contents.querySelectorAll('[data-slate-zero-width]')), toConsumableArray(contents.querySelectorAll('[contenteditable=false]')));
-        removals.forEach(function (el) {
+        var removals = [...contents.querySelectorAll('[data-slate-zero-width]'), ...contents.querySelectorAll('[contenteditable=false]')];
+        removals.forEach(el => {
           el.parentNode.removeChild(el);
         }); // COMPAT: Edge has a bug where Range.prototype.toString() will
         // convert \n into \r\n. The bug causes a loop when slate-react
@@ -1822,15 +624,15 @@ var ReactEditor = {
     var slateNode = ReactEditor.toSlateNode(editor, textNode);
     var path = ReactEditor.findPath(editor, slateNode);
     return {
-      path: path,
-      offset: offset
+      path,
+      offset
     };
   },
 
   /**
    * Find a Slate range from a DOM range or selection.
    */
-  toSlateRange: function toSlateRange(editor, domRange) {
+  toSlateRange(editor, domRange) {
     var el = domRange instanceof Selection ? domRange.anchorNode : domRange.startContainer;
     var anchorNode;
     var anchorOffset;
@@ -1861,10 +663,11 @@ var ReactEditor = {
     var anchor = ReactEditor.toSlatePoint(editor, [anchorNode, anchorOffset]);
     var focus = isCollapsed ? anchor : ReactEditor.toSlatePoint(editor, [focusNode, focusOffset]);
     return {
-      anchor: anchor,
-      focus: focus
+      anchor,
+      focus
     };
   }
+
 };
 
 /**
@@ -1876,58 +679,127 @@ var FocusedContext = createContext(false);
  * Get the current `focused` state of the editor.
  */
 
-var useFocused = function useFocused() {
+var useFocused = () => {
   return useContext(FocusedContext);
 };
 
+/**
+ * A React context for sharing the editor object.
+ */
+
+var EditorContext = createContext(null);
+/**
+ * Get the current editor object from the React context.
+ */
+
+var useEditor = () => {
+  var editor = useContext(EditorContext);
+
+  if (!editor) {
+    throw new Error("The `useEditor` hook must be used inside the <Slate> component's context.");
+  }
+
+  return editor;
+};
+
+/**
+ * A React context for sharing the editor object, in a way that re-renders the
+ * context whenever changes occur.
+ */
+
+var SlateContext = createContext(null);
+/**
+ * Get the current editor object from the React context.
+ */
+
+var useSlate = () => {
+  var context = useContext(SlateContext);
+
+  if (!context) {
+    throw new Error("The `useSlate` hook must be used inside the <SlateProvider> component's context.");
+  }
+
+  var [editor] = context;
+  return editor;
+};
+
 /**
  * A wrapper around the provider to handle `onChange` events, because the editor
  * is a mutable singleton so it won't ever register as "changed" otherwise.
- */
-const Slate = (props) => {
-    const { editor, children, onChange, value, ...rest } = props;
-    const [key, setKey] = useState(0);
-    const context = useMemo(() => {
-        editor.children = value;
-        Object.assign(editor, rest);
-        return [editor];
-    }, [key, value, ...Object.values(rest)]);
-    const onContextChange = useCallback(() => {
-        onChange(editor.children);
-        setKey(key + 1);
-    }, [key, onChange]);
-    EDITOR_TO_ON_CHANGE.set(editor, onContextChange);
-    return (React.createElement(SlateContext.Provider, { value: context },
-        React.createElement(EditorContext.Provider, { value: editor },
-            React.createElement(FocusedContext.Provider, { value: ReactEditor.isFocused(editor) }, children))));
+ */
+
+var Slate = props => {
+  var {
+    editor,
+    children,
+    onChange,
+    value
+  } = props,
+      rest = _objectWithoutProperties(props, ["editor", "children", "onChange", "value"]);
+
+  var [key, setKey] = useState(0);
+  var context = useMemo(() => {
+    editor.children = value;
+    Object.assign(editor, rest);
+    return [editor];
+  }, [key, value, ...Object.values(rest)]);
+  var onContextChange = useCallback(() => {
+    onChange(editor.children);
+    setKey(key + 1);
+  }, [key, onChange]);
+  EDITOR_TO_ON_CHANGE.set(editor, onContextChange);
+  useEffect(() => {
+    return () => {
+      EDITOR_TO_ON_CHANGE.set(editor, () => {});
+    };
+  }, []);
+  return React.createElement(SlateContext.Provider, {
+    value: context
+  }, React.createElement(EditorContext.Provider, {
+    value: editor
+  }, React.createElement(FocusedContext.Provider, {
+    value: ReactEditor.isFocused(editor)
+  }, children)));
 };
 
-var ReactCommand = {
-  /**
-   * Check if a value is a `ReactCommand` object.
-   */
-  isReactCommand: function isReactCommand(value) {
-    if (Command.isCommand(value)) {
-      switch (value.type) {
-        case 'insert_data':
-          return value.data instanceof DataTransfer;
-      }
-    }
+/**
+ * A React context for sharing the `readOnly` state of the editor.
+ */
 
-    return false;
-  }
+var ReadOnlyContext = createContext(false);
+/**
+ * Get the current `readOnly` state of the editor.
+ */
+
+var useReadOnly = () => {
+  return useContext(ReadOnlyContext);
+};
+
+/**
+ * A React context for sharing the `selected` state of an element.
+ */
+
+var SelectedContext = createContext(false);
+/**
+ * Get the current `selected` state of an element.
+ */
+
+var useSelected = () => {
+  return useContext(SelectedContext);
 };
 
 /**
  * `withReact` adds React and DOM specific behaviors to the editor.
  */
 
-var withReact = function withReact(editor) {
-  var apply = editor.apply,
-      exec = editor.exec,
-      onChange = editor.onChange;
+var withReact = editor => {
+  var e = editor;
+  var {
+    apply,
+    onChange
+  } = e;
 
-  editor.apply = function (op) {
+  e.apply = op => {
     var matches = [];
 
     switch (op.type) {
@@ -1935,34 +807,11 @@ var withReact = function withReact(editor) {
       case 'remove_text':
       case 'set_node':
         {
-          var _iteratorNormalCompletion = true;
-          var _didIteratorError = false;
-          var _iteratorError = undefined;
-
-          try {
-            for (var _iterator = Editor.levels(editor, {
-              at: op.path
-            })[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-              var _step$value = slicedToArray(_step.value, 2),
-                  node = _step$value[0],
-                  path = _step$value[1];
-
-              var key = ReactEditor.findKey(editor, node);
-              matches.push([path, key]);
-            }
-          } catch (err) {
-            _didIteratorError = true;
-            _iteratorError = err;
-          } finally {
-            try {
-              if (!_iteratorNormalCompletion && _iterator["return"] != null) {
-                _iterator["return"]();
-              }
-            } finally {
-              if (_didIteratorError) {
-                throw _iteratorError;
-              }
-            }
+          for (var [node, path] of Editor.levels(e, {
+            at: op.path
+          })) {
+            var key = ReactEditor.findKey(e, node);
+            matches.push([path, key]);
           }
 
           break;
@@ -1973,35 +822,12 @@ var withReact = function withReact(editor) {
       case 'merge_node':
       case 'split_node':
         {
-          var _iteratorNormalCompletion2 = true;
-          var _didIteratorError2 = false;
-          var _iteratorError2 = undefined;
+          for (var [_node, _path] of Editor.levels(e, {
+            at: Path.parent(op.path)
+          })) {
+            var _key = ReactEditor.findKey(e, _node);
 
-          try {
-            for (var _iterator2 = Editor.levels(editor, {
-              at: Path.parent(op.path)
-            })[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
-              var _step2$value = slicedToArray(_step2.value, 2),
-                  _node = _step2$value[0],
-                  _path = _step2$value[1];
-
-              var _key = ReactEditor.findKey(editor, _node);
-
-              matches.push([_path, _key]);
-            }
-          } catch (err) {
-            _didIteratorError2 = true;
-            _iteratorError2 = err;
-          } finally {
-            try {
-              if (!_iteratorNormalCompletion2 && _iterator2["return"] != null) {
-                _iterator2["return"]();
-              }
-            } finally {
-              if (_didIteratorError2) {
-                throw _iteratorError2;
-              }
-            }
+            matches.push([_path, _key]);
           }
 
           break;
@@ -2010,78 +836,133 @@ var withReact = function withReact(editor) {
 
     apply(op);
 
-    for (var _i = 0, _matches = matches; _i < _matches.length; _i++) {
-      var _matches$_i = slicedToArray(_matches[_i], 2),
-          _path2 = _matches$_i[0],
-          _key2 = _matches$_i[1];
-
-      var _Editor$node = Editor.node(editor, _path2),
-          _Editor$node2 = slicedToArray(_Editor$node, 1),
-          _node2 = _Editor$node2[0];
-
+    for (var [_path2, _key2] of matches) {
+      var [_node2] = Editor.node(e, _path2);
       NODE_TO_KEY.set(_node2, _key2);
     }
   };
 
-  editor.exec = function (command) {
-    if (ReactCommand.isReactCommand(command) && command.type === 'insert_data') {
-      var data = command.data;
-      var fragment = data.getData('application/x-slate-fragment');
+  e.setFragmentData = data => {
+    var {
+      selection
+    } = e;
 
-      if (fragment) {
-        var decoded = decodeURIComponent(window.atob(fragment));
-        var parsed = JSON.parse(decoded);
-        Editor.insertFragment(editor, parsed);
-        return;
+    if (!selection) {
+      return;
+    }
+
+    var [start, end] = Range.edges(selection);
+    var startVoid = Editor.void(e, {
+      at: start.path
+    });
+    var endVoid = Editor.void(e, {
+      at: end.path
+    });
+
+    if (Range.isCollapsed(selection) && !startVoid) {
+      return;
+    } // Create a fake selection so that we can add a Base64-encoded copy of the
+    // fragment to the HTML, to decode on future pastes.
+
+
+    var domRange = ReactEditor.toDOMRange(e, selection);
+    var contents = domRange.cloneContents();
+    var attach = contents.childNodes[0]; // Make sure attach is non-empty, since empty nodes will not get copied.
+
+    contents.childNodes.forEach(node => {
+      if (node.textContent && node.textContent.trim() !== '') {
+        attach = node;
       }
+    }); // COMPAT: If the end node is a void node, we need to move the end of the
+    // range from the void node's spacer span, to the end of the void node's
+    // content, since the spacer is before void's content in the DOM.
+
+    if (endVoid) {
+      var [voidNode] = endVoid;
+      var r = domRange.cloneRange();
+      var domNode = ReactEditor.toDOMNode(e, voidNode);
+      r.setEndAfter(domNode);
+      contents = r.cloneContents();
+    } // COMPAT: If the start node is a void node, we need to attach the encoded
+    // fragment to the void node's content node instead of the spacer, because
+    // attaching it to empty `<div>/<span>` nodes will end up having it erased by
+    // most browsers. (2018/04/27)
+
+
+    if (startVoid) {
+      attach = contents.querySelector('[data-slate-spacer]');
+    } // Remove any zero-width space spans from the cloned DOM so that they don't
+    // show up elsewhere when pasted.
+
+
+    Array.from(contents.querySelectorAll('[data-slate-zero-width]')).forEach(zw => {
+      var isNewline = zw.getAttribute('data-slate-zero-width') === 'n';
+      zw.textContent = isNewline ? '\n' : '';
+    }); // Set a `data-slate-fragment` attribute on a non-empty node, so it shows up
+    // in the HTML, and can be used for intra-Slate pasting. If it's a text
+    // node, wrap it in a `<span>` so we have something to set an attribute on.
+
+    if (isDOMText(attach)) {
+      var span = document.createElement('span'); // COMPAT: In Chrome and Safari, if we don't add the `white-space` style
+      // then leading and trailing spaces will be ignored. (2017/09/21)
+
+      span.style.whiteSpace = 'pre';
+      span.appendChild(attach);
+      contents.appendChild(span);
+      attach = span;
+    }
 
-      var text = data.getData('text/plain');
+    var fragment = e.getFragment();
+    var string = JSON.stringify(fragment);
+    var encoded = window.btoa(encodeURIComponent(string));
+    attach.setAttribute('data-slate-fragment', encoded);
+    data.setData('application/x-slate-fragment', encoded); // Add the content to a <div> so that we can get its inner HTML.
+
+    var div = document.createElement('div');
+    div.appendChild(contents);
+    div.setAttribute('hidden', 'true');
+    document.body.appendChild(div);
+    data.setData('text/html', div.innerHTML);
+    data.setData('text/plain', getPlainText(div));
+    document.body.removeChild(div);
+  };
 
-      if (text) {
-        var lines = text.split('\n');
-        var split = false;
-        var _iteratorNormalCompletion3 = true;
-        var _didIteratorError3 = false;
-        var _iteratorError3 = undefined;
+  e.insertData = data => {
+    var fragment = data.getData('application/x-slate-fragment');
 
-        try {
-          for (var _iterator3 = lines[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
-            var line = _step3.value;
+    if (fragment) {
+      var decoded = decodeURIComponent(window.atob(fragment));
+      var parsed = JSON.parse(decoded);
+      Transforms.insertFragment(e, parsed);
+      return;
+    }
 
-            if (split) {
-              Editor.splitNodes(editor);
-            }
+    var text = data.getData('text/plain');
 
-            Editor.insertText(editor, line);
-            split = true;
-          }
-        } catch (err) {
-          _didIteratorError3 = true;
-          _iteratorError3 = err;
-        } finally {
-          try {
-            if (!_iteratorNormalCompletion3 && _iterator3["return"] != null) {
-              _iterator3["return"]();
-            }
-          } finally {
-            if (_didIteratorError3) {
-              throw _iteratorError3;
-            }
-          }
+    if (text) {
+      var lines = text.split(/\r\n|\r|\n/);
+      var split = false;
+
+      for (var line of lines) {
+        if (split) {
+          Transforms.splitNodes(e, {
+            always: true
+          });
         }
+
+        Transforms.insertText(e, line);
+        split = true;
       }
-    } else {
-      exec(command);
     }
   };
 
-  editor.onChange = function () {
+  e.onChange = () => {
     // COMPAT: React doesn't batch `setState` hook calls, which means that the
     // children and selection can get out of sync for one render pass. So we
     // have to use this unstable API to ensure it batches them. (2019/12/03)
     // https://github.com/facebook/react/issues/14259#issuecomment-439702367
-    ReactDOM.unstable_batchedUpdates(function () {
-      var onContextChange = EDITOR_TO_ON_CHANGE.get(editor);
+    ReactDOM.unstable_batchedUpdates(() => {
+      var onContextChange = EDITOR_TO_ON_CHANGE.get(e);
 
       if (onContextChange) {
         onContextChange();
@@ -2091,8 +972,1304 @@ var withReact = function withReact(editor) {
     });
   };
 
-  return editor;
+  return e;
+};
+
+/**
+ * Leaf content strings.
+ */
+
+var String = props => {
+  var {
+    isLast,
+    leaf,
+    parent,
+    text
+  } = props;
+  var editor = useEditor();
+  var path = ReactEditor.findPath(editor, text);
+  var parentPath = Path.parent(path); // COMPAT: Render text inside void nodes with a zero-width space.
+  // So the node can contain selection but the text is not visible.
+
+  if (editor.isVoid(parent)) {
+    return React.createElement(ZeroWidthString, {
+      length: Node$1.string(parent).length
+    });
+  } // COMPAT: If this is the last text node in an empty block, render a zero-
+  // width space that will convert into a line break when copying and pasting
+  // to support expected plain text.
+
+
+  if (leaf.text === '' && parent.children[parent.children.length - 1] === text && !editor.isInline(parent) && Editor.string(editor, parentPath) === '') {
+    return React.createElement(ZeroWidthString, {
+      isLineBreak: true
+    });
+  } // COMPAT: If the text is empty, it's because it's on the edge of an inline
+  // node, so we render a zero-width space so that the selection can be
+  // inserted next to it still.
+
+
+  if (leaf.text === '') {
+    return React.createElement(ZeroWidthString, null);
+  } // COMPAT: Browsers will collapse trailing new lines at the end of blocks,
+  // so we need to add an extra trailing new lines to prevent that.
+
+
+  if (isLast && leaf.text.slice(-1) === '\n') {
+    return React.createElement(TextString, {
+      isTrailing: true,
+      text: leaf.text
+    });
+  }
+
+  return React.createElement(TextString, {
+    text: leaf.text
+  });
+};
+/**
+ * Leaf strings with text in them.
+ */
+
+
+var TextString = props => {
+  var {
+    text,
+    isTrailing = false
+  } = props;
+  return React.createElement("span", {
+    "data-slate-string": true
+  }, text, isTrailing ? '\n' : null);
+};
+/**
+ * Leaf strings without text, render as zero-width strings.
+ */
+
+
+var ZeroWidthString = props => {
+  var {
+    length = 0,
+    isLineBreak = false
+  } = props;
+  return React.createElement("span", {
+    "data-slate-zero-width": isLineBreak ? 'n' : 'z',
+    "data-slate-length": length
+  }, '\uFEFF', isLineBreak ? React.createElement("br", null) : null);
+};
+
+/**
+ * Individual leaves in a text node with unique formatting.
+ */
+
+var Leaf = props => {
+  var {
+    leaf,
+    isLast,
+    text,
+    parent,
+    renderLeaf = props => React.createElement(DefaultLeaf, Object.assign({}, props))
+  } = props;
+  var children = React.createElement(String, {
+    isLast: isLast,
+    leaf: leaf,
+    parent: parent,
+    text: text
+  });
+
+  if (leaf[PLACEHOLDER_SYMBOL]) {
+    children = React.createElement(React.Fragment, null, React.createElement("span", {
+      contentEditable: false,
+      style: {
+        pointerEvents: 'none',
+        display: 'inline-block',
+        verticalAlign: 'text-top',
+        width: '0',
+        maxWidth: '100%',
+        whiteSpace: 'nowrap',
+        opacity: '0.333'
+      }
+    }, leaf.placeholder), children);
+  } // COMPAT: Having the `data-` attributes on these leaf elements ensures that
+  // in certain misbehaving browsers they aren't weirdly cloned/destroyed by
+  // contenteditable behaviors. (2019/05/08)
+
+
+  var attributes = {
+    'data-slate-leaf': true
+  };
+  return renderLeaf({
+    attributes,
+    children,
+    leaf,
+    text
+  });
+};
+
+var MemoizedLeaf = React.memo(Leaf, (prev, next) => {
+  return next.parent === prev.parent && next.isLast === prev.isLast && next.renderLeaf === prev.renderLeaf && next.text === prev.text && Text$1.matches(next.leaf, prev.leaf);
+});
+/**
+ * The default custom leaf renderer.
+ */
+
+var DefaultLeaf = props => {
+  var {
+    attributes,
+    children
+  } = props;
+  return React.createElement("span", Object.assign({}, attributes), children);
+};
+
+/**
+ * Prevent warning on SSR by falling back to useEffect when window is not defined
+ */
+
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+/**
+ * Text.
+ */
+
+var Text = props => {
+  var {
+    decorations,
+    isLast,
+    parent,
+    renderLeaf,
+    text
+  } = props;
+  var editor = useEditor();
+  var ref = useRef(null);
+  var leaves = Text$1.decorations(text, decorations);
+  var key = ReactEditor.findKey(editor, text);
+  var children = [];
+
+  for (var i = 0; i < leaves.length; i++) {
+    var leaf = leaves[i];
+    children.push(React.createElement(MemoizedLeaf, {
+      isLast: isLast && i === leaves.length - 1,
+      key: "".concat(key.id, "-").concat(i),
+      leaf: leaf,
+      text: text,
+      parent: parent,
+      renderLeaf: renderLeaf
+    }));
+  } // Update element-related weak maps with the DOM element ref.
+
+
+  useIsomorphicLayoutEffect(() => {
+    if (ref.current) {
+      KEY_TO_ELEMENT.set(key, ref.current);
+      NODE_TO_ELEMENT.set(text, ref.current);
+      ELEMENT_TO_NODE.set(ref.current, text);
+    } else {
+      KEY_TO_ELEMENT.delete(key);
+      NODE_TO_ELEMENT.delete(text);
+    }
+  });
+  return React.createElement("span", {
+    "data-slate-node": "text",
+    ref: ref
+  }, children);
+};
+
+var MemoizedText = React.memo(Text, (prev, next) => {
+  return next.parent === prev.parent && next.isLast === prev.isLast && next.renderLeaf === prev.renderLeaf && next.text === prev.text;
+});
+
+/**
+ * Element.
+ */
+
+var Element = props => {
+  var {
+    decorate,
+    decorations,
+    element,
+    renderElement = p => React.createElement(DefaultElement, Object.assign({}, p)),
+    renderLeaf,
+    selection
+  } = props;
+  var ref = useRef(null);
+  var editor = useEditor();
+  var readOnly = useReadOnly();
+  var isInline = editor.isInline(element);
+  var key = ReactEditor.findKey(editor, element);
+  var children = React.createElement(Children, {
+    decorate: decorate,
+    decorations: decorations,
+    node: element,
+    renderElement: renderElement,
+    renderLeaf: renderLeaf,
+    selection: selection
+  }); // Attributes that the developer must mix into the element in their
+  // custom node renderer component.
+
+  var attributes = {
+    'data-slate-node': 'element',
+    ref
+  };
+
+  if (isInline) {
+    attributes['data-slate-inline'] = true;
+  } // If it's a block node with inline children, add the proper `dir` attribute
+  // for text direction.
+
+
+  if (!isInline && Editor.hasInlines(editor, element)) {
+    var text = Node$1.string(element);
+    var dir = getDirection(text);
+
+    if (dir === 'rtl') {
+      attributes.dir = dir;
+    }
+  } // If it's a void node, wrap the children in extra void-specific elements.
+
+
+  if (Editor.isVoid(editor, element)) {
+    attributes['data-slate-void'] = true;
+
+    if (!readOnly && isInline) {
+      attributes.contentEditable = false;
+    }
+
+    var Tag = isInline ? 'span' : 'div';
+    var [[_text]] = Node$1.texts(element);
+    children = readOnly ? null : React.createElement(Tag, {
+      "data-slate-spacer": true,
+      style: {
+        height: '0',
+        color: 'transparent',
+        outline: 'none',
+        position: 'absolute'
+      }
+    }, React.createElement(MemoizedText, {
+      decorations: [],
+      isLast: false,
+      parent: element,
+      text: _text
+    }));
+    NODE_TO_INDEX.set(_text, 0);
+    NODE_TO_PARENT.set(_text, element);
+  } // Update element-related weak maps with the DOM element ref.
+
+
+  useIsomorphicLayoutEffect(() => {
+    if (ref.current) {
+      KEY_TO_ELEMENT.set(key, ref.current);
+      NODE_TO_ELEMENT.set(element, ref.current);
+      ELEMENT_TO_NODE.set(ref.current, element);
+    } else {
+      KEY_TO_ELEMENT.delete(key);
+      NODE_TO_ELEMENT.delete(element);
+    }
+  });
+  return React.createElement(SelectedContext.Provider, {
+    value: !!selection
+  }, renderElement({
+    attributes,
+    children,
+    element
+  }));
+};
+
+var MemoizedElement = React.memo(Element, (prev, next) => {
+  return prev.decorate === next.decorate && prev.element === next.element && prev.renderElement === next.renderElement && prev.renderLeaf === next.renderLeaf && isRangeListEqual(prev.decorations, next.decorations) && (prev.selection === next.selection || !!prev.selection && !!next.selection && Range.equals(prev.selection, next.selection));
+});
+/**
+ * The default element renderer.
+ */
+
+var DefaultElement = props => {
+  var {
+    attributes,
+    children,
+    element
+  } = props;
+  var editor = useEditor();
+  var Tag = editor.isInline(element) ? 'span' : 'div';
+  return React.createElement(Tag, Object.assign({}, attributes, {
+    style: {
+      position: 'relative'
+    }
+  }), children);
+};
+/**
+ * Check if a list of ranges is equal to another.
+ *
+ * PERF: this requires the two lists to also have the ranges inside them in the
+ * same order, but this is an okay constraint for us since decorations are
+ * kept in order, and the odd case where they aren't is okay to re-render for.
+ */
+
+var isRangeListEqual = (list, another) => {
+  if (list.length !== another.length) {
+    return false;
+  }
+
+  for (var i = 0; i < list.length; i++) {
+    var range = list[i];
+    var other = another[i];
+
+    if (!Range.equals(range, other)) {
+      return false;
+    }
+  }
+
+  return true;
+};
+
+/**
+ * Children.
+ */
+
+var Children = props => {
+  var {
+    decorate,
+    decorations,
+    node,
+    renderElement,
+    renderLeaf,
+    selection
+  } = props;
+  var editor = useEditor();
+  var path = ReactEditor.findPath(editor, node);
+  var children = [];
+  var isLeafBlock = Element$1.isElement(node) && !editor.isInline(node) && Editor.hasInlines(editor, node);
+
+  for (var i = 0; i < node.children.length; i++) {
+    var p = path.concat(i);
+    var n = node.children[i];
+    var key = ReactEditor.findKey(editor, n);
+    var range = Editor.range(editor, p);
+    var sel = selection && Range.intersection(range, selection);
+    var ds = decorate([n, p]);
+
+    for (var dec of decorations) {
+      var d = Range.intersection(dec, range);
+
+      if (d) {
+        ds.push(d);
+      }
+    }
+
+    if (Element$1.isElement(n)) {
+      children.push(React.createElement(MemoizedElement, {
+        decorate: decorate,
+        decorations: ds,
+        element: n,
+        key: key.id,
+        renderElement: renderElement,
+        renderLeaf: renderLeaf,
+        selection: sel
+      }));
+    } else {
+      children.push(React.createElement(MemoizedText, {
+        decorations: ds,
+        key: key.id,
+        isLast: isLeafBlock && i === node.children.length - 1,
+        parent: node,
+        renderLeaf: renderLeaf,
+        text: n
+      }));
+    }
+
+    NODE_TO_INDEX.set(n, i);
+    NODE_TO_PARENT.set(n, node);
+  }
+
+  return React.createElement(React.Fragment, null, children);
+};
+
+var IS_IOS = typeof navigator !== 'undefined' && typeof window !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+var IS_APPLE = typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.userAgent);
+var IS_FIREFOX = typeof navigator !== 'undefined' && /^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);
+var IS_SAFARI = typeof navigator !== 'undefined' && /Version\/[\d\.]+.*Safari/.test(navigator.userAgent); // "modern" Edge was released at 79.x
+
+var IS_EDGE_LEGACY = typeof navigator !== 'undefined' && /Edge?\/(?:[0-6][0-9]|[0-7][0-8])/i.test(navigator.userAgent);
+
+/**
+ * Hotkey mappings for each platform.
+ */
+
+var HOTKEYS = {
+  bold: 'mod+b',
+  compose: ['down', 'left', 'right', 'up', 'backspace', 'enter'],
+  moveBackward: 'left',
+  moveForward: 'right',
+  moveWordBackward: 'ctrl+left',
+  moveWordForward: 'ctrl+right',
+  deleteBackward: 'shift?+backspace',
+  deleteForward: 'shift?+delete',
+  extendBackward: 'shift+left',
+  extendForward: 'shift+right',
+  italic: 'mod+i',
+  splitBlock: 'shift?+enter',
+  undo: 'mod+z'
+};
+var APPLE_HOTKEYS = {
+  moveLineBackward: 'opt+up',
+  moveLineForward: 'opt+down',
+  moveWordBackward: 'opt+left',
+  moveWordForward: 'opt+right',
+  deleteBackward: ['ctrl+backspace', 'ctrl+h'],
+  deleteForward: ['ctrl+delete', 'ctrl+d'],
+  deleteLineBackward: 'cmd+shift?+backspace',
+  deleteLineForward: ['cmd+shift?+delete', 'ctrl+k'],
+  deleteWordBackward: 'opt+shift?+backspace',
+  deleteWordForward: 'opt+shift?+delete',
+  extendLineBackward: 'opt+shift+up',
+  extendLineForward: 'opt+shift+down',
+  redo: 'cmd+shift+z',
+  transposeCharacter: 'ctrl+t'
+};
+var WINDOWS_HOTKEYS = {
+  deleteWordBackward: 'ctrl+shift?+backspace',
+  deleteWordForward: 'ctrl+shift?+delete',
+  redo: ['ctrl+y', 'ctrl+shift+z']
+};
+/**
+ * Create a platform-aware hotkey checker.
+ */
+
+var create = key => {
+  var generic = HOTKEYS[key];
+  var apple = APPLE_HOTKEYS[key];
+  var windows = WINDOWS_HOTKEYS[key];
+  var isGeneric = generic && isKeyHotkey(generic);
+  var isApple = apple && isKeyHotkey(apple);
+  var isWindows = windows && isKeyHotkey(windows);
+  return event => {
+    if (isGeneric && isGeneric(event)) return true;
+    if (IS_APPLE && isApple && isApple(event)) return true;
+    if (!IS_APPLE && isWindows && isWindows(event)) return true;
+    return false;
+  };
+};
+/**
+ * Hotkeys.
+ */
+
+
+var Hotkeys = {
+  isBold: create('bold'),
+  isCompose: create('compose'),
+  isMoveBackward: create('moveBackward'),
+  isMoveForward: create('moveForward'),
+  isDeleteBackward: create('deleteBackward'),
+  isDeleteForward: create('deleteForward'),
+  isDeleteLineBackward: create('deleteLineBackward'),
+  isDeleteLineForward: create('deleteLineForward'),
+  isDeleteWordBackward: create('deleteWordBackward'),
+  isDeleteWordForward: create('deleteWordForward'),
+  isExtendBackward: create('extendBackward'),
+  isExtendForward: create('extendForward'),
+  isExtendLineBackward: create('extendLineBackward'),
+  isExtendLineForward: create('extendLineForward'),
+  isItalic: create('italic'),
+  isMoveLineBackward: create('moveLineBackward'),
+  isMoveLineForward: create('moveLineForward'),
+  isMoveWordBackward: create('moveWordBackward'),
+  isMoveWordForward: create('moveWordForward'),
+  isRedo: create('redo'),
+  isSplitBlock: create('splitBlock'),
+  isTransposeCharacter: create('transposeCharacter'),
+  isUndo: create('undo')
+};
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var HAS_BEFORE_INPUT_SUPPORT = !(IS_FIREFOX || IS_EDGE_LEGACY);
+/**
+ * Editable.
+ */
+
+var Editable = props => {
+  var {
+    autoFocus,
+    decorate = defaultDecorate,
+    onDOMBeforeInput: propsOnDOMBeforeInput,
+    placeholder,
+    readOnly = false,
+    renderElement,
+    renderLeaf,
+    style = {},
+    as: Component = 'div'
+  } = props,
+      attributes = _objectWithoutProperties(props, ["autoFocus", "decorate", "onDOMBeforeInput", "placeholder", "readOnly", "renderElement", "renderLeaf", "style", "as"]);
+
+  var editor = useSlate();
+  var ref = useRef(null); // Update internal state on each render.
+
+  IS_READ_ONLY.set(editor, readOnly); // Keep track of some state for the event handler logic.
+
+  var state = useMemo(() => ({
+    isComposing: false,
+    isUpdatingSelection: false,
+    latestElement: null
+  }), []); // Update element-related weak maps with the DOM element ref.
+
+  useIsomorphicLayoutEffect(() => {
+    if (ref.current) {
+      EDITOR_TO_ELEMENT.set(editor, ref.current);
+      NODE_TO_ELEMENT.set(editor, ref.current);
+      ELEMENT_TO_NODE.set(ref.current, editor);
+    } else {
+      NODE_TO_ELEMENT.delete(editor);
+    }
+  }); // Whenever the editor updates, make sure the DOM selection state is in sync.
+
+  useIsomorphicLayoutEffect(() => {
+    var {
+      selection
+    } = editor;
+    var domSelection = window.getSelection();
+
+    if (state.isComposing || !domSelection || !ReactEditor.isFocused(editor)) {
+      return;
+    }
+
+    var hasDomSelection = domSelection.type !== 'None'; // If the DOM selection is properly unset, we're done.
+
+    if (!selection && !hasDomSelection) {
+      return;
+    } // If the DOM selection is already correct, we're done.
+
+
+    if (hasDomSelection && selection && Range.equals(ReactEditor.toSlateRange(editor, domSelection), selection)) {
+      return;
+    } // Otherwise the DOM selection is out of sync, so update it.
+
+
+    var el = ReactEditor.toDOMNode(editor, editor);
+    state.isUpdatingSelection = true;
+    domSelection.removeAllRanges();
+    var newDomRange = selection && ReactEditor.toDOMRange(editor, selection);
+
+    if (newDomRange) {
+      domSelection.addRange(newDomRange);
+      var leafEl = newDomRange.startContainer.parentElement;
+      scrollIntoView(leafEl, {
+        scrollMode: 'if-needed'
+      });
+    }
+
+    setTimeout(() => {
+      // COMPAT: In Firefox, it's not enough to create a range, you also need
+      // to focus the contenteditable element too. (2016/11/16)
+      if (newDomRange && IS_FIREFOX) {
+        el.focus();
+      }
+
+      state.isUpdatingSelection = false;
+    });
+  }); // The autoFocus TextareaHTMLAttribute doesn't do anything on a div, so it
+  // needs to be manually focused.
+
+  useEffect(() => {
+    if (ref.current && autoFocus) {
+      ref.current.focus();
+    }
+  }, [autoFocus]); // Listen on the native `beforeinput` event to get real "Level 2" events. This
+  // is required because React's `beforeinput` is fake and never really attaches
+  // to the real event sadly. (2019/11/01)
+  // https://github.com/facebook/react/issues/11211
+
+  var onDOMBeforeInput = useCallback(event => {
+    if (!readOnly && hasEditableTarget(editor, event.target) && !isDOMEventHandled(event, propsOnDOMBeforeInput)) {
+      var {
+        selection
+      } = editor;
+      var {
+        inputType: type
+      } = event;
+      var data = event.dataTransfer || event.data || undefined; // These two types occur while a user is composing text and can't be
+      // cancelled. Let them through and wait for the composition to end.
+
+      if (type === 'insertCompositionText' || type === 'deleteCompositionText') {
+        return;
+      }
+
+      event.preventDefault(); // COMPAT: For the deleting forward/backward input types we don't want
+      // to change the selection because it is the range that will be deleted,
+      // and those commands determine that for themselves.
+
+      if (!type.startsWith('delete') || type.startsWith('deleteBy')) {
+        var [targetRange] = event.getTargetRanges();
+
+        if (targetRange) {
+          var range = ReactEditor.toSlateRange(editor, targetRange);
+
+          if (!selection || !Range.equals(selection, range)) {
+            Transforms.select(editor, range);
+          }
+        }
+      } // COMPAT: If the selection is expanded, even if the command seems like
+      // a delete forward/backward command it should delete the selection.
+
+
+      if (selection && Range.isExpanded(selection) && type.startsWith('delete')) {
+        Editor.deleteFragment(editor);
+        return;
+      }
+
+      switch (type) {
+        case 'deleteByComposition':
+        case 'deleteByCut':
+        case 'deleteByDrag':
+          {
+            Editor.deleteFragment(editor);
+            break;
+          }
+
+        case 'deleteContent':
+        case 'deleteContentForward':
+          {
+            Editor.deleteForward(editor);
+            break;
+          }
+
+        case 'deleteContentBackward':
+          {
+            Editor.deleteBackward(editor);
+            break;
+          }
+
+        case 'deleteEntireSoftLine':
+          {
+            Editor.deleteBackward(editor, {
+              unit: 'line'
+            });
+            Editor.deleteForward(editor, {
+              unit: 'line'
+            });
+            break;
+          }
+
+        case 'deleteHardLineBackward':
+          {
+            Editor.deleteBackward(editor, {
+              unit: 'block'
+            });
+            break;
+          }
+
+        case 'deleteSoftLineBackward':
+          {
+            Editor.deleteBackward(editor, {
+              unit: 'line'
+            });
+            break;
+          }
+
+        case 'deleteHardLineForward':
+          {
+            Editor.deleteForward(editor, {
+              unit: 'block'
+            });
+            break;
+          }
+
+        case 'deleteSoftLineForward':
+          {
+            Editor.deleteForward(editor, {
+              unit: 'line'
+            });
+            break;
+          }
+
+        case 'deleteWordBackward':
+          {
+            Editor.deleteBackward(editor, {
+              unit: 'word'
+            });
+            break;
+          }
+
+        case 'deleteWordForward':
+          {
+            Editor.deleteForward(editor, {
+              unit: 'word'
+            });
+            break;
+          }
+
+        case 'insertLineBreak':
+        case 'insertParagraph':
+          {
+            Editor.insertBreak(editor);
+            break;
+          }
+
+        case 'insertFromComposition':
+        case 'insertFromDrop':
+        case 'insertFromPaste':
+        case 'insertFromYank':
+        case 'insertReplacementText':
+        case 'insertText':
+          {
+            if (data instanceof DataTransfer) {
+              ReactEditor.insertData(editor, data);
+            } else if (typeof data === 'string') {
+              Editor.insertText(editor, data);
+            }
+
+            break;
+          }
+      }
+    }
+  }, [readOnly]); // Attach a native DOM event handler for `beforeinput` events, because React's
+  // built-in `onBeforeInput` is actually a leaky polyfill that doesn't expose
+  // real `beforeinput` events sadly... (2019/11/04)
+  // https://github.com/facebook/react/issues/11211
+
+  useIsomorphicLayoutEffect(() => {
+    if (ref.current) {
+      // @ts-ignore The `beforeinput` event isn't recognized.
+      ref.current.addEventListener('beforeinput', onDOMBeforeInput);
+    }
+
+    return () => {
+      if (ref.current) {
+        // @ts-ignore The `beforeinput` event isn't recognized.
+        ref.current.removeEventListener('beforeinput', onDOMBeforeInput);
+      }
+    };
+  }, [onDOMBeforeInput]); // Listen on the native `selectionchange` event to be able to update any time
+  // the selection changes. This is required because React's `onSelect` is leaky
+  // and non-standard so it doesn't fire until after a selection has been
+  // released. This causes issues in situations where another change happens
+  // while a selection is being dragged.
+
+  var onDOMSelectionChange = useCallback(throttle(() => {
+    if (!readOnly && !state.isComposing && !state.isUpdatingSelection) {
+      var {
+        activeElement
+      } = window.document;
+      var el = ReactEditor.toDOMNode(editor, editor);
+      var domSelection = window.getSelection();
+
+      if (activeElement === el) {
+        state.latestElement = activeElement;
+        IS_FOCUSED.set(editor, true);
+      } else {
+        IS_FOCUSED.delete(editor);
+      }
+
+      if (domSelection && hasEditableTarget(editor, domSelection.anchorNode) && hasEditableTarget(editor, domSelection.focusNode)) {
+        var range = ReactEditor.toSlateRange(editor, domSelection);
+        Transforms.select(editor, range);
+      } else {
+        Transforms.deselect(editor);
+      }
+    }
+  }, 100), [readOnly]); // Attach a native DOM event handler for `selectionchange`, because React's
+  // built-in `onSelect` handler doesn't fire for all selection changes. It's a
+  // leaky polyfill that only fires on keypresses or clicks. Instead, we want to
+  // fire for any change to the selection inside the editor. (2019/11/04)
+  // https://github.com/facebook/react/issues/5785
+
+  useIsomorphicLayoutEffect(() => {
+    window.document.addEventListener('selectionchange', onDOMSelectionChange);
+    return () => {
+      window.document.removeEventListener('selectionchange', onDOMSelectionChange);
+    };
+  }, [onDOMSelectionChange]);
+  var decorations = decorate([editor, []]);
+
+  if (placeholder && editor.children.length === 1 && Array.from(Node$1.texts(editor)).length === 1 && Node$1.string(editor) === '') {
+    var start = Editor.start(editor, []);
+    decorations.push({
+      [PLACEHOLDER_SYMBOL]: true,
+      placeholder,
+      anchor: start,
+      focus: start
+    });
+  }
+
+  return React.createElement(ReadOnlyContext.Provider, {
+    value: readOnly
+  }, React.createElement(Component // COMPAT: The Grammarly Chrome extension works by changing the DOM
+  // out from under `contenteditable` elements, which leads to weird
+  // behaviors so we have to disable it like editor. (2017/04/24)
+  , Object.assign({
+    "data-gramm": false,
+    role: readOnly ? undefined : 'textbox'
+  }, attributes, {
+    // COMPAT: Certain browsers don't support the `beforeinput` event, so we'd
+    // have to use hacks to make these replacement-based features work.
+    spellCheck: !HAS_BEFORE_INPUT_SUPPORT ? undefined : attributes.spellCheck,
+    autoCorrect: !HAS_BEFORE_INPUT_SUPPORT ? undefined : attributes.autoCorrect,
+    autoCapitalize: !HAS_BEFORE_INPUT_SUPPORT ? undefined : attributes.autoCapitalize,
+    "data-slate-editor": true,
+    "data-slate-node": "value",
+    contentEditable: readOnly ? undefined : true,
+    suppressContentEditableWarning: true,
+    ref: ref,
+    style: _objectSpread({
+      // Prevent the default outline styles.
+      outline: 'none',
+      // Preserve adjacent whitespace and new lines.
+      whiteSpace: 'pre-wrap',
+      // Allow words to break if they are too long.
+      wordWrap: 'break-word'
+    }, style),
+    onBeforeInput: useCallback(event => {
+      // COMPAT: Certain browsers don't support the `beforeinput` event, so we
+      // fall back to React's leaky polyfill instead just for it. It
+      // only works for the `insertText` input type.
+      if (!HAS_BEFORE_INPUT_SUPPORT && !readOnly && !isEventHandled(event, attributes.onBeforeInput) && hasEditableTarget(editor, event.target)) {
+        event.preventDefault();
+        var text = event.data;
+        Editor.insertText(editor, text);
+      }
+    }, [readOnly]),
+    onBlur: useCallback(event => {
+      if (readOnly || state.isUpdatingSelection || !hasEditableTarget(editor, event.target) || isEventHandled(event, attributes.onBlur)) {
+        return;
+      } // COMPAT: If the current `activeElement` is still the previous
+      // one, this is due to the window being blurred when the tab
+      // itself becomes unfocused, so we want to abort early to allow to
+      // editor to stay focused when the tab becomes focused again.
+
+
+      if (state.latestElement === window.document.activeElement) {
+        return;
+      }
+
+      var {
+        relatedTarget
+      } = event;
+      var el = ReactEditor.toDOMNode(editor, editor); // COMPAT: The event should be ignored if the focus is returning
+      // to the editor from an embedded editable element (eg. an <input>
+      // element inside a void node).
+
+      if (relatedTarget === el) {
+        return;
+      } // COMPAT: The event should be ignored if the focus is moving from
+      // the editor to inside a void node's spacer element.
+
+
+      if (isDOMElement(relatedTarget) && relatedTarget.hasAttribute('data-slate-spacer')) {
+        return;
+      } // COMPAT: The event should be ignored if the focus is moving to a
+      // non- editable section of an element that isn't a void node (eg.
+      // a list item of the check list example).
+
+
+      if (relatedTarget != null && isDOMNode(relatedTarget) && ReactEditor.hasDOMNode(editor, relatedTarget)) {
+        var node = ReactEditor.toSlateNode(editor, relatedTarget);
+
+        if (Element$1.isElement(node) && !editor.isVoid(node)) {
+          return;
+        }
+      }
+
+      IS_FOCUSED.delete(editor);
+    }, [readOnly, attributes.onBlur]),
+    onClick: useCallback(event => {
+      if (!readOnly && hasTarget(editor, event.target) && !isEventHandled(event, attributes.onClick) && isDOMNode(event.target)) {
+        var node = ReactEditor.toSlateNode(editor, event.target);
+        var path = ReactEditor.findPath(editor, node);
+
+        var _start = Editor.start(editor, path);
+
+        if (Editor.void(editor, {
+          at: _start
+        })) {
+          var range = Editor.range(editor, _start);
+          Transforms.select(editor, range);
+        }
+      }
+    }, [readOnly, attributes.onClick]),
+    onCompositionEnd: useCallback(event => {
+      if (hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onCompositionEnd)) {
+        state.isComposing = false; // COMPAT: In Chrome, `beforeinput` events for compositions
+        // aren't correct and never fire the "insertFromComposition"
+        // type that we need. So instead, insert whenever a composition
+        // ends since it will already have been committed to the DOM.
+
+        if (!IS_SAFARI && !IS_FIREFOX && event.data) {
+          Editor.insertText(editor, event.data);
+        }
+      }
+    }, [attributes.onCompositionEnd]),
+    onCompositionStart: useCallback(event => {
+      if (hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onCompositionStart)) {
+        state.isComposing = true;
+      }
+    }, [attributes.onCompositionStart]),
+    onCopy: useCallback(event => {
+      if (hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onCopy)) {
+        event.preventDefault();
+        ReactEditor.setFragmentData(editor, event.clipboardData);
+      }
+    }, [attributes.onCopy]),
+    onCut: useCallback(event => {
+      if (!readOnly && hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onCut)) {
+        event.preventDefault();
+        ReactEditor.setFragmentData(editor, event.clipboardData);
+        var {
+          selection
+        } = editor;
+
+        if (selection && Range.isExpanded(selection)) {
+          Editor.deleteFragment(editor);
+        }
+      }
+    }, [readOnly, attributes.onCut]),
+    onDragOver: useCallback(event => {
+      if (hasTarget(editor, event.target) && !isEventHandled(event, attributes.onDragOver)) {
+        // Only when the target is void, call `preventDefault` to signal
+        // that drops are allowed. Editable content is droppable by
+        // default, and calling `preventDefault` hides the cursor.
+        var node = ReactEditor.toSlateNode(editor, event.target);
+
+        if (Editor.isVoid(editor, node)) {
+          event.preventDefault();
+        }
+      }
+    }, [attributes.onDragOver]),
+    onDragStart: useCallback(event => {
+      if (hasTarget(editor, event.target) && !isEventHandled(event, attributes.onDragStart)) {
+        var node = ReactEditor.toSlateNode(editor, event.target);
+        var path = ReactEditor.findPath(editor, node);
+        var voidMatch = Editor.void(editor, {
+          at: path
+        }); // If starting a drag on a void node, make sure it is selected
+        // so that it shows up in the selection's fragment.
+
+        if (voidMatch) {
+          var range = Editor.range(editor, path);
+          Transforms.select(editor, range);
+        }
+
+        ReactEditor.setFragmentData(editor, event.dataTransfer);
+      }
+    }, [attributes.onDragStart]),
+    onDrop: useCallback(event => {
+      if (hasTarget(editor, event.target) && !readOnly && !isEventHandled(event, attributes.onDrop)) {
+        // COMPAT: Certain browsers don't fire `beforeinput` events at all, and
+        // Chromium browsers don't properly fire them for files being
+        // dropped into a `contenteditable`. (2019/11/26)
+        // https://bugs.chromium.org/p/chromium/issues/detail?id=1028668
+        if (!HAS_BEFORE_INPUT_SUPPORT || !IS_SAFARI && event.dataTransfer.files.length > 0) {
+          event.preventDefault();
+          var range = ReactEditor.findEventRange(editor, event);
+          var data = event.dataTransfer;
+          Transforms.select(editor, range);
+          ReactEditor.insertData(editor, data);
+        }
+      }
+    }, [readOnly, attributes.onDrop]),
+    onFocus: useCallback(event => {
+      if (!readOnly && !state.isUpdatingSelection && hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onFocus)) {
+        var el = ReactEditor.toDOMNode(editor, editor);
+        state.latestElement = window.document.activeElement; // COMPAT: If the editor has nested editable elements, the focus
+        // can go to them. In Firefox, this must be prevented because it
+        // results in issues with keyboard navigation. (2017/03/30)
+
+        if (IS_FIREFOX && event.target !== el) {
+          el.focus();
+          return;
+        }
+
+        IS_FOCUSED.set(editor, true);
+      }
+    }, [readOnly, attributes.onFocus]),
+    onKeyDown: useCallback(event => {
+      if (!readOnly && hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onKeyDown)) {
+        var {
+          nativeEvent
+        } = event;
+        var {
+          selection
+        } = editor; // COMPAT: Since we prevent the default behavior on
+        // `beforeinput` events, the browser doesn't think there's ever
+        // any history stack to undo or redo, so we have to manage these
+        // hotkeys ourselves. (2019/11/06)
+
+        if (Hotkeys.isRedo(nativeEvent)) {
+          event.preventDefault();
+
+          if (editor.redo) {
+            editor.redo();
+          }
+
+          return;
+        }
+
+        if (Hotkeys.isUndo(nativeEvent)) {
+          event.preventDefault();
+
+          if (editor.undo) {
+            editor.undo();
+          }
+
+          return;
+        } // COMPAT: Certain browsers don't handle the selection updates
+        // properly. In Chrome, the selection isn't properly extended.
+        // And in Firefox, the selection isn't properly collapsed.
+        // (2017/10/17)
+
+
+        if (Hotkeys.isMoveLineBackward(nativeEvent)) {
+          event.preventDefault();
+          Transforms.move(editor, {
+            unit: 'line',
+            reverse: true
+          });
+          return;
+        }
+
+        if (Hotkeys.isMoveLineForward(nativeEvent)) {
+          event.preventDefault();
+          Transforms.move(editor, {
+            unit: 'line'
+          });
+          return;
+        }
+
+        if (Hotkeys.isExtendLineBackward(nativeEvent)) {
+          event.preventDefault();
+          Transforms.move(editor, {
+            unit: 'line',
+            edge: 'focus',
+            reverse: true
+          });
+          return;
+        }
+
+        if (Hotkeys.isExtendLineForward(nativeEvent)) {
+          event.preventDefault();
+          Transforms.move(editor, {
+            unit: 'line',
+            edge: 'focus'
+          });
+          return;
+        } // COMPAT: If a void node is selected, or a zero-width text node
+        // adjacent to an inline is selected, we need to handle these
+        // hotkeys manually because browsers won't be able to skip over
+        // the void node with the zero-width space not being an empty
+        // string.
+
+
+        if (Hotkeys.isMoveBackward(nativeEvent)) {
+          event.preventDefault();
+
+          if (selection && Range.isCollapsed(selection)) {
+            Transforms.move(editor, {
+              reverse: true
+            });
+          } else {
+            Transforms.collapse(editor, {
+              edge: 'start'
+            });
+          }
+
+          return;
+        }
+
+        if (Hotkeys.isMoveForward(nativeEvent)) {
+          event.preventDefault();
+
+          if (selection && Range.isCollapsed(selection)) {
+            Transforms.move(editor);
+          } else {
+            Transforms.collapse(editor, {
+              edge: 'end'
+            });
+          }
+
+          return;
+        }
+
+        if (Hotkeys.isMoveWordBackward(nativeEvent)) {
+          event.preventDefault();
+          Transforms.move(editor, {
+            unit: 'word',
+            reverse: true
+          });
+          return;
+        }
+
+        if (Hotkeys.isMoveWordForward(nativeEvent)) {
+          event.preventDefault();
+          Transforms.move(editor, {
+            unit: 'word'
+          });
+          return;
+        } // COMPAT: Certain browsers don't support the `beforeinput` event, so we
+        // fall back to guessing at the input intention for hotkeys.
+        // COMPAT: In iOS, some of these hotkeys are handled in the
+
+
+        if (!HAS_BEFORE_INPUT_SUPPORT) {
+          // We don't have a core behavior for these, but they change the
+          // DOM if we don't prevent them, so we have to.
+          if (Hotkeys.isBold(nativeEvent) || Hotkeys.isItalic(nativeEvent) || Hotkeys.isTransposeCharacter(nativeEvent)) {
+            event.preventDefault();
+            return;
+          }
+
+          if (Hotkeys.isSplitBlock(nativeEvent)) {
+            event.preventDefault();
+            Editor.insertBreak(editor);
+            return;
+          }
+
+          if (Hotkeys.isDeleteBackward(nativeEvent)) {
+            event.preventDefault();
+
+            if (selection && Range.isExpanded(selection)) {
+              Editor.deleteFragment(editor);
+            } else {
+              Editor.deleteBackward(editor);
+            }
+
+            return;
+          }
+
+          if (Hotkeys.isDeleteForward(nativeEvent)) {
+            event.preventDefault();
+
+            if (selection && Range.isExpanded(selection)) {
+              Editor.deleteFragment(editor);
+            } else {
+              Editor.deleteForward(editor);
+            }
+
+            return;
+          }
+
+          if (Hotkeys.isDeleteLineBackward(nativeEvent)) {
+            event.preventDefault();
+
+            if (selection && Range.isExpanded(selection)) {
+              Editor.deleteFragment(editor);
+            } else {
+              Editor.deleteBackward(editor, {
+                unit: 'line'
+              });
+            }
+
+            return;
+          }
+
+          if (Hotkeys.isDeleteLineForward(nativeEvent)) {
+            event.preventDefault();
+
+            if (selection && Range.isExpanded(selection)) {
+              Editor.deleteFragment(editor);
+            } else {
+              Editor.deleteForward(editor, {
+                unit: 'line'
+              });
+            }
+
+            return;
+          }
+
+          if (Hotkeys.isDeleteWordBackward(nativeEvent)) {
+            event.preventDefault();
+
+            if (selection && Range.isExpanded(selection)) {
+              Editor.deleteFragment(editor);
+            } else {
+              Editor.deleteBackward(editor, {
+                unit: 'word'
+              });
+            }
+
+            return;
+          }
+
+          if (Hotkeys.isDeleteWordForward(nativeEvent)) {
+            event.preventDefault();
+
+            if (selection && Range.isExpanded(selection)) {
+              Editor.deleteFragment(editor);
+            } else {
+              Editor.deleteForward(editor, {
+                unit: 'word'
+              });
+            }
+
+            return;
+          }
+        }
+      }
+    }, [readOnly, attributes.onKeyDown]),
+    onPaste: useCallback(event => {
+      // COMPAT: Certain browsers don't support the `beforeinput` event, so we
+      // fall back to React's `onPaste` here instead.
+      // COMPAT: Firefox, Chrome and Safari are not emitting `beforeinput` events
+      // when "paste without formatting" option is used.
+      // This unfortunately needs to be handled with paste events instead.
+      if ((!HAS_BEFORE_INPUT_SUPPORT || isPlainTextOnlyPaste(event.nativeEvent)) && !readOnly && hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onPaste)) {
+        event.preventDefault();
+        ReactEditor.insertData(editor, event.clipboardData);
+      }
+    }, [readOnly, attributes.onPaste])
+  }), React.createElement(Children, {
+    decorate: decorate,
+    decorations: decorations,
+    node: editor,
+    renderElement: renderElement,
+    renderLeaf: renderLeaf,
+    selection: editor.selection
+  })));
+};
+/**
+ * A default memoized decorate function.
+ */
+
+var defaultDecorate = () => [];
+/**
+ * Check if the target is in the editor.
+ */
+
+
+var hasTarget = (editor, target) => {
+  return isDOMNode(target) && ReactEditor.hasDOMNode(editor, target);
+};
+/**
+ * Check if the target is editable and in the editor.
+ */
+
+
+var hasEditableTarget = (editor, target) => {
+  return isDOMNode(target) && ReactEditor.hasDOMNode(editor, target, {
+    editable: true
+  });
+};
+/**
+ * Check if an event is overrided by a handler.
+ */
+
+
+var isEventHandled = (event, handler) => {
+  if (!handler) {
+    return false;
+  }
+
+  handler(event);
+  return event.isDefaultPrevented() || event.isPropagationStopped();
+};
+/**
+ * Check if a DOM event is overrided by a handler.
+ */
+
+
+var isDOMEventHandled = (event, handler) => {
+  if (!handler) {
+    return false;
+  }
+
+  handler(event);
+  return event.defaultPrevented;
 };
 
-export { DefaultElement, DefaultLeaf, Editable, ReactCommand, ReactEditor, Slate, useEditor, useFocused, useReadOnly, useSelected, useSlate, withReact };
+export { DefaultElement, DefaultLeaf, Editable, ReactEditor, Slate, useEditor, useFocused, useReadOnly, useSelected, useSlate, withReact };
 //# sourceMappingURL=index.es.js.map