slate-dom
Version:
Tools for building completely customizable richtext editors with React.
1,939 lines • 73.5 kB
JavaScript
import { Transforms, Element, Editor, Scrubber, Range, Node, Text, Path, Point } 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) => {
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 (document.contains(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 || node.contains(target)) {
return true;
}
}
for (var _node of removedNodes) {
if (_node === target || _node.contains(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);
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 || "default");
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 (Element.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 (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(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 targetEl.closest("[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)
targetEl.closest('[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;
var slateNode = DOMEditor.hasTarget(editor, target) && DOMEditor.toSlateNode(editor, target);
return Element.isElement(slateNode) && Editor.isVoid(editor, slateNode);
},
setFragmentData: (editor, data, originEvent) => editor.setFragmentData(data, originEvent),
toDOMNode: (editor, node) => {
var KEY_TO_ELEMENT = EDITOR_TO_KEY_TO_ELEMENT.get(editor);
var domNode = Editor.isEditor(node) ? EDITOR_TO_ELEMENT.get(editor) : KEY_TO_ELEMENT === null || KEY_TO_ELEMENT === void 0 ? void 0 : KEY_TO_ELEMENT.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,
searchDirection = 'backward'
} = options;
var [nearestNode, nearestOffset] = exactMatch ? domPoint : normalizeDOMPoint(domPoint);
var parentNode = nearestNode.parentNode;
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 && editorEl.contains(potentialVoidNode) ? potentialVoidNode : null;
var potentialNonEditableNode = parentNode.closest('[contenteditable="false"]');
var nonEditableNode = potentialNonEditableNode && editorEl.contains(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 === 'forward') {
var _leafNodes$find;
var _leafNodes = [...getLeafNodes(elementNode), ...getLeafNodes(elementNode === null || elementNode === void 0 ? void 0 : elementNode.nextElementSibling)];
leafNode = (_leafNodes$find = _leafNodes.find(leaf => isAfter(nonEditableNode, leaf))) !== null && _leafNodes$find !== void 0 ? _leafNodes$find : null;
} else {
var _leafNodes2$findLast;
var _leafNodes2 = [...getLeafNodes(elementNode === null || elementNode === void 0 ? void 0 : elementNode.previousElementSibling), ...getLeafNodes(elementNode)];
leafNode = (_leafNodes2$findLast = _leafNodes2.findLast(leaf => isBefore(nonEditableNode, leaf))) !== null && _leafNodes2$findLast !== void 0 ? _leafNodes2$findLast : null;
}
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 {
path: _path,
offset: _offset
} = Editor.start(editor, DOMEditor.findPath(editor, _slateNode));
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 = DOMEditor.findPath(editor, slateNode);
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 (!Text.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 Text.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 (!Text.isText(leaf)) {
return null;
}
var parentBlock = Editor.above(editor, {
match: n => Element.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: Text.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
} = textDiff;
switch (op.type) {
case 'insert_text':
{
if (!Path.equals(op.path, path) || op.offset >= diff.end) {
return textDiff;
}
if (op.offset <= diff.start) {
return {
diff: {
start: op.text.length + diff.start,
end: op.text.length + diff.end,
text: diff.text
},
id,
path
};
}
return {
diff: {
start: diff.start,
end: diff.end + op.text.length,
text: diff.text
},
id,
path
};
}
case 'remove_text':
{
if (!Path.equals(op.path, path) || op.offset >= diff.end) {
return textDiff;
}
if (op.offset + op.text.length <= diff.start) {
return {
diff: {
start: diff.start - op.text.length,
end: diff.end - op.text.length,
text: diff.text
},
id,
path
};
}
return {
diff: {
start: diff.start,
end: diff.end - op.text.length,
text: diff.text
},
id,
path
};
}
case 'split_node':
{
if (!Path.equals(op.path, path) || op.position >= diff.end) {
return {
diff,
id,
path: Path.transform(path, op, {
affinity: 'backward'
})
};
}
if (op.position > diff.start) {
return {
diff: {
start: diff.start,
end: Math.min(op.position, diff.end),
text: diff.text
},
id,
path
};
}
return {
diff: {
start: diff.start - op.position,
end: diff.end - op.position,
text: diff.text
},
id,
path: Path.transform(path, op, {
affinity: 'forward'
})
};
}
case 'merge_node':
{
if (!Path.equals(op.path, path)) {
return {
diff,
id,
path: Path.transform(path, op)
};
}
return {
diff: {
start: diff.start + op.position,
end: diff.end + op.position,
text: diff.text
},
id,
path: Path.transform(path, op)
};
}
}
var newPath = Path.transform(path, op);
if (!newPath) {
return null;
}
return {
diff,
path: newPath,
id
};
}
/**
* 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 = DOMEditor.toDOMRange(editor, range1).getBoundingClientRect();
var rect2 = DOMEditor.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[left], parentRangeBoundary);
};
function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
* `withDOM` adds 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 withDOM = function withDOM(editor) {
var clipboardFormatKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'x-slate-fragment';
var e = editor;
var {
apply,
onChange,
deleteBackward,
addMark,
removeMark
} = e;
// The WeakMap which maps a key to a specific HTMLElement must be scoped to the editor instance to
// avoid collisions between editors in the DOM that share the same value.
EDITOR_TO_KEY_TO_ELEMENT.set(e, new WeakMap());
e.addMark = (key, value) => {
var _EDITOR_TO_SCHEDULE_F, _EDITOR_TO_PENDING_DI;
(_EDITOR_TO_SCHEDULE_F = EDITOR_TO_SCHEDULE_FLUSH.get(e)) === null || _EDITOR_TO_SCHEDULE_F === void 0 || _EDITOR_TO_SCHEDULE_F();
if (!EDITOR_TO_PENDING_INSERTION_MARKS.get(e) && (_EDITOR_TO_PENDING_DI = EDITOR_TO_PENDING_DIFFS.get(e)) !== null && _EDITOR_TO_PENDING_DI !== void 0 && _EDITOR_TO_PENDING_DI.length) {
// Ensure the current pending diffs originating from changes before the addMark
// are applied with the current formatting
EDITOR_TO_PENDING_INSERTION_MARKS.set(e, null);
}
EDITOR_TO_USER_MARKS.delete(e);
addMark(key, value);
};
e.removeMark = key => {
var _EDITOR_TO_PENDING_DI2;
if (!EDITOR_TO_PENDING_INSERTION_MARKS.get(e) && (_EDITOR_TO_PENDING_DI2 = EDITOR_TO_PENDING_DIFFS.get(e)) !== null && _EDITOR_TO_PENDING_DI2 !== void 0 && _EDITOR_TO_PENDING_DI2.length) {
// Ensure the current pending diffs originating from changes before the addMark
// are applied with the current formatting
EDITOR_TO_PENDING_INSERTION_MARKS.set(e, null);
}
EDITOR_TO_USER_MARKS.delete(e);
removeMark(key);
};
e.deleteBackward = unit => {
if (unit !== 'line') {
return deleteBackward(unit);
}
if (e.selection && Range.isCollapsed(e.selection)) {
var parentBlockEntry = Editor.above(e, {
match: n => Element.isElement(n) && Editor.isBlock(e, n),
at: e.selection
});
if (parentBlockEntry) {
var [, parentBlockPath] = parentBlockEntry;
var parentElementRange = Editor.range(e, parentBlockPath, e.selection.anchor);
var currentLineRange = findCurrentLineRange(e, parentElementRange);
if (!Range.isCollapsed(currentLineRange)) {
Transforms.delete(e, {
at: currentLineRange
});
}
}
}
};
// This attempts to reset the NODE_TO_KEY entry to the correct value
// as apply() changes the object reference and hence invalidates the NODE_TO_KEY entry
e.apply = op => {
var matches = [];
var pathRefMatches = [];
var pendingDiffs = EDITOR_TO_PENDING_DIFFS.get(e);
if (pendingDiffs !== null && pendingDiffs !== void 0 && pendingDiffs.length) {
var transformed = pendingDiffs.map(textDiff => transformTextDiff(textDiff, op)).filter(Boolean);
EDITOR_TO_PENDING_DIFFS.set(e, transformed);
}
var pendingSelection = EDITOR_TO_PENDING_SELECTION.get(e);
if (pendingSelection) {
EDITOR_TO_PENDING_SELECTION.set(e, transformPendingRange(e, pendingSelection, op));
}
var pendingAction = EDITOR_TO_PENDING_ACTION.get(e);
if (pendingAction !== null && pendingAction !== void 0 && pendingAction.at) {
var at = Point.isPoint(pendingAction === null || pendingAction === void 0 ? void 0 : pendingAction.at) ? transformPendingPoint(e, pendingAction.at, op) : transformPendingRange(e, pendingAction.at, op);
EDITOR_TO_PENDING_ACTION.set(e, at ? _objectSpread$1(_objectSpread$1({}, pendingAction), {}, {
at
}) : null);
}
switch (op.type) {
case 'insert_text':
case 'remove_text':
case 'set_node':
case 'split_node':
{
matches.push(...getMatches(e, op.path));
break;
}
case 'set_selection':
{
var _EDITOR_TO_USER_SELEC;
// Selection was manually set, don't restore the user selection after the change.
(_EDITOR_TO_USER_SELEC = EDITOR_TO_USER_SELECTION.get(e)) === null || _EDITOR_TO_USER_SELEC === void 0 || _EDITOR_TO_USER_SELEC.unref();
EDITOR_TO_USER_SELECTION.delete(e);
break;
}
case 'insert_node':
case 'remove_node':
{
matches.push(...getMatches(e, Path.parent(op.path)));
break;
}
case 'merge_node':
{
var prevPath = Path.previous(op.path);
matches.push(...getMatches(e, prevPath));
break;
}
case 'move_node':
{
var commonPath = Path.common(Path.parent(op.path), Path.parent(op.newPath));
matches.push(...getMatches(e, commonPath));
var changedPath;
if (Path.isBefore(op.path, op.newPath)) {
matches.push(...getMatches(e, Path.parent(op.path)));
changedPath = op.newPath;
} else {
matches.push(...getMatches(e, Path.parent(op.newPath)));
changedPath = op.path;
}
var changedNode = Node.get(editor, Path.parent(changedPath));
var changedNodeKey = DOMEditor.findKey(e, changedNode);
var changedPathRef = Editor.pathRef(e, Path.parent(changedPath));
pathRefMatches.push([changedPathRef, changedNodeKey]);
break;
}
}
apply(op);
switch (op.type) {
case 'insert_node':
case 'remove_node':
case 'merge_node':
case 'move_node':
case 'split_node':
case 'insert_text':
case 'remove_text':
case 'set_selection':
{
// FIXME: Rename to something like IS_DOM_EDITOR_DESYNCED
// to better reflect reality, see #5792
IS_NODE_MAP_DIRTY.set(e, true);
}
}
for (var [path, key] of matches) {
var [node] = Editor.node(e, path);
NODE_TO_KEY.set(node, key);
}
for (var [pathRef, _key] of pathRefMatches) {
if (pathRef.current) {
var [_node] = Editor.node(e, pathRef.current);
NODE_TO_KEY.set(_node, _key);
}
pathRef.unref();
}
};
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 = DOMEditor.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 = DOMEditor.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 = attach.ownerDocument.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/".concat(clipboardFormatKey), encoded);
// Add the content to a <div> so that we can get its inner HTML.
var div = contents.ownerDocument.createElement('div');
div.appendChild(contents);
div.setAttribute('hidden', 'true');
contents.ownerDocument.body.appendChild(div);
data.setData('text/html', div.innerHTML);
data.setData('text/plain', getPlainText(div));
contents.ownerDocument.body.removeChild(div);
return data;
};
e.insertData = data => {
if (!e.insertFragmentData(data)) {
e.insertTextData(data);
}
};
e.insertFragmentData = data => {
/**
* Checking copied fragment from application/x-slate-fragment or data-slate-fragment
*/
var fragment = data.getData("application/".concat(clipboardFormatKey)) || getSlateFragmentAttribute(data);
if (fragment) {
var decoded = decodeURIComponent(window.atob(fragment));
var parsed = JSON.parse(decoded);
e.insertFragment(parsed);
return true;
}
return false;
};
e.insertTextData = data => {
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;
}
return true;
}
return false;
};
e.onChange = options => {
var onContextChange = EDITOR_TO_ON_CHANGE.get(e);
if (onContextChange) {
onContextChange(options);
}
onChange(options);
};
return e;
};
var getMatches = (e, path) => {
var matches = [];
for (var [n, p] of Editor.levels(e, {
at: path
})) {
var key = DOMEditor.findKey(e, n);
matches.push([p, key]);
}
return matches;
};
var TRIPLE_CLICK = 3;
/**
* 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',
insertSoftBreak: 'shift+enter',
splitBlock: '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 && isHotkey(generic);
var isApple = apple && isHotkey(apple);
var isWindows = windows && isHotkey(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'),
isSoftBreak: create('insertSoftBreak'),
isSplitBlock: create('splitBlock'),
isTransposeCharacter: create('transposeCharacter'),
isUndo: create('undo')
};
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;
}
var _excluded = ["anchor", "focus"],
_excluded2 = ["anchor", "focus"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var shallowCompare = (obj1, obj2) => Object.keys(obj1).length === Object.keys(obj2).length && Object.keys(obj1).every(key => obj2.hasOwnProperty(key) && obj1[key] === obj2[key]);
var isDecorationFlagsEqual = (range, other) => {
var rangeOwnProps = _objectWithoutProperties(range, _excluded);
var otherOwnProps = _objectWithoutProperties(other, _excluded2);
return range[PLACEHOLDER_SYMBOL] === other[PLACEHOLDER_SYMBOL] && shallowCompare(rangeOwnProps, otherOwnProps);
};
/**
* 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 isElementDecorationsEqual = (list, another) => {
if (list === another) {
return true;
}
if (!list || !another) {
return false;
}
if (list.length !== another.length) {
return false;
}
for (var i = 0; i < list.length; i++) {
var range = list[i];
var other = another[i];
if (!Range.equals(range, other) || !isDecorationFlagsEqual(range, other)) {
return false;
}
}
return true;
};
/**
* 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 isTextDecorationsEqual = (list, another) => {
if (list === another) {
return true;
}
if (!list || !another) {
return false;
}
if (list.length !== another.length) {
return false;
}
for (var i = 0; i < list.length; i++) {
var range = list[i];
var other = another[i];
// compare only offsets because paths doesn't matter for text
if (range.anchor.offset !== other.anchor.offset || range.focus.offset !== other.focus.offset || !isDecorationFlagsEqual(range, other)) {
return false;
}
}
return true;
};
/**
* Split and group decorations by each child of a node.
*
* @returns An array with length equal to that of `node.children`. Each index
* corresponds to a child of `node`, and the value is an array of decorations
* for that child.
*/
var splitDecorationsByChild = (editor, node, decorations) => {
var decorationsByChild = Array.from(node.children, () => []);
if (decorations.length === 0) {
return decorationsByChild;
}
var path = DOMEditor.findPath(editor, node);
var level = path.length;
var ancestorRange = Editor.range(editor, path);
var cachedChildRanges = new Array(node.children.length);
var getChildRange = index => {
var cachedRange = cachedChildRanges[index];
if (cachedRange) return cachedRange;
var childRange = Editor.range(editor, [...path, index]);
cachedChildRanges[index] = childRange;
return childRange;
};
for (var decoration of decorations) {
var decorationRange = Range.intersection(ancestorRange, decoration);
if (!decorationRange) continue;
var [startPoint, endPoint] = Range.edges(decorationRange);
var startIndex = startPoint.path[level];
var endIndex = endPoint.path[level];
for (var i = startIndex; i <= endIndex; i++) {
var ds = decorationsByChild[i];
if (!ds) continue;
var childRange = getChildRange(i);
var childDecorationRange = Range.intersection(childRange, decoration);
if (!childDecorationRange) continue;
ds.push(_objectSpread(_objectSpread({}, decoration), childDecorationRange));
}
}
return decorationsByChild;
};
export { CAN_USE_DOM, DOMEditor, DOMElement, DOMNode, DOMRange, DOMSelection, DOMStaticRange, DOMText, EDITOR_TO_ELEMENT, EDITOR_TO_FORCE_RENDER, EDITOR_TO_KEY_TO_ELEMENT, EDITOR_TO_ON_CHANGE, EDITOR_TO_PENDING_ACTION, EDITOR_TO_PENDING_DIFFS, EDITOR_TO_PENDING_INSERTION_MARKS, EDITOR_TO_PENDING_SELECTION, EDITOR_TO_PLACEHOLDER_ELEMENT, EDITOR_TO_SCHEDULE_FLUSH, EDITOR_TO_USER_MARKS, EDITOR_TO_USER_SELECTION, EDITOR_TO_WINDOW, ELEMENT_TO_NODE, HAS_BEFORE_INPUT_SUPPORT, hotkeys as Hotkeys, IS_ANDROID, IS_CHROME, IS_COMPOSING, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_FOCUSED, IS_IOS, IS_NODE_MAP_DIRTY, IS_READ_ONLY, IS_UC_MOBILE, IS_WEBKIT, IS_WECHATBROWSER, Key, MARK_PLACEHOLDER_SYMBOL, NODE_TO_ELEMENT, NODE_TO_INDEX, NODE_TO_KEY, NODE_TO_PARENT, PLACEHOLDER_SYMBOL, TRIPLE_CLICK, applyStringDiff, getActiveElement, getDefaultView, getSelection, hasShadowRoot, isAfter, isBefore, isDOMElement, isDOMNode, isDOMSelection, isElementDecorationsEqual, isPlainTextOnlyPaste, isTextDecorationsEqual, isTrackedMutation, mergeStringDiffs, normalizeDOMPoint, normalizePoint, normalizeRange, normalizeStringDiff, splitDecorationsByChild, targetRange, verifyDiffState, withDOM };
//# sourceMappingURL=index.es.js.map