slate-angular 20.0.0 → 20.1.0

package/fesm2022/slate-angular.mjs

@@ -2,7 +2,7 @@ import { Editor, Range, Element, Transforms, Text as Text$1, Node, Path } from '
 import { EDITOR_TO_ELEMENT, NODE_TO_ELEMENT, DOMEditor, normalizeDOMPoint, isDOMSelection, IS_CHROME as IS_CHROME$1, hasShadowRoot, isDOMElement, NODE_TO_PARENT, NODE_TO_INDEX, IS_FOCUSED, isDOMNode, withDOM, NODE_TO_KEY, ELEMENT_TO_NODE, getDefaultView, EDITOR_TO_WINDOW, IS_READ_ONLY, EDITOR_TO_ON_CHANGE, TRIPLE_CLICK, isPlainTextOnlyPaste } from 'slate-dom';
 import { isKeyHotkey } from 'is-hotkey';
 import * as i0 from '@angular/core';
-import { TemplateRef, ViewChild, Component, ComponentRef, IterableDiffers, inject, ViewContainerRef, forwardRef, HostBinding, Input, ChangeDetectionStrategy, NgModule, ElementRef, ChangeDetectorRef, Directive } from '@angular/core';
+import { TemplateRef, ComponentRef, IterableDiffers, inject, ViewContainerRef, forwardRef, HostBinding, Input, ChangeDetectionStrategy, Component, NgModule, ElementRef, ChangeDetectorRef, Directive, ViewChild } from '@angular/core';
 import { direction } from 'direction';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { Subject } from 'rxjs';
@@ -839,6 +839,9 @@ const getContentHeight = (element) => {
     }
     return Math.max(contentHeight, 0);
 };
+const getZeroTextNode = () => {
+    return document.createTextNode('\uFEFF');
+};
 
 const buildHTMLText = (wrapper, attach, data) => {
     const stringObj = JSON.stringify(data);
@@ -1512,38 +1515,12 @@ function restoreDom(editor, execute) {
     }, 0);
 }
 
-class SlateBlockCard {
-    get nativeElement() {
-        return this.elementRef.nativeElement;
-    }
-    get centerContainerElement() {
-        return this.centerContainer.nativeElement;
-    }
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
-    ngOnInit() {
-        this.nativeElement.classList.add(`slate-block-card`);
-    }
-    append() {
-        this.centerRootNodes.forEach(rootNode => !this.centerContainerElement.contains(rootNode) && this.centerContainerElement.appendChild(rootNode));
-    }
-    initializeCenter(rootNodes) {
-        this.centerRootNodes = rootNodes;
-        this.append();
+class FlavourRef {
+    destroy() {
+        this.instance.onDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SlateBlockCard, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: SlateBlockCard, isStandalone: true, selector: "slate-block-card, [slateBlockCard]", viewQueries: [{ propertyName: "centerContainer", first: true, predicate: ["centerContainer"], descendants: true, static: true }], ngImport: i0, template: "<span card-target=\"card-left\" class=\"card-left\">{{ '\\uFEFF' }}</span>\n<div card-target=\"card-center\" #centerContainer></div>\n<span card-target=\"card-right\" class=\"card-right\">{{ '\\uFEFF' }}</span>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SlateBlockCard, decorators: [{
-            type: Component,
-            args: [{ selector: 'slate-block-card, [slateBlockCard]', standalone: true, template: "<span card-target=\"card-left\" class=\"card-left\">{{ '\\uFEFF' }}</span>\n<div card-target=\"card-center\" #centerContainer></div>\n<span card-target=\"card-right\" class=\"card-right\">{{ '\\uFEFF' }}</span>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { centerContainer: [{
-                type: ViewChild,
-                args: ['centerContainer', { static: true }]
-            }] } });
-
-class FlavourRef {
+class BlockCardRef {
     destroy() {
         this.instance.onDestroy();
     }
@@ -1995,7 +1972,7 @@ const createEmptyOrVoidStringNode = () => {
     stringNode.setAttribute('data-slate-string', 'true');
     stringNode.setAttribute('data-slate-zero-width', 'z');
     stringNode.setAttribute('data-slate-length', '0');
-    const zeroWidthSpace = document.createTextNode('\uFEFF');
+    const zeroWidthSpace = getZeroTextNode();
     stringNode.appendChild(zeroWidthSpace);
     stringNode.setAttribute('editable-text', '');
     return stringNode;
@@ -2006,7 +1983,7 @@ const createCompatibleStringNode = (text) => {
     stringNode.textContent = text;
     stringNode.setAttribute('editable-text', '');
     const zeroWidthSpan = document.createElement('span');
-    const zeroWidthSpace = document.createTextNode('\uFEFF');
+    const zeroWidthSpace = getZeroTextNode();
     zeroWidthSpan.setAttribute('data-slate-zero-width', '');
     zeroWidthSpan.appendChild(zeroWidthSpace);
     stringNode.appendChild(zeroWidthSpan);
@@ -2016,7 +1993,7 @@ const createLineBreakEmptyStringDOM = (elementStringLength) => {
     const stringNode = document.createElement('span');
     stringNode.setAttribute('data-slate-zero-width', 'n');
     stringNode.setAttribute('data-slate-length', `${elementStringLength}`);
-    const zeroWidthSpace = document.createTextNode(`\uFEFF`);
+    const zeroWidthSpace = getZeroTextNode();
     stringNode.appendChild(zeroWidthSpace);
     const brNode = document.createElement('br');
     stringNode.appendChild(brNode);
@@ -2226,6 +2203,49 @@ const createText = (text) => {
     return { nativeElement };
 };
 
+const SLATE_BLOCK_CARD_CLASS_NAME = 'slate-block-card';
+class SlateBlockCard {
+    onInit() {
+        const nativeElement = document.createElement('div');
+        nativeElement.classList.add(SLATE_BLOCK_CARD_CLASS_NAME);
+        this.nativeElement = nativeElement;
+        this.createContent();
+    }
+    createContent() {
+        const leftCaret = document.createElement('span');
+        leftCaret.setAttribute(`card-target`, 'card-left');
+        leftCaret.classList.add('card-left');
+        leftCaret.appendChild(getZeroTextNode());
+        const rightCaret = document.createElement('span');
+        rightCaret.setAttribute(`card-target`, 'card-right');
+        rightCaret.classList.add('card-right');
+        rightCaret.appendChild(getZeroTextNode());
+        const center = document.createElement('div');
+        center.setAttribute(`card-target`, 'card-center');
+        this.nativeElement.appendChild(leftCaret);
+        this.nativeElement.appendChild(center);
+        this.nativeElement.appendChild(rightCaret);
+        this.centerContainer = center;
+    }
+    append() {
+        this.centerRootNodes.forEach(rootNode => !this.centerContainer.contains(rootNode) && this.centerContainer.appendChild(rootNode));
+    }
+    initializeCenter(rootNodes) {
+        this.centerRootNodes = rootNodes;
+        this.append();
+    }
+    onDestroy() {
+        this.nativeElement.remove();
+    }
+}
+const getBlockCardByNativeElement = (nativeElement) => {
+    const blockCardElement = nativeElement?.parentElement?.parentElement;
+    if (blockCardElement && blockCardElement.classList.contains(SLATE_BLOCK_CARD_CLASS_NAME)) {
+        return blockCardElement;
+    }
+    return null;
+};
+
 class ListRender {
     constructor(viewContext, viewContainerRef, getOutletParent, getOutletElement) {
         this.viewContext = viewContext;
@@ -2249,7 +2269,7 @@ class ListRender {
             const context = getContext(index, descendant, parentPath, childrenContext, this.viewContext);
             const viewType = getViewType(descendant, parent, this.viewContext);
             const view = createEmbeddedViewOrComponentOrFlavour(viewType, context, this.viewContext, this.viewContainerRef);
-            const blockCard = createBlockCard(descendant, view, this.viewContainerRef, this.viewContext);
+            const blockCard = createBlockCard(descendant, view, this.viewContext);
             this.views.push(view);
             this.contexts.push(context);
             this.viewTypes.push(viewType);
@@ -2290,7 +2310,7 @@ class ListRender {
                 let blockCard;
                 if (record.previousIndex === null) {
                     view = createEmbeddedViewOrComponentOrFlavour(viewType, context, this.viewContext, this.viewContainerRef);
-                    blockCard = createBlockCard(record.item, view, this.viewContainerRef, this.viewContext);
+                    blockCard = createBlockCard(record.item, view, this.viewContext);
                     newContexts.push(context);
                     newViews.push(view);
                     newBlockCards.push(blockCard);
@@ -2303,7 +2323,7 @@ class ListRender {
                     const previousBlockCard = this.blockCards[record.previousIndex];
                     if (previousViewType !== viewType) {
                         view = createEmbeddedViewOrComponentOrFlavour(viewType, context, this.viewContext, this.viewContainerRef);
-                        blockCard = createBlockCard(record.item, view, this.viewContainerRef, this.viewContext);
+                        blockCard = createBlockCard(record.item, view, this.viewContext);
                         const firstRootNode = getRootNodes(previousView, previousBlockCard)[0];
                         const newRootNodes = getRootNodes(view, blockCard);
                         firstRootNode.replaceWith(...newRootNodes);
@@ -2461,16 +2481,15 @@ function getViewType(item, parent, viewContext) {
         return isVoid ? VoidTextFlavour : (viewContext.renderText && viewContext.renderText(item)) || DefaultTextFlavour;
     }
 }
-function createBlockCard(item, view, viewContainerRef, viewContext) {
+function createBlockCard(item, view, viewContext) {
     const isBlockCard = viewContext.editor.isBlockCard(item);
     if (isBlockCard) {
         const rootNodes = getRootNodes(view);
-        const blockCardComponentRef = viewContainerRef.createComponent(SlateBlockCard, {
-            injector: viewContainerRef.injector
-        });
-        blockCardComponentRef.instance.initializeCenter(rootNodes);
-        blockCardComponentRef.changeDetectorRef.detectChanges();
-        return blockCardComponentRef;
+        const blockCardRef = new BlockCardRef();
+        blockCardRef.instance = new SlateBlockCard();
+        blockCardRef.instance.onInit();
+        blockCardRef.instance.initializeCenter(rootNodes);
+        return blockCardRef;
     }
     else {
         return null;
@@ -3544,24 +3563,31 @@ class SlateEditable {
                 useExisting: forwardRef(() => SlateEditable),
                 multi: true
             }
-        ], usesOnChanges: true, ngImport: i0, template: "", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SlateEditable, decorators: [{
             type: Component,
-            args: [{ selector: 'slate-editable', host: {
+            args: [{
+                    selector: 'slate-editable',
+                    host: {
                         class: 'slate-editable-container',
                         '[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`
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                    },
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SlateEditable),
                             multi: true
                         }
-                    ], imports: [], template: "" }]
+                    ],
+                    imports: []
+                }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Injector }], propDecorators: { editor: [{
                 type: Input
             }], renderElement: [{
@@ -3709,35 +3735,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
-class SlateString {
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SlateString, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: SlateString, isStandalone: true, selector: "span[slateString]", inputs: { context: "context", viewContext: "viewContext" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SlateString, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'span[slateString]',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
-                }]
-        }], propDecorators: { context: [{
-                type: Input
-            }], viewContext: [{
-                type: Input
-            }] } });
-
 class SlateModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SlateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.12", ngImport: i0, type: SlateModule, imports: [CommonModule, SlateEditable, SlateBlockCard, SlateChildrenOutlet, SlateString], exports: [SlateEditable, SlateChildrenOutlet, SlateString] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.12", ngImport: i0, type: SlateModule, imports: [CommonModule, SlateEditable, SlateChildrenOutlet], exports: [SlateEditable, SlateChildrenOutlet] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SlateModule, imports: [CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SlateModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, SlateEditable, SlateBlockCard, SlateChildrenOutlet, SlateString],
-                    exports: [SlateEditable, SlateChildrenOutlet, SlateString],
+                    imports: [CommonModule, SlateEditable, SlateChildrenOutlet],
+                    exports: [SlateEditable, SlateChildrenOutlet],
                     providers: []
                 }]
         }] });
@@ -4034,5 +4041,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AngularEditor, BaseComponent, BaseElementComponent, BaseElementFlavour, BaseFlavour, BaseLeafComponent, BaseLeafFlavour, BaseTextComponent, BaseTextFlavour, DefaultTextFlavour, EDITOR_TO_AFTER_VIEW_INIT_QUEUE, ELEMENT_TO_COMPONENT, FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, FlavourRef, HAS_BEFORE_INPUT_SUPPORT, IS_ANDROID, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_IOS, IS_QQBROWSER, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, PLACEHOLDER_SYMBOL, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, SlateString, VoidTextFlavour, blobAsString, buildHTMLText, check, completeTable, createClipboardData, createText, createThrottleRAF, defaultScrollSelectionIntoView, fallbackCopyText, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getSelection, getSlateFragmentAttribute, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isTemplateRef, isValid, normalize, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setNavigatorClipboard, shallowCompare, stripHtml, withAngular };
+export { AngularEditor, BaseComponent, BaseElementComponent, BaseElementFlavour, BaseFlavour, BaseLeafComponent, BaseLeafFlavour, BaseTextComponent, BaseTextFlavour, BlockCardRef, DefaultTextFlavour, EDITOR_TO_AFTER_VIEW_INIT_QUEUE, ELEMENT_TO_COMPONENT, FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, FlavourRef, HAS_BEFORE_INPUT_SUPPORT, IS_ANDROID, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_IOS, IS_QQBROWSER, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, PLACEHOLDER_SYMBOL, SLATE_BLOCK_CARD_CLASS_NAME, SlateBlockCard, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, VoidTextFlavour, blobAsString, buildHTMLText, check, completeTable, createClipboardData, createText, createThrottleRAF, defaultScrollSelectionIntoView, fallbackCopyText, getBlockCardByNativeElement, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getSelection, getSlateFragmentAttribute, getZeroTextNode, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isTemplateRef, isValid, normalize, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setNavigatorClipboard, shallowCompare, stripHtml, withAngular };
 //# sourceMappingURL=slate-angular.mjs.map