slate-angular 21.1.0 → 22.0.0-next.0

package/fesm2022/slate-angular.mjs

@@ -13,13 +13,15 @@ import { CommonModule } from '@angular/common';
 const FAKE_LEFT_BLOCK_CARD_OFFSET = -1;
 const FAKE_RIGHT_BLOCK_CARD_OFFSET = -2;
 function hasBlockCardWithNode(node) {
-    return node && (node.parentElement.hasAttribute('card-target') || (node instanceof HTMLElement && node.hasAttribute('card-target')));
+    return !!(node &&
+        (node.parentElement?.hasAttribute('card-target') || (node instanceof HTMLElement && node.hasAttribute('card-target'))));
 }
 function hasBlockCard(selection) {
-    return hasBlockCardWithNode(selection?.anchorNode) || hasBlockCardWithNode(selection?.focusNode);
+    return hasBlockCardWithNode(selection?.anchorNode ?? null) || hasBlockCardWithNode(selection?.focusNode ?? null);
 }
 function getCardTargetAttribute(node) {
-    return node.parentElement.attributes['card-target'] || (node instanceof HTMLElement && node.attributes['card-target']);
+    return (node.parentElement?.attributes?.['card-target'] ||
+        (node instanceof HTMLElement && node.attributes['card-target']));
 }
 function isCardLeft(node) {
     const cardTarget = getCardTargetAttribute(node);
@@ -256,11 +258,13 @@ const customToSlateRange = (editor, domRange, options) => {
     if (anchorNode == null || focusNode == null || anchorOffset == null || focusOffset == null) {
         throw new Error(`Cannot resolve a Slate range from DOM range: ${domRange}`);
     }
-    const anchor = DOMEditor.toSlatePoint(editor, [anchorNode, anchorOffset], { suppressThrow, exactMatch });
+    const anchor = DOMEditor.toSlatePoint(editor, [anchorNode, anchorOffset], { suppressThrow: !!suppressThrow, exactMatch: !!exactMatch });
     if (!anchor) {
         return null;
     }
-    const focus = isCollapsed ? anchor : DOMEditor.toSlatePoint(editor, [focusNode, focusOffset], { suppressThrow, exactMatch });
+    const focus = isCollapsed
+        ? anchor
+        : DOMEditor.toSlatePoint(editor, [focusNode, focusOffset], { suppressThrow: !!suppressThrow, exactMatch: !!exactMatch });
     if (!focus) {
         return null;
     }
@@ -343,10 +347,15 @@ const CustomDOMEditor = {
     getCardCursorNode(editor, blockCardNode, options) {
         const blockCardElement = DOMEditor.toDOMNode(editor, blockCardNode);
         const cardCenter = blockCardElement.parentElement;
-        return options.direction === 'left' ? cardCenter.previousElementSibling.firstChild : cardCenter.nextElementSibling.firstChild;
+        return options.direction === 'left'
+            ? cardCenter.previousElementSibling.firstChild
+            : cardCenter.nextElementSibling.firstChild;
     },
     toSlateCardEntry(editor, node) {
-        const element = node.parentElement.closest('.slate-block-card')?.querySelector('[card-target="card-center"]').firstElementChild;
+        const element = node.parentElement
+            .closest('.slate-block-card')
+            ?.querySelector('[card-target="card-center"]')
+            .firstElementChild;
         const slateNode = DOMEditor.toSlateNode(editor, element);
         const path = DOMEditor.findPath(editor, slateNode);
         return [slateNode, path];
@@ -2246,7 +2255,7 @@ function restoreDom(editor, execute) {
         execute();
     });
     const disconnect = () => {
-        observer.disconnect();
+        observer?.disconnect();
         observer = null;
     };
     observer.observe(editable, { subtree: true, childList: true, characterData: true, characterDataOldValue: true });
@@ -2269,6 +2278,25 @@ class BlockCardRef {
     }
 }
 
+function hasBeforeContextChange(value) {
+    if (value.beforeContextChange) {
+        return true;
+    }
+    return false;
+}
+function hasAfterContextChange(value) {
+    if (value.afterContextChange) {
+        return true;
+    }
+    return false;
+}
+function hasBeforeDomMove(value) {
+    if (value.instance?.beforeDomMove) {
+        return true;
+    }
+    return false;
+}
+
 function createEmbeddedViewOrComponentOrFlavour(viewType, context, viewContext, viewContainerRef) {
     if (isFlavourType(viewType)) {
         const flavourRef = new FlavourRef();
@@ -2297,6 +2325,7 @@ function createEmbeddedViewOrComponentOrFlavour(viewType, context, viewContext,
         componentRef.changeDetectorRef.detectChanges();
         return componentRef;
     }
+    throw new Error('Invalid view type');
 }
 function updateContext(view, newContext, viewContext) {
     if (view instanceof FlavourRef) {
@@ -2317,7 +2346,7 @@ function mount(views, blockCards, outletParent, outletElement) {
         const fragment = document.createDocumentFragment();
         views.forEach((view, index) => {
             const blockCard = blockCards ? blockCards[index] : undefined;
-            fragment.append(...getRootNodes(view, blockCard));
+            fragment.append(...getRootNodes(view, blockCard ?? undefined));
         });
         if (outletElement) {
             outletElement.parentElement.insertBefore(fragment, outletElement);
@@ -2360,6 +2389,9 @@ function getRootNodes(ref, blockCard) {
 }
 function mountOnItemChange(index, item, views, blockCards, outletParent, firstRootNode, viewContext) {
     const view = views[index];
+    if (hasBeforeDomMove(view)) {
+        view.instance.beforeDomMove('move');
+    }
     let rootNodes = getRootNodes(view);
     if (blockCards) {
         const isBlockCard = viewContext.editor.isBlockCard(item);
@@ -2390,19 +2422,6 @@ function mountOnItemChange(index, item, views, blockCards, outletParent, firstRo
     }
 }
 
-function hasBeforeContextChange(value) {
-    if (value.beforeContextChange) {
-        return true;
-    }
-    return false;
-}
-function hasAfterContextChange(value) {
-    if (value.afterContextChange) {
-        return true;
-    }
-    return false;
-}
-
 class BaseFlavour {
     constructor() {
         this.initialized = false;
@@ -2542,6 +2561,10 @@ class DefaultElementFlavour extends BaseElementFlavour {
 }
 
 class BaseLeafFlavour extends BaseFlavour {
+    constructor() {
+        super(...arguments);
+        this.placeholderElement = null;
+    }
     get text() {
         return this.context && this.context.text;
     }
@@ -2564,7 +2587,7 @@ class BaseLeafFlavour extends BaseFlavour {
         // 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.context.leaf.placeholder) {
             if (!this.placeholderElement) {
                 this.createPlaceholder();
             }
@@ -2576,7 +2599,7 @@ class BaseLeafFlavour extends BaseFlavour {
     }
     createPlaceholder() {
         const placeholderElement = document.createElement('span');
-        placeholderElement.innerText = this.context.leaf['placeholder'];
+        placeholderElement.innerText = this.context.leaf.placeholder;
         placeholderElement.contentEditable = 'false';
         placeholderElement.setAttribute('data-slate-placeholder', 'true');
         this.placeholderElement = placeholderElement;
@@ -2594,8 +2617,8 @@ class BaseLeafFlavour extends BaseFlavour {
         });
     }
     updatePlaceholder() {
-        if (this.placeholderElement.innerText !== this.context.leaf['placeholder']) {
-            this.placeholderElement.innerText = this.context.leaf['placeholder'];
+        if (this.placeholderElement.innerText !== this.context.leaf.placeholder) {
+            this.placeholderElement.innerText = this.context.leaf.placeholder;
         }
     }
     destroyPlaceholder() {
@@ -2747,7 +2770,9 @@ const createCompatibleStringNode = (text) => {
 const updateCompatibleStringNode = (stringNode, text) => {
     const zeroWidthSpan = stringNode.querySelector('span');
     stringNode.textContent = text;
-    stringNode.appendChild(zeroWidthSpan);
+    if (zeroWidthSpan) {
+        stringNode.appendChild(zeroWidthSpan);
+    }
     return stringNode;
 };
 const createLineBreakEmptyStringDOM = (elementStringLength) => {
@@ -3062,8 +3087,9 @@ class ListRender {
             const preRenderingElement = [...this.preRenderingHTMLElement];
             let previousRootNode = this.virtualTopHeightElement;
             preRenderingElement.forEach((rootNodes, index) => {
-                // const slateElement = this.children[index];
-                // if (slateElement && children.indexOf(slateElement) >= 0) {
+                if (hasBeforeDomMove(this.views[index])) {
+                    this.views[index].instance.beforeDomMove('virtual-scroll');
+                }
                 rootNodes.forEach(rootNode => {
                     setPreRenderingElementStyle(this.viewContext.editor, rootNode, true);
                     previousRootNode.insertAdjacentElement('afterend', rootNode);
@@ -3072,16 +3098,6 @@ class ListRender {
                 if (isDebug) {
                     debugLog('log', 'preRenderingHTMLElement index: ', this.viewContext.editor.children.indexOf(this.children[index]), 'is clear true');
                 }
-                // } else {
-                //     if (isDebug) {
-                //         debugLog(
-                //             'log',
-                //             'preRenderingHTMLElement index: ',
-                //             this.viewContext.editor.children.indexOf(this.children[index]),
-                //             'do not clear since it would be removed soon'
-                //         );
-                //     }
-                // }
             });
             this.preRenderingHTMLElement = [];
         }
@@ -3402,6 +3418,7 @@ class SlateEditable {
         this.isUpdatingSelection = false;
         this.latestElement = null;
         this.manualListeners = [];
+        this.initialized = false;
         this.onTouchedCallback = () => { };
         this.onChangeCallback = () => { };
         this.decorate = () => [];
@@ -4098,11 +4115,9 @@ class SlateEditable {
                 // COMPAT: Since the DOM range has no concept of backwards/forwards
                 // we need to check and do the right thing here.
                 if (Range.isBackward(selection)) {
-                    // eslint-disable-next-line max-len
                     domSelection.setBaseAndExtent(newDomRange.endContainer, newDomRange.endOffset, newDomRange.startContainer, newDomRange.startOffset);
                 }
                 else {
-                    // eslint-disable-next-line max-len
                     domSelection.setBaseAndExtent(newDomRange.startContainer, newDomRange.startOffset, newDomRange.endContainer, newDomRange.endOffset);
                 }
             }
@@ -4171,7 +4186,7 @@ class SlateEditable {
                 let textContent = '';
                 // skip decorate text
                 textDOMNode.querySelectorAll('[editable-text]').forEach(stringDOMNode => {
-                    let text = stringDOMNode.textContent;
+                    let text = stringDOMNode.textContent || '';
                     const zeroChar = '\uFEFF';
                     // remove zero with char
                     if (text.startsWith(zeroChar)) {
@@ -4344,7 +4359,9 @@ class SlateEditable {
                     return Transforms.deselect(this.editor);
                 }
                 const editorElement = EDITOR_TO_ELEMENT.get(this.editor);
-                const hasDomSelectionInEditor = editorElement.contains(domSelection.anchorNode) && editorElement.contains(domSelection.focusNode);
+                const hasDomSelectionInEditor = !!editorElement &&
+                    editorElement.contains(domSelection.anchorNode) &&
+                    editorElement.contains(domSelection.focusNode);
                 if (!hasDomSelectionInEditor) {
                     Transforms.deselect(this.editor);
                     return;
@@ -4627,7 +4644,7 @@ class SlateEditable {
         this.isDOMEventHandled(event, this.compositionUpdate);
     }
     onDOMCompositionEnd(event) {
-        if (!event.data && !Range.isCollapsed(this.editor.selection)) {
+        if (!event.data && this.editor.selection && !Range.isCollapsed(this.editor.selection)) {
             Transforms.delete(this.editor);
         }
         if (AngularEditor.hasEditableTarget(this.editor, event.target) &&
@@ -4991,7 +5008,7 @@ class SlateEditable {
             event.nativeEvent.preventDefault();
             try {
                 const text = event.data;
-                if (!Range.isCollapsed(this.editor.selection)) {
+                if (this.editor.selection && !Range.isCollapsed(this.editor.selection)) {
                     Editor.deleteFragment(this.editor);
                 }
                 // just handle Non-IME input
@@ -5026,8 +5043,8 @@ class SlateEditable {
         this.indicsOfNeedRemeasured$.complete();
         EDITOR_TO_ON_CHANGE.delete(this.editor);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SlateEditable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", 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", virtualScroll: "virtualScroll", 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: "22.1.4", ngImport: i0, type: SlateEditable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.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", virtualScroll: "virtualScroll", 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),
@@ -5035,7 +5052,7 @@ class SlateEditable {
             }
         ], usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SlateEditable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SlateEditable, decorators: [{
             type: Component,
             args: [{
                     selector: 'slate-editable',
@@ -5157,10 +5174,10 @@ const defaultScrollSelectionIntoView = (editor, domRange) => {
 const isTargetInsideVoid = (editor, target) => {
     let slateNode = null;
     try {
-        slateNode = AngularEditor.hasTarget(editor, target) && AngularEditor.toSlateNode(editor, target);
+        slateNode = AngularEditor.hasTarget(editor, target) ? AngularEditor.toSlateNode(editor, target) : null;
     }
     catch (error) { }
-    return slateNode && Element.isElement(slateNode) && Editor.isVoid(editor, slateNode);
+    return !!(slateNode && Element.isElement(slateNode) && Editor.isVoid(editor, slateNode));
 };
 const isSelectionInsideVoid = (editor) => {
     const selection = editor.selection;
@@ -5171,8 +5188,11 @@ const isSelectionInsideVoid = (editor) => {
     return false;
 };
 const hasStringTarget = (domSelection) => {
-    return ((domSelection.anchorNode.parentElement.hasAttribute('data-slate-string') ||
-        domSelection.anchorNode.parentElement.hasAttribute('data-slate-zero-width')) &&
+    return (!!domSelection &&
+        !!domSelection.anchorNode?.parentElement &&
+        !!domSelection.focusNode?.parentElement &&
+        (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')));
 };
@@ -5189,7 +5209,7 @@ const preventInsertFromComposition = (event, editor) => {
     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)) {
+    if (insertText && domSelection && domSelection.anchorNode instanceof Text && domSelection.anchorNode.textContent?.endsWith(insertText)) {
         const textNode = domSelection.anchorNode;
         textNode.splitText(textNode.length - insertText.length).remove();
     }
@@ -5202,10 +5222,10 @@ class SlateChildrenOutlet {
     getNativeElement() {
         return this.elementRef.nativeElement;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SlateChildrenOutlet, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: SlateChildrenOutlet, isStandalone: true, selector: "slate-children-outlet", ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SlateChildrenOutlet, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.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: "21.1.2", ngImport: i0, type: SlateChildrenOutlet, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SlateChildrenOutlet, decorators: [{
             type: Component,
             args: [{
                     selector: 'slate-children-outlet',
@@ -5216,11 +5236,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
         }] });
 
 class SlateModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SlateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.2", ngImport: i0, type: SlateModule, imports: [CommonModule, SlateEditable, SlateChildrenOutlet], exports: [SlateEditable, SlateChildrenOutlet] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SlateModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SlateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: SlateModule, imports: [CommonModule, SlateEditable, SlateChildrenOutlet], exports: [SlateEditable, SlateChildrenOutlet] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SlateModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SlateModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SlateModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, SlateEditable, SlateChildrenOutlet],
@@ -5260,10 +5280,10 @@ class BaseComponent {
     get nativeElement() {
         return this.elementRef.nativeElement;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: BaseComponent, isStandalone: true, inputs: { context: "context", viewContext: "viewContext" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: BaseComponent, isStandalone: true, inputs: { context: "context", viewContext: "viewContext" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: BaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: BaseComponent, decorators: [{
             type: Directive
         }], propDecorators: { context: [{
                 type: Input
@@ -5375,10 +5395,10 @@ class BaseElementComponent extends BaseComponent {
         const height = Math.ceil(target.getBoundingClientRect().height) + parseFloat(computedStyle.marginTop) + parseFloat(computedStyle.marginBottom);
         return height;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: BaseElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: BaseElementComponent, isStandalone: true, 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: "22.1.4", ngImport: i0, type: BaseElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", 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: "21.1.2", ngImport: i0, type: BaseElementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: BaseElementComponent, decorators: [{
             type: Directive
         }], propDecorators: { childrenOutletInstance: [{
                 type: ViewChild,
@@ -5427,10 +5447,10 @@ class BaseTextComponent extends BaseComponent {
         }
         this.leavesRender.update(this.context);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: BaseTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: BaseTextComponent, isStandalone: true, 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: "22.1.4", ngImport: i0, type: BaseTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", 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: "21.1.2", ngImport: i0, type: BaseTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: BaseTextComponent, decorators: [{
             type: Directive
         }], propDecorators: { childrenOutletInstance: [{
                 type: ViewChild,
@@ -5442,6 +5462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
 class BaseLeafComponent extends BaseComponent {
     constructor() {
         super(...arguments);
+        this.placeholderElement = null;
         this.stringRender = null;
         this.isSlateLeaf = true;
         this.getOutletParent = () => {
@@ -5474,7 +5495,7 @@ class BaseLeafComponent extends BaseComponent {
         // 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.context.leaf.placeholder) {
             if (!this.placeholderElement) {
                 this.createPlaceholder();
             }
@@ -5486,7 +5507,7 @@ class BaseLeafComponent extends BaseComponent {
     }
     createPlaceholder() {
         const placeholderElement = document.createElement('span');
-        placeholderElement.innerText = this.context.leaf['placeholder'];
+        placeholderElement.innerText = this.context.leaf.placeholder;
         placeholderElement.contentEditable = 'false';
         placeholderElement.setAttribute('data-slate-placeholder', 'true');
         this.placeholderElement = placeholderElement;
@@ -5504,8 +5525,8 @@ class BaseLeafComponent extends BaseComponent {
         });
     }
     updatePlaceholder() {
-        if (this.placeholderElement.innerText !== this.context.leaf['placeholder']) {
-            this.placeholderElement.innerText = this.context.leaf['placeholder'];
+        if (this.placeholderElement.innerText !== this.context.leaf.placeholder) {
+            this.placeholderElement.innerText = this.context.leaf.placeholder;
         }
     }
     destroyPlaceholder() {
@@ -5515,10 +5536,10 @@ class BaseLeafComponent extends BaseComponent {
             this.nativeElement.classList.remove('leaf-with-placeholder');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: BaseLeafComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: BaseLeafComponent, isStandalone: true, host: { properties: { "attr.data-slate-leaf": "this.isSlateLeaf" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: BaseLeafComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: BaseLeafComponent, isStandalone: true, host: { properties: { "attr.data-slate-leaf": "this.isSlateLeaf" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: BaseLeafComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: BaseLeafComponent, decorators: [{
             type: Directive
         }], propDecorators: { isSlateLeaf: [{
                 type: HostBinding,
@@ -5533,5 +5554,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AngularEditor, BaseComponent, BaseElementComponent, BaseElementFlavour, BaseFlavour, BaseLeafComponent, BaseLeafFlavour, BaseTextComponent, BaseTextFlavour, BlockCardRef, DEFAULT_ELEMENT_HEIGHT, DefaultTextFlavour, EDITOR_TO_AFTER_VIEW_INIT_QUEUE, EDITOR_TO_BUSINESS_TOP, EDITOR_TO_IS_FROM_SCROLL_TO, EDITOR_TO_ROOT_NODE_WIDTH, EDITOR_TO_VIEWPORT_HEIGHT, EDITOR_TO_VIRTUAL_SCROLL_CONFIG, EDITOR_TO_VIRTUAL_SCROLL_SELECTION, ELEMENT_KEY_TO_HEIGHTS, 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, SLATE_BLOCK_CARD_CLASS_NAME, SLATE_DEBUG_KEY, SLATE_DEBUG_KEY_SCROLL_TOP, SLATE_DEBUG_KEY_UPDATE, SlateBlockCard, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, VIRTUAL_BOTTOM_HEIGHT_CLASS_NAME, VIRTUAL_CENTER_OUTLET_CLASS_NAME, VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT, VIRTUAL_TOP_HEIGHT_CLASS_NAME, VoidTextFlavour, blobAsString, buildHTMLText, buildHeightsAndAccumulatedHeights, cacheHeightByElement, calcBusinessTop, calcHeightByElement, calculateAccumulatedTopHeight, check, clearMinHeightByElement, completeTable, createClipboardData, createText, createThrottleRAF, debugLog, defaultScrollSelectionIntoView, fallbackCopyText, getBlockCardByNativeElement, getBusinessTop, getCachedHeightByElement, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getScrollContainer, getSelection, getSlateFragmentAttribute, getViewportHeight, getZeroTextNode, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDebug, isDebugScrollTop, isDebugUpdate, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isSelectionInsideVoid, isTemplateRef, isValid, isValidNumber, measureHeightByIndics, normalize, roundTo, scrollToElement, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setMinHeightByElement, setNavigatorClipboard, shallowCompare, stripHtml, withAngular };
+export { AngularEditor, BaseComponent, BaseElementComponent, BaseElementFlavour, BaseFlavour, BaseLeafComponent, BaseLeafFlavour, BaseTextComponent, BaseTextFlavour, BlockCardRef, DEFAULT_ELEMENT_HEIGHT, DefaultTextFlavour, EDITOR_TO_AFTER_VIEW_INIT_QUEUE, EDITOR_TO_BUSINESS_TOP, EDITOR_TO_IS_FROM_SCROLL_TO, EDITOR_TO_ROOT_NODE_WIDTH, EDITOR_TO_VIEWPORT_HEIGHT, EDITOR_TO_VIRTUAL_SCROLL_CONFIG, EDITOR_TO_VIRTUAL_SCROLL_SELECTION, ELEMENT_KEY_TO_HEIGHTS, 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, SLATE_BLOCK_CARD_CLASS_NAME, SLATE_DEBUG_KEY, SLATE_DEBUG_KEY_SCROLL_TOP, SLATE_DEBUG_KEY_UPDATE, SlateBlockCard, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, VIRTUAL_BOTTOM_HEIGHT_CLASS_NAME, VIRTUAL_CENTER_OUTLET_CLASS_NAME, VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT, VIRTUAL_TOP_HEIGHT_CLASS_NAME, VoidTextFlavour, blobAsString, buildHTMLText, buildHeightsAndAccumulatedHeights, cacheHeightByElement, calcBusinessTop, calcHeightByElement, calculateAccumulatedTopHeight, check, clearMinHeightByElement, completeTable, createClipboardData, createText, createThrottleRAF, debugLog, defaultScrollSelectionIntoView, fallbackCopyText, getBlockCardByNativeElement, getBusinessTop, getCachedHeightByElement, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getScrollContainer, getSelection, getSlateFragmentAttribute, getViewportHeight, getZeroTextNode, hasAfterContextChange, hasBeforeContextChange, hasBeforeDomMove, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDebug, isDebugScrollTop, isDebugUpdate, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isSelectionInsideVoid, isTemplateRef, isValid, isValidNumber, measureHeightByIndics, normalize, roundTo, scrollToElement, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setMinHeightByElement, setNavigatorClipboard, shallowCompare, stripHtml, withAngular };
 //# sourceMappingURL=slate-angular.mjs.map