slate-angular 1.6.4 → 1.7.3

package/bundles/slate-angular.umd.js

@@ -1587,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; };
@@ -2273,6 +2177,38 @@
             }
             this.cdr.markForCheck();
         };
+        BaseLeafComponent.prototype.renderPlaceholder = function () {
+            var _a, _b, _c;
+            // issue-1: IME input was interrupted
+            // issue-2: IME input focus jumping
+            // Issue occurs when the placeholder node is removed (in leaf span)
+            // So add a placeholder span to the block element root 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');
+                    (_a = this.nativeElement.closest('[data-slate-node="element"]')) === null || _a === void 0 ? void 0 : _a.classList.add('element-placeholder');
+                    (_b = this.nativeElement.closest('[data-slate-node="element"]')) === null || _b === void 0 ? void 0 : _b.appendChild(this.placeholderElement);
+                }
+            }
+            else {
+                if (this.placeholderElement) {
+                    this.placeholderElement.remove();
+                    this.placeholderElement = null;
+                    (_c = this.nativeElement.closest('[data-slate-node="element"]')) === null || _c === void 0 ? void 0 : _c.classList.remove('element-placeholder');
+                }
+            }
+        };
+        BaseLeafComponent.prototype.destroyPlaceholder = function () {
+            var _a, _b;
+            if (this.placeholderElement) {
+                this.placeholderElement.remove();
+                this.placeholderElement = null;
+                (_b = (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.closest('[data-slate-node="element"]')) === null || _b === void 0 ? void 0 : _b.classList.remove('element-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 });
@@ -2391,7 +2327,7 @@
         }
         Object.defineProperty(BaseTextComponent.prototype, "text", {
             get: function () {
-                return this._context.text;
+                return this._context && this._context.text;
             },
             enumerable: false,
             configurable: true
@@ -2442,7 +2378,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();
@@ -2450,41 +2385,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) {
@@ -2507,6 +2416,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 });
@@ -2593,6 +2535,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 });
@@ -3118,6 +3068,7 @@
                     });
                     this.editor.children = normalize(value);
                 }
+                this.initializeContext();
                 this.cdr.markForCheck();
             }
         };
@@ -3236,7 +3187,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
@@ -3269,7 +3220,7 @@
             this.context = {
                 parent: this.editor,
                 selection: this.editor.selection,
-                decorations: this.decorate([this.editor, []]),
+                decorations: this.generateDecorations(),
                 decorate: this.decorate,
                 readonly: this.readonly
             };
@@ -3286,20 +3237,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;
@@ -3520,6 +3500,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;
@@ -3533,6 +3515,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);
@@ -3802,6 +3786,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 });
@@ -3836,7 +3839,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);
                     }
@@ -3865,11 +3868,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: [{
@@ -3900,12 +3903,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: [{