slate-angular 15.1.0-next.1 → 15.1.0-next.3

package/fesm2020/slate-angular.mjs

@@ -3,6 +3,7 @@ import { isKeyHotkey } from 'is-hotkey';
 import * as i0 from '@angular/core';
 import { TemplateRef, Component, ChangeDetectionStrategy, ViewChild, Directive, Input, HostBinding, ViewChildren, InjectionToken, Inject, forwardRef, ElementRef, NgModule } from '@angular/core';
 import getDirection from 'direction';
+import scrollIntoView from 'scroll-into-view-if-needed';
 import { Subject } from 'rxjs';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { HistoryEditor } from 'slate-history';
@@ -1623,25 +1624,19 @@ function restoreDom(editor, execute) {
 class SlateStringTemplateComponent {
 }
 SlateStringTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SlateStringTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SlateStringTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: SlateStringTemplateComponent, selector: "slate-string-template", viewQueries: [{ propertyName: "compatStringTemplate", first: true, predicate: ["compatStringTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "emptyStringTemplate", first: true, predicate: ["emptyStringTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "emptyTextTemplate", first: true, predicate: ["emptyTextTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "lineBreakEmptyStringTemplate", first: true, predicate: ["lineBreakEmptyStringTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #compatStringTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n  <!-- Compatible with Chinese input in Chrome with \\n -->\n  <span editable-text data-slate-string=\"true\"\n    >{{ context.text }}<span data-slate-zero-width>{{ '\\uFEFF' }}</span></span\n  >\n</ng-template>\n<ng-template #emptyStringTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n  <span editable-text data-slate-zero-width=\"z\" attr.data-slate-length=\"{{ context.elementStringLength }}\">{{ '\\uFEFF' }}</span>\n</ng-template>\n<ng-template #emptyTextTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n  <span editable-text data-slate-zero-width=\"z\" data-slate-length=\"0\">{{ '\\uFEFF' }}</span>\n</ng-template>\n<ng-template #lineBreakEmptyStringTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n  <span editable-text data-slate-zero-width=\"n\" attr.data-slate-length=\"{{ context.elementStringLength }}\">{{ '\\uFEFF' }}<br /></span>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SlateStringTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: SlateStringTemplateComponent, selector: "slate-string-template", viewQueries: [{ propertyName: "compatibleStringTemplate", first: true, predicate: ["compatibleStringTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "voidStringTemplate", first: true, predicate: ["voidStringTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "emptyTextTemplate", first: true, predicate: ["emptyTextTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #compatibleStringTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n  <!-- Compatible with Chinese input in Chrome with \\n -->\n  <span editable-text data-slate-string=\"true\"\n    >{{ context.text }}<span data-slate-zero-width>{{ '\\uFEFF' }}</span></span\n  >\n</ng-template>\n<ng-template #voidStringTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n  <span editable-text data-slate-zero-width=\"z\" attr.data-slate-length=\"{{ context.elementStringLength }}\">{{ '\\uFEFF' }}</span>\n</ng-template>\n<ng-template #emptyTextTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n  <span editable-text data-slate-zero-width=\"z\" data-slate-length=\"0\">{{ '\\uFEFF' }}</span>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SlateStringTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'slate-string-template', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #compatStringTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n  <!-- Compatible with Chinese input in Chrome with \\n -->\n  <span editable-text data-slate-string=\"true\"\n    >{{ context.text }}<span data-slate-zero-width>{{ '\\uFEFF' }}</span></span\n  >\n</ng-template>\n<ng-template #emptyStringTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n  <span editable-text data-slate-zero-width=\"z\" attr.data-slate-length=\"{{ context.elementStringLength }}\">{{ '\\uFEFF' }}</span>\n</ng-template>\n<ng-template #emptyTextTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n  <span editable-text data-slate-zero-width=\"z\" data-slate-length=\"0\">{{ '\\uFEFF' }}</span>\n</ng-template>\n<ng-template #lineBreakEmptyStringTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n  <span editable-text data-slate-zero-width=\"n\" attr.data-slate-length=\"{{ context.elementStringLength }}\">{{ '\\uFEFF' }}<br /></span>\n</ng-template>\n" }]
-        }], propDecorators: { compatStringTemplate: [{
+            args: [{ selector: 'slate-string-template', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #compatibleStringTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n  <!-- Compatible with Chinese input in Chrome with \\n -->\n  <span editable-text data-slate-string=\"true\"\n    >{{ context.text }}<span data-slate-zero-width>{{ '\\uFEFF' }}</span></span\n  >\n</ng-template>\n<ng-template #voidStringTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n  <span editable-text data-slate-zero-width=\"z\" attr.data-slate-length=\"{{ context.elementStringLength }}\">{{ '\\uFEFF' }}</span>\n</ng-template>\n<ng-template #emptyTextTemplate let-context=\"context\" let-viewContext=\"viewContext\">\n  <span editable-text data-slate-zero-width=\"z\" data-slate-length=\"0\">{{ '\\uFEFF' }}</span>\n</ng-template>\n" }]
+        }], propDecorators: { compatibleStringTemplate: [{
                 type: ViewChild,
-                args: ['compatStringTemplate', { read: TemplateRef, static: true }]
-            }], emptyStringTemplate: [{
+                args: ['compatibleStringTemplate', { read: TemplateRef, static: true }]
+            }], voidStringTemplate: [{
                 type: ViewChild,
-                args: ['emptyStringTemplate', { read: TemplateRef, static: true }]
+                args: ['voidStringTemplate', { read: TemplateRef, static: true }]
             }], emptyTextTemplate: [{
                 type: ViewChild,
                 args: ['emptyTextTemplate', { read: TemplateRef, static: true }]
-            }], lineBreakEmptyStringTemplate: [{
-                type: ViewChild,
-                args: ['lineBreakEmptyStringTemplate', {
-                        read: TemplateRef,
-                        static: true
-                    }]
             }] } });
 
 class SlateBlockCardComponent {
@@ -2104,15 +2099,57 @@ class SlateDefaultStringComponent extends BaseComponent {
         this.elementRef = elementRef;
         this.cdr = cdr;
     }
+    beforeContextChange(value) {
+        if (this.context) {
+            if (this.context.type === 'lineBreakEmptyString') {
+                this.removeLineBreakEmptyStringDOM();
+            }
+            if (this.context.type === 'string') {
+                if (value.type === 'lineBreakEmptyString') {
+                    this.removeStringDOM();
+                }
+            }
+        }
+    }
     onContextChange() {
+        if (this.context.type === 'string') {
+            this.createStringDOM();
+        }
+        else if (this.context.type === 'lineBreakEmptyString') {
+            this.createLineBreakEmptyStringDOM();
+        }
+    }
+    createLineBreakEmptyStringDOM() {
+        this.nativeElement.setAttribute('data-slate-zero-width', 'n');
+        this.nativeElement.setAttribute('data-slate-length', `${this.context.elementStringLength}`);
+        this.textNode = document.createTextNode(`\uFEFF`);
+        this.brNode = document.createElement('br');
+        this.nativeElement.append(this.textNode, this.brNode);
+    }
+    removeLineBreakEmptyStringDOM() {
+        this.brNode?.remove();
+        // remove zero width character
+        const zeroWidthCharacterIndex = this.textNode?.textContent.indexOf(`\uFEFF`);
+        this.textNode?.deleteData(zeroWidthCharacterIndex, 1);
+        this.nativeElement.removeAttribute('data-slate-zero-width');
+        this.nativeElement.removeAttribute('data-slate-length');
+    }
+    createStringDOM() {
+        this.nativeElement.setAttribute('data-slate-string', 'true');
+        this.updateStringDOM();
+    }
+    updateStringDOM() {
         // Avoid breaking some browser default behaviors, such as spellCheck, android composition input state
         if (this.nativeElement.textContent !== this.context.text) {
             this.nativeElement.textContent = this.context.text;
         }
     }
+    removeStringDOM() {
+        this.nativeElement.removeAttribute('data-slate-string');
+        this.nativeElement.textContent = '';
+    }
     ngOnInit() {
         this.nativeElement.setAttribute('editable-text', '');
-        this.nativeElement.setAttribute('data-slate-string', 'true');
     }
 }
 SlateDefaultStringComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SlateDefaultStringComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
@@ -2144,40 +2181,60 @@ class SlateStringComponent extends ViewContainerItem {
     ngAfterViewInit() {
         this.elementRef.nativeElement.remove();
     }
-    getViewType() {
+    // COMPAT: If this is the last text node in an empty block, render a zero-
+    // width space that will convert into a line break when copying and pasting
+    // to support expected plain text.
+    isLineBreakEmptyString() {
         const path = AngularEditor.findPath(this.viewContext.editor, this.context.text);
         const parentPath = Path.parent(path);
-        // COMPAT: Render text inside void nodes with a zero-width space.
-        // So the node can contain selection but the text is not visible.
-        if (this.viewContext.editor.isVoid(this.context.parent)) {
-            return this.viewContext.templateComponent.emptyStringTemplate;
-        }
-        // COMPAT: If this is the last text node in an empty block, render a zero-
-        // width space that will convert into a line break when copying and pasting
-        // to support expected plain text.
-        if (this.context.leaf.text === '' &&
+        return (this.context.leaf.text === '' &&
             this.context.parent.children[this.context.parent.children.length - 1] === this.context.text &&
             !this.viewContext.editor.isInline(this.context.parent) &&
-            Editor.string(this.viewContext.editor, parentPath) === '') {
-            return this.viewContext.templateComponent.lineBreakEmptyStringTemplate;
+            Editor.string(this.viewContext.editor, parentPath) === '');
+    }
+    // COMPAT: If the text is empty, it's because it's on the edge of an inline
+    // node, so we render a zero-width space so that the selection can be
+    // inserted next to it still.
+    isEmptyText() {
+        return this.context.leaf.text === '';
+    }
+    // COMPAT: Browsers will collapse trailing new lines at the end of blocks,
+    // so we need to add an extra trailing new lines to prevent that.
+    isCompatibleString() {
+        return this.context.isLast && this.context.leaf.text.slice(-1) === '\n';
+    }
+    // COMPAT: Render text inside void nodes with a zero-width space.
+    // So the node can contain selection but the text is not visible.
+    isVoid() {
+        return this.viewContext.editor.isVoid(this.context.parent);
+    }
+    getViewType() {
+        if (this.isVoid()) {
+            return this.viewContext.templateComponent.voidStringTemplate;
         }
-        // COMPAT: If the text is empty, it's because it's on the edge of an inline
-        // node, so we render a zero-width space so that the selection can be
-        // inserted next to it still.
-        if (this.context.leaf.text === '') {
+        if (this.isLineBreakEmptyString()) {
+            return SlateDefaultStringComponent;
+        }
+        if (this.isEmptyText()) {
             return this.viewContext.templateComponent.emptyTextTemplate;
         }
-        // COMPAT: Browsers will collapse trailing new lines at the end of blocks,
-        // so we need to add an extra trailing new lines to prevent that.
-        if (this.context.isLast && this.context.leaf.text.slice(-1) === '\n') {
-            return this.viewContext.templateComponent.compatStringTemplate;
+        if (this.isCompatibleString()) {
+            return this.viewContext.templateComponent.compatibleStringTemplate;
         }
         return SlateDefaultStringComponent;
     }
+    getType() {
+        if (this.isLineBreakEmptyString()) {
+            return 'lineBreakEmptyString';
+        }
+        return 'string';
+    }
     getContext() {
+        const stringType = this.getType();
         return {
             text: this.context.leaf.text,
-            elementStringLength: Node.string(this.context.parent).length
+            elementStringLength: Node.string(this.context.parent).length,
+            type: stringType
         };
     }
     memoizedContext(prev, next) {
@@ -2261,10 +2318,10 @@ class SlateLeavesComponent extends ViewContainer {
     }
     ngOnInit() {
         this.leaves = Text$1.decorations(this.context.text, this.context.decorations);
-        this.leafContexts = this.getLeafCotexts();
+        this.leafContexts = this.getLeafContexts();
         this.initialized = true;
     }
-    getLeafCotexts() {
+    getLeafContexts() {
         return this.leaves.map((leaf, index) => {
             return {
                 leaf,
@@ -2285,7 +2342,7 @@ class SlateLeavesComponent extends ViewContainer {
         if (previousValue.text !== currentValue.text || !isDecoratorRangeListEqual(previousValue.decorations, currentValue.decorations)) {
             this.leaves = Text$1.decorations(this.context.text, this.context.decorations);
         }
-        this.leafContexts = this.getLeafCotexts();
+        this.leafContexts = this.getLeafContexts();
     }
     trackBy(index, item) {
         return index;
@@ -2601,6 +2658,7 @@ class SlateEditableComponent {
         this.onTouchedCallback = () => { };
         this.onChangeCallback = () => { };
         this.decorate = () => [];
+        this.scrollSelectionIntoView = defaultScrollSelectionIntoView;
         this.isStrictDecorate = true;
         this.trackBy = () => null;
         this.readonly = false;
@@ -2633,7 +2691,7 @@ class SlateEditableComponent {
         this.initializeViewContext();
         this.initializeContext();
         // remove unused DOM, just keep templateComponent instance
-        this.templateElementRef.nativeElement.remove();
+        // this.templateElementRef.nativeElement.remove();
         // add browser class
         let browserClass = IS_FIREFOX ? 'firefox' : IS_SAFARI ? 'safari' : '';
         browserClass && this.elementRef.nativeElement.classList.add(browserClass);
@@ -2766,6 +2824,7 @@ class SlateEditableComponent {
             else {
                 domSelection.removeAllRanges();
             }
+            this.scrollSelectionIntoView(this.editor, newDomRange);
             setTimeout(() => {
                 // COMPAT: In Firefox, it's not enough to create a range, you also need
                 // to focus the contenteditable element too. (2016/11/16)
@@ -3567,7 +3626,7 @@ class SlateEditableComponent {
     }
 }
 SlateEditableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", 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: "14.0.0", version: "15.1.4", 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: [
+SlateEditableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: SlateEditableComponent, selector: "slate-editable", inputs: { editor: "editor", renderElement: "renderElement", renderLeaf: "renderLeaf", renderText: "renderText", decorate: "decorate", placeholderDecorate: "placeholderDecorate", scrollSelectionIntoView: "scrollSelectionIntoView", 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),
@@ -3602,6 +3661,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                 type: Input
             }], placeholderDecorate: [{
                 type: Input
+            }], scrollSelectionIntoView: [{
+                type: Input
             }], isStrictDecorate: [{
                 type: Input
             }], trackBy: [{
@@ -3660,6 +3721,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                 type: ViewChild,
                 args: ['templateComponent', { static: true, read: ElementRef }]
             }] } });
+const defaultScrollSelectionIntoView = (editor, domRange) => {
+    // This was affecting the selection of multiple blocks and dragging behavior,
+    // so enabled only if the selection has been collapsed.
+    if (domRange.getBoundingClientRect && (!editor.selection || (editor.selection && Range.isCollapsed(editor.selection)))) {
+        const leafEl = domRange.startContainer.parentElement;
+        leafEl.getBoundingClientRect = domRange.getBoundingClientRect.bind(domRange);
+        scrollIntoView(leafEl, {
+            scrollMode: 'if-needed'
+        });
+        delete leafEl.getBoundingClientRect;
+    }
+};
 /**
  * Check if the target is editable and in the editor.
  */