slate-angular 18.0.0 → 18.0.1

package/fesm2022/slate-angular.mjs

@@ -1,7 +1,7 @@
 import { Editor, Range, Element, Transforms, Text as Text$1, Path, Node } from 'slate';
 import { isKeyHotkey } from 'is-hotkey';
 import * as i0 from '@angular/core';
-import { TemplateRef, Component, ChangeDetectionStrategy, ViewChild, Directive, Input, InjectionToken, ComponentRef, IterableDiffers, HostBinding, inject, ViewContainerRef, forwardRef, ElementRef, Inject, NgModule } from '@angular/core';
+import { TemplateRef, Component, ChangeDetectionStrategy, ViewChild, Directive, Input, InjectionToken, ComponentRef, IterableDiffers, inject, ElementRef, ChangeDetectorRef, HostBinding, ViewContainerRef, forwardRef, Inject, NgModule } from '@angular/core';
 import { direction } from 'direction';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { Subject } from 'rxjs';
@@ -1867,10 +1867,10 @@ var SlateErrorCode;
 })(SlateErrorCode || (SlateErrorCode = {}));
 
 class SlateStringTemplate {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateStringTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SlateStringTemplate, isStandalone: true, selector: "slate-string-template", viewQueries: [{ propertyName: "compatibleStringTemplate", first: true, predicate: ["compatibleStringTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "voidStringTemplate", first: true, predicate: ["voidStringTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "emptyTextTemplate", first: true, predicate: ["emptyTextTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #compatibleStringTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n  <!-- Compatible with Chinese input in Chrome with \\n -->\n  <span editable-text data-slate-string=\"true\"\n    >{{ context.text }}<span data-slate-zero-width>{{ '\\uFEFF' }}</span></span\n  >\n</ng-template>\n<ng-template #voidStringTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n  <span editable-text data-slate-zero-width=\"z\" attr.data-slate-length=\"{{ context.elementStringLength }}\">{{ '\\uFEFF' }}</span>\n</ng-template>\n<ng-template #emptyTextTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n  <span editable-text data-slate-zero-width=\"z\" data-slate-length=\"0\">{{ '\\uFEFF' }}</span>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SlateStringTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", 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: "17.2.4", ngImport: i0, type: SlateStringTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", 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: [{
@@ -1927,20 +1927,20 @@ class ViewContainer {
         this.elementRef = elementRef;
         this.differs = differs;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ViewContainer, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: ViewContainer, inputs: { viewContext: "viewContext" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", 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: "18.2.0", type: ViewContainer, inputs: { viewContext: "viewContext" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ViewContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ViewContainer, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.IterableDiffers }], propDecorators: { viewContext: [{
                 type: Input
             }] } });
 
 class SlateChildren extends ViewContainer {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateChildren, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SlateChildren, isStandalone: true, selector: "slate-children", inputs: { children: "children", context: "context", viewContext: "viewContext" }, usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SlateChildren, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: SlateChildren, isStandalone: true, selector: "slate-children", inputs: { children: "children", context: "context", viewContext: "viewContext" }, usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateChildren, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SlateChildren, decorators: [{
             type: Component,
             args: [{
                     selector: 'slate-children',
@@ -1961,6 +1961,26 @@ const SLATE_DEFAULT_ELEMENT_COMPONENT_TOKEN = new InjectionToken('slate-default-
 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 {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    getNativeElement() {
+        return this.elementRef.nativeElement;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SlateChildrenOutlet, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: SlateChildrenOutlet, isStandalone: true, selector: "slate-children-outlet", ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SlateChildrenOutlet, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'slate-children-outlet',
+                    template: ``,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
 function hasBeforeContextChange(value) {
     if (value.beforeContextChange) {
         return true;
@@ -1974,37 +1994,6 @@ function hasAfterContextChange(value) {
     return false;
 }
 
-class SlateBlockCard {
-    get nativeElement() {
-        return this.elementRef.nativeElement;
-    }
-    get centerContainerElement() {
-        return this.centerContianer.nativeElement;
-    }
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
-    ngOnInit() {
-        this.nativeElement.classList.add(`slate-block-card`);
-    }
-    append() {
-        this.centerRootNodes.forEach(rootNode => !this.centerContainerElement.contains(rootNode) && this.centerContainerElement.appendChild(rootNode));
-    }
-    initializeCenter(rootNodes) {
-        this.centerRootNodes = rootNodes;
-        this.append();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateBlockCard, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SlateBlockCard, isStandalone: true, selector: "slate-block-card, [slateBlockCard]", viewQueries: [{ propertyName: "centerContianer", first: true, predicate: ["centerContianer"], descendants: true, static: true }], ngImport: i0, template: "<span card-target=\"card-left\" class=\"card-left\">{{ '\\uFEFF' }}</span>\n<div card-target=\"card-center\" #centerContianer></div>\n<span card-target=\"card-right\" class=\"card-right\">{{ '\\uFEFF' }}</span>\n" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateBlockCard, decorators: [{
-            type: Component,
-            args: [{ selector: 'slate-block-card, [slateBlockCard]', standalone: true, template: "<span card-target=\"card-left\" class=\"card-left\">{{ '\\uFEFF' }}</span>\n<div card-target=\"card-center\" #centerContianer></div>\n<span card-target=\"card-right\" class=\"card-right\">{{ '\\uFEFF' }}</span>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { centerContianer: [{
-                type: ViewChild,
-                args: ['centerContianer', { static: true }]
-            }] } });
-
 function createEmbeddedViewOrComponent(viewType, context, viewContext, viewContainerRef) {
     if (isTemplateRef(viewType)) {
         const embeddedViewContext = {
@@ -2113,6 +2102,141 @@ 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 = [];
+    }
+    initialize(context) {
+        const { leaves, contexts } = this.getLeaves(context);
+        this.leaves = leaves;
+        this.contexts = contexts;
+        this.leaves.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.leaves).create(trackBy$1(this.viewContext));
+        this.differ.diff(this.leaves);
+    }
+    update(context) {
+        const { leaves, contexts } = this.getLeaves(context);
+        const outletParent = this.getOutletParent();
+        const diffResult = this.differ.diff(leaves);
+        if (diffResult) {
+            let firstRootNode = getRootNodes(this.views[0])[0];
+            const newContexts = [];
+            const newViewTypes = [];
+            const newViews = [];
+            diffResult.forEachItem(record => {
+                let context = getContext$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.leaves = leaves;
+        }
+    }
+    getLeaves(context) {
+        const leaves = Text$1.decorations(context.text, context.decorations);
+        const contexts = leaves.map((leaf, index) => {
+            return {
+                leaf,
+                text: context.text,
+                parent: context.parent,
+                index,
+                isLast: context.isLast && index === leaves.length - 1
+            };
+        });
+        return { leaves, contexts };
+    }
+}
+function getContext$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;
+    }
+    get centerContainerElement() {
+        return this.centerContianer.nativeElement;
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    ngOnInit() {
+        this.nativeElement.classList.add(`slate-block-card`);
+    }
+    append() {
+        this.centerRootNodes.forEach(rootNode => !this.centerContainerElement.contains(rootNode) && this.centerContainerElement.appendChild(rootNode));
+    }
+    initializeCenter(rootNodes) {
+        this.centerRootNodes = rootNodes;
+        this.append();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SlateBlockCard, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", 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: "18.2.0", 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;
@@ -2134,8 +2258,8 @@ class ListRender {
         children.forEach((descendant, index) => {
             NODE_TO_INDEX.set(descendant, index);
             NODE_TO_PARENT.set(descendant, parent);
-            const context = getContext$1(index, descendant, parentPath, childrenContext, this.viewContext);
-            const viewType = getViewType$1(descendant, parent, this.viewContext);
+            const 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);
@@ -2145,7 +2269,7 @@ class ListRender {
         });
         mount(this.views, this.blockCards, this.getOutletParent(), this.getOutletElement());
         const newDiffers = this.viewContainerRef.injector.get(IterableDiffers);
-        this.differ = newDiffers.find(children).create(trackBy$1(this.viewContext));
+        this.differ = newDiffers.find(children).create(trackBy(this.viewContext));
         this.differ.diff(children);
         if (parent === this.viewContext.editor) {
             executeAfterViewInit(this.viewContext.editor);
@@ -2171,8 +2295,8 @@ class ListRender {
             diffResult.forEachItem(record => {
                 NODE_TO_INDEX.set(record.item, record.currentIndex);
                 NODE_TO_PARENT.set(record.item, parent);
-                let context = getContext$1(record.currentIndex, record.item, parentPath, childrenContext, this.viewContext);
-                const viewType = getViewType$1(record.item, parent, this.viewContext);
+                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;
@@ -2242,7 +2366,7 @@ class ListRender {
             this.children.forEach((child, index) => {
                 NODE_TO_INDEX.set(child, index);
                 NODE_TO_PARENT.set(child, parent);
-                let context = getContext$1(index, child, parentPath, childrenContext, this.viewContext);
+                let context = getContext(index, child, parentPath, childrenContext, this.viewContext);
                 const previousContext = this.contexts[index];
                 if (memoizedContext(this.viewContext, child, previousContext, context)) {
                     context = previousContext;
@@ -2272,7 +2396,7 @@ class ListRender {
         this.differ = null;
     }
 }
-function getContext$1(index, item, parentPath, childrenContext, viewContext) {
+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);
@@ -2340,7 +2464,7 @@ function getCommonContext(index, item, parentPath, viewContext, childrenContext)
         return { selection: null, decorations: [] };
     }
 }
-function getViewType$1(item, parent, viewContext) {
+function getViewType(item, parent, viewContext) {
     if (Element.isElement(item)) {
         return (viewContext.renderElement && viewContext.renderElement(item)) || viewContext.defaultElement;
     }
@@ -2364,7 +2488,7 @@ function createBlockCard(item, view, viewContainerRef, viewContext) {
         return null;
     }
 }
-function trackBy$1(viewContext) {
+function trackBy(viewContext) {
     return (index, node) => {
         return viewContext.trackBy(node) || AngularEditor.findKey(viewContext.editor, node);
     };
@@ -2407,134 +2531,15 @@ function executeAfterViewInit(editor) {
     clearAfterViewInitQueue(editor);
 }
 
-class LeavesRender {
-    constructor(viewContext, viewContainerRef, getOutletParent, getOutletElement) {
-        this.viewContext = viewContext;
-        this.viewContainerRef = viewContainerRef;
-        this.getOutletParent = getOutletParent;
-        this.getOutletElement = getOutletElement;
-        this.views = [];
-        this.contexts = [];
-        this.viewTypes = [];
-    }
-    initialize(context) {
-        const { leaves, contexts } = this.getLeaves(context);
-        this.leaves = leaves;
-        this.contexts = contexts;
-        this.leaves.forEach((leaf, index) => {
-            const context = getContext(index, this.contexts);
-            const viewType = getViewType(context, this.viewContext);
-            const view = createEmbeddedViewOrComponent(viewType, context, this.viewContext, this.viewContainerRef);
-            this.views.push(view);
-            this.contexts.push(context);
-            this.viewTypes.push(viewType);
-        });
-        mount(this.views, null, this.getOutletParent(), this.getOutletElement());
-        const newDiffers = this.viewContainerRef.injector.get(IterableDiffers);
-        this.differ = newDiffers.find(this.leaves).create(trackBy(this.viewContext));
-        this.differ.diff(this.leaves);
-    }
-    update(context) {
-        const { leaves, contexts } = this.getLeaves(context);
-        const outletParent = this.getOutletParent();
-        const diffResult = this.differ.diff(leaves);
-        if (diffResult) {
-            let firstRootNode = getRootNodes(this.views[0])[0];
-            const newContexts = [];
-            const newViewTypes = [];
-            const newViews = [];
-            diffResult.forEachItem(record => {
-                let context = getContext(record.currentIndex, contexts);
-                const viewType = getViewType(context, this.viewContext);
-                newViewTypes.push(viewType);
-                let view;
-                if (record.previousIndex === null) {
-                    view = createEmbeddedViewOrComponent(viewType, context, this.viewContext, this.viewContainerRef);
-                    newContexts.push(context);
-                    newViews.push(view);
-                    mountOnItemChange(record.currentIndex, record.item, newViews, null, outletParent, firstRootNode, this.viewContext);
-                }
-                else {
-                    const previousView = this.views[record.previousIndex];
-                    const previousViewType = this.viewTypes[record.previousIndex];
-                    if (previousViewType !== viewType) {
-                        view = createEmbeddedViewOrComponent(viewType, context, this.viewContext, this.viewContainerRef);
-                        const firstRootNode = getRootNodes(previousView, null)[0];
-                        const newRootNodes = getRootNodes(view, null);
-                        firstRootNode.replaceWith(...newRootNodes);
-                        previousView.destroy();
-                    }
-                    else {
-                        view = previousView;
-                        updateContext(previousView, context, this.viewContext);
-                    }
-                    newContexts.push(context);
-                    newViews.push(view);
-                }
-            });
-            diffResult.forEachRemovedItem(record => {
-                const view = this.views[record.previousIndex];
-                view.destroy();
-            });
-            diffResult.forEachMovedItem(record => {
-                mountOnItemChange(record.currentIndex, record.item, newViews, null, outletParent, firstRootNode, this.viewContext);
-            });
-            this.viewTypes = newViewTypes;
-            this.views = newViews;
-            this.contexts = newContexts;
-            this.leaves = leaves;
-        }
-    }
-    getLeaves(context) {
-        const leaves = Text$1.decorations(context.text, context.decorations);
-        const contexts = leaves.map((leaf, index) => {
-            return {
-                leaf,
-                text: context.text,
-                parent: context.parent,
-                index,
-                isLast: context.isLast && index === leaves.length - 1
-            };
-        });
-        return { leaves, contexts };
-    }
-}
-function getContext(index, leafContexts) {
-    return leafContexts[index];
-}
-function getViewType(leafContext, viewContext) {
-    return (viewContext.renderLeaf && viewContext.renderLeaf(leafContext.leaf)) || viewContext.defaultLeaf;
-}
-function trackBy(viewContext) {
-    return (index, node) => {
-        return index;
-    };
-}
-
-class SlateChildrenOutlet {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
-    getNativeElement() {
-        return this.elementRef.nativeElement;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateChildrenOutlet, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SlateChildrenOutlet, isStandalone: true, selector: "slate-children-outlet", ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateChildrenOutlet, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'slate-children-outlet',
-                    template: ``,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
-
 /**
  * base class for custom element component or text component
  */
 class BaseComponent {
+    constructor() {
+        this.initialized = false;
+        this.elementRef = inject(ElementRef);
+        this.cdr = inject(ChangeDetectorRef);
+    }
     set context(value) {
         if (hasBeforeContextChange(this)) {
             this.beforeContextChange(value);
@@ -2557,17 +2562,12 @@ class BaseComponent {
     get nativeElement() {
         return this.elementRef.nativeElement;
     }
-    constructor(elementRef, cdr) {
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-        this.initialized = false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: BaseComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: BaseComponent, inputs: { context: "context", viewContext: "viewContext" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: BaseComponent, inputs: { context: "context", viewContext: "viewContext" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: BaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BaseComponent, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { context: [{
+        }], propDecorators: { context: [{
                 type: Input
             }], viewContext: [{
                 type: Input
@@ -2629,10 +2629,10 @@ class BaseLeafComponent extends BaseComponent {
             this.nativeElement.classList.remove('leaf-with-placeholder');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: BaseLeafComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: BaseLeafComponent, host: { properties: { "attr.data-slate-leaf": "this.isSlateLeaf" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BaseLeafComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: BaseLeafComponent, host: { properties: { "attr.data-slate-leaf": "this.isSlateLeaf" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: BaseLeafComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BaseLeafComponent, decorators: [{
             type: Directive
         }], propDecorators: { isSlateLeaf: [{
                 type: HostBinding,
@@ -2735,10 +2735,10 @@ class BaseElementComponent extends BaseComponent {
             readonly: this._context.readonly
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: BaseElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: BaseElementComponent, viewQueries: [{ propertyName: "childrenOutletInstance", first: true, predicate: SlateChildrenOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BaseElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: BaseElementComponent, viewQueries: [{ propertyName: "childrenOutletInstance", first: true, predicate: SlateChildrenOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: BaseElementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BaseElementComponent, decorators: [{
             type: Directive
         }], propDecorators: { childrenOutletInstance: [{
                 type: ViewChild,
@@ -2786,10 +2786,10 @@ class BaseTextComponent extends BaseComponent {
         }
         this.leavesRender.update(this.context);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: BaseTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: BaseTextComponent, viewQueries: [{ propertyName: "childrenOutletInstance", first: true, predicate: SlateChildrenOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BaseTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: BaseTextComponent, viewQueries: [{ propertyName: "childrenOutletInstance", first: true, predicate: SlateChildrenOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: BaseTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BaseTextComponent, decorators: [{
             type: Directive
         }], propDecorators: { childrenOutletInstance: [{
                 type: ViewChild,
@@ -2801,10 +2801,10 @@ class SlateLeaves extends ViewContainer {
         super(...arguments);
         this.initialized = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateLeaves, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SlateLeaves, isStandalone: true, selector: "slate-leaves", inputs: { context: "context" }, usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SlateLeaves, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: SlateLeaves, isStandalone: true, selector: "slate-leaves", inputs: { context: "context" }, usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateLeaves, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SlateLeaves, decorators: [{
             type: Component,
             args: [{
                     selector: 'slate-leaves',
@@ -2826,10 +2826,10 @@ class SlateVoidText extends BaseTextComponent {
             return;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateVoidText, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SlateVoidText, isStandalone: true, selector: "span[slateVoidText]", host: { attributes: { "data-slate-spacer": "true", "data-slate-node": "text" }, classAttribute: "slate-spacer" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SlateVoidText, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: SlateVoidText, isStandalone: true, selector: "span[slateVoidText]", host: { attributes: { "data-slate-spacer": "true", "data-slate-node": "text" }, classAttribute: "slate-spacer" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateVoidText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SlateVoidText, decorators: [{
             type: Component,
             args: [{
                     selector: 'span[slateVoidText]',
@@ -2846,10 +2846,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
         }] });
 
 class SlateDefaultText extends BaseTextComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateDefaultText, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SlateDefaultText, isStandalone: true, selector: "span[slateDefaultText]", host: { attributes: { "data-slate-node": "text" } }, usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SlateDefaultText, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: SlateDefaultText, isStandalone: true, selector: "span[slateDefaultText]", host: { attributes: { "data-slate-node": "text" } }, usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateDefaultText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SlateDefaultText, decorators: [{
             type: Component,
             args: [{
                     selector: 'span[slateDefaultText]',
@@ -2864,10 +2864,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
         }] });
 
 class SlateDefaultElement extends BaseElementComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateDefaultElement, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SlateDefaultElement, isStandalone: true, selector: "div[slateDefaultElement]", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SlateDefaultElement, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: SlateDefaultElement, isStandalone: true, selector: "div[slateDefaultElement]", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateDefaultElement, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SlateDefaultElement, decorators: [{
             type: Component,
             args: [{
                     selector: 'div[slateDefaultElement]',
@@ -2884,6 +2884,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
  * If the dynamically created component uses onpush mode, then it must call markForCheck when setting the context
  */
 class ViewContainerItem {
+    constructor() {
+        this.initialized = false;
+        this.viewContainerRef = inject(ViewContainerRef);
+    }
     get rootNodes() {
         return this.getRootNodes();
     }
@@ -2896,10 +2900,6 @@ class ViewContainerItem {
         }
         return [];
     }
-    constructor(viewContainerRef) {
-        this.viewContainerRef = viewContainerRef;
-        this.initialized = false;
-    }
     destroyView() {
         if (this.embeddedViewRef) {
             this.embeddedViewRef.destroy();
@@ -2974,21 +2974,16 @@ class ViewContainerItem {
             this.blockCardComponentRef.instance.append();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ViewContainerItem, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: ViewContainerItem, inputs: { viewContext: "viewContext" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ViewContainerItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: ViewContainerItem, inputs: { viewContext: "viewContext" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ViewContainerItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ViewContainerItem, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { viewContext: [{
+        }], propDecorators: { viewContext: [{
                 type: Input
             }] } });
 
 class SlateDefaultString extends BaseComponent {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-    }
     beforeContextChange(value) {
         if (this.context) {
             if (this.context.type === 'lineBreakEmptyString') {
@@ -3047,10 +3042,10 @@ class SlateDefaultString extends BaseComponent {
     ngOnInit() {
         this.nativeElement.setAttribute('editable-text', '');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateDefaultString, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SlateDefaultString, isStandalone: true, selector: "span[slateDefaultString]", usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SlateDefaultString, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", 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: "17.2.4", ngImport: i0, type: SlateDefaultString, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SlateDefaultString, decorators: [{
             type: Component,
             args: [{
                     selector: 'span[slateDefaultString]',
@@ -3058,13 +3053,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }] });
+        }] });
 
 class SlateString extends ViewContainerItem {
-    constructor(elementRef, viewContainerRef) {
-        super(viewContainerRef);
-        this.elementRef = elementRef;
-        this.viewContainerRef = viewContainerRef;
+    constructor() {
+        super(...arguments);
+        this.elementRef = inject(ElementRef);
+        this.viewContainerRef = inject(ViewContainerRef);
     }
     ngOnInit() {
         this.createView();
@@ -3136,10 +3131,10 @@ class SlateString extends ViewContainerItem {
     memoizedContext(prev, next) {
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateString, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SlateString, isStandalone: true, selector: "span[slateString]", inputs: { context: "context" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SlateString, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", 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: "17.2.4", ngImport: i0, type: SlateString, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SlateString, decorators: [{
             type: Component,
             args: [{
                     selector: 'span[slateString]',
@@ -3147,7 +3142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }], propDecorators: { context: [{
+        }], propDecorators: { context: [{
                 type: Input
             }] } });
 /**
@@ -3172,10 +3167,10 @@ class SlateDefaultLeaf extends BaseLeafComponent {
         // Because the placeholder span is not in the current component, it is destroyed along with the current component
         this.destroyPlaceholder();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateDefaultLeaf, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SlateDefaultLeaf, isStandalone: true, selector: "span[slateDefaultLeaf]", host: { attributes: { "data-slate-leaf": "true" } }, usesInheritance: true, ngImport: i0, template: `<span slateString [context]="context" [viewContext]="viewContext"><span></span></span>`, isInline: true, dependencies: [{ kind: "component", type: SlateString, selector: "span[slateString]", inputs: ["context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SlateDefaultLeaf, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: SlateDefaultLeaf, isStandalone: true, selector: "span[slateDefaultLeaf]", host: { attributes: { "data-slate-leaf": "true" } }, usesInheritance: true, ngImport: i0, template: `<span slateString [context]="context" [viewContext]="viewContext"><span></span></span>`, isInline: true, dependencies: [{ kind: "component", type: SlateString, selector: "span[slateString]", inputs: ["context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateDefaultLeaf, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SlateDefaultLeaf, decorators: [{
             type: Component,
             args: [{
                     selector: 'span[slateDefaultLeaf]',
@@ -4218,8 +4213,8 @@ class SlateEditable {
         this.destroy$.complete();
         EDITOR_TO_ON_CHANGE.delete(this.editor);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateEditable, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: SLATE_DEFAULT_ELEMENT_COMPONENT_TOKEN }, { token: SLATE_DEFAULT_TEXT_COMPONENT_TOKEN }, { token: SLATE_DEFAULT_VOID_TEXT_COMPONENT_TOKEN }, { token: SLATE_DEFAULT_LEAF_COMPONENT_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SlateEditable, isStandalone: true, selector: "slate-editable", inputs: { editor: "editor", renderElement: "renderElement", renderLeaf: "renderLeaf", renderText: "renderText", decorate: "decorate", placeholderDecorate: "placeholderDecorate", scrollSelectionIntoView: "scrollSelectionIntoView", isStrictDecorate: "isStrictDecorate", trackBy: "trackBy", readonly: "readonly", placeholder: "placeholder", beforeInput: "beforeInput", blur: "blur", click: "click", compositionEnd: "compositionEnd", compositionUpdate: "compositionUpdate", compositionStart: "compositionStart", copy: "copy", cut: "cut", dragOver: "dragOver", dragStart: "dragStart", dragEnd: "dragEnd", drop: "drop", focus: "focus", keydown: "keydown", paste: "paste", spellCheck: "spellCheck", autoCorrect: "autoCorrect", autoCapitalize: "autoCapitalize" }, host: { properties: { "attr.contenteditable": "readonly ? undefined : true", "attr.role": "readonly ? undefined : 'textbox'", "attr.spellCheck": "!hasBeforeInputSupport ? false : spellCheck", "attr.autoCorrect": "!hasBeforeInputSupport ? 'false' : autoCorrect", "attr.autoCapitalize": "!hasBeforeInputSupport ? 'false' : autoCapitalize", "attr.data-slate-editor": "this.dataSlateEditor", "attr.data-slate-node": "this.dataSlateNode", "attr.data-gramm": "this.dataGramm" }, classAttribute: "slate-editable-container" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SlateEditable, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: SLATE_DEFAULT_ELEMENT_COMPONENT_TOKEN }, { token: SLATE_DEFAULT_TEXT_COMPONENT_TOKEN }, { token: SLATE_DEFAULT_VOID_TEXT_COMPONENT_TOKEN }, { token: SLATE_DEFAULT_LEAF_COMPONENT_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", 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),
@@ -4243,7 +4238,7 @@ class SlateEditable {
             }
         ], viewQueries: [{ propertyName: "templateComponent", first: true, predicate: ["templateComponent"], descendants: true, static: true }, { propertyName: "templateElementRef", first: true, predicate: ["templateComponent"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<slate-string-template #templateComponent></slate-string-template>\n", dependencies: [{ kind: "component", type: SlateStringTemplate, selector: "slate-string-template" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateEditable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SlateEditable, decorators: [{
             type: Component,
             args: [{ selector: 'slate-editable', host: {
                         class: 'slate-editable-container',
@@ -4431,10 +4426,10 @@ const preventInsertFromComposition = (event, editor) => {
 };
 
 class SlateElement extends BaseElementComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateElement, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SlateElement, isStandalone: true, selector: "[slateElement]", usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SlateElement, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: SlateElement, isStandalone: true, selector: "[slateElement]", usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateElement, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SlateElement, decorators: [{
             type: Component,
             args: [{
                     selector: '[slateElement]',
@@ -4446,8 +4441,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
         }] });
 
 class SlateModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.4", ngImport: i0, type: SlateModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SlateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: SlateModule, imports: [CommonModule,
             SlateEditable,
             SlateDefaultElement,
             SlateElement,
@@ -4461,14 +4456,14 @@ class SlateModule {
             SlateDefaultLeaf,
             SlateDefaultString,
             SlateChildrenOutlet], exports: [SlateEditable, SlateChildren, SlateChildrenOutlet, SlateElement, SlateLeaves, SlateString, SlateDefaultString] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SlateModule, providers: [
             {
                 provide: SLATE_DEFAULT_ELEMENT_COMPONENT_TOKEN,
                 useValue: SlateDefaultElement
             }
         ], imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlateModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SlateModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [