@lucca-front/ng 21.1.2 → 21.1.3

package/fesm2022/lucca-front-ng-forms-rich-text-input.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, input, booleanAttribute, viewChild, ElementRef, contentChildren, signal, computed, afterRenderEffect, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component, DestroyRef, ViewContainerRef, TemplateRef, viewChildren, effect } from '@angular/core';
+import { InjectionToken, inject, input, booleanAttribute, viewChild, ElementRef, contentChildren, signal, computed, effect, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component, DestroyRef, ViewContainerRef, TemplateRef, viewChildren } from '@angular/core';
 import { ButtonComponent } from '@lucca-front/ng/button';
 import { intlInputOptions } from '@lucca-front/ng/core';
 import { IconComponent } from '@lucca-front/ng/icon';
@@ -80,7 +80,7 @@ class RichTextInputComponent {
         this.#isTouched = signal(false, ...(ngDevMode ? [{ debugName: "#isTouched" }] : []));
         this.#focusedPlugin = 0;
         this.#isRootElementInitialized = false;
-        afterRenderEffect(() => {
+        effect(() => {
             if (this.#formField?.presentation() && this.contentPresentation()) {
                 this.#editor?.setRootElement(this.contentPresentation()?.nativeElement ?? null);
                 this.#editor?.setEditable(false);
@@ -690,83 +690,169 @@ function registerLinkSelectionChange(editor, onselectionchange) {
     }, COMMAND_PRIORITY_NORMAL);
 }
 
-class PopoverAutoLinkNode extends AutoLinkNode {
-    static #viewContainerRef;
-    static #templateRef;
-    static setViewContainerRef(vcr) {
-        PopoverAutoLinkNode.#viewContainerRef = vcr;
+class PopoverLinkNode extends LinkNode {
+    #viewContainerRef;
+    #templateRef;
+    #view;
+    setViewContainerRef(vcr) {
+        const self = this.getWritable();
+        self.#viewContainerRef = vcr;
+        return self;
+    }
+    getViewContainerRef() {
+        return this.#viewContainerRef;
+    }
+    setTemplateRef(vcr) {
+        const self = this.getWritable();
+        self.#templateRef = vcr;
+        return self;
     }
-    static setTemplateRef(vcr) {
-        PopoverAutoLinkNode.#templateRef = vcr;
+    getTemplateRef() {
+        return this.#templateRef;
     }
     static getType() {
-        return 'popoverautolink';
+        return 'popoverlink';
     }
-    createDOM() {
-        if (PopoverAutoLinkNode.#viewContainerRef && PopoverAutoLinkNode.#templateRef) {
-            // Create the view
-            const view = PopoverAutoLinkNode.#viewContainerRef.createEmbeddedView(PopoverAutoLinkNode.#templateRef, {
+    constructor(url, attributes, key) {
+        super(url, attributes, key);
+        this.#viewContainerRef = attributes?.viewContainerRef;
+        this.#templateRef = attributes?.templateRef;
+    }
+    createDOM(config) {
+        if (this.#viewContainerRef && this.#templateRef) {
+            const context = {
                 href: this.sanitizeUrl(this.__url),
                 title: this.__title,
                 target: this.__target,
-            });
+                key: this.__key,
+            };
+            if (this.#view) {
+                this.#view.context = context;
+                this.#view.markForCheck();
+            }
+            else {
+                // Create the view
+                this.#view = this.#viewContainerRef.createEmbeddedView(this.#templateRef, context);
+            }
             // Return the template DOM element
-            return view.rootNodes[0];
+            return this.#view.rootNodes[0];
         }
-        throw new Error('ViewContainerRef is not set for PopoverAutoLinkNode. Ensure it is initialized before creating PopoverAutoLinkNode instances.');
+        return super.createDOM(config);
+    }
+    updateDOM(prevNode) {
+        return (prevNode.getURL() !== this.getURL() ||
+            prevNode.getTarget() !== this.getTarget() ||
+            prevNode.getRel() !== this.getRel() ||
+            prevNode.getTitle() !== this.getTitle() ||
+            this.#templateRef !== prevNode.#templateRef ||
+            this.#viewContainerRef !== prevNode.#viewContainerRef);
     }
     exportDOM(editor) {
         return {
             element: super.createDOM(editor._config),
         };
     }
+    remove(preserveEmptyParent) {
+        super.remove(preserveEmptyParent);
+        this.#view?.destroy();
+    }
+    static importJSON(serializedNode) {
+        return $createPopoverLinkNode().updateFromJSON(serializedNode);
+    }
     static clone(node) {
-        return new PopoverAutoLinkNode(node.__url, { target: node.__target, rel: node.__rel, title: node.__title }, node.__key);
+        return new PopoverLinkNode(node.__url, { target: node.__target, rel: node.__rel, title: node.__title, templateRef: node.#templateRef, viewContainerRef: node.#viewContainerRef }, node.__key);
     }
 }
+function $createPopoverLinkNode(url, attributes, key) {
+    return new PopoverLinkNode(url, attributes, key);
+}
+function $isPopoverLinkNode$1(node) {
+    return node instanceof PopoverLinkNode;
+}
 
-class PopoverLinkNode extends LinkNode {
-    static #viewContainerRef;
-    static #templateRef;
-    static setViewContainerRef(vcr) {
-        PopoverLinkNode.#viewContainerRef = vcr;
+class PopoverAutoLinkNode extends AutoLinkNode {
+    #viewContainerRef;
+    #templateRef;
+    #view;
+    setViewContainerRef(vcr) {
+        const self = this.getWritable();
+        self.#viewContainerRef = vcr;
+        return self;
     }
-    static setTemplateRef(vcr) {
-        PopoverLinkNode.#templateRef = vcr;
+    getViewContainerRef() {
+        return this.#viewContainerRef;
+    }
+    setTemplateRef(vcr) {
+        const self = this.getWritable();
+        self.#templateRef = vcr;
+        return self;
+    }
+    getTemplateRef() {
+        return this.#templateRef;
     }
     static getType() {
-        return 'popoverlink';
+        return 'popoverautolink';
     }
-    createDOM() {
-        if (PopoverLinkNode.#viewContainerRef && PopoverLinkNode.#templateRef) {
-            // Create the view
-            const view = PopoverLinkNode.#viewContainerRef.createEmbeddedView(PopoverLinkNode.#templateRef, {
+    constructor(url, attributes, key) {
+        super(url, attributes, key);
+        this.#viewContainerRef = attributes?.viewContainerRef;
+        this.#templateRef = attributes?.templateRef;
+    }
+    createDOM(config) {
+        if (this.#viewContainerRef && this.#templateRef) {
+            const context = {
                 href: this.sanitizeUrl(this.__url),
                 title: this.__title,
                 target: this.__target,
-            });
+                key: this.__key,
+            };
+            if (this.#view) {
+                this.#view.context = context;
+                this.#view.markForCheck();
+            }
+            else {
+                // Create the view
+                this.#view = this.#viewContainerRef.createEmbeddedView(this.#templateRef, context);
+            }
             // Return the template DOM element
-            return view.rootNodes[0];
+            return this.#view.rootNodes[0];
         }
-        throw new Error('ViewContainerRef is not set for PopoverLinkNode. Ensure it is initialized before creating PopoverLinkNode instances.');
+        return super.createDOM(config);
+    }
+    updateDOM(prevNode) {
+        return (prevNode.getURL() !== this.getURL() ||
+            prevNode.getTarget() !== this.getTarget() ||
+            prevNode.getRel() !== this.getRel() ||
+            prevNode.getTitle() !== this.getTitle() ||
+            this.#templateRef !== prevNode.#templateRef ||
+            this.#viewContainerRef !== prevNode.#viewContainerRef);
     }
     exportDOM(editor) {
         return {
             element: super.createDOM(editor._config),
         };
     }
+    remove(preserveEmptyParent) {
+        super.remove(preserveEmptyParent);
+        this.#view?.destroy();
+    }
+    static importJSON(serializedNode) {
+        return $createPopoverAutoLinkNode().updateFromJSON(serializedNode);
+    }
     static clone(node) {
-        return new PopoverLinkNode(node.__url, { target: node.__target, rel: node.__rel, title: node.__title }, node.__key);
+        return $createPopoverAutoLinkNode(node.__url, { target: node.__target, rel: node.__rel, title: node.__title, templateRef: node.#templateRef, viewContainerRef: node.#viewContainerRef }, node.__key);
     }
 }
+function $createPopoverAutoLinkNode(url, attributes, key) {
+    return new PopoverAutoLinkNode(url, attributes, key);
+}
+function $isPopoverLinkNode(node) {
+    return node instanceof PopoverAutoLinkNode;
+}
 
-const URL_REGEX = /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_+.~#?&/=;,[\]]*)/;
+const URL_REGEX = /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_+.~#?!&/=;,[\]]*)/;
 const EMAIL_REGEX = /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
 class LinkComponent {
-    #luDialogService;
-    #viewContainerRef;
-    #editor;
-    #registeredCommands;
     constructor() {
         this.#luDialogService = inject(LuDialogService);
         this.#viewContainerRef = inject(ViewContainerRef);
@@ -777,18 +863,17 @@ class LinkComponent {
         this.isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
         this.intl = input(...intlInputOptions(LU_RICH_TEXT_INPUT_TRANSLATIONS), ...(ngDevMode ? [{ debugName: "intl" }] : []));
         this.#registeredCommands = () => { };
-        PopoverLinkNode.setViewContainerRef(this.#viewContainerRef);
-        PopoverAutoLinkNode.setViewContainerRef(this.#viewContainerRef);
-    }
-    ngAfterViewInit() {
-        PopoverLinkNode.setTemplateRef(this.linkNodeTemplate());
-        PopoverAutoLinkNode.setTemplateRef(this.linkNodeTemplate());
     }
+    #luDialogService;
+    #viewContainerRef;
+    #editor;
+    #registeredCommands;
     setEditorInstance(editor) {
         this.#editor = editor;
         this.#registeredCommands = mergeRegister(registerLink(editor), registerLinkSelectionChange(editor, (isLink) => this.active.set(isLink)), registerAutoLink(editor, {
             matchers: [createLinkMatcherWithRegExp(URL_REGEX, (text) => (text.startsWith('http') ? text : `https://${text}`)), createLinkMatcherWithRegExp(EMAIL_REGEX, (text) => `mailto:${text}`)],
             changeHandlers: [],
+            excludeParents: [],
         }));
     }
     getLexicalNodes() {
@@ -797,19 +882,23 @@ class LinkComponent {
             PopoverAutoLinkNode,
             {
                 replace: LinkNode,
-                with: (node) => new PopoverLinkNode(node.getURL(), {
+                with: (node) => $createPopoverLinkNode(node.getURL(), {
                     rel: node.getRel(),
                     target: node.getTarget(),
                     title: node.getTitle(),
+                    viewContainerRef: this.#viewContainerRef,
+                    templateRef: this.linkNodeTemplate(),
                 }),
                 withKlass: PopoverLinkNode,
             },
             {
                 replace: AutoLinkNode,
-                with: (node) => new PopoverAutoLinkNode(node.getURL(), {
+                with: (node) => $createPopoverAutoLinkNode(node.getURL(), {
                     rel: node.getRel(),
                     target: node.getTarget(),
                     title: node.getTitle(),
+                    viewContainerRef: this.#viewContainerRef,
+                    templateRef: this.linkNodeTemplate(),
                 }),
                 withKlass: PopoverAutoLinkNode,
             },
@@ -840,8 +929,8 @@ class LinkComponent {
                 if (href && !href.startsWith('http')) {
                     newHref = `https://${href}`;
                 }
-                this.#editor.dispatchCommand(FORMAT_LINK, newHref);
-                this.#editor.dispatchCommand(SELECTION_CHANGE_COMMAND, undefined);
+                this.#editor?.dispatchCommand(FORMAT_LINK, newHref);
+                this.#editor?.dispatchCommand(SELECTION_CHANGE_COMMAND, undefined);
             });
         });
     }
@@ -875,7 +964,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                             useExisting: forwardRef(() => LinkComponent),
                         },
                     ], template: "<button\n\t#element\n\tluButton=\"ghost\"\n\ttype=\"button\"\n\tsize=\"S\"\n\t(click)=\"dispatchCommand()\"\n\t[luTooltip]=\"intl().linksLabel\"\n\t[attr.aria-pressed]=\"active()\"\n\tluTooltipOnlyForDisplay\n\t[attr.tabindex]=\"tabindex()\"\n\t[disabled]=\"isDisabled()\"\n\tclass=\"richTextField-toolbar-button\"\n>\n\t<lu-icon icon=\"formatLink\" [alt]=\"intl().linksLabel\" />\n</button>\n\n<ng-template #linkNodeTemplate let-href=\"href\" let-title=\"title\" let-target=\"target\">\n\t<a [href]=\"href\" [title]=\"title\" [target]=\"target\" [luPopover2]=\"popover\" #trigger=\"luPopover2\"></a>\n\t<ng-template #popover>\n\t\t<div class=\"popover-contentOptional linkPopover\">\n\t\t\t<a [href]=\"href\" luLink external class=\"pr-u-ellipsis\">{{ href }}</a>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tluButton=\"ghost\"\n\t\t\t\tsize=\"XS\"\n\t\t\t\t(click)=\"trigger.close(); dispatchCommand()\"\n\t\t\t\t[luTooltip]=\"intl().linksLabel\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<lu-icon icon=\"officePen\" [alt]=\"intl().linksLabel\" />\n\t\t\t</button>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tluButton=\"ghost\"\n\t\t\t\tsize=\"XS\"\n\t\t\t\t(click)=\"trigger.close(); deleteLink()\"\n\t\t\t\t[luTooltip]=\"intl().linksDelete\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<lu-icon icon=\"trashDelete\" [alt]=\"intl().linksDelete\" />\n\t\t\t</button>\n\t\t</div>\n\t</ng-template>\n</ng-template>\n", styles: [".linkPopover{display:flex;justify-items:center;gap:var(--pr-t-spacings-50);max-width:20rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { linkNodeTemplate: [{ type: i0.ViewChild, args: ['linkNodeTemplate', { ...{ read: TemplateRef }, isSignal: true }] }], element: [{ type: i0.ViewChild, args: ['element', { ...{ read: (ElementRef) }, isSignal: true }] }], intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }] } });
+        }], propDecorators: { linkNodeTemplate: [{ type: i0.ViewChild, args: ['linkNodeTemplate', { ...{ read: TemplateRef }, isSignal: true }] }], element: [{ type: i0.ViewChild, args: ['element', { ...{ read: (ElementRef) }, isSignal: true }] }], intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }] } });
 
 const FORMAT_LIST = createCommand('FORMAT_LIST');
 function registerListsGlobal(editor) {
@@ -1008,15 +1097,21 @@ class TagNode extends DecoratorNode {
     #disabled;
     // Store the component reference on the node instance
     #componentRef;
-    static #viewContainerRef;
-    static setViewContainerRef(vcr) {
-        TagNode.#viewContainerRef = vcr;
+    #viewContainerRef;
+    setViewContainerRef(vcr) {
+        const self = this.getWritable();
+        self.#viewContainerRef = vcr;
+        return self;
+    }
+    getViewContainerRef() {
+        return this.#viewContainerRef;
     }
-    constructor(tagKey = '', tagDescription, disabled = false, key) {
+    constructor(tagKey = '', viewContainerRef, tagDescription, disabled = false, key) {
         super(key);
         this.#tagKey = tagKey;
         this.#tagDescription = tagDescription;
         this.#disabled = disabled;
+        this.#viewContainerRef = viewContainerRef;
     }
     isDisabled() {
         return this.#disabled;
@@ -1046,7 +1141,7 @@ class TagNode extends DecoratorNode {
         return 'tag';
     }
     static clone(node) {
-        return new TagNode(node.#tagKey, node.#tagDescription, node.#disabled, node.__key);
+        return new TagNode(node.#tagKey, node.#viewContainerRef, node.#tagDescription, node.#disabled, node.__key);
     }
     /**
      * This method must be implemented but has no purpose outside of react
@@ -1055,15 +1150,17 @@ class TagNode extends DecoratorNode {
         return this.getTextContent();
     }
     createDOM(_config, editor) {
-        if (TagNode.#viewContainerRef) {
+        if (this.#viewContainerRef) {
             if (!editor.isEditable()) {
                 this.#componentRef?.destroy();
                 const span = document.createElement('span');
                 span.textContent = this.#tagDescription ?? this.#tagKey;
                 return span;
             }
-            // Create the component
-            this.#componentRef = TagNode.#viewContainerRef.createComponent(ChipComponent);
+            if (!this.#componentRef) {
+                // Create the component
+                this.#componentRef = this.#viewContainerRef.createComponent(ChipComponent);
+            }
             // Set inputs on the component instance
             this.#componentRef.setInput('unkillable', false);
             this.#componentRef.setInput('palette', 'product');
@@ -1083,10 +1180,12 @@ class TagNode extends DecoratorNode {
             // Return the component's DOM element
             return componentElement;
         }
-        throw new Error('ViewContainerRef is not set for TagNode. Ensure it is initialized before creating TagNode instances.');
+        const element = document.createElement('span');
+        element.textContent = this.getTextContent();
+        return element;
     }
     updateDOM(prevNode, _dom, _config) {
-        return this.#tagDescription !== prevNode.#tagDescription || this.#tagKey !== prevNode.#tagKey || this.#disabled !== prevNode.#disabled;
+        return this.#tagDescription !== prevNode.#tagDescription || this.#tagKey !== prevNode.#tagKey || this.#disabled !== prevNode.#disabled || this.#viewContainerRef !== prevNode.#viewContainerRef;
     }
     remove(preserveEmptyParent) {
         super.remove(preserveEmptyParent);
@@ -1154,8 +1253,8 @@ function domConversionFunction(domNode) {
         priority: COMMAND_PRIORITY_NORMAL,
     };
 }
-function $createTagNode(key = '', description) {
-    return new TagNode(key, description);
+function $createTagNode(key = '', viewContainerRef, description) {
+    return new TagNode(key, viewContainerRef, description);
 }
 function $isTagNode(node) {
     return node instanceof TagNode;
@@ -1176,7 +1275,6 @@ class RichTextPluginTagComponent {
         this.editor = null;
         this.#tagNodeKeys = signal(new Set(), ...(ngDevMode ? [{ debugName: "#tagNodeKeys" }] : []));
         this.#registeredCommands = () => { };
-        TagNode.setViewContainerRef(this.#viewContainerRef);
         // Listen for new partial tag nodes and update their descriptions
         effect(() => {
             const tags = this.tags();
@@ -1191,6 +1289,7 @@ class RichTextPluginTagComponent {
                     }
                     const tag = tags.find((t) => t.key === tagNode.getTagKey());
                     if (tag) {
+                        tagNode.setViewContainerRef(this.#viewContainerRef);
                         tagNode.setTagDescription(tag.description ?? '').setDisabled(isDisabled);
                     }
                     else {
@@ -1229,7 +1328,7 @@ class RichTextPluginTagComponent {
             if (!selection) {
                 selection = $getRoot().selectEnd();
             }
-            const node = $createTagNode(tag.key, tag.description);
+            const node = $createTagNode(tag.key, this.#viewContainerRef, tag.description);
             selection.insertNodes([node]);
         });
     }