slate-angular 17.0.0-next.0 → 17.1.0

package/fesm2022/slate-angular.mjs

@@ -1,7 +1,7 @@
-import { Editor, Range, Transforms, Path, Element, Text as Text$1, Node } from 'slate';
+import { Editor, Range, Element, Transforms, Path, Text as Text$1, Node } from 'slate';
 import { isKeyHotkey } from 'is-hotkey';
 import * as i0 from '@angular/core';
-import { TemplateRef, Component, ChangeDetectionStrategy, ViewChild, Directive, Input, HostBinding, ViewChildren, InjectionToken, Inject, forwardRef, ElementRef, NgModule } from '@angular/core';
+import { TemplateRef, Component, ChangeDetectionStrategy, ViewChild, Directive, Input, InjectionToken, ComponentRef, IterableDiffers, HostBinding, inject, ViewContainerRef, forwardRef, ElementRef, Inject, NgModule } from '@angular/core';
 import { direction } from 'direction';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { Subject } from 'rxjs';
@@ -415,7 +415,7 @@ const AngularEditor = {
         const [start, end] = Range.edges(selection);
         const endBlock = Editor.above(editor, {
             at: end,
-            match: node => Editor.isBlock(editor, node)
+            match: node => Element.isElement(node) && Editor.isBlock(editor, node)
         });
         return Editor.isStart(editor, end, endBlock[1]);
     },
@@ -610,13 +610,17 @@ const AngularEditor = {
     /**
      * Find a Slate node from a native DOM `element`.
      */
-    toSlateNode(editor, domNode) {
+    toSlateNode(editor, domNode, options) {
+        const { suppressThrow } = options || { suppressThrow: false };
         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) {
+            if (suppressThrow) {
+                return null;
+            }
             throw new Error(`Cannot resolve a Slate node from DOM node: ${domEl}`);
         }
         return node;
@@ -632,12 +636,12 @@ const AngularEditor = {
         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 node = AngularEditor.toSlateNode(editor, event.target, { suppressThrow: false });
         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)) {
+        if (Element.isElement(node) && 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, {
@@ -668,18 +672,25 @@ const AngularEditor = {
             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);
+        const range = AngularEditor.toSlateRange(editor, domRange, { suppressThrow: false });
         return range;
     },
-    isLeafInEditor(editor, leafNode) {
+    isLeafInEditor(editor, leafNode, options) {
+        const { suppressThrow } = options;
         const textNode = leafNode.closest('[data-slate-node="text"]');
-        const node = AngularEditor.toSlateNode(editor, textNode);
-        return AngularEditor.isNodeInEditor(editor, node);
+        const node = AngularEditor.toSlateNode(editor, textNode, { suppressThrow });
+        if (node && AngularEditor.isNodeInEditor(editor, node)) {
+            return true;
+        }
+        else {
+            return false;
+        }
     },
     /**
      * Find a Slate point from a DOM selection's `domNode` and `domOffset`.
      */
-    toSlatePoint(editor, domPoint) {
+    toSlatePoint(editor, domPoint, options) {
+        const { exactMatch, suppressThrow } = options;
         const [domNode] = domPoint;
         const [nearestNode, nearestOffset] = normalizeDOMPoint(domPoint);
         let parentNode = nearestNode.parentNode;
@@ -726,7 +737,7 @@ const AngularEditor = {
             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 && AngularEditor.isLeafInEditor(editor, leafNode)) {
+            if (leafNode && AngularEditor.isLeafInEditor(editor, leafNode, { suppressThrow: true })) {
                 textNode = leafNode.closest('[data-slate-node="text"]');
                 const window = AngularEditor.getWindow(editor);
                 const range = window.document.createRange();
@@ -751,9 +762,10 @@ const AngularEditor = {
             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"]');
+                const spacer = voidNode.querySelector('[data-slate-spacer="true"]');
+                leafNode = spacer.firstElementChild;
+                parentNode = leafNode.firstElementChild;
+                textNode = spacer;
                 domNode = leafNode;
                 offset = domNode.textContent.length;
             }
@@ -767,19 +779,26 @@ const AngularEditor = {
             }
         }
         if (!textNode) {
+            if (suppressThrow) {
+                return null;
+            }
             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 slateNode = AngularEditor.toSlateNode(editor, textNode, { suppressThrow });
+        if (!slateNode && suppressThrow) {
+            return null;
+        }
         const path = AngularEditor.findPath(editor, slateNode);
         return { path, offset };
     },
     /**
      * Find a Slate range from a DOM range or selection.
      */
-    toSlateRange(editor, domRange) {
+    toSlateRange(editor, domRange, options) {
+        const { exactMatch, suppressThrow } = options || {};
         const el = isDOMSelection(domRange) ? domRange.anchorNode : domRange.startContainer;
         let anchorNode;
         let anchorOffset;
@@ -814,9 +833,35 @@ const AngularEditor = {
         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 };
+        // COMPAT: Triple-clicking a word in chrome will sometimes place the focus
+        // inside a `contenteditable="false"` DOM node following the word, which
+        // will cause `toSlatePoint` to throw an error. (2023/03/07)
+        if ('getAttribute' in focusNode &&
+            focusNode.getAttribute('contenteditable') === 'false' &&
+            focusNode.getAttribute('data-slate-void') !== 'true') {
+            focusNode = anchorNode;
+            focusOffset = anchorNode.textContent?.length || 0;
+        }
+        const anchor = AngularEditor.toSlatePoint(editor, [anchorNode, anchorOffset], { suppressThrow, exactMatch });
+        if (!anchor) {
+            return null;
+        }
+        const focus = isCollapsed ? anchor : AngularEditor.toSlatePoint(editor, [focusNode, focusOffset], { suppressThrow, exactMatch });
+        if (!focus) {
+            return null;
+        }
+        let range = { anchor: anchor, focus: focus };
+        // if the selection is a hanging range that ends in a void
+        // and the DOM focus is an Element
+        // (meaning that the selection ends before the element)
+        // unhang the range to avoid mistakenly including the void
+        if (Range.isExpanded(range) &&
+            Range.isForward(range) &&
+            isDOMElement(focusNode) &&
+            Editor.void(editor, { at: range.focus, mode: 'highest' })) {
+            range = Editor.unhangRange(editor, range, { voids: true });
+        }
+        return range;
     },
     isLeafBlock(editor, node) {
         return Element.isElement(node) && !editor.isInline(node) && Editor.hasInlines(editor, node);
@@ -835,7 +880,7 @@ const AngularEditor = {
     },
     toSlateCardEntry(editor, node) {
         const element = node.parentElement.closest('.slate-block-card')?.querySelector('[card-target="card-center"]').firstElementChild;
-        const slateNode = AngularEditor.toSlateNode(editor, element);
+        const slateNode = AngularEditor.toSlateNode(editor, element, { suppressThrow: false });
         const path = AngularEditor.findPath(editor, slateNode);
         return [slateNode, path];
     },
@@ -1008,6 +1053,24 @@ function normalize(document) {
     return document.filter(value => Element.isElement(value) && isValid(value));
 }
 
+const createThrottleRAF = () => {
+    let timerId = null;
+    const throttleRAF = (fn) => {
+        const scheduleFunc = () => {
+            timerId = requestAnimationFrame(() => {
+                timerId = null;
+                fn();
+            });
+        };
+        if (timerId !== null) {
+            cancelAnimationFrame(timerId);
+            timerId = null;
+        }
+        scheduleFunc();
+    };
+    return throttleRAF;
+};
+
 /**
  * Utilities for single-line deletion
  */
@@ -1061,7 +1124,7 @@ const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
         }
         if (editor.selection && Range.isCollapsed(editor.selection)) {
             const parentBlockEntry = Editor.above(editor, {
-                match: n => Editor.isBlock(editor, n),
+                match: n => Element.isElement(n) && Editor.isBlock(editor, n),
                 at: editor.selection
             });
             if (parentBlockEntry) {
@@ -1211,7 +1274,7 @@ const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
             }
             else {
                 const node = Node.parent(editor, selection.anchor.path);
-                if (Editor.isVoid(editor, node)) {
+                if (Element.isElement(node) && Editor.isVoid(editor, node)) {
                     Transforms.delete(editor);
                 }
             }
@@ -1254,6 +1317,7 @@ const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
     e.onKeydown = () => { };
     e.onClick = () => { };
     e.isBlockCard = element => false;
+    e.isExpanded = element => true;
     e.onError = (errorData) => {
         if (errorData.nativeError) {
             console.error(errorData.nativeError);
@@ -1614,10 +1678,10 @@ var SlateErrorCode;
 })(SlateErrorCode || (SlateErrorCode = {}));
 
 class SlateStringTemplate {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateStringTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SlateStringTemplate, isStandalone: true, selector: "slate-string-template", viewQueries: [{ propertyName: "compatibleStringTemplate", first: true, predicate: ["compatibleStringTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "voidStringTemplate", first: true, predicate: ["voidStringTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "emptyTextTemplate", first: true, predicate: ["emptyTextTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #compatibleStringTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n  <!-- Compatible with Chinese input in Chrome with \\n -->\n  <span editable-text data-slate-string=\"true\"\n    >{{ context.text }}<span data-slate-zero-width>{{ '\\uFEFF' }}</span></span\n  >\n</ng-template>\n<ng-template #voidStringTemplate 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", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateStringTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SlateStringTemplate, isStandalone: true, selector: "slate-string-template", viewQueries: [{ propertyName: "compatibleStringTemplate", first: true, predicate: ["compatibleStringTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "voidStringTemplate", first: true, predicate: ["voidStringTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "emptyTextTemplate", first: true, predicate: ["emptyTextTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #compatibleStringTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n  <!-- Compatible with Chinese input in Chrome with \\n -->\n  <span editable-text data-slate-string=\"true\"\n    >{{ context.text }}<span data-slate-zero-width>{{ '\\uFEFF' }}</span></span\n  >\n</ng-template>\n<ng-template #voidStringTemplate 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", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateStringTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateStringTemplate, decorators: [{
             type: Component,
             args: [{ selector: 'slate-string-template', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<ng-template #compatibleStringTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n  <!-- Compatible with Chinese input in Chrome with \\n -->\n  <span editable-text data-slate-string=\"true\"\n    >{{ context.text }}<span data-slate-zero-width>{{ '\\uFEFF' }}</span></span\n  >\n</ng-template>\n<ng-template #voidStringTemplate 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" }]
         }], propDecorators: { compatibleStringTemplate: [{
@@ -1663,6 +1727,64 @@ function restoreDom(editor, execute) {
     }, 0);
 }
 
+/**
+ * @deprecated
+ * the special 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;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ViewContainer, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: ViewContainer, inputs: { viewContext: "viewContext" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ViewContainer, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.IterableDiffers }], propDecorators: { viewContext: [{
+                type: Input
+            }] } });
+
+class SlateChildren extends ViewContainer {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateChildren, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SlateChildren, isStandalone: true, selector: "slate-children", inputs: { children: "children", context: "context", viewContext: "viewContext" }, usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateChildren, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'slate-children',
+                    template: ``,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
+                }]
+        }], propDecorators: { children: [{
+                type: Input
+            }], context: [{
+                type: Input
+            }], viewContext: [{
+                type: Input
+            }] } });
+
+const SLATE_DEFAULT_ELEMENT_COMPONENT_TOKEN = new InjectionToken('slate-default-element-token');
+
+const SLATE_DEFAULT_TEXT_COMPONENT_TOKEN = new InjectionToken('slate-default-text-token');
+const SLATE_DEFAULT_VOID_TEXT_COMPONENT_TOKEN = new InjectionToken('slate-default-void-text-token');
+
+function hasBeforeContextChange(value) {
+    if (value.beforeContextChange) {
+        return true;
+    }
+    return false;
+}
+function hasAfterContextChange(value) {
+    if (value.afterContextChange) {
+        return true;
+    }
+    return false;
+}
+
 class SlateBlockCard {
     get nativeElement() {
         return this.elementRef.nativeElement;
@@ -1674,7 +1796,6 @@ class SlateBlockCard {
         this.elementRef = elementRef;
     }
     ngOnInit() {
-        this.append();
         this.nativeElement.classList.add(`slate-block-card`);
     }
     append() {
@@ -1682,163 +1803,580 @@ class SlateBlockCard {
     }
     initializeCenter(rootNodes) {
         this.centerRootNodes = rootNodes;
+        this.append();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateBlockCard, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SlateBlockCard, isStandalone: true, 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>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateBlockCard, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SlateBlockCard, isStandalone: true, 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>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateBlockCard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateBlockCard, decorators: [{
             type: Component,
             args: [{ selector: 'slate-block-card, [slateBlockCard]', standalone: true, 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>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { centerContianer: [{
+        }], ctorParameters: () => [{ 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 {
-    get rootNodes() {
-        return this.getRootNodes();
+function createEmbeddedViewOrComponent(viewType, context, viewContext, viewContainerRef) {
+    if (isTemplateRef(viewType)) {
+        const embeddedViewContext = {
+            context,
+            viewContext
+        };
+        const embeddedViewRef = viewContainerRef.createEmbeddedView(viewType, embeddedViewContext);
+        embeddedViewRef.detectChanges();
+        return embeddedViewRef;
     }
-    getRootNodes() {
-        if (this.embeddedViewRef) {
-            return this.embeddedViewRef.rootNodes.filter(rootNode => isDOMElement(rootNode));
+    if (isComponentType(viewType)) {
+        const componentRef = viewContainerRef.createComponent(viewType, {
+            injector: viewContainerRef.injector
+        });
+        componentRef.instance.viewContext = viewContext;
+        componentRef.instance.context = context;
+        componentRef.changeDetectorRef.detectChanges();
+        return componentRef;
+    }
+}
+function executeAfterViewInit(view) {
+    if (view instanceof ComponentRef && view.instance.afterViewInit) {
+        view.instance.afterViewInit();
+    }
+}
+function updateContext(view, newContext, viewContext) {
+    if (view instanceof ComponentRef) {
+        view.instance.context = newContext;
+    }
+    else {
+        const embeddedViewContext = {
+            context: newContext,
+            viewContext
+        };
+        view.context = embeddedViewContext;
+        view.detectChanges();
+    }
+}
+function mount(views, blockCards, outletParent, outletElement) {
+    if (views.length > 0) {
+        const fragment = document.createDocumentFragment();
+        views.forEach((view, index) => {
+            const blockCard = blockCards ? blockCards[index] : undefined;
+            fragment.append(...getRootNodes(view, blockCard));
+        });
+        if (outletElement) {
+            outletElement.parentElement.insertBefore(fragment, outletElement);
+            outletElement.remove();
         }
-        if (this.componentRef) {
-            return [this.componentRef.instance.nativeElement];
+        else {
+            outletParent.prepend(fragment);
         }
-        return [];
     }
-    constructor(viewContainerRef) {
-        this.viewContainerRef = viewContainerRef;
-        this.initialized = false;
+}
+function getRootNodes(ref, blockCard) {
+    if (blockCard) {
+        return [blockCard.instance.nativeElement];
+    }
+    if (ref instanceof ComponentRef) {
+        ref.hostView.rootNodes.forEach(ele => {
+            if (!(ele instanceof HTMLElement)) {
+                ele.remove();
+            }
+        });
+        return [ref.instance.nativeElement];
     }
-    destroyView() {
-        if (this.embeddedViewRef) {
-            this.embeddedViewRef.destroy();
-            this.embeddedViewRef = null;
+    else {
+        const result = [];
+        ref.rootNodes.forEach(rootNode => {
+            const isHTMLElement = rootNode instanceof HTMLElement;
+            const isSlateNodeOfLeaf = isHTMLElement && (rootNode.hasAttribute('data-slate-node') || rootNode.hasAttribute('data-slate-leaf'));
+            if (isSlateNodeOfLeaf && result.every(item => !item.contains(rootNode))) {
+                result.push(rootNode);
+            }
+            if (!isHTMLElement) {
+                rootNode.remove();
+            }
+        });
+        return result;
+    }
+}
+function mountOnItemChange(index, item, views, blockCards, outletParent, firstRootNode, viewContext) {
+    const view = views[index];
+    let rootNodes = getRootNodes(view);
+    if (blockCards) {
+        const isBlockCard = viewContext.editor.isBlockCard(item);
+        if (isBlockCard) {
+            const blockCard = blockCards[index];
+            rootNodes = [blockCard.instance.nativeElement];
+        }
+    }
+    if (index === 0) {
+        if (firstRootNode) {
+            rootNodes.forEach(rootNode => {
+                firstRootNode.insertAdjacentElement('beforebegin', rootNode);
+            });
         }
-        if (this.componentRef) {
-            this.componentRef.destroy();
-            this.componentRef = null;
+        else {
+            outletParent.prepend(...rootNodes);
         }
     }
-    createView() {
+    else {
+        const previousView = views[index - 1];
+        const blockCard = blockCards ? blockCards[index - 1] : null;
+        const previousRootNodes = getRootNodes(previousView, blockCard);
+        let previousRootNode = previousRootNodes[previousRootNodes.length - 1];
+        rootNodes.forEach(rootNode => {
+            previousRootNode.insertAdjacentElement('afterend', rootNode);
+            previousRootNode = rootNode;
+        });
+    }
+}
+
+class ListRender {
+    constructor(viewContext, viewContainerRef, getOutletParent, getOutletElement) {
+        this.viewContext = viewContext;
+        this.viewContainerRef = viewContainerRef;
+        this.getOutletParent = getOutletParent;
+        this.getOutletElement = getOutletElement;
+        this.views = [];
+        this.addedViews = [];
+        this.blockCards = [];
+        this.contexts = [];
+        this.viewTypes = [];
+        this.differ = null;
+        this.initialized = false;
+    }
+    initialize(children, parent, childrenContext) {
         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.viewContext = this.viewContext;
-            componentRef.instance.context = context;
-            this.componentRef = componentRef;
+        this.children = children;
+        const parentPath = AngularEditor.findPath(this.viewContext.editor, parent);
+        children.forEach((descendant, index) => {
+            NODE_TO_INDEX.set(descendant, index);
+            NODE_TO_PARENT.set(descendant, parent);
+            const context = getContext$1(index, descendant, parentPath, childrenContext, this.viewContext);
+            const viewType = getViewType$1(descendant, parent, this.viewContext);
+            const view = createEmbeddedViewOrComponent(viewType, context, this.viewContext, this.viewContainerRef);
+            const blockCard = createBlockCard(descendant, view, this.viewContainerRef, this.viewContext);
+            this.views.push(view);
+            this.addedViews.push(view);
+            this.contexts.push(context);
+            this.viewTypes.push(viewType);
+            this.blockCards.push(blockCard);
+        });
+        mount(this.views, this.blockCards, this.getOutletParent(), this.getOutletElement());
+        const newDiffers = this.viewContainerRef.injector.get(IterableDiffers);
+        this.differ = newDiffers.find(children).create(trackBy$1(this.viewContext));
+        this.differ.diff(children);
+        if (parent === this.viewContext.editor) {
+            this.afterViewInit();
         }
     }
-    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;
+    update(children, parent, childrenContext) {
+        if (!this.initialized || this.children.length === 0) {
+            this.initialize(children, parent, childrenContext);
+            return;
+        }
+        if (!this.differ) {
+            throw new Error('Exception: Can not find differ ');
+        }
+        const outletParent = this.getOutletParent();
+        const diffResult = this.differ.diff(children);
+        const parentPath = AngularEditor.findPath(this.viewContext.editor, parent);
+        if (diffResult) {
+            let firstRootNode = getRootNodes(this.views[0], this.blockCards[0])[0];
+            const newContexts = [];
+            const newViewTypes = [];
+            const newViews = [];
+            const newBlockCards = [];
+            diffResult.forEachItem(record => {
+                NODE_TO_INDEX.set(record.item, record.currentIndex);
+                NODE_TO_PARENT.set(record.item, parent);
+                let context = getContext$1(record.currentIndex, record.item, parentPath, childrenContext, this.viewContext);
+                const viewType = getViewType$1(record.item, parent, this.viewContext);
+                newViewTypes.push(viewType);
+                let view;
+                let blockCard;
+                if (record.previousIndex === null) {
+                    view = createEmbeddedViewOrComponent(viewType, context, this.viewContext, this.viewContainerRef);
+                    blockCard = createBlockCard(record.item, view, this.viewContainerRef, this.viewContext);
+                    newContexts.push(context);
+                    newViews.push(view);
+                    this.addedViews.push(view);
+                    newBlockCards.push(blockCard);
+                    mountOnItemChange(record.currentIndex, record.item, newViews, newBlockCards, outletParent, firstRootNode, this.viewContext);
                 }
-                this.componentRef.instance.context = context;
-            }
-            if (this.embeddedViewRef) {
-                if (this.memoizedContext(this.embeddedViewContext.context, context)) {
-                    return;
+                else {
+                    const previousView = this.views[record.previousIndex];
+                    const previousViewType = this.viewTypes[record.previousIndex];
+                    const previousContext = this.contexts[record.previousIndex];
+                    const previousBlockCard = this.blockCards[record.previousIndex];
+                    if (previousViewType !== viewType) {
+                        view = createEmbeddedViewOrComponent(viewType, context, this.viewContext, this.viewContainerRef);
+                        this.addedViews.push(view);
+                        blockCard = createBlockCard(record.item, view, this.viewContainerRef, this.viewContext);
+                        const firstRootNode = getRootNodes(previousView, previousBlockCard)[0];
+                        const newRootNodes = getRootNodes(view, blockCard);
+                        firstRootNode.replaceWith(...newRootNodes);
+                        previousView.destroy();
+                        previousBlockCard?.destroy();
+                    }
+                    else {
+                        view = previousView;
+                        blockCard = previousBlockCard;
+                        if (memoizedContext(this.viewContext, record.item, previousContext, context)) {
+                            context = previousContext;
+                        }
+                        else {
+                            updateContext(previousView, context, this.viewContext);
+                        }
+                    }
+                    newContexts.push(context);
+                    newViews.push(view);
+                    newBlockCards.push(blockCard);
                 }
-                this.embeddedViewContext.context = context;
+            });
+            diffResult.forEachOperation(record => {
+                // removed
+                if (record.currentIndex === null) {
+                    const view = this.views[record.previousIndex];
+                    const blockCard = this.blockCards[record.previousIndex];
+                    view.destroy();
+                    blockCard?.destroy();
+                }
+                // moved
+                if (record.previousIndex !== null && record.currentIndex !== null) {
+                    mountOnItemChange(record.currentIndex, record.item, newViews, newBlockCards, outletParent, firstRootNode, this.viewContext);
+                    // Solve the block-card DOMElement loss when moving nodes
+                    newBlockCards[record.currentIndex]?.instance.append();
+                }
+            });
+            this.viewTypes = newViewTypes;
+            this.views = newViews;
+            this.contexts = newContexts;
+            this.children = children;
+            this.blockCards = newBlockCards;
+            if (parent === this.viewContext.editor) {
+                this.afterViewInit();
             }
         }
         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;
+            const newContexts = [];
+            this.children.forEach((child, index) => {
+                NODE_TO_INDEX.set(child, index);
+                NODE_TO_PARENT.set(child, parent);
+                let context = getContext$1(index, child, parentPath, childrenContext, this.viewContext);
+                const previousContext = this.contexts[index];
+                if (memoizedContext(this.viewContext, child, previousContext, context)) {
+                    context = previousContext;
+                }
+                else {
+                    updateContext(this.views[index], context, this.viewContext);
+                }
+                newContexts.push(context);
+            });
+            this.contexts = newContexts;
+        }
+    }
+    afterViewInit() {
+        this.addedViews.forEach(view => {
+            executeAfterViewInit(view);
+        });
+        this.addedViews = [];
+    }
+    destroy() {
+        this.children.forEach((element, index) => {
+            if (this.views[index]) {
+                this.views[index].destroy();
             }
-            if (isComponentType(this.viewType)) {
-                const componentRef = this.viewContainerRef.createComponent(this.viewType);
-                componentRef.instance.viewContext = this.viewContext;
-                componentRef.instance.context = context;
-                firstRootNode.replaceWith(componentRef.instance.nativeElement);
-                this.destroyView();
-                this.componentRef = componentRef;
+            if (this.blockCards[index]) {
+                this.blockCards[index].destroy();
             }
-        }
+        });
+        this.views = [];
+        this.blockCards = [];
+        this.contexts = [];
+        this.viewTypes = [];
+        this.initialized = false;
+        this.differ = null;
     }
-    appendBlockCardElement() {
-        if (this.blockCardComponentRef) {
-            this.blockCardComponentRef.instance.append();
+}
+function getContext$1(index, item, parentPath, childrenContext, viewContext) {
+    if (Element.isElement(item)) {
+        const computedContext = getCommonContext(index, item, parentPath, viewContext, childrenContext);
+        const key = AngularEditor.findKey(viewContext.editor, item);
+        const isInline = viewContext.editor.isInline(item);
+        const isVoid = viewContext.editor.isVoid(item);
+        const elementContext = {
+            element: item,
+            ...computedContext,
+            attributes: {
+                'data-slate-node': 'element',
+                'data-slate-key': key.id
+            },
+            decorate: childrenContext.decorate,
+            readonly: childrenContext.readonly
+        };
+        if (isInline) {
+            elementContext.attributes['data-slate-inline'] = true;
+        }
+        if (isVoid) {
+            elementContext.attributes['data-slate-void'] = true;
+            elementContext.contentEditable = false;
         }
+        return elementContext;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ViewContainerItem, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: ViewContainerItem, inputs: { viewContext: "viewContext" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", 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;
+    else {
+        const computedContext = getCommonContext(index, item, parentPath, viewContext, childrenContext);
+        const isLeafBlock = AngularEditor.isLeafBlock(viewContext.editor, childrenContext.parent);
+        const textContext = {
+            decorations: computedContext.decorations,
+            isLast: isLeafBlock && index === childrenContext.parent.children.length - 1,
+            parent: childrenContext.parent,
+            text: item
+        };
+        return textContext;
     }
-    return false;
 }
-
-/**
- * base class for custom element component or text component
- */
-class BaseComponent {
-    set context(value) {
-        if (hasBeforeContextChange(this)) {
-            this.beforeContextChange(value);
+function getCommonContext(index, item, parentPath, viewContext, childrenContext) {
+    const p = parentPath.concat(index);
+    try {
+        const ds = childrenContext.decorate([item, p]);
+        // [list-render] performance optimization: reduce the number of calls to the `Editor.range(viewContext.editor, p)` method
+        if (childrenContext.selection || childrenContext.decorations.length > 0) {
+            const range = Editor.range(viewContext.editor, p);
+            const sel = childrenContext.selection && Range.intersection(range, childrenContext.selection);
+            for (const dec of childrenContext.decorations) {
+                const d = Range.intersection(dec, range);
+                if (d) {
+                    ds.push(d);
+                }
+            }
+            return { selection: sel, decorations: ds };
+        }
+        else {
+            return { selection: null, decorations: ds };
         }
-        this._context = value;
-        this.onContextChange();
     }
-    get context() {
-        return this._context;
+    catch (error) {
+        viewContext.editor.onError({
+            code: SlateErrorCode.GetStartPointError,
+            nativeError: error
+        });
+        return { selection: null, decorations: [] };
     }
-    get editor() {
-        return this.viewContext && this.viewContext.editor;
+}
+function getViewType$1(item, parent, viewContext) {
+    if (Element.isElement(item)) {
+        return (viewContext.renderElement && viewContext.renderElement(item)) || viewContext.defaultElement;
     }
-    get nativeElement() {
-        return this.elementRef.nativeElement;
+    else {
+        const isVoid = viewContext.editor.isVoid(parent);
+        return isVoid ? viewContext.defaultVoidText : (viewContext.renderText && viewContext.renderText(item)) || viewContext.defaultText;
     }
-    constructor(elementRef, cdr) {
-        this.elementRef = elementRef;
-        this.cdr = cdr;
+}
+function createBlockCard(item, view, viewContainerRef, viewContext) {
+    const isBlockCard = viewContext.editor.isBlockCard(item);
+    if (isBlockCard) {
+        const rootNodes = getRootNodes(view);
+        const blockCardComponentRef = viewContainerRef.createComponent(SlateBlockCard, {
+            injector: viewContainerRef.injector
+        });
+        blockCardComponentRef.instance.initializeCenter(rootNodes);
+        blockCardComponentRef.changeDetectorRef.detectChanges();
+        return blockCardComponentRef;
+    }
+    else {
+        return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: BaseComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: BaseComponent, inputs: { context: "context", viewContext: "viewContext" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: BaseComponent, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { context: [{
-                type: Input
-            }], viewContext: [{
-                type: Input
+function trackBy$1(viewContext) {
+    return (index, node) => {
+        return viewContext.trackBy(node) || AngularEditor.findKey(viewContext.editor, node);
+    };
+}
+function memoizedContext(viewContext, descendant, prev, next) {
+    if (Element.isElement(descendant)) {
+        return memoizedElementContext(viewContext, prev, next);
+    }
+    else {
+        return memoizedTextContext(prev, next);
+    }
+}
+function memoizedElementContext(viewContext, prev, next) {
+    return (prev.element === next.element &&
+        (!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))));
+}
+function memoizedTextContext(prev, next) {
+    return (next.parent === prev.parent &&
+        next.isLast === prev.isLast &&
+        next.text === prev.text &&
+        isDecoratorRangeListEqual(next.decorations, prev.decorations));
+}
+
+class LeavesRender {
+    constructor(viewContext, viewContainerRef, getOutletParent, getOutletElement) {
+        this.viewContext = viewContext;
+        this.viewContainerRef = viewContainerRef;
+        this.getOutletParent = getOutletParent;
+        this.getOutletElement = getOutletElement;
+        this.views = [];
+        this.contexts = [];
+        this.viewTypes = [];
+    }
+    initialize(context) {
+        const { leaves, contexts } = this.getLeaves(context);
+        this.leaves = leaves;
+        this.contexts = contexts;
+        this.leaves.forEach((leaf, index) => {
+            const context = getContext(index, this.contexts);
+            const viewType = getViewType(context, this.viewContext);
+            const view = createEmbeddedViewOrComponent(viewType, context, this.viewContext, this.viewContainerRef);
+            this.views.push(view);
+            this.contexts.push(context);
+            this.viewTypes.push(viewType);
+        });
+        mount(this.views, null, this.getOutletParent(), this.getOutletElement());
+        const newDiffers = this.viewContainerRef.injector.get(IterableDiffers);
+        this.differ = newDiffers.find(this.leaves).create(trackBy(this.viewContext));
+        this.differ.diff(this.leaves);
+    }
+    update(context) {
+        const { leaves, contexts } = this.getLeaves(context);
+        const outletParent = this.getOutletParent();
+        const diffResult = this.differ.diff(leaves);
+        if (diffResult) {
+            let firstRootNode = getRootNodes(this.views[0])[0];
+            const newContexts = [];
+            const newViewTypes = [];
+            const newViews = [];
+            diffResult.forEachItem(record => {
+                let context = getContext(record.currentIndex, contexts);
+                const viewType = getViewType(context, this.viewContext);
+                newViewTypes.push(viewType);
+                let view;
+                if (record.previousIndex === null) {
+                    view = createEmbeddedViewOrComponent(viewType, context, this.viewContext, this.viewContainerRef);
+                    newContexts.push(context);
+                    newViews.push(view);
+                    mountOnItemChange(record.currentIndex, record.item, newViews, null, outletParent, firstRootNode, this.viewContext);
+                }
+                else {
+                    const previousView = this.views[record.previousIndex];
+                    const previousViewType = this.viewTypes[record.previousIndex];
+                    if (previousViewType !== viewType) {
+                        view = createEmbeddedViewOrComponent(viewType, context, this.viewContext, this.viewContainerRef);
+                        const firstRootNode = getRootNodes(previousView, null)[0];
+                        const newRootNodes = getRootNodes(view, null);
+                        firstRootNode.replaceWith(...newRootNodes);
+                        previousView.destroy();
+                    }
+                    else {
+                        view = previousView;
+                        updateContext(previousView, context, this.viewContext);
+                    }
+                    newContexts.push(context);
+                    newViews.push(view);
+                }
+            });
+            diffResult.forEachRemovedItem(record => {
+                const view = this.views[record.previousIndex];
+                view.destroy();
+            });
+            diffResult.forEachMovedItem(record => {
+                mountOnItemChange(record.currentIndex, record.item, newViews, null, outletParent, firstRootNode, this.viewContext);
+            });
+            this.viewTypes = newViewTypes;
+            this.views = newViews;
+            this.contexts = newContexts;
+            this.leaves = leaves;
+        }
+    }
+    getLeaves(context) {
+        const leaves = Text$1.decorations(context.text, context.decorations);
+        const contexts = leaves.map((leaf, index) => {
+            return {
+                leaf,
+                text: context.text,
+                parent: context.parent,
+                index,
+                isLast: context.isLast && index === leaves.length - 1
+            };
+        });
+        return { leaves, contexts };
+    }
+}
+function getContext(index, leafContexts) {
+    return leafContexts[index];
+}
+function getViewType(leafContext, viewContext) {
+    return (viewContext.renderLeaf && viewContext.renderLeaf(leafContext.leaf)) || viewContext.defaultLeaf;
+}
+function trackBy(viewContext) {
+    return (index, node) => {
+        return index;
+    };
+}
+
+class SlateChildrenOutlet {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    getNativeElement() {
+        return this.elementRef.nativeElement;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateChildrenOutlet, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SlateChildrenOutlet, isStandalone: true, selector: "slate-children-outlet", ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateChildrenOutlet, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'slate-children-outlet',
+                    template: ``,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
+/**
+ * base class for custom element component or text component
+ */
+class BaseComponent {
+    set context(value) {
+        if (hasBeforeContextChange(this)) {
+            this.beforeContextChange(value);
+        }
+        this._context = value;
+        this.onContextChange();
+        if (this.initialized) {
+            this.cdr.detectChanges();
+        }
+        if (hasAfterContextChange(this)) {
+            this.afterContextChange();
+        }
+    }
+    get context() {
+        return this._context;
+    }
+    get editor() {
+        return this.viewContext && this.viewContext.editor;
+    }
+    get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+    constructor(elementRef, cdr) {
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.initialized = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: BaseComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: BaseComponent, inputs: { context: "context", viewContext: "viewContext" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: BaseComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { context: [{
+                type: Input
+            }], viewContext: [{
+                type: Input
             }] } });
 /**
  * base class for custom leaf component
@@ -1846,7 +2384,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
 class BaseLeafComponent extends BaseComponent {
     constructor() {
         super(...arguments);
-        this.initialized = false;
         this.isSlateLeaf = true;
     }
     get text() {
@@ -1862,7 +2399,6 @@ class BaseLeafComponent extends BaseComponent {
         if (!this.initialized) {
             return;
         }
-        this.cdr.markForCheck();
     }
     renderPlaceholder() {
         // issue-1: IME input was interrupted
@@ -1899,10 +2435,10 @@ class BaseLeafComponent extends BaseComponent {
             this.nativeElement.classList.remove('leaf-with-placeholder');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: BaseLeafComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: BaseLeafComponent, host: { properties: { "attr.data-slate-leaf": "this.isSlateLeaf" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: BaseLeafComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: BaseLeafComponent, host: { properties: { "attr.data-slate-leaf": "this.isSlateLeaf" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: BaseLeafComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: BaseLeafComponent, decorators: [{
             type: Directive
         }], propDecorators: { isSlateLeaf: [{
                 type: HostBinding,
@@ -1914,7 +2450,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
 class BaseElementComponent extends BaseComponent {
     constructor() {
         super(...arguments);
-        this.initialized = false;
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.getOutletParent = () => {
+            return this.elementRef.nativeElement;
+        };
+        this.getOutletElement = () => {
+            if (this.childrenOutletInstance) {
+                return this.childrenOutletInstance.getNativeElement();
+            }
+            return null;
+        };
     }
     get element() {
         return this._context && this._context.element;
@@ -1938,11 +2483,20 @@ class BaseElementComponent extends BaseComponent {
         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;
+        this.listRender = new ListRender(this.viewContext, this.viewContainerRef, this.getOutletParent, this.getOutletElement);
+        if (this.editor.isExpanded(this.element)) {
+            this.listRender.initialize(this.children, this.element, this.childrenContext);
+        }
+    }
+    afterViewInit() {
+        if (this._context.contentEditable !== undefined) {
+            this.nativeElement.setAttribute('contenteditable', this._context.contentEditable + '');
+        }
+        this.listRender.afterViewInit();
     }
     updateWeakMap() {
         NODE_TO_ELEMENT.set(this.element, this.nativeElement);
@@ -1953,17 +2507,28 @@ class BaseElementComponent extends BaseComponent {
         if (NODE_TO_ELEMENT.get(this.element) === this.nativeElement) {
             NODE_TO_ELEMENT.delete(this.element);
         }
+        ELEMENT_TO_NODE.delete(this.nativeElement);
         if (ELEMENT_TO_COMPONENT.get(this.element) === this) {
             ELEMENT_TO_COMPONENT.delete(this.element);
         }
     }
     onContextChange() {
         this.childrenContext = this.getChildrenContext();
+        this.updateWeakMap();
         if (!this.initialized) {
             return;
         }
-        this.cdr.markForCheck();
-        this.updateWeakMap();
+        this.updateChildrenView();
+    }
+    updateChildrenView() {
+        if (this.editor.isExpanded(this.element)) {
+            this.listRender.update(this.children, this.element, this.childrenContext);
+        }
+        else {
+            if (this.listRender.initialized) {
+                this.listRender.destroy();
+            }
+        }
     }
     getChildrenContext() {
         return {
@@ -1974,26 +2539,39 @@ class BaseElementComponent extends BaseComponent {
             readonly: this._context.readonly
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: BaseElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: BaseElementComponent, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: BaseElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: BaseElementComponent, viewQueries: [{ propertyName: "childrenOutletInstance", first: true, predicate: SlateChildrenOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: BaseElementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: BaseElementComponent, decorators: [{
             type: Directive
-        }] });
+        }], propDecorators: { childrenOutletInstance: [{
+                type: ViewChild,
+                args: [SlateChildrenOutlet, { static: true }]
+            }] } });
 /**
  * base class for custom text component
  */
 class BaseTextComponent extends BaseComponent {
     constructor() {
         super(...arguments);
-        this.initialized = false;
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.getOutletParent = () => {
+            return this.elementRef.nativeElement;
+        };
+        this.getOutletElement = () => {
+            if (this.childrenOutletInstance) {
+                return this.childrenOutletInstance.getNativeElement();
+            }
+            return null;
+        };
     }
     get text() {
         return this._context && this._context.text;
     }
     ngOnInit() {
-        this.updateWeakMap();
         this.initialized = true;
+        this.leavesRender = new LeavesRender(this.viewContext, this.viewContainerRef, this.getOutletParent, this.getOutletElement);
+        this.leavesRender.initialize(this.context);
     }
     updateWeakMap() {
         ELEMENT_TO_NODE.set(this.nativeElement, this.text);
@@ -2003,117 +2581,209 @@ class BaseTextComponent extends BaseComponent {
         if (NODE_TO_ELEMENT.get(this.text) === this.nativeElement) {
             NODE_TO_ELEMENT.delete(this.text);
         }
+        ELEMENT_TO_NODE.delete(this.nativeElement);
     }
     onContextChange() {
+        this.updateWeakMap();
         if (!this.initialized) {
             return;
         }
-        this.cdr.markForCheck();
-        this.updateWeakMap();
+        this.leavesRender.update(this.context);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: BaseTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: BaseTextComponent, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: BaseTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: BaseTextComponent, viewQueries: [{ propertyName: "childrenOutletInstance", first: true, predicate: SlateChildrenOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: BaseTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: BaseTextComponent, decorators: [{
             type: Directive
+        }], propDecorators: { childrenOutletInstance: [{
+                type: ViewChild,
+                args: [SlateChildrenOutlet, { static: true }]
+            }] } });
+
+class SlateLeaves extends ViewContainer {
+    constructor() {
+        super(...arguments);
+        this.initialized = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateLeaves, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SlateLeaves, isStandalone: true, selector: "slate-leaves", inputs: { context: "context" }, usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateLeaves, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'slate-leaves',
+                    template: ``,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                    imports: [NgFor]
+                }]
+        }], propDecorators: { context: [{
+                type: Input
+            }] } });
+
+class SlateVoidText extends BaseTextComponent {
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    ngOnChanges() {
+        if (!this.initialized) {
+            return;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateVoidText, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SlateVoidText, isStandalone: true, selector: "span[slateVoidText]", host: { attributes: { "data-slate-spacer": "true", "data-slate-node": "text" }, classAttribute: "slate-spacer" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateVoidText, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'span[slateVoidText]',
+                    template: ``,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        'data-slate-spacer': 'true',
+                        class: 'slate-spacer',
+                        'data-slate-node': 'text'
+                    },
+                    standalone: true,
+                    imports: [SlateLeaves]
+                }]
+        }] });
+
+class SlateDefaultText extends BaseTextComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateDefaultText, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SlateDefaultText, isStandalone: true, selector: "span[slateDefaultText]", host: { attributes: { "data-slate-node": "text" } }, usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateDefaultText, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'span[slateDefaultText]',
+                    template: ``,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        'data-slate-node': 'text'
+                    },
+                    standalone: true,
+                    imports: [SlateLeaves]
+                }]
+        }] });
+
+class SlateDefaultElement extends BaseElementComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateDefaultElement, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SlateDefaultElement, isStandalone: true, selector: "div[slateDefaultElement]", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateDefaultElement, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[slateDefaultElement]',
+                    template: ``,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                    imports: [SlateChildren]
+                }]
         }] });
 
 /**
- * the special container for angular template
- * Add the rootNodes of each child component to the parentElement
- * Remove useless DOM elements, eg: comment...
+ * 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 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);
-                });
-            }
-        });
+class ViewContainerItem {
+    get rootNodes() {
+        return this.getRootNodes();
     }
-    getPreviousRootNode(currentIndex) {
-        if (currentIndex === 0) {
-            return null;
+    getRootNodes() {
+        if (this.embeddedViewRef) {
+            return this.embeddedViewRef.rootNodes.filter(rootNode => isDOMElement(rootNode));
         }
-        const previousComponent = this.childrenComponent.find((item, index) => index === currentIndex - 1);
-        let previousRootNode = previousComponent.rootNodes[previousComponent.rootNodes.length - 1];
-        if (previousRootNode) {
-            return previousRootNode;
+        if (this.componentRef) {
+            return [this.componentRef.instance.nativeElement];
         }
-        else {
-            return this.getPreviousRootNode(currentIndex - 1);
+        return [];
+    }
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+        this.initialized = false;
+    }
+    destroyView() {
+        if (this.embeddedViewRef) {
+            this.embeddedViewRef.destroy();
+            this.embeddedViewRef = null;
+        }
+        if (this.componentRef) {
+            this.componentRef.destroy();
+            this.componentRef = null;
         }
     }
-    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;
+    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;
         }
-        // insert at start location
-        if (record.currentIndex === 0) {
-            const fragment = document.createDocumentFragment();
-            fragment.append(...record.item.rootNodes);
-            parentElement.prepend(fragment);
+        if (isComponentType(this.viewType)) {
+            const componentRef = this.viewContainerRef.createComponent(this.viewType);
+            componentRef.instance.viewContext = this.viewContext;
+            componentRef.instance.context = context;
+            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 {
-            // 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;
-                });
+            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;
             }
-            else {
-                this.viewContext.editor.onError({
-                    code: SlateErrorCode.NotFoundPreviousRootNodeError,
-                    name: 'not found previous rootNode',
-                    nativeError: null
-                });
+            if (isComponentType(this.viewType)) {
+                const componentRef = this.viewContainerRef.createComponent(this.viewType);
+                componentRef.instance.viewContext = this.viewContext;
+                componentRef.instance.context = context;
+                firstRootNode.replaceWith(componentRef.instance.nativeElement);
+                this.destroyView();
+                this.componentRef = componentRef;
             }
         }
-        // Solve the block-card DOMElement loss when moving nodes
-        record.item.appendBlockCardElement();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ViewContainer, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: ViewContainer, inputs: { viewContext: "viewContext" }, ngImport: i0 }); }
+    appendBlockCardElement() {
+        if (this.blockCardComponentRef) {
+            this.blockCardComponentRef.instance.append();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ViewContainerItem, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: ViewContainerItem, inputs: { viewContext: "viewContext" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ViewContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ViewContainerItem, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.IterableDiffers }]; }, propDecorators: { viewContext: [{
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { viewContext: [{
                 type: Input
             }] } });
 
@@ -2149,535 +2819,183 @@ class SlateDefaultString extends BaseComponent {
             this.createLineBreakEmptyStringDOM();
         }
     }
-    createLineBreakEmptyStringDOM() {
-        this.nativeElement.setAttribute('data-slate-zero-width', 'n');
-        this.nativeElement.setAttribute('data-slate-length', `${this.context.elementStringLength}`);
-        this.textNode = document.createTextNode(`\uFEFF`);
-        this.brNode = document.createElement('br');
-        this.nativeElement.append(this.textNode, this.brNode);
-    }
-    removeLineBreakEmptyStringDOM() {
-        this.brNode?.remove();
-        // remove zero width character
-        const zeroWidthCharacterIndex = this.textNode?.textContent.indexOf(`\uFEFF`);
-        this.textNode?.deleteData(zeroWidthCharacterIndex, 1);
-        this.nativeElement.removeAttribute('data-slate-zero-width');
-        this.nativeElement.removeAttribute('data-slate-length');
-    }
-    createStringDOM() {
-        this.nativeElement.setAttribute('data-slate-string', 'true');
-        this.updateStringDOM();
-    }
-    updateStringDOM() {
-        // Avoid breaking some browser default behaviors, such as spellCheck, android composition input state
-        if (this.nativeElement.textContent !== this.context.text) {
-            this.nativeElement.textContent = this.context.text;
-        }
-    }
-    removeStringDOM() {
-        this.nativeElement.removeAttribute('data-slate-string');
-        this.nativeElement.textContent = '';
-    }
-    ngOnInit() {
-        this.nativeElement.setAttribute('editable-text', '');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateDefaultString, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SlateDefaultString, isStandalone: true, selector: "span[slateDefaultString]", usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateDefaultString, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'span[slateDefaultString]',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
-
-class SlateString 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();
-    }
-    // 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.
-    isLineBreakEmptyString() {
-        const path = AngularEditor.findPath(this.viewContext.editor, this.context.text);
-        const parentPath = Path.parent(path);
-        return (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) === '');
-    }
-    // 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.
-    isEmptyText() {
-        return this.context.leaf.text === '';
-    }
-    // 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.
-    isCompatibleString() {
-        return this.context.isLast && this.context.leaf.text.slice(-1) === '\n';
-    }
-    // COMPAT: Render text inside void nodes with a zero-width space.
-    // So the node can contain selection but the text is not visible.
-    isVoid() {
-        return this.viewContext.editor.isVoid(this.context.parent);
-    }
-    getViewType() {
-        if (this.isVoid()) {
-            return this.viewContext.templateComponent.voidStringTemplate;
-        }
-        if (this.isLineBreakEmptyString()) {
-            return SlateDefaultString;
-        }
-        if (this.isEmptyText()) {
-            return this.viewContext.templateComponent.emptyTextTemplate;
-        }
-        if (this.isCompatibleString()) {
-            return this.viewContext.templateComponent.compatibleStringTemplate;
-        }
-        return SlateDefaultString;
-    }
-    getType() {
-        if (this.isLineBreakEmptyString()) {
-            return 'lineBreakEmptyString';
-        }
-        return 'string';
-    }
-    getContext() {
-        const stringType = this.getType();
-        return {
-            text: this.context.leaf.text,
-            elementStringLength: Node.string(this.context.parent).length,
-            type: stringType
-        };
-    }
-    memoizedContext(prev, next) {
-        return false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateString, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SlateString, isStandalone: true, 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: "16.2.1", ngImport: i0, type: SlateString, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'span[slateString]',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { context: [{
-                type: Input
-            }] } });
-
-class SlateDefaultLeaf 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();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateDefaultLeaf, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SlateDefaultLeaf, isStandalone: true, selector: "span[slateDefaultLeaf]", host: { attributes: { "data-slate-leaf": "true" } }, usesInheritance: true, ngImport: i0, template: `<span slateString [context]="context" [viewContext]="viewContext"><span></span></span>`, isInline: true, dependencies: [{ kind: "component", type: SlateString, selector: "span[slateString]", inputs: ["context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateDefaultLeaf, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'span[slateDefaultLeaf]',
-                    template: `<span slateString [context]="context" [viewContext]="viewContext"><span></span></span>`,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        'data-slate-leaf': 'true'
-                    },
-                    standalone: true,
-                    imports: [SlateString]
-                }]
-        }] });
-
-class SlateLeaf extends ViewContainerItem {
-    ngOnInit() {
-        this.createView();
-    }
-    getContext() {
-        return this.context;
-    }
-    getViewType() {
-        return (this.viewContext.renderLeaf && this.viewContext.renderLeaf(this.context.leaf)) || SlateDefaultLeaf;
-    }
-    memoizedContext(prev, next) {
-        return false;
-    }
-    ngOnChanges(simpleChanges) {
-        if (!this.initialized) {
-            return;
-        }
-        this.updateView();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateLeaf, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SlateLeaf, isStandalone: true, 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: "16.2.1", ngImport: i0, type: SlateLeaf, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'slate-leaf',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
-                }]
-        }], propDecorators: { context: [{
-                type: Input
-            }] } });
-
-class SlateLeaves extends ViewContainer {
-    constructor() {
-        super(...arguments);
-        this.initialized = false;
-    }
-    ngOnInit() {
-        this.leaves = Text$1.decorations(this.context.text, this.context.decorations);
-        this.leafContexts = this.getLeafContexts();
-        this.initialized = true;
-    }
-    getLeafContexts() {
-        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.getLeafContexts();
-    }
-    trackBy(index, item) {
-        return index;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateLeaves, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SlateLeaves, isStandalone: true, selector: "slate-leaves", inputs: { context: "context" }, viewQueries: [{ propertyName: "childrenComponent", predicate: SlateLeaf, descendants: true, read: SlateLeaf }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `<slate-leaf
-        [context]="context"
-        [viewContext]="viewContext"
-        *ngFor="let context of leafContexts; trackBy: trackBy"
-    ></slate-leaf>`, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SlateLeaf, selector: "slate-leaf", inputs: ["context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateLeaves, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'slate-leaves',
-                    template: `<slate-leaf
-        [context]="context"
-        [viewContext]="viewContext"
-        *ngFor="let context of leafContexts; trackBy: trackBy"
-    ></slate-leaf>`,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true,
-                    imports: [NgFor, SlateLeaf]
-                }]
-        }], propDecorators: { context: [{
-                type: Input
-            }], childrenComponent: [{
-                type: ViewChildren,
-                args: [SlateLeaf, { read: SlateLeaf }]
-            }] } });
-
-class SlateDefaultText extends BaseTextComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateDefaultText, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SlateDefaultText, isStandalone: true, 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, dependencies: [{ kind: "component", type: SlateLeaves, selector: "slate-leaves", inputs: ["context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateDefaultText, 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'
-                    },
-                    standalone: true,
-                    imports: [SlateLeaves]
-                }]
-        }] });
-
-class SlateVoidText extends BaseTextComponent {
-    ngOnInit() {
-        this.isLeafBlock = AngularEditor.isLeafBlock(this.viewContext.editor, this.context.parent);
-        super.ngOnInit();
+    createLineBreakEmptyStringDOM() {
+        this.nativeElement.setAttribute('data-slate-zero-width', 'n');
+        this.nativeElement.setAttribute('data-slate-length', `${this.context.elementStringLength}`);
+        this.textNode = document.createTextNode(`\uFEFF`);
+        this.brNode = document.createElement('br');
+        this.nativeElement.append(this.textNode, this.brNode);
     }
-    ngOnChanges() {
-        if (!this.initialized) {
-            return;
+    removeLineBreakEmptyStringDOM() {
+        this.brNode?.remove();
+        // remove zero width character
+        const zeroWidthCharacterIndex = this.textNode?.textContent.indexOf(`\uFEFF`);
+        this.textNode?.deleteData(zeroWidthCharacterIndex, 1);
+        this.nativeElement.removeAttribute('data-slate-zero-width');
+        this.nativeElement.removeAttribute('data-slate-length');
+    }
+    createStringDOM() {
+        this.nativeElement.setAttribute('data-slate-string', 'true');
+        this.updateStringDOM();
+    }
+    updateStringDOM() {
+        // Avoid breaking some browser default behaviors, such as spellCheck, android composition input state
+        if (this.nativeElement.textContent !== this.context.text) {
+            this.nativeElement.textContent = this.context.text;
         }
-        this.isLeafBlock = AngularEditor.isLeafBlock(this.viewContext.editor, this.context.parent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateVoidText, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SlateVoidText, isStandalone: true, 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, dependencies: [{ kind: "component", type: SlateLeaves, selector: "slate-leaves", inputs: ["context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    removeStringDOM() {
+        this.nativeElement.removeAttribute('data-slate-string');
+        this.nativeElement.textContent = '';
+    }
+    ngOnInit() {
+        this.nativeElement.setAttribute('editable-text', '');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateDefaultString, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SlateDefaultString, isStandalone: true, selector: "span[slateDefaultString]", usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateVoidText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateDefaultString, decorators: [{
             type: Component,
             args: [{
-                    selector: 'span[slateVoidText]',
-                    template: `<slate-leaves [context]="context" [viewContext]="viewContext" [viewContext]="viewContext"></slate-leaves>`,
+                    selector: 'span[slateDefaultString]',
+                    template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        '[attr.contenteditable]': 'isLeafBlock',
-                        'data-slate-spacer': 'true',
-                        class: 'slate-spacer',
-                        'data-slate-node': 'text'
-                    },
-                    standalone: true,
-                    imports: [SlateLeaves]
+                    standalone: true
                 }]
-        }] });
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }] });
 
-const SLATE_DEFAULT_ELEMENT_COMPONENT_TOKEN = new InjectionToken('slate-default-element-token');
-
-class SlateDescendant extends ViewContainerItem {
-    get rootNodes() {
-        if (this.blockCardComponentRef) {
-            return [this.blockCardComponentRef.instance.nativeElement];
-        }
-        return super.getRootNodes();
-    }
-    get isBlockCard() {
-        return this.viewContext.editor.isBlockCard(this.descendant);
-    }
-    constructor(viewContainerRef, defaultElementComponentType) {
+class SlateString extends ViewContainerItem {
+    constructor(elementRef, viewContainerRef) {
         super(viewContainerRef);
+        this.elementRef = elementRef;
         this.viewContainerRef = viewContainerRef;
-        this.defaultElementComponentType = defaultElementComponentType;
     }
     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;
-        }
+    ngAfterViewInit() {
+        this.elementRef.nativeElement.remove();
+    }
+    // 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.
+    isLineBreakEmptyString() {
+        return (this.context.leaf.text === '' &&
+            this.context.parent.children[this.context.parent.children.length - 1] === this.context.text &&
+            !this.viewContext.editor.isInline(this.context.parent) &&
+            // [list-render] performance optimization: reduce the number of calls to the `Editor.string(editor, path)` method
+            isEmpty(this.viewContext.editor, this.context.parent));
     }
-    createBlockCard() {
-        const rootNodes = this.rootNodes;
-        this.blockCardComponentRef = this.viewContainerRef.createComponent(SlateBlockCard);
-        this.blockCardComponentRef.instance.initializeCenter(rootNodes);
+    // 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.
+    isEmptyText() {
+        return this.context.leaf.text === '';
     }
-    updateBlockCard() {
-        if (this.blockCardComponentRef) {
-            return;
-        }
-        const rootNodes = this.rootNodes;
-        this.createBlockCard();
-        const firstRootNode = rootNodes[0];
-        firstRootNode.replaceWith(this.blockCardComponentRef.instance.nativeElement);
+    // 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.
+    isCompatibleString() {
+        return this.context.isLast && this.context.leaf.text.slice(-1) === '\n';
     }
-    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: [] };
-        }
+    // COMPAT: Render text inside void nodes with a zero-width space.
+    // So the node can contain selection but the text is not visible.
+    isVoid() {
+        return this.viewContext.editor.isVoid(this.context.parent);
     }
-    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;
+    getViewType() {
+        if (this.isVoid()) {
+            return this.viewContext.templateComponent.voidStringTemplate;
         }
-        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;
+        if (this.isLineBreakEmptyString()) {
+            return SlateDefaultString;
         }
-    }
-    getViewType() {
-        if (Element.isElement(this.descendant)) {
-            return (this.viewContext.renderElement && this.viewContext.renderElement(this.descendant)) || this.defaultElementComponentType;
+        if (this.isEmptyText()) {
+            return this.viewContext.templateComponent.emptyTextTemplate;
         }
-        else {
-            const isVoid = this.viewContext.editor.isVoid(this.context.parent);
-            return isVoid
-                ? SlateVoidText
-                : (this.viewContext.renderText && this.viewContext.renderText(this.descendant)) || SlateDefaultText;
+        if (this.isCompatibleString()) {
+            return this.viewContext.templateComponent.compatibleStringTemplate;
         }
+        return SlateDefaultString;
     }
-    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))));
+    getType() {
+        if (this.isLineBreakEmptyString()) {
+            return 'lineBreakEmptyString';
+        }
+        return 'string';
     }
-    memoizedTextContext(prev, next) {
-        return (next.parent === prev.parent &&
-            next.isLast === prev.isLast &&
-            next.text === prev.text &&
-            isDecoratorRangeListEqual(next.decorations, prev.decorations));
+    getContext() {
+        const stringType = this.getType();
+        return {
+            text: this.context.leaf.text,
+            elementStringLength: Node.string(this.context.parent).length,
+            type: stringType
+        };
     }
     memoizedContext(prev, next) {
-        if (Element.isElement(this.descendant)) {
-            return this.memoizedElementContext(prev, next);
-        }
-        else {
-            return this.memoizedTextContext(prev, next);
-        }
+        return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateDescendant, deps: [{ token: i0.ViewContainerRef }, { token: SLATE_DEFAULT_ELEMENT_COMPONENT_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SlateDescendant, isStandalone: true, 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateString, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SlateString, isStandalone: true, 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: "16.2.1", ngImport: i0, type: SlateDescendant, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateString, decorators: [{
             type: Component,
             args: [{
-                    selector: 'slate-descendant',
+                    selector: 'span[slateString]',
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }], 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: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }], propDecorators: { context: [{
                 type: Input
             }] } });
+/**
+ * TODO: remove when bump slate
+ * copy from slate
+ * @param editor
+ * @param element
+ * @returns
+ */
+const isEmpty = (editor, element) => {
+    const { children } = element;
+    const [first] = children;
+    return children.length === 0 || (children.length === 1 && Text$1.isText(first) && first.text === '' && !editor.isVoid(element));
+};
 
-class SlateChildren extends ViewContainer {
-    constructor() {
-        super(...arguments);
-        this.trackBy = (index, node) => {
-            return this.viewContext.trackBy(node) || AngularEditor.findKey(this.viewContext.editor, node);
-        };
+class SlateDefaultLeaf extends BaseLeafComponent {
+    onContextChange() {
+        super.onContextChange();
+        this.renderPlaceholder();
     }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateChildren, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SlateChildren, isStandalone: true, selector: "slate-children", inputs: { children: "children", context: "context", viewContext: "viewContext" }, viewQueries: [{ propertyName: "childrenComponent", predicate: SlateDescendant, descendants: true, read: SlateDescendant }], 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, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SlateDescendant, selector: "slate-descendant", inputs: ["descendant", "context", "viewContext", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateChildren, decorators: [{
+    ngOnDestroy() {
+        // Because the placeholder span is not in the current component, it is destroyed along with the current component
+        this.destroyPlaceholder();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateDefaultLeaf, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SlateDefaultLeaf, isStandalone: true, selector: "span[slateDefaultLeaf]", host: { attributes: { "data-slate-leaf": "true" } }, usesInheritance: true, ngImport: i0, template: `<span slateString [context]="context" [viewContext]="viewContext"><span></span></span>`, isInline: true, dependencies: [{ kind: "component", type: SlateString, selector: "span[slateString]", inputs: ["context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateDefaultLeaf, 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>`,
+                    selector: 'span[slateDefaultLeaf]',
+                    template: `<span slateString [context]="context" [viewContext]="viewContext"><span></span></span>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        'data-slate-leaf': 'true'
+                    },
                     standalone: true,
-                    imports: [NgFor, SlateDescendant]
+                    imports: [SlateString]
                 }]
-        }], propDecorators: { children: [{
-                type: Input
-            }], context: [{
-                type: Input
-            }], viewContext: [{
-                type: Input
-            }], childrenComponent: [{
-                type: ViewChildren,
-                args: [SlateDescendant, { read: SlateDescendant }]
-            }] } });
+        }] });
+
+const SLATE_DEFAULT_LEAF_COMPONENT_TOKEN = new InjectionToken('slate-default-leaf-token');
+
+const TRIPLE_CLICK = 3;
 
 // not correctly clipboardData on beforeinput
 const forceOnDOMPaste = IS_SAFARI;
@@ -2685,12 +3003,16 @@ class SlateEditable {
     get hasBeforeInputSupport() {
         return HAS_BEFORE_INPUT_SUPPORT;
     }
-    constructor(elementRef, renderer2, cdr, ngZone, injector) {
+    constructor(elementRef, renderer2, cdr, ngZone, injector, defaultElement, defaultText, defaultVoidText, defaultLeaf) {
         this.elementRef = elementRef;
         this.renderer2 = renderer2;
         this.cdr = cdr;
         this.ngZone = ngZone;
         this.injector = injector;
+        this.defaultElement = defaultElement;
+        this.defaultText = defaultText;
+        this.defaultVoidText = defaultVoidText;
+        this.defaultLeaf = defaultLeaf;
         this.destroy$ = new Subject();
         this.isComposing = false;
         this.isDraggingInternally = false;
@@ -2712,6 +3034,10 @@ class SlateEditable {
         this.dataSlateEditor = true;
         this.dataSlateNode = 'value';
         this.dataGramm = false;
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.getOutletParent = () => {
+            return this.elementRef.nativeElement;
+        };
     }
     ngOnInit() {
         this.editor.injector = this.injector;
@@ -2737,6 +3063,7 @@ class SlateEditable {
         // add browser class
         let browserClass = IS_FIREFOX ? 'firefox' : IS_SAFARI ? 'safari' : '';
         browserClass && this.elementRef.nativeElement.classList.add(browserClass);
+        this.listRender = new ListRender(this.viewContext, this.viewContainerRef, this.getOutletParent, () => null);
     }
     ngOnChanges(simpleChanges) {
         if (!this.initialized) {
@@ -2744,16 +3071,16 @@ class SlateEditable {
         }
         const decorateChange = simpleChanges['decorate'];
         if (decorateChange) {
-            this.forceFlush();
+            this.forceRender();
         }
         const placeholderChange = simpleChanges['placeholder'];
         if (placeholderChange) {
-            this.detectContext();
+            this.render();
         }
         const readonlyChange = simpleChanges['readonly'];
         if (readonlyChange) {
             IS_READONLY.set(this.editor, this.readonly);
-            this.detectContext();
+            this.render();
             this.toSlateSelection();
         }
     }
@@ -2777,6 +3104,12 @@ class SlateEditable {
                 this.editor.children = normalize(value);
             }
             this.initializeContext();
+            if (!this.listRender.initialized) {
+                this.listRender.initialize(this.editor.children, this.editor, this.context);
+            }
+            else {
+                this.listRender.update(this.editor.children, this.editor, this.context);
+            }
             this.cdr.markForCheck();
         }
     }
@@ -2829,12 +3162,11 @@ class SlateEditable {
                 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;
+            if (hasDomSelection && hasDomSelectionInEditor && selection && hasStringTarget(domSelection)) {
+                const rangeFromDOMSelection = AngularEditor.toSlateRange(this.editor, domSelection, { suppressThrow: true });
+                if (rangeFromDOMSelection && Range.equals(rangeFromDOMSelection, selection)) {
+                    return;
+                }
             }
             // prevent updating native selection when active element is void element
             if (isTargetInsideVoid(this.editor, activeElement)) {
@@ -2845,7 +3177,7 @@ class SlateEditable {
             // 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);
+                this.editor.selection = AngularEditor.toSlateRange(this.editor, domSelection, { suppressThrow: false });
                 return;
             }
             // Otherwise the DOM selection is out of sync, so update it.
@@ -2886,14 +3218,14 @@ class SlateEditable {
         }
     }
     onChange() {
-        this.forceFlush();
+        this.forceRender();
         this.onChangeCallback(this.editor.children);
     }
     ngAfterViewChecked() { }
     ngDoCheck() { }
-    forceFlush() {
-        this.detectContext();
-        this.cdr.detectChanges();
+    forceRender() {
+        this.updateContext();
+        this.listRender.update(this.editor.children, this.editor, this.context);
         // 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
@@ -2929,6 +3261,29 @@ class SlateEditable {
         }
         this.toNativeSelection();
     }
+    render() {
+        const changed = this.updateContext();
+        if (changed) {
+            this.listRender.update(this.editor.children, this.editor, this.context);
+        }
+    }
+    updateContext() {
+        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
+            };
+            return true;
+        }
+        return false;
+    }
     initializeContext() {
         this.context = {
             parent: this.editor,
@@ -2946,24 +3301,13 @@ class SlateEditable {
             renderText: this.renderText,
             trackBy: this.trackBy,
             isStrictDecorate: this.isStrictDecorate,
-            templateComponent: this.templateComponent
+            templateComponent: this.templateComponent,
+            defaultElement: this.defaultElement,
+            defaultText: this.defaultText,
+            defaultVoidText: this.defaultVoidText,
+            defaultLeaf: this.defaultLeaf
         };
     }
-    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) || [];
@@ -3255,7 +3599,23 @@ class SlateEditable {
             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])) {
+            if (event.detail === TRIPLE_CLICK && path.length >= 1) {
+                let blockPath = path;
+                if (!(Element.isElement(node) && Editor.isBlock(this.editor, node))) {
+                    const block = Editor.above(this.editor, {
+                        match: n => Element.isElement(n) && Editor.isBlock(this.editor, n),
+                        at: path
+                    });
+                    blockPath = block?.[1] ?? path.slice(0, 1);
+                }
+                const range = Editor.range(this.editor, blockPath);
+                Transforms.select(this.editor, range);
+                return;
+            }
+            if (startVoid &&
+                endVoid &&
+                Path.equals(startVoid[1], endVoid[1]) &&
+                !(AngularEditor.isBlockCardLeftCursor(this.editor) || AngularEditor.isBlockCardRightCursor(this.editor))) {
                 const range = Editor.range(this.editor, start);
                 Transforms.select(this.editor, range);
             }
@@ -3267,14 +3627,13 @@ class SlateEditable {
             // solve the problem of cross node Chinese input
             if (Range.isExpanded(selection)) {
                 Editor.deleteFragment(this.editor);
-                this.forceFlush();
+                this.forceRender();
             }
         }
         if (hasEditableTarget(this.editor, event.target) && !this.isDOMEventHandled(event, this.compositionStart)) {
             this.isComposing = true;
         }
-        this.detectContext();
-        this.cdr.detectChanges();
+        this.render();
     }
     onDOMCompositionUpdate(event) {
         this.isDOMEventHandled(event, this.compositionUpdate);
@@ -3296,8 +3655,7 @@ class SlateEditable {
             // so we need avoid repeat isnertText by isComposing === true,
             this.isComposing = false;
         }
-        this.detectContext();
-        this.cdr.detectChanges();
+        this.render();
     }
     onDOMCopy(event) {
         const window = AngularEditor.getWindow(this.editor);
@@ -3323,7 +3681,7 @@ class SlateEditable {
             // 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)) {
+            if (Element.isElement(node) && Editor.isVoid(this.editor, node)) {
                 event.preventDefault();
             }
         }
@@ -3332,7 +3690,7 @@ class SlateEditable {
         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 });
+            const voidMatch = Element.isElement(node) && (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) {
@@ -3594,7 +3952,7 @@ class SlateEditable {
                             const currentNode = Node.parent(editor, selection.anchor.path);
                             if (Element.isElement(currentNode) &&
                                 Editor.isVoid(editor, currentNode) &&
-                                Editor.isInline(editor, currentNode)) {
+                                (Editor.isInline(editor, currentNode) || Editor.isBlock(editor, currentNode))) {
                                 event.preventDefault();
                                 Editor.deleteBackward(editor, {
                                     unit: 'block'
@@ -3670,16 +4028,32 @@ class SlateEditable {
         this.destroy$.complete();
         EDITOR_TO_ON_CHANGE.delete(this.editor);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateEditable, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SlateEditable, isStandalone: true, selector: "slate-editable", inputs: { editor: "editor", renderElement: "renderElement", renderLeaf: "renderLeaf", renderText: "renderText", decorate: "decorate", placeholderDecorate: "placeholderDecorate", scrollSelectionIntoView: "scrollSelectionIntoView", isStrictDecorate: "isStrictDecorate", trackBy: "trackBy", readonly: "readonly", placeholder: "placeholder", beforeInput: "beforeInput", blur: "blur", click: "click", compositionEnd: "compositionEnd", compositionUpdate: "compositionUpdate", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateEditable, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: SLATE_DEFAULT_ELEMENT_COMPONENT_TOKEN }, { token: SLATE_DEFAULT_TEXT_COMPONENT_TOKEN }, { token: SLATE_DEFAULT_VOID_TEXT_COMPONENT_TOKEN }, { token: SLATE_DEFAULT_LEAF_COMPONENT_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SlateEditable, isStandalone: true, selector: "slate-editable", inputs: { editor: "editor", renderElement: "renderElement", renderLeaf: "renderLeaf", renderText: "renderText", decorate: "decorate", placeholderDecorate: "placeholderDecorate", scrollSelectionIntoView: "scrollSelectionIntoView", isStrictDecorate: "isStrictDecorate", trackBy: "trackBy", readonly: "readonly", placeholder: "placeholder", beforeInput: "beforeInput", blur: "blur", click: "click", compositionEnd: "compositionEnd", compositionUpdate: "compositionUpdate", 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(() => SlateEditable),
                 multi: true
+            },
+            {
+                provide: SLATE_DEFAULT_ELEMENT_COMPONENT_TOKEN,
+                useValue: SlateDefaultElement
+            },
+            {
+                provide: SLATE_DEFAULT_TEXT_COMPONENT_TOKEN,
+                useValue: SlateDefaultText
+            },
+            {
+                provide: SLATE_DEFAULT_VOID_TEXT_COMPONENT_TOKEN,
+                useValue: SlateVoidText
+            },
+            {
+                provide: SLATE_DEFAULT_LEAF_COMPONENT_TOKEN,
+                useValue: SlateDefaultLeaf
             }
-        ], 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>\n", dependencies: [{ kind: "component", type: SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { kind: "component", type: SlateStringTemplate, selector: "slate-string-template" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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-string-template #templateComponent></slate-string-template>\n", dependencies: [{ kind: "component", type: SlateStringTemplate, selector: "slate-string-template" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateEditable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateEditable, decorators: [{
             type: Component,
             args: [{ selector: 'slate-editable', host: {
                         class: 'slate-editable-container',
@@ -3693,9 +4067,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SlateEditable),
                             multi: true
+                        },
+                        {
+                            provide: SLATE_DEFAULT_ELEMENT_COMPONENT_TOKEN,
+                            useValue: SlateDefaultElement
+                        },
+                        {
+                            provide: SLATE_DEFAULT_TEXT_COMPONENT_TOKEN,
+                            useValue: SlateDefaultText
+                        },
+                        {
+                            provide: SLATE_DEFAULT_VOID_TEXT_COMPONENT_TOKEN,
+                            useValue: SlateVoidText
+                        },
+                        {
+                            provide: SLATE_DEFAULT_LEAF_COMPONENT_TOKEN,
+                            useValue: SlateDefaultLeaf
                         }
-                    ], standalone: true, imports: [SlateChildren, SlateStringTemplate], template: "<slate-children [children]=\"editor.children\" [context]=\"context\" [viewContext]=\"viewContext\"></slate-children>\n<slate-string-template #templateComponent></slate-string-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Injector }]; }, propDecorators: { editor: [{
+                    ], standalone: true, imports: [SlateChildren, SlateStringTemplate], template: "<slate-string-template #templateComponent></slate-string-template>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SLATE_DEFAULT_ELEMENT_COMPONENT_TOKEN]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SLATE_DEFAULT_TEXT_COMPONENT_TOKEN]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SLATE_DEFAULT_VOID_TEXT_COMPONENT_TOKEN]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SLATE_DEFAULT_LEAF_COMPONENT_TOKEN]
+                }] }], propDecorators: { editor: [{
                 type: Input
             }], renderElement: [{
                 type: Input
@@ -3810,8 +4212,8 @@ const hasTarget = (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 slateNode = hasTarget(editor, target) && AngularEditor.toSlateNode(editor, target, { suppressThrow: true });
+    return slateNode && Element.isElement(slateNode) && Editor.isVoid(editor, slateNode);
 };
 const hasStringTarget = (domSelection) => {
     return ((domSelection.anchorNode.parentElement.hasAttribute('data-slate-string') ||
@@ -3839,29 +4241,14 @@ const preventInsertFromComposition = (event, editor) => {
 };
 
 class SlateElement extends BaseElementComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateElement, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SlateElement, isStandalone: true, selector: "[slateElement]", usesInheritance: true, ngImport: i0, template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children><ng-content></ng-content>', isInline: true, dependencies: [{ kind: "component", type: SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateElement, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SlateElement, isStandalone: true, selector: "[slateElement]", usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateElement, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateElement, decorators: [{
             type: Component,
             args: [{
                     selector: '[slateElement]',
-                    template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children><ng-content></ng-content>',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true,
-                    imports: [SlateChildren]
-                }]
-        }] });
-
-class SlateDefaultElement extends BaseElementComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateDefaultElement, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SlateDefaultElement, isStandalone: true, selector: "div[slateDefaultElement]", usesInheritance: true, ngImport: i0, template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`, isInline: true, dependencies: [{ kind: "component", type: SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateDefaultElement, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'div[slateDefaultElement]',
-                    template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`,
+                    template: '<ng-content></ng-content>',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true,
                     imports: [SlateChildren]
@@ -3869,8 +4256,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
         }] });
 
 class SlateModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SlateModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.4", ngImport: i0, type: SlateModule, imports: [CommonModule,
             SlateEditable,
             SlateDefaultElement,
             SlateElement,
@@ -3878,26 +4265,20 @@ class SlateModule {
             SlateDefaultText,
             SlateString,
             SlateStringTemplate,
-            SlateDescendant,
             SlateChildren,
             SlateBlockCard,
-            SlateLeaf,
             SlateLeaves,
             SlateDefaultLeaf,
-            SlateDefaultString], exports: [SlateEditable,
-            SlateChildren,
-            SlateElement,
-            SlateLeaves,
-            SlateString,
-            SlateDefaultString] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateModule, providers: [
+            SlateDefaultString,
+            SlateChildrenOutlet], exports: [SlateEditable, SlateChildren, SlateChildrenOutlet, SlateElement, SlateLeaves, SlateString, SlateDefaultString] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateModule, providers: [
             {
                 provide: SLATE_DEFAULT_ELEMENT_COMPONENT_TOKEN,
                 useValue: SlateDefaultElement
             }
         ], imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -3909,22 +4290,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
                         SlateDefaultText,
                         SlateString,
                         SlateStringTemplate,
-                        SlateDescendant,
                         SlateChildren,
                         SlateBlockCard,
-                        SlateLeaf,
                         SlateLeaves,
                         SlateDefaultLeaf,
-                        SlateDefaultString
-                    ],
-                    exports: [
-                        SlateEditable,
-                        SlateChildren,
-                        SlateElement,
-                        SlateLeaves,
-                        SlateString,
-                        SlateDefaultString
+                        SlateDefaultString,
+                        SlateChildrenOutlet
                     ],
+                    exports: [SlateEditable, SlateChildren, SlateChildrenOutlet, SlateElement, SlateLeaves, SlateString, SlateDefaultString],
                     providers: [
                         {
                             provide: SLATE_DEFAULT_ELEMENT_COMPONENT_TOKEN,
@@ -3942,5 +4315,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
  * 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, SlateChildren, SlateDefaultString, SlateEditable, SlateElement, SlateErrorCode, SlateLeaves, SlateModule, SlateString, check, defaultScrollSelectionIntoView, getCardTargetAttribute, getClipboardData, getDefaultView, getEditableChild, getEditableChildAndIndex, getPlainText, getSlateFragmentAttribute, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hasEditableTarget, hasShadowRoot, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isComponentType, isDOMComment, isDOMElement, isDOMNode, isDOMSelection, isDOMText, isDecoratorRangeListEqual, isPlainTextOnlyPaste, isTemplateRef, isValid, normalize, normalizeDOMPoint, shallowCompare, withAngular };
+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, SlateChildren, SlateChildrenOutlet, SlateDefaultString, SlateEditable, SlateElement, SlateErrorCode, SlateLeaves, SlateModule, SlateString, check, createThrottleRAF, defaultScrollSelectionIntoView, getCardTargetAttribute, getClipboardData, getDefaultView, getEditableChild, getEditableChildAndIndex, getPlainText, getSlateFragmentAttribute, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hasEditableTarget, hasShadowRoot, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isComponentType, isDOMComment, isDOMElement, isDOMNode, isDOMSelection, isDOMText, isDecoratorRangeListEqual, isEmpty, isPlainTextOnlyPaste, isTemplateRef, isValid, normalize, normalizeDOMPoint, shallowCompare, withAngular };
 //# sourceMappingURL=slate-angular.mjs.map