slate-angular 1.6.2 → 1.7.0

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; };
@@ -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'
@@ -3029,6 +2938,7 @@
     var forceOnDOMPaste = IS_SAFARI;
     var SlateEditableComponent = /** @class */ (function () {
         function SlateEditableComponent(elementRef, renderer2, cdr, ngZone, injector) {
+            var _this = this;
             this.elementRef = elementRef;
             this.renderer2 = renderer2;
             this.cdr = cdr;
@@ -3043,6 +2953,22 @@
             this.onTouchedCallback = function () { };
             this.onChangeCallback = function () { };
             this.decorate = function () { return []; };
+            this.placeholderDecorate = function (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 [];
+                }
+            };
             this.isStrictDecorate = true;
             this.trackBy = function () { return null; };
             this.readonly = false;
@@ -3119,6 +3045,7 @@
                     });
                     this.editor.children = normalize(value);
                 }
+                this.initializeContext();
                 this.cdr.markForCheck();
             }
         };
@@ -3201,14 +3128,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
@@ -3234,34 +3153,42 @@
             timeDebug('editable ngDoCheck');
         };
         SlateEditableComponent.prototype.forceFlush = function () {
+            var _this = this;
             timeDebug('start data sync');
             this.detectContext();
             this.cdr.detectChanges();
+            // repair collaborative editing when Chinese input is interrupted by other users' cursors
             // when the DOMElement where the selection is located is removed
             // the compositionupdate and compositionend events will no longer be fired
             // so isComposing needs to be corrected
             // need exec after this.cdr.detectChanges() to render HTML
             // need exec before this.toNativeSelection() to correct native selection
             if (this.isComposing) {
-                var textNode = slate.Node.get(this.editor, this.editor.selection.anchor.path);
-                var textDOMNode = AngularEditor.toDOMNode(this.editor, textNode);
-                var textContent_1 = '';
-                // skip decorate text
-                textDOMNode.querySelectorAll('[editable-text]').forEach(function (stringDOMNode) {
-                    var text = stringDOMNode.textContent;
-                    var zeroChar = '\uFEFF';
-                    // remove zero with char
-                    if (text.startsWith(zeroChar)) {
-                        text = text.slice(1);
-                    }
-                    if (text.endsWith(zeroChar)) {
-                        text = text.slice(0, text.length - 1);
+                // 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
+                setTimeout(function () {
+                    var textNode = slate.Node.get(_this.editor, _this.editor.selection.anchor.path);
+                    var textDOMNode = AngularEditor.toDOMNode(_this.editor, textNode);
+                    var textContent = '';
+                    // skip decorate text
+                    textDOMNode.querySelectorAll('[editable-text]').forEach(function (stringDOMNode) {
+                        var text = stringDOMNode.textContent;
+                        var zeroChar = '\uFEFF';
+                        // remove zero with char
+                        if (text.startsWith(zeroChar)) {
+                            text = text.slice(1);
+                        }
+                        if (text.endsWith(zeroChar)) {
+                            text = text.slice(0, text.length - 1);
+                        }
+                        textContent += text;
+                    });
+                    if (slate.Node.string(textNode).endsWith(textContent)) {
+                        _this.isComposing = false;
                     }
-                    textContent_1 += text;
-                });
-                if (slate.Node.string(textNode).endsWith(textContent_1)) {
-                    this.isComposing = false;
-                }
+                }, 0);
             }
             this.toNativeSelection();
             timeDebug('end data sync');
@@ -3270,7 +3197,7 @@
             this.context = {
                 parent: this.editor,
                 selection: this.editor.selection,
-                decorations: this.decorate([this.editor, []]),
+                decorations: this.generateDecorations(),
                 decorate: this.decorate,
                 readonly: this.readonly
             };
@@ -3287,20 +3214,26 @@
             };
         };
         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.generateDecorations = function () {
+            var decorations = this.decorate([this.editor, []]);
+            var placeholderDecorations = this.isComposing ? [] : this.placeholderDecorate(this.editor);
+            decorations.push.apply(decorations, __spreadArray([], __read(placeholderDecorations)));
+            return decorations;
+        };
         //#region event proxy
         SlateEditableComponent.prototype.addEventListener = function (eventName, listener, target) {
             var _this = this;
@@ -3521,6 +3454,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;
@@ -3534,6 +3469,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);
@@ -3803,6 +3740,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 });
@@ -3866,11 +3822,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: [{
@@ -3901,12 +3857,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: [{