slate-angular 1.6.2 → 1.7.0

package/fesm2015/slate-angular.js

@@ -5,7 +5,6 @@ import { TemplateRef, Component, ViewChild, Directive, Input, HostBinding, Chang
 import { __rest } from 'tslib';
 import getDirection from 'direction';
 import { Subject } from 'rxjs';
-import scrollIntoView from 'scroll-into-view-if-needed';
 import Debug from 'debug';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { HistoryEditor } from 'slate-history';
@@ -1183,102 +1182,6 @@ const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
             }
         }
     };
-    // override slate layer logic
-    e.normalizeNode = (entry) => {
-        const [node, path] = entry;
-        // There are no core normalizations for text nodes.
-        if (Text$1.isText(node)) {
-            return;
-        }
-        // Ensure that block and inline nodes have at least one text child.
-        if (Element.isElement(node) && node.children.length === 0) {
-            const child = { text: '' };
-            Transforms.insertNodes(editor, child, {
-                at: path.concat(0),
-                voids: true,
-            });
-            return;
-        }
-        // Determine whether the node should have block or inline children.
-        const shouldHaveInlines = Editor.isEditor(node)
-            ? false
-            : Element.isElement(node) &&
-                (editor.isInline(node) ||
-                    node.children.length === 0 ||
-                    Text$1.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.
-        let n = 0;
-        for (let i = 0; i < node.children.length; i++, n++) {
-            const child = node.children[i];
-            const prev = node.children[i - 1];
-            const isLast = i === node.children.length - 1;
-            const isInlineOrText = Text$1.isText(child) ||
-                (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) {
-                Transforms.removeNodes(editor, { at: path.concat(n), voids: true });
-                n--;
-            }
-            else if (Element.isElement(child)) {
-                // Ensure that inline nodes are surrounded by text nodes.
-                if (editor.isInline(child)) {
-                    if (prev == null || !Text$1.isText(prev)) {
-                        const newChild = { text: '' };
-                        Transforms.insertNodes(editor, newChild, {
-                            at: path.concat(n),
-                            voids: true,
-                        });
-                        n++;
-                    }
-                    else if (isLast) {
-                        const newChild = { text: '' };
-                        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 && Text$1.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
-                        const prevFocused = editor.selection &&
-                            Range.isCollapsed(editor.selection) &&
-                            Path.equals(editor.selection.anchor.path, path.concat(n - 1));
-                        if (prev === node.children[0] && prevFocused) {
-                            Transforms.select(editor, Editor.start(editor, path.concat(n)));
-                        }
-                        Transforms.removeNodes(editor, {
-                            at: path.concat(n - 1),
-                            voids: true,
-                        });
-                        n--;
-                    }
-                    else if (Text$1.equals(child, prev, { loose: true })) {
-                        Transforms.mergeNodes(editor, { at: path.concat(n), voids: true });
-                        n--;
-                    }
-                    else if (isLast && child.text === '') {
-                        Transforms.removeNodes(editor, {
-                            at: path.concat(n),
-                            voids: true,
-                        });
-                        n--;
-                    }
-                }
-            }
-        }
-    };
     e.onKeydown = () => { };
     e.onClick = () => { };
     e.isBlockCard = (element) => false;
@@ -1966,7 +1869,6 @@ class ViewContainer {
         // first diff
         differ.diff(this.childrenComponent);
         const parentElement = this.elementRef.nativeElement.parentElement;
-        let firstChildComponent = this.childrenComponent.first;
         if (this.childrenComponent.length > 0) {
             parentElement.insertBefore(this.createFragment(), this.elementRef.nativeElement);
             this.elementRef.nativeElement.remove();
@@ -1974,41 +1876,15 @@ class ViewContainer {
         this.childrenComponent.changes.subscribe((value) => {
             const iterableChanges = differ.diff(this.childrenComponent);
             if (iterableChanges) {
-                iterableChanges.forEachAddedItem((record) => {
-                    // first insert
-                    if (this.elementRef.nativeElement.parentElement && this.elementRef.nativeElement.parentElement === parentElement) {
-                        const fragment = document.createDocumentFragment();
-                        fragment.append(...record.item.rootNodes);
-                        parentElement.insertBefore(fragment, this.elementRef.nativeElement);
-                        this.elementRef.nativeElement.remove();
+                iterableChanges.forEachOperation((record, previousIndex, currentIndex) => {
+                    // removed
+                    if (currentIndex === null) {
                         return;
                     }
-                    // insert at start location
-                    if (record.currentIndex === 0 && firstChildComponent) {
-                        const fragment = document.createDocumentFragment();
-                        fragment.append(...record.item.rootNodes);
-                        parentElement.prepend(fragment);
-                    }
-                    else {
-                        // insert afterend of previous component end
-                        let previousRootNode = this.getPreviousRootNode(record.currentIndex);
-                        if (previousRootNode) {
-                            record.item.rootNodes.forEach((rootNode) => {
-                                previousRootNode.insertAdjacentElement('afterend', rootNode);
-                                previousRootNode = rootNode;
-                            });
-                        }
-                        else {
-                            this.viewContext.editor.onError({
-                                code: SlateErrorCode.NotFoundPreviousRootNodeError,
-                                name: 'not found previous rootNode',
-                                nativeError: null
-                            });
-                        }
-                    }
+                    // added or moved
+                    this.handleContainerItemChange(record, parentElement);
                 });
             }
-            firstChildComponent = this.childrenComponent.first;
         });
     }
     getPreviousRootNode(currentIndex) {
@@ -2031,6 +1907,39 @@ class ViewContainer {
         });
         return fragment;
     }
+    handleContainerItemChange(record, parentElement) {
+        // first insert
+        if (this.elementRef.nativeElement.parentElement && this.elementRef.nativeElement.parentElement === parentElement) {
+            const fragment = document.createDocumentFragment();
+            fragment.append(...record.item.rootNodes);
+            parentElement.insertBefore(fragment, this.elementRef.nativeElement);
+            this.elementRef.nativeElement.remove();
+            return;
+        }
+        // insert at start location
+        if (record.currentIndex === 0) {
+            const fragment = document.createDocumentFragment();
+            fragment.append(...record.item.rootNodes);
+            parentElement.prepend(fragment);
+        }
+        else {
+            // insert afterend of previous component end
+            let previousRootNode = this.getPreviousRootNode(record.currentIndex);
+            if (previousRootNode) {
+                record.item.rootNodes.forEach((rootNode) => {
+                    previousRootNode.insertAdjacentElement('afterend', rootNode);
+                    previousRootNode = rootNode;
+                });
+            }
+            else {
+                this.viewContext.editor.onError({
+                    code: SlateErrorCode.NotFoundPreviousRootNodeError,
+                    name: 'not found previous rootNode',
+                    nativeError: null
+                });
+            }
+        }
+    }
 }
 ViewContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: ViewContainer, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Directive });
 ViewContainer.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.7", type: ViewContainer, inputs: { viewContext: "viewContext" }, ngImport: i0 });
@@ -2111,12 +2020,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
 class SlateDefaultLeafComponent extends BaseLeafComponent {
 }
 SlateDefaultLeafComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SlateDefaultLeafComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SlateDefaultLeafComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SlateDefaultLeafComponent, selector: "span[slateDefaultLeaf]", host: { attributes: { "data-slate-leaf": "true" } }, usesInheritance: true, ngImport: i0, template: `<span slateString [context]="context" [viewContext]="viewContext"><span>`, isInline: true, components: [{ type: SlateStringComponent, selector: "span[slateString]", inputs: ["context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SlateDefaultLeafComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SlateDefaultLeafComponent, selector: "span[slateDefaultLeaf]", host: { attributes: { "data-slate-leaf": "true" } }, usesInheritance: true, ngImport: i0, template: `
+        <ng-container *ngIf="context.leaf['placeholder']">
+            <span contenteditable="false" data-slate-placeholder="true" slate-placeholder="true">{{context.leaf['placeholder']}}</span>
+        </ng-container>
+        <span slateString [context]="context" [viewContext]="viewContext"><span>`, isInline: true, components: [{ type: SlateStringComponent, selector: "span[slateString]", inputs: ["context"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SlateDefaultLeafComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'span[slateDefaultLeaf]',
-                    template: `<span slateString [context]="context" [viewContext]="viewContext"><span>`,
+                    template: `
+        <ng-container *ngIf="context.leaf['placeholder']">
+            <span contenteditable="false" data-slate-placeholder="true" slate-placeholder="true">{{context.leaf['placeholder']}}</span>
+        </ng-container>
+        <span slateString [context]="context" [viewContext]="viewContext"><span>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         'data-slate-leaf': 'true'
@@ -2526,6 +2443,22 @@ class SlateEditableComponent {
         this.onTouchedCallback = () => { };
         this.onChangeCallback = () => { };
         this.decorate = () => [];
+        this.placeholderDecorate = (editor) => {
+            if (this.placeholder &&
+                editor.children.length === 1 &&
+                Array.from(Node.texts(editor)).length === 1 &&
+                Node.string(editor) === '') {
+                const start = Editor.start(editor, []);
+                return [{
+                        placeholder: this.placeholder,
+                        anchor: start,
+                        focus: start
+                    }];
+            }
+            else {
+                return [];
+            }
+        };
         this.isStrictDecorate = true;
         this.trackBy = () => null;
         this.readonly = false;
@@ -2597,6 +2530,7 @@ class SlateEditableComponent {
                 });
                 this.editor.children = normalize(value);
             }
+            this.initializeContext();
             this.cdr.markForCheck();
         }
     }
@@ -2677,14 +2611,6 @@ class SlateEditableComponent {
                     // eslint-disable-next-line max-len
                     domSelection.setBaseAndExtent(newDomRange.startContainer, newDomRange.startOffset, newDomRange.endContainer, newDomRange.endOffset);
                 }
-                const leafEl = newDomRange.startContainer.parentElement;
-                leafEl.getBoundingClientRect = newDomRange.getBoundingClientRect.bind(newDomRange);
-                scrollIntoView(leafEl, {
-                    scrollMode: 'if-needed',
-                    boundary: el,
-                });
-                // @ts-ignore
-                delete leafEl.getBoundingClientRect;
             }
             setTimeout(() => {
                 // COMPAT: In Firefox, it's not enough to create a range, you also need
@@ -2713,31 +2639,38 @@ class SlateEditableComponent {
         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) {
-            const textNode = Node.get(this.editor, this.editor.selection.anchor.path);
-            const textDOMNode = AngularEditor.toDOMNode(this.editor, textNode);
-            let textContent = '';
-            // skip decorate text
-            textDOMNode.querySelectorAll('[editable-text]').forEach((stringDOMNode) => {
-                let text = stringDOMNode.textContent;
-                const 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(() => {
+                const textNode = Node.get(this.editor, this.editor.selection.anchor.path);
+                const textDOMNode = AngularEditor.toDOMNode(this.editor, textNode);
+                let textContent = '';
+                // skip decorate text
+                textDOMNode.querySelectorAll('[editable-text]').forEach((stringDOMNode) => {
+                    let text = stringDOMNode.textContent;
+                    const 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 (Node.string(textNode).endsWith(textContent)) {
+                    this.isComposing = false;
                 }
-                textContent += text;
-            });
-            if (Node.string(textNode).endsWith(textContent)) {
-                this.isComposing = false;
-            }
+            }, 0);
         }
         this.toNativeSelection();
         timeDebug('end data sync');
@@ -2746,7 +2679,7 @@ class SlateEditableComponent {
         this.context = {
             parent: this.editor,
             selection: this.editor.selection,
-            decorations: this.decorate([this.editor, []]),
+            decorations: this.generateDecorations(),
             decorate: this.decorate,
             readonly: this.readonly
         };
@@ -2763,20 +2696,26 @@ class SlateEditableComponent {
         };
     }
     detectContext() {
+        const decorations = this.generateDecorations();
         if (this.context.selection !== this.editor.selection ||
             this.context.decorate !== this.decorate ||
-            this.context.readonly !== this.readonly) {
-            const decorations = this.decorate([this.editor, []]);
-            const 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
             };
         }
     }
+    generateDecorations() {
+        const decorations = this.decorate([this.editor, []]);
+        const placeholderDecorations = this.isComposing ? [] : this.placeholderDecorate(this.editor);
+        decorations.push(...placeholderDecorations);
+        return decorations;
+    }
     //#region event proxy
     addEventListener(eventName, listener, target = this.elementRef.nativeElement) {
         this.manualListeners.push(this.renderer2.listen(target, eventName, (event) => {
@@ -2995,6 +2934,8 @@ class SlateEditableComponent {
             // so we need avoid repeat isnertText by isComposing === true,
             this.isComposing = false;
         }
+        this.detectContext();
+        this.cdr.detectChanges();
     }
     onDOMCompositionStart(event) {
         const { selection } = this.editor;
@@ -3008,6 +2949,8 @@ class SlateEditableComponent {
         if (hasEditableTarget(this.editor, event.target) && !this.isDOMEventHandled(event, this.compositionStart)) {
             this.isComposing = true;
         }
+        this.detectContext();
+        this.cdr.detectChanges();
     }
     onDOMCopy(event) {
         const window = AngularEditor.getWindow(this.editor);
@@ -3277,6 +3220,25 @@ class SlateEditableComponent {
                         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)) &&
+                            Range.isCollapsed(selection)) {
+                            const currentNode = Node.parent(editor, selection.anchor.path);
+                            if (Element.isElement(currentNode) &&
+                                Editor.isVoid(editor, currentNode) &&
+                                Editor.isInline(editor, currentNode)) {
+                                event.preventDefault();
+                                Editor.deleteBackward(editor, { unit: 'block' });
+                                return;
+                            }
+                        }
+                    }
+                }
             }
             catch (error) {
                 this.editor.onError({ code: SlateErrorCode.OnDOMKeydownError, nativeError: error });
@@ -3339,11 +3301,11 @@ class SlateEditableComponent {
     }
 }
 SlateEditableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SlateEditableComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-SlateEditableComponent.ɵcmp = i0.ɵɵ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.ɵɵ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: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => SlateEditableComponent),
             multi: true
-        }], viewQueries: [{ propertyName: "templateComponent", first: true, predicate: ["templateComponent"], descendants: true, static: true }, { propertyName: "templateElementRef", first: true, predicate: ["templateComponent"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, 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.ChangeDetectionStrategy.OnPush });
+        }], viewQueries: [{ propertyName: "templateComponent", first: true, predicate: ["templateComponent"], descendants: true, static: true }, { propertyName: "templateElementRef", first: true, predicate: ["templateComponent"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, 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.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SlateEditableComponent, decorators: [{
             type: Component,
             args: [{
@@ -3374,12 +3336,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                 type: Input
             }], decorate: [{
                 type: Input
+            }], placeholderDecorate: [{
+                type: Input
             }], isStrictDecorate: [{
                 type: Input
             }], trackBy: [{
                 type: Input
             }], readonly: [{
                 type: Input
+            }], placeholder: [{
+                type: Input
             }], beforeInput: [{
                 type: Input
             }], blur: [{