slate-react/dist/index.es.js.map

Tools for building completely customizable richtext editors with React.

{"version":3,"file":"index.es.js","sources":["../../../node_modules/@babel/runtime/helpers/esm/defineProperty.js","../../../node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js","../../../node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js","../src/components/string.tsx","../src/utils/weak-maps.ts","../src/components/leaf.tsx","../src/utils/environment.ts","../src/hooks/use-isomorphic-layout-effect.ts","../src/utils/range-list.ts","../src/components/text.tsx","../src/hooks/use-selected.ts","../src/components/element.tsx","../src/hooks/use-slate-static.tsx","../src/hooks/use-decorate.ts","../src/hooks/use-children.tsx","../src/utils/hotkeys.ts","../src/hooks/use-read-only.ts","../src/hooks/use-slate.tsx","../src/utils/dom.ts","../src/components/editable.tsx","../src/utils/key.ts","../src/plugin/react-editor.ts","../src/components/android/diff-text.ts","../src/components/android/mutation-detection.ts","../src/components/android/restore-dom.ts","../src/components/android/android-input-manager.ts","../src/components/android/use-mutation-observer.ts","../src/components/android/use-track-user-input.ts","../src/components/android/use-android-input-manager.ts","../src/components/android/android-editable.tsx","../src/hooks/use-focused.ts","../src/components/slate.tsx","../src/hooks/use-editor.tsx","../src/utils/lines.ts","../src/plugin/with-react.ts","../src/index.ts"],"sourcesContent":["export default function _defineProperty(obj, key, value) {\n  if (key in obj) {\n    Object.defineProperty(obj, key, {\n      value: value,\n      enumerable: true,\n      configurable: true,\n      writable: true\n    });\n  } else {\n    obj[key] = value;\n  }\n\n  return obj;\n}","export default function _objectWithoutPropertiesLoose(source, excluded) {\n  if (source == null) return {};\n  var target = {};\n  var sourceKeys = Object.keys(source);\n  var key, i;\n\n  for (i = 0; i < sourceKeys.length; i++) {\n    key = sourceKeys[i];\n    if (excluded.indexOf(key) >= 0) continue;\n    target[key] = source[key];\n  }\n\n  return target;\n}","import objectWithoutPropertiesLoose from \"./objectWithoutPropertiesLoose.js\";\nexport default function _objectWithoutProperties(source, excluded) {\n  if (source == null) return {};\n  var target = objectWithoutPropertiesLoose(source, excluded);\n  var key, i;\n\n  if (Object.getOwnPropertySymbols) {\n    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);\n\n    for (i = 0; i < sourceSymbolKeys.length; i++) {\n      key = sourceSymbolKeys[i];\n      if (excluded.indexOf(key) >= 0) continue;\n      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;\n      target[key] = source[key];\n    }\n  }\n\n  return target;\n}","import React from 'react'\nimport { Editor, Text, Path, Element, Node } from 'slate'\n\nimport { ReactEditor, useSlateStatic } from '..'\n\n/**\n * Leaf content strings.\n */\n\nconst String = (props: {\n  isLast: boolean\n  leaf: Text\n  parent: Element\n  text: Text\n}) => {\n  const { isLast, leaf, parent, text } = props\n  const editor = useSlateStatic()\n  const path = ReactEditor.findPath(editor, text)\n  const parentPath = Path.parent(path)\n\n  // COMPAT: Render text inside void nodes with a zero-width space.\n  // So the node can contain selection but the text is not visible.\n  if (editor.isVoid(parent)) {\n    return <ZeroWidthString length={Node.string(parent).length} />\n  }\n\n  // COMPAT: If this is the last text node in an empty block, render a zero-\n  // width space that will convert into a line break when copying and pasting\n  // to support expected plain text.\n  if (\n    leaf.text === '' &&\n    parent.children[parent.children.length - 1] === text &&\n    !editor.isInline(parent) &&\n    Editor.string(editor, parentPath) === ''\n  ) {\n    return <ZeroWidthString isLineBreak />\n  }\n\n  // COMPAT: If the text is empty, it's because it's on the edge of an inline\n  // node, so we render a zero-width space so that the selection can be\n  // inserted next to it still.\n  if (leaf.text === '') {\n    return <ZeroWidthString />\n  }\n\n  // COMPAT: Browsers will collapse trailing new lines at the end of blocks,\n  // so we need to add an extra trailing new lines to prevent that.\n  if (isLast && leaf.text.slice(-1) === '\\n') {\n    return <TextString isTrailing text={leaf.text} />\n  }\n\n  return <TextString text={leaf.text} />\n}\n\n/**\n * Leaf strings with text in them.\n */\n\nconst TextString = (props: { text: string; isTrailing?: boolean }) => {\n  const { text, isTrailing = false } = props\n  return (\n    <span data-slate-string>\n      {text}\n      {isTrailing ? '\\n' : null}\n    </span>\n  )\n}\n\n/**\n * Leaf strings without text, render as zero-width strings.\n */\n\nconst ZeroWidthString = (props: { length?: number; isLineBreak?: boolean }) => {\n  const { length = 0, isLineBreak = false } = props\n  return (\n    <span\n      data-slate-zero-width={isLineBreak ? 'n' : 'z'}\n      data-slate-length={length}\n    >\n      {'\\uFEFF'}\n      {isLineBreak ? <br /> : null}\n    </span>\n  )\n}\n\nexport default String\n","import { Node, Ancestor, Editor, Range } from 'slate'\n\nimport { Key } from './key'\n\n/**\n * Two weak maps that allow us rebuild a path given a node. They are populated\n * at render time such that after a render occurs we can always backtrack.\n */\n\nexport const NODE_TO_INDEX: WeakMap<Node, number> = new WeakMap()\nexport const NODE_TO_PARENT: WeakMap<Node, Ancestor> = new WeakMap()\n\n/**\n * Weak maps that allow us to go between Slate nodes and DOM nodes. These\n * are used to resolve DOM event-related logic into Slate actions.\n */\nexport const EDITOR_TO_WINDOW: WeakMap<Editor, Window> = new WeakMap()\nexport const EDITOR_TO_ELEMENT: WeakMap<Editor, HTMLElement> = new WeakMap()\nexport const EDITOR_TO_PLACEHOLDER: WeakMap<Editor, string> = new WeakMap()\nexport const ELEMENT_TO_NODE: WeakMap<HTMLElement, Node> = new WeakMap()\nexport const KEY_TO_ELEMENT: WeakMap<Key, HTMLElement> = new WeakMap()\nexport const NODE_TO_ELEMENT: WeakMap<Node, HTMLElement> = new WeakMap()\nexport const NODE_TO_KEY: WeakMap<Node, Key> = new WeakMap()\n\n/**\n * Weak maps for storing editor-related state.\n */\n\nexport const IS_READ_ONLY: WeakMap<Editor, boolean> = new WeakMap()\nexport const IS_FOCUSED: WeakMap<Editor, boolean> = new WeakMap()\nexport const IS_DRAGGING: WeakMap<Editor, boolean> = new WeakMap()\nexport const IS_CLICKING: WeakMap<Editor, boolean> = new WeakMap()\n\n/**\n * Weak map for associating the context `onChange` context with the plugin.\n */\n\nexport const EDITOR_TO_ON_CHANGE = new WeakMap<Editor, () => void>()\n\nexport const EDITOR_TO_RESTORE_DOM = new WeakMap<Editor, () => void>()\n\n/**\n * Symbols.\n */\n\nexport const PLACEHOLDER_SYMBOL = (Symbol('placeholder') as unknown) as string\n","import React, { useRef, useEffect } from 'react'\nimport { Element, Text } from 'slate'\nimport String from './string'\nimport { PLACEHOLDER_SYMBOL } from '../utils/weak-maps'\nimport { RenderLeafProps, RenderPlaceholderProps } from './editable'\n\n// auto-incrementing key for String component, force it refresh to\n// prevent inconsistent rendering by React with IME input\nlet keyForString = 0\n/**\n * Individual leaves in a text node with unique formatting.\n */\n\nconst Leaf = (props: {\n  isLast: boolean\n  leaf: Text\n  parent: Element\n  renderPlaceholder: (props: RenderPlaceholderProps) => JSX.Element\n  renderLeaf?: (props: RenderLeafProps) => JSX.Element\n  text: Text\n}) => {\n  const {\n    leaf,\n    isLast,\n    text,\n    parent,\n    renderPlaceholder,\n    renderLeaf = (props: RenderLeafProps) => <DefaultLeaf {...props} />,\n  } = props\n\n  const placeholderRef = useRef<HTMLSpanElement | null>(null)\n\n  useEffect(() => {\n    const placeholderEl = placeholderRef?.current\n    const editorEl = document.querySelector<HTMLDivElement>(\n      '[data-slate-editor=\"true\"]'\n    )\n\n    if (!placeholderEl || !editorEl) {\n      return\n    }\n\n    editorEl.style.minHeight = `${placeholderEl.clientHeight}px`\n\n    return () => {\n      editorEl.style.minHeight = 'auto'\n    }\n  }, [placeholderRef, leaf])\n\n  let children = (\n    <String\n      key={keyForString++}\n      isLast={isLast}\n      leaf={leaf}\n      parent={parent}\n      text={text}\n    />\n  )\n\n  if (leaf[PLACEHOLDER_SYMBOL]) {\n    const placeholderProps: RenderPlaceholderProps = {\n      children: leaf.placeholder,\n      attributes: {\n        'data-slate-placeholder': true,\n        style: {\n          position: 'absolute',\n          pointerEvents: 'none',\n          width: '100%',\n          maxWidth: '100%',\n          display: 'block',\n          opacity: '0.333',\n          userSelect: 'none',\n          textDecoration: 'none',\n        },\n        contentEditable: false,\n        ref: placeholderRef,\n      },\n    }\n\n    children = (\n      <React.Fragment>\n        {renderPlaceholder(placeholderProps)}\n        {children}\n      </React.Fragment>\n    )\n  }\n\n  // COMPAT: Having the `data-` attributes on these leaf elements ensures that\n  // in certain misbehaving browsers they aren't weirdly cloned/destroyed by\n  // contenteditable behaviors. (2019/05/08)\n  const attributes: {\n    'data-slate-leaf': true\n  } = {\n    'data-slate-leaf': true,\n  }\n\n  return renderLeaf({ attributes, children, leaf, text })\n}\n\nconst MemoizedLeaf = React.memo(Leaf, (prev, next) => {\n  return (\n    next.parent === prev.parent &&\n    next.isLast === prev.isLast &&\n    next.renderLeaf === prev.renderLeaf &&\n    next.renderPlaceholder === prev.renderPlaceholder &&\n    next.text === prev.text &&\n    next.leaf.text === prev.leaf.text &&\n    Text.matches(next.leaf, prev.leaf) &&\n    next.leaf[PLACEHOLDER_SYMBOL] === prev.leaf[PLACEHOLDER_SYMBOL]\n  )\n})\n\nexport const DefaultLeaf = (props: RenderLeafProps) => {\n  const { attributes, children } = props\n  return <span {...attributes}>{children}</span>\n}\n\nexport default MemoizedLeaf\n","export const IS_IOS =\n  typeof navigator !== 'undefined' &&\n  typeof window !== 'undefined' &&\n  /iPad|iPhone|iPod/.test(navigator.userAgent) &&\n  !window.MSStream\n\nexport const IS_APPLE =\n  typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.userAgent)\n\nexport const IS_ANDROID =\n  typeof navigator !== 'undefined' && /Android/.test(navigator.userAgent)\n\nexport const IS_FIREFOX =\n  typeof navigator !== 'undefined' &&\n  /^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent)\n\nexport const IS_SAFARI =\n  typeof navigator !== 'undefined' &&\n  /Version\\/[\\d\\.]+.*Safari/.test(navigator.userAgent)\n\n// \"modern\" Edge was released at 79.x\nexport const IS_EDGE_LEGACY =\n  typeof navigator !== 'undefined' &&\n  /Edge?\\/(?:[0-6][0-9]|[0-7][0-8])/i.test(navigator.userAgent)\n\nexport const IS_CHROME =\n  typeof navigator !== 'undefined' && /Chrome/i.test(navigator.userAgent)\n\n// Native `beforeInput` events don't work well with react on Chrome 75\n// and older, Chrome 76+ can use `beforeInput` though.\nexport const IS_CHROME_LEGACY =\n  typeof navigator !== 'undefined' &&\n  /Chrome?\\/(?:[0-7][0-5]|[0-6][0-9])/i.test(navigator.userAgent)\n\n// Firefox did not support `beforeInput` until `v87`.\nexport const IS_FIREFOX_LEGACY =\n  typeof navigator !== 'undefined' &&\n  /^(?!.*Seamonkey)(?=.*Firefox\\/(?:[0-7][0-9]|[0-8][0-6])).*/i.test(\n    navigator.userAgent\n  )\n\n// Check if DOM is available as React does internally.\n// https://github.com/facebook/react/blob/master/packages/shared/ExecutionEnvironment.js\nexport const CAN_USE_DOM = !!(\n  typeof window !== 'undefined' &&\n  typeof window.document !== 'undefined' &&\n  typeof window.document.createElement !== 'undefined'\n)\n\n// COMPAT: Firefox/Edge Legacy don't support the `beforeinput` event\n// Chrome Legacy doesn't support `beforeinput` correctly\nexport const HAS_BEFORE_INPUT_SUPPORT =\n  !IS_CHROME_LEGACY &&\n  !IS_EDGE_LEGACY &&\n  // globalThis is undefined in older browsers\n  typeof globalThis !== 'undefined' &&\n  globalThis.InputEvent &&\n  // @ts-ignore The `getTargetRanges` property isn't recognized.\n  typeof globalThis.InputEvent.prototype.getTargetRanges === 'function'\n","import { useLayoutEffect, useEffect } from 'react'\nimport { CAN_USE_DOM } from '../utils/environment'\n\n/**\n * Prevent warning on SSR by falling back to useEffect when DOM isn't available\n */\n\nexport const useIsomorphicLayoutEffect = CAN_USE_DOM\n  ? useLayoutEffect\n  : useEffect\n","import { Range } from 'slate'\nimport { PLACEHOLDER_SYMBOL } from './weak-maps'\n\nexport const shallowCompare = (obj1: {}, obj2: {}) =>\n  Object.keys(obj1).length === Object.keys(obj2).length &&\n  Object.keys(obj1).every(\n    key => obj2.hasOwnProperty(key) && obj1[key] === obj2[key]\n  )\n\n/**\n * Check if a list of decorator ranges are equal to another.\n *\n * PERF: this requires the two lists to also have the ranges inside them in the\n * same order, but this is an okay constraint for us since decorations are\n * kept in order, and the odd case where they aren't is okay to re-render for.\n */\n\nexport const isDecoratorRangeListEqual = (\n  list: Range[],\n  another: Range[]\n): boolean => {\n  if (list.length !== another.length) {\n    return false\n  }\n\n  for (let i = 0; i < list.length; i++) {\n    const range = list[i]\n    const other = another[i]\n\n    const { anchor: rangeAnchor, focus: rangeFocus, ...rangeOwnProps } = range\n    const { anchor: otherAnchor, focus: otherFocus, ...otherOwnProps } = other\n\n    if (\n      !Range.equals(range, other) ||\n      range[PLACEHOLDER_SYMBOL] !== other[PLACEHOLDER_SYMBOL] ||\n      !shallowCompare(rangeOwnProps, otherOwnProps)\n    ) {\n      return false\n    }\n  }\n\n  return true\n}\n","import React, { useRef } from 'react'\nimport { Range, Element, Text as SlateText } from 'slate'\n\nimport Leaf from './leaf'\nimport { ReactEditor, useSlateStatic } from '..'\nimport { RenderLeafProps, RenderPlaceholderProps } from './editable'\nimport { useIsomorphicLayoutEffect } from '../hooks/use-isomorphic-layout-effect'\nimport {\n  KEY_TO_ELEMENT,\n  NODE_TO_ELEMENT,\n  ELEMENT_TO_NODE,\n} from '../utils/weak-maps'\nimport { isDecoratorRangeListEqual } from '../utils/range-list'\n\n/**\n * Text.\n */\n\nconst Text = (props: {\n  decorations: Range[]\n  isLast: boolean\n  parent: Element\n  renderPlaceholder: (props: RenderPlaceholderProps) => JSX.Element\n  renderLeaf?: (props: RenderLeafProps) => JSX.Element\n  text: SlateText\n}) => {\n  const {\n    decorations,\n    isLast,\n    parent,\n    renderPlaceholder,\n    renderLeaf,\n    text,\n  } = props\n  const editor = useSlateStatic()\n  const ref = useRef<HTMLSpanElement>(null)\n  const leaves = SlateText.decorations(text, decorations)\n  const key = ReactEditor.findKey(editor, text)\n  const children = []\n\n  for (let i = 0; i < leaves.length; i++) {\n    const leaf = leaves[i]\n\n    children.push(\n      <Leaf\n        isLast={isLast && i === leaves.length - 1}\n        key={`${key.id}-${i}`}\n        renderPlaceholder={renderPlaceholder}\n        leaf={leaf}\n        text={text}\n        parent={parent}\n        renderLeaf={renderLeaf}\n      />\n    )\n  }\n\n  // Update element-related weak maps with the DOM element ref.\n  useIsomorphicLayoutEffect(() => {\n    if (ref.current) {\n      KEY_TO_ELEMENT.set(key, ref.current)\n      NODE_TO_ELEMENT.set(text, ref.current)\n      ELEMENT_TO_NODE.set(ref.current, text)\n    } else {\n      KEY_TO_ELEMENT.delete(key)\n      NODE_TO_ELEMENT.delete(text)\n    }\n  })\n\n  return (\n    <span data-slate-node=\"text\" ref={ref}>\n      {children}\n    </span>\n  )\n}\n\nconst MemoizedText = React.memo(Text, (prev, next) => {\n  return (\n    next.parent === prev.parent &&\n    next.isLast === prev.isLast &&\n    next.renderLeaf === prev.renderLeaf &&\n    next.text === prev.text &&\n    isDecoratorRangeListEqual(next.decorations, prev.decorations)\n  )\n})\n\nexport default MemoizedText\n","import { createContext, useContext } from 'react'\n\n/**\n * A React context for sharing the `selected` state of an element.\n */\n\nexport const SelectedContext = createContext(false)\n\n/**\n * Get the current `selected` state of an element.\n */\n\nexport const useSelected = (): boolean => {\n  return useContext(SelectedContext)\n}\n","import React, { useRef } from 'react'\nimport getDirection from 'direction'\nimport { Editor, Node, Range, NodeEntry, Element as SlateElement } from 'slate'\n\nimport Text from './text'\nimport useChildren from '../hooks/use-children'\nimport { ReactEditor, useSlateStatic, useReadOnly } from '..'\nimport { SelectedContext } from '../hooks/use-selected'\nimport { useIsomorphicLayoutEffect } from '../hooks/use-isomorphic-layout-effect'\nimport {\n  NODE_TO_ELEMENT,\n  ELEMENT_TO_NODE,\n  NODE_TO_PARENT,\n  NODE_TO_INDEX,\n  KEY_TO_ELEMENT,\n} from '../utils/weak-maps'\nimport { isDecoratorRangeListEqual } from '../utils/range-list'\nimport {\n  RenderElementProps,\n  RenderLeafProps,\n  RenderPlaceholderProps,\n} from './editable'\n\n/**\n * Element.\n */\n\nconst Element = (props: {\n  decorations: Range[]\n  element: SlateElement\n  renderElement?: (props: RenderElementProps) => JSX.Element\n  renderPlaceholder: (props: RenderPlaceholderProps) => JSX.Element\n  renderLeaf?: (props: RenderLeafProps) => JSX.Element\n  selection: Range | null\n}) => {\n  const {\n    decorations,\n    element,\n    renderElement = (p: RenderElementProps) => <DefaultElement {...p} />,\n    renderPlaceholder,\n    renderLeaf,\n    selection,\n  } = props\n  const ref = useRef<HTMLElement>(null)\n  const editor = useSlateStatic()\n  const readOnly = useReadOnly()\n  const isInline = editor.isInline(element)\n  const key = ReactEditor.findKey(editor, element)\n  let children: React.ReactNode = useChildren({\n    decorations,\n    node: element,\n    renderElement,\n    renderPlaceholder,\n    renderLeaf,\n    selection,\n  })\n\n  // Attributes that the developer must mix into the element in their\n  // custom node renderer component.\n  const attributes: {\n    'data-slate-node': 'element'\n    'data-slate-void'?: true\n    'data-slate-inline'?: true\n    contentEditable?: false\n    dir?: 'rtl'\n    ref: any\n  } = {\n    'data-slate-node': 'element',\n    ref,\n  }\n\n  if (isInline) {\n    attributes['data-slate-inline'] = true\n  }\n\n  // If it's a block node with inline children, add the proper `dir` attribute\n  // for text direction.\n  if (!isInline && Editor.hasInlines(editor, element)) {\n    const text = Node.string(element)\n    const dir = getDirection(text)\n\n    if (dir === 'rtl') {\n      attributes.dir = dir\n    }\n  }\n\n  // If it's a void node, wrap the children in extra void-specific elements.\n  if (Editor.isVoid(editor, element)) {\n    attributes['data-slate-void'] = true\n\n    if (!readOnly && isInline) {\n      attributes.contentEditable = false\n    }\n\n    const Tag = isInline ? 'span' : 'div'\n    const [[text]] = Node.texts(element)\n\n    children = readOnly ? null : (\n      <Tag\n        data-slate-spacer\n        style={{\n          height: '0',\n          color: 'transparent',\n          outline: 'none',\n          position: 'absolute',\n        }}\n      >\n        <Text\n          renderPlaceholder={renderPlaceholder}\n          decorations={[]}\n          isLast={false}\n          parent={element}\n          text={text}\n        />\n      </Tag>\n    )\n\n    NODE_TO_INDEX.set(text, 0)\n    NODE_TO_PARENT.set(text, element)\n  }\n\n  // Update element-related weak maps with the DOM element ref.\n  useIsomorphicLayoutEffect(() => {\n    if (ref.current) {\n      KEY_TO_ELEMENT.set(key, ref.current)\n      NODE_TO_ELEMENT.set(element, ref.current)\n      ELEMENT_TO_NODE.set(ref.current, element)\n    } else {\n      KEY_TO_ELEMENT.delete(key)\n      NODE_TO_ELEMENT.delete(element)\n    }\n  })\n\n  return (\n    <SelectedContext.Provider value={!!selection}>\n      {renderElement({ attributes, children, element })}\n    </SelectedContext.Provider>\n  )\n}\n\nconst MemoizedElement = React.memo(Element, (prev, next) => {\n  return (\n    prev.element === next.element &&\n    prev.renderElement === next.renderElement &&\n    prev.renderLeaf === next.renderLeaf &&\n    isDecoratorRangeListEqual(prev.decorations, next.decorations) &&\n    (prev.selection === next.selection ||\n      (!!prev.selection &&\n        !!next.selection &&\n        Range.equals(prev.selection, next.selection)))\n  )\n})\n\n/**\n * The default element renderer.\n */\n\nexport const DefaultElement = (props: RenderElementProps) => {\n  const { attributes, children, element } = props\n  const editor = useSlateStatic()\n  const Tag = editor.isInline(element) ? 'span' : 'div'\n  return (\n    <Tag {...attributes} style={{ position: 'relative' }}>\n      {children}\n    </Tag>\n  )\n}\n\nexport default MemoizedElement\n","import { createContext, useContext } from 'react'\nimport { ReactEditor } from '../plugin/react-editor'\nimport { Editor } from 'slate'\n\n/**\n * A React context for sharing the editor object.\n */\n\nexport const EditorContext = createContext<ReactEditor | null>(null)\n\n/**\n * Get the current editor object from the React context.\n */\n\nexport const useSlateStatic = (): Editor => {\n  const editor = useContext(EditorContext)\n\n  if (!editor) {\n    throw new Error(\n      `The \\`useSlateStatic\\` hook must be used inside the <Slate> component's context.`\n    )\n  }\n\n  return editor\n}\n","import { createContext, useContext } from 'react'\nimport { Range, NodeEntry } from 'slate'\n\n/**\n * A React context for sharing the `decorate` prop of the editable.\n */\n\nexport const DecorateContext = createContext<(entry: NodeEntry) => Range[]>(\n  () => []\n)\n\n/**\n * Get the current `decorate` prop of the editable.\n */\n\nexport const useDecorate = (): ((entry: NodeEntry) => Range[]) => {\n  return useContext(DecorateContext)\n}\n","import React from 'react'\nimport { Editor, Range, Element, NodeEntry, Ancestor, Descendant } from 'slate'\n\nimport ElementComponent from '../components/element'\nimport TextComponent from '../components/text'\nimport { ReactEditor } from '..'\nimport { useSlateStatic } from './use-slate-static'\nimport { useDecorate } from './use-decorate'\nimport { NODE_TO_INDEX, NODE_TO_PARENT } from '../utils/weak-maps'\nimport {\n  RenderElementProps,\n  RenderLeafProps,\n  RenderPlaceholderProps,\n} from '../components/editable'\n\n/**\n * Children.\n */\n\nconst useChildren = (props: {\n  decorations: Range[]\n  node: Ancestor\n  renderElement?: (props: RenderElementProps) => JSX.Element\n  renderPlaceholder: (props: RenderPlaceholderProps) => JSX.Element\n  renderLeaf?: (props: RenderLeafProps) => JSX.Element\n  selection: Range | null\n}) => {\n  const {\n    decorations,\n    node,\n    renderElement,\n    renderPlaceholder,\n    renderLeaf,\n    selection,\n  } = props\n  const decorate = useDecorate()\n  const editor = useSlateStatic()\n  const path = ReactEditor.findPath(editor, node)\n  const children = []\n  const isLeafBlock =\n    Element.isElement(node) &&\n    !editor.isInline(node) &&\n    Editor.hasInlines(editor, node)\n\n  for (let i = 0; i < node.children.length; i++) {\n    const p = path.concat(i)\n    const n = node.children[i] as Descendant\n    const key = ReactEditor.findKey(editor, n)\n    const range = Editor.range(editor, p)\n    const sel = selection && Range.intersection(range, selection)\n    const ds = decorate([n, p])\n\n    for (const dec of decorations) {\n      const d = Range.intersection(dec, range)\n\n      if (d) {\n        ds.push(d)\n      }\n    }\n\n    if (Element.isElement(n)) {\n      children.push(\n        <ElementComponent\n          decorations={ds}\n          element={n}\n          key={key.id}\n          renderElement={renderElement}\n          renderPlaceholder={renderPlaceholder}\n          renderLeaf={renderLeaf}\n          selection={sel}\n        />\n      )\n    } else {\n      children.push(\n        <TextComponent\n          decorations={ds}\n          key={key.id}\n          isLast={isLeafBlock && i === node.children.length - 1}\n          parent={node}\n          renderPlaceholder={renderPlaceholder}\n          renderLeaf={renderLeaf}\n          text={n}\n        />\n      )\n    }\n\n    NODE_TO_INDEX.set(n, i)\n    NODE_TO_PARENT.set(n, node)\n  }\n\n  return children\n}\n\nexport default useChildren\n","import { isKeyHotkey } from 'is-hotkey'\nimport { IS_APPLE } from './environment'\n\n/**\n * Hotkey mappings for each platform.\n */\n\nconst HOTKEYS = {\n  bold: 'mod+b',\n  compose: ['down', 'left', 'right', 'up', 'backspace', 'enter'],\n  moveBackward: 'left',\n  moveForward: 'right',\n  moveWordBackward: 'ctrl+left',\n  moveWordForward: 'ctrl+right',\n  deleteBackward: 'shift?+backspace',\n  deleteForward: 'shift?+delete',\n  extendBackward: 'shift+left',\n  extendForward: 'shift+right',\n  italic: 'mod+i',\n  splitBlock: 'shift?+enter',\n  undo: 'mod+z',\n}\n\nconst APPLE_HOTKEYS = {\n  moveLineBackward: 'opt+up',\n  moveLineForward: 'opt+down',\n  moveWordBackward: 'opt+left',\n  moveWordForward: 'opt+right',\n  deleteBackward: ['ctrl+backspace', 'ctrl+h'],\n  deleteForward: ['ctrl+delete', 'ctrl+d'],\n  deleteLineBackward: 'cmd+shift?+backspace',\n  deleteLineForward: ['cmd+shift?+delete', 'ctrl+k'],\n  deleteWordBackward: 'opt+shift?+backspace',\n  deleteWordForward: 'opt+shift?+delete',\n  extendLineBackward: 'opt+shift+up',\n  extendLineForward: 'opt+shift+down',\n  redo: 'cmd+shift+z',\n  transposeCharacter: 'ctrl+t',\n}\n\nconst WINDOWS_HOTKEYS = {\n  deleteWordBackward: 'ctrl+shift?+backspace',\n  deleteWordForward: 'ctrl+shift?+delete',\n  redo: ['ctrl+y', 'ctrl+shift+z'],\n}\n\n/**\n * Create a platform-aware hotkey checker.\n */\n\nconst create = (key: string) => {\n  const generic = HOTKEYS[key]\n  const apple = APPLE_HOTKEYS[key]\n  const windows = WINDOWS_HOTKEYS[key]\n  const isGeneric = generic && isKeyHotkey(generic)\n  const isApple = apple && isKeyHotkey(apple)\n  const isWindows = windows && isKeyHotkey(windows)\n\n  return (event: KeyboardEvent) => {\n    if (isGeneric && isGeneric(event)) return true\n    if (IS_APPLE && isApple && isApple(event)) return true\n    if (!IS_APPLE && isWindows && isWindows(event)) return true\n    return false\n  }\n}\n\n/**\n * Hotkeys.\n */\n\nexport default {\n  isBold: create('bold'),\n  isCompose: create('compose'),\n  isMoveBackward: create('moveBackward'),\n  isMoveForward: create('moveForward'),\n  isDeleteBackward: create('deleteBackward'),\n  isDeleteForward: create('deleteForward'),\n  isDeleteLineBackward: create('deleteLineBackward'),\n  isDeleteLineForward: create('deleteLineForward'),\n  isDeleteWordBackward: create('deleteWordBackward'),\n  isDeleteWordForward: create('deleteWordForward'),\n  isExtendBackward: create('extendBackward'),\n  isExtendForward: create('extendForward'),\n  isExtendLineBackward: create('extendLineBackward'),\n  isExtendLineForward: create('extendLineForward'),\n  isItalic: create('italic'),\n  isMoveLineBackward: create('moveLineBackward'),\n  isMoveLineForward: create('moveLineForward'),\n  isMoveWordBackward: create('moveWordBackward'),\n  isMoveWordForward: create('moveWordForward'),\n  isRedo: create('redo'),\n  isSplitBlock: create('splitBlock'),\n  isTransposeCharacter: create('transposeCharacter'),\n  isUndo: create('undo'),\n}\n","import { createContext, useContext } from 'react'\n\n/**\n * A React context for sharing the `readOnly` state of the editor.\n */\n\nexport const ReadOnlyContext = createContext(false)\n\n/**\n * Get the current `readOnly` state of the editor.\n */\n\nexport const useReadOnly = (): boolean => {\n  return useContext(ReadOnlyContext)\n}\n","import { createContext, useContext } from 'react'\nimport { Editor } from 'slate'\nimport { ReactEditor } from '../plugin/react-editor'\n\n/**\n * A React context for sharing the editor object, in a way that re-renders the\n * context whenever changes occur.\n */\n\nexport const SlateContext = createContext<[ReactEditor] | null>(null)\n\n/**\n * Get the current editor object from the React context.\n */\n\nexport const useSlate = (): Editor => {\n  const context = useContext(SlateContext)\n\n  if (!context) {\n    throw new Error(\n      `The \\`useSlate\\` hook must be used inside the <SlateProvider> component's context.`\n    )\n  }\n\n  const [editor] = context\n  return editor\n}\n","/**\n * Types.\n */\n\n// COMPAT: This is required to prevent TypeScript aliases from doing some very\n// weird things for Slate's types with the same name as globals. (2019/11/27)\n// https://github.com/microsoft/TypeScript/issues/35002\nimport DOMNode = globalThis.Node\nimport DOMComment = globalThis.Comment\nimport DOMElement = globalThis.Element\nimport DOMText = globalThis.Text\nimport DOMRange = globalThis.Range\nimport DOMSelection = globalThis.Selection\nimport DOMStaticRange = globalThis.StaticRange\n\nexport {\n  DOMNode,\n  DOMComment,\n  DOMElement,\n  DOMText,\n  DOMRange,\n  DOMSelection,\n  DOMStaticRange,\n}\n\ndeclare global {\n  interface Window {\n    Selection: typeof Selection['constructor']\n    DataTransfer: typeof DataTransfer['constructor']\n    Node: typeof Node['constructor']\n  }\n}\n\nexport type DOMPoint = [Node, number]\n\n/**\n * Returns the host window of a DOM node\n */\n\nexport const getDefaultView = (value: any): Window | null => {\n  return (\n    (value && value.ownerDocument && value.ownerDocument.defaultView) || null\n  )\n}\n\n/**\n * Check if a DOM node is a comment node.\n */\n\nexport const isDOMComment = (value: any): value is DOMComment => {\n  return isDOMNode(value) && value.nodeType === 8\n}\n\n/**\n * Check if a DOM node is an element node.\n */\n\nexport const isDOMElement = (value: any): value is DOMElement => {\n  return isDOMNode(value) && value.nodeType === 1\n}\n\n/**\n * Check if a value is a DOM node.\n */\n\nexport const isDOMNode = (value: any): value is DOMNode => {\n  const window = getDefaultView(value)\n  return !!window && value instanceof window.Node\n}\n\n/**\n * Check if a value is a DOM selection.\n */\n\nexport const isDOMSelection = (value: any): value is DOMSelection => {\n  const window = value && value.anchorNode && getDefaultView(value.anchorNode)\n  return !!window && value instanceof window.Selection\n}\n\n/**\n * Check if a DOM node is an element node.\n */\n\nexport const isDOMText = (value: any): value is DOMText => {\n  return isDOMNode(value) && value.nodeType === 3\n}\n\n/**\n * Checks whether a paste event is a plaintext-only event.\n */\n\nexport const isPlainTextOnlyPaste = (event: ClipboardEvent) => {\n  return (\n    event.clipboardData &&\n    event.clipboardData.getData('text/plain') !== '' &&\n    event.clipboardData.types.length === 1\n  )\n}\n\n/**\n * Normalize a DOM point so that it always refers to a text node.\n */\n\nexport const normalizeDOMPoint = (domPoint: DOMPoint): DOMPoint => {\n  let [node, offset] = domPoint\n\n  // If it's an element node, its offset refers to the index of its children\n  // including comment nodes, so try to find the right text child node.\n  if (isDOMElement(node) && node.childNodes.length) {\n    let isLast = offset === node.childNodes.length\n    let index = isLast ? offset - 1 : offset\n    ;[node, index] = getEditableChildAndIndex(\n      node,\n      index,\n      isLast ? 'backward' : 'forward'\n    )\n    // If the editable child found is in front of input offset, we instead seek to its end\n    isLast = index < offset\n\n    // If the node has children, traverse until we have a leaf node. Leaf nodes\n    // can be either text nodes, or other void DOM nodes.\n    while (isDOMElement(node) && node.childNodes.length) {\n      const i = isLast ? node.childNodes.length - 1 : 0\n      node = getEditableChild(node, i, isLast ? 'backward' : 'forward')\n    }\n\n    // Determine the new offset inside the text node.\n    offset = isLast && node.textContent != null ? node.textContent.length : 0\n  }\n\n  // Return the node and offset.\n  return [node, offset]\n}\n\n/**\n * Determines wether the active element is nested within a shadowRoot\n */\n\nexport const hasShadowRoot = () => {\n  return !!(\n    window.document.activeElement && window.document.activeElement.shadowRoot\n  )\n}\n\n/**\n * Get the nearest editable child and index at `index` in a `parent`, preferring\n * `direction`.\n */\n\nexport const getEditableChildAndIndex = (\n  parent: DOMElement,\n  index: number,\n  direction: 'forward' | 'backward'\n): [DOMNode, number] => {\n  const { childNodes } = parent\n  let child = childNodes[index]\n  let i = index\n  let triedForward = false\n  let triedBackward = false\n\n  // While the child is a comment node, or an element node with no children,\n  // keep iterating to find a sibling non-void, non-comment node.\n  while (\n    isDOMComment(child) ||\n    (isDOMElement(child) && child.childNodes.length === 0) ||\n    (isDOMElement(child) && child.getAttribute('contenteditable') === 'false')\n  ) {\n    if (triedForward && triedBackward) {\n      break\n    }\n\n    if (i >= childNodes.length) {\n      triedForward = true\n      i = index - 1\n      direction = 'backward'\n      continue\n    }\n\n    if (i < 0) {\n      triedBackward = true\n      i = index + 1\n      direction = 'forward'\n      continue\n    }\n\n    child = childNodes[i]\n    index = i\n    i += direction === 'forward' ? 1 : -1\n  }\n\n  return [child, index]\n}\n\n/**\n * Get the nearest editable child at `index` in a `parent`, preferring\n * `direction`.\n */\n\nexport const getEditableChild = (\n  parent: DOMElement,\n  index: number,\n  direction: 'forward' | 'backward'\n): DOMNode => {\n  const [child] = getEditableChildAndIndex(parent, index, direction)\n  return child\n}\n\n/**\n * Get a plaintext representation of the content of a node, accounting for block\n * elements which get a newline appended.\n *\n * The domNode must be attached to the DOM.\n */\n\nexport const getPlainText = (domNode: DOMNode) => {\n  let text = ''\n\n  if (isDOMText(domNode) && domNode.nodeValue) {\n    return domNode.nodeValue\n  }\n\n  if (isDOMElement(domNode)) {\n    for (const childNode of Array.from(domNode.childNodes)) {\n      text += getPlainText(childNode)\n    }\n\n    const display = getComputedStyle(domNode).getPropertyValue('display')\n\n    if (display === 'block' || display === 'list' || domNode.tagName === 'BR') {\n      text += '\\n'\n    }\n  }\n\n  return text\n}\n","import React, { useEffect, useRef, useMemo, useCallback } from 'react'\nimport {\n  Editor,\n  Element,\n  NodeEntry,\n  Node,\n  Range,\n  Text,\n  Transforms,\n  Path,\n} from 'slate'\nimport getDirection from 'direction'\nimport throttle from 'lodash/throttle'\nimport scrollIntoView from 'scroll-into-view-if-needed'\n\nimport useChildren from '../hooks/use-children'\nimport Hotkeys from '../utils/hotkeys'\nimport {\n  HAS_BEFORE_INPUT_SUPPORT,\n  IS_CHROME,\n  IS_FIREFOX,\n  IS_FIREFOX_LEGACY,\n  IS_SAFARI,\n} from '../utils/environment'\nimport { ReactEditor } from '..'\nimport { ReadOnlyContext } from '../hooks/use-read-only'\nimport { useSlate } from '../hooks/use-slate'\nimport { useIsomorphicLayoutEffect } from '../hooks/use-isomorphic-layout-effect'\nimport { DecorateContext } from '../hooks/use-decorate'\nimport {\n  DOMElement,\n  DOMNode,\n  DOMRange,\n  getDefaultView,\n  isDOMElement,\n  isDOMNode,\n  isPlainTextOnlyPaste,\n} from '../utils/dom'\n\nimport {\n  EDITOR_TO_ELEMENT,\n  ELEMENT_TO_NODE,\n  IS_READ_ONLY,\n  NODE_TO_ELEMENT,\n  IS_FOCUSED,\n  PLACEHOLDER_SYMBOL,\n  EDITOR_TO_WINDOW,\n} from '../utils/weak-maps'\n\n/**\n * `RenderElementProps` are passed to the `renderElement` handler.\n */\n\nexport interface RenderElementProps {\n  children: any\n  element: Element\n  attributes: {\n    'data-slate-node': 'element'\n    'data-slate-inline'?: true\n    'data-slate-void'?: true\n    dir?: 'rtl'\n    ref: any\n  }\n}\n\n/**\n * `RenderLeafProps` are passed to the `renderLeaf` handler.\n */\n\nexport interface RenderLeafProps {\n  children: any\n  leaf: Text\n  text: Text\n  attributes: {\n    'data-slate-leaf': true\n  }\n}\n\n/**\n * `EditableProps` are passed to the `<Editable>` component.\n */\n\nexport type EditableProps = {\n  decorate?: (entry: NodeEntry) => Range[]\n  onDOMBeforeInput?: (event: InputEvent) => void\n  placeholder?: string\n  readOnly?: boolean\n  role?: string\n  style?: React.CSSProperties\n  renderElement?: (props: RenderElementProps) => JSX.Element\n  renderLeaf?: (props: RenderLeafProps) => JSX.Element\n  renderPlaceholder?: (props: RenderPlaceholderProps) => JSX.Element\n  as?: React.ElementType\n} & React.TextareaHTMLAttributes<HTMLDivElement>\n\n/**\n * Editable.\n */\n\nexport const Editable = (props: EditableProps) => {\n  const {\n    autoFocus,\n    decorate = defaultDecorate,\n    onDOMBeforeInput: propsOnDOMBeforeInput,\n    placeholder,\n    readOnly = false,\n    renderElement,\n    renderLeaf,\n    renderPlaceholder = props => <DefaultPlaceholder {...props} />,\n    style = {},\n    as: Component = 'div',\n    ...attributes\n  } = props\n  const editor = useSlate()\n  const ref = useRef<HTMLDivElement>(null)\n\n  // Update internal state on each render.\n  IS_READ_ONLY.set(editor, readOnly)\n\n  // Keep track of some state for the event handler logic.\n  const state = useMemo(\n    () => ({\n      isComposing: false,\n      isDraggingInternally: false,\n      isUpdatingSelection: false,\n      latestElement: null as DOMElement | null,\n    }),\n    []\n  )\n\n  // Whenever the editor updates...\n  useIsomorphicLayoutEffect(() => {\n    // Update element-related weak maps with the DOM element ref.\n    let window\n    if (ref.current && (window = getDefaultView(ref.current))) {\n      EDITOR_TO_WINDOW.set(editor, window)\n      EDITOR_TO_ELEMENT.set(editor, ref.current)\n      NODE_TO_ELEMENT.set(editor, ref.current)\n      ELEMENT_TO_NODE.set(ref.current, editor)\n    } else {\n      NODE_TO_ELEMENT.delete(editor)\n    }\n\n    // Make sure the DOM selection state is in sync.\n    const { selection } = editor\n    const root = ReactEditor.findDocumentOrShadowRoot(editor)\n    const domSelection = root.getSelection()\n\n    if (state.isComposing || !domSelection || !ReactEditor.isFocused(editor)) {\n      return\n    }\n\n    const hasDomSelection = domSelection.type !== 'None'\n\n    // If the DOM selection is properly unset, we're done.\n    if (!selection && !hasDomSelection) {\n      return\n    }\n\n    // verify that the dom selection is in the editor\n    const editorElement = EDITOR_TO_ELEMENT.get(editor)!\n    let hasDomSelectionInEditor = false\n    if (\n      editorElement.contains(domSelection.anchorNode) &&\n      editorElement.contains(domSelection.focusNode)\n    ) {\n      hasDomSelectionInEditor = true\n    }\n\n    // If the DOM selection is in the editor and the editor selection is already correct, we're done.\n    if (hasDomSelection && hasDomSelectionInEditor && selection) {\n      const slateRange = ReactEditor.toSlateRange(editor, domSelection, {\n        exactMatch: true,\n      })\n      if (slateRange && Range.equals(slateRange, selection)) {\n        return\n      }\n    }\n\n    // when <Editable/> is being controlled through external value\n    // then its children might just change - DOM responds to it on its own\n    // but Slate's value is not being updated through any operation\n    // and thus it doesn't transform selection on its own\n    if (selection && !ReactEditor.hasRange(editor, selection)) {\n      editor.selection = ReactEditor.toSlateRange(editor, domSelection, {\n        exactMatch: false,\n      })\n      return\n    }\n\n    // Otherwise the DOM selection is out of sync, so update it.\n    const el = ReactEditor.toDOMNode(editor, editor)\n    state.isUpdatingSelection = true\n\n    const newDomRange = selection && ReactEditor.toDOMRange(editor, selection)\n\n    if (newDomRange) {\n      if (Range.isBackward(selection!)) {\n        domSelection.setBaseAndExtent(\n          newDomRange.endContainer,\n          newDomRange.endOffset,\n          newDomRange.startContainer,\n          newDomRange.startOffset\n        )\n      } else {\n        domSelection.setBaseAndExtent(\n          newDomRange.startContainer,\n          newDomRange.startOffset,\n          newDomRange.endContainer,\n          newDomRange.endOffset\n        )\n      }\n      const leafEl = newDomRange.startContainer.parentElement!\n      leafEl.getBoundingClientRect = newDomRange.getBoundingClientRect.bind(\n        newDomRange\n      )\n      scrollIntoView(leafEl, {\n        scrollMode: 'if-needed',\n        boundary: el,\n      })\n      // @ts-ignore\n      delete leafEl.getBoundingClientRect\n    } else {\n      domSelection.removeAllRanges()\n    }\n\n    setTimeout(() => {\n      // COMPAT: In Firefox, it's not enough to create a range, you also need\n      // to focus the contenteditable element too. (2016/11/16)\n      if (newDomRange && IS_FIREFOX) {\n        el.focus()\n      }\n\n      state.isUpdatingSelection = false\n    })\n  })\n\n  // The autoFocus TextareaHTMLAttribute doesn't do anything on a div, so it\n  // needs to be manually focused.\n  useEffect(() => {\n    if (ref.current && autoFocus) {\n      ref.current.focus()\n    }\n  }, [autoFocus])\n\n  // Listen on the native `beforeinput` event to get real \"Level 2\" events. This\n  // is required because React's `beforeinput` is fake and never really attaches\n  // to the real event sadly. (2019/11/01)\n  // https://github.com/facebook/react/issues/11211\n  const onDOMBeforeInput = useCallback(\n    (event: InputEvent) => {\n      if (\n        !readOnly &&\n        hasEditableTarget(editor, event.target) &&\n        !isDOMEventHandled(event, propsOnDOMBeforeInput)\n      ) {\n        const { selection } = editor\n        const { inputType: type } = event\n        const data = (event as any).dataTransfer || event.data || undefined\n\n        // These two types occur while a user is composing text and can't be\n        // cancelled. Let them through and wait for the composition to end.\n        if (\n          type === 'insertCompositionText' ||\n          type === 'deleteCompositionText'\n        ) {\n          return\n        }\n\n        event.preventDefault()\n\n        // COMPAT: For the deleting forward/backward input types we don't want\n        // to change the selection because it is the range that will be deleted,\n        // and those commands determine that for themselves.\n        if (!type.startsWith('delete') || type.startsWith('deleteBy')) {\n          const [targetRange] = (event as any).getTargetRanges()\n\n          if (targetRange) {\n            const range = ReactEditor.toSlateRange(editor, targetRange, {\n              exactMatch: false,\n            })\n\n            if (!selection || !Range.equals(selection, range)) {\n              Transforms.select(editor, range)\n            }\n          }\n        }\n\n        // COMPAT: If the selection is expanded, even if the command seems like\n        // a delete forward/backward command it should delete the selection.\n        if (\n          selection &&\n          Range.isExpanded(selection) &&\n          type.startsWith('delete')\n        ) {\n          const direction = type.endsWith('Backward') ? 'backward' : 'forward'\n          Editor.deleteFragment(editor, { direction })\n          return\n        }\n\n        switch (type) {\n          case 'deleteByComposition':\n          case 'deleteByCut':\n          case 'deleteByDrag': {\n            Editor.deleteFragment(editor)\n            break\n          }\n\n          case 'deleteContent':\n          case 'deleteContentForward': {\n            Editor.deleteForward(editor)\n            break\n          }\n\n          case 'deleteContentBackward': {\n            Editor.deleteBackward(editor)\n            break\n          }\n\n          case 'deleteEntireSoftLine': {\n            Editor.deleteBackward(editor, { unit: 'line' })\n            Editor.deleteForward(editor, { unit: 'line' })\n            break\n          }\n\n          case 'deleteHardLineBackward': {\n            Editor.deleteBackward(editor, { unit: 'block' })\n            break\n          }\n\n          case 'deleteSoftLineBackward': {\n            Editor.deleteBackward(editor, { unit: 'line' })\n            break\n          }\n\n          case 'deleteHardLineForward': {\n            Editor.deleteForward(editor, { unit: 'block' })\n            break\n          }\n\n          case 'deleteSoftLineForward': {\n            Editor.deleteForward(editor, { unit: 'line' })\n            break\n          }\n\n          case 'deleteWordBackward': {\n            Editor.deleteBackward(editor, { unit: 'word' })\n            break\n          }\n\n          case 'deleteWordForward': {\n            Editor.deleteForward(editor, { unit: 'word' })\n            break\n          }\n\n          case 'insertLineBreak':\n          case 'insertParagraph': {\n            Editor.insertBreak(editor)\n            break\n          }\n\n          case 'insertFromComposition':\n          case 'insertFromDrop':\n          case 'insertFromPaste':\n          case 'insertFromYank':\n          case 'insertReplacementText':\n          case 'insertText': {\n            if (type === 'insertFromComposition') {\n              // COMPAT: in Safari, `compositionend` is dispatched after the\n              // `beforeinput` for \"insertFromComposition\". But if we wait for it\n              // then we will abort because we're still composing and the selection\n              // won't be updated properly.\n              // https://www.w3.org/TR/input-events-2/\n              state.isComposing = false\n            }\n\n            const window = ReactEditor.getWindow(editor)\n            if (data instanceof window.DataTransfer) {\n              ReactEditor.insertData(editor, data as DataTransfer)\n            } else if (typeof data === 'string') {\n              Editor.insertText(editor, data)\n            }\n\n            break\n          }\n        }\n      }\n    },\n    [readOnly, propsOnDOMBeforeInput]\n  )\n\n  // Attach a native DOM event handler for `beforeinput` events, because React's\n  // built-in `onBeforeInput` is actually a leaky polyfill that doesn't expose\n  // real `beforeinput` events sadly... (2019/11/04)\n  // https://github.com/facebook/react/issues/11211\n  useIsomorphicLayoutEffect(() => {\n    if (ref.current && HAS_BEFORE_INPUT_SUPPORT) {\n      // @ts-ignore The `beforeinput` event isn't recognized.\n      ref.current.addEventListener('beforeinput', onDOMBeforeInput)\n    }\n\n    return () => {\n      if (ref.current && HAS_BEFORE_INPUT_SUPPORT) {\n        // @ts-ignore The `beforeinput` event isn't recognized.\n        ref.current.removeEventListener('beforeinput', onDOMBeforeInput)\n      }\n    }\n  }, [onDOMBeforeInput])\n\n  // Listen on the native `selectionchange` event to be able to update any time\n  // the selection changes. This is required because React's `onSelect` is leaky\n  // and non-standard so it doesn't fire until after a selection has been\n  // released. This causes issues in situations where another change happens\n  // while a selection is being dragged.\n  const onDOMSelectionChange = useCallback(\n    throttle(() => {\n      if (\n        !readOnly &&\n        !state.isComposing &&\n        !state.isUpdatingSelection &&\n        !state.isDraggingInternally\n      ) {\n        const root = ReactEditor.findDocumentOrShadowRoot(editor)\n        const { activeElement } = root\n        const el = ReactEditor.toDOMNode(editor, editor)\n        const domSelection = root.getSelection()\n\n        if (activeElement === el) {\n          state.latestElement = activeElement\n          IS_FOCUSED.set(editor, true)\n        } else {\n          IS_FOCUSED.delete(editor)\n        }\n\n        if (!domSelection) {\n          return Transforms.deselect(editor)\n        }\n\n        const { anchorNode, focusNode } = domSelection\n\n        const anchorNodeSelectable =\n          hasEditableTarget(editor, anchorNode) ||\n          isTargetInsideVoid(editor, anchorNode)\n\n        const focusNodeSelectable =\n          hasEditableTarget(editor, focusNode) ||\n          isTargetInsideVoid(editor, focusNode)\n\n        if (anchorNodeSelectable && focusNodeSelectable) {\n          const range = ReactEditor.toSlateRange(editor, domSelection, {\n            exactMatch: false,\n          })\n          Transforms.select(editor, range)\n        } else {\n          Transforms.deselect(editor)\n        }\n      }\n    }, 100),\n    [readOnly]\n  )\n\n  // Attach a native DOM event handler for `selectionchange`, because React's\n  // built-in `onSelect` handler doesn't fire for all selection changes. It's a\n  // leaky polyfill that only fires on keypresses or clicks. Instead, we want to\n  // fire for any change to the selection inside the editor. (2019/11/04)\n  // https://github.com/facebook/react/issues/5785\n  useIsomorphicLayoutEffect(() => {\n    const window = ReactEditor.getWindow(editor)\n    window.document.addEventListener('selectionchange', onDOMSelectionChange)\n\n    return () => {\n      window.document.removeEventListener(\n        'selectionchange',\n        onDOMSelectionChange\n      )\n    }\n  }, [onDOMSelectionChange])\n\n  const decorations = decorate([editor, []])\n\n  if (\n    placeholder &&\n    editor.children.length === 1 &&\n    Array.from(Node.texts(editor)).length === 1 &&\n    Node.string(editor) === ''\n  ) {\n    const start = Editor.start(editor, [])\n    decorations.push({\n      [PLACEHOLDER_SYMBOL]: true,\n      placeholder,\n      anchor: start,\n      focus: start,\n    })\n  }\n\n