slate-angular 16.1.0-next.7 → 16.1.0-next.8

package/fesm2022/slate-angular.mjs

@@ -1,4 +1,4 @@
-import { Editor, Range, Transforms, Path, Element, Text as Text$1, Node } from 'slate';
+import { Editor, Range, Element, Transforms, Path, Text as Text$1, Node } from 'slate';
 import { isKeyHotkey } from 'is-hotkey';
 import * as i0 from '@angular/core';
 import { TemplateRef, Component, ChangeDetectionStrategy, ViewChild, Directive, Input, InjectionToken, ComponentRef, IterableDiffers, HostBinding, inject, ViewContainerRef, forwardRef, ElementRef, Inject, NgModule } from '@angular/core';
@@ -415,7 +415,7 @@ const AngularEditor = {
         const [start, end] = Range.edges(selection);
         const endBlock = Editor.above(editor, {
             at: end,
-            match: node => Editor.isBlock(editor, node)
+            match: node => Element.isElement(node) && Editor.isBlock(editor, node)
         });
         return Editor.isStart(editor, end, endBlock[1]);
     },
@@ -637,7 +637,7 @@ const AngularEditor = {
         // If the drop target is inside a void node, move it into either the
         // next or previous node, depending on which side the `x` and `y`
         // coordinates are closest to.
-        if (Editor.isVoid(editor, node)) {
+        if (Element.isElement(node) && Editor.isVoid(editor, node)) {
             const rect = target.getBoundingClientRect();
             const isPrev = editor.isInline(node) ? x - rect.left < rect.left + rect.width - x : y - rect.top < rect.top + rect.height - y;
             const edge = Editor.point(editor, path, {
@@ -1080,7 +1080,7 @@ const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
         }
         if (editor.selection && Range.isCollapsed(editor.selection)) {
             const parentBlockEntry = Editor.above(editor, {
-                match: n => Editor.isBlock(editor, n),
+                match: n => Element.isElement(n) && Editor.isBlock(editor, n),
                 at: editor.selection
             });
             if (parentBlockEntry) {
@@ -1230,7 +1230,7 @@ const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
             }
             else {
                 const node = Node.parent(editor, selection.anchor.path);
-                if (Editor.isVoid(editor, node)) {
+                if (Element.isElement(node) && Editor.isVoid(editor, node)) {
                     Transforms.delete(editor);
                 }
             }
@@ -1712,8 +1712,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
                     selector: 'slate-children',
                     template: ``,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true,
-                    imports: [NgFor]
+                    standalone: true
                 }]
         }], propDecorators: { children: [{
                 type: Input
@@ -1813,14 +1812,20 @@ function updateContext(view, newContext, viewContext) {
         view.detectChanges();
     }
 }
-function mount(views, blockCards, outletElement) {
+function mount(views, blockCards, outletParent, outletElement) {
     if (views.length > 0) {
-        const result = [];
+        const fragment = document.createDocumentFragment();
         views.forEach((view, index) => {
             const blockCard = blockCards ? blockCards[index] : undefined;
-            result.push(...getRootNodes(view, blockCard));
+            fragment.append(...getRootNodes(view, blockCard));
         });
-        outletElement.prepend(...result);
+        if (outletElement) {
+            outletParent.insertBefore(fragment, outletElement);
+            outletElement.remove();
+        }
+        else {
+            outletParent.prepend(fragment);
+        }
     }
 }
 function getRootNodes(ref, blockCard) {
@@ -1849,7 +1854,7 @@ function getRootNodes(ref, blockCard) {
         return result;
     }
 }
-function mountOnItemChange(index, item, views, blockCards, outletElement, viewContext) {
+function mountOnItemChange(index, item, views, blockCards, outletParent, firstRootNode, viewContext) {
     const view = views[index];
     let rootNodes = getRootNodes(view);
     if (blockCards) {
@@ -1860,7 +1865,14 @@ function mountOnItemChange(index, item, views, blockCards, outletElement, viewCo
         }
     }
     if (index === 0) {
-        outletElement.prepend(...rootNodes);
+        if (firstRootNode) {
+            rootNodes.forEach(rootNode => {
+                firstRootNode.insertAdjacentElement('beforebegin', rootNode);
+            });
+        }
+        else {
+            outletParent.prepend(...rootNodes);
+        }
     }
     else {
         const previousView = views[index - 1];
@@ -1875,9 +1887,10 @@ function mountOnItemChange(index, item, views, blockCards, outletElement, viewCo
 }
 
 class ListRender {
-    constructor(viewContext, viewContainerRef, getOutletElement) {
+    constructor(viewContext, viewContainerRef, getOutletParent, getOutletElement) {
         this.viewContext = viewContext;
         this.viewContainerRef = viewContainerRef;
+        this.getOutletParent = getOutletParent;
         this.getOutletElement = getOutletElement;
         this.views = [];
         this.blockCards = [];
@@ -1901,7 +1914,7 @@ class ListRender {
             this.viewTypes.push(viewType);
             this.blockCards.push(blockCard);
         });
-        mount(this.views, this.blockCards, this.getOutletElement());
+        mount(this.views, this.blockCards, this.getOutletParent(), this.getOutletElement());
         const newDiffers = this.viewContainerRef.injector.get(IterableDiffers);
         this.differ = newDiffers.find(children).create(trackBy$1(this.viewContext));
         this.differ.diff(children);
@@ -1911,10 +1924,11 @@ class ListRender {
             this.initialize(children, parent, childrenContext);
             return;
         }
-        const outletElement = this.getOutletElement();
+        const outletParent = this.getOutletParent();
         const diffResult = this.differ.diff(children);
         const parentPath = AngularEditor.findPath(this.viewContext.editor, parent);
         if (diffResult) {
+            let firstRootNode = getRootNodes(this.views[0], this.blockCards[0])[0];
             const newContexts = [];
             const newViewTypes = [];
             const newViews = [];
@@ -1933,7 +1947,7 @@ class ListRender {
                     newContexts.push(context);
                     newViews.push(view);
                     newBlockCards.push(blockCard);
-                    mountOnItemChange(record.currentIndex, record.item, newViews, newBlockCards, outletElement, this.viewContext);
+                    mountOnItemChange(record.currentIndex, record.item, newViews, newBlockCards, outletParent, firstRootNode, this.viewContext);
                 }
                 else {
                     const previousView = this.views[record.previousIndex];
@@ -1964,7 +1978,7 @@ class ListRender {
                     newBlockCards.push(blockCard);
                 }
             });
-            diffResult.forEachOperation((record) => {
+            diffResult.forEachOperation(record => {
                 // removed
                 if (record.currentIndex === null) {
                     const view = this.views[record.previousIndex];
@@ -1974,7 +1988,7 @@ class ListRender {
                 }
                 // moved
                 if (record.previousIndex !== null && record.currentIndex !== null) {
-                    mountOnItemChange(record.currentIndex, record.item, newViews, newBlockCards, outletElement, this.viewContext);
+                    mountOnItemChange(record.currentIndex, record.item, newViews, newBlockCards, outletParent, firstRootNode, this.viewContext);
                     // Solve the block-card DOMElement loss when moving nodes
                     newBlockCards[record.currentIndex]?.instance.append();
                 }
@@ -2118,9 +2132,10 @@ function memoizedTextContext(prev, next) {
 }
 
 class LeavesRender {
-    constructor(viewContext, viewContainerRef, getOutletElement) {
+    constructor(viewContext, viewContainerRef, getOutletParent, getOutletElement) {
         this.viewContext = viewContext;
         this.viewContainerRef = viewContainerRef;
+        this.getOutletParent = getOutletParent;
         this.getOutletElement = getOutletElement;
         this.views = [];
         this.contexts = [];
@@ -2138,16 +2153,17 @@ class LeavesRender {
             this.contexts.push(context);
             this.viewTypes.push(viewType);
         });
-        mount(this.views, null, this.getOutletElement());
+        mount(this.views, null, this.getOutletParent(), this.getOutletElement());
         const newDiffers = this.viewContainerRef.injector.get(IterableDiffers);
         this.differ = newDiffers.find(this.leaves).create(trackBy(this.viewContext));
         this.differ.diff(this.leaves);
     }
     update(context) {
         const { leaves, contexts } = this.getLeaves(context);
-        const outletElement = this.getOutletElement();
+        const outletParent = this.getOutletParent();
         const diffResult = this.differ.diff(leaves);
         if (diffResult) {
+            let firstRootNode = getRootNodes(this.views[0])[0];
             const newContexts = [];
             const newViewTypes = [];
             const newViews = [];
@@ -2160,7 +2176,7 @@ class LeavesRender {
                     view = createEmbeddedViewOrComponent(viewType, context, this.viewContext, this.viewContainerRef);
                     newContexts.push(context);
                     newViews.push(view);
-                    mountOnItemChange(record.currentIndex, record.item, newViews, null, outletElement, this.viewContext);
+                    mountOnItemChange(record.currentIndex, record.item, newViews, null, outletParent, firstRootNode, this.viewContext);
                 }
                 else {
                     const previousView = this.views[record.previousIndex];
@@ -2185,7 +2201,7 @@ class LeavesRender {
                 view.destroy();
             });
             diffResult.forEachMovedItem(record => {
-                mountOnItemChange(record.currentIndex, record.item, newViews, null, outletElement, this.viewContext);
+                mountOnItemChange(record.currentIndex, record.item, newViews, null, outletParent, firstRootNode, this.viewContext);
             });
             this.viewTypes = newViewTypes;
             this.views = newViews;
@@ -2219,6 +2235,26 @@ function trackBy(viewContext) {
     };
 }
 
+class SlateChildrenOutlet {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    getNativeElement() {
+        return this.elementRef.nativeElement;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateChildrenOutlet, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SlateChildrenOutlet, isStandalone: true, selector: "slate-children-outlet", ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateChildrenOutlet, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'slate-children-outlet',
+                    template: ``,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
 /**
  * base class for custom element component or text component
  */
@@ -2333,9 +2369,15 @@ class BaseElementComponent extends BaseComponent {
     constructor() {
         super(...arguments);
         this.viewContainerRef = inject(ViewContainerRef);
-        this.getOutletElement = () => {
+        this.getOutletParent = () => {
             return this.elementRef.nativeElement;
         };
+        this.getOutletElement = () => {
+            if (this.childrenOutletInstance) {
+                return this.childrenOutletInstance.getNativeElement();
+            }
+            return null;
+        };
     }
     get element() {
         return this._context && this._context.element;
@@ -2363,7 +2405,7 @@ class BaseElementComponent extends BaseComponent {
             this.nativeElement.setAttribute(key, this._context.attributes[key]);
         }
         this.initialized = true;
-        this.listRender = new ListRender(this.viewContext, this.viewContainerRef, this.getOutletElement);
+        this.listRender = new ListRender(this.viewContext, this.viewContainerRef, this.getOutletParent, this.getOutletElement);
         this.listRender.initialize(this.children, this.element, this.childrenContext);
     }
     updateWeakMap() {
@@ -2397,11 +2439,14 @@ class BaseElementComponent extends BaseComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: BaseElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: BaseElementComponent, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: BaseElementComponent, viewQueries: [{ propertyName: "childrenOutletInstance", first: true, predicate: SlateChildrenOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: BaseElementComponent, decorators: [{
             type: Directive
-        }] });
+        }], propDecorators: { childrenOutletInstance: [{
+                type: ViewChild,
+                args: [SlateChildrenOutlet, { static: true }]
+            }] } });
 /**
  * base class for custom text component
  */
@@ -2409,16 +2454,22 @@ class BaseTextComponent extends BaseComponent {
     constructor() {
         super(...arguments);
         this.viewContainerRef = inject(ViewContainerRef);
-        this.getOutletElement = () => {
+        this.getOutletParent = () => {
             return this.elementRef.nativeElement;
         };
+        this.getOutletElement = () => {
+            if (this.childrenOutletInstance) {
+                return this.childrenOutletInstance.getNativeElement();
+            }
+            return null;
+        };
     }
     get text() {
         return this._context && this._context.text;
     }
     ngOnInit() {
         this.initialized = true;
-        this.leavesRender = new LeavesRender(this.viewContext, this.viewContainerRef, this.getOutletElement);
+        this.leavesRender = new LeavesRender(this.viewContext, this.viewContainerRef, this.getOutletParent, this.getOutletElement);
         this.leavesRender.initialize(this.context);
     }
     updateWeakMap() {
@@ -2438,11 +2489,14 @@ class BaseTextComponent extends BaseComponent {
         this.leavesRender.update(this.context);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: BaseTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: BaseTextComponent, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: BaseTextComponent, viewQueries: [{ propertyName: "childrenOutletInstance", first: true, predicate: SlateChildrenOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: BaseTextComponent, decorators: [{
             type: Directive
-        }] });
+        }], propDecorators: { childrenOutletInstance: [{
+                type: ViewChild,
+                args: [SlateChildrenOutlet, { static: true }]
+            }] } });
 
 class SlateLeaves extends ViewContainer {
     constructor() {
@@ -2880,7 +2934,7 @@ class SlateEditable {
         this.dataSlateNode = 'value';
         this.dataGramm = false;
         this.viewContainerRef = inject(ViewContainerRef);
-        this.getOutletElement = () => {
+        this.getOutletParent = () => {
             return this.elementRef.nativeElement;
         };
     }
@@ -2908,7 +2962,7 @@ class SlateEditable {
         // add browser class
         let browserClass = IS_FIREFOX ? 'firefox' : IS_SAFARI ? 'safari' : '';
         browserClass && this.elementRef.nativeElement.classList.add(browserClass);
-        this.listRender = new ListRender(this.viewContext, this.viewContainerRef, this.getOutletElement);
+        this.listRender = new ListRender(this.viewContext, this.viewContainerRef, this.getOutletParent, () => null);
     }
     ngOnChanges(simpleChanges) {
         if (!this.initialized) {
@@ -3511,7 +3565,7 @@ class SlateEditable {
             // that drops are allowed. Editable content is droppable by
             // default, and calling `preventDefault` hides the cursor.
             const node = AngularEditor.toSlateNode(this.editor, event.target);
-            if (Editor.isVoid(this.editor, node)) {
+            if (Element.isElement(node) && Editor.isVoid(this.editor, node)) {
                 event.preventDefault();
             }
         }
@@ -3520,7 +3574,7 @@ class SlateEditable {
         if (!this.readonly && hasTarget(this.editor, event.target) && !this.isDOMEventHandled(event, this.dragStart)) {
             const node = AngularEditor.toSlateNode(this.editor, event.target);
             const path = AngularEditor.findPath(this.editor, node);
-            const voidMatch = Editor.isVoid(this.editor, node) || Editor.void(this.editor, { at: path, voids: true });
+            const voidMatch = Element.isElement(node) && (Editor.isVoid(this.editor, node) || Editor.void(this.editor, { at: path, voids: true }));
             // If starting a drag on a void node, make sure it is selected
             // so that it shows up in the selection's fragment.
             if (voidMatch) {
@@ -4043,7 +4097,7 @@ const hasTarget = (editor, target) => {
  */
 const isTargetInsideVoid = (editor, target) => {
     const slateNode = hasTarget(editor, target) && AngularEditor.toSlateNode(editor, target);
-    return Editor.isVoid(editor, slateNode);
+    return Element.isElement(slateNode) && Editor.isVoid(editor, slateNode);
 };
 const hasStringTarget = (domSelection) => {
     return ((domSelection.anchorNode.parentElement.hasAttribute('data-slate-string') ||
@@ -4099,12 +4153,8 @@ class SlateModule {
             SlateBlockCard,
             SlateLeaves,
             SlateDefaultLeaf,
-            SlateDefaultString], exports: [SlateEditable,
-            SlateChildren,
-            SlateElement,
-            SlateLeaves,
-            SlateString,
-            SlateDefaultString] }); }
+            SlateDefaultString,
+            SlateChildrenOutlet], exports: [SlateEditable, SlateChildren, SlateChildrenOutlet, SlateElement, SlateLeaves, SlateString, SlateDefaultString] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateModule, providers: [
             {
                 provide: SLATE_DEFAULT_ELEMENT_COMPONENT_TOKEN,
@@ -4128,16 +4178,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
                         SlateBlockCard,
                         SlateLeaves,
                         SlateDefaultLeaf,
-                        SlateDefaultString
-                    ],
-                    exports: [
-                        SlateEditable,
-                        SlateChildren,
-                        SlateElement,
-                        SlateLeaves,
-                        SlateString,
-                        SlateDefaultString
+                        SlateDefaultString,
+                        SlateChildrenOutlet
                     ],
+                    exports: [SlateEditable, SlateChildren, SlateChildrenOutlet, SlateElement, SlateLeaves, SlateString, SlateDefaultString],
                     providers: [
                         {
                             provide: SLATE_DEFAULT_ELEMENT_COMPONENT_TOKEN,
@@ -4155,5 +4199,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AngularEditor, BaseComponent, BaseElementComponent, BaseLeafComponent, BaseTextComponent, DOMComment, DOMElement, DOMNode, DOMRange, DOMSelection, DOMStaticRange, DOMText, EDITOR_TO_ELEMENT, EDITOR_TO_ON_CHANGE, EDITOR_TO_PLACEHOLDER, EDITOR_TO_WINDOW, ELEMENT_TO_COMPONENT, ELEMENT_TO_NODE, FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, HAS_BEFORE_INPUT_SUPPORT, IS_ANDROID, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_CLICKING, IS_DRAGGING, IS_EDGE_LEGACY, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_FOCUSED, IS_IOS, IS_QQBROWSER, IS_READONLY, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, KEY_TO_ELEMENT, Key, NODE_TO_ELEMENT, NODE_TO_INDEX, NODE_TO_KEY, NODE_TO_PARENT, PLACEHOLDER_SYMBOL, SlateChildren, SlateDefaultString, SlateEditable, SlateElement, SlateErrorCode, SlateLeaves, SlateModule, SlateString, check, createThrottleRAF, defaultScrollSelectionIntoView, getCardTargetAttribute, getClipboardData, getDefaultView, getEditableChild, getEditableChildAndIndex, getPlainText, getSlateFragmentAttribute, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hasEditableTarget, hasShadowRoot, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isComponentType, isDOMComment, isDOMElement, isDOMNode, isDOMSelection, isDOMText, isDecoratorRangeListEqual, isEmpty, isPlainTextOnlyPaste, isTemplateRef, isValid, normalize, normalizeDOMPoint, shallowCompare, withAngular };
+export { AngularEditor, BaseComponent, BaseElementComponent, BaseLeafComponent, BaseTextComponent, DOMComment, DOMElement, DOMNode, DOMRange, DOMSelection, DOMStaticRange, DOMText, EDITOR_TO_ELEMENT, EDITOR_TO_ON_CHANGE, EDITOR_TO_PLACEHOLDER, EDITOR_TO_WINDOW, ELEMENT_TO_COMPONENT, ELEMENT_TO_NODE, FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, HAS_BEFORE_INPUT_SUPPORT, IS_ANDROID, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_CLICKING, IS_DRAGGING, IS_EDGE_LEGACY, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_FOCUSED, IS_IOS, IS_QQBROWSER, IS_READONLY, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, KEY_TO_ELEMENT, Key, NODE_TO_ELEMENT, NODE_TO_INDEX, NODE_TO_KEY, NODE_TO_PARENT, PLACEHOLDER_SYMBOL, SlateChildren, SlateChildrenOutlet, SlateDefaultString, SlateEditable, SlateElement, SlateErrorCode, SlateLeaves, SlateModule, SlateString, check, createThrottleRAF, defaultScrollSelectionIntoView, getCardTargetAttribute, getClipboardData, getDefaultView, getEditableChild, getEditableChildAndIndex, getPlainText, getSlateFragmentAttribute, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hasEditableTarget, hasShadowRoot, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isComponentType, isDOMComment, isDOMElement, isDOMNode, isDOMSelection, isDOMText, isDecoratorRangeListEqual, isEmpty, isPlainTextOnlyPaste, isTemplateRef, isValid, normalize, normalizeDOMPoint, shallowCompare, withAngular };
 //# sourceMappingURL=slate-angular.mjs.map