slate-angular 19.3.1 → 19.4.0-next.1

package/fesm2022/slate-angular.mjs

@@ -2,7 +2,7 @@ import { Editor, Range, Element, Transforms, Text as Text$1, Node, Path } from '
 import { EDITOR_TO_ELEMENT, NODE_TO_ELEMENT, DOMEditor, normalizeDOMPoint, isDOMSelection, IS_CHROME as IS_CHROME$1, hasShadowRoot, isDOMElement, NODE_TO_PARENT, NODE_TO_INDEX, IS_FOCUSED, isDOMNode, withDOM, NODE_TO_KEY, ELEMENT_TO_NODE, getDefaultView, EDITOR_TO_WINDOW, IS_READ_ONLY, EDITOR_TO_ON_CHANGE, TRIPLE_CLICK, isPlainTextOnlyPaste } from 'slate-dom';
 import { isKeyHotkey } from 'is-hotkey';
 import * as i0 from '@angular/core';
-import { TemplateRef, ViewChild, ChangeDetectionStrategy, Component, InjectionToken, ComponentRef, IterableDiffers, inject, ElementRef, ChangeDetectorRef, Input, Directive, HostBinding, ViewContainerRef, forwardRef, Inject, NgModule } from '@angular/core';
+import { TemplateRef, ViewChild, Component, ComponentRef, IterableDiffers, inject, ViewContainerRef, forwardRef, HostBinding, Input, ChangeDetectionStrategy, NgModule, ElementRef, ChangeDetectorRef, Directive } from '@angular/core';
 import { direction } from 'direction';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { Subject } from 'rxjs';
@@ -572,6 +572,9 @@ function isTemplateRef(value) {
 function isComponentType(value) {
     return !isTemplateRef(value);
 }
+function isFlavourType(value) {
+    return value && value.isFlavour === true;
+}
 
 const shallowCompare = (obj1, obj2) => Object.keys(obj1).length === Object.keys(obj2).length &&
     Object.keys(obj1).every(key => obj2.hasOwnProperty(key) && obj1[key] === obj2[key]);
@@ -1033,15 +1036,15 @@ const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
         }
     };
     e.insertData = async (data) => {
-        if (!(await e.customInsertFragmentData(data))) {
+        if (!(await e.customInsertFragmentData(data, null))) {
             e.insertTextData(data);
         }
     };
-    e.customInsertFragmentData = async (data) => {
+    e.customInsertFragmentData = async (data, contextClipboardData) => {
         /**
          * Checking copied fragment from application/x-slate-fragment or data-slate-fragment
          */
-        const clipboardData = await getClipboardData(data);
+        const clipboardData = contextClipboardData || (await getClipboardData(data));
         if (clipboardData && clipboardData.elements) {
             e.insertFragment(clipboardData.elements);
             return true;
@@ -1477,24 +1480,6 @@ var SlateErrorCode;
     SlateErrorCode[SlateErrorCode["InvalidValueError"] = 4100] = "InvalidValueError";
 })(SlateErrorCode || (SlateErrorCode = {}));
 
-class SlateStringTemplate {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SlateStringTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: "19.2.14", 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: [{
-                type: ViewChild,
-                args: ['compatibleStringTemplate', { read: TemplateRef, static: true }]
-            }], voidStringTemplate: [{
-                type: ViewChild,
-                args: ['voidStringTemplate', { read: TemplateRef, static: true }]
-            }], emptyTextTemplate: [{
-                type: ViewChild,
-                args: ['emptyTextTemplate', { read: TemplateRef, static: true }]
-            }] } });
-
 function restoreDom(editor, execute) {
     const editable = EDITOR_TO_ELEMENT.get(editor);
     let observer = new MutationObserver(mutations => {
@@ -1527,45 +1512,53 @@ function restoreDom(editor, execute) {
     }, 0);
 }
 
-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');
-
-class SlateChildrenOutlet {
+class SlateBlockCard {
+    get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+    get centerContainerElement() {
+        return this.centerContianer.nativeElement;
+    }
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
-    getNativeElement() {
-        return this.elementRef.nativeElement;
+    ngOnInit() {
+        this.nativeElement.classList.add(`slate-block-card`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SlateChildrenOutlet, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SlateChildrenOutlet, isStandalone: true, selector: "slate-children-outlet", ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    append() {
+        this.centerRootNodes.forEach(rootNode => !this.centerContainerElement.contains(rootNode) && this.centerContainerElement.appendChild(rootNode));
+    }
+    initializeCenter(rootNodes) {
+        this.centerRootNodes = rootNodes;
+        this.append();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SlateBlockCard, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: "19.2.14", ngImport: i0, type: SlateChildrenOutlet, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SlateBlockCard, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'slate-children-outlet',
-                    template: ``,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+            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: () => [{ type: i0.ElementRef }], propDecorators: { centerContianer: [{
+                type: ViewChild,
+                args: ['centerContianer', { static: true }]
+            }] } });
 
-function hasBeforeContextChange(value) {
-    if (value.beforeContextChange) {
-        return true;
-    }
-    return false;
-}
-function hasAfterContextChange(value) {
-    if (value.afterContextChange) {
-        return true;
+class FlavourRef {
+    destroy() {
+        this.instance.onDestroy();
     }
-    return false;
 }
 
-function createEmbeddedViewOrComponent(viewType, context, viewContext, viewContainerRef) {
+function createEmbeddedViewOrComponentOrFlavour(viewType, context, viewContext, viewContainerRef) {
+    if (isFlavourType(viewType)) {
+        const flavourRef = new FlavourRef();
+        flavourRef.instance = new viewType();
+        flavourRef.instance.context = context;
+        flavourRef.instance.viewContext = viewContext;
+        flavourRef.instance.viewContainerRef = viewContainerRef;
+        flavourRef.instance.onInit();
+        return flavourRef;
+    }
     if (isTemplateRef(viewType)) {
         const embeddedViewContext = {
             context,
@@ -1586,6 +1579,10 @@ function createEmbeddedViewOrComponent(viewType, context, viewContext, viewConta
     }
 }
 function updateContext(view, newContext, viewContext) {
+    if (view instanceof FlavourRef) {
+        view.instance.context = newContext;
+        return;
+    }
     if (view instanceof ComponentRef) {
         view.instance.context = newContext;
     }
@@ -1615,6 +1612,9 @@ function getRootNodes(ref, blockCard) {
     if (blockCard) {
         return [blockCard.instance.nativeElement];
     }
+    if (ref instanceof FlavourRef) {
+        return [ref.instance.nativeElement];
+    }
     if (ref instanceof ComponentRef) {
         ref.hostView.rootNodes.forEach(ele => {
             if (!(ele instanceof HTMLElement)) {
@@ -1670,498 +1670,166 @@ function mountOnItemChange(index, item, views, blockCards, outletParent, firstRo
     }
 }
 
-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 = [];
+function hasBeforeContextChange(value) {
+    if (value.beforeContextChange) {
+        return true;
     }
-    initialize(context) {
-        const { decoratedLeaves, contexts } = this.getLeaves(context);
-        this.decoratedLeaves = decoratedLeaves;
-        this.contexts = contexts;
-        this.decoratedLeaves.forEach((leaf, index) => {
-            const context = getContext$1(index, this.contexts);
-            const viewType = getViewType$1(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.decoratedLeaves).create(trackBy$1(this.viewContext));
-        this.differ.diff(this.decoratedLeaves);
+    return false;
+}
+function hasAfterContextChange(value) {
+    if (value.afterContextChange) {
+        return true;
     }
-    update(context) {
-        const { decoratedLeaves, contexts } = this.getLeaves(context);
-        const outletParent = this.getOutletParent();
-        const diffResult = this.differ.diff(decoratedLeaves);
-        if (diffResult) {
-            let firstRootNode = getRootNodes(this.views[0])[0];
-            const newContexts = [];
-            const newViewTypes = [];
-            const newViews = [];
-            diffResult.forEachItem(record => {
-                let context = getContext$1(record.currentIndex, contexts);
-                const viewType = getViewType$1(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.decoratedLeaves = decoratedLeaves;
+    return false;
+}
+
+class BaseFlavour {
+    constructor() {
+        this.initialized = false;
+    }
+    static { this.isFlavour = true; }
+    set context(value) {
+        if (hasBeforeContextChange(this)) {
+            this.beforeContextChange(value);
+        }
+        this._context = value;
+        this.onContextChange();
+        if (hasAfterContextChange(this)) {
+            this.afterContextChange();
         }
     }
-    getLeaves(context) {
-        const decoratedLeaves = Text$1.decorations(context.text, context.decorations);
-        const contexts = decoratedLeaves.map((decoratedLeaf, index) => {
-            return {
-                leaf: decoratedLeaf.leaf,
-                leafPosition: decoratedLeaf.position,
-                text: context.text,
-                parent: context.parent,
-                index,
-                isLast: context.isLast && index === decoratedLeaves.length - 1
-            };
-        });
-        return { decoratedLeaves, contexts };
+    get context() {
+        return this._context;
+    }
+    get editor() {
+        return this.viewContext && this.viewContext.editor;
     }
-}
-function getContext$1(index, leafContexts) {
-    return leafContexts[index];
-}
-function getViewType$1(leafContext, viewContext) {
-    return (viewContext.renderLeaf && viewContext.renderLeaf(leafContext.leaf)) || viewContext.defaultLeaf;
-}
-function trackBy$1(viewContext) {
-    return (index, node) => {
-        return index;
-    };
 }
 
-class SlateBlockCard {
-    get nativeElement() {
-        return this.elementRef.nativeElement;
+class BaseElementFlavour extends BaseFlavour {
+    constructor() {
+        super(...arguments);
+        this.getOutletParent = () => {
+            return this.nativeElement;
+        };
+        this.getOutletElement = () => {
+            return this.nativeElement.querySelector('.children-outlet');
+        };
     }
-    get centerContainerElement() {
-        return this.centerContianer.nativeElement;
+    get element() {
+        return this._context && this._context.element;
     }
-    constructor(elementRef) {
-        this.elementRef = elementRef;
+    get selection() {
+        return this._context && this._context.selection;
     }
-    ngOnInit() {
-        this.nativeElement.classList.add(`slate-block-card`);
+    get decorations() {
+        return this._context && this._context.decorations;
     }
-    append() {
-        this.centerRootNodes.forEach(rootNode => !this.centerContainerElement.contains(rootNode) && this.centerContainerElement.appendChild(rootNode));
+    get children() {
+        return this._context && this._context.element.children;
     }
-    initializeCenter(rootNodes) {
-        this.centerRootNodes = rootNodes;
-        this.append();
+    get isCollapsed() {
+        return this.selection && Range.isCollapsed(this.selection);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SlateBlockCard, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: "19.2.14", 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: () => [{ type: i0.ElementRef }], propDecorators: { centerContianer: [{
-                type: ViewChild,
-                args: ['centerContianer', { static: true }]
-            }] } });
-
-class ListRender {
-    constructor(viewContext, viewContainerRef, getOutletParent, getOutletElement) {
-        this.viewContext = viewContext;
-        this.viewContainerRef = viewContainerRef;
-        this.getOutletParent = getOutletParent;
-        this.getOutletElement = getOutletElement;
-        this.views = [];
-        // private addedViews: (EmbeddedViewRef<any> | ComponentRef<any>)[] = [];
-        this.blockCards = [];
-        this.contexts = [];
-        this.viewTypes = [];
-        this.differ = null;
-        this.initialized = false;
+    get isCollapsedAndNonReadonly() {
+        return this.selection && Range.isCollapsed(this.selection) && !this.readonly;
     }
-    initialize(children, parent, childrenContext) {
+    get readonly() {
+        return this._context && this._context.readonly;
+    }
+    onInit() {
         this.initialized = true;
-        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(index, descendant, parentPath, childrenContext, this.viewContext);
-            const viewType = getViewType(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.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(this.viewContext));
-        this.differ.diff(children);
-        if (parent === this.viewContext.editor) {
-            executeAfterViewInit(this.viewContext.editor);
-        }
-    }
-    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(record.currentIndex, record.item, parentPath, childrenContext, this.viewContext);
-                const viewType = getViewType(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);
-                    newBlockCards.push(blockCard);
-                    mountOnItemChange(record.currentIndex, record.item, newViews, newBlockCards, outletParent, firstRootNode, this.viewContext);
-                }
-                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);
-                        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);
-                }
-            });
-            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) {
-                executeAfterViewInit(this.viewContext.editor);
-            }
+        this.render();
+        for (const key in this._context.attributes) {
+            this.nativeElement.setAttribute(key, this._context.attributes[key]);
         }
-        else {
-            const newContexts = [];
-            this.children.forEach((child, index) => {
-                NODE_TO_INDEX.set(child, index);
-                NODE_TO_PARENT.set(child, parent);
-                let context = getContext(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;
+        this.updateWeakMap();
+        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);
         }
-    }
-    destroy() {
-        this.children.forEach((element, index) => {
-            if (this.views[index]) {
-                this.views[index].destroy();
-            }
-            if (this.blockCards[index]) {
-                this.blockCards[index].destroy();
-            }
+        addAfterViewInitQueue(this.editor, () => {
+            this.afterViewInit();
         });
-        this.views = [];
-        this.blockCards = [];
-        this.contexts = [];
-        this.viewTypes = [];
-        this.initialized = false;
-        this.differ = null;
     }
-}
-function getContext(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;
+    afterViewInit() {
+        if (this._context.contentEditable !== undefined) {
+            this.nativeElement.setAttribute('contenteditable', this._context.contentEditable + '');
         }
-        if (isVoid) {
-            elementContext.attributes['data-slate-void'] = true;
+    }
+    updateWeakMap() {
+        NODE_TO_ELEMENT.set(this.element, this.nativeElement);
+        ELEMENT_TO_NODE.set(this.nativeElement, this.element);
+        ELEMENT_TO_COMPONENT.set(this.element, this);
+    }
+    onDestroy() {
+        if (NODE_TO_ELEMENT.get(this.element) === this.nativeElement) {
+            NODE_TO_ELEMENT.delete(this.element);
         }
-        // add contentEditable for block element only to avoid chinese input be broken
-        if (isVoid && !isInline) {
-            elementContext.contentEditable = false;
+        ELEMENT_TO_NODE.delete(this.nativeElement);
+        if (ELEMENT_TO_COMPONENT.get(this.element) === this) {
+            ELEMENT_TO_COMPONENT.delete(this.element);
         }
-        return elementContext;
+        this.nativeElement?.remove();
     }
-    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;
+    onContextChange() {
+        this.childrenContext = this.getChildrenContext();
+        if (!this.initialized) {
+            return;
+        }
+        this.rerender();
+        this.updateWeakMap();
+        this.updateChildrenView();
     }
-}
-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 };
+    updateChildrenView() {
+        if (this.editor.isExpanded(this.element)) {
+            this.listRender.update(this.children, this.element, this.childrenContext);
         }
         else {
-            return { selection: null, decorations: ds };
+            if (this.listRender.initialized) {
+                this.listRender.destroy();
+            }
         }
     }
-    catch (error) {
-        viewContext.editor.onError({
-            code: SlateErrorCode.GetStartPointError,
-            nativeError: error
-        });
-        return { selection: null, decorations: [] };
+    getChildrenContext() {
+        return {
+            parent: this._context.element,
+            selection: this._context.selection,
+            decorations: this._context.decorations,
+            decorate: this._context.decorate,
+            readonly: this._context.readonly
+        };
     }
 }
-function getViewType(item, parent, viewContext) {
-    if (Element.isElement(item)) {
-        return (viewContext.renderElement && viewContext.renderElement(item)) || viewContext.defaultElement;
+
+class DefaultElementFlavour extends BaseElementFlavour {
+    render() {
+        const nativeElement = document.createElement('div');
+        this.nativeElement = nativeElement;
     }
-    else {
-        const isVoid = viewContext.editor.isVoid(parent);
-        return isVoid ? viewContext.defaultVoidText : (viewContext.renderText && viewContext.renderText(item)) || viewContext.defaultText;
+    rerender() {
+        // No-op
     }
 }
-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;
+
+class BaseLeafFlavour extends BaseFlavour {
+    get text() {
+        return this.context && this.context.text;
     }
-    else {
-        return null;
+    get leaf() {
+        return this.context && this.context.leaf;
     }
-}
-function trackBy(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));
-}
-function addAfterViewInitQueue(editor, afterViewInitCallback) {
-    const queue = getAfterViewInitQueue(editor);
-    queue.push(afterViewInitCallback);
-    EDITOR_TO_AFTER_VIEW_INIT_QUEUE.set(editor, queue);
-}
-function getAfterViewInitQueue(editor) {
-    return EDITOR_TO_AFTER_VIEW_INIT_QUEUE.get(editor) || [];
-}
-function clearAfterViewInitQueue(editor) {
-    EDITOR_TO_AFTER_VIEW_INIT_QUEUE.set(editor, []);
-}
-function executeAfterViewInit(editor) {
-    const queue = getAfterViewInitQueue(editor);
-    queue.forEach(callback => callback());
-    clearAfterViewInitQueue(editor);
-}
-
-/**
- * base class for custom element component or text component
- */
-class BaseComponent {
-    constructor() {
-        this.initialized = false;
-        this.elementRef = inject(ElementRef);
-        this.cdr = inject(ChangeDetectorRef);
-    }
-    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;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: BaseComponent, isStandalone: true, inputs: { context: "context", viewContext: "viewContext" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseComponent, decorators: [{
-            type: Directive
-        }], propDecorators: { context: [{
-                type: Input
-            }], viewContext: [{
-                type: Input
-            }] } });
-/**
- * base class for custom leaf component
- */
-class BaseLeafComponent extends BaseComponent {
-    constructor() {
-        super(...arguments);
-        this.isSlateLeaf = true;
-    }
-    get text() {
-        return this.context && this.context.text;
-    }
-    get leaf() {
-        return this.context && this.context.leaf;
-    }
-    ngOnInit() {
+    onInit() {
+        this.render();
+        this.renderPlaceholder();
         this.initialized = true;
     }
     onContextChange() {
         if (!this.initialized) {
             return;
         }
+        this.rerender();
+        this.renderPlaceholder();
     }
     renderPlaceholder() {
         // issue-1: IME input was interrupted
@@ -2208,142 +1876,309 @@ class BaseLeafComponent extends BaseComponent {
             this.nativeElement.classList.remove('leaf-with-placeholder');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseLeafComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: BaseLeafComponent, isStandalone: true, host: { properties: { "attr.data-slate-leaf": "this.isSlateLeaf" } }, usesInheritance: true, ngImport: i0 }); }
+    onDestroy() {
+        this.nativeElement?.remove();
+    }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseLeafComponent, decorators: [{
-            type: Directive
-        }], propDecorators: { isSlateLeaf: [{
-                type: HostBinding,
-                args: ['attr.data-slate-leaf']
-            }] } });
-/**
- * base class for custom element component
- */
-class BaseElementComponent extends BaseComponent {
-    constructor() {
-        super(...arguments);
-        this.viewContainerRef = inject(ViewContainerRef);
-        this.getOutletParent = () => {
-            return this.elementRef.nativeElement;
-        };
-        this.getOutletElement = () => {
-            if (this.childrenOutletInstance) {
-                return this.childrenOutletInstance.getNativeElement();
-            }
-            return null;
-        };
+
+var StringType;
+(function (StringType) {
+    StringType["normalString"] = "normalString";
+    StringType["lineBreakEmptyString"] = "lineBreakEmptyString";
+    StringType["normalEmptyText"] = "normalEmptyText";
+    StringType["compatibleString"] = "compatibleString";
+    StringType["voidString"] = "voidString";
+})(StringType || (StringType = {}));
+class SlateStringRender {
+    constructor(context, viewContext) {
+        this.context = context;
+        this.viewContext = viewContext;
     }
-    get element() {
-        return this._context && this._context.element;
+    // 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 === '';
     }
-    get selection() {
-        return this._context && this._context.selection;
+    // 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';
     }
-    get decorations() {
-        return this._context && this._context.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);
     }
-    get children() {
-        return this._context && this._context.element.children;
+    get leaf() {
+        return this.context && this.context.leaf;
     }
-    get isCollapsed() {
-        return this.selection && Range.isCollapsed(this.selection);
+    // 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));
     }
-    get isCollapsedAndNonReadonly() {
-        return this.selection && Range.isCollapsed(this.selection) && !this.readonly;
+    createStringNode(type) {
+        let newNativeElement;
+        switch (type) {
+            case StringType.lineBreakEmptyString:
+                newNativeElement = createLineBreakEmptyStringDOM(this.getElementStringLength());
+                break;
+            case StringType.voidString:
+            case StringType.normalEmptyText:
+                newNativeElement = createEmptyOrVoidStringNode();
+                break;
+            case StringType.compatibleString:
+                newNativeElement = createCompatibleStringNode(this.leaf.text);
+                break;
+            case StringType.normalString:
+                newNativeElement = createDefaultStringNode(this.leaf.text);
+                break;
+            default:
+                newNativeElement = createDefaultStringNode(this.leaf.text);
+        }
+        return newNativeElement;
     }
-    get readonly() {
-        return this._context && this._context.readonly;
+    render() {
+        this.type = this.getType();
+        this.nativeElement = this.createStringNode(this.type);
+        return this.nativeElement;
     }
-    ngOnInit() {
-        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);
+    getType() {
+        if (this.isLineBreakEmptyString()) {
+            return StringType.lineBreakEmptyString;
         }
-        addAfterViewInitQueue(this.editor, () => {
-            this.afterViewInit();
-        });
-    }
-    afterViewInit() {
-        if (this._context.contentEditable !== undefined) {
-            this.nativeElement.setAttribute('contenteditable', this._context.contentEditable + '');
+        if (this.isVoid()) {
+            return StringType.voidString;
         }
-    }
-    updateWeakMap() {
-        NODE_TO_ELEMENT.set(this.element, this.nativeElement);
-        ELEMENT_TO_NODE.set(this.nativeElement, this.element);
-        ELEMENT_TO_COMPONENT.set(this.element, this);
-    }
-    ngOnDestroy() {
-        if (NODE_TO_ELEMENT.get(this.element) === this.nativeElement) {
-            NODE_TO_ELEMENT.delete(this.element);
+        if (this.isEmptyText()) {
+            return StringType.normalEmptyText;
         }
-        ELEMENT_TO_NODE.delete(this.nativeElement);
-        if (ELEMENT_TO_COMPONENT.get(this.element) === this) {
-            ELEMENT_TO_COMPONENT.delete(this.element);
+        if (this.isCompatibleString()) {
+            return StringType.compatibleString;
         }
+        return StringType.normalString;
     }
-    onContextChange() {
-        this.childrenContext = this.getChildrenContext();
-        this.updateWeakMap();
-        if (!this.initialized) {
+    update(context, viewContext) {
+        this.context = context;
+        this.viewContext = viewContext;
+        const type = this.getType();
+        if (type !== this.type) {
+            const newNativeElement = this.createStringNode(type);
+            this.nativeElement.replaceWith(newNativeElement);
+            this.nativeElement = newNativeElement;
+            this.type = type;
             return;
         }
-        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();
-            }
+        if (this.type === StringType.normalString) {
+            this.nativeElement.textContent = this.leaf.text;
         }
     }
-    getChildrenContext() {
-        return {
-            parent: this._context.element,
-            selection: this._context.selection,
-            decorations: this._context.decorations,
-            decorate: this._context.decorate,
-            readonly: this._context.readonly
-        };
+    getElementStringLength() {
+        return Node.string(this.context.parent).length;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: BaseElementComponent, isStandalone: true, viewQueries: [{ propertyName: "childrenOutletInstance", first: true, predicate: SlateChildrenOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseElementComponent, decorators: [{
-            type: Directive
-        }], propDecorators: { childrenOutletInstance: [{
-                type: ViewChild,
-                args: [SlateChildrenOutlet, { static: true }]
-            }] } });
+const createDefaultStringNode = (text) => {
+    const stringNode = document.createElement('span');
+    stringNode.textContent = text;
+    stringNode.setAttribute('data-slate-string', 'true');
+    stringNode.setAttribute('editable-text', '');
+    return stringNode;
+};
+const createEmptyOrVoidStringNode = () => {
+    const stringNode = document.createElement('span');
+    stringNode.setAttribute('data-slate-string', 'true');
+    stringNode.setAttribute('data-slate-zero-width', 'z');
+    stringNode.setAttribute('data-slate-length', '0');
+    const zeroWidthSpace = document.createTextNode('\uFEFF');
+    stringNode.appendChild(zeroWidthSpace);
+    stringNode.setAttribute('editable-text', '');
+    return stringNode;
+};
+const createCompatibleStringNode = (text) => {
+    const stringNode = document.createElement('span');
+    stringNode.setAttribute('data-slate-string', 'true');
+    stringNode.textContent = text;
+    stringNode.setAttribute('editable-text', '');
+    const zeroWidthSpan = document.createElement('span');
+    const zeroWidthSpace = document.createTextNode('\uFEFF');
+    zeroWidthSpan.setAttribute('data-slate-zero-width', '');
+    zeroWidthSpan.appendChild(zeroWidthSpace);
+    stringNode.appendChild(zeroWidthSpan);
+    return stringNode;
+};
+const createLineBreakEmptyStringDOM = (elementStringLength) => {
+    const stringNode = document.createElement('span');
+    stringNode.setAttribute('data-slate-zero-width', 'n');
+    stringNode.setAttribute('data-slate-length', `${elementStringLength}`);
+    const zeroWidthSpace = document.createTextNode(`\uFEFF`);
+    stringNode.appendChild(zeroWidthSpace);
+    const brNode = document.createElement('br');
+    stringNode.appendChild(brNode);
+    stringNode.setAttribute('editable-text', '');
+    return stringNode;
+};
 /**
- * base class for custom text component
+ * TODO: remove when bump slate
+ * copy from slate
+ * @param editor
+ * @param element
+ * @returns
  */
-class BaseTextComponent extends BaseComponent {
+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 DefaultLeafFlavour extends BaseLeafFlavour {
     constructor() {
         super(...arguments);
-        this.viewContainerRef = inject(ViewContainerRef);
-        this.getOutletParent = () => {
-            return this.elementRef.nativeElement;
-        };
-        this.getOutletElement = () => {
-            if (this.childrenOutletInstance) {
-                return this.childrenOutletInstance.getNativeElement();
-            }
-            return null;
-        };
+        this.stringRender = null;
     }
-    get text() {
+    render() {
+        const leafNode = createDefaultLeafNode();
+        this.stringRender = new SlateStringRender(this.context, this.viewContext);
+        const stringNode = this.stringRender.render();
+        leafNode.appendChild(stringNode);
+        this.nativeElement = leafNode;
+    }
+    rerender() {
+        this.stringRender?.update(this.context, this.viewContext);
+    }
+}
+const createDefaultLeafNode = () => {
+    const span = document.createElement('span');
+    span.setAttribute('data-slate-leaf', 'true');
+    return span;
+};
+
+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 { decoratedLeaves, contexts } = this.getLeaves(context);
+        this.decoratedLeaves = decoratedLeaves;
+        this.contexts = contexts;
+        this.decoratedLeaves.forEach((leaf, index) => {
+            const context = getContext$1(index, this.contexts);
+            const viewType = getViewType$1(context, this.viewContext);
+            const view = createEmbeddedViewOrComponentOrFlavour(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.viewContext.editor.injector.get(IterableDiffers);
+        this.differ = newDiffers.find(this.decoratedLeaves).create(trackBy$1(this.viewContext));
+        this.differ.diff(this.decoratedLeaves);
+    }
+    update(context) {
+        const { decoratedLeaves, contexts } = this.getLeaves(context);
+        const outletParent = this.getOutletParent();
+        const diffResult = this.differ.diff(decoratedLeaves);
+        if (diffResult) {
+            let firstRootNode = getRootNodes(this.views[0])[0];
+            const newContexts = [];
+            const newViewTypes = [];
+            const newViews = [];
+            diffResult.forEachItem(record => {
+                let context = getContext$1(record.currentIndex, contexts);
+                const viewType = getViewType$1(context, this.viewContext);
+                newViewTypes.push(viewType);
+                let view;
+                if (record.previousIndex === null) {
+                    view = createEmbeddedViewOrComponentOrFlavour(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 = createEmbeddedViewOrComponentOrFlavour(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.decoratedLeaves = decoratedLeaves;
+        }
+    }
+    getLeaves(context) {
+        const decoratedLeaves = Text$1.decorations(context.text, context.decorations);
+        const contexts = decoratedLeaves.map((decoratedLeaf, index) => {
+            return {
+                leaf: decoratedLeaf.leaf,
+                leafPosition: decoratedLeaf.position,
+                text: context.text,
+                parent: context.parent,
+                index,
+                isLast: context.isLast && index === decoratedLeaves.length - 1
+            };
+        });
+        return { decoratedLeaves, contexts };
+    }
+}
+function getContext$1(index, leafContexts) {
+    return leafContexts[index];
+}
+function getViewType$1(leafContext, viewContext) {
+    return (viewContext.renderLeaf && viewContext.renderLeaf(leafContext.leaf)) || DefaultLeafFlavour;
+}
+function trackBy$1(viewContext) {
+    return (index, node) => {
+        return index;
+    };
+}
+
+class BaseTextFlavour extends BaseFlavour {
+    constructor() {
+        super(...arguments);
+        this.getOutletParent = () => {
+            return this.nativeElement;
+        };
+        this.getOutletElement = () => {
+            return this.nativeElement.querySelector('.children-outlet');
+        };
+    }
+    get text() {
         return this._context && this._context.text;
     }
-    ngOnInit() {
+    onInit() {
+        this.render();
+        this.updateWeakMap();
         this.initialized = true;
         this.leavesRender = new LeavesRender(this.viewContext, this.viewContainerRef, this.getOutletParent, this.getOutletElement);
         this.leavesRender.initialize(this.context);
@@ -2352,390 +2187,337 @@ class BaseTextComponent extends BaseComponent {
         ELEMENT_TO_NODE.set(this.nativeElement, this.text);
         NODE_TO_ELEMENT.set(this.text, this.nativeElement);
     }
-    ngOnDestroy() {
+    onDestroy() {
         if (NODE_TO_ELEMENT.get(this.text) === this.nativeElement) {
             NODE_TO_ELEMENT.delete(this.text);
         }
         ELEMENT_TO_NODE.delete(this.nativeElement);
+        this.nativeElement?.remove();
     }
     onContextChange() {
-        this.updateWeakMap();
         if (!this.initialized) {
             return;
         }
+        this.rerender();
+        this.updateWeakMap();
         this.leavesRender.update(this.context);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: BaseTextComponent, isStandalone: true, viewQueries: [{ propertyName: "childrenOutletInstance", first: true, predicate: SlateChildrenOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseTextComponent, decorators: [{
-            type: Directive
-        }], propDecorators: { childrenOutletInstance: [{
-                type: ViewChild,
-                args: [SlateChildrenOutlet, { static: true }]
-            }] } });
 
-class SlateVoidText extends BaseTextComponent {
-    ngOnInit() {
-        super.ngOnInit();
-    }
-    ngOnChanges() {
-        if (!this.initialized) {
-            return;
-        }
+class DefaultTextFlavour extends BaseTextFlavour {
+    render() {
+        const { nativeElement } = createText(this.text.text);
+        this.nativeElement = nativeElement;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SlateVoidText, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: "19.2.14", 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'
-                    }
-                }]
-        }] });
-
-class SlateDefaultText extends BaseTextComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SlateDefaultText, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SlateDefaultText, isStandalone: true, selector: "span[slateDefaultText]", host: { attributes: { "data-slate-node": "text" } }, usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    rerender() { }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SlateDefaultText, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'span[slateDefaultText]',
-                    template: ``,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        'data-slate-node': 'text'
-                    }
-                }]
-        }] });
-
-class SlateDefaultElement extends BaseElementComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SlateDefaultElement, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SlateDefaultElement, isStandalone: true, selector: "div[slateDefaultElement]", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+class VoidTextFlavour extends BaseTextFlavour {
+    render() {
+        const { nativeElement } = createText(this.text.text);
+        this.nativeElement = nativeElement;
+        this.nativeElement.setAttribute('data-slate-spacer', 'true');
+        this.nativeElement.classList.add('slate-spacer');
+    }
+    rerender() { }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SlateDefaultElement, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'div[slateDefaultElement]',
-                    template: ``,
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }] });
+const createText = (text) => {
+    const nativeElement = document.createElement('span');
+    nativeElement.setAttribute('data-slate-node', 'text');
+    return { nativeElement };
+};
 
-/**
- * Dynamically create/update components or templates
- * Provide rootNodes for the view container
- * If the dynamically created component uses onpush mode, then it must call markForCheck when setting the context
- */
-class ViewContainerItem {
-    constructor() {
+class ListRender {
+    constructor(viewContext, viewContainerRef, getOutletParent, getOutletElement) {
+        this.viewContext = viewContext;
+        this.viewContainerRef = viewContainerRef;
+        this.getOutletParent = getOutletParent;
+        this.getOutletElement = getOutletElement;
+        this.views = [];
+        this.blockCards = [];
+        this.contexts = [];
+        this.viewTypes = [];
+        this.differ = null;
         this.initialized = false;
-        this.viewContainerRef = inject(ViewContainerRef);
-    }
-    get rootNodes() {
-        return this.getRootNodes();
-    }
-    getRootNodes() {
-        if (this.embeddedViewRef) {
-            return this.embeddedViewRef.rootNodes.filter(rootNode => isDOMElement(rootNode));
-        }
-        if (this.componentRef) {
-            return [this.componentRef.instance.nativeElement];
-        }
-        return [];
-    }
-    destroyView() {
-        if (this.embeddedViewRef) {
-            this.embeddedViewRef.destroy();
-            this.embeddedViewRef = null;
-        }
-        if (this.componentRef) {
-            this.componentRef.destroy();
-            this.componentRef = null;
-        }
     }
-    createView() {
+    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;
-        }
-    }
-    updateView() {
-        const viewType = this.getViewType();
-        const context = this.getContext();
-        if (this.viewType === viewType) {
-            if (this.componentRef) {
-                if (this.memoizedContext(this.componentRef.instance.context, context)) {
-                    return;
-                }
-                this.componentRef.instance.context = context;
-            }
-            if (this.embeddedViewRef) {
-                if (this.memoizedContext(this.embeddedViewContext.context, context)) {
-                    return;
-                }
-                this.embeddedViewContext.context = context;
-            }
-        }
-        else {
-            this.viewType = viewType;
-            const firstRootNode = this.rootNodes[0];
-            if (isTemplateRef(this.viewType)) {
-                this.embeddedViewContext = {
-                    context,
-                    viewContext: this.viewContext
-                };
-                const embeddedViewRef = this.viewContainerRef.createEmbeddedView(this.viewType, this.embeddedViewContext);
-                firstRootNode.replaceWith(...embeddedViewRef.rootNodes.filter(rootNode => isDOMElement(rootNode)));
-                this.destroyView();
-                this.embeddedViewRef = embeddedViewRef;
-            }
-            if (isComponentType(this.viewType)) {
-                const componentRef = this.viewContainerRef.createComponent(this.viewType);
-                componentRef.instance.viewContext = this.viewContext;
-                componentRef.instance.context = context;
-                firstRootNode.replaceWith(componentRef.instance.nativeElement);
-                this.destroyView();
-                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(index, descendant, parentPath, childrenContext, this.viewContext);
+            const viewType = getViewType(descendant, parent, this.viewContext);
+            const view = createEmbeddedViewOrComponentOrFlavour(viewType, context, this.viewContext, this.viewContainerRef);
+            const blockCard = createBlockCard(descendant, view, this.viewContainerRef, this.viewContext);
+            this.views.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.viewContext.editor.injector.get(IterableDiffers);
+        this.differ = newDiffers.find(children).create(trackBy(this.viewContext));
+        this.differ.diff(children);
+        if (parent === this.viewContext.editor) {
+            executeAfterViewInit(this.viewContext.editor);
         }
     }
-    appendBlockCardElement() {
-        if (this.blockCardComponentRef) {
-            this.blockCardComponentRef.instance.append();
+    update(children, parent, childrenContext) {
+        if (!this.initialized || this.children.length === 0) {
+            this.initialize(children, parent, childrenContext);
+            return;
         }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ViewContainerItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: ViewContainerItem, isStandalone: true, inputs: { viewContext: "viewContext" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ViewContainerItem, decorators: [{
-            type: Directive
-        }], propDecorators: { viewContext: [{
-                type: Input
-            }] } });
-
-class SlateDefaultString extends BaseComponent {
-    beforeContextChange(value) {
-        if (this.context) {
-            if (this.context.type === 'lineBreakEmptyString') {
-                if (value.type === 'string') {
-                    this.removeLineBreakEmptyStringDOM();
+        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(record.currentIndex, record.item, parentPath, childrenContext, this.viewContext);
+                const viewType = getViewType(record.item, parent, this.viewContext);
+                newViewTypes.push(viewType);
+                let view;
+                let blockCard;
+                if (record.previousIndex === null) {
+                    view = createEmbeddedViewOrComponentOrFlavour(viewType, context, this.viewContext, this.viewContainerRef);
+                    blockCard = createBlockCard(record.item, view, this.viewContainerRef, this.viewContext);
+                    newContexts.push(context);
+                    newViews.push(view);
+                    newBlockCards.push(blockCard);
+                    mountOnItemChange(record.currentIndex, record.item, newViews, newBlockCards, outletParent, firstRootNode, this.viewContext);
                 }
                 else {
-                    this.textNode?.remove();
-                    this.brNode?.remove();
-                }
-            }
-            if (this.context.type === 'string') {
-                if (value.type === 'lineBreakEmptyString') {
-                    this.removeStringDOM();
-                }
-            }
-        }
-    }
-    onContextChange() {
-        if (this.context.type === 'string') {
-            this.createStringDOM();
-        }
-        else if (this.context.type === 'lineBreakEmptyString') {
-            this.createLineBreakEmptyStringDOM();
+                    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 = createEmbeddedViewOrComponentOrFlavour(viewType, context, this.viewContext, this.viewContainerRef);
+                        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);
+                }
+            });
+            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) {
+                executeAfterViewInit(this.viewContext.editor);
+            }
         }
-    }
-    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;
+        else {
+            const newContexts = [];
+            this.children.forEach((child, index) => {
+                NODE_TO_INDEX.set(child, index);
+                NODE_TO_PARENT.set(child, parent);
+                let context = getContext(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;
         }
     }
-    removeStringDOM() {
-        this.nativeElement.removeAttribute('data-slate-string');
-        this.nativeElement.textContent = '';
-    }
-    ngOnInit() {
-        this.nativeElement.setAttribute('editable-text', '');
+    destroy() {
+        this.children.forEach((element, index) => {
+            if (this.views[index]) {
+                this.views[index].destroy();
+            }
+            if (this.blockCards[index]) {
+                this.blockCards[index].destroy();
+            }
+        });
+        this.views = [];
+        this.blockCards = [];
+        this.contexts = [];
+        this.viewTypes = [];
+        this.initialized = false;
+        this.differ = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SlateDefaultString, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: "19.2.14", ngImport: i0, type: SlateDefaultString, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'span[slateDefaultString]',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
-                }]
-        }] });
-
-class SlateString extends ViewContainerItem {
-    constructor() {
-        super(...arguments);
-        this.elementRef = inject(ElementRef);
-        this.viewContainerRef = inject(ViewContainerRef);
-    }
-    ngOnInit() {
-        this.createView();
-    }
-    ngOnChanges() {
-        if (!this.initialized) {
-            return;
+function getContext(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;
         }
-        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() {
-        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));
-    }
-    // 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 (isVoid) {
+            elementContext.attributes['data-slate-void'] = true;
         }
-        if (this.isLineBreakEmptyString()) {
-            return SlateDefaultString;
+        // add contentEditable for block element only to avoid chinese input be broken
+        if (isVoid && !isInline) {
+            elementContext.contentEditable = false;
         }
-        if (this.isEmptyText()) {
-            return this.viewContext.templateComponent.emptyTextTemplate;
+        return elementContext;
+    }
+    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;
+    }
+}
+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 };
         }
-        if (this.isCompatibleString()) {
-            return this.viewContext.templateComponent.compatibleStringTemplate;
+        else {
+            return { selection: null, decorations: ds };
         }
-        return SlateDefaultString;
     }
-    getType() {
-        if (this.isLineBreakEmptyString()) {
-            return 'lineBreakEmptyString';
-        }
-        return 'string';
+    catch (error) {
+        viewContext.editor.onError({
+            code: SlateErrorCode.GetStartPointError,
+            nativeError: error
+        });
+        return { selection: null, decorations: [] };
     }
-    getContext() {
-        const stringType = this.getType();
-        return {
-            text: this.context.leaf.text,
-            elementStringLength: Node.string(this.context.parent).length,
-            type: stringType
-        };
+}
+function getViewType(item, parent, viewContext) {
+    if (Element.isElement(item)) {
+        return (viewContext.renderElement && viewContext.renderElement(item)) || DefaultElementFlavour;
     }
-    memoizedContext(prev, next) {
-        return false;
+    else {
+        const isVoid = viewContext.editor.isVoid(parent);
+        return isVoid ? VoidTextFlavour : (viewContext.renderText && viewContext.renderText(item)) || DefaultTextFlavour;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SlateString, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: "19.2.14", ngImport: i0, type: SlateString, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'span[slateString]',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
-                }]
-        }], 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 SlateDefaultLeaf extends BaseLeafComponent {
-    onContextChange() {
-        super.onContextChange();
-        this.renderPlaceholder();
+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;
     }
-    ngOnDestroy() {
-        // Because the placeholder span is not in the current component, it is destroyed along with the current component
-        this.destroyPlaceholder();
+    else {
+        return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SlateDefaultLeaf, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: "19.2.14", 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'
-                    },
-                    imports: [SlateString]
-                }]
-        }] });
-
-const SLATE_DEFAULT_LEAF_COMPONENT_TOKEN = new InjectionToken('slate-default-leaf-token');
+function trackBy(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));
+}
+function addAfterViewInitQueue(editor, afterViewInitCallback) {
+    const queue = getAfterViewInitQueue(editor);
+    queue.push(afterViewInitCallback);
+    EDITOR_TO_AFTER_VIEW_INIT_QUEUE.set(editor, queue);
+}
+function getAfterViewInitQueue(editor) {
+    return EDITOR_TO_AFTER_VIEW_INIT_QUEUE.get(editor) || [];
+}
+function clearAfterViewInitQueue(editor) {
+    EDITOR_TO_AFTER_VIEW_INIT_QUEUE.set(editor, []);
+}
+function executeAfterViewInit(editor) {
+    const queue = getAfterViewInitQueue(editor);
+    queue.forEach(callback => callback());
+    clearAfterViewInitQueue(editor);
+}
 
 // not correctly clipboardData on beforeinput
 const forceOnDOMPaste = IS_SAFARI;
@@ -2743,16 +2525,12 @@ class SlateEditable {
     get hasBeforeInputSupport() {
         return HAS_BEFORE_INPUT_SUPPORT;
     }
-    constructor(elementRef, renderer2, cdr, ngZone, injector, defaultElement, defaultText, defaultVoidText, defaultLeaf) {
+    constructor(elementRef, renderer2, cdr, ngZone, injector) {
         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;
@@ -2774,6 +2552,7 @@ class SlateEditable {
         this.dataSlateEditor = true;
         this.dataSlateNode = 'value';
         this.dataGramm = false;
+        //#endregion
         this.viewContainerRef = inject(ViewContainerRef);
         this.getOutletParent = () => {
             return this.elementRef.nativeElement;
@@ -2798,8 +2577,6 @@ class SlateEditable {
         });
         this.initializeViewContext();
         this.initializeContext();
-        // remove unused DOM, just keep templateComponent instance
-        this.templateElementRef.nativeElement.remove();
         // add browser class
         let browserClass = IS_FIREFOX ? 'firefox' : IS_SAFARI ? 'safari' : '';
         browserClass && this.elementRef.nativeElement.classList.add(browserClass);
@@ -2835,7 +2612,9 @@ class SlateEditable {
             this.editor.children = value;
             this.initializeContext();
             if (!this.listRender.initialized) {
+                console.time('initialize list render');
                 this.listRender.initialize(this.editor.children, this.editor, this.context);
+                console.timeEnd('initialize list render');
             }
             else {
                 this.listRender.update(this.editor.children, this.editor, this.context);
@@ -2970,7 +2749,7 @@ class SlateEditable {
         if (this.isComposing) {
             // Composition input text be not rendered when user composition input with selection is expanded
             // At this time, the following matching conditions are met, assign isComposing to false, and the status is wrong
-            // this time condition is true and isComposiing is assigned false
+            // this time condition is true and isComposing is assigned false
             // Therefore, need to wait for the composition input text to be rendered before performing condition matching
             setTimeout(() => {
                 const textNode = Node.get(this.editor, this.editor.selection.anchor.path);
@@ -3035,12 +2814,7 @@ class SlateEditable {
             renderLeaf: this.renderLeaf,
             renderText: this.renderText,
             trackBy: this.trackBy,
-            isStrictDecorate: this.isStrictDecorate,
-            templateComponent: this.templateComponent,
-            defaultElement: this.defaultElement,
-            defaultText: this.defaultText,
-            defaultVoidText: this.defaultVoidText,
-            defaultLeaf: this.defaultLeaf
+            isStrictDecorate: this.isStrictDecorate
         };
     }
     composePlaceholderDecorate(editor) {
@@ -3765,30 +3539,14 @@ class SlateEditable {
         this.destroy$.complete();
         EDITOR_TO_ON_CHANGE.delete(this.editor);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", 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: "19.2.14", 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-string-template #templateComponent></slate-string-template>\n", dependencies: [{ kind: "component", type: SlateStringTemplate, selector: "slate-string-template" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesOnChanges: true, ngImport: i0, template: "", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SlateEditable, decorators: [{
             type: Component,
@@ -3804,37 +3562,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             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
                         }
-                    ], imports: [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: [{
+                    ], imports: [], template: "" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Injector }], propDecorators: { editor: [{
                 type: Input
             }], renderElement: [{
                 type: Input
@@ -3901,12 +3631,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             }], dataGramm: [{
                 type: HostBinding,
                 args: ['attr.data-gramm']
-            }], templateComponent: [{
-                type: ViewChild,
-                args: ['templateComponent', { static: true }]
-            }], templateElementRef: [{
-                type: ViewChild,
-                args: ['templateComponent', { static: true, read: ElementRef }]
             }] } });
 const defaultScrollSelectionIntoView = (editor, domRange) => {
     // This was affecting the selection of multiple blocks and dragging behavior,
@@ -3924,173 +3648,385 @@ const defaultScrollSelectionIntoView = (editor, domRange) => {
                 return;
             }
         }
-        leafEl.getBoundingClientRect = domRange.getBoundingClientRect.bind(domRange);
-        scrollIntoView(leafEl, {
-            scrollMode: 'if-needed'
+        leafEl.getBoundingClientRect = domRange.getBoundingClientRect.bind(domRange);
+        scrollIntoView(leafEl, {
+            scrollMode: 'if-needed'
+        });
+        delete leafEl.getBoundingClientRect;
+    }
+};
+/**
+ * Check if the target is inside void and in the editor.
+ */
+const isTargetInsideVoid = (editor, target) => {
+    let slateNode = null;
+    try {
+        slateNode = AngularEditor.hasTarget(editor, target) && AngularEditor.toSlateNode(editor, target);
+    }
+    catch (error) { }
+    return slateNode && Element.isElement(slateNode) && Editor.isVoid(editor, slateNode);
+};
+const hasStringTarget = (domSelection) => {
+    return ((domSelection.anchorNode.parentElement.hasAttribute('data-slate-string') ||
+        domSelection.anchorNode.parentElement.hasAttribute('data-slate-zero-width')) &&
+        (domSelection.focusNode.parentElement.hasAttribute('data-slate-string') ||
+            domSelection.focusNode.parentElement.hasAttribute('data-slate-zero-width')));
+};
+/**
+ * remove default insert from composition
+ * @param text
+ */
+const preventInsertFromComposition = (event, editor) => {
+    const types = ['compositionend', 'insertFromComposition'];
+    if (!types.includes(event.type)) {
+        return;
+    }
+    const insertText = event.data;
+    const window = AngularEditor.getWindow(editor);
+    const domSelection = window.getSelection();
+    // ensure text node insert composition input text
+    if (insertText && domSelection.anchorNode instanceof Text && domSelection.anchorNode.textContent.endsWith(insertText)) {
+        const textNode = domSelection.anchorNode;
+        textNode.splitText(textNode.length - insertText.length).remove();
+    }
+};
+
+class SlateChildrenOutlet {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    getNativeElement() {
+        return this.elementRef.nativeElement;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SlateChildrenOutlet, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SlateChildrenOutlet, isStandalone: true, selector: "slate-children-outlet", ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SlateChildrenOutlet, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'slate-children-outlet',
+                    template: ``,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
+class SlateString {
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SlateString, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SlateString, isStandalone: true, selector: "span[slateString]", inputs: { context: "context", viewContext: "viewContext" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SlateString, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'span[slateString]',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
+                }]
+        }], propDecorators: { context: [{
+                type: Input
+            }], viewContext: [{
+                type: Input
+            }] } });
+
+class SlateModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SlateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: SlateModule, imports: [CommonModule, SlateEditable, SlateBlockCard, SlateChildrenOutlet, SlateString], exports: [SlateEditable, SlateChildrenOutlet, SlateString] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SlateModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SlateModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, SlateEditable, SlateBlockCard, SlateChildrenOutlet, SlateString],
+                    exports: [SlateEditable, SlateChildrenOutlet, SlateString],
+                    providers: []
+                }]
+        }] });
+
+/**
+ * base class for custom element component or text component
+ */
+class BaseComponent {
+    constructor() {
+        this.initialized = false;
+        this.elementRef = inject(ElementRef);
+        this.cdr = inject(ChangeDetectorRef);
+    }
+    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;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: BaseComponent, isStandalone: true, inputs: { context: "context", viewContext: "viewContext" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { context: [{
+                type: Input
+            }], viewContext: [{
+                type: Input
+            }] } });
+/**
+ * base class for custom element component
+ */
+class BaseElementComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        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;
+    }
+    get selection() {
+        return this._context && this._context.selection;
+    }
+    get decorations() {
+        return this._context && this._context.decorations;
+    }
+    get children() {
+        return this._context && this._context.element.children;
+    }
+    get isCollapsed() {
+        return this.selection && Range.isCollapsed(this.selection);
+    }
+    get isCollapsedAndNonReadonly() {
+        return this.selection && Range.isCollapsed(this.selection) && !this.readonly;
+    }
+    get readonly() {
+        return this._context && this._context.readonly;
+    }
+    ngOnInit() {
+        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);
+        }
+        addAfterViewInitQueue(this.editor, () => {
+            this.afterViewInit();
         });
-        delete leafEl.getBoundingClientRect;
     }
-};
-/**
- * Check if the target is inside void and in the editor.
- */
-const isTargetInsideVoid = (editor, target) => {
-    let slateNode = null;
-    try {
-        slateNode = AngularEditor.hasTarget(editor, target) && AngularEditor.toSlateNode(editor, target);
+    afterViewInit() {
+        if (this._context.contentEditable !== undefined) {
+            this.nativeElement.setAttribute('contenteditable', this._context.contentEditable + '');
+        }
     }
-    catch (error) { }
-    return slateNode && Element.isElement(slateNode) && Editor.isVoid(editor, slateNode);
-};
-const hasStringTarget = (domSelection) => {
-    return ((domSelection.anchorNode.parentElement.hasAttribute('data-slate-string') ||
-        domSelection.anchorNode.parentElement.hasAttribute('data-slate-zero-width')) &&
-        (domSelection.focusNode.parentElement.hasAttribute('data-slate-string') ||
-            domSelection.focusNode.parentElement.hasAttribute('data-slate-zero-width')));
-};
-/**
- * remove default insert from composition
- * @param text
- */
-const preventInsertFromComposition = (event, editor) => {
-    const types = ['compositionend', 'insertFromComposition'];
-    if (!types.includes(event.type)) {
-        return;
+    updateWeakMap() {
+        NODE_TO_ELEMENT.set(this.element, this.nativeElement);
+        ELEMENT_TO_NODE.set(this.nativeElement, this.element);
+        ELEMENT_TO_COMPONENT.set(this.element, this);
     }
-    const insertText = event.data;
-    const window = AngularEditor.getWindow(editor);
-    const domSelection = window.getSelection();
-    // ensure text node insert composition input text
-    if (insertText && domSelection.anchorNode instanceof Text && domSelection.anchorNode.textContent.endsWith(insertText)) {
-        const textNode = domSelection.anchorNode;
-        textNode.splitText(textNode.length - insertText.length).remove();
+    ngOnDestroy() {
+        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);
+        }
     }
-};
-
-class SlateElement extends BaseElementComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SlateElement, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SlateElement, isStandalone: true, selector: "[slateElement]", usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    onContextChange() {
+        this.childrenContext = this.getChildrenContext();
+        this.updateWeakMap();
+        if (!this.initialized) {
+            return;
+        }
+        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 {
+            parent: this._context.element,
+            selection: this._context.selection,
+            decorations: this._context.decorations,
+            decorate: this._context.decorate,
+            readonly: this._context.readonly
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: BaseElementComponent, isStandalone: true, viewQueries: [{ propertyName: "childrenOutletInstance", first: true, predicate: SlateChildrenOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SlateElement, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[slateElement]',
-                    template: '<ng-content></ng-content>',
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }] });
-
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseElementComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { childrenOutletInstance: [{
+                type: ViewChild,
+                args: [SlateChildrenOutlet, { static: true }]
+            }] } });
 /**
- * @deprecated
- * the special container for angular template
- * Add the rootNodes of each child component to the parentElement
- * Remove useless DOM elements, eg: comment...
+ * base class for custom text component
  */
-class ViewContainer {
-    constructor(elementRef, differs) {
-        this.elementRef = elementRef;
-        this.differs = differs;
+class BaseTextComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        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.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);
+        NODE_TO_ELEMENT.set(this.text, this.nativeElement);
+    }
+    ngOnDestroy() {
+        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.leavesRender.update(this.context);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", 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: "19.2.14", type: ViewContainer, isStandalone: true, inputs: { viewContext: "viewContext" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: BaseTextComponent, isStandalone: true, viewQueries: [{ propertyName: "childrenOutletInstance", first: true, predicate: SlateChildrenOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ViewContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseTextComponent, 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: "19.2.14", ngImport: i0, type: SlateChildren, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: "19.2.14", 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
+        }], propDecorators: { childrenOutletInstance: [{
+                type: ViewChild,
+                args: [SlateChildrenOutlet, { static: true }]
             }] } });
-
-class SlateLeaves extends ViewContainer {
+/**
+ * base class for custom leaf component
+ */
+class BaseLeafComponent extends BaseComponent {
     constructor() {
         super(...arguments);
-        this.initialized = false;
+        this.stringRender = null;
+        this.isSlateLeaf = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SlateLeaves, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: "19.2.14", ngImport: i0, type: SlateLeaves, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'slate-leaves',
-                    template: ``,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: []
-                }]
-        }], propDecorators: { context: [{
-                type: Input
-            }] } });
-
-class SlateModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SlateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: SlateModule, imports: [CommonModule,
-            SlateEditable,
-            SlateDefaultElement,
-            SlateElement,
-            SlateVoidText,
-            SlateDefaultText,
-            SlateString,
-            SlateStringTemplate,
-            SlateChildren,
-            SlateBlockCard,
-            SlateLeaves,
-            SlateDefaultLeaf,
-            SlateDefaultString,
-            SlateChildrenOutlet], exports: [SlateEditable, SlateChildren, SlateChildrenOutlet, SlateElement, SlateLeaves, SlateString, SlateDefaultString] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SlateModule, providers: [
-            {
-                provide: SLATE_DEFAULT_ELEMENT_COMPONENT_TOKEN,
-                useValue: SlateDefaultElement
+    get text() {
+        return this.context && this.context.text;
+    }
+    get leaf() {
+        return this.context && this.context.leaf;
+    }
+    ngOnInit() {
+        this.initialized = true;
+    }
+    onContextChange() {
+        if (!this.initialized) {
+            this.stringRender = new SlateStringRender(this.context, this.viewContext);
+            const stringNode = this.stringRender.render();
+            this.nativeElement.appendChild(stringNode);
+        }
+        else {
+            this.stringRender?.update(this.context, this.viewContext);
+        }
+        if (!this.initialized) {
+            return;
+        }
+    }
+    renderPlaceholder() {
+        // issue-1: IME input was interrupted
+        // issue-2: IME input focus jumping
+        // Issue occurs when the span node of the placeholder is before the slateString span node
+        if (this.context.leaf['placeholder']) {
+            if (!this.placeholderElement) {
+                this.createPlaceholder();
+            }
+            this.updatePlaceholder();
+        }
+        else {
+            this.destroyPlaceholder();
+        }
+    }
+    createPlaceholder() {
+        const placeholderElement = document.createElement('span');
+        placeholderElement.innerText = this.context.leaf['placeholder'];
+        placeholderElement.contentEditable = 'false';
+        placeholderElement.setAttribute('data-slate-placeholder', 'true');
+        this.placeholderElement = placeholderElement;
+        this.nativeElement.classList.add('leaf-with-placeholder');
+        this.nativeElement.appendChild(placeholderElement);
+        setTimeout(() => {
+            const editorElement = this.nativeElement.closest('.the-editor-typo');
+            const editorContentHeight = getContentHeight(editorElement);
+            if (editorContentHeight > 0) {
+                // Not supported webkitLineClamp exceeds height hiding
+                placeholderElement.style.maxHeight = `${editorContentHeight}px`;
             }
-        ], imports: [CommonModule] }); }
+            const lineClamp = Math.floor(editorContentHeight / this.nativeElement.offsetHeight) || 0;
+            placeholderElement.style.webkitLineClamp = `${Math.max(lineClamp, 1)}`;
+        });
+    }
+    updatePlaceholder() {
+        if (this.placeholderElement.innerText !== this.context.leaf['placeholder']) {
+            this.placeholderElement.innerText = this.context.leaf['placeholder'];
+        }
+    }
+    destroyPlaceholder() {
+        if (this.placeholderElement) {
+            this.placeholderElement.remove();
+            this.placeholderElement = null;
+            this.nativeElement.classList.remove('leaf-with-placeholder');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseLeafComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: BaseLeafComponent, isStandalone: true, host: { properties: { "attr.data-slate-leaf": "this.isSlateLeaf" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SlateModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        SlateEditable,
-                        SlateDefaultElement,
-                        SlateElement,
-                        SlateVoidText,
-                        SlateDefaultText,
-                        SlateString,
-                        SlateStringTemplate,
-                        SlateChildren,
-                        SlateBlockCard,
-                        SlateLeaves,
-                        SlateDefaultLeaf,
-                        SlateDefaultString,
-                        SlateChildrenOutlet
-                    ],
-                    exports: [SlateEditable, SlateChildren, SlateChildrenOutlet, SlateElement, SlateLeaves, SlateString, SlateDefaultString],
-                    providers: [
-                        {
-                            provide: SLATE_DEFAULT_ELEMENT_COMPONENT_TOKEN,
-                            useValue: SlateDefaultElement
-                        }
-                    ]
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseLeafComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { isSlateLeaf: [{
+                type: HostBinding,
+                args: ['attr.data-slate-leaf']
+            }] } });
 
 /*
  * Public API Surface of slate-angular
@@ -4100,5 +4036,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AngularEditor, BaseComponent, BaseElementComponent, BaseLeafComponent, BaseTextComponent, EDITOR_TO_AFTER_VIEW_INIT_QUEUE, ELEMENT_TO_COMPONENT, FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, HAS_BEFORE_INPUT_SUPPORT, IS_ANDROID, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_IOS, IS_QQBROWSER, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, PLACEHOLDER_SYMBOL, SlateChildren, SlateChildrenOutlet, SlateDefaultString, SlateEditable, SlateElement, SlateErrorCode, SlateFragmentAttributeKey, SlateLeaves, SlateModule, SlateString, blobAsString, buildHTMLText, check, completeTable, createClipboardData, createThrottleRAF, defaultScrollSelectionIntoView, fallbackCopyText, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getSelection, getSlateFragmentAttribute, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDecoratorRangeListEqual, isEmpty, isInvalidTable, isTemplateRef, isValid, normalize, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setNavigatorClipboard, shallowCompare, stripHtml, withAngular };
+export { AngularEditor, BaseComponent, BaseElementComponent, BaseElementFlavour, BaseFlavour, BaseLeafComponent, BaseLeafFlavour, BaseTextComponent, BaseTextFlavour, DefaultTextFlavour, EDITOR_TO_AFTER_VIEW_INIT_QUEUE, ELEMENT_TO_COMPONENT, FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, FlavourRef, HAS_BEFORE_INPUT_SUPPORT, IS_ANDROID, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_IOS, IS_QQBROWSER, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, PLACEHOLDER_SYMBOL, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, SlateString, VoidTextFlavour, blobAsString, buildHTMLText, check, completeTable, createClipboardData, createText, createThrottleRAF, defaultScrollSelectionIntoView, fallbackCopyText, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getSelection, getSlateFragmentAttribute, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isTemplateRef, isValid, normalize, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setNavigatorClipboard, shallowCompare, stripHtml, withAngular };
 //# sourceMappingURL=slate-angular.mjs.map