slate-angular 1.6.3 → 1.7.1

package/bundles/slate-angular.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('slate'), require('is-hotkey'), require('@angular/core'), require('direction'), require('rxjs'), require('scroll-into-view-if-needed'), require('debug'), require('@angular/forms'), require('slate-history'), require('@angular/common')) :
-    typeof define === 'function' && define.amd ? define('slate-angular', ['exports', 'slate', 'is-hotkey', '@angular/core', 'direction', 'rxjs', 'scroll-into-view-if-needed', 'debug', '@angular/forms', 'slate-history', '@angular/common'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["slate-angular"] = {}, global.slate, global.isHotkey, global.ng.core, global.getDirection, global.rxjs, global.scrollIntoView, global.Debug, global.ng.forms, global.slateHistory, global.ng.common));
-})(this, (function (exports, slate, isHotkey, i0, getDirection, rxjs, scrollIntoView, Debug, forms, slateHistory, i2) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('slate'), require('is-hotkey'), require('@angular/core'), require('direction'), require('rxjs'), require('debug'), require('@angular/forms'), require('slate-history'), require('@angular/common')) :
+    typeof define === 'function' && define.amd ? define('slate-angular', ['exports', 'slate', 'is-hotkey', '@angular/core', 'direction', 'rxjs', 'debug', '@angular/forms', 'slate-history', '@angular/common'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["slate-angular"] = {}, global.slate, global.isHotkey, global.ng.core, global.getDirection, global.rxjs, global.Debug, global.ng.forms, global.slateHistory, global.ng.common));
+})(this, (function (exports, slate, isHotkey, i0, getDirection, rxjs, Debug, forms, slateHistory, i2) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,7 +26,6 @@
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var getDirection__default = /*#__PURE__*/_interopDefaultLegacy(getDirection);
-    var scrollIntoView__default = /*#__PURE__*/_interopDefaultLegacy(scrollIntoView);
     var Debug__default = /*#__PURE__*/_interopDefaultLegacy(Debug);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
 
@@ -1588,102 +1587,6 @@
                 }
             }
         };
-        // override slate layer logic
-        e.normalizeNode = function (entry) {
-            var _a = __read(entry, 2), node = _a[0], path = _a[1];
-            // There are no core normalizations for text nodes.
-            if (slate.Text.isText(node)) {
-                return;
-            }
-            // Ensure that block and inline nodes have at least one text child.
-            if (slate.Element.isElement(node) && node.children.length === 0) {
-                var child = { text: '' };
-                slate.Transforms.insertNodes(editor, child, {
-                    at: path.concat(0),
-                    voids: true,
-                });
-                return;
-            }
-            // Determine whether the node should have block or inline children.
-            var shouldHaveInlines = slate.Editor.isEditor(node)
-                ? false
-                : slate.Element.isElement(node) &&
-                    (editor.isInline(node) ||
-                        node.children.length === 0 ||
-                        slate.Text.isText(node.children[0]) ||
-                        editor.isInline(node.children[0]));
-            // Since we'll be applying operations while iterating, keep track of an
-            // index that accounts for any added/removed nodes.
-            var n = 0;
-            for (var i = 0; i < node.children.length; i++, n++) {
-                var child = node.children[i];
-                var prev = node.children[i - 1];
-                var isLast = i === node.children.length - 1;
-                var isInlineOrText = slate.Text.isText(child) ||
-                    (slate.Element.isElement(child) && editor.isInline(child));
-                // Only allow block nodes in the top-level children and parent blocks
-                // that only contain block nodes. Similarly, only allow inline nodes in
-                // other inline nodes, or parent blocks that only contain inlines and
-                // text.
-                if (isInlineOrText !== shouldHaveInlines) {
-                    slate.Transforms.removeNodes(editor, { at: path.concat(n), voids: true });
-                    n--;
-                }
-                else if (slate.Element.isElement(child)) {
-                    // Ensure that inline nodes are surrounded by text nodes.
-                    if (editor.isInline(child)) {
-                        if (prev == null || !slate.Text.isText(prev)) {
-                            var newChild = { text: '' };
-                            slate.Transforms.insertNodes(editor, newChild, {
-                                at: path.concat(n),
-                                voids: true,
-                            });
-                            n++;
-                        }
-                        else if (isLast) {
-                            var newChild = { text: '' };
-                            slate.Transforms.insertNodes(editor, newChild, {
-                                at: path.concat(n + 1),
-                                voids: true,
-                            });
-                            n++;
-                        }
-                    }
-                }
-                else {
-                    // Merge adjacent text nodes that are empty or match.
-                    if (prev != null && slate.Text.isText(prev)) {
-                        // adjust logic: first remove empty text to avoid merge empty text #WIK-3805
-                        if (prev.text === '') {
-                            // adjust logic: adjust cursor location when empty text is first child of node #WIK-3631
-                            // ensure current selection in the text #WIK-3762
-                            var prevFocused = editor.selection &&
-                                slate.Range.isCollapsed(editor.selection) &&
-                                slate.Path.equals(editor.selection.anchor.path, path.concat(n - 1));
-                            if (prev === node.children[0] && prevFocused) {
-                                slate.Transforms.select(editor, slate.Editor.start(editor, path.concat(n)));
-                            }
-                            slate.Transforms.removeNodes(editor, {
-                                at: path.concat(n - 1),
-                                voids: true,
-                            });
-                            n--;
-                        }
-                        else if (slate.Text.equals(child, prev, { loose: true })) {
-                            slate.Transforms.mergeNodes(editor, { at: path.concat(n), voids: true });
-                            n--;
-                        }
-                        else if (isLast && child.text === '') {
-                            slate.Transforms.removeNodes(editor, {
-                                at: path.concat(n),
-                                voids: true,
-                            });
-                            n--;
-                        }
-                    }
-                }
-            }
-        };
         e.onKeydown = function () { };
         e.onClick = function () { };
         e.isBlockCard = function (element) { return false; };
@@ -2392,7 +2295,7 @@
         }
         Object.defineProperty(BaseTextComponent.prototype, "text", {
             get: function () {
-                return this._context.text;
+                return this._context && this._context.text;
             },
             enumerable: false,
             configurable: true
@@ -2443,7 +2346,6 @@
             // first diff
             differ.diff(this.childrenComponent);
             var parentElement = this.elementRef.nativeElement.parentElement;
-            var firstChildComponent = this.childrenComponent.first;
             if (this.childrenComponent.length > 0) {
                 parentElement.insertBefore(this.createFragment(), this.elementRef.nativeElement);
                 this.elementRef.nativeElement.remove();
@@ -2451,41 +2353,15 @@
             this.childrenComponent.changes.subscribe(function (value) {
                 var iterableChanges = differ.diff(_this.childrenComponent);
                 if (iterableChanges) {
-                    iterableChanges.forEachAddedItem(function (record) {
-                        // first insert
-                        if (_this.elementRef.nativeElement.parentElement && _this.elementRef.nativeElement.parentElement === parentElement) {
-                            var fragment = document.createDocumentFragment();
-                            fragment.append.apply(fragment, __spreadArray([], __read(record.item.rootNodes)));
-                            parentElement.insertBefore(fragment, _this.elementRef.nativeElement);
-                            _this.elementRef.nativeElement.remove();
+                    iterableChanges.forEachOperation(function (record, previousIndex, currentIndex) {
+                        // removed
+                        if (currentIndex === null) {
                             return;
                         }
-                        // insert at start location
-                        if (record.currentIndex === 0 && firstChildComponent) {
-                            var fragment = document.createDocumentFragment();
-                            fragment.append.apply(fragment, __spreadArray([], __read(record.item.rootNodes)));
-                            parentElement.prepend(fragment);
-                        }
-                        else {
-                            // insert afterend of previous component end
-                            var previousRootNode_1 = _this.getPreviousRootNode(record.currentIndex);
-                            if (previousRootNode_1) {
-                                record.item.rootNodes.forEach(function (rootNode) {
-                                    previousRootNode_1.insertAdjacentElement('afterend', rootNode);
-                                    previousRootNode_1 = rootNode;
-                                });
-                            }
-                            else {
-                                _this.viewContext.editor.onError({
-                                    code: exports.SlateErrorCode.NotFoundPreviousRootNodeError,
-                                    name: 'not found previous rootNode',
-                                    nativeError: null
-                                });
-                            }
-                        }
+                        // added or moved
+                        _this.handleContainerItemChange(record, parentElement);
                     });
                 }
-                firstChildComponent = _this.childrenComponent.first;
             });
         };
         ViewContainer.prototype.getPreviousRootNode = function (currentIndex) {
@@ -2508,6 +2384,39 @@
             });
             return fragment;
         };
+        ViewContainer.prototype.handleContainerItemChange = function (record, parentElement) {
+            // first insert
+            if (this.elementRef.nativeElement.parentElement && this.elementRef.nativeElement.parentElement === parentElement) {
+                var fragment = document.createDocumentFragment();
+                fragment.append.apply(fragment, __spreadArray([], __read(record.item.rootNodes)));
+                parentElement.insertBefore(fragment, this.elementRef.nativeElement);
+                this.elementRef.nativeElement.remove();
+                return;
+            }
+            // insert at start location
+            if (record.currentIndex === 0) {
+                var fragment = document.createDocumentFragment();
+                fragment.append.apply(fragment, __spreadArray([], __read(record.item.rootNodes)));
+                parentElement.prepend(fragment);
+            }
+            else {
+                // insert afterend of previous component end
+                var previousRootNode_1 = this.getPreviousRootNode(record.currentIndex);
+                if (previousRootNode_1) {
+                    record.item.rootNodes.forEach(function (rootNode) {
+                        previousRootNode_1.insertAdjacentElement('afterend', rootNode);
+                        previousRootNode_1 = rootNode;
+                    });
+                }
+                else {
+                    this.viewContext.editor.onError({
+                        code: exports.SlateErrorCode.NotFoundPreviousRootNodeError,
+                        name: 'not found previous rootNode',
+                        nativeError: null
+                    });
+                }
+            }
+        };
         return ViewContainer;
     }());
     ViewContainer.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: ViewContainer, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.IterableDiffers }], target: i0__namespace.ɵɵFactoryTarget.Directive });
@@ -2597,12 +2506,12 @@
         return SlateDefaultLeafComponent;
     }(BaseLeafComponent));
     SlateDefaultLeafComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SlateDefaultLeafComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    SlateDefaultLeafComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SlateDefaultLeafComponent, selector: "span[slateDefaultLeaf]", host: { attributes: { "data-slate-leaf": "true" } }, usesInheritance: true, ngImport: i0__namespace, template: "<span slateString [context]=\"context\" [viewContext]=\"viewContext\"><span>", isInline: true, components: [{ type: SlateStringComponent, selector: "span[slateString]", inputs: ["context"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    SlateDefaultLeafComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SlateDefaultLeafComponent, selector: "span[slateDefaultLeaf]", host: { attributes: { "data-slate-leaf": "true" } }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <ng-container *ngIf=\"context.leaf['placeholder']\">\n            <span contenteditable=\"false\" data-slate-placeholder=\"true\" slate-placeholder=\"true\">{{context.leaf['placeholder']}}</span>\n        </ng-container>\n        <span slateString [context]=\"context\" [viewContext]=\"viewContext\"><span>", isInline: true, components: [{ type: SlateStringComponent, selector: "span[slateString]", inputs: ["context"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SlateDefaultLeafComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'span[slateDefaultLeaf]',
-                        template: "<span slateString [context]=\"context\" [viewContext]=\"viewContext\"><span>",
+                        template: "\n        <ng-container *ngIf=\"context.leaf['placeholder']\">\n            <span contenteditable=\"false\" data-slate-placeholder=\"true\" slate-placeholder=\"true\">{{context.leaf['placeholder']}}</span>\n        </ng-container>\n        <span slateString [context]=\"context\" [viewContext]=\"viewContext\"><span>",
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         host: {
                             'data-slate-leaf': 'true'
@@ -3119,6 +3028,7 @@
                     });
                     this.editor.children = normalize(value);
                 }
+                this.initializeContext();
                 this.cdr.markForCheck();
             }
         };
@@ -3201,14 +3111,6 @@
                         // eslint-disable-next-line max-len
                         domSelection.setBaseAndExtent(newDomRange_1.startContainer, newDomRange_1.startOffset, newDomRange_1.endContainer, newDomRange_1.endOffset);
                     }
-                    var leafEl = newDomRange_1.startContainer.parentElement;
-                    leafEl.getBoundingClientRect = newDomRange_1.getBoundingClientRect.bind(newDomRange_1);
-                    scrollIntoView__default["default"](leafEl, {
-                        scrollMode: 'if-needed',
-                        boundary: el_1,
-                    });
-                    // @ts-ignore
-                    delete leafEl.getBoundingClientRect;
                 }
                 setTimeout(function () {
                     // COMPAT: In Firefox, it's not enough to create a range, you also need
@@ -3245,7 +3147,7 @@
             // need exec after this.cdr.detectChanges() to render HTML
             // need exec before this.toNativeSelection() to correct native selection
             if (this.isComposing) {
-                // Compposition input text be not rendered when user composition input with selection is expanded
+                // Composition input text be not rendered when user composition input with selection is expanded
                 // At this time, the following matching conditions are met, assign isComposing to false, and the status is wrong
                 // this time condition is true and isComposiing is assigned false
                 // Therefore, need to wait for the composition input text to be rendered before performing condition matching
@@ -3278,7 +3180,7 @@
             this.context = {
                 parent: this.editor,
                 selection: this.editor.selection,
-                decorations: this.decorate([this.editor, []]),
+                decorations: this.generateDecorations(),
                 decorate: this.decorate,
                 readonly: this.readonly
             };
@@ -3295,20 +3197,49 @@
             };
         };
         SlateEditableComponent.prototype.detectContext = function () {
+            var decorations = this.generateDecorations();
             if (this.context.selection !== this.editor.selection ||
                 this.context.decorate !== this.decorate ||
-                this.context.readonly !== this.readonly) {
-                var decorations = this.decorate([this.editor, []]);
-                var isSameDecorations = isDecoratorRangeListEqual(this.context.decorations, decorations);
+                this.context.readonly !== this.readonly ||
+                !isDecoratorRangeListEqual(this.context.decorations, decorations)) {
                 this.context = {
                     parent: this.editor,
                     selection: this.editor.selection,
-                    decorations: isSameDecorations ? this.context.decorations : decorations,
+                    decorations: decorations,
                     decorate: this.decorate,
                     readonly: this.readonly
                 };
             }
         };
+        SlateEditableComponent.prototype.composePlaceholderDecorate = function (editor) {
+            if (this.placeholderDecorate) {
+                return this.placeholderDecorate(editor) || [];
+            }
+            if (this.placeholder &&
+                editor.children.length === 1 &&
+                Array.from(slate.Node.texts(editor)).length === 1 &&
+                slate.Node.string(editor) === '') {
+                var start = slate.Editor.start(editor, []);
+                return [
+                    {
+                        placeholder: this.placeholder,
+                        anchor: start,
+                        focus: start,
+                    },
+                ];
+            }
+            else {
+                return [];
+            }
+        };
+        SlateEditableComponent.prototype.generateDecorations = function () {
+            var decorations = this.decorate([this.editor, []]);
+            var placeholderDecorations = this.isComposing
+                ? []
+                : this.composePlaceholderDecorate(this.editor);
+            decorations.push.apply(decorations, __spreadArray([], __read(placeholderDecorations)));
+            return decorations;
+        };
         //#region event proxy
         SlateEditableComponent.prototype.addEventListener = function (eventName, listener, target) {
             var _this = this;
@@ -3529,6 +3460,8 @@
                 // so we need avoid repeat isnertText by isComposing === true,
                 this.isComposing = false;
             }
+            this.detectContext();
+            this.cdr.detectChanges();
         };
         SlateEditableComponent.prototype.onDOMCompositionStart = function (event) {
             var selection = this.editor.selection;
@@ -3542,6 +3475,8 @@
             if (hasEditableTarget(this.editor, event.target) && !this.isDOMEventHandled(event, this.compositionStart)) {
                 this.isComposing = true;
             }
+            this.detectContext();
+            this.cdr.detectChanges();
         };
         SlateEditableComponent.prototype.onDOMCopy = function (event) {
             var window = AngularEditor.getWindow(this.editor);
@@ -3811,6 +3746,25 @@
                             return;
                         }
                     }
+                    else {
+                        if (IS_CHROME || IS_SAFARI) {
+                            // COMPAT: Chrome and Safari support `beforeinput` event but do not fire
+                            // an event when deleting backwards in a selected void inline node
+                            if (selection &&
+                                (hotkeys.isDeleteBackward(nativeEvent) ||
+                                    hotkeys.isDeleteForward(nativeEvent)) &&
+                                slate.Range.isCollapsed(selection)) {
+                                var currentNode = slate.Node.parent(editor, selection.anchor.path);
+                                if (slate.Element.isElement(currentNode) &&
+                                    slate.Editor.isVoid(editor, currentNode) &&
+                                    slate.Editor.isInline(editor, currentNode)) {
+                                    event.preventDefault();
+                                    slate.Editor.deleteBackward(editor, { unit: 'block' });
+                                    return;
+                                }
+                            }
+                        }
+                    }
                 }
                 catch (error) {
                     this.editor.onError({ code: exports.SlateErrorCode.OnDOMKeydownError, nativeError: error });
@@ -3845,7 +3799,7 @@
                     if (!slate.Range.isCollapsed(this.editor.selection)) {
                         slate.Editor.deleteFragment(this.editor);
                     }
-                    // just handle Non-IME input  
+                    // just handle Non-IME input
                     if (!this.isComposing) {
                         slate.Editor.insertText(this.editor, text);
                     }
@@ -3874,11 +3828,11 @@
         return SlateEditableComponent;
     }());
     SlateEditableComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SlateEditableComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }, { token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SlateEditableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SlateEditableComponent, selector: "slate-editable", inputs: { editor: "editor", renderElement: "renderElement", renderLeaf: "renderLeaf", renderText: "renderText", decorate: "decorate", isStrictDecorate: "isStrictDecorate", trackBy: "trackBy", readonly: "readonly", beforeInput: "beforeInput", blur: "blur", click: "click", compositionEnd: "compositionEnd", 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: [{
+    SlateEditableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SlateEditableComponent, selector: "slate-editable", inputs: { editor: "editor", renderElement: "renderElement", renderLeaf: "renderLeaf", renderText: "renderText", decorate: "decorate", placeholderDecorate: "placeholderDecorate", isStrictDecorate: "isStrictDecorate", trackBy: "trackBy", readonly: "readonly", placeholder: "placeholder", beforeInput: "beforeInput", blur: "blur", click: "click", compositionEnd: "compositionEnd", 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: forms.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return SlateEditableComponent; }),
                 multi: true
-            }], viewQueries: [{ propertyName: "templateComponent", first: true, predicate: ["templateComponent"], descendants: true, static: true }, { propertyName: "templateElementRef", first: true, predicate: ["templateComponent"], descendants: true, read: i0.ElementRef, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<slate-children [children]=\"editor.children\" [context]=\"context\" [viewContext]=\"viewContext\" [viewContext]=\"viewContext\"></slate-children>\n<slate-string-template #templateComponent></slate-string-template>", components: [{ type: SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: SlateStringTemplateComponent, selector: "slate-string-template" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+            }], viewQueries: [{ propertyName: "templateComponent", first: true, predicate: ["templateComponent"], descendants: true, static: true }, { propertyName: "templateElementRef", first: true, predicate: ["templateComponent"], descendants: true, read: i0.ElementRef, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<slate-children [children]=\"editor.children\" [context]=\"context\" [viewContext]=\"viewContext\"></slate-children>\n<slate-string-template #templateComponent></slate-string-template>", components: [{ type: SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: SlateStringTemplateComponent, selector: "slate-string-template" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SlateEditableComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3909,12 +3863,16 @@
                     type: i0.Input
                 }], decorate: [{
                     type: i0.Input
+                }], placeholderDecorate: [{
+                    type: i0.Input
                 }], isStrictDecorate: [{
                     type: i0.Input
                 }], trackBy: [{
                     type: i0.Input
                 }], readonly: [{
                     type: i0.Input
+                }], placeholder: [{
+                    type: i0.Input
                 }], beforeInput: [{
                     type: i0.Input
                 }], blur: [{