slate-angular 1.6.5 → 1.7.4

package/bundles/slate-angular.umd.js

@@ -2177,6 +2177,31 @@
             }
             this.cdr.markForCheck();
         };
+        BaseLeafComponent.prototype.renderPlaceholder = function () {
+            // 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.placeholderElement) {
+                    this.placeholderElement = document.createElement('span');
+                    this.placeholderElement.innerText = this.context.leaf['placeholder'];
+                    this.placeholderElement.contentEditable = 'false';
+                    this.placeholderElement.setAttribute('data-slate-placeholder', 'true');
+                    this.nativeElement.classList.add('leaf-with-placeholder');
+                    this.nativeElement.appendChild(this.placeholderElement);
+                }
+            }
+            else {
+                this.destroyPlaceholder();
+            }
+        };
+        BaseLeafComponent.prototype.destroyPlaceholder = function () {
+            if (this.placeholderElement) {
+                this.placeholderElement.remove();
+                this.placeholderElement = null;
+                this.nativeElement.classList.remove('leaf-with-placeholder');
+            }
+        };
         return BaseLeafComponent;
     }(BaseComponent));
     BaseLeafComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: BaseLeafComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
@@ -2295,7 +2320,7 @@
         }
         Object.defineProperty(BaseTextComponent.prototype, "text", {
             get: function () {
-                return this._context.text;
+                return this._context && this._context.text;
             },
             enumerable: false,
             configurable: true
@@ -2346,7 +2371,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 +2378,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 +2409,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 });
@@ -2497,6 +2528,14 @@
         function SlateDefaultLeafComponent() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
+        SlateDefaultLeafComponent.prototype.onContextChange = function () {
+            _super.prototype.onContextChange.call(this);
+            this.renderPlaceholder();
+        };
+        SlateDefaultLeafComponent.prototype.ngOnDestroy = function () {
+            // Because the placeholder span is not in the current component, it is destroyed along with the current component
+            this.destroyPlaceholder();
+        };
         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 });
@@ -3022,6 +3061,7 @@
                     });
                     this.editor.children = normalize(value);
                 }
+                this.initializeContext();
                 this.cdr.markForCheck();
             }
         };
@@ -3140,7 +3180,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 +3213,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 +3230,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;
@@ -3424,6 +3493,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 +3508,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 +3779,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 });
@@ -3740,7 +3832,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);
                     }
@@ -3769,11 +3861,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 +3896,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: [{