slate-angular 1.6.5 → 1.7.0

package/bundles/slate-angular.umd.js

@@ -2346,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();
@@ -2354,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) {
@@ -2411,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 });
@@ -2500,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'
@@ -2932,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;
@@ -2946,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;
@@ -3022,6 +3045,7 @@
                     });
                     this.editor.children = normalize(value);
                 }
+                this.initializeContext();
                 this.cdr.markForCheck();
             }
         };
@@ -3140,7 +3164,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
@@ -3173,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
             };
@@ -3190,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;
@@ -3424,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;
@@ -3437,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);
@@ -3706,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 });
@@ -3769,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: [{
@@ -3804,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: [{