@esfaenza/text-editors 19.2.9 → 19.2.11

package/fesm2022/esfaenza-text-editors.mjs

@@ -1,666 +1,542 @@
-import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, inject, forwardRef, Output, Input, ViewEncapsulation, Component, input, viewChild } from '@angular/core';
-import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { viewChild, input, booleanAttribute, EventEmitter, forwardRef, Output, ViewEncapsulation, Component, InjectionToken } from '@angular/core';
+import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
-import * as i2 from '@ckeditor/ckeditor5-angular';
-import { CKEditorModule, loadCKEditorCloud } from '@ckeditor/ckeditor5-angular';
-
-const TXE_DEBUG = new InjectionToken('TXE_DEBUG');
+import { Extension, Editor } from '@tiptap/core';
+import { Markdown } from '@tiptap/markdown';
+import { StarterKit } from '@tiptap/starter-kit';
+import { TextStyle } from '@tiptap/extension-text-style';
+import { Color } from '@tiptap/extension-color';
+import { Underline } from '@tiptap/extension-underline';
+import { Table } from '@tiptap/extension-table';
+import { TableRow } from '@tiptap/extension-table-row';
+import { TableCell } from '@tiptap/extension-table-cell';
+import { TableHeader } from '@tiptap/extension-table-header';
+import { TextAlign } from '@tiptap/extension-text-align';
+import Mention from '@tiptap/extension-mention';
+import { marked } from 'marked';
+import { Image } from '@tiptap/extension-image';
+import { Plugin } from '@tiptap/pm/state';
 
-class HtmlEditorComponent {
-    constructor() {
-        this.Readonly = false; // Angular19 -> [disabled]
-        this.Required = false;
-        this.Validation = false;
-        this.onEditorLoaded = new EventEmitter();
-        this.EditorModel = null;
-        this.DEBUG = inject(TXE_DEBUG, { optional: true }) || false;
-        //#region Forms
-        this.onTouched = () => { };
-        this.propagateChange = (_) => { };
-    }
-    initializeEditor() {
-        if (!this.PersistentEditor) {
-            if (this.DEBUG)
-                console.error("@ HTML-Editor @: Impossibile inizializzare l'editor HTML senza PersistentEditor");
-        }
-        else
-            this.PersistentEditor?.iInitializeEditor("@", [], (source) => {
-                this.onEditorLoaded.emit(source);
-            });
-    }
-    ngOnInit() {
-        if (this.DEBUG)
-            console.info("@ HTML-Editor @: Il componente HtmlEditorComponent è stato creato");
-    }
-    ngOnDestroy() {
-        if (this.DEBUG)
-            console.info("@ HTML-Editor @: Il componente HtmlEditorComponent è stato distrutto");
-    }
-    registerOnChange(fn) {
-        this.propagateChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    writeValue(obj) {
-        let value = "";
-        if (obj !== undefined)
-            value = obj;
-        if (this.DEBUG)
-            console.log("@ HTML-Editor @: Writevalue pre-refresh: " + value);
-        if (value === this.EditorModel?.value) {
-            if (this.DEBUG)
-                console.log("@ HTML-Editor @: Writevalue ridondante");
-            return;
-        }
-        this.EditorModel = null;
-        requestAnimationFrame(() => {
-            if (this.DEBUG)
-                console.log("@ HTML-Editor @: Writevalue post-refresh: " + value);
-            this.EditorModel = { value: value, onEditorChange: this.onEditorChange.bind(this) };
-        });
-    }
-    validate(c) {
-        let ret = null;
-        if (this.EditorModel?.value || this.Readonly || !this.Required)
-            ret = null;
-        ret = null;
-        if (this.DEBUG)
-            console.log("@ HTML-Editor @: Validate post-validate: " + ret);
-        return ret;
-    }
-    onEditorChange({ editor }) {
-        if (!this.EditorModel)
-            return;
-        let data = editor?.getData();
-        if (this.DEBUG)
-            console.log("@ HTML-Editor @: changed: " + data);
-        this.propagateChange(data);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HtmlEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: HtmlEditorComponent, isStandalone: true, selector: "html-editor", inputs: { PersistentEditor: "PersistentEditor", Readonly: "Readonly", Required: "Required", Validation: "Validation" }, outputs: { onEditorLoaded: "onEditorLoaded" }, providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => HtmlEditorComponent), multi: true },
-            { provide: NG_VALIDATORS, useExisting: forwardRef(() => HtmlEditorComponent), multi: true }
-        ], ngImport: i0, template: "<div class=\"html-editor\" *ngIf=\"EditorModel && PersistentEditor\">\r\n    <ng-content *ngIf=\"PersistentEditor.EditorTemplate()\">\r\n        <ng-content *ngTemplateOutlet=\"PersistentEditor.EditorTemplate(); context: {$implicit: EditorModel}\"></ng-content>\r\n    </ng-content>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap\";:root{--ck-content-font-family: \"Lato\"}@media print{body{margin:0!important}}.main-container{font-family:var(--ck-content-font-family);width:fit-content;margin-left:auto;margin-right:auto}.editor-container_classic-editor .editor-container__editor{min-width:795px;max-width:795px}.html-editor .ck-content{overflow-x:hidden!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CKEditorModule }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HtmlEditorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "html-editor", standalone: true, imports: [CommonModule, FormsModule, CKEditorModule], encapsulation: ViewEncapsulation.None, providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => HtmlEditorComponent), multi: true },
-                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => HtmlEditorComponent), multi: true }
-                    ], template: "<div class=\"html-editor\" *ngIf=\"EditorModel && PersistentEditor\">\r\n    <ng-content *ngIf=\"PersistentEditor.EditorTemplate()\">\r\n        <ng-content *ngTemplateOutlet=\"PersistentEditor.EditorTemplate(); context: {$implicit: EditorModel}\"></ng-content>\r\n    </ng-content>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap\";:root{--ck-content-font-family: \"Lato\"}@media print{body{margin:0!important}}.main-container{font-family:var(--ck-content-font-family);width:fit-content;margin-left:auto;margin-right:auto}.editor-container_classic-editor .editor-container__editor{min-width:795px;max-width:795px}.html-editor .ck-content{overflow-x:hidden!important}\n"] }]
-        }], propDecorators: { PersistentEditor: [{
-                type: Input
-            }], Readonly: [{
-                type: Input
-            }], Required: [{
-                type: Input
-            }], Validation: [{
-                type: Input
-            }], onEditorLoaded: [{
-                type: Output
-            }] } });
-
-class MarkdownEditorComponent {
-    constructor() {
-        this.Readonly = false; // Angular19 -> [disabled]
-        this.Required = false;
-        this.Validation = false;
-        // Mention
-        this.MentionMarker = "@";
-        this.MentionEntities = [];
-        this.onEditorLoaded = new EventEmitter();
-        this.DEBUG = inject(TXE_DEBUG, { optional: true }) || false;
-        this.EditorModel = null;
-        //#region Forms
-        this.onTouched = () => { };
-        this.propagateChange = (_) => { };
-    }
-    get NormalizedMentionEntities() {
-        return this.MentionEntities.map(m => {
-            return { id: this.MentionMarker + m.id, description: m.description };
-        });
-    }
-    initializeEditor() {
-        if (!this.PersistentEditor) {
-            if (this.DEBUG)
-                console.error("@ Markdown-Editor @: Impossibile inizializzare l'editor HTML senza PersistentEditor");
-        }
-        else
-            this.PersistentEditor?.iInitializeEditor(this.MentionMarker, this.NormalizedMentionEntities, (source) => {
-                this.onEditorLoaded.emit(source);
-            });
-    }
-    ngOnInit() {
-        if (this.DEBUG)
-            console.info("@ Markdown-Editor @: Il componente MarkdownEditor è stato creato");
-    }
-    ngOnDestroy() {
-        if (this.DEBUG)
-            console.info("@ Markdown-Editor @: Il componente MarkdownEditor è stato distrutto");
-    }
-    registerOnChange(fn) {
-        this.propagateChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    writeValue(obj) {
-        let value = "";
-        if (obj !== undefined)
-            value = obj;
-        if (this.DEBUG)
-            console.log("@ Markdown-Editor @: Writevalue pre-refresh: " + value);
-        if (value === this.EditorModel?.value) {
-            if (this.DEBUG)
-                console.log("@ Markdown-Editor @: Writevalue ridondante");
-            return;
-        }
-        this.EditorModel = null;
-        requestAnimationFrame(() => {
-            if (this.DEBUG)
-                console.log("@ Markdown-Editor @: Writevalue post-refresh: " + value);
-            this.EditorModel = { value: value, onEditorChange: this.onEditorChange.bind(this) };
-        });
-    }
-    validate(c) {
-        let ret = null;
-        if (this.EditorModel?.value || this.Readonly || !this.Required)
-            ret = null;
-        ret = null;
-        if (this.DEBUG)
-            console.log("@ Markdown-Editor @: Validate post-validate: " + ret);
-        return ret;
-    }
-    onEditorChange({ editor }) {
-        if (!this.EditorModel)
-            return;
-        let data = editor?.getData();
-        if (this.DEBUG)
-            console.log("@ Markdown-Editor @: changed: " + data);
-        this.propagateChange(data);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MarkdownEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MarkdownEditorComponent, isStandalone: true, selector: "markdown-editor", inputs: { PersistentEditor: "PersistentEditor", Readonly: "Readonly", Required: "Required", Validation: "Validation", MentionMarker: "MentionMarker", MentionEntities: "MentionEntities" }, outputs: { onEditorLoaded: "onEditorLoaded" }, providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MarkdownEditorComponent), multi: true },
-            { provide: NG_VALIDATORS, useExisting: forwardRef(() => MarkdownEditorComponent), multi: true }
-        ], ngImport: i0, template: "<div class=\"html-editor\" *ngIf=\"EditorModel && PersistentEditor\">\r\n    <ng-content *ngIf=\"PersistentEditor.EditorTemplate()\">\r\n        <ng-content *ngTemplateOutlet=\"PersistentEditor.EditorTemplate(); context: {$implicit: EditorModel}\"></ng-content>\r\n    </ng-content>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap\";:root{--ck-content-font-family: \"Lato\"}@media print{body{margin:0!important}}.main-container{font-family:var(--ck-content-font-family);width:fit-content;margin-left:auto;margin-right:auto}.editor-container_classic-editor .editor-container__editor{min-width:795px;max-width:795px}.markdown-editor .ck-content{overflow-x:hidden!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CKEditorModule }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MarkdownEditorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "markdown-editor", standalone: true, imports: [CommonModule, FormsModule, CKEditorModule], encapsulation: ViewEncapsulation.None, providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MarkdownEditorComponent), multi: true },
-                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => MarkdownEditorComponent), multi: true }
-                    ], template: "<div class=\"html-editor\" *ngIf=\"EditorModel && PersistentEditor\">\r\n    <ng-content *ngIf=\"PersistentEditor.EditorTemplate()\">\r\n        <ng-content *ngTemplateOutlet=\"PersistentEditor.EditorTemplate(); context: {$implicit: EditorModel}\"></ng-content>\r\n    </ng-content>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap\";:root{--ck-content-font-family: \"Lato\"}@media print{body{margin:0!important}}.main-container{font-family:var(--ck-content-font-family);width:fit-content;margin-left:auto;margin-right:auto}.editor-container_classic-editor .editor-container__editor{min-width:795px;max-width:795px}.markdown-editor .ck-content{overflow-x:hidden!important}\n"] }]
-        }], propDecorators: { PersistentEditor: [{
-                type: Input
-            }], Readonly: [{
-                type: Input
-            }], Required: [{
-                type: Input
-            }], Validation: [{
-                type: Input
-            }], MentionMarker: [{
-                type: Input
-            }], MentionEntities: [{
-                type: Input
-            }], onEditorLoaded: [{
-                type: Output
-            }] } });
+const CustomMention = Mention.extend({
+    renderMarkdown(node) { return `@${node.attrs?.id || node.attrs?.label}`; },
+    parseMarkdown(token) { return { type: token.type, attrs: { id: token.text, label: token.text } }; },
+});
+marked.use({
+    extensions: [
+        {
+            name: 'mention', level: 'inline',
+            tokenizer(src) {
+                const match = /^@([\w-]+)/.exec(src);
+                if (!match)
+                    return undefined;
+                return { type: 'mention', raw: match[0], text: match[1] };
+            },
+            renderer(token) { return token.raw; },
+        },
+    ],
+});
+const mymarked = marked;
 
-const cloudConfig$2 = {
-    version: '46.1.1',
-    translations: ['it']
+let handleFiles = async (view, files) => {
+    const file = Array.from(files || []).find(f => f.type.startsWith('image/'));
+    if (!file)
+        return;
+    const reader = new FileReader();
+    reader.onload = () => {
+        const base64 = reader.result;
+        const img = new window.Image();
+        img.onload = () => {
+            const { schema } = view.state;
+            const node = schema.nodes.image.create({ src: base64, width: img.naturalWidth, float: "none" });
+            const tr = view.state.tr.replaceSelectionWith(node);
+            view.dispatch(tr);
+        };
+        img.src = base64;
+    };
+    reader.readAsDataURL(file);
 };
-const LICENSE_KEY$2 = 'eyJhbGciOiJFUzI1NiJ9.eyJleHAiOjE4MDQ5ODIzOTksImp0aSI6ImJkZDU4ZGM3LTlhYzgtNDA4Mi05ZDk3LTg3Yzc0NjEzMDlmNyIsInVzYWdlRW5kcG9pbnQiOiJodHRwczovL3Byb3h5LWV2ZW50LmNrZWRpdG9yLmNvbSIsImRpc3RyaWJ1dGlvbkNoYW5uZWwiOlsiY2xvdWQiLCJkcnVwYWwiXSwid2hpdGVMYWJlbCI6dHJ1ZSwiZmVhdHVyZXMiOlsiRFJVUCIsIkRPIiwiRlAiLCJTQyIsIlRPQyIsIlRQTCIsIlBPRSIsIkNDIiwiTUYiLCJFMlAiLCJFMlciLCJNTEwiLCJTRUUiLCJFQ0giLCJFSVMiLCJMSCIsIkZPTyJdLCJ2YyI6IjdjZjg2OGYwIn0.vw-04yWGiTzZVSaGxQUGCxWXBUQXRJ0yB2ItqwvNnd7nEjMFC4d9kiDgbkzGnHgAjkiQEUqTzrM7b1z4cR6rhA';
-class HtmlEditorStandaloneComponent {
-    constructor() {
-        this.Readonly = false; // Angular19 -> [disabled]
-        this.Required = false;
-        this.Validation = false;
-        this.onEditorLoaded = new EventEmitter();
-        //#region CKEditor5
-        this.Editor = null;
-        this.EditorConfig = null;
-        this.EditorModel = { editorDataText: '', };
-        //#endregion
-        //#region Forms
-        this.onTouched = () => { };
-        this.propagateChange = (_) => { };
-    }
-    initializeEditor() {
-        if (!this.Editor) {
-            loadCKEditorCloud(cloudConfig$2).then(this.internalInitializeEditor.bind(this));
-            this.onEditorLoaded.emit();
-        }
-    }
-    ngOnDestroy() {
-        console.warn("Il componente HtmlEditorComponent è stato distrutto");
-    }
-    internalInitializeEditor(cloudConfig) {
-        const { ClassicEditor, 
-        /* Plugins */
-        Alignment, AutoImage, Autosave, Base64UploadAdapter, Bold, CloudServices, Essentials, GeneralHtmlSupport, Heading, ImageInline, ImageBlock, ImageInsert, ImageInsertViaUrl, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Italic, Link, List, Paragraph, PasteFromOffice, Underline, SourceEditing } = cloudConfig.CKEditor;
-        this.Editor = ClassicEditor;
-        this.EditorConfig = {
-            toolbar: {
-                items: ['heading', '|', 'bold', 'italic', 'underline', '|', 'undo', 'redo', '|', 'insertImage', 'imageStyle:block', 'imageStyle:alignLeft', 'imageStyle:alignRight', '|', 'sourceEditing'],
-                shouldNotGroupWhenFull: false
+const CustomImage = Image.extend({
+    draggable: true,
+    selectable: true,
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            width: { default: null, },
+            float: { default: "none" }, // 'left' | 'right' | 'none'
+            src: {
+                default: null,
+                parseHTML: element => { return element.getAttribute('src'); },
+                renderHTML: attributes => { return { src: attributes.src, }; },
             },
-            plugins: [
-                Alignment, AutoImage, Autosave, Base64UploadAdapter, Bold, CloudServices, Essentials, GeneralHtmlSupport,
-                Heading, ImageInline, ImageBlock, ImageInsert, ImageInsertViaUrl, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Italic,
-                Link, List, Paragraph, PasteFromOffice, Underline, SourceEditing
-            ],
-            heading: {
-                options: [
-                    { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
-                    { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
-                    { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
-                    { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
-                    { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
-                    { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
-                    { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
-                ]
+        };
+    },
+    renderHTML({ HTMLAttributes }) {
+        const { float } = HTMLAttributes;
+        let style = '';
+        if (float === 'left')
+            style = 'float:left; display:block; margin-right: 10px';
+        else if (float === 'right')
+            style = 'float:right; display:block; margin-left: 10px';
+        else
+            style = `display: inline-block; float: none; vertical-align: middle;`;
+        return ['img', { ...HTMLAttributes, style }];
+    },
+    parseHTML() {
+        return [
+            {
+                tag: 'img[src]',
+                getAttrs: element => {
+                    const el = element;
+                    const src = el.getAttribute('src');
+                    if (!src)
+                        return false;
+                    // allow both normal URLs AND base64
+                    if (src.startsWith('http') || src.startsWith('data:image'))
+                        return { src, float: el.style.float || null, width: el.style.width ? parseInt(el.style.width) : null, };
+                    return false;
+                },
             },
-            htmlSupport: {
-                allow: [{ name: /^.*$/, styles: true, attributes: true, classes: true }]
+        ];
+    },
+    addProseMirrorPlugins: () => {
+        return [
+            new Plugin({
+                props: {
+                    handleDrop: (view, event) => {
+                        const files = event.dataTransfer?.files;
+                        if (!files?.length)
+                            return false;
+                        handleFiles(view, files);
+                        return true;
+                    },
+                    handlePaste: (view, event) => {
+                        const files = event.clipboardData?.files;
+                        if (!files?.length)
+                            return false;
+                        handleFiles(view, files);
+                        return true;
+                    },
+                },
+            })
+        ];
+    },
+});
+const CustomImageWithView = CustomImage.extend({
+    addNodeView: () => {
+        return ({ node, getPos, editor }) => {
+            let updateImage = (img, node) => {
+                img.draggable = false;
+                img.src = node.attrs.src;
+                img.style.width = node.attrs.width ? `${node.attrs.width}px` : '';
+                if (node.attrs.float === 'left' || node.attrs.float === 'right') {
+                    img.style.display = 'block';
+                    if (node.attrs.float === 'left')
+                        img.style.margin = "0 10px 0 0";
+                    else if (node.attrs.float === 'right')
+                        img.style.margin = "0 0 0 10px";
+                }
+                else {
+                    img.style.display = 'inline-block';
+                    img.style.verticalAlign = 'middle';
+                }
+            };
+            let updateWrapper = (wrapper, node) => {
+                wrapper.draggable = true;
+                wrapper.contentEditable = "false";
+                wrapper.className = `img-wrapper`;
+                wrapper.style.float = node.attrs.float;
+                if (node.attrs.float === 'left' || node.attrs.float === 'right') {
+                    wrapper.style.width = "auto";
+                    wrapper.style.textAlign = "auto";
+                }
+                else {
+                    wrapper.style.width = "100%";
+                    wrapper.style.textAlign = "center";
+                }
+            };
+            const wrapper = document.createElement('div');
+            updateWrapper(wrapper, node);
+            const img = document.createElement('img');
+            updateImage(img, node);
+            const toolbar = document.createElement('div');
+            toolbar.className = "img-toolbar";
+            const btn = (t, fn) => {
+                const b = document.createElement('button');
+                b.textContent = t;
+                b.onclick = fn;
+                return b;
+            };
+            toolbar.append(btn('Centro', () => editor.view.dispatch(editor.view.state.tr.setNodeMarkup(getPos(), undefined, { ...node.attrs, ...{ float: 'none' } }))), btn('Sinistra', () => editor.view.dispatch(editor.view.state.tr.setNodeMarkup(getPos(), undefined, { ...node.attrs, ...{ float: 'left' } }))), btn('Destra', () => editor.view.dispatch(editor.view.state.tr.setNodeMarkup(getPos(), undefined, { ...node.attrs, ...{ float: 'right' } }))), btn('Elimina', () => {
+                const nodePos = getPos();
+                editor.view.dispatch(editor.view.state.tr.delete(nodePos, nodePos + node.nodeSize));
+            }));
+            // resize
+            let startX = 0;
+            let startW = 0;
+            const handle = document.createElement('div');
+            handle.className = "img-resize-handle";
+            handle.onmousedown = (e) => {
+                startX = e.clientX;
+                startW = img.offsetWidth;
+                let latestWidth = null;
+                let ticking = false;
+                const move = (e) => {
+                    latestWidth = Math.max(80, startW + (e.clientX - startX));
+                    if (!ticking) {
+                        ticking = true;
+                        requestAnimationFrame(() => {
+                            const nodePos = getPos();
+                            editor.view.dispatch(editor.view.state.tr.setNodeMarkup(nodePos, undefined, { ...node.attrs, width: latestWidth }));
+                            ticking = false;
+                        });
+                    }
+                };
+                const up = () => {
+                    window.removeEventListener('mousemove', move);
+                    window.removeEventListener('mouseup', up);
+                };
+                window.addEventListener('mousemove', move);
+                window.addEventListener('mouseup', up);
+                // Per evitare che si attivi il drag dell'elemento sotto. Dal resizer si usa solo il resizer
+                e.preventDefault();
+            };
+            wrapper.append(img, toolbar, handle);
+            return {
+                dom: wrapper,
+                destroy() { wrapper.remove(); },
+                update(updatedNode) {
+                    // different node type -> recreate NodeView
+                    if (updatedNode.type !== node.type)
+                        return false;
+                    node = updatedNode;
+                    updateImage(img, node);
+                    updateWrapper(wrapper, node);
+                    return true;
+                },
+            };
+        };
+    },
+});
+
+const FontFamily = Extension.create({
+    name: 'fontFamily',
+    addGlobalAttributes() {
+        return [
+            {
+                types: ['textStyle'],
+                attributes: {
+                    fontFamily: {
+                        default: null,
+                        parseHTML: element => element.style.fontFamily,
+                        renderHTML: attributes => {
+                            if (!attributes.fontFamily)
+                                return {};
+                            return { style: `font-family: ${attributes.fontFamily}` };
+                        },
+                    },
+                },
             },
-            image: {
-                toolbar: ['imageStyle:block', 'imageStyle:side', '|', 'resizeImage:original'],
-                insert: { type: 'auto' }
+        ];
+    },
+    addCommands() {
+        return {
+            setFontFamily: (fontFamily) => ({ chain }) => { return chain().setMark('textStyle', { fontFamily }).run(); },
+            unsetFontFamily: () => ({ chain }) => { return chain().setMark('textStyle', { fontFamily: null, }).removeEmptyTextStyle().run(); },
+        };
+    },
+});
+
+const LineHeight = Extension.create({
+    name: 'lineHeight',
+    addGlobalAttributes() {
+        return [
+            {
+                types: ['paragraph', 'heading'],
+                attributes: {
+                    lineHeight: {
+                        default: null,
+                        parseHTML: element => element.style.lineHeight,
+                        renderHTML: attributes => {
+                            if (!attributes.lineHeight)
+                                return {};
+                            return { style: `line-height: ${attributes.lineHeight}` };
+                        },
+                    },
+                },
             },
-            initialData: "",
-            language: 'it',
-            licenseKey: LICENSE_KEY$2,
-            link: {
-                addTargetToExternalLinks: true,
-                defaultProtocol: 'https://',
-                decorators: {
-                    toggleDownloadable: {
-                        mode: 'manual',
-                        label: 'Downloadable',
-                        attributes: { download: 'file' }
+        ];
+    },
+    addCommands() {
+        return {
+            setLineHeight: (lineHeight) => ({ commands }) => { return commands.updateAttributes('paragraph', { lineHeight }); },
+            unsetLineHeight: () => ({ commands }) => { return commands.updateAttributes('paragraph', { lineHeight: null }); },
+        };
+    },
+});
+
+let Suggestion = (choiches) => {
+    return {
+        char: '@',
+        items: ({ query }) => {
+            return choiches.filter(item => item.description.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5);
+        },
+        render: () => {
+            let popup;
+            let selectedIndex = 0;
+            let currentProps;
+            return {
+                onStart: (props) => {
+                    popup = document.createElement('div');
+                    popup.classList.add('suggestion-popup');
+                    document.body.appendChild(popup);
+                    currentProps = props;
+                    updatePopup();
+                },
+                onKeyDown(props) {
+                    if (props.event.key === 'ArrowUp') {
+                        selectedIndex = (selectedIndex + currentProps.items.length - 1) % currentProps.items.length;
+                        updatePopup();
+                        return true;
                     }
-                }
+                    if (props.event.key === 'ArrowDown') {
+                        selectedIndex = (selectedIndex + 1) % currentProps.items.length;
+                        updatePopup();
+                        return true;
+                    }
+                    if (props.event.key === 'Enter') {
+                        selectItem();
+                        return true;
+                    }
+                    return false;
+                },
+                onUpdate(props) {
+                    currentProps = props;
+                    updatePopup();
+                },
+                onExit() { popup.remove(); },
+            };
+            function updatePopup() {
+                if (!currentProps.clientRect)
+                    return;
+                popup.innerHTML = '';
+                currentProps.items.forEach((item, index) => {
+                    const button = document.createElement('button');
+                    button.textContent = item.description;
+                    if (index === selectedIndex)
+                        button.classList.add('is-selected');
+                    button.addEventListener('click', () => {
+                        selectedIndex = index;
+                        selectItem();
+                    });
+                    popup.appendChild(button);
+                });
+                const rect = currentProps.clientRect();
+                popup.style.position = 'fixed';
+                popup.style.left = `${rect.left}px`;
+                popup.style.top = `${rect.bottom + 5}px`;
+            }
+            function selectItem() {
+                const item = currentProps.items[selectedIndex];
+                if (item)
+                    currentProps.command({ id: item.id, description: item.description, });
+            }
+        }
+    };
+};
+
+const FontSize = Extension.create({
+    name: 'fontSize',
+    addGlobalAttributes() {
+        return [
+            {
+                types: ['textStyle'],
+                attributes: {
+                    fontSize: {
+                        default: null,
+                        parseHTML: element => {
+                            const size = element.style.fontSize;
+                            if (!size)
+                                return null;
+                            // normalize pt → px
+                            if (size.endsWith('pt'))
+                                return `${Math.round(parseFloat(size) * 1.333)}px`;
+                            return size;
+                        },
+                        renderHTML: attributes => {
+                            if (!attributes.fontSize)
+                                return {};
+                            return { style: `font-size: ${attributes.fontSize}` };
+                        },
+                    },
+                },
             },
-            placeholder: 'Scrivi o incolla il tuo contenuto qui!'
+        ];
+    },
+    addCommands() {
+        return {
+            setFontSize: (fontSize) => ({ chain }) => { return chain().setMark('textStyle', { fontSize }).run(); },
+            unsetFontSize: () => ({ chain }) => { return chain().setMark('textStyle', { fontSize: null }).removeEmptyTextStyle().run(); },
         };
-    }
-    onEditorChange({ editor }) {
-        let data = editor?.getData();
-        if (data !== undefined)
-            this.propagateChange(data);
-    }
-    registerOnChange(fn) {
-        this.propagateChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    writeValue(obj) {
-        if (obj !== undefined) {
-            this.value = obj;
-        }
-        else
-            this.value = "";
-    }
-    validate(c) {
-        if (this.value || this.Readonly || !this.Required)
-            return null;
-        return null;
-    }
-    changed() {
-        this.propagateChange(this.value);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HtmlEditorStandaloneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: HtmlEditorStandaloneComponent, isStandalone: true, selector: "html-editor-standalone", inputs: { PersistentEditor: "PersistentEditor", Readonly: "Readonly", Required: "Required", Validation: "Validation" }, outputs: { onEditorLoaded: "onEditorLoaded" }, providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => HtmlEditorStandaloneComponent), multi: true },
-            { provide: NG_VALIDATORS, useExisting: forwardRef(() => HtmlEditorStandaloneComponent), multi: true }
-        ], ngImport: i0, template: "<div class=\"html-editor\">\r\n    <ckeditor *ngIf=\"Editor && EditorConfig\"\r\n              [data]=\"value\"\r\n              [editor]=\"Editor\"\r\n              [config]=\"EditorConfig\"\r\n              (change)=\"onEditorChange($event)\">\r\n    </ckeditor>\r\n    <div *ngIf=\"!Editor && !EditorConfig\">\r\n        Editor in caricamento...\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap\";:root{--ck-content-font-family: \"Lato\"}@media print{body{margin:0!important}}.main-container{font-family:var(--ck-content-font-family);width:fit-content;margin-left:auto;margin-right:auto}.editor-container_classic-editor .editor-container__editor{min-width:795px;max-width:795px}.html-editor .ck-content{overflow-x:hidden!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i2.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HtmlEditorStandaloneComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "html-editor-standalone", standalone: true, imports: [CommonModule, FormsModule, CKEditorModule], encapsulation: ViewEncapsulation.None, providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => HtmlEditorStandaloneComponent), multi: true },
-                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => HtmlEditorStandaloneComponent), multi: true }
-                    ], template: "<div class=\"html-editor\">\r\n    <ckeditor *ngIf=\"Editor && EditorConfig\"\r\n              [data]=\"value\"\r\n              [editor]=\"Editor\"\r\n              [config]=\"EditorConfig\"\r\n              (change)=\"onEditorChange($event)\">\r\n    </ckeditor>\r\n    <div *ngIf=\"!Editor && !EditorConfig\">\r\n        Editor in caricamento...\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap\";:root{--ck-content-font-family: \"Lato\"}@media print{body{margin:0!important}}.main-container{font-family:var(--ck-content-font-family);width:fit-content;margin-left:auto;margin-right:auto}.editor-container_classic-editor .editor-container__editor{min-width:795px;max-width:795px}.html-editor .ck-content{overflow-x:hidden!important}\n"] }]
-        }], propDecorators: { PersistentEditor: [{
-                type: Input
-            }], Readonly: [{
-                type: Input
-            }], Required: [{
-                type: Input
-            }], Validation: [{
-                type: Input
-            }], onEditorLoaded: [{
-                type: Output
-            }] } });
+    },
+});
 
-const cloudConfig$1 = {
-    version: '46.1.1',
-    translations: ['it']
-};
-const LICENSE_KEY$1 = 'eyJhbGciOiJFUzI1NiJ9.eyJleHAiOjE4MDQ5ODIzOTksImp0aSI6ImJkZDU4ZGM3LTlhYzgtNDA4Mi05ZDk3LTg3Yzc0NjEzMDlmNyIsInVzYWdlRW5kcG9pbnQiOiJodHRwczovL3Byb3h5LWV2ZW50LmNrZWRpdG9yLmNvbSIsImRpc3RyaWJ1dGlvbkNoYW5uZWwiOlsiY2xvdWQiLCJkcnVwYWwiXSwid2hpdGVMYWJlbCI6dHJ1ZSwiZmVhdHVyZXMiOlsiRFJVUCIsIkRPIiwiRlAiLCJTQyIsIlRPQyIsIlRQTCIsIlBPRSIsIkNDIiwiTUYiLCJFMlAiLCJFMlciLCJNTEwiLCJTRUUiLCJFQ0giLCJFSVMiLCJMSCIsIkZPTyJdLCJ2YyI6IjdjZjg2OGYwIn0.vw-04yWGiTzZVSaGxQUGCxWXBUQXRJ0yB2ItqwvNnd7nEjMFC4d9kiDgbkzGnHgAjkiQEUqTzrM7b1z4cR6rhA';
-class MarkdownEditorStandaloneComponent {
+class EditorComponent {
     constructor() {
-        this.Readonly = false; // Angular19 -> [disabled]
-        this.Required = false;
-        this.Validation = false;
-        // Mention
-        this.MentionMarker = "@";
-        this.MentionEntities = [];
-        this.onEditorLoaded = new EventEmitter();
-        //#region CKEditor5
-        this.Editor = null;
-        this.EditorConfig = null;
-        this.EditorModel = { editorDataText: '', };
-        //#endregion
-        //#region Forms
+        this.onChange = (_) => { };
         this.onTouched = () => { };
-        this.propagateChange = (_) => { };
+        this.element = viewChild.required("element");
+        this.EmojiSupport = input(false);
+        this.BulletListSupport = input(false);
+        this.TablesSupport = input(false);
+        this.Mode = input.required();
+        this.readonly = input(false, { transform: booleanAttribute });
+        this.disabled = input(false, { transform: booleanAttribute });
+        this.required = input(false, { transform: booleanAttribute });
+        this.MentionEntities = input([]);
+        this.name = input.required();
+        this.inputChange = new EventEmitter();
+        this.inputFocus = new EventEmitter();
+        this.inputFinalized = new EventEmitter();
+    }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    validate(_) {
+        return null;
     }
-    get mentionEntities() {
-        return this.MentionEntities.map(m => {
-            return { id: this.MentionMarker + m.id, description: m.description };
+    ngOnInit() {
+        let config = [];
+        config.push(...[
+            StarterKit,
+            TextStyle,
+            Color,
+            Underline,
+            FontSize,
+            FontFamily,
+            LineHeight,
+            TextAlign.configure({ types: ['heading', 'paragraph'] })
+        ]);
+        if (this.Mode() == "markdown")
+            config.push(Markdown.configure({ marked: mymarked }));
+        if (this.Mode() == "html") {
+            if (this.TablesSupport())
+                config.push(...[Table.configure({ lastColumnResizable: true, resizable: true }), TableRow, TableHeader, TableCell]);
+            config.push(CustomImageWithView);
+        }
+        if ((this.MentionEntities()?.length || 0) > 0)
+            config.push(CustomMention.configure({
+                deleteTriggerWithBackspace: true,
+                HTMLAttributes: { class: 'mention' },
+                suggestion: Suggestion(this.MentionEntities()),
+            }));
+        this.EditorRef = new Editor({
+            element: this.element().nativeElement,
+            extensions: config,
+            editable: !this.readonly(),
+            onUpdate: (_) => {
+                let value = "";
+                switch (this.Mode()) {
+                    case "html":
+                        value = this.EditorRef?.getHTML() || "";
+                        // Emissione del valore vuoto trimmato per bene
+                        if (value.trim() === "<p></p>")
+                            value = "";
+                        break;
+                    case "markdown":
+                        value = this.EditorRef?.getMarkdown() || "";
+                        break;
+                    case "text":
+                        value = this.EditorRef?.getText() || "";
+                        break;
+                }
+                this.onChange(value);
+            }
         });
     }
-    initializeEditor() {
-        if (!this.Editor) {
-            loadCKEditorCloud(cloudConfig$1).then(this.internalInitializeEditor.bind(this));
-            this.onEditorLoaded.emit();
+    async writeValue(obj) {
+        // Coercizione di tutti i valori "vuoti" all'unico "null"
+        if (obj === null || obj === undefined)
+            obj = null;
+        this.value = obj;
+        this.EditorRef?.commands.clearContent();
+        if (this.Mode() === "markdown")
+            this.EditorRef?.commands.setContent(this.value, { contentType: "markdown" });
+        else
+            this.EditorRef?.commands.insertContent(this.value);
+    }
+    setTypography(selectElement) {
+        switch (selectElement.target.value) {
+            case "paragraph":
+                this.EditorRef?.chain().focus().setParagraph().run();
+                break;
+            default:
+                this.EditorRef?.chain().focus().setHeading({ level: parseInt(selectElement.target.value.charAt(1)) }).run();
+                break;
         }
+        selectElement.target.value = "";
     }
-    ngOnDestroy() {
-        console.warn("Il componente MarkdownEditorComponent è stato distrutto");
+    setBold() {
+        this.EditorRef?.chain().focus().toggleBold().run();
     }
-    internalInitializeEditor(cloudConfig) {
-        const { ClassicEditor, 
-        /* Plugins */
-        Alignment, AutoImage, Autosave, Base64UploadAdapter, Bold, CloudServices, Essentials, Heading, ImageInline, ImageBlock, ImageInsert, ImageInsertViaUrl, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Italic, Link, List, Paragraph, PasteFromOffice, Mention, Emoji, Markdown, PasteFromMarkdownExperimental } = cloudConfig.CKEditor;
-        this.Editor = ClassicEditor;
-        this.EditorConfig = {
-            toolbar: {
-                items: ['heading', '|', 'bold', 'italic', 'bulletedList', '|', 'undo', 'redo', '|', 'emoji'],
-                shouldNotGroupWhenFull: false
-            },
-            plugins: [
-                Alignment, AutoImage, Autosave, Base64UploadAdapter, Bold, CloudServices, Essentials, Heading,
-                ImageInline, ImageBlock, ImageInsert, ImageInsertViaUrl, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Italic,
-                Link, List, Paragraph, PasteFromOffice, Mention, Emoji, Markdown, PasteFromMarkdownExperimental
-            ],
-            heading: {
-                options: [
-                    { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
-                    { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
-                    { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
-                    { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
-                    { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
-                    { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
-                    { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
-                ]
-            },
-            htmlSupport: {
-                allow: [{ name: /^.*$/, styles: true, attributes: true, classes: true }]
-            },
-            image: {
-                toolbar: ['imageStyle:block', 'imageStyle:side', '|', 'resizeImage:original'],
-                insert: { type: 'auto' }
-            },
-            initialData: "",
-            language: 'it',
-            licenseKey: LICENSE_KEY$1,
-            link: {
-                addTargetToExternalLinks: true,
-                defaultProtocol: 'https://',
-                decorators: {
-                    toggleDownloadable: {
-                        mode: 'manual',
-                        label: 'Downloadable',
-                        attributes: { download: 'file' }
-                    }
-                }
-            },
-            placeholder: 'Scrivi o incolla il tuo contenuto qui!'
-        };
-        // Attivo le Mention se sono presenti "MentionEntities"
-        // "Mention" serve sempre per "Emoji"
-        if (this.MentionEntities?.length > 0) {
-            this.EditorConfig.mention = {
-                feeds: [
-                    {
-                        marker: this.MentionMarker,
-                        feed: (filter) => {
-                            return this.mentionEntities.filter(t => t.id.toLowerCase().includes(filter.toLowerCase()));
-                        },
-                        minimumCharacters: 1,
-                        // Callback per stile
-                        itemRenderer: (item) => {
-                            let dropdownElement = document.createElement('div');
-                            dropdownElement.classList.add("ck-mention-dropdown");
-                            dropdownElement.id = `mention-list-item-id-${item.id}`;
-                            let useridElement = document.createElement('div');
-                            useridElement.classList.add("ck-username-id");
-                            useridElement.textContent = `${item.id.substr(1, item.id.length)}`;
-                            let userdescElement = document.createElement('div');
-                            userdescElement.textContent = ` ● ${item.description}`;
-                            dropdownElement.appendChild(useridElement);
-                            dropdownElement.appendChild(userdescElement);
-                            return dropdownElement;
-                        }
-                    },
-                ]
-            };
-        }
+    setItalic() {
+        this.EditorRef?.chain().focus().toggleItalic().run();
     }
-    onEditorChange({ editor }) {
-        let data = editor?.getData();
-        if (data !== undefined)
-            this.propagateChange(data);
+    setUnderlined() {
+        this.EditorRef?.chain().focus().toggleUnderline().run();
     }
-    registerOnChange(fn) {
-        this.propagateChange = fn;
+    setBulletList() {
+        this.EditorRef?.chain().focus().toggleBulletList().run();
     }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
+    undoAction() {
+        this.EditorRef?.chain().focus().undo().run();
     }
-    writeValue(obj) {
-        if (obj !== undefined) {
-            this.value = obj;
-        }
-        else
-            this.value = "";
+    redoAction() {
+        this.EditorRef?.chain().focus().redo().run();
     }
-    validate(c) {
-        if (this.value || this.Readonly || !this.Required)
-            return null;
-        return null;
+    addTable() {
+        this.EditorRef?.chain().focus().insertTable({ rows: 1, cols: 2, withHeaderRow: false }).run();
     }
-    changed() {
-        this.propagateChange(this.value);
+    deleteTable() {
+        this.EditorRef?.chain().focus().deleteTable().run();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MarkdownEditorStandaloneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MarkdownEditorStandaloneComponent, isStandalone: true, selector: "markdown-editor-standalone", inputs: { Readonly: "Readonly", Required: "Required", Validation: "Validation", MentionMarker: "MentionMarker", MentionEntities: "MentionEntities", PersistentEditor: "PersistentEditor" }, outputs: { onEditorLoaded: "onEditorLoaded" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => MarkdownEditorStandaloneComponent),
-                multi: true
-            },
-            {
-                provide: NG_VALIDATORS,
-                useExisting: forwardRef(() => MarkdownEditorStandaloneComponent),
-                multi: true
-            }
-        ], ngImport: i0, template: "<div class=\"markdown-editor\">\r\n    <ckeditor *ngIf=\"Editor && EditorConfig\"\r\n              [data]=\"value\"\r\n              [editor]=\"Editor\"\r\n              [config]=\"EditorConfig\"\r\n              (change)=\"onEditorChange($event)\">\r\n    </ckeditor>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap\";:root{--ck-content-font-family: \"Lato\"}@media print{body{margin:0!important}}.main-container{font-family:var(--ck-content-font-family);width:fit-content;margin-left:auto;margin-right:auto}.editor-container_classic-editor .editor-container__editor{min-width:795px;max-width:795px}.markdown-editor .ck-content{overflow-x:hidden!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i2.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MarkdownEditorStandaloneComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "markdown-editor-standalone", standalone: true, imports: [CommonModule, FormsModule, CKEditorModule], encapsulation: ViewEncapsulation.None, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => MarkdownEditorStandaloneComponent),
-                            multi: true
-                        },
-                        {
-                            provide: NG_VALIDATORS,
-                            useExisting: forwardRef(() => MarkdownEditorStandaloneComponent),
-                            multi: true
-                        }
-                    ], template: "<div class=\"markdown-editor\">\r\n    <ckeditor *ngIf=\"Editor && EditorConfig\"\r\n              [data]=\"value\"\r\n              [editor]=\"Editor\"\r\n              [config]=\"EditorConfig\"\r\n              (change)=\"onEditorChange($event)\">\r\n    </ckeditor>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap\";:root{--ck-content-font-family: \"Lato\"}@media print{body{margin:0!important}}.main-container{font-family:var(--ck-content-font-family);width:fit-content;margin-left:auto;margin-right:auto}.editor-container_classic-editor .editor-container__editor{min-width:795px;max-width:795px}.markdown-editor .ck-content{overflow-x:hidden!important}\n"] }]
-        }], propDecorators: { Readonly: [{
-                type: Input
-            }], Required: [{
-                type: Input
-            }], Validation: [{
-                type: Input
-            }], MentionMarker: [{
-                type: Input
-            }], MentionEntities: [{
-                type: Input
-            }], onEditorLoaded: [{
-                type: Output
-            }], PersistentEditor: [{
-                type: Input
-            }] } });
-
-const cloudConfig = {
-    version: '46.1.1',
-    translations: ['it']
-};
-const LICENSE_KEY = 'eyJhbGciOiJFUzI1NiJ9.eyJleHAiOjE4MDQ5ODIzOTksImp0aSI6ImJkZDU4ZGM3LTlhYzgtNDA4Mi05ZDk3LTg3Yzc0NjEzMDlmNyIsInVzYWdlRW5kcG9pbnQiOiJodHRwczovL3Byb3h5LWV2ZW50LmNrZWRpdG9yLmNvbSIsImRpc3RyaWJ1dGlvbkNoYW5uZWwiOlsiY2xvdWQiLCJkcnVwYWwiXSwid2hpdGVMYWJlbCI6dHJ1ZSwiZmVhdHVyZXMiOlsiRFJVUCIsIkRPIiwiRlAiLCJTQyIsIlRPQyIsIlRQTCIsIlBPRSIsIkNDIiwiTUYiLCJFMlAiLCJFMlciLCJNTEwiLCJTRUUiLCJFQ0giLCJFSVMiLCJMSCIsIkZPTyJdLCJ2YyI6IjdjZjg2OGYwIn0.vw-04yWGiTzZVSaGxQUGCxWXBUQXRJ0yB2ItqwvNnd7nEjMFC4d9kiDgbkzGnHgAjkiQEUqTzrM7b1z4cR6rhA';
-class PersistentEditor {
-    constructor() {
-        this.Mode = input.required();
-        this.EditorTemplate = viewChild("template");
-        this.DEBUG = inject(TXE_DEBUG, { optional: true }) || false;
-        this.OnEditorLoadedCallbackFunction = null;
-        this.Editor = null;
-        this.EditorConfig = null;
-        this.MentionMarker = "@";
-        this.MentionEntities = [];
+    addRow() {
+        this.EditorRef?.chain().focus().addRowAfter().run();
     }
-    iInitializeEditor(mentionmarker, mentionentitis, onEditorLoaded) {
-        if (onEditorLoaded)
-            this.OnEditorLoadedCallbackFunction = onEditorLoaded;
-        if (this.Editor && this.EditorConfig) {
-            if (this.DEBUG)
-                console.log("@ Persistent Editor @ Editor is already initialized");
-        }
-        else {
-            loadCKEditorCloud(cloudConfig).then(this.internalInitializeEditor.bind(this));
-            if (this.DEBUG)
-                console.log(`@ Persistent Editor @ Editor is initialized (${this.Mode()} mode). loadCKEditorCloud has been called`);
-            this.OnEditorLoadedCallbackFunction?.("initialize");
-        }
-        this.MentionMarker = mentionmarker ?? "@";
-        this.MentionEntities = mentionentitis ?? [];
-        if ((this.MentionEntities?.length || 0) > 0) {
-            if (this.DEBUG)
-                console.log(`@ Persistent Editor @ Editor is using ${this.MentionEntities?.length} mentions possibilities`);
-        }
+    deleteRow() {
+        this.EditorRef?.chain().focus().deleteRow().run();
     }
-    onReady() {
-        this.OnEditorLoadedCallbackFunction?.("ready");
+    addColumn() {
+        this.EditorRef?.chain().focus().addColumnAfter().run();
     }
-    internalInitializeEditor(cloudConfig) {
-        const { ClassicEditor, 
-        // Plugin generali
-        Alignment, AutoImage, Autosave, Base64UploadAdapter, Bold, CloudServices, Essentials, Heading, ImageInline, ImageBlock, ImageInsert, ImageInsertViaUrl, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Italic, Link, List, Paragraph, PasteFromOffice, 
-        // Plugin specifici modalità HTML
-        GeneralHtmlSupport, Underline, SourceEditing, 
-        // Plugin specifici modalità Markdown
-        Mention, Emoji, Markdown, PasteFromMarkdownExperimental } = cloudConfig.CKEditor;
-        let markdownPlugins = [Mention, Emoji, Markdown, PasteFromMarkdownExperimental];
-        let htmlPlugins = [GeneralHtmlSupport, Underline, SourceEditing];
-        this.Editor = ClassicEditor;
-        this.EditorConfig = {
-            toolbar: {
-                items: this.Mode() == "html" ?
-                    ['heading', '|', 'bold', 'italic', 'underline', '|', 'undo', 'redo', '|', 'insertImage', 'imageStyle:block', 'imageStyle:alignLeft', 'imageStyle:alignRight', '|', 'sourceEditing'] :
-                    ['heading', '|', 'bold', 'italic', 'bulletedList', '|', 'undo', 'redo', '|', 'emoji'],
-                shouldNotGroupWhenFull: false
-            },
-            plugins: [
-                Alignment, AutoImage, Autosave, Base64UploadAdapter, Bold, CloudServices, Essentials,
-                Heading, ImageInline, ImageBlock, ImageInsert, ImageInsertViaUrl, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Italic,
-                Link, List, Paragraph, PasteFromOffice,
-                ...(this.Mode() == "html" ? htmlPlugins : markdownPlugins)
-            ],
-            heading: {
-                options: [
-                    { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
-                    { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
-                    { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
-                    { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
-                    { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
-                    { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
-                    { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
-                ]
-            },
-            htmlSupport: {
-                allow: [{ name: /^.*$/, styles: true, attributes: true, classes: true }]
-            },
-            image: {
-                toolbar: ['imageStyle:block', 'imageStyle:side', '|', 'resizeImage:original'],
-                insert: { type: 'auto' }
-            },
-            initialData: "",
-            language: 'it',
-            licenseKey: LICENSE_KEY,
-            link: {
-                addTargetToExternalLinks: true,
-                defaultProtocol: 'https://',
-                decorators: {
-                    toggleDownloadable: {
-                        mode: 'manual',
-                        label: 'Downloadable',
-                        attributes: { download: 'file' }
-                    }
-                }
-            },
-            placeholder: 'Scrivi o incolla il tuo contenuto qui!'
-        };
-        if (this.Mode() == "markdown")
-            this.setupMentions();
+    deleteColumn() {
+        this.EditorRef?.chain().focus().deleteColumn().run();
     }
-    setupMentions() {
-        if (!this.EditorConfig)
-            return;
-        this.EditorConfig.mention = {
-            feeds: [
-                {
-                    marker: this.MentionMarker ?? "@",
-                    feed: (filter) => {
-                        return this.MentionEntities?.filter(t => t.id.toLowerCase().includes(filter.toLowerCase())) || [];
-                    },
-                    minimumCharacters: 1,
-                    // Callback per stile
-                    itemRenderer: (item) => {
-                        let dropdownElement = document.createElement('div');
-                        dropdownElement.classList.add("ck-mention-dropdown");
-                        dropdownElement.id = `mention-list-item-id-${item.id}`;
-                        let useridElement = document.createElement('div');
-                        useridElement.classList.add("ck-username-id");
-                        useridElement.textContent = `${item.id.substr(1, item.id.length)}`;
-                        let userdescElement = document.createElement('div');
-                        userdescElement.textContent = ` ● ${item.description}`;
-                        dropdownElement.appendChild(useridElement);
-                        dropdownElement.appendChild(userdescElement);
-                        return dropdownElement;
-                    }
-                },
-            ]
-        };
+    setEmoji(selectElement) {
+        this.EditorRef?.chain().focus().insertContent(selectElement.target.value).run();
+        selectElement.target.value = "";
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PersistentEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: PersistentEditor, isStandalone: true, selector: "persistent-ckeditor", inputs: { Mode: { classPropertyName: "Mode", publicName: "Mode", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "EditorTemplate", first: true, predicate: ["template"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #template let-EditorModel>\r\n    <ckeditor \r\n        *ngIf=\"Editor && EditorConfig\" \r\n        [editor]=\"Editor\" \r\n        [config]=\"EditorConfig\" \r\n        [data]=\"EditorModel.value\" \r\n        (ready)=\"onReady()\"\r\n        (change)=\"EditorModel.onEditorChange($event)\"></ckeditor>\r\n</ng-template>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap\";:root{--ck-content-font-family: \"Lato\"}@media print{body{margin:0!important}}.main-container{font-family:var(--ck-content-font-family);width:fit-content;margin-left:auto;margin-right:auto}.editor-container_classic-editor .editor-container__editor{min-width:795px;max-width:795px}.html-editor .ck-content{overflow-x:hidden!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i2.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: EditorComponent, isStandalone: true, selector: "es-editor", inputs: { EmojiSupport: { classPropertyName: "EmojiSupport", publicName: "EmojiSupport", isSignal: true, isRequired: false, transformFunction: null }, BulletListSupport: { classPropertyName: "BulletListSupport", publicName: "BulletListSupport", isSignal: true, isRequired: false, transformFunction: null }, TablesSupport: { classPropertyName: "TablesSupport", publicName: "TablesSupport", isSignal: true, isRequired: false, transformFunction: null }, Mode: { classPropertyName: "Mode", publicName: "Mode", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, MentionEntities: { classPropertyName: "MentionEntities", publicName: "MentionEntities", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { inputChange: "inputChange", inputFocus: "inputFocus", inputFinalized: "inputFinalized" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EditorComponent), multi: true },
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => EditorComponent), multi: true }
+        ], viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"editor-shell\">\r\n    <div class=\"editor-toolbar\">\r\n\r\n        <!-- Typography -->\r\n        <select id=\"heading-select\" (change)=\"setTypography($event)\">\r\n            <option value=\"\" selected hidden>Pragrafo</option>\r\n            <option value=\"paragraph\">Pragrafo</option>\r\n            <option value=\"h1\">Intestazione 1</option>\r\n            <option value=\"h2\">Intestazione 2</option>\r\n            <option value=\"h3\">Intestazione 3</option>\r\n            <option value=\"h4\">Intestazione 4</option>\r\n            <option value=\"h5\">Intestazione 5</option>\r\n            <option value=\"h6\">Intestazione 6</option>\r\n        </select>\r\n\r\n        <div class=\"divider\"></div>\r\n\r\n        <!-- Formatting -->\r\n        <button (click)=\"setBold()\"><b>B</b></button>\r\n        <button (click)=\"setItalic()\"><i>I</i></button>\r\n        <button (click)=\"setUnderlined()\"><u>U</u></button>\r\n\r\n        <!-- Lists -->\r\n        @if(BulletListSupport()){\r\n        <button (click)=\"setBulletList()\">\u2022 Lista</button>\r\n        }\r\n\r\n        <div class=\"divider\"></div>\r\n\r\n        @if(Mode() == \"html\" && TablesSupport())\r\n        {\r\n        <button (click)=\"addTable()\">\u229E<span style=\"font-size: 10px;\">\u271A</span></button>\r\n        <button (click)=\"deleteTable()\">\u229E<span style=\"font-size: 10px;\">\u25AC</span></button>\r\n        <button (click)=\"addRow()\">\uD83D\uDDA8<span style=\"font-size: 10px;\">\u271A</span></button>\r\n        <button (click)=\"deleteRow()\">\uD83D\uDDA8<span style=\"font-size: 10px;\">\u25AC</span></button>\r\n        <button (click)=\"addColumn()\">\uD83D\uDDC4<span style=\"font-size: 10px;\">\u271A</span></button>\r\n        <button (click)=\"deleteColumn()\">\uD83D\uDDC4<span style=\"font-size: 10px;\">\u25AC</span></button>\r\n        <div class=\"divider\"></div>\r\n        }\r\n\r\n        <!-- History -->\r\n        <button (click)=\"undoAction()\">\u21B6</button>\r\n        <button (click)=\"redoAction()\">\u21B7</button>\r\n\r\n        @if(EmojiSupport()){\r\n        <select id=\"emoji-select\" (change)=\"setEmoji($event)\">\r\n            <option value=\"\" hidden selected>\uD83D\uDE0A</option>\r\n            <option value=\"\uD83D\uDE0A\">\uD83D\uDE0A</option>\r\n            <option value=\"\uD83D\uDE00\">\uD83D\uDE00</option>\r\n            <option value=\"\uD83D\uDE02\">\uD83D\uDE02</option>\r\n            <option value=\"\uD83D\uDD25\">\uD83D\uDD25</option>\r\n            <option value=\"\uD83C\uDF89\">\uD83C\uDF89</option>\r\n            <option value=\"\uD83D\uDE80\">\uD83D\uDE80</option>\r\n            <option value=\"\u2764\uFE0F\">\u2764\uFE0F</option>\r\n            <option value=\"\uD83D\uDC4D\">\uD83D\uDC4D</option>\r\n        </select>\r\n        }\r\n    </div>\r\n\r\n    <div #element></div>\r\n</div>", styles: [".editor-shell{border:1px solid #dcdcdc;border-radius:10px;background:#fff;overflow:hidden;isolation:isolate;box-shadow:0 1px 2px #0000000a,0 6px 24px #0000000d;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.editor-toolbar{display:flex;align-items:center;gap:4px;padding:4px;background:linear-gradient(to bottom,#fafafa,#f3f3f3);border-bottom:1px solid #e5e5e5;flex-wrap:wrap}.editor-toolbar button{display:inline-flex;align-items:center;justify-content:center;line-height:1;min-width:36px;height:36px;padding:0 12px;border:1px solid #ddd;border-radius:8px;background:transparent;color:#333;font-size:18px;font-weight:500;cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease}.editor-toolbar button:hover{background:#e9e9e9}.editor-toolbar button:active{transform:translateY(1px)}.editor-toolbar button.is-active{background:#dfe7ff;border-color:#c7d2fe;color:#2342c0}.editor-toolbar select{height:36px;padding:0 12px;border:1px solid #d6d6d6;border-radius:8px;background:#fff;font-size:14px;color:#222;cursor:pointer;transition:border-color .12s ease,box-shadow .12s ease,background .12s ease}.editor-toolbar select:hover{background:#fafafa}.editor-toolbar select:focus{outline:none;border-color:#8ba8ff;box-shadow:0 0 0 3px #6082ff26}.editor-toolbar .divider{width:1px;height:24px;background:#ddd;margin:0 2px}.ProseMirror{min-height:60px;padding:12px;outline:none;font-size:16px;line-height:1.7;color:#1f1f1f;caret-color:#2563eb}.ProseMirror h1,.ProseMirror h2,.ProseMirror h3{line-height:1.2;margin-top:.8em;margin-bottom:.4em;font-weight:700;letter-spacing:-.02em}.ProseMirror h1{font-size:2rem}.ProseMirror h2{font-size:1.5rem}.ProseMirror h3{font-size:1.25rem}.ProseMirror p{margin:0}.ProseMirror ul,.ProseMirror ol{padding-left:1.5rem;margin:5px 0}.ProseMirror li{margin:0}.ProseMirror blockquote{margin:1.4rem 0;padding-left:1rem;border-left:4px solid #c7d2fe;color:#555}.ProseMirror code{background:#f3f4f6;color:#d63384;padding:.15em .35em;border-radius:4px;font-size:.92em}.ProseMirror pre{background:#1f2937;color:#f9fafb;padding:16px 18px;border-radius:10px;overflow-x:auto;margin:1.2rem 0}.ProseMirror pre code{background:transparent;color:inherit;padding:0}.ProseMirror a{color:#2563eb;text-decoration:underline}.ProseMirror hr{border:none;border-top:1px solid #e2e2e2;margin:2rem 0}.ProseMirror table{width:100%;border-collapse:collapse;margin:1.2rem 0}.ProseMirror th,.ProseMirror td{border:1px solid #ddd;padding:5px;position:relative}.ProseMirror th{background:#f5f5f5;text-align:left}.ProseMirror .column-resize-handle{position:absolute;top:0;right:-2px;width:5px;height:100%;cursor:col-resize;background:transparent;z-index:20}.ProseMirror ::selection{background:#6082ff40}.suggestion-popup{display:flex;flex-direction:column;min-width:220px;padding:6px;background:#fff;border:1px solid #e5e5e5;border-radius:10px;box-shadow:0 12px 30px #00000014,0 2px 8px #0000000d;z-index:1000}.suggestion-popup button{border:none;background:transparent;border-radius:8px;padding:8px 10px;text-align:left;cursor:pointer;font-size:14px}.suggestion-popup button:hover,.suggestion-popup button.is-selected{background:#eef2ff}.mention{display:inline-flex;align-items:center;background:#eef2ff;color:#304ffe;padding:2px 6px;border-radius:5px;font-weight:500}.img-wrapper{position:relative;display:inline-block;margin:12px 0}.img-wrapper img{max-width:100%;border-radius:10px;transition:opacity .2s ease}.img-toolbar{position:absolute;top:8px;left:8px;display:flex;gap:6px;background:#fffffff2;border:1px solid #e5e5e5;border-radius:8px;padding:4px;box-shadow:0 8px 20px #00000014}.img-toolbar button{border:none;background:transparent;padding:4px 6px;cursor:pointer;font-size:12px}.img-toolbar button:hover{background:#eef2ff;border-radius:6px}.img-resize-handle{position:absolute;right:0;bottom:0;width:12px;height:12px;background:#2563eb;border-radius:3px;cursor:se-resize}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PersistentEditor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: "persistent-ckeditor", standalone: true, imports: [CommonModule, FormsModule, CKEditorModule], encapsulation: ViewEncapsulation.None, template: "<ng-template #template let-EditorModel>\r\n    <ckeditor \r\n        *ngIf=\"Editor && EditorConfig\" \r\n        [editor]=\"Editor\" \r\n        [config]=\"EditorConfig\" \r\n        [data]=\"EditorModel.value\" \r\n        (ready)=\"onReady()\"\r\n        (change)=\"EditorModel.onEditorChange($event)\"></ckeditor>\r\n</ng-template>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap\";:root{--ck-content-font-family: \"Lato\"}@media print{body{margin:0!important}}.main-container{font-family:var(--ck-content-font-family);width:fit-content;margin-left:auto;margin-right:auto}.editor-container_classic-editor .editor-container__editor{min-width:795px;max-width:795px}.html-editor .ck-content{overflow-x:hidden!important}\n"] }]
-        }] });
+            args: [{ selector: "es-editor", standalone: true, imports: [CommonModule, FormsModule], encapsulation: ViewEncapsulation.None, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EditorComponent), multi: true },
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => EditorComponent), multi: true }
+                    ], template: "<div class=\"editor-shell\">\r\n    <div class=\"editor-toolbar\">\r\n\r\n        <!-- Typography -->\r\n        <select id=\"heading-select\" (change)=\"setTypography($event)\">\r\n            <option value=\"\" selected hidden>Pragrafo</option>\r\n            <option value=\"paragraph\">Pragrafo</option>\r\n            <option value=\"h1\">Intestazione 1</option>\r\n            <option value=\"h2\">Intestazione 2</option>\r\n            <option value=\"h3\">Intestazione 3</option>\r\n            <option value=\"h4\">Intestazione 4</option>\r\n            <option value=\"h5\">Intestazione 5</option>\r\n            <option value=\"h6\">Intestazione 6</option>\r\n        </select>\r\n\r\n        <div class=\"divider\"></div>\r\n\r\n        <!-- Formatting -->\r\n        <button (click)=\"setBold()\"><b>B</b></button>\r\n        <button (click)=\"setItalic()\"><i>I</i></button>\r\n        <button (click)=\"setUnderlined()\"><u>U</u></button>\r\n\r\n        <!-- Lists -->\r\n        @if(BulletListSupport()){\r\n        <button (click)=\"setBulletList()\">\u2022 Lista</button>\r\n        }\r\n\r\n        <div class=\"divider\"></div>\r\n\r\n        @if(Mode() == \"html\" && TablesSupport())\r\n        {\r\n        <button (click)=\"addTable()\">\u229E<span style=\"font-size: 10px;\">\u271A</span></button>\r\n        <button (click)=\"deleteTable()\">\u229E<span style=\"font-size: 10px;\">\u25AC</span></button>\r\n        <button (click)=\"addRow()\">\uD83D\uDDA8<span style=\"font-size: 10px;\">\u271A</span></button>\r\n        <button (click)=\"deleteRow()\">\uD83D\uDDA8<span style=\"font-size: 10px;\">\u25AC</span></button>\r\n        <button (click)=\"addColumn()\">\uD83D\uDDC4<span style=\"font-size: 10px;\">\u271A</span></button>\r\n        <button (click)=\"deleteColumn()\">\uD83D\uDDC4<span style=\"font-size: 10px;\">\u25AC</span></button>\r\n        <div class=\"divider\"></div>\r\n        }\r\n\r\n        <!-- History -->\r\n        <button (click)=\"undoAction()\">\u21B6</button>\r\n        <button (click)=\"redoAction()\">\u21B7</button>\r\n\r\n        @if(EmojiSupport()){\r\n        <select id=\"emoji-select\" (change)=\"setEmoji($event)\">\r\n            <option value=\"\" hidden selected>\uD83D\uDE0A</option>\r\n            <option value=\"\uD83D\uDE0A\">\uD83D\uDE0A</option>\r\n            <option value=\"\uD83D\uDE00\">\uD83D\uDE00</option>\r\n            <option value=\"\uD83D\uDE02\">\uD83D\uDE02</option>\r\n            <option value=\"\uD83D\uDD25\">\uD83D\uDD25</option>\r\n            <option value=\"\uD83C\uDF89\">\uD83C\uDF89</option>\r\n            <option value=\"\uD83D\uDE80\">\uD83D\uDE80</option>\r\n            <option value=\"\u2764\uFE0F\">\u2764\uFE0F</option>\r\n            <option value=\"\uD83D\uDC4D\">\uD83D\uDC4D</option>\r\n        </select>\r\n        }\r\n    </div>\r\n\r\n    <div #element></div>\r\n</div>", styles: [".editor-shell{border:1px solid #dcdcdc;border-radius:10px;background:#fff;overflow:hidden;isolation:isolate;box-shadow:0 1px 2px #0000000a,0 6px 24px #0000000d;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.editor-toolbar{display:flex;align-items:center;gap:4px;padding:4px;background:linear-gradient(to bottom,#fafafa,#f3f3f3);border-bottom:1px solid #e5e5e5;flex-wrap:wrap}.editor-toolbar button{display:inline-flex;align-items:center;justify-content:center;line-height:1;min-width:36px;height:36px;padding:0 12px;border:1px solid #ddd;border-radius:8px;background:transparent;color:#333;font-size:18px;font-weight:500;cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease}.editor-toolbar button:hover{background:#e9e9e9}.editor-toolbar button:active{transform:translateY(1px)}.editor-toolbar button.is-active{background:#dfe7ff;border-color:#c7d2fe;color:#2342c0}.editor-toolbar select{height:36px;padding:0 12px;border:1px solid #d6d6d6;border-radius:8px;background:#fff;font-size:14px;color:#222;cursor:pointer;transition:border-color .12s ease,box-shadow .12s ease,background .12s ease}.editor-toolbar select:hover{background:#fafafa}.editor-toolbar select:focus{outline:none;border-color:#8ba8ff;box-shadow:0 0 0 3px #6082ff26}.editor-toolbar .divider{width:1px;height:24px;background:#ddd;margin:0 2px}.ProseMirror{min-height:60px;padding:12px;outline:none;font-size:16px;line-height:1.7;color:#1f1f1f;caret-color:#2563eb}.ProseMirror h1,.ProseMirror h2,.ProseMirror h3{line-height:1.2;margin-top:.8em;margin-bottom:.4em;font-weight:700;letter-spacing:-.02em}.ProseMirror h1{font-size:2rem}.ProseMirror h2{font-size:1.5rem}.ProseMirror h3{font-size:1.25rem}.ProseMirror p{margin:0}.ProseMirror ul,.ProseMirror ol{padding-left:1.5rem;margin:5px 0}.ProseMirror li{margin:0}.ProseMirror blockquote{margin:1.4rem 0;padding-left:1rem;border-left:4px solid #c7d2fe;color:#555}.ProseMirror code{background:#f3f4f6;color:#d63384;padding:.15em .35em;border-radius:4px;font-size:.92em}.ProseMirror pre{background:#1f2937;color:#f9fafb;padding:16px 18px;border-radius:10px;overflow-x:auto;margin:1.2rem 0}.ProseMirror pre code{background:transparent;color:inherit;padding:0}.ProseMirror a{color:#2563eb;text-decoration:underline}.ProseMirror hr{border:none;border-top:1px solid #e2e2e2;margin:2rem 0}.ProseMirror table{width:100%;border-collapse:collapse;margin:1.2rem 0}.ProseMirror th,.ProseMirror td{border:1px solid #ddd;padding:5px;position:relative}.ProseMirror th{background:#f5f5f5;text-align:left}.ProseMirror .column-resize-handle{position:absolute;top:0;right:-2px;width:5px;height:100%;cursor:col-resize;background:transparent;z-index:20}.ProseMirror ::selection{background:#6082ff40}.suggestion-popup{display:flex;flex-direction:column;min-width:220px;padding:6px;background:#fff;border:1px solid #e5e5e5;border-radius:10px;box-shadow:0 12px 30px #00000014,0 2px 8px #0000000d;z-index:1000}.suggestion-popup button{border:none;background:transparent;border-radius:8px;padding:8px 10px;text-align:left;cursor:pointer;font-size:14px}.suggestion-popup button:hover,.suggestion-popup button.is-selected{background:#eef2ff}.mention{display:inline-flex;align-items:center;background:#eef2ff;color:#304ffe;padding:2px 6px;border-radius:5px;font-weight:500}.img-wrapper{position:relative;display:inline-block;margin:12px 0}.img-wrapper img{max-width:100%;border-radius:10px;transition:opacity .2s ease}.img-toolbar{position:absolute;top:8px;left:8px;display:flex;gap:6px;background:#fffffff2;border:1px solid #e5e5e5;border-radius:8px;padding:4px;box-shadow:0 8px 20px #00000014}.img-toolbar button{border:none;background:transparent;padding:4px 6px;cursor:pointer;font-size:12px}.img-toolbar button:hover{background:#eef2ff;border-radius:6px}.img-resize-handle{position:absolute;right:0;bottom:0;width:12px;height:12px;background:#2563eb;border-radius:3px;cursor:se-resize}\n"] }]
+        }], propDecorators: { inputChange: [{
+                type: Output
+            }], inputFocus: [{
+                type: Output
+            }], inputFinalized: [{
+                type: Output
+            }] } });
+
+const TXE_DEBUG = new InjectionToken('TXE_DEBUG');
 
 /*
  * Public API Surface of text-editors
@@ -670,5 +546,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { HtmlEditorComponent, HtmlEditorStandaloneComponent, MarkdownEditorComponent, MarkdownEditorStandaloneComponent, PersistentEditor, TXE_DEBUG };
+export { EditorComponent, TXE_DEBUG };
 //# sourceMappingURL=esfaenza-text-editors.mjs.map