slate-angular 1.9.3 → 13.0.0

package/fesm2020/slate-angular.mjs

@@ -0,0 +1,3643 @@
+import { Editor, Range, Transforms, Path, Element, Text as Text$1, Node } from 'slate';
+import { isKeyHotkey } from 'is-hotkey';
+import * as i0 from '@angular/core';
+import { TemplateRef, Component, ViewChild, Directive, Input, HostBinding, ChangeDetectionStrategy, ViewChildren, InjectionToken, Inject, forwardRef, ElementRef, NgModule } from '@angular/core';
+import getDirection from 'direction';
+import { Subject } from 'rxjs';
+import Debug from 'debug';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { HistoryEditor } from 'slate-history';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+/**
+ * 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.
+ */
+const EDITOR_TO_WINDOW = new WeakMap();
+const NODE_TO_INDEX = new WeakMap();
+const 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.
+ */
+const EDITOR_TO_ELEMENT = new WeakMap();
+const EDITOR_TO_PLACEHOLDER = new WeakMap();
+const ELEMENT_TO_NODE = new WeakMap();
+// Deprecated
+const KEY_TO_ELEMENT = new WeakMap();
+const NODE_TO_ELEMENT = new WeakMap();
+const NODE_TO_KEY = new WeakMap();
+/**
+ * Weak maps for storing editor-related state.
+ */
+const IS_READONLY = new WeakMap();
+const IS_FOCUSED = new WeakMap();
+const IS_DRAGGING = new WeakMap();
+const IS_CLICKING = new WeakMap();
+/**
+ * Weak map for associating the context `onChange` context with the plugin.
+ */
+const EDITOR_TO_ON_CHANGE = new WeakMap();
+// export const NODE_TO_VIEWNODE = new WeakMap<Node, ViewNode>();
+/**
+ * Symbols.
+ */
+const PLACEHOLDER_SYMBOL = Symbol('placeholder');
+/**
+ * Weak map for associating the html element with the component.
+ */
+const ELEMENT_TO_COMPONENT = new WeakMap();
+
+/**
+ * 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 DOMComment = globalThis.Comment;
+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
+ */
+const getDefaultView = (value) => {
+    return ((value && value.ownerDocument && value.ownerDocument.defaultView) || null);
+};
+/**
+ * Check if a DOM node is a comment node.
+ */
+const isDOMComment = (value) => {
+    return isDOMNode(value) && value.nodeType === 8;
+};
+/**
+ * Check if a DOM node is an element node.
+ */
+const isDOMElement = (value) => {
+    return isDOMNode(value) && value.nodeType === 1;
+};
+/**
+ * Check if a value is a DOM node.
+ */
+const isDOMNode = (value) => {
+    const window = getDefaultView(value);
+    return !!window && value instanceof window.Node;
+};
+/**
+ * Check if a value is a DOM selection.
+ */
+const isDOMSelection = (value) => {
+    const window = value && value.anchorNode && getDefaultView(value.anchorNode);
+    return !!window && value instanceof window.Selection;
+};
+/**
+ * Check if a DOM node is an element node.
+ */
+const isDOMText = (value) => {
+    return isDOMNode(value) && value.nodeType === 3;
+};
+/**
+ * Checks whether a paste event is a plaintext-only event.
+ */
+const 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.
+ */
+const normalizeDOMPoint = (domPoint) => {
+    let [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) {
+        let isLast = offset === node.childNodes.length;
+        let 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) {
+            const i = isLast ? node.childNodes.length - 1 : 0;
+            node = getEditableChild(node, i, isLast ? 'backward' : 'forward');
+        }
+        // Determine the new offset inside the text node.
+        offset =
+            isLast && node.textContent != null ? node.textContent.length : 0;
+    }
+    // Return the node and offset.
+    return [node, offset];
+};
+/**
+ * Determines wether the active element is nested within a shadowRoot
+ */
+const hasShadowRoot = () => {
+    return !!(window.document.activeElement && window.document.activeElement.shadowRoot);
+};
+/**
+ * Get the nearest editable child and index at `index` in a `parent`, preferring
+ * `direction`.
+ */
+const getEditableChildAndIndex = (parent, index, direction) => {
+    const { childNodes } = parent;
+    let child = childNodes[index];
+    let i = index;
+    let triedForward = false;
+    let 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`.
+ */
+const getEditableChild = (parent, index, direction) => {
+    const [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.
+ */
+const getPlainText = (domNode) => {
+    let text = '';
+    if (isDOMText(domNode) && domNode.nodeValue) {
+        return domNode.nodeValue;
+    }
+    if (isDOMElement(domNode)) {
+        for (const childNode of Array.from(domNode.childNodes)) {
+            text += getPlainText(childNode);
+        }
+        const display = getComputedStyle(domNode).getPropertyValue('display');
+        if (display === 'block' || display === 'list' || domNode.tagName === 'BR') {
+            text += '\n';
+        }
+    }
+    return text;
+};
+/**
+ * Get x-slate-fragment attribute from data-slate-fragment
+ */
+const catchSlateFragment = /data-slate-fragment="(.+?)"/m;
+const getSlateFragmentAttribute = (dataTransfer) => {
+    const htmlData = dataTransfer.getData('text/html');
+    const [, fragment] = htmlData.match(catchSlateFragment) || [];
+    return fragment;
+};
+/**
+ * Get the x-slate-fragment attribute that exist in text/html data
+ * and append it to the DataTransfer object
+ */
+const getClipboardData = (dataTransfer, clipboardFormatKey = 'x-slate-fragment') => {
+    if (!dataTransfer.getData(`application/${clipboardFormatKey}`)) {
+        const fragment = getSlateFragmentAttribute(dataTransfer);
+        if (fragment) {
+            const clipboardData = new DataTransfer();
+            dataTransfer.types.forEach(type => {
+                clipboardData.setData(type, dataTransfer.getData(type));
+            });
+            clipboardData.setData(`application/${clipboardFormatKey}`, fragment);
+            return clipboardData;
+        }
+    }
+    return dataTransfer;
+};
+
+/**
+ * An auto-incrementing identifier for keys.
+ */
+let n = 0;
+/**
+ * A class that keeps track of a key string. We use a full class here because we
+ * want to be able to use them as keys in `WeakMap` objects.
+ */
+class Key {
+    constructor() {
+        this.id = `${n++}`;
+    }
+}
+
+const IS_IOS = typeof navigator !== 'undefined' &&
+    typeof window !== 'undefined' &&
+    /iPad|iPhone|iPod/.test(navigator.userAgent) &&
+    !window.MSStream;
+const IS_APPLE = typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.userAgent);
+const IS_ANDROID = typeof navigator !== 'undefined' && /Android/.test(navigator.userAgent);
+const IS_FIREFOX = typeof navigator !== 'undefined' &&
+    /^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);
+const IS_SAFARI = typeof navigator !== 'undefined' &&
+    /Version\/[\d\.]+.*Safari/.test(navigator.userAgent);
+// "modern" Edge was released at 79.x
+const IS_EDGE_LEGACY = typeof navigator !== 'undefined' &&
+    /Edge?\/(?:[0-6][0-9]|[0-7][0-8])/i.test(navigator.userAgent);
+const 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
+const IS_CHROME_LEGACY = typeof navigator !== 'undefined' &&
+    /Chrome?\/(?:[0-7][0-5]|[0-6][0-9])/i.test(navigator.userAgent) &&
+    // Exclude Chrome version greater than 3 bits，Chrome releases v100 on 2022.03.29
+    !/Chrome?\/(?:\d{3,})/i.test(navigator.userAgent);
+// Firefox did not support `beforeInput` until `v87`.
+const IS_FIREFOX_LEGACY = typeof navigator !== 'undefined' &&
+    /^(?!.*Seamonkey)(?=.*Firefox\/(?:[0-7][0-9]|[0-8][0-6])).*/i.test(navigator.userAgent);
+// qq browser
+const IS_QQBROWSER = typeof navigator !== 'undefined' && /.*QQBrowser/.test(navigator.userAgent);
+// UC mobile browser
+const IS_UC_MOBILE = typeof navigator !== 'undefined' && /.*UCBrowser/.test(navigator.userAgent);
+// Wechat browser
+const IS_WECHATBROWSER = typeof navigator !== 'undefined' && /.*Wechat/.test(navigator.userAgent);
+// COMPAT: Firefox/Edge Legacy don't support the `beforeinput` event
+// Chrome Legacy doesn't support `beforeinput` correctly
+const HAS_BEFORE_INPUT_SUPPORT = !IS_CHROME_LEGACY &&
+    !IS_EDGE_LEGACY &&
+    // globalThis is undefined in older browsers
+    typeof globalThis !== 'undefined' &&
+    globalThis.InputEvent &&
+    // @ts-ignore The `getTargetRanges` property isn't recognized.
+    typeof globalThis.InputEvent.prototype.getTargetRanges === 'function';
+
+const FAKE_LEFT_BLOCK_CARD_OFFSET = -1;
+const FAKE_RIGHT_BLOCK_CARD_OFFSET = -2;
+function hasBlockCardWithNode(node) {
+    return node && (node.parentElement.hasAttribute('card-target') || (node instanceof HTMLElement && node.hasAttribute('card-target')));
+}
+function hasBlockCard(selection) {
+    return hasBlockCardWithNode(selection?.anchorNode) || hasBlockCardWithNode(selection?.focusNode);
+}
+function getCardTargetAttribute(node) {
+    return node.parentElement.attributes['card-target'] || (node instanceof HTMLElement && node.attributes['card-target']);
+}
+function isCardLeft(node) {
+    const cardTarget = getCardTargetAttribute(node);
+    return cardTarget && cardTarget.nodeValue === 'card-left';
+}
+function isCardLeftByTargetAttr(targetAttr) {
+    return targetAttr && targetAttr.nodeValue === 'card-left';
+}
+function isCardRightByTargetAttr(targetAttr) {
+    return targetAttr && targetAttr.nodeValue === 'card-right';
+}
+function isCardCenterByTargetAttr(targetAttr) {
+    return targetAttr && targetAttr.nodeValue === 'card-center';
+}
+
+const AngularEditor = {
+    /**
+     * Return the host window of the current editor.
+     */
+    getWindow(editor) {
+        const window = EDITOR_TO_WINDOW.get(editor);
+        if (!window) {
+            throw new Error('Unable to find a host window element for this editor');
+        }
+        return window;
+    },
+    /**
+     * Find a key for a Slate node.
+     */
+    findKey(editor, node) {
+        let key = NODE_TO_KEY.get(node);
+        if (!key) {
+            key = new Key();
+            NODE_TO_KEY.set(node, key);
+        }
+        return key;
+    },
+    /**
+     * handle editor error.
+     */
+    onError(errorData) {
+        if (errorData.nativeError) {
+            throw errorData.nativeError;
+        }
+    },
+    /**
+     * Find the path of Slate node.
+     */
+    findPath(editor, node) {
+        const path = [];
+        let child = node;
+        while (true) {
+            const parent = NODE_TO_PARENT.get(child);
+            if (parent == null) {
+                if (Editor.isEditor(child)) {
+                    return path;
+                }
+                else {
+                    break;
+                }
+            }
+            const 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: ${JSON.stringify(node)}`);
+    },
+    /**
+     * Find the DOM node that implements DocumentOrShadowRoot for the editor.
+     */
+    findDocumentOrShadowRoot(editor) {
+        const el = AngularEditor.toDOMNode(editor, editor);
+        const root = el.getRootNode();
+        if ((root instanceof Document || root instanceof ShadowRoot) &&
+            root.getSelection != null) {
+            return root;
+        }
+        return el.ownerDocument;
+    },
+    /**
+     * Check if the editor is focused.
+     */
+    isFocused(editor) {
+        return !!IS_FOCUSED.get(editor);
+    },
+    /**
+     * Check if the editor is in read-only mode.
+     */
+    isReadonly(editor) {
+        return !!IS_READONLY.get(editor);
+    },
+    /**
+     * Check if the editor is hanging right.
+     */
+    isBlockHangingRight(editor) {
+        const { selection } = editor;
+        if (!selection) {
+            return false;
+        }
+        if (Range.isCollapsed(selection)) {
+            return false;
+        }
+        const [start, end] = Range.edges(selection);
+        const endBlock = Editor.above(editor, { at: end, match: (node) => Editor.isBlock(editor, node) });
+        return Editor.isStart(editor, end, endBlock[1]);
+    },
+    /**
+     * Blur the editor.
+     */
+    blur(editor) {
+        const el = AngularEditor.toDOMNode(editor, editor);
+        const root = AngularEditor.findDocumentOrShadowRoot(editor);
+        IS_FOCUSED.set(editor, false);
+        if (root.activeElement === el) {
+            el.blur();
+        }
+    },
+    /**
+     * Focus the editor.
+     */
+    focus(editor) {
+        const el = AngularEditor.toDOMNode(editor, editor);
+        IS_FOCUSED.set(editor, true);
+        const window = AngularEditor.getWindow(editor);
+        if (window.document.activeElement !== el) {
+            el.focus({ preventScroll: true });
+        }
+    },
+    /**
+     * Deselect the editor.
+     */
+    deselect(editor) {
+        const { selection } = editor;
+        const root = AngularEditor.findDocumentOrShadowRoot(editor);
+        const domSelection = root.getSelection();
+        if (domSelection && domSelection.rangeCount > 0) {
+            domSelection.removeAllRanges();
+        }
+        if (selection) {
+            Transforms.deselect(editor);
+        }
+    },
+    /**
+     * Check if a DOM node is within the editor.
+     */
+    hasDOMNode(editor, target, options = {}) {
+        const { editable = false } = options;
+        const editorEl = AngularEditor.toDOMNode(editor, editor);
+        let targetEl;
+        // COMPAT: In Firefox, reading `target.nodeType` will throw an error if
+        // target is originating from an internal "restricted" element (e.g. a
+        // stepper arrow on a number input). (2018/05/04)
+        // https://github.com/ianstormtaylor/slate/issues/1819
+        try {
+            targetEl = (isDOMElement(target) ? target : target.parentElement);
+        }
+        catch (err) {
+            if (!err.message.includes('Permission denied to access property "nodeType"')) {
+                throw err;
+            }
+        }
+        if (!targetEl) {
+            return false;
+        }
+        return targetEl.closest(`[data-slate-editor]`) === editorEl &&
+            (!editable || targetEl.isContentEditable ||
+                !!targetEl.getAttribute('data-slate-zero-width'));
+    },
+    /**
+     * Insert data from a `DataTransfer` into the editor.
+     */
+    insertData(editor, data) {
+        editor.insertData(data);
+    },
+    /**
+   * Insert fragment data from a `DataTransfer` into the editor.
+   */
+    insertFragmentData(editor, data) {
+        return editor.insertFragmentData(data);
+    },
+    /**
+     * Insert text data from a `DataTransfer` into the editor.
+     */
+    insertTextData(editor, data) {
+        return editor.insertTextData(data);
+    },
+    /**
+     * onKeydown hook.
+     */
+    onKeydown(editor, data) {
+        editor.onKeydown(data);
+    },
+    /**
+    * onClick hook.
+    */
+    onClick(editor, data) {
+        editor.onClick(data);
+    },
+    /**
+     * Sets data from the currently selected fragment on a `DataTransfer`.
+     */
+    setFragmentData(editor, data, originEvent) {
+        editor.setFragmentData(data, originEvent);
+    },
+    deleteCutData(editor) {
+        editor.deleteCutData();
+    },
+    /**
+     * Find the native DOM element from a Slate node.
+     */
+    toDOMNode(editor, node) {
+        const domNode = Editor.isEditor(node)
+            ? EDITOR_TO_ELEMENT.get(editor)
+            : NODE_TO_ELEMENT.get(node);
+        if (!domNode) {
+            throw new Error(`Cannot resolve a DOM node from Slate node: ${JSON.stringify(node)}`);
+        }
+        return domNode;
+    },
+    /**
+     * Find a native DOM selection point from a Slate point.
+     */
+    toDOMPoint(editor, point) {
+        const [node] = Editor.node(editor, point.path);
+        const el = AngularEditor.toDOMNode(editor, node);
+        let domPoint;
+        // block card
+        const cardTargetAttr = getCardTargetAttribute(el);
+        if (cardTargetAttr) {
+            if (point.offset === FAKE_LEFT_BLOCK_CARD_OFFSET) {
+                const cursorNode = AngularEditor.getCardCursorNode(editor, node, { direction: 'left' });
+                return [cursorNode, 1];
+            }
+            else {
+                const cursorNode = AngularEditor.getCardCursorNode(editor, node, { direction: 'right' });
+                return [cursorNode, 1];
+            }
+        }
+        // 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.)
+        const selector = `[data-slate-string], [data-slate-zero-width]`;
+        const texts = Array.from(el.querySelectorAll(selector));
+        let start = 0;
+        for (const text of texts) {
+            const domNode = text.childNodes[0];
+            if (domNode == null || domNode.textContent == null) {
+                continue;
+            }
+            const { length } = domNode.textContent;
+            const attr = text.getAttribute('data-slate-length');
+            const trueLength = attr == null ? length : parseInt(attr, 10);
+            const end = start + trueLength;
+            if (point.offset <= end) {
+                const offset = Math.min(length, Math.max(0, point.offset - start));
+                domPoint = [domNode, offset];
+                // fixed cursor position after zero width char
+                if (offset === 0 && length === 1 && domNode.textContent === '\uFEFF') {
+                    domPoint = [domNode, offset + 1];
+                }
+                break;
+            }
+            start = end;
+        }
+        if (!domPoint) {
+            throw new Error(`Cannot resolve a DOM point from Slate point: ${JSON.stringify(point)}`);
+        }
+        return domPoint;
+    },
+    /**
+     * Find a native DOM range from a Slate `range`.
+     */
+    toDOMRange(editor, range) {
+        const { anchor, focus } = range;
+        const isBackward = Range.isBackward(range);
+        const domAnchor = AngularEditor.toDOMPoint(editor, anchor);
+        const domFocus = Range.isCollapsed(range) ? domAnchor : AngularEditor.toDOMPoint(editor, focus);
+        const window = AngularEditor.getWindow(editor);
+        const domRange = window.document.createRange();
+        const [startNode, startOffset] = isBackward ? domFocus : domAnchor;
+        const [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.
+        const startEl = (isDOMElement(startNode)
+            ? startNode
+            : startNode.parentElement);
+        const isStartAtZeroWidth = !!startEl.getAttribute('data-slate-zero-width');
+        const endEl = (isDOMElement(endNode)
+            ? endNode
+            : endNode.parentElement);
+        const isEndAtZeroWidth = !!endEl.getAttribute('data-slate-zero-width');
+        domRange.setStart(startNode, isStartAtZeroWidth ? 1 : startOffset);
+        domRange.setEnd(endNode, isEndAtZeroWidth ? 1 : endOffset);
+        return domRange;
+    },
+    /**
+     * Find a Slate node from a native DOM `element`.
+     */
+    toSlateNode(editor, domNode) {
+        let domEl = isDOMElement(domNode) ? domNode : domNode.parentElement;
+        if (domEl && !domEl.hasAttribute('data-slate-node')) {
+            domEl = domEl.closest(`[data-slate-node]`);
+        }
+        const node = domEl ? ELEMENT_TO_NODE.get(domEl) : null;
+        if (!node) {
+            throw new Error(`Cannot resolve a Slate node from DOM node: ${domEl}`);
+        }
+        return node;
+    },
+    /**
+     * Get the target range from a DOM `event`.
+     */
+    findEventRange(editor, event) {
+        if ('nativeEvent' in event) {
+            event = event.nativeEvent;
+        }
+        const { clientX: x, clientY: y, target } = event;
+        if (x == null || y == null) {
+            throw new Error(`Cannot resolve a Slate range from a DOM event: ${event}`);
+        }
+        const node = AngularEditor.toSlateNode(editor, event.target);
+        const path = AngularEditor.findPath(editor, node);
+        // If the drop target is inside a void node, move it into either the
+        // next or previous node, depending on which side the `x` and `y`
+        // coordinates are closest to.
+        if (Editor.isVoid(editor, node)) {
+            const rect = target.getBoundingClientRect();
+            const isPrev = editor.isInline(node)
+                ? x - rect.left < rect.left + rect.width - x
+                : y - rect.top < rect.top + rect.height - y;
+            const edge = Editor.point(editor, path, {
+                edge: isPrev ? 'start' : 'end'
+            });
+            const point = isPrev ? Editor.before(editor, edge) : Editor.after(editor, edge);
+            if (point) {
+                return Editor.range(editor, point);
+            }
+        }
+        // Else resolve a range from the caret position where the drop occured.
+        let domRange;
+        const window = AngularEditor.getWindow(editor);
+        const { document } = window;
+        // COMPAT: In Firefox, `caretRangeFromPoint` doesn't exist. (2016/07/25)
+        if (document.caretRangeFromPoint) {
+            domRange = document.caretRangeFromPoint(x, y);
+        }
+        else {
+            const 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: ${event}`);
+        }
+        // Resolve a Slate range from the DOM range.
+        const range = AngularEditor.toSlateRange(editor, domRange);
+        return range;
+    },
+    /**
+     * Find a Slate point from a DOM selection's `domNode` and `domOffset`.
+     */
+    toSlatePoint(editor, domPoint) {
+        const [domNode] = domPoint;
+        const [nearestNode, nearestOffset] = normalizeDOMPoint(domPoint);
+        let parentNode = nearestNode.parentNode;
+        let textNode = null;
+        let offset = 0;
+        // block card
+        const cardTargetAttr = getCardTargetAttribute(domNode);
+        if (cardTargetAttr) {
+            const domSelection = window.getSelection();
+            const isBackward = editor.selection && Range.isBackward(editor.selection);
+            const blockCardEntry = AngularEditor.toSlateCardEntry(editor, domNode) || AngularEditor.toSlateCardEntry(editor, nearestNode);
+            const [, blockPath] = blockCardEntry;
+            if (domSelection.isCollapsed) {
+                if (isCardLeftByTargetAttr(cardTargetAttr)) {
+                    return { path: blockPath, offset: -1 };
+                }
+                else {
+                    return { path: blockPath, offset: -2 };
+                }
+            }
+            // forward
+            // and to the end of previous node
+            if (isCardLeftByTargetAttr(cardTargetAttr) && !isBackward) {
+                const endPath = blockPath[blockPath.length - 1] <= 0
+                    ? blockPath
+                    : Path.previous(blockPath);
+                return Editor.end(editor, endPath);
+            }
+            // to the of current node
+            if ((isCardCenterByTargetAttr(cardTargetAttr) ||
+                isCardRightByTargetAttr(cardTargetAttr)) &&
+                !isBackward) {
+                return Editor.end(editor, blockPath);
+            }
+            // backward
+            // and to the start of next node
+            if (isCardRightByTargetAttr(cardTargetAttr) && isBackward) {
+                return Editor.start(editor, Path.next(blockPath));
+            }
+            // and to the start of current node
+            if ((isCardCenterByTargetAttr(cardTargetAttr) ||
+                isCardLeftByTargetAttr(cardTargetAttr)) &&
+                isBackward) {
+                return Editor.start(editor, blockPath);
+            }
+        }
+        if (parentNode) {
+            const voidNode = parentNode.closest('[data-slate-void="true"]');
+            let leafNode = parentNode.closest('[data-slate-leaf]');
+            let 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"]');
+                const window = AngularEditor.getWindow(editor);
+                const range = window.document.createRange();
+                range.setStart(textNode, 0);
+                range.setEnd(nearestNode, nearestOffset);
+                const contents = range.cloneContents();
+                const removals = [
+                    ...Array.prototype.slice.call(contents.querySelectorAll('[data-slate-zero-width]')),
+                    ...Array.prototype.slice.call(contents.querySelectorAll('[contenteditable=false]')),
+                ];
+                removals.forEach(el => {
+                    el.parentNode.removeChild(el);
+                });
+                // COMPAT: Edge has a bug where Range.prototype.toString() will
+                // convert \n into \r\n. The bug causes a loop when slate-react
+                // attempts to reposition its cursor to match the native position. Use
+                // textContent.length instead.
+                // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10291116/
+                offset = contents.textContent.length;
+                domNode = textNode;
+            }
+            else if (voidNode) {
+                // For void nodes, the element with the offset key will be a cousin, not an
+                // ancestor, so find it by going down from the nearest void parent.
+                leafNode = voidNode.querySelector('[data-slate-leaf]');
+                parentNode = voidNode.querySelector('[data-slate-length="0"]');
+                textNode = leafNode.closest('[data-slate-node="text"]');
+                domNode = leafNode;
+                offset = domNode.textContent.length;
+            }
+            // COMPAT: If the parent node is a Slate zero-width space, editor is
+            // because the text node should have no characters. However, during IME
+            // composition the ASCII characters will be prepended to the zero-width
+            // space, so subtract 1 from the offset to account for the zero-width
+            // space character.
+            if (domNode &&
+                offset === domNode.textContent.length &&
+                (parentNode && parentNode.hasAttribute('data-slate-zero-width'))) {
+                offset--;
+            }
+        }
+        if (!textNode) {
+            throw new Error(`Cannot resolve a Slate point from DOM point: ${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)
+        const slateNode = AngularEditor.toSlateNode(editor, textNode);
+        const path = AngularEditor.findPath(editor, slateNode);
+        return { path, offset };
+    },
+    /**
+     * Find a Slate range from a DOM range or selection.
+     */
+    toSlateRange(editor, domRange) {
+        const el = isDOMSelection(domRange) ? domRange.anchorNode : domRange.startContainer;
+        let anchorNode;
+        let anchorOffset;
+        let focusNode;
+        let focusOffset;
+        let isCollapsed;
+        if (el) {
+            if (isDOMSelection(domRange)) {
+                anchorNode = domRange.anchorNode;
+                anchorOffset = domRange.anchorOffset;
+                focusNode = domRange.focusNode;
+                focusOffset = domRange.focusOffset;
+                // COMPAT: There's a bug in chrome that always returns `true` for
+                // `isCollapsed` for a Selection that comes from a ShadowRoot.
+                // (2020/08/08)
+                // https://bugs.chromium.org/p/chromium/issues/detail?id=447523
+                if (IS_CHROME && hasShadowRoot()) {
+                    isCollapsed =
+                        domRange.anchorNode === domRange.focusNode &&
+                            domRange.anchorOffset === domRange.focusOffset;
+                }
+                else {
+                    isCollapsed = domRange.isCollapsed;
+                }
+            }
+            else {
+                anchorNode = domRange.startContainer;
+                anchorOffset = domRange.startOffset;
+                focusNode = domRange.endContainer;
+                focusOffset = domRange.endOffset;
+                isCollapsed = domRange.collapsed;
+            }
+        }
+        if (anchorNode == null || focusNode == null || anchorOffset == null || focusOffset == null) {
+            throw new Error(`Cannot resolve a Slate range from DOM range: ${domRange}`);
+        }
+        const anchor = AngularEditor.toSlatePoint(editor, [anchorNode, anchorOffset]);
+        const focus = isCollapsed ? anchor : AngularEditor.toSlatePoint(editor, [focusNode, focusOffset]);
+        return { anchor, focus };
+    },
+    isLeafBlock(editor, node) {
+        return Element.isElement(node) && !editor.isInline(node) && Editor.hasInlines(editor, node);
+    },
+    isBlockCardLeftCursor(editor) {
+        return editor.selection.anchor.offset === FAKE_LEFT_BLOCK_CARD_OFFSET && editor.selection.focus.offset === FAKE_LEFT_BLOCK_CARD_OFFSET;
+    },
+    isBlockCardRightCursor(editor) {
+        return editor.selection.anchor.offset === FAKE_RIGHT_BLOCK_CARD_OFFSET && editor.selection.focus.offset === FAKE_RIGHT_BLOCK_CARD_OFFSET;
+    },
+    getCardCursorNode(editor, blockCardNode, options) {
+        const blockCardElement = AngularEditor.toDOMNode(editor, blockCardNode);
+        const cardCenter = blockCardElement.parentElement;
+        return options.direction === 'left'
+            ? cardCenter.previousElementSibling
+            : cardCenter.nextElementSibling;
+    },
+    toSlateCardEntry(editor, node) {
+        const element = node.parentElement
+            .closest('.slate-block-card')?.querySelector('[card-target="card-center"]')
+            .firstElementChild;
+        const slateNode = AngularEditor.toSlateNode(editor, element);
+        const path = AngularEditor.findPath(editor, slateNode);
+        return [slateNode, path];
+    },
+    /**
+     * move native selection to card-left or card-right
+     * @param editor
+     * @param blockCardNode
+     * @param options
+     */
+    moveBlockCard(editor, blockCardNode, options) {
+        const cursorNode = AngularEditor.getCardCursorNode(editor, blockCardNode, options);
+        const window = AngularEditor.getWindow(editor);
+        const domSelection = window.getSelection();
+        domSelection.setBaseAndExtent(cursorNode, 1, cursorNode, 1);
+    },
+    /**
+     * move slate selection to card-left or card-right
+     * @param editor
+     * @param path
+     * @param options
+     */
+    moveBlockCardCursor(editor, path, options) {
+        const cursor = { path, offset: options.direction === 'left' ? FAKE_LEFT_BLOCK_CARD_OFFSET : FAKE_RIGHT_BLOCK_CARD_OFFSET };
+        Transforms.select(editor, { anchor: cursor, focus: cursor });
+    },
+    hasRange(editor, range) {
+        const { anchor, focus } = range;
+        return (Editor.hasPath(editor, anchor.path) && Editor.hasPath(editor, focus.path));
+    },
+};
+
+/**
+ * Hotkey mappings for each platform.
+ */
+const HOTKEYS = {
+    bold: 'mod+b',
+    compose: ['down', 'left', 'right', 'up', 'backspace', 'enter'],
+    moveBackward: 'left',
+    moveForward: 'right',
+    moveUp: 'up',
+    moveDown: 'down',
+    moveWordBackward: 'ctrl+left',
+    moveWordForward: 'ctrl+right',
+    deleteBackward: 'shift?+backspace',
+    deleteForward: 'shift?+delete',
+    extendBackward: 'shift+left',
+    extendForward: 'shift+right',
+    italic: 'mod+i',
+    splitBlock: 'shift?+enter',
+    undo: 'mod+z'
+};
+const 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'
+};
+const WINDOWS_HOTKEYS = {
+    deleteWordBackward: 'ctrl+shift?+backspace',
+    deleteWordForward: 'ctrl+shift?+delete',
+    redo: ['ctrl+y', 'ctrl+shift+z']
+};
+/**
+ * Create a platform-aware hotkey checker.
+ */
+const create = (key) => {
+    const generic = HOTKEYS[key];
+    const apple = APPLE_HOTKEYS[key];
+    const windows = WINDOWS_HOTKEYS[key];
+    const isGeneric = generic && isKeyHotkey(generic);
+    const isApple = apple && isKeyHotkey(apple);
+    const isWindows = windows && isKeyHotkey(windows);
+    return (event) => {
+        if (isGeneric && isGeneric(event)) {
+            return true;
+        }
+        if (IS_APPLE && isApple && isApple(event)) {
+            return true;
+        }
+        if (!IS_APPLE && isWindows && isWindows(event)) {
+            return true;
+        }
+        return false;
+    };
+};
+/**
+ * Hotkeys.
+ */
+const hotkeys = {
+    isBold: create('bold'),
+    isCompose: create('compose'),
+    isMoveBackward: create('moveBackward'),
+    isMoveForward: create('moveForward'),
+    isMoveUp: create('moveUp'),
+    isMoveDown: create('moveDown'),
+    isDeleteBackward: create('deleteBackward'),
+    isDeleteForward: create('deleteForward'),
+    isDeleteLineBackward: create('deleteLineBackward'),
+    isDeleteLineForward: create('deleteLineForward'),
+    isDeleteWordBackward: create('deleteWordBackward'),
+    isDeleteWordForward: create('deleteWordForward'),
+    isExtendBackward: create('extendBackward'),
+    isExtendForward: create('extendForward'),
+    isExtendLineBackward: create('extendLineBackward'),
+    isExtendLineForward: create('extendLineForward'),
+    isItalic: create('italic'),
+    isMoveLineBackward: create('moveLineBackward'),
+    isMoveLineForward: create('moveLineForward'),
+    isMoveWordBackward: create('moveWordBackward'),
+    isMoveWordForward: create('moveWordForward'),
+    isRedo: create('redo'),
+    isSplitBlock: create('splitBlock'),
+    isTransposeCharacter: create('transposeCharacter'),
+    isUndo: create('undo')
+};
+
+function isTemplateRef(value) {
+    return value && value instanceof TemplateRef;
+}
+function isComponentType(value) {
+    return !isTemplateRef(value);
+}
+
+const shallowCompare = (obj1, obj2) => Object.keys(obj1).length === Object.keys(obj2).length &&
+    Object.keys(obj1).every(key => obj2.hasOwnProperty(key) && obj1[key] === obj2[key]);
+/**
+ * Check if a list of decorator ranges are equal to another.
+ *
+ * PERF: this requires the two lists to also have the ranges inside them in the
+ * same order, but this is an okay constraint for us since decorations are
+ * kept in order, and the odd case where they aren't is okay to re-render for.
+ */
+const isDecoratorRangeListEqual = (list, another) => {
+    if (list.length !== another.length) {
+        return false;
+    }
+    for (let i = 0; i < list.length; i++) {
+        const range = list[i];
+        const other = another[i];
+        const { anchor: rangeAnchor, focus: rangeFocus, ...rangeOwnProps } = range;
+        const { anchor: otherAnchor, focus: otherFocus, ...otherOwnProps } = other;
+        if (!Range.equals(range, other) ||
+            range[PLACEHOLDER_SYMBOL] !== other[PLACEHOLDER_SYMBOL] ||
+            !shallowCompare(rangeOwnProps, otherOwnProps)) {
+            return false;
+        }
+    }
+    return true;
+};
+
+const isValid = (value) => (Element.isElement(value) &&
+    value.children.length > 0 &&
+    value.children.every((child) => isValid(child))) ||
+    Text$1.isText(value);
+const check = (document) => {
+    return document.every((value) => Element.isElement(value) && isValid(value));
+    ;
+};
+function normalize(document) {
+    return document.filter((value) => Element.isElement(value) && isValid(value));
+}
+
+/**
+ * Utilities for single-line deletion
+ */
+const doRectsIntersect = (rect, compareRect) => {
+    const middle = (compareRect.top + compareRect.bottom) / 2;
+    return rect.top <= middle && rect.bottom >= middle;
+};
+const areRangesSameLine = (editor, range1, range2) => {
+    const rect1 = AngularEditor.toDOMRange(editor, range1).getBoundingClientRect();
+    const rect2 = AngularEditor.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
+ */
+const findCurrentLineRange = (editor, parentRange) => {
+    const parentRangeBoundary = Editor.range(editor, Range.end(parentRange));
+    const positions = Array.from(Editor.positions(editor, { at: parentRange }));
+    let left = 0;
+    let right = positions.length;
+    let middle = Math.floor(right / 2);
+    if (areRangesSameLine(editor, Editor.range(editor, positions[left]), parentRangeBoundary)) {
+        return Editor.range(editor, positions[left], parentRangeBoundary);
+    }
+    if (positions.length < 2) {
+        return Editor.range(editor, positions[positions.length - 1], parentRangeBoundary);
+    }
+    while (middle !== positions.length && middle !== left) {
+        if (areRangesSameLine(editor, Editor.range(editor, positions[middle]), parentRangeBoundary)) {
+            right = middle;
+        }
+        else {
+            left = middle;
+        }
+        middle = Math.floor((left + right) / 2);
+    }
+    return Editor.range(editor, positions[right], parentRangeBoundary);
+};
+
+const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
+    const e = editor;
+    const { apply, onChange, deleteBackward } = e;
+    e.deleteBackward = unit => {
+        if (unit !== 'line') {
+            return deleteBackward(unit);
+        }
+        if (editor.selection && Range.isCollapsed(editor.selection)) {
+            const parentBlockEntry = Editor.above(editor, {
+                match: n => Editor.isBlock(editor, n),
+                at: editor.selection,
+            });
+            if (parentBlockEntry) {
+                const [, parentBlockPath] = parentBlockEntry;
+                const parentElementRange = Editor.range(editor, parentBlockPath, editor.selection.anchor);
+                const currentLineRange = findCurrentLineRange(e, parentElementRange);
+                if (!Range.isCollapsed(currentLineRange)) {
+                    Transforms.delete(editor, { at: currentLineRange });
+                }
+            }
+        }
+    };
+    e.apply = (op) => {
+        const matches = [];
+        switch (op.type) {
+            case 'insert_text':
+            case 'remove_text':
+            case 'set_node': {
+                for (const [node, path] of Editor.levels(e, { at: op.path })) {
+                    const key = AngularEditor.findKey(e, node);
+                    matches.push([path, key]);
+                }
+                break;
+            }
+            case 'insert_node':
+            case 'remove_node':
+            case 'merge_node':
+            case 'split_node': {
+                for (const [node, path] of Editor.levels(e, {
+                    at: Path.parent(op.path),
+                })) {
+                    const key = AngularEditor.findKey(e, node);
+                    matches.push([path, key]);
+                }
+                break;
+            }
+            case 'move_node': {
+                const commonPath = Path.common(Path.parent(op.path), Path.parent(op.newPath));
+                for (const [node, path] of Editor.levels(e, { at: Path.parent(op.path) })) {
+                    const key = AngularEditor.findKey(e, node);
+                    matches.push([Editor.pathRef(editor, path), key]);
+                }
+                for (const [node, path] of Editor.levels(e, { at: Path.parent(op.newPath) })) {
+                    if (path.length > commonPath.length) {
+                        const key = AngularEditor.findKey(e, node);
+                        matches.push([Editor.pathRef(editor, path), key]);
+                    }
+                }
+                break;
+            }
+        }
+        apply(op);
+        for (const [source, key] of matches) {
+            const [node] = Editor.node(e, Path.isPath(source) ? source : source.current);
+            NODE_TO_KEY.set(node, key);
+        }
+    };
+    e.onChange = () => {
+        const onContextChange = EDITOR_TO_ON_CHANGE.get(e);
+        if (onContextChange) {
+            onContextChange();
+        }
+        onChange();
+    };
+    e.setFragmentData = (data) => {
+        const { selection } = e;
+        if (!selection) {
+            return;
+        }
+        const [start, end] = Range.edges(selection);
+        const startVoid = Editor.void(e, { at: start.path });
+        const 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.
+        const domRange = AngularEditor.toDOMRange(e, selection);
+        let contents = domRange.cloneContents();
+        let attach = contents.childNodes[0];
+        // Make sure attach is non-empty, since empty nodes will not get copied.
+        const contentsArray = Array.from(contents.children);
+        contentsArray.forEach(node => {
+            if (node.textContent && node.textContent.trim() !== '') {
+                attach = node;
+            }
+        });
+        // COMPAT: If the end node is a void node, we need to move the end of the
+        // range from the void node's spacer span, to the end of the void node's
+        // content, since the spacer is before void's content in the DOM.
+        if (endVoid) {
+            const [voidNode] = endVoid;
+            const r = domRange.cloneRange();
+            const domNode = AngularEditor.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 => {
+            const isNewline = zw.getAttribute('data-slate-zero-width') === 'n';
+            zw.textContent = isNewline ? '\n' : '';
+        });
+        // Set a `data-slate-fragment` attribute on a non-empty node, so it shows up
+        // in the HTML, and can be used for intra-Slate pasting. If it's a text
+        // node, wrap it in a `<span>` so we have something to set an attribute on.
+        if (isDOMText(attach)) {
+            const span = 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;
+        }
+        const fragment = e.getFragment();
+        const stringObj = JSON.stringify(fragment);
+        const encoded = window.btoa(encodeURIComponent(stringObj));
+        attach.setAttribute('data-slate-fragment', encoded);
+        data.setData(`application/${clipboardFormatKey}`, encoded);
+        // Add the content to a <div> so that we can get its inner HTML.
+        const 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.deleteCutData = () => {
+        const { selection } = editor;
+        if (selection) {
+            if (Range.isExpanded(selection)) {
+                Editor.deleteFragment(editor);
+            }
+            else {
+                const node = Node.parent(editor, selection.anchor.path);
+                if (Editor.isVoid(editor, node)) {
+                    Transforms.delete(editor);
+                }
+            }
+        }
+    };
+    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
+         */
+        const fragment = data.getData(`application/${clipboardFormatKey}`) ||
+            getSlateFragmentAttribute(data);
+        if (fragment) {
+            const decoded = decodeURIComponent(window.atob(fragment));
+            const parsed = JSON.parse(decoded);
+            e.insertFragment(parsed);
+            return true;
+        }
+        return false;
+    };
+    e.insertTextData = (data) => {
+        const text = data.getData('text/plain');
+        if (text) {
+            const lines = text.split(/\r\n|\r|\n/);
+            let split = false;
+            for (const line of lines) {
+                if (split) {
+                    Transforms.splitNodes(e, { always: true });
+                }
+                e.insertText(line);
+                split = true;
+            }
+            return true;
+        }
+        return false;
+    };
+    e.onKeydown = () => { };
+    e.onClick = () => { };
+    e.isBlockCard = (element) => false;
+    e.onError = (errorData) => {
+        if (errorData.nativeError) {
+            console.error(errorData.nativeError);
+        }
+        else {
+            console.error(errorData);
+        }
+    };
+    return e;
+};
+
+const TOP_BLUR = 'blur';
+const TOP_COMPOSITION_END = 'compositionend';
+const TOP_COMPOSITION_START = 'compositionstart';
+const TOP_COMPOSITION_UPDATE = 'compositionupdate';
+const TOP_KEY_DOWN = 'keydown';
+const TOP_KEY_PRESS = 'keypress';
+const TOP_KEY_UP = 'keyup';
+const TOP_MOUSE_DOWN = 'mousedown';
+const TOP_MOUSE_MOVE = 'mousemove';
+const TOP_MOUSE_OUT = 'mouseout';
+const TOP_TEXT_INPUT = 'textInput';
+const TOP_PASTE = 'paste';
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * These variables store information about text content of a target node,
+ * allowing comparison of content before and after a given event.
+ *
+ * Identify the node where selection currently begins, then observe
+ * both its text content and its current position in the DOM. Since the
+ * browser may natively replace the target node during composition, we can
+ * use its position to find its replacement.
+ *
+ *
+ */
+let root = null;
+let startText = null;
+let fallbackText = null;
+function initialize(nativeEventTarget) {
+    root = nativeEventTarget;
+    startText = getText();
+    return true;
+}
+function reset() {
+    root = null;
+    startText = null;
+    fallbackText = null;
+}
+function getData() {
+    if (fallbackText) {
+        return fallbackText;
+    }
+    let start;
+    const startValue = startText;
+    const startLength = startValue.length;
+    let end;
+    const endValue = getText();
+    const endLength = endValue.length;
+    for (start = 0; start < startLength; start++) {
+        if (startValue[start] !== endValue[start]) {
+            break;
+        }
+    }
+    const minEnd = startLength - start;
+    for (end = 1; end <= minEnd; end++) {
+        if (startValue[startLength - end] !== endValue[endLength - end]) {
+            break;
+        }
+    }
+    const sliceTail = end > 1 ? 1 - end : undefined;
+    fallbackText = endValue.slice(start, sliceTail);
+    return fallbackText;
+}
+function getText() {
+    if ('value' in root) {
+        return root.value;
+    }
+    return root.textContent;
+}
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const canUseDOM = !!(typeof window !== 'undefined' &&
+    typeof window.document !== 'undefined' &&
+    typeof window.document.createElement !== 'undefined');
+const END_KEYCODES = [9, 13, 27, 32]; // Tab, Return, Esc, Space
+const START_KEYCODE = 229;
+const canUseCompositionEvent = canUseDOM && 'CompositionEvent' in window;
+let documentMode = null;
+if (canUseDOM && 'documentMode' in document) {
+    documentMode = document.documentMode;
+}
+// Webkit offers a very useful `textInput` event that can be used to
+// directly represent `beforeInput`. The IE `textinput` event is not as
+// useful, so we don't use it.
+const canUseTextInputEvent = canUseDOM && 'TextEvent' in window && !documentMode;
+// In IE9+, we have access to composition events, but the data supplied
+// by the native compositionend event may be incorrect. Japanese ideographic
+// spaces, for instance (\u3000) are not recorded correctly.
+const useFallbackCompositionData = canUseDOM && (!canUseCompositionEvent || (documentMode && documentMode > 8 && documentMode <= 11));
+const SPACEBAR_CODE = 32;
+const SPACEBAR_CHAR = String.fromCharCode(SPACEBAR_CODE);
+// Events and their corresponding property names.
+const eventTypes = {
+    beforeInput: {
+        phasedRegistrationNames: {
+            bubbled: 'onBeforeInput',
+            captured: 'onBeforeInputCapture'
+        },
+        dependencies: [TOP_COMPOSITION_END, TOP_KEY_PRESS, TOP_TEXT_INPUT, TOP_PASTE]
+    }
+};
+// Track whether we've ever handled a keypress on the space key.
+let hasSpaceKeypress = false;
+/**
+ * Return whether a native keypress event is assumed to be a command.
+ * This is required because Firefox fires `keypress` events for key commands
+ * (cut, copy, select-all, etc.) even though no character is inserted.
+ */
+function isKeypressCommand(nativeEvent) {
+    return ((nativeEvent.ctrlKey || nativeEvent.altKey || nativeEvent.metaKey) &&
+        // ctrlKey && altKey is equivalent to AltGr, and is not a command.
+        !(nativeEvent.ctrlKey && nativeEvent.altKey));
+}
+/**
+ * Does our fallback mode think that this event is the end of composition?
+ *
+ */
+function isFallbackCompositionEnd(topLevelType, nativeEvent) {
+    switch (topLevelType) {
+        case TOP_KEY_UP:
+            // Command keys insert or clear IME input.
+            return END_KEYCODES.indexOf(nativeEvent.keyCode) !== -1;
+        case TOP_KEY_DOWN:
+            // Expect IME keyCode on each keydown. If we get any other
+            // code we must have exited earlier.
+            return nativeEvent.keyCode !== START_KEYCODE;
+        case TOP_KEY_PRESS:
+        case TOP_MOUSE_DOWN:
+        case TOP_BLUR:
+            // Events are not possible without cancelling IME.
+            return true;
+        default:
+            return false;
+    }
+}
+/**
+ * Google Input Tools provides composition data via a CustomEvent,
+ * with the `data` property populated in the `detail` object. If this
+ * is available on the event object, use it. If not, this is a plain
+ * composition event and we have nothing special to extract.
+ *
+ */
+function getDataFromCustomEvent(nativeEvent) {
+    const detail = nativeEvent.detail;
+    if (typeof detail === 'object' && 'data' in detail) {
+        return detail.data;
+    }
+    return null;
+}
+/**
+ * Check if a composition event was triggered by Korean IME.
+ * Our fallback mode does not work well with IE's Korean IME,
+ * so just use native composition events when Korean IME is used.
+ * Although CompositionEvent.locale property is deprecated,
+ * it is available in IE, where our fallback mode is enabled.
+ *
+ */
+function isUsingKoreanIME(nativeEvent) {
+    return nativeEvent.locale === 'ko';
+}
+// Track the current IME composition status, if any.
+let isComposing = false;
+function getNativeBeforeInputChars(topLevelType, nativeEvent) {
+    switch (topLevelType) {
+        case TOP_COMPOSITION_END:
+            return getDataFromCustomEvent(nativeEvent);
+        case TOP_KEY_PRESS:
+            /**
+             * If native `textInput` events are available, our goal is to make
+             * use of them. However, there is a special case: the spacebar key.
+             * In Webkit, preventing default on a spacebar `textInput` event
+             * cancels character insertion, but it *also* causes the browser
+             * to fall back to its default spacebar behavior of scrolling the
+             * page.
+             *
+             * Tracking at:
+             * https://code.google.com/p/chromium/issues/detail?id=355103
+             *
+             * To avoid this issue, use the keypress event as if no `textInput`
+             * event is available.
+             */
+            const which = nativeEvent.which;
+            if (which !== SPACEBAR_CODE) {
+                return null;
+            }
+            hasSpaceKeypress = true;
+            return SPACEBAR_CHAR;
+        case TOP_TEXT_INPUT:
+            // Record the characters to be added to the DOM.
+            const chars = nativeEvent.data;
+            // If it's a spacebar character, assume that we have already handled
+            // it at the keypress level and bail immediately. Android Chrome
+            // doesn't give us keycodes, so we need to ignore it.
+            if (chars === SPACEBAR_CHAR && hasSpaceKeypress) {
+                return null;
+            }
+            return chars;
+        default:
+            // For other native event types, do nothing.
+            return null;
+    }
+}
+/**
+ * For browsers that do not provide the `textInput` event, extract the
+ * appropriate string to use for SyntheticInputEvent.
+ *
+ */
+function getFallbackBeforeInputChars(topLevelType, nativeEvent) {
+    // If we are currently composing (IME) and using a fallback to do so,
+    // try to extract the composed characters from the fallback object.
+    // If composition event is available, we extract a string only at
+    // compositionevent, otherwise extract it at fallback events.
+    if (isComposing) {
+        if (topLevelType === TOP_COMPOSITION_END || (!canUseCompositionEvent && isFallbackCompositionEnd(topLevelType, nativeEvent))) {
+            const chars = getData();
+            reset();
+            isComposing = false;
+            return chars;
+        }
+        return null;
+    }
+    switch (topLevelType) {
+        case TOP_PASTE:
+            // If a paste event occurs after a keypress, throw out the input
+            // chars. Paste events should not lead to BeforeInput events.
+            return null;
+        case TOP_KEY_PRESS:
+            /**
+             * As of v27, Firefox may fire keypress events even when no character
+             * will be inserted. A few possibilities:
+             *
+             * - `which` is `0`. Arrow keys, Esc key, etc.
+             *
+             * - `which` is the pressed key code, but no char is available.
+             *   Ex: 'AltGr + d` in Polish. There is no modified character for
+             *   this key combination and no character is inserted into the
+             *   document, but FF fires the keypress for char code `100` anyway.
+             *   No `input` event will occur.
+             *
+             * - `which` is the pressed key code, but a command combination is
+             *   being used. Ex: `Cmd+C`. No character is inserted, and no
+             *   `input` event will occur.
+             */
+            if (!isKeypressCommand(nativeEvent)) {
+                // IE fires the `keypress` event when a user types an emoji via
+                // Touch keyboard of Windows.  In such a case, the `char` property
+                // holds an emoji character like `\uD83D\uDE0A`.  Because its length
+                // is 2, the property `which` does not represent an emoji correctly.
+                // In such a case, we directly return the `char` property instead of
+                // using `which`.
+                if (nativeEvent.char && nativeEvent.char.length > 1) {
+                    return nativeEvent.char;
+                }
+                else if (nativeEvent.which) {
+                    return String.fromCharCode(nativeEvent.which);
+                }
+            }
+            return null;
+        case TOP_COMPOSITION_END:
+            return useFallbackCompositionData && !isUsingKoreanIME(nativeEvent) ? null : nativeEvent.data;
+        default:
+            return null;
+    }
+}
+/**
+ * Extract a SyntheticInputEvent for `beforeInput`, based on either native
+ * `textInput` or fallback behavior.
+ *
+ */
+function extractBeforeInputEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget) {
+    let chars;
+    if (canUseTextInputEvent) {
+        chars = getNativeBeforeInputChars(topLevelType, nativeEvent);
+    }
+    else {
+        chars = getFallbackBeforeInputChars(topLevelType, nativeEvent);
+    }
+    // If no characters are being inserted, no BeforeInput event should
+    // be fired.
+    if (!chars) {
+        return null;
+    }
+    const beforeInputEvent = new BeforeInputEvent();
+    beforeInputEvent.data = chars;
+    beforeInputEvent.nativeEvent = nativeEvent;
+    return beforeInputEvent;
+}
+/**
+ * Create an `onBeforeInput` event to match
+ * http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#events-inputevents.
+ *
+ * This event plugin is based on the native `textInput` event
+ * available in Chrome, Safari, Opera, and IE. This event fires after
+ * `onKeyPress` and `onCompositionEnd`, but before `onInput`.
+ *
+ * `beforeInput` is spec'd but not implemented in any browsers, and
+ * the `input` event does not provide any useful information about what has
+ * actually been added, contrary to the spec. Thus, `textInput` is the best
+ * available event to identify the characters that have actually been inserted
+ * into the target node.
+ *
+ * This plugin is also responsible for emitting `composition` events, thus
+ * allowing us to share composition fallback code for both `beforeInput` and
+ * `composition` event types.
+ */
+const BeforeInputEventPlugin = {
+    extractEvents: (topLevelType, targetInst, nativeEvent, nativeEventTarget) => {
+        return extractBeforeInputEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget);
+    }
+};
+class BeforeInputEvent {
+}
+
+const BEFORE_INPUT_EVENTS = [
+    // { name: 'blur', handler: 'onBlur', isTriggerBeforeInput: true },
+    // { name: 'compositionstart', handler: 'onCompositionStart', isTriggerBeforeInput: true },
+    { name: 'compositionupdate', handler: null, isTriggerBeforeInput: true },
+    // { name: 'compositionend', handler: 'onCompositionEnd', isTriggerBeforeInput: false },
+    // { name: 'keydown', handler: 'onKeyDown', isTriggerBeforeInput: true },
+    { name: 'keypress', handler: null, isTriggerBeforeInput: true },
+    { name: 'keyup', handler: 'onKeyUp', isTriggerBeforeInput: true },
+    { name: 'mousedown', handler: 'onMouseDown', isTriggerBeforeInput: true },
+    { name: 'textInput', handler: null, isTriggerBeforeInput: true },
+    // { name: 'paste', handler: 'onPaste', isTriggerBeforeInput: true }
+];
+
+var SlateErrorCode;
+(function (SlateErrorCode) {
+    SlateErrorCode[SlateErrorCode["ToNativeSelectionError"] = 2100] = "ToNativeSelectionError";
+    SlateErrorCode[SlateErrorCode["ToSlateSelectionError"] = 2101] = "ToSlateSelectionError";
+    SlateErrorCode[SlateErrorCode["OnDOMBeforeInputError"] = 2102] = "OnDOMBeforeInputError";
+    SlateErrorCode[SlateErrorCode["OnSyntheticBeforeInputError"] = 2103] = "OnSyntheticBeforeInputError";
+    SlateErrorCode[SlateErrorCode["OnDOMKeydownError"] = 2104] = "OnDOMKeydownError";
+    SlateErrorCode[SlateErrorCode["GetStartPointError"] = 2105] = "GetStartPointError";
+    SlateErrorCode[SlateErrorCode["NotFoundPreviousRootNodeError"] = 3100] = "NotFoundPreviousRootNodeError";
+    SlateErrorCode[SlateErrorCode["InvalidValueError"] = 4100] = "InvalidValueError";
+})(SlateErrorCode || (SlateErrorCode = {}));
+
+class SlateBlockCardComponent {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+    get centerContainerElement() {
+        return this.centerContianer.nativeElement;
+    }
+    ngOnInit() {
+        this.append();
+        this.nativeElement.classList.add(`slate-block-card`);
+    }
+    append() {
+        this.centerRootNodes.forEach((rootNode) => !this.centerContainerElement.contains(rootNode) && this.centerContainerElement.appendChild(rootNode));
+    }
+    initializeCenter(rootNodes) {
+        this.centerRootNodes = rootNodes;
+    }
+}
+SlateBlockCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateBlockCardComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+SlateBlockCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: SlateBlockCardComponent, selector: "slate-block-card, [slateBlockCard]", viewQueries: [{ propertyName: "centerContianer", first: true, predicate: ["centerContianer"], descendants: true, static: true }], ngImport: i0, template: "<span card-target=\"card-left\" class=\"card-left\">{{  '\\uFEFF' }}</span>\n<div card-target=\"card-center\" #centerContianer></div>\n<span card-target=\"card-right\" class=\"card-right\">{{  '\\uFEFF' }}</span>" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateBlockCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'slate-block-card, [slateBlockCard]', template: "<span card-target=\"card-left\" class=\"card-left\">{{  '\\uFEFF' }}</span>\n<div card-target=\"card-center\" #centerContianer></div>\n<span card-target=\"card-right\" class=\"card-right\">{{  '\\uFEFF' }}</span>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { centerContianer: [{
+                type: ViewChild,
+                args: ['centerContianer', { static: true }]
+            }] } });
+
+/**
+ * Dynamically create/update components or templates
+ * Provide rootNodes for the view container
+ * If the dynamically created component uses onpush mode, then it must call markForCheck when setting the context
+ */
+class ViewContainerItem {
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+        this.initialized = false;
+    }
+    get rootNodes() {
+        return this.getRootNodes();
+    }
+    getRootNodes() {
+        if (this.embeddedViewRef) {
+            return this.embeddedViewRef.rootNodes.filter((rootNode) => isDOMElement(rootNode));
+        }
+        if (this.componentRef) {
+            return [this.componentRef.instance.nativeElement];
+        }
+        return [];
+    }
+    destroyView() {
+        if (this.embeddedViewRef) {
+            this.embeddedViewRef.destroy();
+            this.embeddedViewRef = null;
+        }
+        if (this.componentRef) {
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
+    }
+    createView() {
+        this.initialized = true;
+        this.viewType = this.getViewType();
+        const context = this.getContext();
+        if (isTemplateRef(this.viewType)) {
+            this.embeddedViewContext = { context, viewContext: this.viewContext };
+            const embeddedViewRef = this.viewContainerRef.createEmbeddedView(this.viewType, this.embeddedViewContext);
+            this.embeddedViewRef = embeddedViewRef;
+        }
+        if (isComponentType(this.viewType)) {
+            const componentRef = this.viewContainerRef.createComponent(this.viewType);
+            componentRef.instance.context = context;
+            componentRef.instance.viewContext = this.viewContext;
+            this.componentRef = componentRef;
+        }
+    }
+    updateView() {
+        const viewType = this.getViewType();
+        const context = this.getContext();
+        if (this.viewType === viewType) {
+            if (this.componentRef) {
+                if (this.memoizedContext(this.componentRef.instance.context, context)) {
+                    return;
+                }
+                this.componentRef.instance.context = context;
+            }
+            if (this.embeddedViewRef) {
+                if (this.memoizedContext(this.embeddedViewContext.context, context)) {
+                    return;
+                }
+                this.embeddedViewContext.context = context;
+            }
+        }
+        else {
+            this.viewType = viewType;
+            const firstRootNode = this.rootNodes[0];
+            if (isTemplateRef(this.viewType)) {
+                this.embeddedViewContext = { context, viewContext: this.viewContext };
+                const embeddedViewRef = this.viewContainerRef.createEmbeddedView(this.viewType, this.embeddedViewContext);
+                firstRootNode.replaceWith(...embeddedViewRef.rootNodes.filter((rootNode) => isDOMElement(rootNode)));
+                this.destroyView();
+                this.embeddedViewRef = embeddedViewRef;
+            }
+            if (isComponentType(this.viewType)) {
+                const componentRef = this.viewContainerRef.createComponent(this.viewType);
+                componentRef.instance.context = context;
+                componentRef.instance.viewContext = this.viewContext;
+                firstRootNode.replaceWith(componentRef.instance.nativeElement);
+                this.destroyView();
+                this.componentRef = componentRef;
+            }
+        }
+    }
+    appendBlockCardElement() {
+        if (this.blockCardComponentRef) {
+            this.blockCardComponentRef.instance.append();
+        }
+    }
+}
+ViewContainerItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ViewContainerItem, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+ViewContainerItem.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: ViewContainerItem, inputs: { viewContext: "viewContext" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ViewContainerItem, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { viewContext: [{
+                type: Input
+            }] } });
+
+function hasBeforeContextChange(value) {
+    if (value.beforeContextChange) {
+        return true;
+    }
+    return false;
+}
+
+/**
+ * base class for custom element component or text component
+ */
+class BaseComponent {
+    constructor(elementRef, cdr) {
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+    }
+    set context(value) {
+        if (hasBeforeContextChange(this)) {
+            this.beforeContextChange(value);
+        }
+        this._context = value;
+        this.onContextChange();
+    }
+    get context() {
+        return this._context;
+    }
+    get editor() {
+        return this.viewContext && this.viewContext.editor;
+    }
+    get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+}
+BaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: BaseComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+BaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: BaseComponent, inputs: { context: "context", viewContext: "viewContext" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: BaseComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { context: [{
+                type: Input
+            }], viewContext: [{
+                type: Input
+            }] } });
+/**
+ * base class for custom leaf component
+ */
+class BaseLeafComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.initialized = false;
+        this.isSlateLeaf = true;
+    }
+    get text() {
+        return this.context && this.context.text;
+    }
+    get leaf() {
+        return this.context && this.context.leaf;
+    }
+    ngOnInit() {
+        this.initialized = true;
+    }
+    onContextChange() {
+        if (!this.initialized) {
+            return;
+        }
+        this.cdr.markForCheck();
+    }
+    renderPlaceholder() {
+        // issue-1: IME input was interrupted
+        // issue-2: IME input focus jumping
+        // Issue occurs when the span node of the placeholder is before the slateString span node
+        if (this.context.leaf['placeholder']) {
+            if (!this.placeholderElement) {
+                this.placeholderElement = document.createElement('span');
+                this.placeholderElement.innerText = this.context.leaf['placeholder'];
+                this.placeholderElement.contentEditable = 'false';
+                this.placeholderElement.setAttribute('data-slate-placeholder', 'true');
+                this.nativeElement.classList.add('leaf-with-placeholder');
+                this.nativeElement.appendChild(this.placeholderElement);
+            }
+        }
+        else {
+            this.destroyPlaceholder();
+        }
+    }
+    destroyPlaceholder() {
+        if (this.placeholderElement) {
+            this.placeholderElement.remove();
+            this.placeholderElement = null;
+            this.nativeElement.classList.remove('leaf-with-placeholder');
+        }
+    }
+}
+BaseLeafComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: BaseLeafComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+BaseLeafComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: BaseLeafComponent, host: { properties: { "attr.data-slate-leaf": "this.isSlateLeaf" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: BaseLeafComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { isSlateLeaf: [{
+                type: HostBinding,
+                args: ['attr.data-slate-leaf']
+            }] } });
+/**
+ * base class for custom element component
+ */
+class BaseElementComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.initialized = false;
+    }
+    get element() {
+        return this._context && this._context.element;
+    }
+    get selection() {
+        return this._context && this._context.selection;
+    }
+    get decorations() {
+        return this._context && this._context.decorations;
+    }
+    get children() {
+        return this._context && this._context.element.children;
+    }
+    get isCollapsed() {
+        return this.selection && Range.isCollapsed(this.editor.selection);
+    }
+    get readonly() {
+        return this._context && this._context.readonly;
+    }
+    ngOnInit() {
+        this.updateWeakMap();
+        for (const key in this._context.attributes) {
+            this.nativeElement.setAttribute(key, this._context.attributes[key]);
+        }
+        this.initialized = true;
+    }
+    updateWeakMap() {
+        NODE_TO_ELEMENT.set(this.element, this.nativeElement);
+        ELEMENT_TO_NODE.set(this.nativeElement, this.element);
+        ELEMENT_TO_COMPONENT.set(this.element, this);
+    }
+    ngOnDestroy() {
+        if (NODE_TO_ELEMENT.get(this.element) === this.nativeElement) {
+            NODE_TO_ELEMENT.delete(this.element);
+        }
+        if (ELEMENT_TO_COMPONENT.get(this.element) === this) {
+            ELEMENT_TO_COMPONENT.delete(this.element);
+        }
+    }
+    onContextChange() {
+        this.childrenContext = this.getChildrenContext();
+        if (!this.initialized) {
+            return;
+        }
+        this.cdr.markForCheck();
+        this.updateWeakMap();
+    }
+    getChildrenContext() {
+        return {
+            parent: this._context.element,
+            selection: this._context.selection,
+            decorations: this._context.decorations,
+            decorate: this._context.decorate,
+            readonly: this._context.readonly
+        };
+    }
+}
+BaseElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: BaseElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+BaseElementComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: BaseElementComponent, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: BaseElementComponent, decorators: [{
+            type: Directive
+        }] });
+/**
+ * base class for custom text component
+ */
+class BaseTextComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.initialized = false;
+    }
+    get text() {
+        return this._context && this._context.text;
+    }
+    ngOnInit() {
+        this.updateWeakMap();
+        this.initialized = true;
+    }
+    updateWeakMap() {
+        ELEMENT_TO_NODE.set(this.nativeElement, this.text);
+        NODE_TO_ELEMENT.set(this.text, this.nativeElement);
+    }
+    ngOnDestroy() {
+        if (NODE_TO_ELEMENT.get(this.text) === this.nativeElement) {
+            NODE_TO_ELEMENT.delete(this.text);
+        }
+    }
+    onContextChange() {
+        if (!this.initialized) {
+            return;
+        }
+        this.cdr.markForCheck();
+        this.updateWeakMap();
+    }
+}
+BaseTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: BaseTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+BaseTextComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: BaseTextComponent, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: BaseTextComponent, decorators: [{
+            type: Directive
+        }] });
+
+/**
+ * the sepcial container for angular template
+ * Add the rootNodes of each child component to the parentElement
+ * Remove useless DOM elements, eg: comment...
+ */
+class ViewContainer {
+    constructor(elementRef, differs) {
+        this.elementRef = elementRef;
+        this.differs = differs;
+    }
+    ngAfterViewInit() {
+        const differ = this.differs.find(this.childrenComponent).create((index, item) => {
+            return item;
+        });
+        // first diff
+        differ.diff(this.childrenComponent);
+        const parentElement = this.elementRef.nativeElement.parentElement;
+        if (this.childrenComponent.length > 0) {
+            parentElement.insertBefore(this.createFragment(), this.elementRef.nativeElement);
+            this.elementRef.nativeElement.remove();
+        }
+        this.childrenComponent.changes.subscribe((value) => {
+            const iterableChanges = differ.diff(this.childrenComponent);
+            if (iterableChanges) {
+                iterableChanges.forEachOperation((record, previousIndex, currentIndex) => {
+                    // removed
+                    if (currentIndex === null) {
+                        return;
+                    }
+                    // added or moved
+                    this.handleContainerItemChange(record, parentElement);
+                });
+            }
+        });
+    }
+    getPreviousRootNode(currentIndex) {
+        if (currentIndex === 0) {
+            return null;
+        }
+        const previousComponent = this.childrenComponent.find((item, index) => index === currentIndex - 1);
+        let previousRootNode = previousComponent.rootNodes[previousComponent.rootNodes.length - 1];
+        if (previousRootNode) {
+            return previousRootNode;
+        }
+        else {
+            return this.getPreviousRootNode(currentIndex - 1);
+        }
+    }
+    createFragment() {
+        const fragment = document.createDocumentFragment();
+        this.childrenComponent.forEach((component, index) => {
+            fragment.append(...component.rootNodes);
+        });
+        return fragment;
+    }
+    handleContainerItemChange(record, parentElement) {
+        // first insert
+        if (this.elementRef.nativeElement.parentElement && this.elementRef.nativeElement.parentElement === parentElement) {
+            const fragment = document.createDocumentFragment();
+            fragment.append(...record.item.rootNodes);
+            parentElement.insertBefore(fragment, this.elementRef.nativeElement);
+            this.elementRef.nativeElement.remove();
+            return;
+        }
+        // insert at start location
+        if (record.currentIndex === 0) {
+            const fragment = document.createDocumentFragment();
+            fragment.append(...record.item.rootNodes);
+            parentElement.prepend(fragment);
+        }
+        else {
+            // insert afterend of previous component end
+            let previousRootNode = this.getPreviousRootNode(record.currentIndex);
+            if (previousRootNode) {
+                record.item.rootNodes.forEach((rootNode) => {
+                    previousRootNode.insertAdjacentElement('afterend', rootNode);
+                    previousRootNode = rootNode;
+                });
+            }
+            else {
+                this.viewContext.editor.onError({
+                    code: SlateErrorCode.NotFoundPreviousRootNodeError,
+                    name: 'not found previous rootNode',
+                    nativeError: null
+                });
+            }
+        }
+        // Solve the block-card DOMElement loss when moving nodes
+        record.item.appendBlockCardElement();
+    }
+}
+ViewContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ViewContainer, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Directive });
+ViewContainer.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: ViewContainer, inputs: { viewContext: "viewContext" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ViewContainer, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.IterableDiffers }]; }, propDecorators: { viewContext: [{
+                type: Input
+            }] } });
+
+class SlateStringComponent extends ViewContainerItem {
+    constructor(elementRef, viewContainerRef) {
+        super(viewContainerRef);
+        this.elementRef = elementRef;
+        this.viewContainerRef = viewContainerRef;
+    }
+    ngOnInit() {
+        this.createView();
+    }
+    ngOnChanges() {
+        if (!this.initialized) {
+            return;
+        }
+        this.updateView();
+    }
+    ngAfterViewInit() {
+        this.elementRef.nativeElement.remove();
+    }
+    getViewType() {
+        const path = AngularEditor.findPath(this.viewContext.editor, this.context.text);
+        const parentPath = Path.parent(path);
+        // COMPAT: Render text inside void nodes with a zero-width space.
+        // So the node can contain selection but the text is not visible.
+        if (this.viewContext.editor.isVoid(this.context.parent)) {
+            return this.viewContext.templateComponent.emptyStringTemplate;
+        }
+        // COMPAT: If this is the last text node in an empty block, render a zero-
+        // width space that will convert into a line break when copying and pasting
+        // to support expected plain text.
+        if (this.context.leaf.text === '' &&
+            this.context.parent.children[this.context.parent.children.length - 1] === this.context.text &&
+            !this.viewContext.editor.isInline(this.context.parent) &&
+            Editor.string(this.viewContext.editor, parentPath) === '') {
+            return this.viewContext.templateComponent.lineBreakEmptyStringTemplate;
+        }
+        // COMPAT: If the text is empty, it's because it's on the edge of an inline
+        // node, so we render a zero-width space so that the selection can be
+        // inserted next to it still.
+        if (this.context.leaf.text === '') {
+            return this.viewContext.templateComponent.emptyTextTemplate;
+        }
+        // COMPAT: Browsers will collapse trailing new lines at the end of blocks,
+        // so we need to add an extra trailing new lines to prevent that.
+        if (this.context.isLast && this.context.leaf.text.slice(-1) === '\n') {
+            return this.viewContext.templateComponent.compatStringTemplate;
+        }
+        return this.viewContext.templateComponent.stringTemplate;
+    }
+    getContext() {
+        return { text: this.context.leaf.text, elementStringLength: Node.string(this.context.parent).length };
+    }
+    memoizedContext(prev, next) {
+        return false;
+    }
+}
+SlateStringComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateStringComponent, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+SlateStringComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: SlateStringComponent, selector: "span[slateString]", inputs: { context: "context" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateStringComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'span[slateString]',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { context: [{
+                type: Input
+            }] } });
+
+class SlateDefaultLeafComponent extends BaseLeafComponent {
+    onContextChange() {
+        super.onContextChange();
+        this.renderPlaceholder();
+    }
+    ngOnDestroy() {
+        // Because the placeholder span is not in the current component, it is destroyed along with the current component
+        this.destroyPlaceholder();
+    }
+}
+SlateDefaultLeafComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateDefaultLeafComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SlateDefaultLeafComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: SlateDefaultLeafComponent, selector: "span[slateDefaultLeaf]", host: { attributes: { "data-slate-leaf": "true" } }, usesInheritance: true, ngImport: i0, template: `<span slateString [context]="context" [viewContext]="viewContext"><span>`, isInline: true, components: [{ type: SlateStringComponent, selector: "span[slateString]", inputs: ["context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateDefaultLeafComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'span[slateDefaultLeaf]',
+                    template: `<span slateString [context]="context" [viewContext]="viewContext"><span>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        'data-slate-leaf': 'true'
+                    }
+                }]
+        }] });
+
+class SlateLeafComponent extends ViewContainerItem {
+    ngOnInit() {
+        this.createView();
+    }
+    getContext() {
+        return this.context;
+    }
+    getViewType() {
+        return this.viewContext.renderLeaf && this.viewContext.renderLeaf(this.context.leaf) || SlateDefaultLeafComponent;
+    }
+    memoizedContext(prev, next) {
+        return false;
+    }
+    ngOnChanges(simpleChanges) {
+        if (!this.initialized) {
+            return;
+        }
+        this.updateView();
+    }
+}
+SlateLeafComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateLeafComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SlateLeafComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: SlateLeafComponent, selector: "slate-leaf", inputs: { context: "context" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateLeafComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'slate-leaf',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { context: [{
+                type: Input
+            }] } });
+
+class SlateLeavesComponent extends ViewContainer {
+    constructor() {
+        super(...arguments);
+        this.initialized = false;
+    }
+    ngOnInit() {
+        this.leaves = Text$1.decorations(this.context.text, this.context.decorations);
+        this.leafContexts = this.getLeafCotexts();
+        this.initialized = true;
+    }
+    getLeafCotexts() {
+        return this.leaves.map((leaf, index) => {
+            return {
+                leaf,
+                text: this.context.text,
+                parent: this.context.parent,
+                index,
+                isLast: this.context.isLast && index === this.leaves.length - 1
+            };
+        });
+    }
+    ngOnChanges(simpleChanges) {
+        if (!this.initialized) {
+            return;
+        }
+        const context = simpleChanges['context'];
+        const previousValue = context.previousValue;
+        const currentValue = context.currentValue;
+        if (previousValue.text !== currentValue.text || !isDecoratorRangeListEqual(previousValue.decorations, currentValue.decorations)) {
+            this.leaves = Text$1.decorations(this.context.text, this.context.decorations);
+        }
+        this.leafContexts = this.getLeafCotexts();
+    }
+    trackBy(index, item) {
+        return index;
+    }
+}
+SlateLeavesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateLeavesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SlateLeavesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: SlateLeavesComponent, selector: "slate-leaves", inputs: { context: "context" }, viewQueries: [{ propertyName: "childrenComponent", predicate: SlateLeafComponent, descendants: true, read: SlateLeafComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `<slate-leaf
+                    [context]="context" [viewContext]="viewContext"
+                    [viewContext]="viewContext"
+                    *ngFor="let context of leafContexts; trackBy: trackBy"></slate-leaf>
+    `, isInline: true, components: [{ type: SlateLeafComponent, selector: "slate-leaf", inputs: ["context"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateLeavesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'slate-leaves',
+                    template: `<slate-leaf
+                    [context]="context" [viewContext]="viewContext"
+                    [viewContext]="viewContext"
+                    *ngFor="let context of leafContexts; trackBy: trackBy"></slate-leaf>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { context: [{
+                type: Input
+            }], childrenComponent: [{
+                type: ViewChildren,
+                args: [SlateLeafComponent, { read: SlateLeafComponent }]
+            }] } });
+
+class SlateDefaultTextComponent extends BaseTextComponent {
+}
+SlateDefaultTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateDefaultTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SlateDefaultTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: SlateDefaultTextComponent, selector: "span[slateDefaultText]", host: { attributes: { "data-slate-node": "text" } }, usesInheritance: true, ngImport: i0, template: `<slate-leaves [context]="context" [viewContext]="viewContext" [viewContext]="viewContext"></slate-leaves>`, isInline: true, components: [{ type: SlateLeavesComponent, selector: "slate-leaves", inputs: ["context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateDefaultTextComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'span[slateDefaultText]',
+                    template: `<slate-leaves [context]="context" [viewContext]="viewContext" [viewContext]="viewContext"></slate-leaves>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        'data-slate-node': 'text'
+                    }
+                }]
+        }] });
+
+class SlateVoidTextComponent extends BaseTextComponent {
+    ngOnInit() {
+        this.isLeafBlock = AngularEditor.isLeafBlock(this.viewContext.editor, this.context.parent);
+        super.ngOnInit();
+    }
+    ngOnChanges() {
+        if (!this.initialized) {
+            return;
+        }
+        this.isLeafBlock = AngularEditor.isLeafBlock(this.viewContext.editor, this.context.parent);
+    }
+}
+SlateVoidTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateVoidTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SlateVoidTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: SlateVoidTextComponent, selector: "span[slateVoidText]", host: { attributes: { "data-slate-spacer": "true", "data-slate-node": "text" }, properties: { "attr.contenteditable": "isLeafBlock" }, classAttribute: "slate-spacer" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `<slate-leaves [context]="context" [viewContext]="viewContext" [viewContext]="viewContext"></slate-leaves>`, isInline: true, components: [{ type: SlateLeavesComponent, selector: "slate-leaves", inputs: ["context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateVoidTextComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'span[slateVoidText]',
+                    template: `<slate-leaves [context]="context" [viewContext]="viewContext" [viewContext]="viewContext"></slate-leaves>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[attr.contenteditable]': 'isLeafBlock',
+                        'data-slate-spacer': "true",
+                        'class': 'slate-spacer',
+                        'data-slate-node': 'text'
+                    }
+                }]
+        }] });
+
+const SLATE_DEFAULT_ELEMENT_COMPONENT_TOKEN = new InjectionToken('slate-default-element-token');
+
+class SlateDescendantComponent extends ViewContainerItem {
+    constructor(viewContainerRef, defaultElementComponentType) {
+        super(viewContainerRef);
+        this.viewContainerRef = viewContainerRef;
+        this.defaultElementComponentType = defaultElementComponentType;
+    }
+    get rootNodes() {
+        if (this.blockCardComponentRef) {
+            return [this.blockCardComponentRef.instance.nativeElement];
+        }
+        return super.getRootNodes();
+    }
+    get isBlockCard() {
+        return this.viewContext.editor.isBlockCard(this.descendant);
+    }
+    ngOnInit() {
+        NODE_TO_INDEX.set(this.descendant, this.index);
+        NODE_TO_PARENT.set(this.descendant, this.context.parent);
+        this.createView();
+        if (this.isBlockCard) {
+            this.createBlockCard();
+        }
+    }
+    destroyView() {
+        super.destroyView();
+        this.destroyBlockCard();
+    }
+    ngOnChanges() {
+        if (!this.initialized) {
+            return;
+        }
+        NODE_TO_INDEX.set(this.descendant, this.index);
+        NODE_TO_PARENT.set(this.descendant, this.context.parent);
+        this.updateView();
+        if (this.isBlockCard) {
+            this.updateBlockCard();
+        }
+    }
+    destroyBlockCard() {
+        if (this.blockCardComponentRef) {
+            this.blockCardComponentRef.destroy();
+            this.blockCardComponentRef = null;
+        }
+    }
+    createBlockCard() {
+        const rootNodes = this.rootNodes;
+        this.blockCardComponentRef = this.viewContainerRef.createComponent(SlateBlockCardComponent);
+        this.blockCardComponentRef.instance.initializeCenter(rootNodes);
+    }
+    updateBlockCard() {
+        if (this.blockCardComponentRef) {
+            return;
+        }
+        const rootNodes = this.rootNodes;
+        this.createBlockCard();
+        const firstRootNode = rootNodes[0];
+        firstRootNode.replaceWith(this.blockCardComponentRef.instance.nativeElement);
+    }
+    getCommonContext() {
+        const path = AngularEditor.findPath(this.viewContext.editor, this.context.parent);
+        const p = path.concat(this.index);
+        try {
+            const range = Editor.range(this.viewContext.editor, p);
+            const sel = this.context.selection && Range.intersection(range, this.context.selection);
+            const ds = this.context.decorate([this.descendant, p]);
+            for (const dec of this.context.decorations) {
+                const d = Range.intersection(dec, range);
+                if (d) {
+                    ds.push(d);
+                }
+            }
+            return { selection: sel, decorations: ds };
+        }
+        catch (error) {
+            this.viewContext.editor.onError({ code: SlateErrorCode.GetStartPointError, nativeError: error });
+            return { selection: null, decorations: [] };
+        }
+    }
+    getContext() {
+        if (Element.isElement(this.descendant)) {
+            const computedContext = this.getCommonContext();
+            const key = AngularEditor.findKey(this.viewContext.editor, this.descendant);
+            const isInline = this.viewContext.editor.isInline(this.descendant);
+            const isVoid = this.viewContext.editor.isVoid(this.descendant);
+            const elementContext = {
+                element: this.descendant,
+                ...computedContext,
+                attributes: {
+                    'data-slate-node': 'element',
+                    'data-slate-key': key.id
+                },
+                decorate: this.context.decorate,
+                readonly: this.context.readonly
+            };
+            if (isInline) {
+                elementContext.attributes['data-slate-inline'] = true;
+            }
+            if (isVoid) {
+                elementContext.attributes['data-slate-void'] = true;
+                elementContext.attributes.contenteditable = false;
+            }
+            return elementContext;
+        }
+        else {
+            const computedContext = this.getCommonContext();
+            const isLeafBlock = AngularEditor.isLeafBlock(this.viewContext.editor, this.context.parent);
+            const textContext = {
+                decorations: computedContext.decorations,
+                isLast: isLeafBlock && this.index === this.context.parent.children.length - 1,
+                parent: this.context.parent,
+                text: this.descendant
+            };
+            return textContext;
+        }
+    }
+    getViewType() {
+        if (Element.isElement(this.descendant)) {
+            return (this.viewContext.renderElement && this.viewContext.renderElement(this.descendant)) || this.defaultElementComponentType;
+        }
+        else {
+            const isVoid = this.viewContext.editor.isVoid(this.context.parent);
+            return isVoid ? SlateVoidTextComponent : (this.viewContext.renderText && this.viewContext.renderText(this.descendant)) || SlateDefaultTextComponent;
+        }
+    }
+    memoizedElementContext(prev, next) {
+        return (prev.element === next.element &&
+            (!this.viewContext.isStrictDecorate || prev.decorate === next.decorate) &&
+            prev.readonly === next.readonly &&
+            isDecoratorRangeListEqual(prev.decorations, next.decorations) &&
+            (prev.selection === next.selection ||
+                (!!prev.selection &&
+                    !!next.selection &&
+                    Range.equals(prev.selection, next.selection))));
+    }
+    memoizedTextContext(prev, next) {
+        return (next.parent === prev.parent &&
+            next.isLast === prev.isLast &&
+            next.text === prev.text &&
+            isDecoratorRangeListEqual(next.decorations, prev.decorations));
+    }
+    memoizedContext(prev, next) {
+        if (Element.isElement(this.descendant)) {
+            return this.memoizedElementContext(prev, next);
+        }
+        else {
+            return this.memoizedTextContext(prev, next);
+        }
+    }
+}
+SlateDescendantComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateDescendantComponent, deps: [{ token: i0.ViewContainerRef }, { token: SLATE_DEFAULT_ELEMENT_COMPONENT_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
+SlateDescendantComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: SlateDescendantComponent, selector: "slate-descendant", inputs: { descendant: "descendant", context: "context", viewContext: "viewContext", index: "index" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateDescendantComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'slate-descendant',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SLATE_DEFAULT_ELEMENT_COMPONENT_TOKEN]
+                }] }]; }, propDecorators: { descendant: [{
+                type: Input
+            }], context: [{
+                type: Input
+            }], viewContext: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }] } });
+
+class SlateChildrenComponent extends ViewContainer {
+    constructor() {
+        super(...arguments);
+        this.trackBy = (index, node) => {
+            return this.viewContext.trackBy(node) || AngularEditor.findKey(this.viewContext.editor, node);
+        };
+    }
+    ngOnInit() {
+    }
+}
+SlateChildrenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateChildrenComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SlateChildrenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: SlateChildrenComponent, selector: "slate-children", inputs: { children: "children", context: "context", viewContext: "viewContext" }, viewQueries: [{ propertyName: "childrenComponent", predicate: SlateDescendantComponent, descendants: true, read: SlateDescendantComponent }], usesInheritance: true, ngImport: i0, template: `<slate-descendant 
+                    [descendant]="descendant"
+                    [context]="context" [viewContext]="viewContext"
+                    [viewContext]="viewContext"
+                    [index]="index"
+                    *ngFor="let descendant of children;let index = index; trackBy: trackBy"></slate-descendant>`, isInline: true, components: [{ type: SlateDescendantComponent, selector: "slate-descendant", inputs: ["descendant", "context", "viewContext", "index"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateChildrenComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'slate-children',
+                    template: `<slate-descendant 
+                    [descendant]="descendant"
+                    [context]="context" [viewContext]="viewContext"
+                    [viewContext]="viewContext"
+                    [index]="index"
+                    *ngFor="let descendant of children;let index = index; trackBy: trackBy"></slate-descendant>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { children: [{
+                type: Input
+            }], context: [{
+                type: Input
+            }], viewContext: [{
+                type: Input
+            }], childrenComponent: [{
+                type: ViewChildren,
+                args: [SlateDescendantComponent, { read: SlateDescendantComponent }]
+            }] } });
+
+class SlateStringTemplateComponent {
+}
+SlateStringTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateStringTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SlateStringTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: SlateStringTemplateComponent, selector: "slate-string-template", viewQueries: [{ propertyName: "stringTemplate", first: true, predicate: ["stringTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "compatStringTemplate", first: true, predicate: ["compatStringTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "emptyStringTemplate", first: true, predicate: ["emptyStringTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "emptyTextTemplate", first: true, predicate: ["emptyTextTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "lineBreakEmptyStringTemplate", first: true, predicate: ["lineBreakEmptyStringTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #stringTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n    <span editable-text data-slate-string=\"true\">{{ context.text }}</span>\n</ng-template>\n<ng-template #compatStringTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n    <!-- Compatible with Chinese input in Chrome with \\n -->\n    <span editable-text data-slate-string=\"true\">{{ context.text }}<span data-slate-zero-width>{{'\\uFEFF'}}</span></span>\n</ng-template>\n<ng-template #emptyStringTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n    <span editable-text data-slate-zero-width=\"z\" attr.data-slate-length=\"{{ context.elementStringLength }}\">{{ '\\uFEFF' }}</span>\n</ng-template>\n<ng-template #emptyTextTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n    <span editable-text data-slate-zero-width=\"z\" data-slate-length=\"0\">{{ '\\uFEFF' }}</span>\n</ng-template>\n<ng-template #lineBreakEmptyStringTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n    <span editable-text data-slate-zero-width=\"n\" attr.data-slate-length=\"{{ context.elementStringLength }}\">{{ '\\uFEFF'\n        }}<br /></span>\n</ng-template>", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateStringTemplateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'slate-string-template', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #stringTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n    <span editable-text data-slate-string=\"true\">{{ context.text }}</span>\n</ng-template>\n<ng-template #compatStringTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n    <!-- Compatible with Chinese input in Chrome with \\n -->\n    <span editable-text data-slate-string=\"true\">{{ context.text }}<span data-slate-zero-width>{{'\\uFEFF'}}</span></span>\n</ng-template>\n<ng-template #emptyStringTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n    <span editable-text data-slate-zero-width=\"z\" attr.data-slate-length=\"{{ context.elementStringLength }}\">{{ '\\uFEFF' }}</span>\n</ng-template>\n<ng-template #emptyTextTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n    <span editable-text data-slate-zero-width=\"z\" data-slate-length=\"0\">{{ '\\uFEFF' }}</span>\n</ng-template>\n<ng-template #lineBreakEmptyStringTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n    <span editable-text data-slate-zero-width=\"n\" attr.data-slate-length=\"{{ context.elementStringLength }}\">{{ '\\uFEFF'\n        }}<br /></span>\n</ng-template>" }]
+        }], propDecorators: { stringTemplate: [{
+                type: ViewChild,
+                args: ['stringTemplate', { read: TemplateRef, static: true }]
+            }], compatStringTemplate: [{
+                type: ViewChild,
+                args: ['compatStringTemplate', { read: TemplateRef, static: true }]
+            }], emptyStringTemplate: [{
+                type: ViewChild,
+                args: ['emptyStringTemplate', { read: TemplateRef, static: true }]
+            }], emptyTextTemplate: [{
+                type: ViewChild,
+                args: ['emptyTextTemplate', { read: TemplateRef, static: true }]
+            }], lineBreakEmptyStringTemplate: [{
+                type: ViewChild,
+                args: ['lineBreakEmptyStringTemplate', { read: TemplateRef, static: true }]
+            }] } });
+
+const timeDebug = Debug('slate-angular-time');
+// not correctly clipboardData on beforeinput
+const forceOnDOMPaste = IS_SAFARI;
+class SlateEditableComponent {
+    constructor(elementRef, renderer2, cdr, ngZone, injector) {
+        this.elementRef = elementRef;
+        this.renderer2 = renderer2;
+        this.cdr = cdr;
+        this.ngZone = ngZone;
+        this.injector = injector;
+        this.destroy$ = new Subject();
+        this.isComposing = false;
+        this.isDraggingInternally = false;
+        this.isUpdatingSelection = false;
+        this.latestElement = null;
+        this.manualListeners = [];
+        this.onTouchedCallback = () => { };
+        this.onChangeCallback = () => { };
+        this.decorate = () => [];
+        this.isStrictDecorate = true;
+        this.trackBy = () => null;
+        this.readonly = false;
+        //#endregion
+        //#region DOM attr
+        this.spellCheck = false;
+        this.autoCorrect = false;
+        this.autoCapitalize = false;
+        this.dataSlateEditor = true;
+        this.dataSlateNode = 'value';
+        this.dataGramm = false;
+    }
+    get hasBeforeInputSupport() {
+        return HAS_BEFORE_INPUT_SUPPORT;
+    }
+    ngOnInit() {
+        this.editor.injector = this.injector;
+        this.editor.children = [];
+        let window = getDefaultView(this.elementRef.nativeElement);
+        EDITOR_TO_WINDOW.set(this.editor, window);
+        EDITOR_TO_ELEMENT.set(this.editor, this.elementRef.nativeElement);
+        NODE_TO_ELEMENT.set(this.editor, this.elementRef.nativeElement);
+        ELEMENT_TO_NODE.set(this.elementRef.nativeElement, this.editor);
+        IS_READONLY.set(this.editor, this.readonly);
+        EDITOR_TO_ON_CHANGE.set(this.editor, () => {
+            this.ngZone.run(() => {
+                this.onChange();
+            });
+        });
+        this.ngZone.runOutsideAngular(() => {
+            this.initialize();
+        });
+        this.initializeViewContext();
+        this.initializeContext();
+        // remove unused DOM, just keep templateComponent instance
+        this.templateElementRef.nativeElement.remove();
+        // add browser class
+        let browserClass = IS_FIREFOX ? 'firefox' : (IS_SAFARI ? 'safari' : '');
+        browserClass && this.elementRef.nativeElement.classList.add(browserClass);
+    }
+    ngOnChanges(simpleChanges) {
+        if (!this.initialized) {
+            return;
+        }
+        const decorateChange = simpleChanges['decorate'];
+        if (decorateChange) {
+            this.forceFlush();
+        }
+        const readonlyChange = simpleChanges['readonly'];
+        if (readonlyChange) {
+            IS_READONLY.set(this.editor, this.readonly);
+            this.detectContext();
+            this.toSlateSelection();
+        }
+    }
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    writeValue(value) {
+        if (value && value.length) {
+            if (check(value)) {
+                this.editor.children = value;
+            }
+            else {
+                this.editor.onError({
+                    code: SlateErrorCode.InvalidValueError,
+                    name: 'initialize invalid data',
+                    data: value
+                });
+                this.editor.children = normalize(value);
+            }
+            this.initializeContext();
+            this.cdr.markForCheck();
+        }
+    }
+    initialize() {
+        this.initialized = true;
+        const window = AngularEditor.getWindow(this.editor);
+        this.addEventListener('selectionchange', event => {
+            this.toSlateSelection();
+        }, window.document);
+        if (HAS_BEFORE_INPUT_SUPPORT) {
+            this.addEventListener('beforeinput', this.onDOMBeforeInput.bind(this));
+        }
+        this.addEventListener('blur', this.onDOMBlur.bind(this));
+        this.addEventListener('click', this.onDOMClick.bind(this));
+        this.addEventListener('compositionend', this.onDOMCompositionEnd.bind(this));
+        this.addEventListener('compositionstart', this.onDOMCompositionStart.bind(this));
+        this.addEventListener('copy', this.onDOMCopy.bind(this));
+        this.addEventListener('cut', this.onDOMCut.bind(this));
+        this.addEventListener('dragover', this.onDOMDragOver.bind(this));
+        this.addEventListener('dragstart', this.onDOMDragStart.bind(this));
+        this.addEventListener('dragend', this.onDOMDragEnd.bind(this));
+        this.addEventListener('drop', this.onDOMDrop.bind(this));
+        this.addEventListener('focus', this.onDOMFocus.bind(this));
+        this.addEventListener('keydown', this.onDOMKeydown.bind(this));
+        this.addEventListener('paste', this.onDOMPaste.bind(this));
+        BEFORE_INPUT_EVENTS.forEach(event => {
+            this.addEventListener(event.name, () => { });
+        });
+    }
+    toNativeSelection() {
+        try {
+            const { selection } = this.editor;
+            const root = AngularEditor.findDocumentOrShadowRoot(this.editor);
+            const domSelection = root.getSelection();
+            if (this.isComposing || !domSelection || !AngularEditor.isFocused(this.editor)) {
+                return;
+            }
+            const hasDomSelection = domSelection.type !== 'None';
+            // If the DOM selection is properly unset, we're done.
+            if (!selection && !hasDomSelection) {
+                return;
+            }
+            // If the DOM selection is already correct, we're done.
+            // verify that the dom selection is in the editor
+            const editorElement = EDITOR_TO_ELEMENT.get(this.editor);
+            let hasDomSelectionInEditor = false;
+            if (editorElement.contains(domSelection.anchorNode) && editorElement.contains(domSelection.focusNode)) {
+                hasDomSelectionInEditor = true;
+            }
+            // If the DOM selection is in the editor and the editor selection is already correct, we're done.
+            if (hasDomSelection &&
+                hasDomSelectionInEditor &&
+                selection &&
+                hasStringTarget(domSelection) &&
+                Range.equals(AngularEditor.toSlateRange(this.editor, domSelection), selection)) {
+                return;
+            }
+            // when <Editable/> is being controlled through external value
+            // then its children might just change - DOM responds to it on its own
+            // but Slate's value is not being updated through any operation
+            // and thus it doesn't transform selection on its own
+            if (selection && !AngularEditor.hasRange(this.editor, selection)) {
+                this.editor.selection = AngularEditor.toSlateRange(this.editor, domSelection);
+                return;
+            }
+            // Otherwise the DOM selection is out of sync, so update it.
+            const el = AngularEditor.toDOMNode(this.editor, this.editor);
+            this.isUpdatingSelection = true;
+            const newDomRange = selection && AngularEditor.toDOMRange(this.editor, selection);
+            if (newDomRange) {
+                // COMPAT: Since the DOM range has no concept of backwards/forwards
+                // we need to check and do the right thing here.
+                if (Range.isBackward(selection)) {
+                    // eslint-disable-next-line max-len
+                    domSelection.setBaseAndExtent(newDomRange.endContainer, newDomRange.endOffset, newDomRange.startContainer, newDomRange.startOffset);
+                }
+                else {
+                    // eslint-disable-next-line max-len
+                    domSelection.setBaseAndExtent(newDomRange.startContainer, newDomRange.startOffset, newDomRange.endContainer, newDomRange.endOffset);
+                }
+            }
+            else {
+                domSelection.removeAllRanges();
+            }
+            setTimeout(() => {
+                // COMPAT: In Firefox, it's not enough to create a range, you also need
+                // to focus the contenteditable element too. (2016/11/16)
+                if (newDomRange && IS_FIREFOX) {
+                    el.focus();
+                }
+                this.isUpdatingSelection = false;
+            });
+        }
+        catch (error) {
+            this.editor.onError({ code: SlateErrorCode.ToNativeSelectionError, nativeError: error });
+        }
+    }
+    onChange() {
+        this.forceFlush();
+        this.onChangeCallback(this.editor.children);
+    }
+    ngAfterViewChecked() {
+        timeDebug('editable ngAfterViewChecked');
+    }
+    ngDoCheck() {
+        timeDebug('editable ngDoCheck');
+    }
+    forceFlush() {
+        timeDebug('start data sync');
+        this.detectContext();
+        this.cdr.detectChanges();
+        // repair collaborative editing when Chinese input is interrupted by other users' cursors
+        // when the DOMElement where the selection is located is removed
+        // the compositionupdate and compositionend events will no longer be fired
+        // so isComposing needs to be corrected
+        // need exec after this.cdr.detectChanges() to render HTML
+        // need exec before this.toNativeSelection() to correct native selection
+        if (this.isComposing) {
+            // Composition input text be not rendered when user composition input with selection is expanded
+            // At this time, the following matching conditions are met, assign isComposing to false, and the status is wrong
+            // this time condition is true and isComposiing is assigned false
+            // Therefore, need to wait for the composition input text to be rendered before performing condition matching
+            setTimeout(() => {
+                const textNode = Node.get(this.editor, this.editor.selection.anchor.path);
+                const textDOMNode = AngularEditor.toDOMNode(this.editor, textNode);
+                let textContent = '';
+                // skip decorate text
+                textDOMNode.querySelectorAll('[editable-text]').forEach((stringDOMNode) => {
+                    let text = stringDOMNode.textContent;
+                    const zeroChar = '\uFEFF';
+                    // remove zero with char
+                    if (text.startsWith(zeroChar)) {
+                        text = text.slice(1);
+                    }
+                    if (text.endsWith(zeroChar)) {
+                        text = text.slice(0, text.length - 1);
+                    }
+                    textContent += text;
+                });
+                if (Node.string(textNode).endsWith(textContent)) {
+                    this.isComposing = false;
+                }
+            }, 0);
+        }
+        this.toNativeSelection();
+        timeDebug('end data sync');
+    }
+    initializeContext() {
+        this.context = {
+            parent: this.editor,
+            selection: this.editor.selection,
+            decorations: this.generateDecorations(),
+            decorate: this.decorate,
+            readonly: this.readonly
+        };
+    }
+    initializeViewContext() {
+        this.viewContext = {
+            editor: this.editor,
+            renderElement: this.renderElement,
+            renderLeaf: this.renderLeaf,
+            renderText: this.renderText,
+            trackBy: this.trackBy,
+            isStrictDecorate: this.isStrictDecorate,
+            templateComponent: this.templateComponent
+        };
+    }
+    detectContext() {
+        const decorations = this.generateDecorations();
+        if (this.context.selection !== this.editor.selection ||
+            this.context.decorate !== this.decorate ||
+            this.context.readonly !== this.readonly ||
+            !isDecoratorRangeListEqual(this.context.decorations, decorations)) {
+            this.context = {
+                parent: this.editor,
+                selection: this.editor.selection,
+                decorations: decorations,
+                decorate: this.decorate,
+                readonly: this.readonly
+            };
+        }
+    }
+    composePlaceholderDecorate(editor) {
+        if (this.placeholderDecorate) {
+            return this.placeholderDecorate(editor) || [];
+        }
+        if (this.placeholder &&
+            editor.children.length === 1 &&
+            Array.from(Node.texts(editor)).length === 1 &&
+            Node.string(editor) === '') {
+            const start = Editor.start(editor, []);
+            return [
+                {
+                    placeholder: this.placeholder,
+                    anchor: start,
+                    focus: start,
+                },
+            ];
+        }
+        else {
+            return [];
+        }
+    }
+    generateDecorations() {
+        const decorations = this.decorate([this.editor, []]);
+        const placeholderDecorations = this.isComposing
+            ? []
+            : this.composePlaceholderDecorate(this.editor);
+        decorations.push(...placeholderDecorations);
+        return decorations;
+    }
+    //#region event proxy
+    addEventListener(eventName, listener, target = this.elementRef.nativeElement) {
+        this.manualListeners.push(this.renderer2.listen(target, eventName, (event) => {
+            const beforeInputEvent = extractBeforeInputEvent(event.type, null, event, event.target);
+            if (beforeInputEvent) {
+                this.onFallbackBeforeInput(beforeInputEvent);
+            }
+            listener(event);
+        }));
+    }
+    toSlateSelection() {
+        if (!this.readonly && !this.isComposing && !this.isUpdatingSelection && !this.isDraggingInternally) {
+            try {
+                const root = AngularEditor.findDocumentOrShadowRoot(this.editor);
+                const { activeElement } = root;
+                const el = AngularEditor.toDOMNode(this.editor, this.editor);
+                const domSelection = root.getSelection();
+                if (activeElement === el || hasEditableTarget(this.editor, activeElement)) {
+                    this.latestElement = activeElement;
+                    IS_FOCUSED.set(this.editor, true);
+                }
+                else {
+                    IS_FOCUSED.delete(this.editor);
+                }
+                if (!domSelection) {
+                    return Transforms.deselect(this.editor);
+                }
+                const editorElement = EDITOR_TO_ELEMENT.get(this.editor);
+                const hasDomSelectionInEditor = editorElement.contains(domSelection.anchorNode) && editorElement.contains(domSelection.focusNode);
+                if (!hasDomSelectionInEditor) {
+                    Transforms.deselect(this.editor);
+                    return;
+                }
+                // try to get the selection directly, because some terrible case can be normalize for normalizeDOMPoint
+                // for example, double-click the last cell of the table to select a non-editable DOM
+                const range = AngularEditor.toSlateRange(this.editor, domSelection);
+                if (this.editor.selection && Range.equals(range, this.editor.selection) && !hasStringTarget(domSelection)) {
+                    // force adjust DOMSelection
+                    this.toNativeSelection();
+                }
+                else {
+                    Transforms.select(this.editor, range);
+                }
+            }
+            catch (error) {
+                this.editor.onError({ code: SlateErrorCode.ToSlateSelectionError, nativeError: error });
+            }
+        }
+    }
+    onDOMBeforeInput(event) {
+        const editor = this.editor;
+        if (!this.readonly && hasEditableTarget(editor, event.target) && !this.isDOMEventHandled(event, this.beforeInput)) {
+            try {
+                const { selection } = editor;
+                const { inputType: type } = event;
+                const data = event.dataTransfer || event.data || undefined;
+                event.preventDefault();
+                // COMPAT: If the selection is expanded, even if the command seems like
+                // a delete forward/backward command it should delete the selection.
+                if (selection && Range.isExpanded(selection) && type.startsWith('delete')) {
+                    const direction = type.endsWith('Backward') ? 'backward' : 'forward';
+                    Editor.deleteFragment(editor, { direction });
+                    return;
+                }
+                switch (type) {
+                    case 'deleteByComposition':
+                    case 'deleteByCut':
+                    case 'deleteByDrag': {
+                        Editor.deleteFragment(editor);
+                        break;
+                    }
+                    case 'deleteContent':
+                    case 'deleteContentForward': {
+                        Editor.deleteForward(editor);
+                        break;
+                    }
+                    case 'deleteContentBackward': {
+                        Editor.deleteBackward(editor);
+                        break;
+                    }
+                    case 'deleteEntireSoftLine': {
+                        Editor.deleteBackward(editor, { unit: 'line' });
+                        Editor.deleteForward(editor, { unit: 'line' });
+                        break;
+                    }
+                    case 'deleteHardLineBackward': {
+                        Editor.deleteBackward(editor, { unit: 'block' });
+                        break;
+                    }
+                    case 'deleteSoftLineBackward': {
+                        Editor.deleteBackward(editor, { unit: 'line' });
+                        break;
+                    }
+                    case 'deleteHardLineForward': {
+                        Editor.deleteForward(editor, { unit: 'block' });
+                        break;
+                    }
+                    case 'deleteSoftLineForward': {
+                        Editor.deleteForward(editor, { unit: 'line' });
+                        break;
+                    }
+                    case 'deleteWordBackward': {
+                        Editor.deleteBackward(editor, { unit: 'word' });
+                        break;
+                    }
+                    case 'deleteWordForward': {
+                        Editor.deleteForward(editor, { unit: 'word' });
+                        break;
+                    }
+                    case 'insertLineBreak':
+                    case 'insertParagraph': {
+                        Editor.insertBreak(editor);
+                        break;
+                    }
+                    case 'insertFromComposition': {
+                        // COMPAT: in safari, `compositionend` event is dispatched after
+                        // the beforeinput event with the inputType "insertFromComposition" has been dispatched.
+                        // https://www.w3.org/TR/input-events-2/
+                        // so the following code is the right logic
+                        // because DOM selection in sync will be exec before `compositionend` event
+                        // isComposing is true will prevent DOM selection being update correctly.
+                        this.isComposing = false;
+                        preventInsertFromComposition(event, this.editor);
+                    }
+                    case 'insertFromDrop':
+                    case 'insertFromPaste':
+                    case 'insertFromYank':
+                    case 'insertReplacementText':
+                    case 'insertText': {
+                        // use a weak comparison instead of 'instanceof' to allow
+                        // programmatic access of paste events coming from external windows
+                        // like cypress where cy.window does not work realibly
+                        if (data?.constructor.name === 'DataTransfer') {
+                            AngularEditor.insertData(editor, data);
+                        }
+                        else if (typeof data === 'string') {
+                            Editor.insertText(editor, data);
+                        }
+                        break;
+                    }
+                }
+            }
+            catch (error) {
+                this.editor.onError({ code: SlateErrorCode.OnDOMBeforeInputError, nativeError: error });
+            }
+        }
+    }
+    onDOMBlur(event) {
+        if (this.readonly ||
+            this.isUpdatingSelection ||
+            !hasEditableTarget(this.editor, event.target) ||
+            this.isDOMEventHandled(event, this.blur)) {
+            return;
+        }
+        const window = AngularEditor.getWindow(this.editor);
+        // COMPAT: If the current `activeElement` is still the previous
+        // one, this is due to the window being blurred when the tab
+        // itself becomes unfocused, so we want to abort early to allow to
+        // editor to stay focused when the tab becomes focused again.
+        const root = AngularEditor.findDocumentOrShadowRoot(this.editor);
+        if (this.latestElement === root.activeElement) {
+            return;
+        }
+        const { relatedTarget } = event;
+        const el = AngularEditor.toDOMNode(this.editor, this.editor);
+        // COMPAT: The event should be ignored if the focus is returning
+        // to the editor from an embedded editable element (eg. an <input>
+        // element inside a void node).
+        if (relatedTarget === el) {
+            return;
+        }
+        // COMPAT: The event should be ignored if the focus is moving from
+        // the editor to inside a void node's spacer element.
+        if (isDOMElement(relatedTarget) && relatedTarget.hasAttribute('data-slate-spacer')) {
+            return;
+        }
+        // COMPAT: The event should be ignored if the focus is moving to a
+        // non- editable section of an element that isn't a void node (eg.
+        // a list item of the check list example).
+        if (relatedTarget != null && isDOMNode(relatedTarget) && AngularEditor.hasDOMNode(this.editor, relatedTarget)) {
+            const node = AngularEditor.toSlateNode(this.editor, relatedTarget);
+            if (Element.isElement(node) && !this.editor.isVoid(node)) {
+                return;
+            }
+        }
+        IS_FOCUSED.delete(this.editor);
+    }
+    onDOMClick(event) {
+        if (!this.readonly &&
+            hasTarget(this.editor, event.target) &&
+            !this.isDOMEventHandled(event, this.click) &&
+            isDOMNode(event.target)) {
+            const node = AngularEditor.toSlateNode(this.editor, event.target);
+            const path = AngularEditor.findPath(this.editor, node);
+            const start = Editor.start(this.editor, path);
+            const end = Editor.end(this.editor, path);
+            const startVoid = Editor.void(this.editor, { at: start });
+            const endVoid = Editor.void(this.editor, { at: end });
+            if (startVoid && endVoid && Path.equals(startVoid[1], endVoid[1])) {
+                const range = Editor.range(this.editor, start);
+                Transforms.select(this.editor, range);
+            }
+        }
+    }
+    onDOMCompositionEnd(event) {
+        if (!event.data && !Range.isCollapsed(this.editor.selection)) {
+            Transforms.delete(this.editor);
+        }
+        if (hasEditableTarget(this.editor, event.target) && !this.isDOMEventHandled(event, this.compositionEnd)) {
+            // COMPAT: In Chrome/Firefox, `beforeinput` events for compositions
+            // aren't correct and never fire the "insertFromComposition"
+            // type that we need. So instead, insert whenever a composition
+            // ends since it will already have been committed to the DOM.
+            if (this.isComposing === true && !IS_SAFARI && event.data) {
+                preventInsertFromComposition(event, this.editor);
+                Editor.insertText(this.editor, event.data);
+            }
+            // COMPAT: In Firefox 87.0 CompositionEnd fire twice
+            // so we need avoid repeat isnertText by isComposing === true,
+            this.isComposing = false;
+        }
+        this.detectContext();
+        this.cdr.detectChanges();
+    }
+    onDOMCompositionStart(event) {
+        const { selection } = this.editor;
+        if (selection) {
+            // solve the problem of cross node Chinese input
+            if (Range.isExpanded(selection)) {
+                Editor.deleteFragment(this.editor);
+                this.forceFlush();
+            }
+        }
+        if (hasEditableTarget(this.editor, event.target) && !this.isDOMEventHandled(event, this.compositionStart)) {
+            this.isComposing = true;
+        }
+        this.detectContext();
+        this.cdr.detectChanges();
+    }
+    onDOMCopy(event) {
+        const window = AngularEditor.getWindow(this.editor);
+        const isOutsideSlate = !hasStringTarget(window.getSelection()) && isTargetInsideVoid(this.editor, event.target);
+        if (!isOutsideSlate && hasTarget(this.editor, event.target) && !this.readonly && !this.isDOMEventHandled(event, this.copy)) {
+            event.preventDefault();
+            AngularEditor.setFragmentData(this.editor, event.clipboardData, 'copy');
+        }
+    }
+    onDOMCut(event) {
+        if (!this.readonly && hasEditableTarget(this.editor, event.target) && !this.isDOMEventHandled(event, this.cut)) {
+            event.preventDefault();
+            AngularEditor.setFragmentData(this.editor, event.clipboardData, 'cut');
+            const { selection } = this.editor;
+            if (selection) {
+                AngularEditor.deleteCutData(this.editor);
+            }
+        }
+    }
+    onDOMDragOver(event) {
+        if (hasTarget(this.editor, event.target) && !this.isDOMEventHandled(event, this.dragOver)) {
+            // Only when the target is void, call `preventDefault` to signal
+            // that drops are allowed. Editable content is droppable by
+            // default, and calling `preventDefault` hides the cursor.
+            const node = AngularEditor.toSlateNode(this.editor, event.target);
+            if (Editor.isVoid(this.editor, node)) {
+                event.preventDefault();
+            }
+        }
+    }
+    onDOMDragStart(event) {
+        if (!this.readonly && hasTarget(this.editor, event.target) && !this.isDOMEventHandled(event, this.dragStart)) {
+            const node = AngularEditor.toSlateNode(this.editor, event.target);
+            const path = AngularEditor.findPath(this.editor, node);
+            const voidMatch = Editor.isVoid(this.editor, node) ||
+                Editor.void(this.editor, { at: path, voids: true });
+            // If starting a drag on a void node, make sure it is selected
+            // so that it shows up in the selection's fragment.
+            if (voidMatch) {
+                const range = Editor.range(this.editor, path);
+                Transforms.select(this.editor, range);
+            }
+            this.isDraggingInternally = true;
+            AngularEditor.setFragmentData(this.editor, event.dataTransfer, 'drag');
+        }
+    }
+    onDOMDrop(event) {
+        const editor = this.editor;
+        if (!this.readonly && hasTarget(this.editor, event.target) && !this.isDOMEventHandled(event, this.drop)) {
+            event.preventDefault();
+            // Keep a reference to the dragged range before updating selection
+            const draggedRange = editor.selection;
+            // Find the range where the drop happened
+            const range = AngularEditor.findEventRange(editor, event);
+            const data = event.dataTransfer;
+            Transforms.select(editor, range);
+            if (this.isDraggingInternally) {
+                if (draggedRange) {
+                    Transforms.delete(editor, {
+                        at: draggedRange,
+                    });
+                }
+                this.isDraggingInternally = false;
+            }
+            AngularEditor.insertData(editor, data);
+            // When dragging from another source into the editor, it's possible
+            // that the current editor does not have focus.
+            if (!AngularEditor.isFocused(editor)) {
+                AngularEditor.focus(editor);
+            }
+        }
+    }
+    onDOMDragEnd(event) {
+        if (!this.readonly && this.isDraggingInternally && hasTarget(this.editor, event.target) && !this.isDOMEventHandled(event, this.dragEnd)) {
+            this.isDraggingInternally = false;
+        }
+    }
+    onDOMFocus(event) {
+        if (!this.readonly &&
+            !this.isUpdatingSelection &&
+            hasEditableTarget(this.editor, event.target) &&
+            !this.isDOMEventHandled(event, this.focus)) {
+            const el = AngularEditor.toDOMNode(this.editor, this.editor);
+            const root = AngularEditor.findDocumentOrShadowRoot(this.editor);
+            this.latestElement = root.activeElement;
+            // COMPAT: If the editor has nested editable elements, the focus
+            // can go to them. In Firefox, this must be prevented because it
+            // results in issues with keyboard navigation. (2017/03/30)
+            if (IS_FIREFOX && event.target !== el) {
+                el.focus();
+                return;
+            }
+            IS_FOCUSED.set(this.editor, true);
+        }
+    }
+    onDOMKeydown(event) {
+        const editor = this.editor;
+        if (!this.readonly &&
+            hasEditableTarget(editor, event.target) &&
+            !this.isComposing &&
+            !this.isDOMEventHandled(event, this.keydown)) {
+            const nativeEvent = event;
+            const { selection } = editor;
+            const element = editor.children[selection !== null ? selection.focus.path[0] : 0];
+            const isRTL = getDirection(Node.string(element)) === 'rtl';
+            try {
+                // COMPAT: Since we prevent the default behavior on
+                // `beforeinput` events, the browser doesn't think there's ever
+                // any history stack to undo or redo, so we have to manage these
+                // hotkeys ourselves. (2019/11/06)
+                if (hotkeys.isRedo(nativeEvent)) {
+                    event.preventDefault();
+                    if (HistoryEditor.isHistoryEditor(editor)) {
+                        editor.redo();
+                    }
+                    return;
+                }
+                if (hotkeys.isUndo(nativeEvent)) {
+                    event.preventDefault();
+                    if (HistoryEditor.isHistoryEditor(editor)) {
+                        editor.undo();
+                    }
+                    return;
+                }
+                // COMPAT: Certain browsers don't handle the selection updates
+                // properly. In Chrome, the selection isn't properly extended.
+                // And in Firefox, the selection isn't properly collapsed.
+                // (2017/10/17)
+                if (hotkeys.isMoveLineBackward(nativeEvent)) {
+                    event.preventDefault();
+                    Transforms.move(editor, { unit: 'line', reverse: true });
+                    return;
+                }
+                if (hotkeys.isMoveLineForward(nativeEvent)) {
+                    event.preventDefault();
+                    Transforms.move(editor, { unit: 'line' });
+                    return;
+                }
+                if (hotkeys.isExtendLineBackward(nativeEvent)) {
+                    event.preventDefault();
+                    Transforms.move(editor, {
+                        unit: 'line',
+                        edge: 'focus',
+                        reverse: true
+                    });
+                    return;
+                }
+                if (hotkeys.isExtendLineForward(nativeEvent)) {
+                    event.preventDefault();
+                    Transforms.move(editor, { unit: 'line', edge: 'focus' });
+                    return;
+                }
+                // COMPAT: If a void node is selected, or a zero-width text node
+                // adjacent to an inline is selected, we need to handle these
+                // hotkeys manually because browsers won't be able to skip over
+                // the void node with the zero-width space not being an empty
+                // string.
+                if (hotkeys.isMoveBackward(nativeEvent)) {
+                    event.preventDefault();
+                    if (selection && Range.isCollapsed(selection)) {
+                        Transforms.move(editor, { reverse: !isRTL });
+                    }
+                    else {
+                        Transforms.collapse(editor, { edge: 'start' });
+                    }
+                    return;
+                }
+                if (hotkeys.isMoveForward(nativeEvent)) {
+                    event.preventDefault();
+                    if (selection && Range.isCollapsed(selection)) {
+                        Transforms.move(editor, { reverse: isRTL });
+                    }
+                    else {
+                        Transforms.collapse(editor, { edge: 'end' });
+                    }
+                    return;
+                }
+                if (hotkeys.isMoveWordBackward(nativeEvent)) {
+                    event.preventDefault();
+                    if (selection && Range.isExpanded(selection)) {
+                        Transforms.collapse(editor, { edge: 'focus' });
+                    }
+                    Transforms.move(editor, { unit: 'word', reverse: !isRTL });
+                    return;
+                }
+                if (hotkeys.isMoveWordForward(nativeEvent)) {
+                    event.preventDefault();
+                    if (selection && Range.isExpanded(selection)) {
+                        Transforms.collapse(editor, { edge: 'focus' });
+                    }
+                    Transforms.move(editor, { unit: 'word', reverse: isRTL });
+                    return;
+                }
+                // COMPAT: Certain browsers don't support the `beforeinput` event, so we
+                // fall back to guessing at the input intention for hotkeys.
+                // COMPAT: In iOS, some of these hotkeys are handled in the
+                if (!HAS_BEFORE_INPUT_SUPPORT) {
+                    // We don't have a core behavior for these, but they change the
+                    // DOM if we don't prevent them, so we have to.
+                    if (hotkeys.isBold(nativeEvent) || hotkeys.isItalic(nativeEvent) || hotkeys.isTransposeCharacter(nativeEvent)) {
+                        event.preventDefault();
+                        return;
+                    }
+                    if (hotkeys.isSplitBlock(nativeEvent)) {
+                        event.preventDefault();
+                        Editor.insertBreak(editor);
+                        return;
+                    }
+                    if (hotkeys.isDeleteBackward(nativeEvent)) {
+                        event.preventDefault();
+                        if (selection && Range.isExpanded(selection)) {
+                            Editor.deleteFragment(editor, { direction: 'backward' });
+                        }
+                        else {
+                            Editor.deleteBackward(editor);
+                        }
+                        return;
+                    }
+                    if (hotkeys.isDeleteForward(nativeEvent)) {
+                        event.preventDefault();
+                        if (selection && Range.isExpanded(selection)) {
+                            Editor.deleteFragment(editor, { direction: 'forward' });
+                        }
+                        else {
+                            Editor.deleteForward(editor);
+                        }
+                        return;
+                    }
+                    if (hotkeys.isDeleteLineBackward(nativeEvent)) {
+                        event.preventDefault();
+                        if (selection && Range.isExpanded(selection)) {
+                            Editor.deleteFragment(editor, { direction: 'backward' });
+                        }
+                        else {
+                            Editor.deleteBackward(editor, { unit: 'line' });
+                        }
+                        return;
+                    }
+                    if (hotkeys.isDeleteLineForward(nativeEvent)) {
+                        event.preventDefault();
+                        if (selection && Range.isExpanded(selection)) {
+                            Editor.deleteFragment(editor, { direction: 'forward' });
+                        }
+                        else {
+                            Editor.deleteForward(editor, { unit: 'line' });
+                        }
+                        return;
+                    }
+                    if (hotkeys.isDeleteWordBackward(nativeEvent)) {
+                        event.preventDefault();
+                        if (selection && Range.isExpanded(selection)) {
+                            Editor.deleteFragment(editor, { direction: 'backward' });
+                        }
+                        else {
+                            Editor.deleteBackward(editor, { unit: 'word' });
+                        }
+                        return;
+                    }
+                    if (hotkeys.isDeleteWordForward(nativeEvent)) {
+                        event.preventDefault();
+                        if (selection && Range.isExpanded(selection)) {
+                            Editor.deleteFragment(editor, { direction: 'forward' });
+                        }
+                        else {
+                            Editor.deleteForward(editor, { unit: 'word' });
+                        }
+                        return;
+                    }
+                }
+                else {
+                    if (IS_CHROME || IS_SAFARI) {
+                        // COMPAT: Chrome and Safari support `beforeinput` event but do not fire
+                        // an event when deleting backwards in a selected void inline node
+                        if (selection &&
+                            (hotkeys.isDeleteBackward(nativeEvent) ||
+                                hotkeys.isDeleteForward(nativeEvent)) &&
+                            Range.isCollapsed(selection)) {
+                            const currentNode = Node.parent(editor, selection.anchor.path);
+                            if (Element.isElement(currentNode) &&
+                                Editor.isVoid(editor, currentNode) &&
+                                Editor.isInline(editor, currentNode)) {
+                                event.preventDefault();
+                                Editor.deleteBackward(editor, { unit: 'block' });
+                                return;
+                            }
+                        }
+                    }
+                }
+            }
+            catch (error) {
+                this.editor.onError({ code: SlateErrorCode.OnDOMKeydownError, nativeError: error });
+            }
+        }
+    }
+    onDOMPaste(event) {
+        // COMPAT: Certain browsers don't support the `beforeinput` event, so we
+        // fall back to React's `onPaste` here instead.
+        // COMPAT: Firefox, Chrome and Safari are not emitting `beforeinput` events
+        // when "paste without formatting" option is used.
+        // This unfortunately needs to be handled with paste events instead.
+        if (!this.isDOMEventHandled(event, this.paste) &&
+            (!HAS_BEFORE_INPUT_SUPPORT || isPlainTextOnlyPaste(event) || forceOnDOMPaste) &&
+            !this.readonly &&
+            hasEditableTarget(this.editor, event.target)) {
+            event.preventDefault();
+            AngularEditor.insertData(this.editor, event.clipboardData);
+        }
+    }
+    onFallbackBeforeInput(event) {
+        // COMPAT: Certain browsers don't support the `beforeinput` event, so we
+        // fall back to React's leaky polyfill instead just for it. It
+        // only works for the `insertText` input type.
+        if (!HAS_BEFORE_INPUT_SUPPORT &&
+            !this.readonly &&
+            !this.isDOMEventHandled(event.nativeEvent, this.beforeInput) &&
+            hasEditableTarget(this.editor, event.nativeEvent.target)) {
+            event.nativeEvent.preventDefault();
+            try {
+                const text = event.data;
+                if (!Range.isCollapsed(this.editor.selection)) {
+                    Editor.deleteFragment(this.editor);
+                }
+                // just handle Non-IME input
+                if (!this.isComposing) {
+                    Editor.insertText(this.editor, text);
+                }
+            }
+            catch (error) {
+                this.editor.onError({ code: SlateErrorCode.ToNativeSelectionError, nativeError: error });
+            }
+        }
+    }
+    isDOMEventHandled(event, handler) {
+        if (!handler) {
+            return false;
+        }
+        handler(event);
+        return event.defaultPrevented;
+    }
+    //#endregion
+    ngOnDestroy() {
+        NODE_TO_ELEMENT.delete(this.editor);
+        this.manualListeners.forEach(manualListener => {
+            manualListener();
+        });
+        this.destroy$.complete();
+        EDITOR_TO_ON_CHANGE.delete(this.editor);
+    }
+}
+SlateEditableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateEditableComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SlateEditableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: SlateEditableComponent, selector: "slate-editable", inputs: { editor: "editor", renderElement: "renderElement", renderLeaf: "renderLeaf", renderText: "renderText", decorate: "decorate", placeholderDecorate: "placeholderDecorate", isStrictDecorate: "isStrictDecorate", trackBy: "trackBy", readonly: "readonly", placeholder: "placeholder", beforeInput: "beforeInput", blur: "blur", click: "click", compositionEnd: "compositionEnd", compositionStart: "compositionStart", copy: "copy", cut: "cut", dragOver: "dragOver", dragStart: "dragStart", dragEnd: "dragEnd", drop: "drop", focus: "focus", keydown: "keydown", paste: "paste", spellCheck: "spellCheck", autoCorrect: "autoCorrect", autoCapitalize: "autoCapitalize" }, host: { properties: { "attr.contenteditable": "readonly ? undefined : true", "attr.role": "readonly ? undefined : 'textbox'", "attr.spellCheck": "!hasBeforeInputSupport ? false : spellCheck", "attr.autoCorrect": "!hasBeforeInputSupport ? 'false' : autoCorrect", "attr.autoCapitalize": "!hasBeforeInputSupport ? 'false' : autoCapitalize", "attr.data-slate-editor": "this.dataSlateEditor", "attr.data-slate-node": "this.dataSlateNode", "attr.data-gramm": "this.dataGramm" }, classAttribute: "slate-editable-container" }, providers: [{
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => SlateEditableComponent),
+            multi: true
+        }], viewQueries: [{ propertyName: "templateComponent", first: true, predicate: ["templateComponent"], descendants: true, static: true }, { propertyName: "templateElementRef", first: true, predicate: ["templateComponent"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<slate-children [children]=\"editor.children\" [context]=\"context\" [viewContext]=\"viewContext\"></slate-children>\n<slate-string-template #templateComponent></slate-string-template>", components: [{ type: SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: SlateStringTemplateComponent, selector: "slate-string-template" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateEditableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'slate-editable', host: {
+                        class: 'slate-editable-container',
+                        '[attr.contenteditable]': 'readonly ? undefined : true',
+                        '[attr.role]': `readonly ? undefined : 'textbox'`,
+                        '[attr.spellCheck]': `!hasBeforeInputSupport ? false : spellCheck`,
+                        '[attr.autoCorrect]': `!hasBeforeInputSupport ? 'false' : autoCorrect`,
+                        '[attr.autoCapitalize]': `!hasBeforeInputSupport ? 'false' : autoCapitalize`
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SlateEditableComponent),
+                            multi: true
+                        }], template: "<slate-children [children]=\"editor.children\" [context]=\"context\" [viewContext]=\"viewContext\"></slate-children>\n<slate-string-template #templateComponent></slate-string-template>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Injector }]; }, propDecorators: { editor: [{
+                type: Input
+            }], renderElement: [{
+                type: Input
+            }], renderLeaf: [{
+                type: Input
+            }], renderText: [{
+                type: Input
+            }], decorate: [{
+                type: Input
+            }], placeholderDecorate: [{
+                type: Input
+            }], isStrictDecorate: [{
+                type: Input
+            }], trackBy: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], beforeInput: [{
+                type: Input
+            }], blur: [{
+                type: Input
+            }], click: [{
+                type: Input
+            }], compositionEnd: [{
+                type: Input
+            }], compositionStart: [{
+                type: Input
+            }], copy: [{
+                type: Input
+            }], cut: [{
+                type: Input
+            }], dragOver: [{
+                type: Input
+            }], dragStart: [{
+                type: Input
+            }], dragEnd: [{
+                type: Input
+            }], drop: [{
+                type: Input
+            }], focus: [{
+                type: Input
+            }], keydown: [{
+                type: Input
+            }], paste: [{
+                type: Input
+            }], spellCheck: [{
+                type: Input
+            }], autoCorrect: [{
+                type: Input
+            }], autoCapitalize: [{
+                type: Input
+            }], dataSlateEditor: [{
+                type: HostBinding,
+                args: ['attr.data-slate-editor']
+            }], dataSlateNode: [{
+                type: HostBinding,
+                args: ['attr.data-slate-node']
+            }], dataGramm: [{
+                type: HostBinding,
+                args: ['attr.data-gramm']
+            }], templateComponent: [{
+                type: ViewChild,
+                args: ['templateComponent', { static: true }]
+            }], templateElementRef: [{
+                type: ViewChild,
+                args: ['templateComponent', { static: true, read: ElementRef }]
+            }] } });
+/**
+ * Check if the target is editable and in the editor.
+ */
+const hasEditableTarget = (editor, target) => {
+    return isDOMNode(target) && AngularEditor.hasDOMNode(editor, target, { editable: true });
+};
+/**
+ * Check if two DOM range objects are equal.
+ */
+const isRangeEqual = (a, b) => {
+    return ((a.startContainer === b.startContainer &&
+        a.startOffset === b.startOffset &&
+        a.endContainer === b.endContainer &&
+        a.endOffset === b.endOffset) ||
+        (a.startContainer === b.endContainer &&
+            a.startOffset === b.endOffset &&
+            a.endContainer === b.startContainer &&
+            a.endOffset === b.startOffset));
+};
+/**
+ * Check if the target is in the editor.
+ */
+const hasTarget = (editor, target) => {
+    return isDOMNode(target) && AngularEditor.hasDOMNode(editor, target);
+};
+/**
+ * Check if the target is inside void and in the editor.
+ */
+const isTargetInsideVoid = (editor, target) => {
+    const slateNode = hasTarget(editor, target) && AngularEditor.toSlateNode(editor, target);
+    return Editor.isVoid(editor, slateNode);
+};
+const hasStringTarget = (domSelection) => {
+    return (domSelection.anchorNode.parentElement.hasAttribute('data-slate-string') || domSelection.anchorNode.parentElement.hasAttribute('data-slate-zero-width')) &&
+        (domSelection.focusNode.parentElement.hasAttribute('data-slate-string') || domSelection.focusNode.parentElement.hasAttribute('data-slate-zero-width'));
+};
+/**
+ * remove default insert from composition
+ * @param text
+ */
+const preventInsertFromComposition = (event, editor) => {
+    const types = ['compositionend', 'insertFromComposition'];
+    if (!types.includes(event.type)) {
+        return;
+    }
+    const insertText = event.data;
+    const window = AngularEditor.getWindow(editor);
+    const domSelection = window.getSelection();
+    // ensure text node insert composition input text
+    if (insertText && domSelection.anchorNode instanceof Text && domSelection.anchorNode.textContent.endsWith(insertText)) {
+        const textNode = domSelection.anchorNode;
+        textNode.splitText(textNode.length - insertText.length).remove();
+    }
+};
+
+class SlateElementComponent extends BaseElementComponent {
+}
+SlateElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SlateElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: SlateElementComponent, selector: "[slateElement]", usesInheritance: true, ngImport: i0, template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children><ng-content></ng-content>', isInline: true, components: [{ type: SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateElementComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slateElement]',
+                    template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children><ng-content></ng-content>',
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+class SlateDefaultElementComponent extends BaseElementComponent {
+}
+SlateDefaultElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateDefaultElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SlateDefaultElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: SlateDefaultElementComponent, selector: "div[slateDefaultElement]", usesInheritance: true, ngImport: i0, template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`, isInline: true, components: [{ type: SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateDefaultElementComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[slateDefaultElement]',
+                    template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+class SlateModule {
+}
+SlateModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SlateModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateModule, declarations: [SlateEditableComponent,
+        SlateDefaultElementComponent,
+        SlateElementComponent,
+        SlateVoidTextComponent,
+        SlateDefaultTextComponent,
+        SlateStringComponent,
+        SlateStringTemplateComponent,
+        SlateDescendantComponent,
+        SlateChildrenComponent,
+        SlateBlockCardComponent,
+        SlateLeafComponent,
+        SlateLeavesComponent,
+        SlateDefaultLeafComponent], imports: [CommonModule], exports: [SlateEditableComponent, SlateChildrenComponent, SlateElementComponent, SlateLeavesComponent, SlateStringComponent] });
+SlateModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateModule, providers: [
+        {
+            provide: SLATE_DEFAULT_ELEMENT_COMPONENT_TOKEN,
+            useValue: SlateDefaultElementComponent
+        },
+    ], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SlateModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SlateEditableComponent,
+                        SlateDefaultElementComponent,
+                        SlateElementComponent,
+                        SlateVoidTextComponent,
+                        SlateDefaultTextComponent,
+                        SlateStringComponent,
+                        SlateStringTemplateComponent,
+                        SlateDescendantComponent,
+                        SlateChildrenComponent,
+                        SlateBlockCardComponent,
+                        SlateLeafComponent,
+                        SlateLeavesComponent,
+                        SlateDefaultLeafComponent
+                    ],
+                    imports: [CommonModule],
+                    exports: [SlateEditableComponent, SlateChildrenComponent, SlateElementComponent, SlateLeavesComponent, SlateStringComponent],
+                    providers: [
+                        {
+                            provide: SLATE_DEFAULT_ELEMENT_COMPONENT_TOKEN,
+                            useValue: SlateDefaultElementComponent
+                        },
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of slate-angular
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AngularEditor, BaseComponent, BaseElementComponent, BaseLeafComponent, BaseTextComponent, DOMComment, DOMElement, DOMNode, DOMRange, DOMSelection, DOMStaticRange, DOMText, EDITOR_TO_ELEMENT, EDITOR_TO_ON_CHANGE, EDITOR_TO_PLACEHOLDER, EDITOR_TO_WINDOW, ELEMENT_TO_COMPONENT, ELEMENT_TO_NODE, FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, HAS_BEFORE_INPUT_SUPPORT, IS_ANDROID, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_CLICKING, IS_DRAGGING, IS_EDGE_LEGACY, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_FOCUSED, IS_IOS, IS_QQBROWSER, IS_READONLY, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, KEY_TO_ELEMENT, Key, NODE_TO_ELEMENT, NODE_TO_INDEX, NODE_TO_KEY, NODE_TO_PARENT, PLACEHOLDER_SYMBOL, SlateChildrenComponent, SlateEditableComponent, SlateElementComponent, SlateErrorCode, SlateLeavesComponent, SlateModule, SlateStringComponent, check, getCardTargetAttribute, getClipboardData, getDefaultView, getEditableChild, getEditableChildAndIndex, getPlainText, getSlateFragmentAttribute, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hasShadowRoot, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isComponentType, isDOMComment, isDOMElement, isDOMNode, isDOMSelection, isDOMText, isDecoratorRangeListEqual, isPlainTextOnlyPaste, isTemplateRef, isValid, normalize, normalizeDOMPoint, shallowCompare, withAngular };
+//# sourceMappingURL=slate-angular.mjs.map