@seniorsistemas/angular-components 19.5.5 → 19.6.0

package/fesm2022/seniorsistemas-angular-components-editor.mjs

@@ -0,0 +1,437 @@
+import { NgClass, NgStyle } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, Component, input, output, ChangeDetectionStrategy, ChangeDetectorRef, DestroyRef, viewChild, effect, forwardRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormGroup, FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { take } from 'rxjs/operators';
+import * as i1 from '@ngx-translate/core';
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
+import { ActiveDialog, DialogComponent, DialogService } from '@seniorsistemas/angular-components/dialog';
+import { Editor } from '@tiptap/core';
+export { Extension } from '@tiptap/core';
+import { Color } from '@tiptap/extension-color';
+import Highlight from '@tiptap/extension-highlight';
+import Image from '@tiptap/extension-image';
+import Placeholder from '@tiptap/extension-placeholder';
+import Subscript from '@tiptap/extension-subscript';
+import Superscript from '@tiptap/extension-superscript';
+import TextAlign from '@tiptap/extension-text-align';
+import { TextStyle } from '@tiptap/extension-text-style';
+import Underline from '@tiptap/extension-underline';
+import StarterKit from '@tiptap/starter-kit';
+import * as i3 from '@seniorsistemas/angular-components/button';
+import { ButtonModule } from '@seniorsistemas/angular-components/button';
+import * as i2 from '@seniorsistemas/angular-components/dynamic-form';
+import { DynamicFormModule } from '@seniorsistemas/angular-components/dynamic-form';
+import * as i4 from '@seniorsistemas/angular-components/template';
+import { TemplateModule } from '@seniorsistemas/angular-components/template';
+
+class LinkDialogComponent {
+    activeDialog = inject(ActiveDialog);
+    translateService = inject(TranslateService);
+    initialUrl = '';
+    form = new FormGroup({ url: new FormControl('') });
+    configs = [];
+    ngOnInit() {
+        this.form.setValue({ url: this.initialUrl });
+        this.configs = [
+            {
+                type: 'row',
+                fields: [
+                    {
+                        type: 'string',
+                        name: 'url',
+                        label: this.translateService.instant('platform.angular_components.editor_link_url_label'),
+                        placeholder: this.translateService.instant('platform.angular_components.editor_link_url_placeholder'),
+                    },
+                ],
+            },
+        ];
+    }
+    confirm() {
+        this.activeDialog.close(this.form.value.url?.trim() ?? '');
+    }
+    cancel() {
+        this.activeDialog.dismiss();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LinkDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LinkDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<s-dialog [header]=\"'platform.angular_components.editor_insert_link' | translate\">\n    <ng-template sTemplate=\"body\">\n        <s-dynamic-form [form]=\"form\" [configs]=\"configs\" />\n    </ng-template>\n    <ng-template sTemplate=\"footer\">\n        <div style=\"display:flex; justify-content:flex-end; gap:8px; width:100%\">\n            <s-button\n                [label]=\"'platform.angular_components.cancel' | translate\"\n                priority=\"secondary\"\n                (clicked)=\"cancel()\"\n            />\n            <s-button\n                [label]=\"'platform.angular_components.editor_confirm' | translate\"\n                priority=\"primary\"\n                (clicked)=\"confirm()\"\n            />\n        </div>\n    </ng-template>\n</s-dialog>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: DialogComponent, selector: "s-dialog", inputs: ["header", "visible", "size", "contentClassName", "escapeOnEsc", "destroyClickOutside", "closeAriaLabel"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: DynamicFormModule }, { kind: "component", type: i2.DynamicFormComponent, selector: "s-dynamic-form", inputs: ["id", "configs", "fields", "form", "errorMessages"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor", "menuAriaLabel", "ariaLabel"], outputs: ["clicked"] }, { kind: "ngmodule", type: TemplateModule }, { kind: "directive", type: i4.TemplateDirective, selector: "[sTemplate]", inputs: ["sTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LinkDialogComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [ReactiveFormsModule, TranslateModule, DialogComponent, DynamicFormModule, ButtonModule, TemplateModule], template: "<s-dialog [header]=\"'platform.angular_components.editor_insert_link' | translate\">\n    <ng-template sTemplate=\"body\">\n        <s-dynamic-form [form]=\"form\" [configs]=\"configs\" />\n    </ng-template>\n    <ng-template sTemplate=\"footer\">\n        <div style=\"display:flex; justify-content:flex-end; gap:8px; width:100%\">\n            <s-button\n                [label]=\"'platform.angular_components.cancel' | translate\"\n                priority=\"secondary\"\n                (clicked)=\"cancel()\"\n            />\n            <s-button\n                [label]=\"'platform.angular_components.editor_confirm' | translate\"\n                priority=\"primary\"\n                (clicked)=\"confirm()\"\n            />\n        </div>\n    </ng-template>\n</s-dialog>\n" }]
+        }] });
+
+class EditorToolbarButtonComponent {
+    icon = input.required();
+    label = input.required();
+    active = input(false);
+    disabled = input(false);
+    clicked = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditorToolbarButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: EditorToolbarButtonComponent, isStandalone: true, selector: "s-editor-toolbar-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: "<button\n    type=\"button\"\n    class=\"inline-flex items-center justify-center w-7 h-7 p-0 border-0 bg-transparent rounded cursor-pointer text-base leading-none transition-colors duration-150 disabled:opacity-[.35] disabled:cursor-not-allowed\"\n    [ngClass]=\"{\n        'bg-[#ebebfa]': active(),\n        'text-[#5c5ce6]': active(),\n        'hover:bg-[#ddddf7]': active(),\n        'text-[#3d3d4d]': !active(),\n        'enabled:hover:bg-[#e8e8f0]': !active(),\n        'enabled:hover:text-[#1e1e2e]': !active()\n    }\"\n    [disabled]=\"disabled()\"\n    [title]=\"label()\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-pressed]=\"active()\"\n    (click)=\"clicked.emit()\"\n>\n    <i [class]=\"icon()\"></i>\n</button>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditorToolbarButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's-editor-toolbar-button', standalone: true, imports: [NgClass], host: { style: 'display: contents' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    type=\"button\"\n    class=\"inline-flex items-center justify-center w-7 h-7 p-0 border-0 bg-transparent rounded cursor-pointer text-base leading-none transition-colors duration-150 disabled:opacity-[.35] disabled:cursor-not-allowed\"\n    [ngClass]=\"{\n        'bg-[#ebebfa]': active(),\n        'text-[#5c5ce6]': active(),\n        'hover:bg-[#ddddf7]': active(),\n        'text-[#3d3d4d]': !active(),\n        'enabled:hover:bg-[#e8e8f0]': !active(),\n        'enabled:hover:text-[#1e1e2e]': !active()\n    }\"\n    [disabled]=\"disabled()\"\n    [title]=\"label()\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-pressed]=\"active()\"\n    (click)=\"clicked.emit()\"\n>\n    <i [class]=\"icon()\"></i>\n</button>\n" }]
+        }] });
+
+/**
+ * @description Componente de editor de texto rico (WYSIWYG) construído sobre o Tiptap/ProseMirror.
+ * Substitui o `p-editor` do PrimeNG sem dependência externa de licença comercial.
+ * Implementa {@link ControlValueAccessor} para integração com Angular Forms.
+ *
+ * @example
+ * ```html
+ * <s-editor
+ *   formControlName="descricao"
+ *   [readonly]="false"
+ *   (textChange)="onTextChange($event)" />
+ * ```
+ */
+class EditorComponent {
+    cdr = inject(ChangeDetectorRef);
+    dialogService = inject(DialogService);
+    translateService = inject(TranslateService);
+    destroyRef = inject(DestroyRef);
+    /**
+     * @description Coloca o editor em modo somente leitura.
+     * @default false
+     */
+    readonly = input(false);
+    /**
+     * @description Lista de formatos habilitados na toolbar. Quando vazio, todos os formatos são exibidos.
+     */
+    formats = input();
+    /**
+     * @description Texto de dica exibido quando o editor está vazio.
+     */
+    placeholder = input();
+    /**
+     * @description Estilos inline aplicados ao container do editor.
+     */
+    style = input();
+    /**
+     * @description Classes CSS adicionais aplicadas ao container do editor.
+     */
+    styleClass = input();
+    /**
+     * @description Extensões Tiptap adicionais para estender o comportamento padrão do editor.
+     */
+    extensions = input([]);
+    /**
+     * @description Emitido quando o editor é inicializado e está pronto para uso.
+     */
+    editorInit = output();
+    /**
+     * @description Emitido sempre que o conteúdo do editor é alterado.
+     */
+    textChange = output();
+    /**
+     * @description Emitido quando a seleção de texto no editor muda.
+     */
+    selectionChange = output();
+    editorContainer = viewChild.required('editorContainer');
+    imageInput = viewChild.required('imageInput');
+    editor;
+    _formDisabled = false;
+    _currentPlaceholder = '';
+    activeStates = {
+        isBold: false,
+        isItalic: false,
+        isUnderline: false,
+        isStrike: false,
+        isBulletList: false,
+        isOrderedList: false,
+        isBlockquote: false,
+        isCode: false,
+        isSubscript: false,
+        isSuperscript: false,
+        isAlignLeft: false,
+        isAlignCenter: false,
+        isAlignRight: false,
+        currentHeading: 0,
+        currentColor: '#000000',
+        currentHighlight: 'transparent',
+        canUndo: false,
+        canRedo: false,
+    };
+    _value = '';
+    _onChange = () => { };
+    _onTouched = () => { };
+    constructor() {
+        effect(() => {
+            if (this.editor) {
+                this.editor.setEditable(!this.readonly() && !this._formDisabled);
+                this.cdr.markForCheck();
+            }
+        });
+        effect(() => {
+            this._currentPlaceholder = this.placeholder() ?? '';
+            this.editor?.view.dispatch(this.editor.state.tr);
+        });
+    }
+    ngAfterViewInit() {
+        this.initEditor();
+    }
+    ngOnDestroy() {
+        this.editor?.destroy();
+    }
+    writeValue(value) {
+        this._value = value ?? '';
+        if (this.editor) {
+            this.editor.chain().setMeta('addToHistory', false).setContent(this._value, { emitUpdate: false }).run();
+            this.cdr.markForCheck();
+        }
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._formDisabled = isDisabled;
+        this.editor?.setEditable(!isDisabled && !this.readonly());
+        this.cdr.markForCheck();
+    }
+    isFormatAllowed(format) {
+        const formats = this.formats();
+        return !formats?.length || formats.includes(format);
+    }
+    hasAnyFormatBeforeUndoRedo() {
+        const formatsBeforeUndoRedo = [
+            'header', 'bold', 'italic', 'underline', 'strike', 'subscript', 'superscript',
+            'color', 'highlight', 'list', 'align', 'blockquote', 'code-block', 'link', 'image',
+        ];
+        return formatsBeforeUndoRedo.some(f => this.isFormatAllowed(f));
+    }
+    toggleBold() {
+        this.editor?.chain().focus().toggleBold().run();
+    }
+    toggleItalic() {
+        this.editor?.chain().focus().toggleItalic().run();
+    }
+    toggleUnderline() {
+        this.editor?.chain().focus().toggleUnderline().run();
+    }
+    toggleStrike() {
+        this.editor?.chain().focus().toggleStrike().run();
+    }
+    toggleBulletList() {
+        this.editor?.chain().focus().toggleBulletList().run();
+    }
+    toggleOrderedList() {
+        this.editor?.chain().focus().toggleOrderedList().run();
+    }
+    toggleBlockquote() {
+        this.editor?.chain().focus().toggleBlockquote().run();
+    }
+    toggleCode() {
+        this.editor?.chain().focus().toggleCode().run();
+    }
+    toggleSubscript() {
+        this.editor?.chain().focus().toggleSubscript().run();
+    }
+    toggleSuperscript() {
+        this.editor?.chain().focus().toggleSuperscript().run();
+    }
+    setTextAlign(align) {
+        this.editor?.chain().focus().setTextAlign(align).run();
+    }
+    setColor(color) {
+        this.editor?.chain().focus().setColor(color).run();
+    }
+    setHighlight(color) {
+        this.editor?.chain().focus().setHighlight({ color }).run();
+    }
+    clearFormatting() {
+        this.editor?.chain().focus().clearNodes().unsetAllMarks().run();
+    }
+    onHeadingChange(event) {
+        const level = parseInt(event.target.value);
+        if (isNaN(level) || level === 0) {
+            this.editor?.chain().focus().setParagraph().run();
+        }
+        else {
+            this.editor?.chain().focus().setHeading({ level }).run();
+        }
+    }
+    setLink() {
+        const existingUrl = this.editor?.getAttributes('link')['href'] ?? '';
+        const ref = this.dialogService.open(LinkDialogComponent, { size: 'sm' });
+        ref.componentInstance.initialUrl = existingUrl;
+        ref.closed
+            .pipe(take(1), takeUntilDestroyed(this.destroyRef))
+            .subscribe((url) => {
+            if (url === '') {
+                this.editor?.chain().focus().extendMarkRange('link').unsetLink().run();
+            }
+            else {
+                this.editor?.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
+            }
+        });
+    }
+    setImage() {
+        this.imageInput().nativeElement.click();
+    }
+    onImageFileSelected(event) {
+        const input = event.target;
+        const file = input.files?.[0];
+        if (!file)
+            return;
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const src = e.target?.result;
+            this.editor?.chain().focus().setImage({ src }).run();
+            input.value = '';
+            this.cdr.markForCheck();
+        };
+        reader.readAsDataURL(file);
+    }
+    undo() {
+        this.editor?.chain().focus().undo().run();
+    }
+    redo() {
+        this.editor?.chain().focus().redo().run();
+    }
+    onToolbarKeydown(event) {
+        if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key))
+            return;
+        event.preventDefault();
+        const toolbar = event.currentTarget;
+        const focusable = this.getToolbarFocusable(toolbar);
+        if (!focusable.length)
+            return;
+        const currentIndex = focusable.findIndex(el => el === document.activeElement);
+        let nextIndex;
+        switch (event.key) {
+            case 'ArrowRight':
+                nextIndex = (currentIndex + 1) % focusable.length;
+                break;
+            case 'ArrowLeft':
+                nextIndex = (currentIndex - 1 + focusable.length) % focusable.length;
+                break;
+            case 'Home':
+                nextIndex = 0;
+                break;
+            default:
+                nextIndex = focusable.length - 1;
+                break;
+        }
+        focusable.forEach((el, i) => el.setAttribute('tabindex', i === nextIndex ? '0' : '-1'));
+        focusable[nextIndex].focus();
+    }
+    onToolbarFocusIn(event) {
+        const target = event.target;
+        const toolbar = event.currentTarget;
+        const focusable = this.getToolbarFocusable(toolbar);
+        if (focusable.includes(target)) {
+            focusable.forEach(el => el.setAttribute('tabindex', el === target ? '0' : '-1'));
+        }
+    }
+    getToolbarFocusable(toolbar) {
+        return Array.from(toolbar.querySelectorAll('button:not([disabled]), select, label[tabindex]'));
+    }
+    initEditor() {
+        this.editor = new Editor({
+            element: this.editorContainer().nativeElement,
+            extensions: [
+                StarterKit.configure({
+                    link: { openOnClick: false },
+                    underline: false,
+                }),
+                Underline,
+                Image,
+                TextAlign.configure({ types: ['heading', 'paragraph'] }),
+                TextStyle,
+                Color,
+                Highlight.configure({ multicolor: true }),
+                Placeholder.configure({ placeholder: () => this._currentPlaceholder }),
+                Subscript,
+                Superscript,
+                ...this.extensions(),
+            ],
+            content: this._value,
+            editable: !this.readonly(),
+            editorProps: {
+                attributes: {
+                    role: 'textbox',
+                    'aria-multiline': 'true',
+                    'aria-label': this.translateService.instant('platform.angular_components.editor_content_area'),
+                },
+            },
+            onUpdate: ({ editor }) => {
+                const html = editor.getHTML();
+                const text = editor.getText();
+                this._value = html;
+                this._onChange(html);
+                this.textChange.emit({ htmlValue: html, textValue: text });
+                this.syncActiveStates();
+                this.cdr.markForCheck();
+            },
+            onBlur: () => {
+                this._onTouched();
+            },
+            onSelectionUpdate: ({ editor }) => {
+                this.syncActiveStates();
+                const { from, to, empty } = editor.state.selection;
+                this.selectionChange.emit({ from, to, empty });
+                this.cdr.markForCheck();
+            },
+        });
+        this.syncActiveStates();
+        this.cdr.markForCheck();
+        this.editorInit.emit(this.editor);
+    }
+    syncActiveStates() {
+        if (!this.editor)
+            return;
+        const e = this.editor;
+        this.activeStates = {
+            isBold: e.isActive('bold'),
+            isItalic: e.isActive('italic'),
+            isUnderline: e.isActive('underline'),
+            isStrike: e.isActive('strike'),
+            isBulletList: e.isActive('bulletList'),
+            isOrderedList: e.isActive('orderedList'),
+            isBlockquote: e.isActive('blockquote'),
+            isCode: e.isActive('code'),
+            isSubscript: e.isActive('subscript'),
+            isSuperscript: e.isActive('superscript'),
+            isAlignLeft: e.isActive({ textAlign: 'left' }),
+            isAlignCenter: e.isActive({ textAlign: 'center' }),
+            isAlignRight: e.isActive({ textAlign: 'right' }),
+            currentHeading: [1, 2, 3].find((level) => e.isActive('heading', { level })) ?? 0,
+            currentColor: e.getAttributes('textStyle')['color'] || '#000000',
+            currentHighlight: e.getAttributes('highlight')['color'] || 'transparent',
+            canUndo: e.can().undo(),
+            canRedo: e.can().redo(),
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: EditorComponent, isStandalone: true, selector: "s-editor", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, formats: { classPropertyName: "formats", publicName: "formats", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, extensions: { classPropertyName: "extensions", publicName: "extensions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editorInit: "editorInit", textChange: "textChange", selectionChange: "selectionChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => EditorComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, isSignal: true }, { propertyName: "imageInput", first: true, predicate: ["imageInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    class=\"rounded bg-white flex flex-col border border-grayscale-30 transition-[border-color,box-shadow] duration-150 focus-within:border-[#5c5ce6] focus-within:shadow-[0_0_0_2px_rgba(92,92,230,0.15)]\"\n    [ngClass]=\"styleClass()\"\n    [ngStyle]=\"style()\"\n    [class.s-editor--readonly]=\"readonly()\"\n>\n    @if (!readonly()) {\n        <div\n            class=\"rounded-t flex flex-wrap items-center gap-0.5 border-b border-grayscale-30 bg-[#f9f9fb] px-2 py-1.5\"\n            role=\"toolbar\"\n            [attr.aria-label]=\"'platform.angular_components.editor_toolbar' | translate\"\n            (keydown)=\"onToolbarKeydown($event)\"\n            (focusin)=\"onToolbarFocusIn($event)\"\n        >\n            @if (isFormatAllowed('header')) {\n                <select\n                    class=\"rounded bg-white h-7 cursor-pointer border border-grayscale-30 px-1.5 text-[13px] text-[#3d3d4d] outline-none transition-colors duration-150 focus:border-[#5c5ce6]\"\n                    (change)=\"onHeadingChange($event)\"\n                    [attr.aria-label]=\"'platform.angular_components.editor_heading_level' | translate\"\n                >\n                    <option\n                        [value]=\"0\"\n                        [selected]=\"activeStates.currentHeading === 0\"\n                    >\n                        {{ 'platform.angular_components.editor_heading_normal' | translate }}\n                    </option>\n                    <option\n                        [value]=\"1\"\n                        [selected]=\"activeStates.currentHeading === 1\"\n                    >\n                        {{ 'platform.angular_components.editor_heading_1' | translate }}\n                    </option>\n                    <option\n                        [value]=\"2\"\n                        [selected]=\"activeStates.currentHeading === 2\"\n                    >\n                        {{ 'platform.angular_components.editor_heading_2' | translate }}\n                    </option>\n                    <option\n                        [value]=\"3\"\n                        [selected]=\"activeStates.currentHeading === 3\"\n                    >\n                        {{ 'platform.angular_components.editor_heading_3' | translate }}\n                    </option>\n                </select>\n                <span class=\"mx-1 inline-block h-5 w-px shrink-0 bg-[#d1d1dc]\"></span>\n            }\n\n            @if (isFormatAllowed('bold')) {\n                <s-editor-toolbar-button\n                    icon=\"fa fa-bold\"\n                    [label]=\"'platform.angular_components.editor_bold' | translate\"\n                    [active]=\"activeStates.isBold\"\n                    (clicked)=\"toggleBold()\"\n                />\n            }\n\n            @if (isFormatAllowed('italic')) {\n                <s-editor-toolbar-button\n                    icon=\"fa fa-italic\"\n                    [label]=\"'platform.angular_components.editor_italic' | translate\"\n                    [active]=\"activeStates.isItalic\"\n                    (clicked)=\"toggleItalic()\"\n                />\n            }\n\n            @if (isFormatAllowed('underline')) {\n                <s-editor-toolbar-button\n                    icon=\"fa fa-underline\"\n                    [label]=\"'platform.angular_components.editor_underline' | translate\"\n                    [active]=\"activeStates.isUnderline\"\n                    (clicked)=\"toggleUnderline()\"\n                />\n            }\n\n            @if (isFormatAllowed('strike')) {\n                <s-editor-toolbar-button\n                    icon=\"fa fa-strikethrough\"\n                    [label]=\"'platform.angular_components.editor_strikethrough' | translate\"\n                    [active]=\"activeStates.isStrike\"\n                    (clicked)=\"toggleStrike()\"\n                />\n            }\n\n            @if (isFormatAllowed('subscript')) {\n                <s-editor-toolbar-button\n                    icon=\"fa fa-subscript\"\n                    [label]=\"'platform.angular_components.editor_subscript' | translate\"\n                    [active]=\"activeStates.isSubscript\"\n                    (clicked)=\"toggleSubscript()\"\n                />\n            }\n\n            @if (isFormatAllowed('superscript')) {\n                <s-editor-toolbar-button\n                    icon=\"fa fa-superscript\"\n                    [label]=\"'platform.angular_components.editor_superscript' | translate\"\n                    [active]=\"activeStates.isSuperscript\"\n                    (clicked)=\"toggleSuperscript()\"\n                />\n            }\n\n            @if (isFormatAllowed('color')) {\n                <label\n                    tabindex=\"0\"\n                    class=\"relative flex h-7 w-7 cursor-pointer items-center justify-center rounded bg-white transition-colors duration-150 hover:bg-[#f0f0f8]\"\n                    [attr.title]=\"'platform.angular_components.editor_text_color' | translate\"\n                    [attr.aria-label]=\"'platform.angular_components.editor_text_color' | translate\"\n                    (keydown.enter)=\"$event.preventDefault(); colorInput.click()\"\n                    (keydown.space)=\"$event.preventDefault(); colorInput.click()\"\n                >\n                    <span class=\"flex flex-col items-center gap-px\">\n                        <i class=\"fa fa-font text-[11px] text-[#3d3d4d]\"></i>\n                        <span\n                            class=\"h-[3px] w-3.5 rounded-sm\"\n                            [style.background-color]=\"activeStates.currentColor\"\n                        ></span>\n                    </span>\n                    <input\n                        #colorInput\n                        type=\"color\"\n                        class=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n                        [value]=\"activeStates.currentColor\"\n                        (input)=\"setColor($any($event.target).value)\"\n                    />\n                </label>\n            }\n\n            @if (isFormatAllowed('highlight')) {\n                <label\n                    tabindex=\"0\"\n                    class=\"relative flex h-7 w-7 cursor-pointer items-center justify-center rounded bg-white transition-colors duration-150 hover:bg-[#f0f0f8]\"\n                    [attr.title]=\"'platform.angular_components.editor_background_color' | translate\"\n                    [attr.aria-label]=\"'platform.angular_components.editor_background_color' | translate\"\n                    (keydown.enter)=\"$event.preventDefault(); highlightInput.click()\"\n                    (keydown.space)=\"$event.preventDefault(); highlightInput.click()\"\n                >\n                    <span class=\"flex flex-col items-center gap-px\">\n                        <i class=\"fa fa-highlighter text-[11px] text-[#3d3d4d]\"></i>\n                        <span\n                            class=\"h-[3px] w-3.5 rounded-sm\"\n                            [style.background-color]=\"activeStates.currentHighlight === 'transparent' ? '#ffff00' : activeStates.currentHighlight\"\n                        ></span>\n                    </span>\n                    <input\n                        #highlightInput\n                        type=\"color\"\n                        class=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n                        [value]=\"activeStates.currentHighlight === 'transparent' ? '#ffff00' : activeStates.currentHighlight\"\n                        (input)=\"setHighlight($any($event.target).value)\"\n                    />\n                </label>\n            }\n\n            @if (isFormatAllowed('list')) {\n                <span class=\"mx-1 inline-block h-5 w-px shrink-0 bg-[#d1d1dc]\"></span>\n                <s-editor-toolbar-button\n                    icon=\"fa fa-list-ul\"\n                    [label]=\"'platform.angular_components.editor_bullet_list' | translate\"\n                    [active]=\"activeStates.isBulletList\"\n                    (clicked)=\"toggleBulletList()\"\n                />\n                <s-editor-toolbar-button\n                    icon=\"fa fa-list-ol\"\n                    [label]=\"'platform.angular_components.editor_ordered_list' | translate\"\n                    [active]=\"activeStates.isOrderedList\"\n                    (clicked)=\"toggleOrderedList()\"\n                />\n            }\n\n            @if (isFormatAllowed('align')) {\n                <span class=\"mx-1 inline-block h-5 w-px shrink-0 bg-[#d1d1dc]\"></span>\n                <s-editor-toolbar-button\n                    icon=\"fa fa-align-left\"\n                    [label]=\"'platform.angular_components.editor_align_left' | translate\"\n                    [active]=\"activeStates.isAlignLeft\"\n                    (clicked)=\"setTextAlign('left')\"\n                />\n                <s-editor-toolbar-button\n                    icon=\"fa fa-align-center\"\n                    [label]=\"'platform.angular_components.editor_align_center' | translate\"\n                    [active]=\"activeStates.isAlignCenter\"\n                    (clicked)=\"setTextAlign('center')\"\n                />\n                <s-editor-toolbar-button\n                    icon=\"fa fa-align-right\"\n                    [label]=\"'platform.angular_components.editor_align_right' | translate\"\n                    [active]=\"activeStates.isAlignRight\"\n                    (clicked)=\"setTextAlign('right')\"\n                />\n            }\n\n            @if (isFormatAllowed('blockquote')) {\n                <span class=\"mx-1 inline-block h-5 w-px shrink-0 bg-[#d1d1dc]\"></span>\n                <s-editor-toolbar-button\n                    icon=\"fa fa-quote-right\"\n                    [label]=\"'platform.angular_components.editor_blockquote' | translate\"\n                    [active]=\"activeStates.isBlockquote\"\n                    (clicked)=\"toggleBlockquote()\"\n                />\n            }\n\n            @if (isFormatAllowed('code-block')) {\n                <s-editor-toolbar-button\n                    icon=\"fa fa-code\"\n                    [label]=\"'platform.angular_components.editor_inline_code' | translate\"\n                    [active]=\"activeStates.isCode\"\n                    (clicked)=\"toggleCode()\"\n                />\n            }\n\n            @if (isFormatAllowed('link')) {\n                <span class=\"mx-1 inline-block h-5 w-px shrink-0 bg-[#d1d1dc]\"></span>\n                <s-editor-toolbar-button\n                    icon=\"fa fa-link\"\n                    [label]=\"'platform.angular_components.editor_insert_link' | translate\"\n                    (clicked)=\"setLink()\"\n                />\n            }\n\n            @if (isFormatAllowed('image')) {\n                <s-editor-toolbar-button\n                    icon=\"fa fa-image\"\n                    [label]=\"'platform.angular_components.editor_insert_image' | translate\"\n                    (clicked)=\"setImage()\"\n                />\n            }\n\n            @if (hasAnyFormatBeforeUndoRedo()) {\n                <span class=\"mx-1 inline-block h-5 w-px shrink-0 bg-[#d1d1dc]\"></span>\n            }\n\n            <s-editor-toolbar-button\n                icon=\"fa fa-undo\"\n                [label]=\"('platform.angular_components.editor_undo' | translate) + ' (Ctrl+Z)'\"\n                [disabled]=\"!activeStates.canUndo\"\n                (clicked)=\"undo()\"\n            />\n            <s-editor-toolbar-button\n                icon=\"fa fa-redo\"\n                [label]=\"('platform.angular_components.editor_redo' | translate) + ' (Ctrl+Y)'\"\n                [disabled]=\"!activeStates.canRedo\"\n                (clicked)=\"redo()\"\n            />\n\n            @if (isFormatAllowed('clean')) {\n                <span class=\"mx-1 inline-block h-5 w-px shrink-0 bg-[#d1d1dc]\"></span>\n                <s-editor-toolbar-button\n                    icon=\"fa fa-remove-format\"\n                    [label]=\"'platform.angular_components.editor_clear_formatting' | translate\"\n                    (clicked)=\"clearFormatting()\"\n                />\n            }\n        </div>\n    }\n\n    <div\n        #editorContainer\n        class=\"s-editor-content flex-1\"\n    ></div>\n    <input\n        #imageInput\n        type=\"file\"\n        accept=\"image/*\"\n        style=\"display: none\"\n        aria-hidden=\"true\"\n        (change)=\"onImageFileSelected($event)\"\n    />\n</div>\n", styles: [".s-editor--readonly ::ng-deep .ProseMirror{cursor:default}.s-editor-content ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:#9ca3af;pointer-events:none;float:left;height:0}.s-editor-content ::ng-deep .ProseMirror{padding:12px 16px;min-height:150px;outline:none!important;color:#1e1e2e;font-size:14px;line-height:1.6}.s-editor-content ::ng-deep .ProseMirror>*+*{margin-top:.5em}.s-editor-content ::ng-deep .ProseMirror p{margin:0}.s-editor-content ::ng-deep .ProseMirror h1{font-size:1.75em;font-weight:700;line-height:1.2;margin:.75em 0 .25em}.s-editor-content ::ng-deep .ProseMirror h1:first-child{margin-top:0}.s-editor-content ::ng-deep .ProseMirror h2{font-size:1.4em;font-weight:600;line-height:1.3;margin:.75em 0 .25em}.s-editor-content ::ng-deep .ProseMirror h2:first-child{margin-top:0}.s-editor-content ::ng-deep .ProseMirror h3{font-size:1.15em;font-weight:600;line-height:1.4;margin:.75em 0 .25em}.s-editor-content ::ng-deep .ProseMirror h3:first-child{margin-top:0}.s-editor-content ::ng-deep .ProseMirror ul{list-style:disc;padding-left:1.5em}.s-editor-content ::ng-deep .ProseMirror ol{list-style:decimal;padding-left:1.5em}.s-editor-content ::ng-deep .ProseMirror li{margin:.2em 0}.s-editor-content ::ng-deep .ProseMirror li p{margin:0}.s-editor-content ::ng-deep .ProseMirror blockquote{border-left:3px solid #5c5ce6;padding-left:1em;margin:.75em 0;color:#6b6b80;font-style:italic}.s-editor-content ::ng-deep .ProseMirror code{background:#f0f0f8;border-radius:3px;padding:.15em .4em;font-family:Courier New,Courier,monospace;font-size:.875em;color:#c026d3}.s-editor-content ::ng-deep .ProseMirror pre{background:#1e1e2e;color:#cdd6f4;border-radius:6px;padding:1em 1.25em;overflow-x:auto;font-family:Courier New,Courier,monospace;font-size:.875em;line-height:1.5}.s-editor-content ::ng-deep .ProseMirror pre code{background:none;padding:0;color:inherit;font-size:inherit}.s-editor-content ::ng-deep .ProseMirror a{color:#5c5ce6;text-decoration:underline;cursor:pointer}.s-editor-content ::ng-deep .ProseMirror a:hover{color:#4040b0}.s-editor-content ::ng-deep .ProseMirror img{max-width:100%;height:auto;border-radius:4px;display:block}.s-editor-content ::ng-deep .ProseMirror hr{border:none;border-top:2px solid #e8e8f0;margin:1em 0}.s-editor-content ::ng-deep .ProseMirror sub{font-size:.75em;vertical-align:sub}.s-editor-content ::ng-deep .ProseMirror sup{font-size:.75em;vertical-align:super}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: EditorToolbarButtonComponent, selector: "s-editor-toolbar-button", inputs: ["icon", "label", "active", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's-editor', standalone: true, imports: [NgClass, NgStyle, TranslateModule, EditorToolbarButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => EditorComponent),
+                            multi: true,
+                        },
+                    ], template: "<div\n    class=\"rounded bg-white flex flex-col border border-grayscale-30 transition-[border-color,box-shadow] duration-150 focus-within:border-[#5c5ce6] focus-within:shadow-[0_0_0_2px_rgba(92,92,230,0.15)]\"\n    [ngClass]=\"styleClass()\"\n    [ngStyle]=\"style()\"\n    [class.s-editor--readonly]=\"readonly()\"\n>\n    @if (!readonly()) {\n        <div\n            class=\"rounded-t flex flex-wrap items-center gap-0.5 border-b border-grayscale-30 bg-[#f9f9fb] px-2 py-1.5\"\n            role=\"toolbar\"\n            [attr.aria-label]=\"'platform.angular_components.editor_toolbar' | translate\"\n            (keydown)=\"onToolbarKeydown($event)\"\n            (focusin)=\"onToolbarFocusIn($event)\"\n        >\n            @if (isFormatAllowed('header')) {\n                <select\n                    class=\"rounded bg-white h-7 cursor-pointer border border-grayscale-30 px-1.5 text-[13px] text-[#3d3d4d] outline-none transition-colors duration-150 focus:border-[#5c5ce6]\"\n                    (change)=\"onHeadingChange($event)\"\n                    [attr.aria-label]=\"'platform.angular_components.editor_heading_level' | translate\"\n                >\n                    <option\n                        [value]=\"0\"\n                        [selected]=\"activeStates.currentHeading === 0\"\n                    >\n                        {{ 'platform.angular_components.editor_heading_normal' | translate }}\n                    </option>\n                    <option\n                        [value]=\"1\"\n                        [selected]=\"activeStates.currentHeading === 1\"\n                    >\n                        {{ 'platform.angular_components.editor_heading_1' | translate }}\n                    </option>\n                    <option\n                        [value]=\"2\"\n                        [selected]=\"activeStates.currentHeading === 2\"\n                    >\n                        {{ 'platform.angular_components.editor_heading_2' | translate }}\n                    </option>\n                    <option\n                        [value]=\"3\"\n                        [selected]=\"activeStates.currentHeading === 3\"\n                    >\n                        {{ 'platform.angular_components.editor_heading_3' | translate }}\n                    </option>\n                </select>\n                <span class=\"mx-1 inline-block h-5 w-px shrink-0 bg-[#d1d1dc]\"></span>\n            }\n\n            @if (isFormatAllowed('bold')) {\n                <s-editor-toolbar-button\n                    icon=\"fa fa-bold\"\n                    [label]=\"'platform.angular_components.editor_bold' | translate\"\n                    [active]=\"activeStates.isBold\"\n                    (clicked)=\"toggleBold()\"\n                />\n            }\n\n            @if (isFormatAllowed('italic')) {\n                <s-editor-toolbar-button\n                    icon=\"fa fa-italic\"\n                    [label]=\"'platform.angular_components.editor_italic' | translate\"\n                    [active]=\"activeStates.isItalic\"\n                    (clicked)=\"toggleItalic()\"\n                />\n            }\n\n            @if (isFormatAllowed('underline')) {\n                <s-editor-toolbar-button\n                    icon=\"fa fa-underline\"\n                    [label]=\"'platform.angular_components.editor_underline' | translate\"\n                    [active]=\"activeStates.isUnderline\"\n                    (clicked)=\"toggleUnderline()\"\n                />\n            }\n\n            @if (isFormatAllowed('strike')) {\n                <s-editor-toolbar-button\n                    icon=\"fa fa-strikethrough\"\n                    [label]=\"'platform.angular_components.editor_strikethrough' | translate\"\n                    [active]=\"activeStates.isStrike\"\n                    (clicked)=\"toggleStrike()\"\n                />\n            }\n\n            @if (isFormatAllowed('subscript')) {\n                <s-editor-toolbar-button\n                    icon=\"fa fa-subscript\"\n                    [label]=\"'platform.angular_components.editor_subscript' | translate\"\n                    [active]=\"activeStates.isSubscript\"\n                    (clicked)=\"toggleSubscript()\"\n                />\n            }\n\n            @if (isFormatAllowed('superscript')) {\n                <s-editor-toolbar-button\n                    icon=\"fa fa-superscript\"\n                    [label]=\"'platform.angular_components.editor_superscript' | translate\"\n                    [active]=\"activeStates.isSuperscript\"\n                    (clicked)=\"toggleSuperscript()\"\n                />\n            }\n\n            @if (isFormatAllowed('color')) {\n                <label\n                    tabindex=\"0\"\n                    class=\"relative flex h-7 w-7 cursor-pointer items-center justify-center rounded bg-white transition-colors duration-150 hover:bg-[#f0f0f8]\"\n                    [attr.title]=\"'platform.angular_components.editor_text_color' | translate\"\n                    [attr.aria-label]=\"'platform.angular_components.editor_text_color' | translate\"\n                    (keydown.enter)=\"$event.preventDefault(); colorInput.click()\"\n                    (keydown.space)=\"$event.preventDefault(); colorInput.click()\"\n                >\n                    <span class=\"flex flex-col items-center gap-px\">\n                        <i class=\"fa fa-font text-[11px] text-[#3d3d4d]\"></i>\n                        <span\n                            class=\"h-[3px] w-3.5 rounded-sm\"\n                            [style.background-color]=\"activeStates.currentColor\"\n                        ></span>\n                    </span>\n                    <input\n                        #colorInput\n                        type=\"color\"\n                        class=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n                        [value]=\"activeStates.currentColor\"\n                        (input)=\"setColor($any($event.target).value)\"\n                    />\n                </label>\n            }\n\n            @if (isFormatAllowed('highlight')) {\n                <label\n                    tabindex=\"0\"\n                    class=\"relative flex h-7 w-7 cursor-pointer items-center justify-center rounded bg-white transition-colors duration-150 hover:bg-[#f0f0f8]\"\n                    [attr.title]=\"'platform.angular_components.editor_background_color' | translate\"\n                    [attr.aria-label]=\"'platform.angular_components.editor_background_color' | translate\"\n                    (keydown.enter)=\"$event.preventDefault(); highlightInput.click()\"\n                    (keydown.space)=\"$event.preventDefault(); highlightInput.click()\"\n                >\n                    <span class=\"flex flex-col items-center gap-px\">\n                        <i class=\"fa fa-highlighter text-[11px] text-[#3d3d4d]\"></i>\n                        <span\n                            class=\"h-[3px] w-3.5 rounded-sm\"\n                            [style.background-color]=\"activeStates.currentHighlight === 'transparent' ? '#ffff00' : activeStates.currentHighlight\"\n                        ></span>\n                    </span>\n                    <input\n                        #highlightInput\n                        type=\"color\"\n                        class=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n                        [value]=\"activeStates.currentHighlight === 'transparent' ? '#ffff00' : activeStates.currentHighlight\"\n                        (input)=\"setHighlight($any($event.target).value)\"\n                    />\n                </label>\n            }\n\n            @if (isFormatAllowed('list')) {\n                <span class=\"mx-1 inline-block h-5 w-px shrink-0 bg-[#d1d1dc]\"></span>\n                <s-editor-toolbar-button\n                    icon=\"fa fa-list-ul\"\n                    [label]=\"'platform.angular_components.editor_bullet_list' | translate\"\n                    [active]=\"activeStates.isBulletList\"\n                    (clicked)=\"toggleBulletList()\"\n                />\n                <s-editor-toolbar-button\n                    icon=\"fa fa-list-ol\"\n                    [label]=\"'platform.angular_components.editor_ordered_list' | translate\"\n                    [active]=\"activeStates.isOrderedList\"\n                    (clicked)=\"toggleOrderedList()\"\n                />\n            }\n\n            @if (isFormatAllowed('align')) {\n                <span class=\"mx-1 inline-block h-5 w-px shrink-0 bg-[#d1d1dc]\"></span>\n                <s-editor-toolbar-button\n                    icon=\"fa fa-align-left\"\n                    [label]=\"'platform.angular_components.editor_align_left' | translate\"\n                    [active]=\"activeStates.isAlignLeft\"\n                    (clicked)=\"setTextAlign('left')\"\n                />\n                <s-editor-toolbar-button\n                    icon=\"fa fa-align-center\"\n                    [label]=\"'platform.angular_components.editor_align_center' | translate\"\n                    [active]=\"activeStates.isAlignCenter\"\n                    (clicked)=\"setTextAlign('center')\"\n                />\n                <s-editor-toolbar-button\n                    icon=\"fa fa-align-right\"\n                    [label]=\"'platform.angular_components.editor_align_right' | translate\"\n                    [active]=\"activeStates.isAlignRight\"\n                    (clicked)=\"setTextAlign('right')\"\n                />\n            }\n\n            @if (isFormatAllowed('blockquote')) {\n                <span class=\"mx-1 inline-block h-5 w-px shrink-0 bg-[#d1d1dc]\"></span>\n                <s-editor-toolbar-button\n                    icon=\"fa fa-quote-right\"\n                    [label]=\"'platform.angular_components.editor_blockquote' | translate\"\n                    [active]=\"activeStates.isBlockquote\"\n                    (clicked)=\"toggleBlockquote()\"\n                />\n            }\n\n            @if (isFormatAllowed('code-block')) {\n                <s-editor-toolbar-button\n                    icon=\"fa fa-code\"\n                    [label]=\"'platform.angular_components.editor_inline_code' | translate\"\n                    [active]=\"activeStates.isCode\"\n                    (clicked)=\"toggleCode()\"\n                />\n            }\n\n            @if (isFormatAllowed('link')) {\n                <span class=\"mx-1 inline-block h-5 w-px shrink-0 bg-[#d1d1dc]\"></span>\n                <s-editor-toolbar-button\n                    icon=\"fa fa-link\"\n                    [label]=\"'platform.angular_components.editor_insert_link' | translate\"\n                    (clicked)=\"setLink()\"\n                />\n            }\n\n            @if (isFormatAllowed('image')) {\n                <s-editor-toolbar-button\n                    icon=\"fa fa-image\"\n                    [label]=\"'platform.angular_components.editor_insert_image' | translate\"\n                    (clicked)=\"setImage()\"\n                />\n            }\n\n            @if (hasAnyFormatBeforeUndoRedo()) {\n                <span class=\"mx-1 inline-block h-5 w-px shrink-0 bg-[#d1d1dc]\"></span>\n            }\n\n            <s-editor-toolbar-button\n                icon=\"fa fa-undo\"\n                [label]=\"('platform.angular_components.editor_undo' | translate) + ' (Ctrl+Z)'\"\n                [disabled]=\"!activeStates.canUndo\"\n                (clicked)=\"undo()\"\n            />\n            <s-editor-toolbar-button\n                icon=\"fa fa-redo\"\n                [label]=\"('platform.angular_components.editor_redo' | translate) + ' (Ctrl+Y)'\"\n                [disabled]=\"!activeStates.canRedo\"\n                (clicked)=\"redo()\"\n            />\n\n            @if (isFormatAllowed('clean')) {\n                <span class=\"mx-1 inline-block h-5 w-px shrink-0 bg-[#d1d1dc]\"></span>\n                <s-editor-toolbar-button\n                    icon=\"fa fa-remove-format\"\n                    [label]=\"'platform.angular_components.editor_clear_formatting' | translate\"\n                    (clicked)=\"clearFormatting()\"\n                />\n            }\n        </div>\n    }\n\n    <div\n        #editorContainer\n        class=\"s-editor-content flex-1\"\n    ></div>\n    <input\n        #imageInput\n        type=\"file\"\n        accept=\"image/*\"\n        style=\"display: none\"\n        aria-hidden=\"true\"\n        (change)=\"onImageFileSelected($event)\"\n    />\n</div>\n", styles: [".s-editor--readonly ::ng-deep .ProseMirror{cursor:default}.s-editor-content ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:#9ca3af;pointer-events:none;float:left;height:0}.s-editor-content ::ng-deep .ProseMirror{padding:12px 16px;min-height:150px;outline:none!important;color:#1e1e2e;font-size:14px;line-height:1.6}.s-editor-content ::ng-deep .ProseMirror>*+*{margin-top:.5em}.s-editor-content ::ng-deep .ProseMirror p{margin:0}.s-editor-content ::ng-deep .ProseMirror h1{font-size:1.75em;font-weight:700;line-height:1.2;margin:.75em 0 .25em}.s-editor-content ::ng-deep .ProseMirror h1:first-child{margin-top:0}.s-editor-content ::ng-deep .ProseMirror h2{font-size:1.4em;font-weight:600;line-height:1.3;margin:.75em 0 .25em}.s-editor-content ::ng-deep .ProseMirror h2:first-child{margin-top:0}.s-editor-content ::ng-deep .ProseMirror h3{font-size:1.15em;font-weight:600;line-height:1.4;margin:.75em 0 .25em}.s-editor-content ::ng-deep .ProseMirror h3:first-child{margin-top:0}.s-editor-content ::ng-deep .ProseMirror ul{list-style:disc;padding-left:1.5em}.s-editor-content ::ng-deep .ProseMirror ol{list-style:decimal;padding-left:1.5em}.s-editor-content ::ng-deep .ProseMirror li{margin:.2em 0}.s-editor-content ::ng-deep .ProseMirror li p{margin:0}.s-editor-content ::ng-deep .ProseMirror blockquote{border-left:3px solid #5c5ce6;padding-left:1em;margin:.75em 0;color:#6b6b80;font-style:italic}.s-editor-content ::ng-deep .ProseMirror code{background:#f0f0f8;border-radius:3px;padding:.15em .4em;font-family:Courier New,Courier,monospace;font-size:.875em;color:#c026d3}.s-editor-content ::ng-deep .ProseMirror pre{background:#1e1e2e;color:#cdd6f4;border-radius:6px;padding:1em 1.25em;overflow-x:auto;font-family:Courier New,Courier,monospace;font-size:.875em;line-height:1.5}.s-editor-content ::ng-deep .ProseMirror pre code{background:none;padding:0;color:inherit;font-size:inherit}.s-editor-content ::ng-deep .ProseMirror a{color:#5c5ce6;text-decoration:underline;cursor:pointer}.s-editor-content ::ng-deep .ProseMirror a:hover{color:#4040b0}.s-editor-content ::ng-deep .ProseMirror img{max-width:100%;height:auto;border-radius:4px;display:block}.s-editor-content ::ng-deep .ProseMirror hr{border:none;border-top:2px solid #e8e8f0;margin:1em 0}.s-editor-content ::ng-deep .ProseMirror sub{font-size:.75em;vertical-align:sub}.s-editor-content ::ng-deep .ProseMirror sup{font-size:.75em;vertical-align:super}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EditorComponent };
+//# sourceMappingURL=seniorsistemas-angular-components-editor.mjs.map