slate-dom
Version:
Tools for building completely customizable richtext editors with React.
1,334 lines (1,323 loc) • 75.6 kB
JavaScript
import { Range, Editor, Scrubber, Node, Transforms, Path, Point, Location } from 'slate';
import { isHotkey } from 'is-hotkey';
/**
* Types.
*/
// COMPAT: This is required to prevent TypeScript aliases from doing some very
// weird things for Slate's types with the same name as globals. (2019/11/27)
// https://github.com/microsoft/TypeScript/issues/35002
var DOMNode = globalThis.Node;
var DOMElement = globalThis.Element;
var DOMText = globalThis.Text;
var DOMRange = globalThis.Range;
var DOMSelection = globalThis.Selection;
var DOMStaticRange = globalThis.StaticRange;
/**
* 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 whether the active element is nested within a shadowRoot
*/
var hasShadowRoot = node => {
var parent = node && node.parentNode;
while (parent) {
if (parent.toString() === '[object ShadowRoot]') {
return true;
}
parent = parent.parentNode;
}
return false;
};
/**
* Get the nearest editable child and index at `index` in a `parent`, preferring
* `direction`.
*/
var getEditableChildAndIndex = (parent, index, direction) => {
if (typeof index !== 'number') {
throw new Error('Expected index to be a number');
}
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;
};
/**
* Get x-slate-fragment attribute from data-slate-fragment
*/
var catchSlateFragment = /data-slate-fragment="(.+?)"/m;
var getSlateFragmentAttribute = dataTransfer => {
var htmlData = dataTransfer.getData('text/html');
var [, fragment] = htmlData.match(catchSlateFragment) || [];
return fragment;
};
/**
* Get the dom selection from Shadow Root if possible, otherwise from the document
*/
var getSelection = root => {
if (root.getSelection != null) {
return root.getSelection();
}
return document.getSelection();
};
/**
* Check whether a mutation originates from a editable element inside the editor.
*/
var isTrackedMutation = (editor, mutation, batch) => {
var {
target
} = mutation;
if (isDOMElement(target) && target.matches('[contentEditable="false"]')) {
return false;
}
var {
document
} = DOMEditor.getWindow(editor);
if (containsShadowAware(document, target)) {
return DOMEditor.hasDOMNode(editor, target, {
editable: true
});
}
var parentMutation = batch.find(_ref => {
var {
addedNodes,
removedNodes
} = _ref;
for (var node of addedNodes) {
if (node === target || containsShadowAware(node, target)) {
return true;
}
}
for (var _node of removedNodes) {
if (_node === target || containsShadowAware(_node, target)) {
return true;
}
}
});
if (!parentMutation || parentMutation === mutation) {
return false;
}
// Target add/remove is tracked. Track the mutation if we track the parent mutation.
return isTrackedMutation(editor, parentMutation, batch);
};
/**
* Retrieves the deepest active element in the DOM, considering nested shadow DOMs.
*/
var getActiveElement = () => {
var activeElement = document.activeElement;
while ((_activeElement = activeElement) !== null && _activeElement !== void 0 && _activeElement.shadowRoot && (_activeElement$shadow = activeElement.shadowRoot) !== null && _activeElement$shadow !== void 0 && _activeElement$shadow.activeElement) {
var _activeElement, _activeElement$shadow, _activeElement2;
activeElement = (_activeElement2 = activeElement) === null || _activeElement2 === void 0 || (_activeElement2 = _activeElement2.shadowRoot) === null || _activeElement2 === void 0 ? void 0 : _activeElement2.activeElement;
}
return activeElement;
};
/**
* @returns `true` if `otherNode` is before `node` in the document; otherwise, `false`.
*/
var isBefore = (node, otherNode) => Boolean(node.compareDocumentPosition(otherNode) & DOMNode.DOCUMENT_POSITION_PRECEDING);
/**
* @returns `true` if `otherNode` is after `node` in the document; otherwise, `false`.
*/
var isAfter = (node, otherNode) => Boolean(node.compareDocumentPosition(otherNode) & DOMNode.DOCUMENT_POSITION_FOLLOWING);
/**
* Shadow DOM-aware version of Element.closest()
* Traverses up the DOM tree, crossing shadow DOM boundaries
*/
var closestShadowAware = (element, selector) => {
if (!element) {
return null;
}
var current = element;
while (current) {
if (current.matches && current.matches(selector)) {
return current;
}
if (current.parentElement) {
current = current.parentElement;
} else if (current.parentNode && 'host' in current.parentNode) {
current = current.parentNode.host;
} else {
return null;
}
}
return null;
};
/**
* Shadow DOM-aware version of Node.contains()
* Checks if a node contains another node, crossing shadow DOM boundaries
*/
var containsShadowAware = (parent, child) => {
if (!parent || !child) {
return false;
}
if (parent.contains(child)) {
return true;
}
var current = child;
while (current) {
if (current === parent) {
return true;
}
if (current.parentNode) {
if ('host' in current.parentNode) {
current = current.parentNode.host;
} else {
current = current.parentNode;
}
} else {
return false;
}
}
return false;
};
var _navigator$userAgent$, _navigator$userAgent$2;
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_WEBKIT = typeof navigator !== 'undefined' && /AppleWebKit(?!.*Chrome)/i.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);
var IS_ANDROID_CHROME_LEGACY = IS_ANDROID && typeof navigator !== 'undefined' && /Chrome?\/(?:[0-5]?\d)(?:\.)/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);
// UC mobile browser
var IS_UC_MOBILE = typeof navigator !== 'undefined' && /.*UCBrowser/.test(navigator.userAgent);
// Wechat browser (not including mac wechat)
var IS_WECHATBROWSER = typeof navigator !== 'undefined' && /.*Wechat/.test(navigator.userAgent) && !/.*MacWechat/.test(navigator.userAgent) && (
// avoid lookbehind (buggy in safari < 16.4)
!IS_CHROME || IS_CHROME_LEGACY); // wechat and low chrome is real wechat
// 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');
// Check if the browser is Safari and older than 17
typeof navigator !== 'undefined' && /Safari/.test(navigator.userAgent) && /Version\/(\d+)/.test(navigator.userAgent) && ((_navigator$userAgent$ = navigator.userAgent.match(/Version\/(\d+)/)) !== null && _navigator$userAgent$ !== void 0 && _navigator$userAgent$[1] ? parseInt((_navigator$userAgent$2 = navigator.userAgent.match(/Version\/(\d+)/)) === null || _navigator$userAgent$2 === void 0 ? void 0 : _navigator$userAgent$2[1], 10) < 17 : false);
// 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_ANDROID_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';
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function _toPrimitive(input, hint) {
if (_typeof(input) !== "object" || input === null) return input;
var prim = input[Symbol.toPrimitive];
if (prim !== undefined) {
var res = prim.call(input, hint);
if (_typeof(res) !== "object") return res;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return (hint === "string" ? String : Number)(input);
}
function _toPropertyKey(arg) {
var key = _toPrimitive(arg, "string");
return _typeof(key) === "symbol" ? key : String(key);
}
function _defineProperty(obj, key, value) {
key = _toPropertyKey(key);
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
/**
* 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() {
_defineProperty(this, "id", void 0);
this.id = "".concat(n++);
}
}
/**
* 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 IS_NODE_MAP_DIRTY = new WeakMap();
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 EDITOR_TO_PLACEHOLDER_ELEMENT = new WeakMap();
var ELEMENT_TO_NODE = new WeakMap();
var NODE_TO_ELEMENT = new WeakMap();
var NODE_TO_KEY = new WeakMap();
var EDITOR_TO_KEY_TO_ELEMENT = new WeakMap();
/**
* Weak maps for storing editor-related state.
*/
var IS_READ_ONLY = new WeakMap();
var IS_FOCUSED = new WeakMap();
var IS_COMPOSING = new WeakMap();
var EDITOR_TO_USER_SELECTION = new WeakMap();
/**
* Weak map for associating the context `onChange` context with the plugin.
*/
var EDITOR_TO_ON_CHANGE = new WeakMap();
/**
* Weak maps for saving pending state on composition stage.
*/
var EDITOR_TO_SCHEDULE_FLUSH = new WeakMap();
var EDITOR_TO_PENDING_INSERTION_MARKS = new WeakMap();
var EDITOR_TO_USER_MARKS = new WeakMap();
/**
* Android input handling specific weak-maps
*/
var EDITOR_TO_PENDING_DIFFS = new WeakMap();
var EDITOR_TO_PENDING_ACTION = new WeakMap();
var EDITOR_TO_PENDING_SELECTION = new WeakMap();
var EDITOR_TO_FORCE_RENDER = new WeakMap();
/**
* Symbols.
*/
var PLACEHOLDER_SYMBOL = Symbol('placeholder');
var MARK_PLACEHOLDER_SYMBOL = Symbol('mark-placeholder');
// eslint-disable-next-line no-redeclare
var DOMEditor = {
androidPendingDiffs: editor => EDITOR_TO_PENDING_DIFFS.get(editor),
androidScheduleFlush: editor => {
var _EDITOR_TO_SCHEDULE_F;
(_EDITOR_TO_SCHEDULE_F = EDITOR_TO_SCHEDULE_FLUSH.get(editor)) === null || _EDITOR_TO_SCHEDULE_F === void 0 || _EDITOR_TO_SCHEDULE_F();
},
blur: editor => {
var el = DOMEditor.toDOMNode(editor, editor);
var root = DOMEditor.findDocumentOrShadowRoot(editor);
IS_FOCUSED.set(editor, false);
if (root.activeElement === el) {
el.blur();
}
},
deselect: editor => {
var {
selection
} = editor;
var root = DOMEditor.findDocumentOrShadowRoot(editor);
var domSelection = getSelection(root);
if (domSelection && domSelection.rangeCount > 0) {
domSelection.removeAllRanges();
}
if (selection) {
Transforms.deselect(editor);
}
},
findDocumentOrShadowRoot: editor => {
var el = DOMEditor.toDOMNode(editor, editor);
var root = el.getRootNode();
if (root instanceof Document || root instanceof ShadowRoot) {
return root;
}
return el.ownerDocument;
},
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 = DOMEditor.toSlateNode(editor, event.target);
var path = DOMEditor.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 (Node.isElement(node) && 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
} = DOMEditor.getWindow(editor);
// 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 = DOMEditor.toSlateRange(editor, domRange, {
exactMatch: false,
suppressThrow: false
});
return range;
},
findKey: (editor, node) => {
var key = NODE_TO_KEY.get(node);
if (!key) {
key = new Key();
NODE_TO_KEY.set(node, key);
}
return key;
},
findPath: (editor, node) => {
var path = [];
var child = node;
while (true) {
var parent = NODE_TO_PARENT.get(child);
if (parent == null) {
if (child === editor) {
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(Scrubber.stringify(node)));
},
focus: function focus(editor) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
retries: 5
};
// Return if already focused
if (IS_FOCUSED.get(editor)) {
return;
}
// Return if no dom node is associated with the editor, which means the editor is not yet mounted
// or has been unmounted. This can happen especially, while retrying to focus the editor.
if (!EDITOR_TO_ELEMENT.get(editor)) {
return;
}
// Retry setting focus if the editor has pending operations.
// The DOM (selection) is unstable while changes are applied.
// Retry until retries are exhausted or editor is focused.
if (options.retries <= 0) {
throw new Error('Could not set focus, editor seems stuck with pending operations');
}
if (editor.operations.length > 0) {
setTimeout(() => {
DOMEditor.focus(editor, {
retries: options.retries - 1
});
}, 10);
return;
}
var el = DOMEditor.toDOMNode(editor, editor);
var root = DOMEditor.findDocumentOrShadowRoot(editor);
if (root.activeElement !== el) {
// Ensure that the DOM selection state is set to the editor's selection
if (editor.selection && root instanceof Document) {
var domSelection = getSelection(root);
var domRange = DOMEditor.toDOMRange(editor, editor.selection);
domSelection === null || domSelection === void 0 || domSelection.removeAllRanges();
domSelection === null || domSelection === void 0 || domSelection.addRange(domRange);
}
// Create a new selection in the top of the document if missing
if (!editor.selection) {
Transforms.select(editor, Editor.start(editor, []));
}
// IS_FOCUSED should be set before calling el.focus() to ensure that
// FocusedContext is updated to the correct value
IS_FOCUSED.set(editor, true);
el.focus({
preventScroll: true
});
}
},
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;
},
hasDOMNode: function hasDOMNode(editor, target) {
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var {
editable = false
} = options;
var editorEl = DOMEditor.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 instanceof Error && !err.message.includes('Permission denied to access property "nodeType"')) {
throw err;
}
}
if (!targetEl) {
return false;
}
return closestShadowAware(targetEl, "[data-slate-editor]") === editorEl && (!editable || targetEl.isContentEditable ? true : typeof targetEl.isContentEditable === 'boolean' &&
// isContentEditable exists only on HTMLElement, and on other nodes it will be undefined
// this is the core logic that lets you know you got the right editor.selection instead of null when editor is contenteditable="false"(readOnly)
closestShadowAware(targetEl, '[contenteditable="false"]') === editorEl || !!targetEl.getAttribute('data-slate-zero-width'));
},
hasEditableTarget: (editor, target) => isDOMNode(target) && DOMEditor.hasDOMNode(editor, target, {
editable: true
}),
hasRange: (editor, range) => {
var {
anchor,
focus
} = range;
return Editor.hasPath(editor, anchor.path) && Editor.hasPath(editor, focus.path);
},
hasSelectableTarget: (editor, target) => DOMEditor.hasEditableTarget(editor, target) || DOMEditor.isTargetInsideNonReadonlyVoid(editor, target),
hasTarget: (editor, target) => isDOMNode(target) && DOMEditor.hasDOMNode(editor, target),
insertData: (editor, data) => {
editor.insertData(data);
},
insertFragmentData: (editor, data) => editor.insertFragmentData(data),
insertTextData: (editor, data) => editor.insertTextData(data),
isComposing: editor => {
return !!IS_COMPOSING.get(editor);
},
isFocused: editor => !!IS_FOCUSED.get(editor),
isReadOnly: editor => !!IS_READ_ONLY.get(editor),
isTargetInsideNonReadonlyVoid: (editor, target) => {
if (IS_READ_ONLY.get(editor)) return false;
if (!DOMEditor.hasTarget(editor, target)) return false;
var slateNode = DOMEditor.toSlateNode(editor, target);
return Node.isElement(slateNode) && Editor.isVoid(editor, slateNode);
},
setFragmentData: (editor, data, originEvent) => editor.setFragmentData(data, originEvent),
toDOMNode: (editor, node) => {
var _EDITOR_TO_KEY_TO_ELE;
var domNode = node === editor ? EDITOR_TO_ELEMENT.get(editor) : (_EDITOR_TO_KEY_TO_ELE = EDITOR_TO_KEY_TO_ELEMENT.get(editor)) === null || _EDITOR_TO_KEY_TO_ELE === void 0 ? void 0 : _EDITOR_TO_KEY_TO_ELE.get(DOMEditor.findKey(editor, node));
if (!domNode) {
throw new Error("Cannot resolve a DOM node from Slate node: ".concat(Scrubber.stringify(node)));
}
return domNode;
},
toDOMPoint: (editor, point) => {
var [node] = Editor.node(editor, point.path);
var el = DOMEditor.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 i = 0; i < texts.length; i++) {
var text = texts[i];
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;
// Prefer putting the selection inside the mark placeholder to ensure
// composed text is displayed with the correct marks.
var nextText = texts[i + 1];
if (point.offset === end && nextText !== null && nextText !== void 0 && nextText.hasAttribute('data-slate-mark-placeholder')) {
var _nextText$textContent;
var domText = nextText.childNodes[0];
domPoint = [
// COMPAT: If we don't explicity set the dom point to be on the actual
// dom text element, chrome will put the selection behind the actual dom
// text element, causing domRange.getBoundingClientRect() calls on a collapsed
// selection to return incorrect zero values (https://bugs.chromium.org/p/chromium/issues/detail?id=435438)
// which will cause issues when scrolling to it.
domText instanceof DOMText ? domText : nextText, (_nextText$textContent = nextText.textContent) !== null && _nextText$textContent !== void 0 && _nextText$textContent.startsWith('\uFEFF') ? 1 : 0];
break;
}
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(Scrubber.stringify(point)));
}
return domPoint;
},
toDOMRange: (editor, range) => {
var {
anchor,
focus
} = range;
var isBackward = Range.isBackward(range);
var domAnchor = DOMEditor.toDOMPoint(editor, anchor);
var domFocus = Range.isCollapsed(range) ? domAnchor : DOMEditor.toDOMPoint(editor, focus);
var window = DOMEditor.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;
},
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;
},
toSlatePoint: (editor, domPoint, options) => {
var {
exactMatch,
suppressThrow
} = options;
var [nearestNode, nearestOffset] = exactMatch ? domPoint : normalizeDOMPoint(domPoint);
var parentNode = nearestNode.parentNode;
var searchDirection = options.searchDirection;
var textNode = null;
var offset = 0;
if (parentNode) {
var _domNode$textContent, _domNode$textContent2;
var editorEl = DOMEditor.toDOMNode(editor, editor);
var potentialVoidNode = parentNode.closest('[data-slate-void="true"]');
// Need to ensure that the closest void node is actually a void node
// within this editor, and not a void node within some parent editor. This can happen
// if this editor is within a void node of another editor ("nested editors", like in
// the "Editable Voids" example on the docs site).
var voidNode = potentialVoidNode && containsShadowAware(editorEl, potentialVoidNode) ? potentialVoidNode : null;
var potentialNonEditableNode = parentNode.closest('[contenteditable="false"]');
var nonEditableNode = potentialNonEditableNode && containsShadowAware(editorEl, potentialNonEditableNode) ? potentialNonEditableNode : null;
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"]');
if (textNode) {
var window = DOMEditor.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 => {
// COMPAT: While composing at the start of a text node, some keyboards put
// the text content inside the zero width space.
if (IS_ANDROID && !exactMatch && el.hasAttribute('data-slate-zero-width') && el.textContent.length > 0 && el.textContext !== '\uFEFF') {
if (el.textContent.startsWith('\uFEFF')) {
el.textContent = el.textContent.slice(1);
}
return;
}
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-dom
// 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 and taking the
// first one that isn't inside a nested editor.
var leafNodes = voidNode.querySelectorAll('[data-slate-leaf]');
for (var index = 0; index < leafNodes.length; index++) {
var current = leafNodes[index];
if (DOMEditor.hasDOMNode(editor, current)) {
leafNode = current;
break;
}
}
// 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;
});
}
} else if (nonEditableNode) {
// Find the edge of the nearest leaf in `searchDirection`
var getLeafNodes = node => node ? node.querySelectorAll(
// Exclude leaf nodes in nested editors
'[data-slate-leaf]:not(:scope [data-slate-editor] [data-slate-leaf])') : [];
var elementNode = nonEditableNode.closest('[data-slate-node="element"]');
if (searchDirection === 'backward' || !searchDirection) {
var _leafNodes$findLast;
var _leafNodes = [...getLeafNodes(elementNode === null || elementNode === void 0 ? void 0 : elementNode.previousElementSibling), ...getLeafNodes(elementNode)];
leafNode = (_leafNodes$findLast = _leafNodes.findLast(leaf => isBefore(nonEditableNode, leaf))) !== null && _leafNodes$findLast !== void 0 ? _leafNodes$findLast : null;
if (leafNode) {
searchDirection = 'backward';
}
}
if (searchDirection === 'forward' || !searchDirection) {
var _leafNodes2$find;
var _leafNodes2 = [...getLeafNodes(elementNode), ...getLeafNodes(elementNode === null || elementNode === void 0 ? void 0 : elementNode.nextElementSibling)];
leafNode = (_leafNodes2$find = _leafNodes2.find(leaf => isAfter(nonEditableNode, leaf))) !== null && _leafNodes2$find !== void 0 ? _leafNodes2$find : null;
if (leafNode) {
searchDirection = 'forward';
}
}
if (leafNode) {
textNode = leafNode.closest('[data-slate-node="text"]');
domNode = leafNode;
if (searchDirection === 'forward') {
offset = 0;
} else {
offset = domNode.textContent.length;
domNode.querySelectorAll('[data-slate-zero-width]').forEach(el => {
offset -= el.textContent.length;
});
}
}
}
if (domNode && offset === domNode.textContent.length &&
// COMPAT: Android IMEs might remove the zero width space while composing,
// and we don't add it for line-breaks.
IS_ANDROID && domNode.getAttribute('data-slate-zero-width') === 'z' && (_domNode$textContent = domNode.textContent) !== null && _domNode$textContent !== void 0 && _domNode$textContent.startsWith('\uFEFF') && (
// 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.
parentNode.hasAttribute('data-slate-zero-width') ||
// COMPAT: In Firefox, `range.cloneContents()` returns an extra trailing '\n'
// when the document ends with a new-line character. This results in the offset
// length being off by one, so we need to subtract one to account for this.
IS_FIREFOX && (_domNode$textContent2 = domNode.textContent) !== null && _domNode$textContent2 !== void 0 && _domNode$textContent2.endsWith('\n\n'))) {
offset--;
}
}
if (IS_ANDROID && !textNode && !exactMatch) {
var node = parentNode.hasAttribute('data-slate-node') ? parentNode : parentNode.closest('[data-slate-node]');
if (node && DOMEditor.hasDOMNode(editor, node, {
editable: true
})) {
var _slateNode = DOMEditor.toSlateNode(editor, node);
var nodePath;
try {
nodePath = DOMEditor.findPath(editor, _slateNode);
} catch (e) {
if (suppressThrow) {
return null;
}
throw e;
}
var {
path: _path,
offset: _offset
} = Editor.start(editor, nodePath);
if (!node.querySelector('[data-slate-leaf]')) {
_offset = nearestOffset;
}
return {
path: _path,
offset: _offset
};
}
}
if (!textNode) {
if (suppressThrow) {
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 = DOMEditor.toSlateNode(editor, textNode);
var path;
try {
path = DOMEditor.findPath(editor, slateNode);
} catch (e) {
if (suppressThrow) {
return null;
}
throw e;
}
return {
path,
offset
};
},
toSlateRange: (editor, domRange, options) => {
var _focusNode$textConten;
var {
exactMatch,
suppressThrow
} = options;
var el = isDOMSelection(domRange) ? domRange.anchorNode : domRange.startContainer;
var anchorNode;
var anchorOffset;
var focusNode;
var focusOffset;
var isCollapsed;
if (el) {
if (isDOMSelection(domRange)) {
// COMPAT: In firefox the normal seletion way does not work
// (https://github.com/ianstormtaylor/slate/pull/5486#issue-1820720223)
if (IS_FIREFOX && domRange.rangeCount > 1) {
focusNode = domRange.focusNode; // Focus node works fine
var firstRange = domRange.getRangeAt(0);
var lastRange = domRange.getRangeAt(domRange.rangeCount - 1);
// Here we are in the contenteditable mode of a table in firefox
if (focusNode instanceof HTMLTableRowElement && firstRange.startContainer instanceof HTMLTableRowElement && lastRange.startContainer instanceof HTMLTableRowElement) {
// HTMLElement, becouse Element is a slate element
function getLastChildren(element) {
if (element.childElementCount > 0) {
return getLastChildren(element.children[0]);
} else {
return element;
}
}
var firstNodeRow = firstRange.startContainer;
var lastNodeRow = lastRange.startContainer;
// This should never fail as "The HTMLElement interface represents any HTML element."
var firstNode = getLastChildren(firstNodeRow.children[firstRange.startOffset]);
var lastNode = getLastChildren(lastNodeRow.children[lastRange.startOffset]);
// Zero, as we allways take the right one as the anchor point
focusOffset = 0;
if (lastNode.childNodes.length > 0) {
anchorNode = lastNode.childNodes[0];
} else {
anchorNode = lastNode;
}
if (firstNode.childNodes.length > 0) {
focusNode = firstNode.childNodes[0];
} else {
focusNode = firstNode;
}
if (lastNode instanceof HTMLElement) {
anchorOffset = lastNode.innerHTML.length;
} else {
// Fallback option
anchorOffset = 0;
}
} else {
// This is the read only mode of a firefox table
// Right to left
if (firstRange.startContainer === focusNode) {
anchorNode = lastRange.endContainer;
anchorOffset = lastRange.endOffset;
focusOffset = firstRange.startOffset;
} else {
// Left to right
anchorNode = firstRange.startContainer;
anchorOffset = firstRange.endOffset;
focusOffset = lastRange.startOffset;
}
}
} else {
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
// IsCollapsed might not work in firefox, but this will
if (IS_CHROME && hasShadowRoot(anchorNode) || IS_FIREFOX) {
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));
}
// COMPAT: Firefox sometimes includes an extra \n (rendered by TextString
// when isTrailing is true) in the focusOffset, resulting in an invalid
// Slate point. (2023/11/01)
if (IS_FIREFOX && (_focusNode$textConten = focusNode.textContent) !== null && _focusNode$textConten !== void 0 && _focusNode$textConten.endsWith('\n\n') && focusOffset === focusNode.textContent.length) {
focusOffset--;
}
var anchor = DOMEditor.toSlatePoint(editor, [anchorNode, anchorOffset], {
exactMatch,
suppressThrow
});
if (!anchor) {
return null;
}
var focusBeforeAnchor = isBefore(anchorNode, focusNode) || anchorNode === focusNode && focusOffset < anchorOffset;
var focus = isCollapsed ? anchor : DOMEditor.toSlatePoint(editor, [focusNode, focusOffset], {
exactMatch,
suppressThrow,
searchDirection: focusBeforeAnchor ? 'forward' : 'backward'
});
if (!focus) {
return null;
}
var range = {
anchor: anchor,
focus: focus
};
// if the selection is a hanging range that ends in a void
// and the DOM focus is an Element
// (meaning that the selection ends before the element)
// unhang the range to avoid mistakenly including the void
if (Range.isExpanded(range) && Range.isForward(range) && isDOMElement(focusNode) && Editor.void(editor, {
at: range.focus,
mode: 'highest'
})) {
range = Editor.unhangRange(editor, range, {
voids: true
});
}
return range;
}
};
/**
* Check whether a text diff was applied in a way we can perform the pending action on /
* recover the pending selection.
*/
function verifyDiffState(editor, textDiff) {
var {
path,
diff
} = textDiff;
if (!Editor.hasPath(editor, path)) {
return false;
}
var node = Node.get(editor, path);
if (!Node.isText(node)) {
return false;
}
if (diff.start !== node.text.length || diff.text.length === 0) {
return node.text.slice(diff.start, diff.start + diff.text.length) === diff.text;
}
var nextPath = Path.next(path);
if (!Editor.hasPath(editor, nextPath)) {
return false;
}
var nextNode = Node.get(editor, nextPath);
return Node.isText(nextNode) && nextNode.text.startsWith(diff.text);
}
function applyStringDiff(text) {
for (var _len = arguments.length, diffs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
diffs[_key - 1] = arguments[_key];
}
return diffs.reduce((text, diff) => text.slice(0, diff.start) + diff.text + text.slice(diff.end), text);
}
function longestCommonPrefixLength(str, another) {
var length = Math.min(str.length, another.length);
for (var i = 0; i < length; i++) {
if (str.charAt(i) !== another.charAt(i)) {
return i;
}
}
return length;
}
function longestCommonSuffixLength(str, another, max) {
var length = Math.min(str.length, another.length, max);
for (var i = 0; i < length; i++) {
if (str.charAt(str.length - i - 1) !== another.charAt(another.length - i - 1)) {
return i;
}
}
return length;
}
/**
* Remove redundant changes from the diff so that it spans the minimal possible range
*/
function normalizeStringDiff(targetText, diff) {
var {
start,
end,
text
} = diff;
var removedText = targetText.slice(start, end);
var prefixLength = longestCommonPrefixLength(removedText, text);
var max = Math.min(removedText.length - prefixLength, text.length - prefixLength);
var suffixLength = longestCommonSuffixLength(removedText, text, max);
var normalized = {
start: start + prefixLength,
end: end - suffixLength,
text: text.slice(prefixLength, text.length - suffixLength)
};
if (normalized.start === normalized.end && normalized.text.length === 0) {
return null;
}
return normalized;
}
/**
* Return a string diff that is equivalent to applying b after a spanning the range of
* both changes
*/
function mergeStringDiffs(targetText, a, b) {
var start = Math.min(a.start, b.start);
var overlap = Math.max(0, Math.min(a.start + a.text.length, b.end) - b.start);
var applied = applyStringDiff(targetText, a, b);
var sliceEnd = Math.max(b.start + b.text.length, a.start + a.text.length + (a.start + a.text.length > b.start ? b.text.length : 0) - overlap);
var text = applied.slice(start, sliceEnd);
var end = Math.max(a.end, b.end - a.text.length + (a.end - a.start));
return normalizeStringDiff(targetText, {
start,
end,
text
});
}
/**
* Get the slate range the text diff spans.
*/
function targetRange(textDiff) {
var {
path,
diff
} = textDiff;
return {
anchor: {
path,
offset: diff.start
},
focus: {
path,
offset: diff.end
}
};
}
/**
* Normalize a 'pending point' a.k.a a point based on the dom state before applying
* the pending diffs. Since the pending diffs might have been inserted with different
* marks we have to 'walk' the offset from the starting position to ensure we still
* have a valid point inside the document
*/
function normalizePoint(editor, point) {
var {
path,
offset
} = point;
if (!Editor.hasPath(editor, path)) {
return null;
}
var leaf = Node.get(editor, path);
if (!Node.isText(leaf)) {
return null;
}
var parentBlock = Editor.above(editor, {
match: n => Node.isElement(n) && Editor.isBlock(editor, n),
at: path
});
if (!parentBlock) {
return null;
}
while (offset > leaf.text.length) {
var entry = Editor.next(editor, {
at: path,
match: Node.isText
});
if (!entry || !Path.isDescendant(entry[1], parentBlock[1])) {
return null;
}
offset -= leaf.text.length;
leaf = entry[0];
path = entry[1];
}
return {
path,
offset
};
}
/**
* Normalize a 'pending selection' to ensure it's valid in the current document state.
*/
function normalizeRange(editor, range) {
var anchor = normalizePoint(editor, range.anchor);
if (!anchor) {
return null;
}
if (Range.isCollapsed(range)) {
return {
anchor,
focus: anchor
};
}
var focus = normalizePoint(editor, range.focus);
if (!focus) {
return null;
}
return {
anchor,
focus
};
}
function transformPendingPoint(editor, point, op) {
var pendingDiffs = EDITOR_TO_PENDING_DIFFS.get(editor);
var textDiff = pendingDiffs === null || pendingDiffs === void 0 ? void 0 : pendingDiffs.find(_ref => {
var {
path
} = _ref;
return Path.equals(path, point.path);
});
if (!textDiff || point.offset <= textDiff.diff.start) {
return Point.transform(point, op, {
affinity: 'backward'
});
}
var {
diff
} = textDiff;
// Point references location inside the diff => transform the point based on the location
// the diff will be applied to and add the offset inside the diff.
if (point.offset <= diff.start + diff.text.length) {
var _anchor = {
path: point.path,
offset: diff.start
};
var _transformed = Point.transform(_anchor, op, {
affinity: 'backward'
});
if (!_transformed) {
return null;
}
return {
path: _transformed.path,
offset: _transformed.offset + point.offset - diff.start
};
}
// Point references location after the diff
var anchor = {
path: point.path,
offset: point.offset - diff.text.length + diff.end - diff.start
};
var transformed = Point.transform(anchor, op, {
affinity: 'backward'
});
if (!transformed) {
return null;
}
if (op.type === 'split_node' && Path.equals(op.path, point.path) && anchor.offset < op.position && diff.start < op.position) {
return transformed;
}
return {
path: transformed.path,
offset: transformed.offset + diff.text.length - diff.end + diff.start
};
}
function transformPendingRange(editor, range, op) {
var anchor = transformPendingPoint(editor, range.anchor, op);
if (!anchor) {
return null;
}
if (Range.isCollapsed(range)) {
return {
anchor,
focus: anchor
};
}
var focus = transformPendingPoint(editor, range.focus, op);
if (!focus) {
return null;
}
return {
anchor,
focus
};
}
function transformTextDiff(textDiff, op) {
var {
path,
diff,
id
} =