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

package/fesm2020/slate-angular.mjs

@@ -1624,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 {
@@ -2105,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 });
@@ -2145,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) {
@@ -2262,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,
@@ -2286,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;
@@ -2635,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);