slate-react
Version:
Tools for building completely customizable richtext editors with React.
3,777 lines • 119 kB
JavaScript
import React, { useRef, useEffect, useLayoutEffect, useContext, createContext, useMemo, useCallback, useState } from 'react';
import { Path, Node, Editor, Text as Text$1, Range, Element as Element$1, Transforms } from 'slate';
import getDirection from 'direction';
import throttle from 'lodash/throttle';
import scrollIntoView from 'scroll-into-view-if-needed';
import { isKeyHotkey } from 'is-hotkey';
import invariant from 'tiny-invariant';
import ReactDOM from 'react-dom';
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.
*/
var String = props => {
var {
isLast,
leaf,
parent,
text
} = props;
var editor = useSlateStatic();
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 /*#__PURE__*/React.createElement(ZeroWidthString, {
length: Node.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 /*#__PURE__*/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 /*#__PURE__*/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 /*#__PURE__*/React.createElement(TextString, {
isTrailing: true,
text: leaf.text
});
}
return /*#__PURE__*/React.createElement(TextString, {
text: leaf.text
});
};
/**
* Leaf strings with text in them.
*/
var TextString = props => {
var {
text,
isTrailing = false
} = props;
return /*#__PURE__*/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 /*#__PURE__*/React.createElement("span", {
"data-slate-zero-width": isLineBreak ? 'n' : 'z',
"data-slate-length": length
}, '\uFEFF', isLineBreak ? /*#__PURE__*/React.createElement("br", null) : null);
};
/**
* Two weak maps that allow us rebuild a path given a node. They are populated
* at render time such that after a render occurs we can always backtrack.
*/
var NODE_TO_INDEX = new WeakMap();
var NODE_TO_PARENT = new WeakMap();
/**
* Weak maps that allow us to go between Slate nodes and DOM nodes. These
* are used to resolve DOM event-related logic into Slate actions.
*/
var EDITOR_TO_WINDOW = new WeakMap();
var EDITOR_TO_ELEMENT = new WeakMap();
var ELEMENT_TO_NODE = new WeakMap();
var KEY_TO_ELEMENT = new WeakMap();
var NODE_TO_ELEMENT = new WeakMap();
var NODE_TO_KEY = new WeakMap();
/**
* Weak maps for storing editor-related state.
*/
var IS_READ_ONLY = new WeakMap();
var IS_FOCUSED = new WeakMap();
/**
* Weak map for associating the context `onChange` context with the plugin.
*/
var EDITOR_TO_ON_CHANGE = new WeakMap();
var EDITOR_TO_RESTORE_DOM = new WeakMap();
/**
* Symbols.
*/
var PLACEHOLDER_SYMBOL = Symbol('placeholder');
// prevent inconsistent rendering by React with IME input
var keyForString = 0;
/**
* Individual leaves in a text node with unique formatting.
*/
var Leaf = props => {
var {
leaf,
isLast,
text,
parent,
renderPlaceholder,
renderLeaf = props => /*#__PURE__*/React.createElement(DefaultLeaf, Object.assign({}, props))
} = props;
var placeholderRef = useRef(null);
useEffect(() => {
var placeholderEl = placeholderRef === null || placeholderRef === void 0 ? void 0 : placeholderRef.current;
var editorEl = document.querySelector('[data-slate-editor="true"]');
if (!placeholderEl || !editorEl) {
return;
}
editorEl.style.minHeight = "".concat(placeholderEl.clientHeight, "px");
return () => {
editorEl.style.minHeight = 'auto';
};
}, [placeholderRef, leaf]);
var children = /*#__PURE__*/React.createElement(String, {
key: keyForString++,
isLast: isLast,
leaf: leaf,
parent: parent,
text: text
});
if (leaf[PLACEHOLDER_SYMBOL]) {
var placeholderProps = {
children: leaf.placeholder,
attributes: {
'data-slate-placeholder': true,
style: {
position: 'absolute',
pointerEvents: 'none',
width: '100%',
maxWidth: '100%',
display: 'block',
opacity: '0.333',
userSelect: 'none',
textDecoration: 'none'
},
contentEditable: false,
ref: placeholderRef
}
};
children = /*#__PURE__*/React.createElement(React.Fragment, null, renderPlaceholder(placeholderProps), 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 = /*#__PURE__*/React.memo(Leaf, (prev, next) => {
return next.parent === prev.parent && next.isLast === prev.isLast && next.renderLeaf === prev.renderLeaf && next.renderPlaceholder === prev.renderPlaceholder && next.text === prev.text && next.leaf.text === prev.leaf.text && Text$1.matches(next.leaf, prev.leaf) && next.leaf[PLACEHOLDER_SYMBOL] === prev.leaf[PLACEHOLDER_SYMBOL];
});
var DefaultLeaf = props => {
var {
attributes,
children
} = props;
return /*#__PURE__*/React.createElement("span", Object.assign({}, attributes), 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_ANDROID = typeof navigator !== 'undefined' && /Android/.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);
var IS_CHROME = typeof navigator !== 'undefined' && /Chrome/i.test(navigator.userAgent); // Native `beforeInput` events don't work well with react on Chrome 75
// and older, Chrome 76+ can use `beforeInput` though.
var IS_CHROME_LEGACY = typeof navigator !== 'undefined' && /Chrome?\/(?:[0-7][0-5]|[0-6][0-9])/i.test(navigator.userAgent); // Firefox did not support `beforeInput` until `v87`.
var IS_FIREFOX_LEGACY = typeof navigator !== 'undefined' && /^(?!.*Seamonkey)(?=.*Firefox\/(?:[0-7][0-9]|[0-8][0-6])).*/i.test(navigator.userAgent); // Check if DOM is available as React does internally.
// https://github.com/facebook/react/blob/master/packages/shared/ExecutionEnvironment.js
var CAN_USE_DOM = !!(typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined'); // COMPAT: Firefox/Edge Legacy don't support the `beforeinput` event
// Chrome Legacy doesn't support `beforeinput` correctly
var HAS_BEFORE_INPUT_SUPPORT = !IS_CHROME_LEGACY && !IS_EDGE_LEGACY && // globalThis is undefined in older browsers
typeof globalThis !== 'undefined' && globalThis.InputEvent && // @ts-ignore The `getTargetRanges` property isn't recognized.
typeof globalThis.InputEvent.prototype.getTargetRanges === 'function';
/**
* Prevent warning on SSR by falling back to useEffect when DOM isn't available
*/
var useIsomorphicLayoutEffect = CAN_USE_DOM ? useLayoutEffect : useEffect;
var shallowCompare = (obj1, obj2) => Object.keys(obj1).length === Object.keys(obj2).length && Object.keys(obj1).every(key => obj2.hasOwnProperty(key) && obj1[key] === obj2[key]);
/**
* Check if a list of decorator ranges are 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 isDecoratorRangeListEqual = (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];
var rangeOwnProps = _objectWithoutProperties(range, ["anchor", "focus"]);
var otherOwnProps = _objectWithoutProperties(other, ["anchor", "focus"]);
if (!Range.equals(range, other) || range[PLACEHOLDER_SYMBOL] !== other[PLACEHOLDER_SYMBOL] || !shallowCompare(rangeOwnProps, otherOwnProps)) {
return false;
}
}
return true;
};
/**
* Text.
*/
var Text = props => {
var {
decorations,
isLast,
parent,
renderPlaceholder,
renderLeaf,
text
} = props;
var editor = useSlateStatic();
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( /*#__PURE__*/React.createElement(MemoizedLeaf, {
isLast: isLast && i === leaves.length - 1,
key: "".concat(key.id, "-").concat(i),
renderPlaceholder: renderPlaceholder,
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 /*#__PURE__*/React.createElement("span", {
"data-slate-node": "text",
ref: ref
}, children);
};
var MemoizedText = /*#__PURE__*/React.memo(Text, (prev, next) => {
return next.parent === prev.parent && next.isLast === prev.isLast && next.renderLeaf === prev.renderLeaf && next.text === prev.text && isDecoratorRangeListEqual(next.decorations, prev.decorations);
});
/**
* A React context for sharing the `selected` state of an element.
*/
var SelectedContext = /*#__PURE__*/createContext(false);
/**
* Get the current `selected` state of an element.
*/
var useSelected = () => {
return useContext(SelectedContext);
};
/**
* Element.
*/
var Element = props => {
var {
decorations,
element,
renderElement = p => /*#__PURE__*/React.createElement(DefaultElement, Object.assign({}, p)),
renderPlaceholder,
renderLeaf,
selection
} = props;
var ref = useRef(null);
var editor = useSlateStatic();
var readOnly = useReadOnly();
var isInline = editor.isInline(element);
var key = ReactEditor.findKey(editor, element);
var children = useChildren({
decorations,
node: element,
renderElement,
renderPlaceholder,
renderLeaf,
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.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.texts(element);
children = readOnly ? null : /*#__PURE__*/React.createElement(Tag, {
"data-slate-spacer": true,
style: {
height: '0',
color: 'transparent',
outline: 'none',
position: 'absolute'
}
}, /*#__PURE__*/React.createElement(MemoizedText, {
renderPlaceholder: renderPlaceholder,
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 /*#__PURE__*/React.createElement(SelectedContext.Provider, {
value: !!selection
}, renderElement({
attributes,
children,
element
}));
};
var MemoizedElement = /*#__PURE__*/React.memo(Element, (prev, next) => {
return prev.element === next.element && prev.renderElement === next.renderElement && prev.renderLeaf === next.renderLeaf && isDecoratorRangeListEqual(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 = useSlateStatic();
var Tag = editor.isInline(element) ? 'span' : 'div';
return /*#__PURE__*/React.createElement(Tag, Object.assign({}, attributes, {
style: {
position: 'relative'
}
}), children);
};
/**
* A React context for sharing the editor object.
*/
var EditorContext = /*#__PURE__*/createContext(null);
/**
* Get the current editor object from the React context.
*/
var useSlateStatic = () => {
var editor = useContext(EditorContext);
if (!editor) {
throw new Error("The `useSlateStatic` hook must be used inside the <Slate> component's context.");
}
return editor;
};
/**
* A React context for sharing the `decorate` prop of the editable.
*/
var DecorateContext = /*#__PURE__*/createContext(() => []);
/**
* Get the current `decorate` prop of the editable.
*/
var useDecorate = () => {
return useContext(DecorateContext);
};
/**
* Children.
*/
var useChildren = props => {
var {
decorations,
node,
renderElement,
renderPlaceholder,
renderLeaf,
selection
} = props;
var decorate = useDecorate();
var editor = useSlateStatic();
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( /*#__PURE__*/React.createElement(MemoizedElement, {
decorations: ds,
element: n,
key: key.id,
renderElement: renderElement,
renderPlaceholder: renderPlaceholder,
renderLeaf: renderLeaf,
selection: sel
}));
} else {
children.push( /*#__PURE__*/React.createElement(MemoizedText, {
decorations: ds,
key: key.id,
isLast: isLeafBlock && i === node.children.length - 1,
parent: node,
renderPlaceholder: renderPlaceholder,
renderLeaf: renderLeaf,
text: n
}));
}
NODE_TO_INDEX.set(n, i);
NODE_TO_PARENT.set(n, node);
}
return children;
};
/**
* 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')
};
/**
* A React context for sharing the `readOnly` state of the editor.
*/
var ReadOnlyContext = /*#__PURE__*/createContext(false);
/**
* Get the current `readOnly` state of the editor.
*/
var useReadOnly = () => {
return useContext(ReadOnlyContext);
};
/**
* A React context for sharing the editor object, in a way that re-renders the
* context whenever changes occur.
*/
var SlateContext = /*#__PURE__*/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;
};
/**
* Types.
*/
/**
* Returns the host window of a DOM node
*/
var getDefaultView = value => {
return value && value.ownerDocument && value.ownerDocument.defaultView || null;
};
/**
* Check if a DOM node is a comment node.
*/
var isDOMComment = value => {
return isDOMNode(value) && value.nodeType === 8;
};
/**
* Check if a DOM node is an element node.
*/
var isDOMElement = value => {
return isDOMNode(value) && value.nodeType === 1;
};
/**
* Check if a value is a DOM node.
*/
var isDOMNode = value => {
var window = getDefaultView(value);
return !!window && value instanceof window.Node;
};
/**
* Check if a value is a DOM selection.
*/
var isDOMSelection = value => {
var window = value && value.anchorNode && getDefaultView(value.anchorNode);
return !!window && value instanceof window.Selection;
};
/**
* Check if a DOM node is an element node.
*/
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 = 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 index = isLast ? offset - 1 : offset;
[node, index] = getEditableChildAndIndex(node, index, isLast ? 'backward' : 'forward'); // If the editable child found is in front of input offset, we instead seek to its end
isLast = index < offset; // If the node has children, traverse until we have a leaf node. Leaf nodes
// can be either text nodes, or other void DOM nodes.
while (isDOMElement(node) && node.childNodes.length) {
var i = isLast ? node.childNodes.length - 1 : 0;
node = getEditableChild(node, i, isLast ? 'backward' : 'forward');
} // Determine the new offset inside the text node.
offset = isLast && node.textContent != null ? node.textContent.length : 0;
} // Return the node and offset.
return [node, offset];
};
/**
* Determines wether the active element is nested within a shadowRoot
*/
var hasShadowRoot = () => {
return !!(window.document.activeElement && window.document.activeElement.shadowRoot);
};
/**
* Get the nearest editable child and index at `index` in a `parent`, preferring
* `direction`.
*/
var getEditableChildAndIndex = (parent, index, direction) => {
var {
childNodes
} = parent;
var child = childNodes[index];
var i = index;
var triedForward = false;
var triedBackward = false; // While the child is a comment node, or an element node with no children,
// keep iterating to find a sibling non-void, non-comment node.
while (isDOMComment(child) || isDOMElement(child) && child.childNodes.length === 0 || isDOMElement(child) && child.getAttribute('contenteditable') === 'false') {
if (triedForward && triedBackward) {
break;
}
if (i >= childNodes.length) {
triedForward = true;
i = index - 1;
direction = 'backward';
continue;
}
if (i < 0) {
triedBackward = true;
i = index + 1;
direction = 'forward';
continue;
}
child = childNodes[i];
index = i;
i += direction === 'forward' ? 1 : -1;
}
return [child, index];
};
/**
* Get the nearest editable child at `index` in a `parent`, preferring
* `direction`.
*/
var getEditableChild = (parent, index, direction) => {
var [child] = getEditableChildAndIndex(parent, index, direction);
return child;
};
/**
* Get a plaintext representation of the content of a node, accounting for block
* elements which get a newline appended.
*
* The domNode must be attached to the DOM.
*/
var getPlainText = domNode => {
var text = '';
if (isDOMText(domNode) && domNode.nodeValue) {
return domNode.nodeValue;
}
if (isDOMElement(domNode)) {
for (var childNode of Array.from(domNode.childNodes)) {
text += getPlainText(childNode);
}
var display = getComputedStyle(domNode).getPropertyValue('display');
if (display === 'block' || display === 'list' || domNode.tagName === 'BR') {
text += '\n';
}
}
return text;
};
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; }
/**
* Editable.
*/
var Editable = props => {
var {
autoFocus,
decorate = defaultDecorate,
onDOMBeforeInput: propsOnDOMBeforeInput,
placeholder,
readOnly = false,
renderElement,
renderLeaf,
renderPlaceholder = props => /*#__PURE__*/React.createElement(DefaultPlaceholder, Object.assign({}, props)),
style = {},
as: Component = 'div'
} = props,
attributes = _objectWithoutProperties(props, ["autoFocus", "decorate", "onDOMBeforeInput", "placeholder", "readOnly", "renderElement", "renderLeaf", "renderPlaceholder", "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,
isDraggingInternally: false,
isUpdatingSelection: false,
latestElement: null
}), []); // Whenever the editor updates...
useIsomorphicLayoutEffect(() => {
// Update element-related weak maps with the DOM element ref.
var window;
if (ref.current && (window = getDefaultView(ref.current))) {
EDITOR_TO_WINDOW.set(editor, window);
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);
} // Make sure the DOM selection state is in sync.
var {
selection
} = editor;
var root = ReactEditor.findDocumentOrShadowRoot(editor);
var domSelection = root.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;
} // verify that the dom selection is in the editor
var editorElement = EDITOR_TO_ELEMENT.get(editor);
var hasDomSelectionInEditor = false;
if (editorElement.contains(domSelection.anchorNode) && editorElement.contains(domSelection.focusNode)) {
hasDomSelectionInEditor = true;
} // If the DOM selection is in the editor and the editor selection is already correct, we're done.
if (hasDomSelection && hasDomSelectionInEditor && selection) {
var slateRange = ReactEditor.toSlateRange(editor, domSelection, {
exactMatch: true
});
if (slateRange && Range.equals(slateRange, selection)) {
return;
}
} // when <Editable/> is being controlled through external value
// then its children might just change - DOM responds to it on its own
// but Slate's value is not being updated through any operation
// and thus it doesn't transform selection on its own
if (selection && !ReactEditor.hasRange(editor, selection)) {
editor.selection = ReactEditor.toSlateRange(editor, domSelection, {
exactMatch: false
});
return;
} // Otherwise the DOM selection is out of sync, so update it.
var el = ReactEditor.toDOMNode(editor, editor);
state.isUpdatingSelection = true;
var newDomRange = selection && ReactEditor.toDOMRange(editor, selection);
if (newDomRange) {
if (Range.isBackward(selection)) {
domSelection.setBaseAndExtent(newDomRange.endContainer, newDomRange.endOffset, newDomRange.startContainer, newDomRange.startOffset);
} else {
domSelection.setBaseAndExtent(newDomRange.startContainer, newDomRange.startOffset, newDomRange.endContainer, newDomRange.endOffset);
}
var leafEl = newDomRange.startContainer.parentElement;
leafEl.getBoundingClientRect = newDomRange.getBoundingClientRect.bind(newDomRange);
scrollIntoView(leafEl, {
scrollMode: 'if-needed',
boundary: el
}); // @ts-ignore
delete leafEl.getBoundingClientRect;
} else {
domSelection.removeAllRanges();
}
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, {
exactMatch: false
});
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')) {
var direction = type.endsWith('Backward') ? 'backward' : 'forward';
Editor.deleteFragment(editor, {
direction
});
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 (type === 'insertFromComposition') {
// COMPAT: in Safari, `compositionend` is dispatched after the
// `beforeinput` for "insertFromComposition". But if we wait for it
// then we will abort because we're still composing and the selection
// won't be updated properly.
// https://www.w3.org/TR/input-events-2/
state.isComposing = false;
}
var window = ReactEditor.getWindow(editor);
if (data instanceof window.DataTransfer) {
ReactEditor.insertData(editor, data);
} else if (typeof data === 'string') {
Editor.insertText(editor, data);
}
break;
}
}
}
}, [readOnly, propsOnDOMBeforeInput]); // 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 && HAS_BEFORE_INPUT_SUPPORT) {
// @ts-ignore The `beforeinput` event isn't recognized.
ref.current.addEventListener('beforeinput', onDOMBeforeInput);
}
return () => {
if (ref.current && HAS_BEFORE_INPUT_SUPPORT) {
// @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 && !state.isDraggingInternally) {
var root = ReactEditor.findDocumentOrShadowRoot(editor);
var {
activeElement
} = root;
var el = ReactEditor.toDOMNode(editor, editor);
var domSelection = root.getSelection();
if (activeElement === el) {
state.latestElement = activeElement;
IS_FOCUSED.set(editor, true);
} else {
IS_FOCUSED.delete(editor);
}
if (!domSelection) {
return Transforms.deselect(editor);
}
var {
anchorNode,
focusNode
} = domSelection;
var anchorNodeSelectable = hasEditableTarget(editor, anchorNode) || isTargetInsideVoid(editor, anchorNode);
var focusNodeSelectable = hasEditableTarget(editor, focusNode) || isTargetInsideVoid(editor, focusNode);
if (anchorNodeSelectable && focusNodeSelectable) {
var range = ReactEditor.toSlateRange(editor, domSelection, {
exactMatch: false
});
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(() => {
var window = ReactEditor.getWindow(editor);
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.texts(editor)).length === 1 && Node.string(editor) === '') {
var start = Editor.start(editor, []);
decorations.push({
[PLACEHOLDER_SYMBOL]: true,
placeholder,
anchor: start,
focus: start
});
}
return /*#__PURE__*/React.createElement(ReadOnlyContext.Provider, {
value: readOnly
}, /*#__PURE__*/React.createElement(DecorateContext.Provider, {
value: decorate
}, /*#__PURE__*/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 ? false : attributes.spellCheck,
autoCorrect: !HAS_BEFORE_INPUT_SUPPORT ? 'false' : attributes.autoCorrect,
autoCapitalize: !HAS_BEFORE_INPUT_SUPPORT ? 'false' : attributes.autoCapitalize,
"data-slate-editor": true,
"data-slate-node": "value",
contentEditable: readOnly ? undefined : true,
suppressContentEditableWarning: true,
ref: ref,
style: _objectSpread({
// Allow positioning relative to the editable element.
position: 'relative',
// 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();
if (!state.isComposing) {
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;
}
var window = ReactEditor.getWindow(editor); // 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.
var root = ReactEditor.findDocumentOrShadowRoot(editor);
if (state.latestElement === root.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);
var end = Editor.end(editor, path);
var startVoid = Editor.void(editor, {
at: _start
});
var endVoid = Editor.void(editor, {
at: end
});
if (startVoid && endVoid && Path.equals(startVoid[1], endVoid[1])) {
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_LEGACY && event.data) {
Editor.insertText(editor, event.data);
}
}
}, [attributes.onCompositionEnd]),
onCompositionUpdate: useCallback(event => {
if (hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onCompositionUpdate)) {
state.isComposing = true;
}
}, [attributes.onCompositionUpdate]),
onCompositionStart: useCallback(event => {
if (hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onCompositionStart)) {
var {
selection
} = editor;
if (selection && Range.isExpanded(selection)) {
Editor.deleteFragment(editor);
}
}
}, [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) {
if (Range.isExpanded(selection)) {
Editor.deleteFragment(editor);
} else {
var node = Node.parent(editor, selection.anchor.path);
if (Editor.isVoid(editor, node)) {
Transforms.delete(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.isVoid(editor, node) || Editor.void(editor, {
at: path,
voids: true
}); // 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);
}
state.isDraggingInternally = true;
ReactEditor.setFragmentData(editor, event.dataTransfer);
}
}, [attributes.onDragStart]),
onDrop: useCallback(event => {
if (!readOnly && hasTarget(editor, event.target) && !isEventHandled(event, attributes.onDrop)) {
event.preventDefault(); // Keep a reference to the dragged range before updating selection
var draggedRange = editor.selection; // Find the range where the drop happened
var range = ReactEditor.findEventRange(editor, event);
var data = event.dataTransfer;
Transforms.select(editor, range);
if (state.isDraggingInternally) {
if (draggedRange) {
Transforms.delete(editor, {
at: draggedRange
});
}
state.isDraggingInternally = false;
}
ReactEditor.insertData(editor, data); // When dragging from another source into the editor, it's possible
// that the current editor does not have focus.
if (!ReactEditor.isFocused(editor)) {
ReactEditor.focus(editor);
}
}
}, [readOnly, attributes.onDrop]),
onDragEnd: useCallback(event => {
// When dropping on a different droppable element than the current editor,
// `onDrop` is not called. So we need to clean up in `onDragEnd` instead.
// Note: `onDragEnd` is only called when `onDrop` is not called
if (!readOnly && state.isDraggingInternally && hasTarget(editor, event.target) && !isEventHandled(event, attributes.onDragEnd)) {
state.isDraggingInternally = false;
}
}, [readOnly, attributes.onDragEnd]),
onFocus: useCallback(event => {
if (!readOnly && !state.isUpdatingSelection && hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onFocus)) {
var el = ReactEditor.toDOMNode(editor, editor);
var root = ReactEditor.findDocumentOrShadowRoot(editor);
state.latestElement = root.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;
var element = editor.children[selection !== null ? selection.focus.path[0] : 0];
var isRTL = getDirection(Node.string(element)) === 'rtl'; // 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();
var maybeHistoryEditor = editor;
if (typeof maybeHistoryEditor.redo === 'function') {
maybeHistoryEditor.redo();
}
return;
}
if (Hotkeys.isUndo(nativeEvent)) {
event.preventDefault();
var _maybeHistoryEditor = editor;
if (typeof _maybeHistoryEditor.undo === 'function') {
_maybeHistoryEditor.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: !isRTL
});
} else {
Transforms.collapse(editor, {
edge: 'start'
});
}
return;
}
if (Hotkeys.isMoveForward(nativeEvent)) {
event.preventDefault();
if (selection && Range.isCollapsed(selection)) {
Transforms.move(editor, {
reverse: isRTL
});
} else {
Transforms.collapse(editor, {
edge: 'end'
});
}
return;
}
if (Hotkeys.isMoveWordBackward(nativeEvent)) {
event.preventDefault();
if (selection && Range.isExpanded(selection)) {
Transforms.collapse(editor, {
edge: 'focus'
});
}
Transforms.move(editor, {
unit: 'word',
reverse: !isRTL
});
return;
}
if (Hotkeys.isMoveWordForward(nativeEvent)) {
event.preventDefault();
if (selection && Range.isExpanded(selection)) {
Transforms.collapse(editor, {
edge: 'focus'
});
}
Transforms.move(editor, {
unit: 'word',
reverse: isRTL
});
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, {
direction: 'backward'
});
} else {
Editor.deleteBackward(editor);
}
return;
}
if (Hotkeys.isDeleteForward(nativeEvent)) {
event.preventDefault();
if (selection && Range.isExpanded(selection)) {
Editor.deleteFragment(editor, {
direction: 'forward'
});
} else {
Editor.deleteForward(editor);
}
return;
}
if (Hotkeys.isDeleteLineBackward(nativeEvent)) {
event.preventDefault();
if (selection && Range.isExpanded(selection)) {
Editor.deleteFragment(editor, {
direction: 'backward'
});
} else {
Editor.deleteBackward(editor, {
unit: 'line'
});
}
return;
}
if (Hotkeys.isDeleteLineForward(nativeEvent)) {
event.preventDefault();
if (selection && Range.isExpanded(selection)) {
Editor.deleteFragment(editor, {
direction: 'forward'
});
} else {
Editor.deleteForward(editor, {
unit: 'line'
});
}
return;
}
if (Hotkeys.isDeleteWordBackward(nativeEvent)) {
event.preventDefault();
if (selection && Range.isExpanded(selection)) {
Editor.deleteFragment(editor, {
direction: 'backward'
});
} else {
Editor.deleteBackward(editor, {
unit: 'word'
});
}
return;
}
if (Hotkeys.isDeleteWordForward(nativeEvent)) {
event.preventDefault();
if (selection && Range.isExpanded(selection)) {
Editor.deleteFragment(editor, {
direction: 'forward'
});
} else {
Editor.deleteForward(editor, {
unit: 'word'
});
}
return;
}
} else {
if (IS_CHROME) {
// COMPAT: Chrome supports `beforeinput` event but does not fire
// an event when deleting backwards in a selected void inline node
if (selection && (Hotkeys.isDeleteBackward(nativeEvent) || Hotkeys.isDeleteForward(nativeEvent)) && Range.isCollapsed(selection)) {
var currentNode = Node.parent(editor, selection.anchor.path);
if (Element$1.isElement(currentNode) && Editor.isVoid(editor, currentNode) && Editor.isInline(editor, currentNode)) {
event.preventDefault();
Transforms.delete(editor, {
unit: 'block'
});
return;
}
}
}
}
}
}, [readOnly, attributes.onKeyDown]),
onPaste: useCallback(event => {
if (!readOnly && hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onPaste)) {
// COMPAT: Certain browsers don't support the `beforeinput` event, so we
// fall back to React's `onPaste` here instead.
// COMPAT: Firefox, Chrome and Safari don't emit `beforeinput` events
// when "paste without formatting" is used, so fallback. (2020/02/20)
if (!HAS_BEFORE_INPUT_SUPPORT || isPlainTextOnlyPaste(event.nativeEvent)) {
event.preventDefault();
ReactEditor.insertData(editor, event.clipboardData);
}
}
}, [readOnly, attributes.onPaste])
}), useChildren({
decorations,
node: editor,
renderElement,
renderPlaceholder,
renderLeaf,
selection: editor.selection
}))));
};
/**
* The default placeholder element
*/
var DefaultPlaceholder = (_ref) => {
var {
attributes,
children
} = _ref;
return /*#__PURE__*/React.createElement("span", Object.assign({}, attributes), children);
};
/**
* 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 the target is inside void and in the editor.
*/
var isTargetInsideVoid = (editor, target) => {
var slateNode = hasTarget(editor, target) && ReactEditor.toSlateNode(editor, target);
return Editor.isVoid(editor, slateNode);
};
/**
* Check if an event is overrided by a handler.
*/
var isEventHandled = (event, handler) => {
if (!handler) {
return false;
} // The custom event handler may return a boolean to specify whether the event
// shall be treated as being handled or not.
var shouldTreatEventAsHandled = handler(event);
if (shouldTreatEventAsHandled != null) {
return shouldTreatEventAsHandled;
}
return event.isDefaultPrevented() || event.isPropagationStopped();
};
/**
* Check if a DOM event is overrided by a handler.
*/
var isDOMEventHandled = (event, handler) => {
if (!handler) {
return false;
} // The custom event handler may return a boolean to specify whether the event
// shall be treated as being handled or not.
var shouldTreatEventAsHandled = handler(event);
if (shouldTreatEventAsHandled != null) {
return shouldTreatEventAsHandled;
}
return event.defaultPrevented;
};
/**
* 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.
*/
class Key {
constructor() {
this.id = "".concat(n++);
}
}
var ReactEditor = {
/**
* Return the host window of the current editor.
*/
getWindow(editor) {
var window = EDITOR_TO_WINDOW.get(editor);
if (!window) {
throw new Error('Unable to find a host window element for this editor');
}
return window;
},
/**
* Find a key for a Slate node.
*/
findKey(editor, node) {
var key = NODE_TO_KEY.get(node);
if (!key) {
key = new Key();
NODE_TO_KEY.set(node, key);
}
return key;
},
/**
* Find the path of Slate node.
*/
findPath(editor, node) {
var path = [];
var child = node;
while (true) {
var parent = NODE_TO_PARENT.get(child);
if (parent == null) {
if (Editor.isEditor(child)) {
return path;
} else {
break;
}
}
var i = NODE_TO_INDEX.get(child);
if (i == null) {
break;
}
path.unshift(i);
child = parent;
}
throw new Error("Unable to find the path for Slate node: ".concat(JSON.stringify(node)));
},
/**
* Find the DOM node that implements DocumentOrShadowRoot for the editor.
*/
findDocumentOrShadowRoot(editor) {
var el = ReactEditor.toDOMNode(editor, editor);
var root = el.getRootNode(); // The below exception will always be thrown for iframes because the document inside an iframe
// does not inherit it's prototype from the parent document, therefore we return early
if (el.ownerDocument !== document) return el.ownerDocument;
if (!(root instanceof Document || root instanceof ShadowRoot)) throw new Error("Unable to find DocumentOrShadowRoot for editor element: ".concat(el)); // COMPAT: Only Chrome implements the DocumentOrShadowRoot mixin for
// ShadowRoot; other browsers still implement it on the Document
// interface. (2020/08/08)
// https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot#Properties
if (root.getSelection === undefined && el.ownerDocument !== null) return el.ownerDocument;
return root;
},
/**
* Check if the editor is focused.
*/
isFocused(editor) {
return !!IS_FOCUSED.get(editor);
},
/**
* Check if the editor is in read-only mode.
*/
isReadOnly(editor) {
return !!IS_READ_ONLY.get(editor);
},
/**
* Blur the editor.
*/
blur(editor) {
var el = ReactEditor.toDOMNode(editor, editor);
var root = ReactEditor.findDocumentOrShadowRoot(editor);
IS_FOCUSED.set(editor, false);
if (root.activeElement === el) {
el.blur();
}
},
/**
* Focus the editor.
*/
focus(editor) {
var el = ReactEditor.toDOMNode(editor, editor);
var root = ReactEditor.findDocumentOrShadowRoot(editor);
IS_FOCUSED.set(editor, true);
if (root.activeElement !== el) {
el.focus({
preventScroll: true
});
}
},
/**
* Deselect the editor.
*/
deselect(editor) {
var el = ReactEditor.toDOMNode(editor, editor);
var {
selection
} = editor;
var root = ReactEditor.findDocumentOrShadowRoot(editor);
var domSelection = root.getSelection();
if (domSelection && domSelection.rangeCount > 0) {
domSelection.removeAllRanges();
}
if (selection) {
Transforms.deselect(editor);
}
},
/**
* Check if a DOM node is within the editor.
*/
hasDOMNode(editor, target) {
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
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 {
targetEl = isDOMElement(target) ? target : target.parentElement;
} catch (err) {
if (!err.message.includes('Permission denied to access property "nodeType"')) {
throw err;
}
}
if (!targetEl) {
return false;
}
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(editor, node) {
var domNode = Editor.isEditor(node) ? EDITOR_TO_ELEMENT.get(editor) : KEY_TO_ELEMENT.get(ReactEditor.findKey(editor, node));
if (!domNode) {
throw new Error("Cannot resolve a DOM node from Slate node: ".concat(JSON.stringify(node)));
}
return domNode;
},
/**
* Find a native DOM selection point from a Slate point.
*/
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, {
at: point
})) {
point = {
path: point.path,
offset: 0
};
} // For each leaf, we need to isolate its content, which means filtering
// to its direct text and zero-width spans. (We have to filter out any
// other siblings that may have been rendered alongside them.)
var selector = "[data-slate-string], [data-slate-zero-width]";
var texts = Array.from(el.querySelectorAll(selector));
var start = 0;
for (var text of texts) {
var domNode = text.childNodes[0];
if (domNode == null || domNode.textContent == null) {
continue;
}
var {
length
} = domNode.textContent;
var attr = text.getAttribute('data-slate-length');
var trueLength = attr == null ? length : parseInt(attr, 10);
var end = start + trueLength;
if (point.offset <= end) {
var offset = Math.min(length, Math.max(0, point.offset - start));
domPoint = [domNode, offset];
break;
}
start = end;
}
if (!domPoint) {
throw new Error("Cannot resolve a DOM point from Slate point: ".concat(JSON.stringify(point)));
}
return domPoint;
},
/**
* Find a native DOM range from a Slate `range`.
*
* Notice: the returned range will always be ordinal regardless of the direction of Slate `range` due to DOM API limit.
*
* there is no way to create a reverse DOM Range using Range.setStart/setEnd
* according to https://dom.spec.whatwg.org/#concept-range-bp-set.
*/
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 window = ReactEditor.getWindow(editor);
var domRange = window.document.createRange();
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(editor, domNode) {
var domEl = isDOMElement(domNode) ? domNode : domNode.parentElement;
if (domEl && !domEl.hasAttribute('data-slate-node')) {
domEl = domEl.closest("[data-slate-node]");
}
var node = domEl ? ELEMENT_TO_NODE.get(domEl) : null;
if (!node) {
throw new Error("Cannot resolve a Slate node from DOM node: ".concat(domEl));
}
return node;
},
/**
* Get the target range from a DOM `event`.
*/
findEventRange(editor, event) {
if ('nativeEvent' in event) {
event = event.nativeEvent;
}
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));
}
var node = ReactEditor.toSlateNode(editor, event.target);
var path = ReactEditor.findPath(editor, node); // If the drop target is inside a void node, move it into either the
// next or previous node, depending on which side the `x` and `y`
// coordinates are closest to.
if (Editor.isVoid(editor, node)) {
var rect = target.getBoundingClientRect();
var isPrev = editor.isInline(node) ? x - rect.left < rect.left + rect.width - x : y - rect.top < rect.top + rect.height - y;
var edge = Editor.point(editor, path, {
edge: isPrev ? 'start' : 'end'
});
var point = isPrev ? Editor.before(editor, edge) : Editor.after(editor, edge);
if (point) {
var _range = Editor.range(editor, point);
return _range;
}
} // Else resolve a range from the caret position where the drop occured.
var domRange;
var {
document
} = window; // COMPAT: In Firefox, `caretRangeFromPoint` doesn't exist. (2016/07/25)
if (document.caretRangeFromPoint) {
domRange = document.caretRangeFromPoint(x, y);
} else {
var position = document.caretPositionFromPoint(x, y);
if (position) {
domRange = document.createRange();
domRange.setStart(position.offsetNode, position.offset);
domRange.setEnd(position.offsetNode, position.offset);
}
}
if (!domRange) {
throw new Error("Cannot resolve a Slate range from a DOM event: ".concat(event));
} // Resolve a Slate range from the DOM range.
var range = ReactEditor.toSlateRange(editor, domRange, {
exactMatch: false
});
return range;
},
/**
* Find a Slate point from a DOM selection's `domNode` and `domOffset`.
*/
toSlatePoint(editor, domPoint, exactMatch) {
var [nearestNode, nearestOffset] = exactMatch ? domPoint : normalizeDOMPoint(domPoint);
var parentNode = nearestNode.parentNode;
var textNode = null;
var offset = 0;
if (parentNode) {
var voidNode = parentNode.closest('[data-slate-void="true"]');
var leafNode = parentNode.closest('[data-slate-leaf]');
var domNode = null; // Calculate how far into the text node the `nearestNode` is, so that we
// can determine what the offset relative to the text node is.
if (leafNode) {
textNode = leafNode.closest('[data-slate-node="text"]');
var _window = ReactEditor.getWindow(editor);
var range = _window.document.createRange();
range.setStart(textNode, 0);
range.setEnd(nearestNode, nearestOffset);
var contents = range.cloneContents();
var removals = [...Array.prototype.slice.call(contents.querySelectorAll('[data-slate-zero-width]')), ...Array.prototype.slice.call(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
// attempts to reposition its cursor to match the native position. Use
// textContent.length instead.
// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10291116/
offset = contents.textContent.length;
domNode = textNode;
} else if (voidNode) {
// For void nodes, the element with the offset key will be a cousin, not an
// ancestor, so find it by going down from the nearest void parent.
leafNode = voidNode.querySelector('[data-slate-leaf]'); // COMPAT: In read-only editors the leaf is not rendered.
if (!leafNode) {
offset = 1;
} else {
textNode = leafNode.closest('[data-slate-node="text"]');
domNode = leafNode;
offset = domNode.textContent.length;
domNode.querySelectorAll('[data-slate-zero-width]').forEach(el => {
offset -= el.textContent.length;
});
}
} // COMPAT: If the parent node is a Slate zero-width space, editor is
// because the text node should have no characters. However, during IME
// composition the ASCII characters will be prepended to the zero-width
// space, so subtract 1 from the offset to account for the zero-width
// space character.
if (domNode && offset === domNode.textContent.length && parentNode.hasAttribute('data-slate-zero-width')) {
offset--;
}
}
if (!textNode) {
if (exactMatch) {
return null;
}
throw new Error("Cannot resolve a Slate point from DOM point: ".concat(domPoint));
} // COMPAT: If someone is clicking from one Slate editor into another,
// the select event fires twice, once for the old editor's `element`
// first, and then afterwards for the correct `element`. (2017/03/03)
var slateNode = ReactEditor.toSlateNode(editor, textNode);
var path = ReactEditor.findPath(editor, slateNode);
return {
path,
offset
};
},
/**
* Find a Slate range from a DOM range or selection.
*/
toSlateRange(editor, domRange, options) {
var {
exactMatch
} = options;
var el = isDOMSelection(domRange) ? domRange.anchorNode : domRange.startContainer;
var anchorNode;
var anchorOffset;
var focusNode;
var focusOffset;
var isCollapsed;
if (el) {
if (isDOMSelection(domRange)) {
anchorNode = domRange.anchorNode;
anchorOffset = domRange.anchorOffset;
focusNode = domRange.focusNode;
focusOffset = domRange.focusOffset; // COMPAT: There's a bug in chrome that always returns `true` for
// `isCollapsed` for a Selection that comes from a ShadowRoot.
// (2020/08/08)
// https://bugs.chromium.org/p/chromium/issues/detail?id=447523
if (IS_CHROME && hasShadowRoot()) {
isCollapsed = domRange.anchorNode === domRange.focusNode && domRange.anchorOffset === domRange.focusOffset;
} else {
isCollapsed = domRange.isCollapsed;
}
} else {
anchorNode = domRange.startContainer;
anchorOffset = domRange.startOffset;
focusNode = domRange.endContainer;
focusOffset = domRange.endOffset;
isCollapsed = domRange.collapsed;
}
}
if (anchorNode == null || focusNode == null || anchorOffset == null || focusOffset == null) {
throw new Error("Cannot resolve a Slate range from DOM range: ".concat(domRange));
}
var anchor = ReactEditor.toSlatePoint(editor, [anchorNode, anchorOffset], exactMatch);
if (!anchor) {
return null;
}
var focus = isCollapsed ? anchor : ReactEditor.toSlatePoint(editor, [focusNode, focusOffset], exactMatch);
if (!focus) {
return null;
}
return {
anchor,
focus
};
},
hasRange(editor, range) {
var {
anchor,
focus
} = range;
return Editor.hasPath(editor, anchor.path) && Editor.hasPath(editor, focus.path);
}
};
/**
* Returns the number of characters that are the same at the beginning of the
* String.
*
* @param prev the previous text
* @param next the next text
* @returns the offset of the start of the difference; null if there is no difference
*/
function getDiffStart(prev, next) {
var length = Math.min(prev.length, next.length);
for (var i = 0; i < length; i++) {
if (prev.charAt(i) !== next.charAt(i)) return i;
}
if (prev.length !== next.length) return length;
return null;
}
/**
* Returns the number of characters that are the same at the end of the String
* up to `max`. Max prevents double-counting characters when there are
* multiple duplicate characters around the diff area.
*
* @param prev the previous text
* @param next the next text
* @param max the max length to test.
* @returns number of characters that are the same at the end of the string
*/
function getDiffEnd(prev, next, max) {
var prevLength = prev.length;
var nextLength = next.length;
var length = Math.min(prevLength, nextLength, max);
for (var i = 0; i < length; i++) {
var prevChar = prev.charAt(prevLength - i - 1);
var nextChar = next.charAt(nextLength - i - 1);
if (prevChar !== nextChar) return i;
}
if (prev.length !== next.length) return length;
return null;
}
/**
* Takes two strings and returns an object representing two offsets. The
* first, `start` represents the number of characters that are the same at
* the front of the String. The `end` represents the number of characters
* that are the same at the end of the String.
*
* Returns null if they are identical.
*
* @param prev the previous text
* @param next the next text
* @returns the difference text range; null if there are no differences.
*/
function getDiffOffsets(prev, next) {
if (prev === next) return null;
var start = getDiffStart(prev, next);
if (start === null) return null;
var maxEnd = Math.min(prev.length - start, next.length - start);
var end = getDiffEnd(prev, next, maxEnd);
if (end === null) return null;
return {
start,
end
};
}
/**
* Takes a text string and returns a slice from the string at the given text range
*
* @param text the text
* @param offsets the text range
* @returns the text slice at text range
*/
function sliceText(text, offsets) {
return text.slice(offsets.start, text.length - offsets.end);
}
/**
* Takes two strings and returns a smart diff that can be used to describe the
* change in a way that can be used as operations like inserting, removing or
* replacing text.
*
* @param prev the previous text
* @param next the next text
* @returns the text difference
*/
function diffText(prev, next) {
if (prev === undefined || next === undefined) return null;
var offsets = getDiffOffsets(prev, next);
if (offsets == null) return null;
var insertText = sliceText(next, offsets);
var removeText = sliceText(prev, offsets);
return {
start: offsets.start,
end: prev.length - offsets.end,
insertText,
removeText
};
}
function combineInsertedText(insertedText) {
return insertedText.reduce((acc, _ref) => {
var {
text
} = _ref;
return "".concat(acc).concat(text.insertText);
}, '');
}
function getTextInsertion(editor, domNode) {
var node = ReactEditor.toSlateNode(editor, domNode);
if (!Text$1.isText(node)) {
return undefined;
}
var prevText = node.text;
var nextText = domNode.textContent; // textContent will pad an extra \n when the textContent ends with an \n
if (nextText.endsWith('\n')) {
nextText = nextText.slice(0, nextText.length - 1);
} // If the text is no different, there is no diff.
if (nextText !== prevText) {
var textDiff = diffText(prevText, nextText);
if (textDiff !== null) {
var textPath = ReactEditor.findPath(editor, node);
return {
text: textDiff,
path: textPath
};
}
}
return undefined;
}
function normalizeTextInsertionRange(editor, range, _ref2) {
var {
path,
text
} = _ref2;
var insertionRange = {
anchor: {
path,
offset: text.start
},
focus: {
path,
offset: text.end
}
};
if (!range || !Range.isCollapsed(range)) {
return insertionRange;
}
var {
insertText,
removeText
} = text;
var isSingleCharacterInsertion = insertText.length === 1 || removeText.length === 1;
/**
* This code handles edge cases that arise from text diffing when the
* inserted or removed character is a single character, and the character
* right before or after the anchor is the same as the one being inserted or
* removed.
*
* Take this example: hello|o
*
* If another `o` is inserted at the selection's anchor in the example above,
* it should be inserted at the anchor, but using text diffing, we actually
* detect that the character was inserted after the second `o`:
*
* helloo[o]|
*
* Instead, in these very specific edge cases, we assume that the character
* needs to be inserted after the anchor rather than where the diff was found:
*
* hello[o]|o
*/
if (isSingleCharacterInsertion && Path.equals(range.anchor.path, path)) {
var [_text] = Array.from(Editor.nodes(editor, {
at: range,
match: Text$1.isText
}));
if (_text) {
var [node] = _text;
var {
anchor
} = range;
var characterBeforeAnchor = node.text[anchor.offset - 1];
var characterAfterAnchor = node.text[anchor.offset];
if (insertText.length === 1 && insertText === characterAfterAnchor) {
// Assume text should be inserted at the anchor
return range;
}
if (removeText.length === 1 && removeText === characterBeforeAnchor) {
// Assume text should be removed right before the anchor
return {
anchor: {
path,
offset: anchor.offset - 1
},
focus: {
path,
offset: anchor.offset
}
};
}
}
}
return insertionRange;
}
function gatherMutationData(editor, mutations) {
var addedNodes = [];
var removedNodes = [];
var insertedText = [];
var characterDataMutations = [];
mutations.forEach(mutation => {
switch (mutation.type) {
case 'childList':
{
if (mutation.addedNodes.length) {
mutation.addedNodes.forEach(addedNode => {
addedNodes.push(addedNode);
});
}
mutation.removedNodes.forEach(removedNode => {
removedNodes.push(removedNode);
});
break;
}
case 'characterData':
{
characterDataMutations.push(mutation); // Changes to text nodes should consider the parent element
var {
parentNode
} = mutation.target;
if (!parentNode) {
return;
}
var textInsertion = getTextInsertion(editor, parentNode);
if (!textInsertion) {
return;
} // If we've already detected a diff at that path, we can return early
if (insertedText.some((_ref) => {
var {
path
} = _ref;
return Path.equals(path, textInsertion.path);
})) {
return;
} // Add the text diff to the array of detected text insertions that need to be reconciled
insertedText.push(textInsertion);
}
}
});
return {
addedNodes,
removedNodes,
insertedText,
characterDataMutations
};
}
/**
* In general, when a line break occurs, there will be more `addedNodes` than `removedNodes`.
*
* This isn't always the case however. In some cases, there will be more `removedNodes` than
* `addedNodes`.
*
* To account for these edge cases, the most reliable strategy to detect line break mutations
* is to check whether a new block was inserted of the same type as the current block.
*/
var isLineBreak = (editor, _ref2) => {
var {
addedNodes
} = _ref2;
var {
selection
} = editor;
var parentNode = selection ? Node.parent(editor, selection.anchor.path) : null;
var parentDOMNode = parentNode ? ReactEditor.toDOMNode(editor, parentNode) : null;
if (!parentDOMNode) {
return false;
}
return addedNodes.some(addedNode => addedNode instanceof HTMLElement && addedNode.tagName === (parentDOMNode === null || parentDOMNode === void 0 ? void 0 : parentDOMNode.tagName));
};
/**
* So long as we check for line break mutations before deletion mutations,
* we can safely assume that a set of mutations was a deletion if there are
* removed nodes.
*/
var isDeletion = (_, _ref3) => {
var {
removedNodes
} = _ref3;
return removedNodes.length > 0;
};
/**
* If the selection was expanded and there are removed nodes,
* the contents of the selection need to be replaced with the diff
*/
var isReplaceExpandedSelection = (_ref4, _ref5) => {
var {
selection
} = _ref4;
var {
removedNodes
} = _ref5;
return selection ? Range.isExpanded(selection) && removedNodes.length > 0 : false;
};
/**
* Plain text insertion
*/
var isTextInsertion = (_, _ref6) => {
var {
insertedText
} = _ref6;
return insertedText.length > 0;
};
/**
* Edge case. Detect mutations that remove leaf nodes and also update character data
*/
var isRemoveLeafNodes = (_, _ref7) => {
var {
addedNodes,
characterDataMutations,
removedNodes
} = _ref7;
return removedNodes.length > 0 && addedNodes.length === 0 && characterDataMutations.length > 0;
};
function restoreDOM(editor) {
try {
var onRestoreDOM = EDITOR_TO_RESTORE_DOM.get(editor);
if (onRestoreDOM) {
onRestoreDOM();
}
} catch (err) {
// eslint-disable-next-line no-console
console.error(err);
}
}
/**
* Based loosely on:
*
* https://github.com/facebook/draft-js/blob/master/src/component/handlers/composition/DOMObserver.js
* https://github.com/ProseMirror/prosemirror-view/blob/master/src/domobserver.js
*
* The input manager attempts to map observed mutations on the document to a
* set of operations in order to reconcile Slate's internal value with the DOM.
*
* Mutations are processed synchronously as they come in. Only mutations that occur
* during a user input loop are processed, as other mutations can occur within the
* document that were not initiated by user input.
*
* The mutation reconciliation process attempts to match mutations to the following
* patterns:
*
* - Text updates
* - Deletions
* - Line breaks
*
* @param editor
*/
class AndroidInputManager {
constructor(editor) {
this.editor = editor;
/**
* Handle MutationObserver flush
*
* @param mutations
*/
this.flush = mutations => {
try {
this.reconcileMutations(mutations);
} catch (err) {
// eslint-disable-next-line no-console
console.error(err); // Failed to reconcile mutations, restore DOM to its previous state
restoreDOM(this.editor);
}
};
/**
* Reconcile a batch of mutations
*
* @param mutations
*/
this.reconcileMutations = mutations => {
var mutationData = gatherMutationData(this.editor, mutations);
var {
insertedText,
removedNodes
} = mutationData;
if (isReplaceExpandedSelection(this.editor, mutationData)) {
var text = combineInsertedText(insertedText);
this.replaceExpandedSelection(text);
} else if (isLineBreak(this.editor, mutationData)) {
this.insertBreak();
} else if (isRemoveLeafNodes(this.editor, mutationData)) {
this.removeLeafNodes(removedNodes);
} else if (isDeletion(this.editor, mutationData)) {
this.deleteBackward();
} else if (isTextInsertion(this.editor, mutationData)) {
this.insertText(insertedText);
}
};
/**
* Apply text diff
*/
this.insertText = insertedText => {
var {
selection
} = this.editor; // Insert the batched text diffs
insertedText.forEach(insertion => {
Transforms.insertText(this.editor, insertion.text.insertText, {
at: normalizeTextInsertionRange(this.editor, selection, insertion)
});
});
};
/**
* Handle line breaks
*/
this.insertBreak = () => {
var {
selection
} = this.editor;
Editor.insertBreak(this.editor); // To-do: Need a more granular solution to restoring only a specific portion
// of the document. Restoring the entire document is expensive.
restoreDOM(this.editor);
if (selection) {
// Compat: Move selection to the newly inserted block if it has not moved
setTimeout(() => {
if (this.editor.selection && Range.equals(selection, this.editor.selection)) {
Transforms.move(this.editor);
}
}, 100);
}
};
/**
* Handle expanded selection being deleted or replaced by text
*/
this.replaceExpandedSelection = text => {
Editor.deleteFragment(this.editor);
if (text.length) {
// Selection was replaced by text, insert the entire text diff
Editor.insertText(this.editor, text);
}
restoreDOM(this.editor);
};
/**
* Handle `backspace` that merges blocks
*/
this.deleteBackward = () => {
Editor.deleteBackward(this.editor);
ReactEditor.focus(this.editor);
restoreDOM(this.editor);
};
/**
* Handle mutations that remove specific leaves
*/
this.removeLeafNodes = nodes => {
for (var node of nodes) {
var slateNode = ReactEditor.toSlateNode(this.editor, node);
if (slateNode) {
var path = ReactEditor.findPath(this.editor, slateNode);
Transforms.delete(this.editor, {
at: path
});
restoreDOM(this.editor);
}
}
};
this.editor = editor;
}
}
function useMutationObserver(node, callback, options) {
var [mutationObserver] = useState(() => new MutationObserver(callback));
useIsomorphicLayoutEffect(() => {
// Disconnect mutation observer during render phase
mutationObserver.disconnect();
});
useEffect(() => {
if (!node.current) {
throw new Error('Failed to attach MutationObserver, `node` is undefined');
} // Attach mutation observer after render phase has finished
mutationObserver.observe(node.current, options); // Clean up after effect
return mutationObserver.disconnect.bind(mutationObserver);
});
}
function useTrackUserInput() {
var editor = useSlateStatic();
var receivedUserInput = useRef(false);
var animationFrameRef = useRef(null);
var onUserInput = useCallback(() => {
if (receivedUserInput.current === false) {
var window = ReactEditor.getWindow(editor);
receivedUserInput.current = true;
if (animationFrameRef.current) {
window.cancelAnimationFrame(animationFrameRef.current);
}
animationFrameRef.current = window.requestAnimationFrame(() => {
receivedUserInput.current = false;
animationFrameRef.current = null;
});
}
}, []);
useEffect(() => {
// Reset user input tracking on every render
if (receivedUserInput.current) {
receivedUserInput.current = false;
}
});
return {
receivedUserInput,
onUserInput
};
}
var MUTATION_OBSERVER_CONFIG = {
childList: true,
characterData: true,
characterDataOldValue: true,
subtree: true
};
function useAndroidInputManager(node) {
var editor = useSlateStatic();
var [inputManager] = useState(() => new AndroidInputManager(editor));
var {
receivedUserInput,
onUserInput
} = useTrackUserInput();
var timeoutId = useRef(null);
var isReconciling = useRef(false);
var flush = useCallback(mutations => {
if (!receivedUserInput.current) {
return;
}
isReconciling.current = true;
inputManager.flush(mutations);
if (timeoutId.current) {
clearTimeout(timeoutId.current);
}
timeoutId.current = setTimeout(() => {
isReconciling.current = false;
timeoutId.current = null;
}, 250);
}, []);
useMutationObserver(node, flush, MUTATION_OBSERVER_CONFIG);
return {
isReconciling,
onUserInput
};
}
function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
/**
* Editable.
*/
var AndroidEditable = props => {
var {
autoFocus,
decorate = defaultDecorate,
onDOMBeforeInput: propsOnDOMBeforeInput,
placeholder,
readOnly = false,
renderElement,
renderLeaf,
renderPlaceholder = props => /*#__PURE__*/React.createElement(DefaultPlaceholder, Object.assign({}, props)),
style = {},
as: Component = 'div'
} = props,
attributes = _objectWithoutProperties(props, ["autoFocus", "decorate", "onDOMBeforeInput", "placeholder", "readOnly", "renderElement", "renderLeaf", "renderPlaceholder", "style", "as"]);
var editor = useSlate();
var ref = useRef(null);
var inputManager = useAndroidInputManager(ref); // 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(() => ({
isUpdatingSelection: false,
latestElement: null
}), []);
var [contentKey, setContentKey] = useState(0);
var onRestoreDOM = useCallback(() => {
setContentKey(prev => prev + 1);
}, [contentKey]); // Whenever the editor updates...
useIsomorphicLayoutEffect(() => {
// Update element-related weak maps with the DOM element ref.
var window;
if (ref.current && (window = getDefaultView(ref.current))) {
EDITOR_TO_WINDOW.set(editor, window);
EDITOR_TO_ELEMENT.set(editor, ref.current);
NODE_TO_ELEMENT.set(editor, ref.current);
ELEMENT_TO_NODE.set(ref.current, editor);
EDITOR_TO_RESTORE_DOM.set(editor, onRestoreDOM);
} else {
NODE_TO_ELEMENT.delete(editor);
EDITOR_TO_RESTORE_DOM.delete(editor);
}
try {
// Make sure the DOM selection state is in sync.
var {
selection
} = editor;
var root = ReactEditor.findDocumentOrShadowRoot(editor);
var domSelection = root.getSelection();
if (!domSelection || !ReactEditor.isFocused(editor)) {
return;
}
var hasDomSelection = domSelection.type !== 'None'; // If the DOM selection is properly unset, we're done.
if (!selection && !hasDomSelection) {
return;
} // verify that the dom selection is in the editor
var editorElement = EDITOR_TO_ELEMENT.get(editor);
var hasDomSelectionInEditor = false;
if (editorElement.contains(domSelection.anchorNode) && editorElement.contains(domSelection.focusNode)) {
hasDomSelectionInEditor = true;
} // If the DOM selection is in the editor and the editor selection is already correct, we're done.
if (hasDomSelection && hasDomSelectionInEditor && selection) {
var slateRange = ReactEditor.toSlateRange(editor, domSelection, {
exactMatch: true
});
if (slateRange && Range.equals(slateRange, selection)) {
return;
}
} // when <Editable/> is being controlled through external value
// then its children might just change - DOM responds to it on its own
// but Slate's value is not being updated through any operation
// and thus it doesn't transform selection on its own
if (selection && !ReactEditor.hasRange(editor, selection)) {
editor.selection = ReactEditor.toSlateRange(editor, domSelection, {
exactMatch: false
});
return;
} // Otherwise the DOM selection is out of sync, so update it.
var el = ReactEditor.toDOMNode(editor, editor);
state.isUpdatingSelection = true;
var newDomRange = selection && ReactEditor.toDOMRange(editor, selection);
if (newDomRange) {
if (Range.isBackward(selection)) {
domSelection.setBaseAndExtent(newDomRange.endContainer, newDomRange.endOffset, newDomRange.startContainer, newDomRange.startOffset);
} else {
domSelection.setBaseAndExtent(newDomRange.startContainer, newDomRange.startOffset, newDomRange.endContainer, newDomRange.endOffset);
}
var leafEl = newDomRange.startContainer.parentElement;
leafEl.getBoundingClientRect = newDomRange.getBoundingClientRect.bind(newDomRange);
scrollIntoView(leafEl, {
scrollMode: 'if-needed',
boundary: el
}); // @ts-ignore
delete leafEl.getBoundingClientRect;
} else {
domSelection.removeAllRanges();
}
setTimeout(() => {
state.isUpdatingSelection = false;
});
} catch (_unused) {
// Failed to update selection, likely due to reconciliation error
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)) {
inputManager.onUserInput();
}
}, [readOnly, propsOnDOMBeforeInput]); // 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)
useIsomorphicLayoutEffect(() => {
var node = ref.current; // @ts-ignore The `beforeinput` event isn't recognized.
node === null || node === void 0 ? void 0 : node.addEventListener('beforeinput', onDOMBeforeInput); // @ts-ignore The `beforeinput` event isn't recognized.
return () => node === null || node === void 0 ? void 0 : node.removeEventListener('beforeinput', onDOMBeforeInput);
}, [contentKey, propsOnDOMBeforeInput]); // 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(() => {
try {
if (!readOnly && !state.isUpdatingSelection && !inputManager.isReconciling.current) {
var root = ReactEditor.findDocumentOrShadowRoot(editor);
var {
activeElement
} = root;
var el = ReactEditor.toDOMNode(editor, editor);
var domSelection = root.getSelection();
if (activeElement === el) {
state.latestElement = activeElement;
IS_FOCUSED.set(editor, true);
} else {
IS_FOCUSED.delete(editor);
}
if (!domSelection) {
return Transforms.deselect(editor);
}
var {
anchorNode,
focusNode
} = domSelection;
var anchorNodeSelectable = hasEditableTarget(editor, anchorNode) || isTargetInsideVoid(editor, anchorNode);
var focusNodeSelectable = hasEditableTarget(editor, focusNode) || isTargetInsideVoid(editor, focusNode);
if (anchorNodeSelectable && focusNodeSelectable) {
var range = ReactEditor.toSlateRange(editor, domSelection, {
exactMatch: false
});
Transforms.select(editor, range);
} else {
Transforms.deselect(editor);
}
}
} catch (_unused2) {// Failed to update selection, likely due to reconciliation error
}
}, 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(() => {
var window = ReactEditor.getWindow(editor);
window.document.addEventListener('selectionchange', onDOMSelectionChange);
return () => {
window.document.removeEventListener('selectionchange', onDOMSelectionChange);
};
});
var decorations = decorate([editor, []]);
if (placeholder && editor.children.length === 1 && Array.from(Node.texts(editor)).length === 1 && Node.string(editor) === '') {
var start = Editor.start(editor, []);
decorations.push({
[PLACEHOLDER_SYMBOL]: true,
placeholder,
anchor: start,
focus: start
});
}
return /*#__PURE__*/React.createElement(ReadOnlyContext.Provider, {
value: readOnly
}, /*#__PURE__*/React.createElement(DecorateContext.Provider, {
value: decorate
}, /*#__PURE__*/React.createElement(Component, Object.assign({
key: contentKey,
role: readOnly ? undefined : 'textbox'
}, attributes, {
spellCheck: attributes.spellCheck,
autoCorrect: attributes.autoCorrect,
autoCapitalize: attributes.autoCapitalize,
"data-slate-editor": true,
"data-slate-node": "value",
contentEditable: readOnly ? undefined : true,
suppressContentEditableWarning: true,
ref: ref,
style: _objectSpread$1({
// Allow positioning relative to the editable element.
position: 'relative',
// 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),
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) {
if (Range.isExpanded(selection)) {
Editor.deleteFragment(editor);
} else {
var node = Node.parent(editor, selection.anchor.path);
if (Editor.isVoid(editor, node)) {
Transforms.delete(editor);
}
}
}
}
}, [readOnly, attributes.onCut]),
onFocus: useCallback(event => {
if (!readOnly && !state.isUpdatingSelection && hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onFocus)) {
var root = ReactEditor.findDocumentOrShadowRoot(editor);
state.latestElement = root.activeElement;
IS_FOCUSED.set(editor, true);
}
}, [readOnly, attributes.onFocus]),
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.
var root = ReactEditor.findDocumentOrShadowRoot(editor);
if (state.latestElement === root.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]),
onPaste: useCallback(event => {
// This unfortunately needs to be handled with paste events instead.
if (hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onPaste) && !readOnly) {
event.preventDefault();
ReactEditor.insertData(editor, event.clipboardData);
}
}, [readOnly, attributes.onPaste])
}), useChildren({
decorations,
node: editor,
renderElement,
renderPlaceholder,
renderLeaf,
selection: editor.selection
}))));
};
/**
* A React context for sharing the `focused` state of the editor.
*/
var FocusedContext = /*#__PURE__*/createContext(false);
/**
* Get the current `focused` state of the editor.
*/
var useFocused = () => {
return useContext(FocusedContext);
};
/**
* 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.
*/
var Slate = props => {
var {
editor,
children,
onChange,
value
} = props,
rest = _objectWithoutProperties(props, ["editor", "children", "onChange", "value"]);
var [key, setKey] = useState(0);
var context = useMemo(() => {
invariant(Node.isNodeList(value), "[Slate] value is invalid! Expected a list of elements but got: ".concat(JSON.stringify(value)));
invariant(Editor.isEditor(editor), "[Slate] editor is invalid! you passed: ".concat(JSON.stringify(editor)));
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, () => {});
};
}, []);
var [isFocused, setIsFocused] = useState(ReactEditor.isFocused(editor));
useEffect(() => {
setIsFocused(ReactEditor.isFocused(editor));
});
useIsomorphicLayoutEffect(() => {
var fn = () => setIsFocused(ReactEditor.isFocused(editor));
document.addEventListener('focus', fn, true);
return () => document.removeEventListener('focus', fn, true);
}, []);
useIsomorphicLayoutEffect(() => {
var fn = () => setIsFocused(ReactEditor.isFocused(editor));
document.addEventListener('blur', fn, true);
return () => document.removeEventListener('blur', fn, true);
}, []);
return /*#__PURE__*/React.createElement(SlateContext.Provider, {
value: context
}, /*#__PURE__*/React.createElement(EditorContext.Provider, {
value: editor
}, /*#__PURE__*/React.createElement(FocusedContext.Provider, {
value: isFocused
}, children)));
};
/**
* Get the current editor object from the React context.
* @deprecated Use useSlateStatic instead.
*/
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;
};
/**
* Utilities for single-line deletion
*/
var doRectsIntersect = (rect, compareRect) => {
var middle = (compareRect.top + compareRect.bottom) / 2;
return rect.top <= middle && rect.bottom >= middle;
};
var areRangesSameLine = (editor, range1, range2) => {
var rect1 = ReactEditor.toDOMRange(editor, range1).getBoundingClientRect();
var rect2 = ReactEditor.toDOMRange(editor, range2).getBoundingClientRect();
return doRectsIntersect(rect1, rect2) && doRectsIntersect(rect2, rect1);
};
/**
* A helper utility that returns the end portion of a `Range`
* which is located on a single line.
*
* @param {Editor} editor The editor object to compare against
* @param {Range} parentRange The parent range to compare against
* @returns {Range} A valid portion of the parentRange which is one a single line
*/
var findCurrentLineRange = (editor, parentRange) => {
var parentRangeBoundary = Editor.range(editor, Range.end(parentRange));
var positions = Array.from(Editor.positions(editor, {
at: parentRange
}));
var left = 0;
var right = positions.length;
var middle = Math.floor(right / 2);
if (areRangesSameLine(editor, Editor.range(editor, positions[left]), parentRangeBoundary)) {
return Editor.range(editor, positions[left], parentRangeBoundary);
}
if (positions.length < 2) {
return Editor.range(editor, positions[positions.length - 1], parentRangeBoundary);
}
while (middle !== positions.length && middle !== left) {
if (areRangesSameLine(editor, Editor.range(editor, positions[middle]), parentRangeBoundary)) {
right = middle;
} else {
left = middle;
}
middle = Math.floor((left + right) / 2);
}
return Editor.range(editor, positions[right], parentRangeBoundary);
};
/**
* `withReact` adds React and DOM specific behaviors to the editor.
*
* If you are using TypeScript, you must extend Slate's CustomTypes to use
* this plugin.
*
* See https://docs.slatejs.org/concepts/11-typescript to learn how.
*/
var withReact = editor => {
var e = editor;
var {
apply,
onChange,
deleteBackward
} = e;
e.deleteBackward = unit => {
if (unit !== 'line') {
return deleteBackward(unit);
}
if (editor.selection && Range.isCollapsed(editor.selection)) {
var parentBlockEntry = Editor.above(editor, {
match: n => Editor.isBlock(editor, n),
at: editor.selection
});
if (parentBlockEntry) {
var [, parentBlockPath] = parentBlockEntry;
var parentElementRange = Editor.range(editor, parentBlockPath, editor.selection.anchor);
var currentLineRange = findCurrentLineRange(e, parentElementRange);
if (!Range.isCollapsed(currentLineRange)) {
Transforms.delete(editor, {
at: currentLineRange
});
}
}
}
};
e.apply = op => {
var matches = [];
switch (op.type) {
case 'insert_text':
case 'remove_text':
case 'set_node':
{
for (var [node, path] of Editor.levels(e, {
at: op.path
})) {
var key = ReactEditor.findKey(e, node);
matches.push([path, key]);
}
break;
}
case 'insert_node':
case 'remove_node':
case 'merge_node':
case 'split_node':
{
for (var [_node, _path] of Editor.levels(e, {
at: Path.parent(op.path)
})) {
var _key = ReactEditor.findKey(e, _node);
matches.push([_path, _key]);
}
break;
}
case 'move_node':
{
for (var [_node2, _path2] of Editor.levels(e, {
at: Path.common(Path.parent(op.path), Path.parent(op.newPath))
})) {
var _key2 = ReactEditor.findKey(e, _node2);
matches.push([_path2, _key2]);
}
break;
}
}
apply(op);
for (var [_path3, _key3] of matches) {
var [_node3] = Editor.node(e, _path3);
NODE_TO_KEY.set(_node3, _key3);
}
};
e.setFragmentData = data => {
var {
selection
} = e;
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 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);
};
e.insertData = data => {
var fragment = data.getData('application/x-slate-fragment');
if (fragment) {
var decoded = decodeURIComponent(window.atob(fragment));
var parsed = JSON.parse(decoded);
e.insertFragment(parsed);
return;
}
var text = data.getData('text/plain');
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
});
}
e.insertText(line);
split = true;
}
}
};
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(() => {
var onContextChange = EDITOR_TO_ON_CHANGE.get(e);
if (onContextChange) {
onContextChange();
}
onChange();
});
};
return e;
};
// Components
var Editable$1 = IS_ANDROID ? AndroidEditable : Editable;
export { AndroidEditable, Editable as DefaultEditable, DefaultElement, DefaultLeaf, DefaultPlaceholder, Editable$1 as Editable, ReactEditor, Slate, useEditor, useFocused, useReadOnly, useSelected, useSlate, useSlateStatic, withReact };
//# sourceMappingURL=index.es.js.map