slate-angular 21.2.0 → 22.0.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 });
@@ -2316,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) {
@@ -2336,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);
@@ -2551,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;
     }
@@ -2573,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();
             }
@@ -2585,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;
@@ -2603,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() {
@@ -2756,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) => {
@@ -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,