@elementar-rt/components 0.6.55

package/fesm2022/elementar-rt-components-comment-editor.mjs

@@ -0,0 +1,1039 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, ApplicationRef, createComponent, ElementRef, Input, Component, inject, PLATFORM_ID, DOCUMENT, ChangeDetectorRef, Injector, viewChild, input, booleanAttribute, output, forwardRef, Directive, DestroyRef } from '@angular/core';
+import { NodeView, Node, mergeAttributes, Editor } from '@tiptap/core';
+import Document from '@tiptap/extension-document';
+import Paragraph from '@tiptap/extension-paragraph';
+import Text from '@tiptap/extension-text';
+import Bold from '@tiptap/extension-bold';
+import Italic from '@tiptap/extension-italic';
+import Strike from '@tiptap/extension-strike';
+import CodeBlock from '@tiptap/extension-code-block';
+import { Blockquote } from '@tiptap/extension-blockquote';
+import BulletList from '@tiptap/extension-bullet-list';
+import OrderedList from '@tiptap/extension-ordered-list';
+import ListItem from '@tiptap/extension-list-item';
+import Link from '@tiptap/extension-link';
+import Placeholder from '@tiptap/extension-placeholder';
+import Youtube from '@tiptap/extension-youtube';
+import BubbleMenu from '@tiptap/extension-bubble-menu';
+import Code from '@tiptap/extension-code';
+import History from '@tiptap/extension-history';
+import Dropcursor from '@tiptap/extension-dropcursor';
+import Image$1 from '@tiptap/extension-image';
+import { MatButton } from '@angular/material/button';
+import { isPlatformServer } from '@angular/common';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import * as i1 from '@elementar-rt/components/upload';
+import { UploadTriggerDirective } from '@elementar-rt/components/upload';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogActions, MatDialogContent, MatDialogTitle, MatDialog } from '@angular/material/dialog';
+import * as i1$1 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+
+const COMMENT_EDITOR = new InjectionToken('COMMENT_EDITOR');
+const COMMENT_EDITOR_BUBBLE_MENU = new InjectionToken('COMMENT_EDITOR_BUBBLE_MENU');
+
+class AngularRenderer {
+    applicationRef;
+    componentRef;
+    constructor(ViewComponent, injector, props) {
+        this.applicationRef = injector.get(ApplicationRef);
+        this.componentRef = createComponent(ViewComponent, {
+            environmentInjector: this.applicationRef.injector,
+            elementInjector: injector,
+        });
+        // set input props to the component
+        this.updateProps(props);
+        this.applicationRef.attachView(this.componentRef.hostView);
+    }
+    get instance() {
+        return this.componentRef.instance;
+    }
+    get elementRef() {
+        return this.componentRef.injector.get(ElementRef);
+    }
+    get dom() {
+        return this.elementRef.nativeElement;
+    }
+    updateProps(props) {
+        Object.entries(props).forEach(([key, value]) => {
+            this.componentRef.setInput(key, value);
+        });
+    }
+    detectChanges() {
+        this.componentRef.changeDetectorRef.detectChanges();
+    }
+    destroy() {
+        this.componentRef.destroy();
+        this.applicationRef.detachView(this.componentRef.hostView);
+    }
+}
+
+class AngularNodeView extends NodeView {
+    renderer;
+    contentDOMElement;
+    mount() {
+        const injector = this.options.injector;
+        const props = {
+            editor: this.editor,
+            node: this.node,
+            // @ts-ignore
+            decorations: this.decorations,
+            selected: false,
+            extension: this.extension,
+            getPos: () => this.getPos(),
+            updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
+            deleteNode: () => this.deleteNode(),
+        };
+        this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this);
+        this.editor.on('selectionUpdate', this.handleSelectionUpdate);
+        // create renderer
+        this.renderer = new AngularRenderer(this.component, injector, props);
+        // Register drag handler
+        if (this.extension.config.draggable) {
+            this.renderer.elementRef.nativeElement.ondragstart = (e) => {
+                this.onDragStart(e);
+            };
+        }
+        this.contentDOMElement = this.node.isLeaf ? null : document.createElement(this.node.isInline ? 'span' : 'div');
+        if (this.contentDOMElement) {
+            // For some reason the whiteSpace prop is not inherited properly in Chrome and Safari
+            // With this fix it seems to work fine
+            // See: https://github.com/ueberdosis/tiptap/issues/1197
+            this.contentDOMElement.style.whiteSpace = 'inherit';
+            // Required for editable node views
+            // The content won't be rendered if `editable` is set to `false`
+            this.renderer.detectChanges();
+        }
+        this.appendContendDom();
+    }
+    get dom() {
+        return this.renderer.dom;
+    }
+    get contentDOM() {
+        if (this.node.isLeaf) {
+            return null;
+        }
+        return this.contentDOMElement;
+    }
+    appendContendDom() {
+        const contentElement = this.dom.querySelector('[data-node-view-content]');
+        if (this.contentDOMElement
+            && contentElement
+            && !contentElement.contains(this.contentDOMElement)) {
+            contentElement.appendChild(this.contentDOMElement);
+        }
+    }
+    handleSelectionUpdate() {
+        const { from, to } = this.editor.state.selection;
+        if (from <= this.getPos() && to >= this.getPos() + this.node.nodeSize) {
+            this.selectNode();
+        }
+        else {
+            this.deselectNode();
+        }
+    }
+    update(node, decorations) {
+        const updateProps = () => {
+            this.renderer.updateProps({ node, decorations });
+        };
+        if (this.options.update) {
+            const oldNode = this.node;
+            const oldDecorations = this.decorations;
+            this.node = node;
+            this.decorations = decorations;
+            return this.options.update({
+                oldNode,
+                // @ts-ignore
+                oldDecorations,
+                newNode: node,
+                newDecorations: decorations,
+                updateProps: () => updateProps(),
+            });
+        }
+        if (node.type !== this.node.type) {
+            return false;
+        }
+        if (node === this.node && this.decorations === decorations) {
+            return true;
+        }
+        this.node = node;
+        this.decorations = decorations;
+        updateProps();
+        return true;
+    }
+    selectNode() {
+        this.renderer.updateProps({ selected: true });
+    }
+    deselectNode() {
+        this.renderer.updateProps({ selected: false });
+    }
+    destroy() {
+        this.renderer.destroy();
+        this.editor.off('selectionUpdate', this.handleSelectionUpdate);
+        this.contentDOMElement = null;
+    }
+}
+const AngularNodeViewRenderer = (ViewComponent, options) => {
+    // @ts-ignore
+    return (props) => {
+        return new AngularNodeView(ViewComponent, props, options);
+    };
+};
+
+class AngularNodeViewComponent {
+    editor;
+    node;
+    decorations;
+    selected;
+    extension;
+    getPos;
+    updateAttributes;
+    deleteNode;
+    HTMLAttributes;
+    innerDecorations;
+    view;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AngularNodeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: AngularNodeViewComponent, isStandalone: true, selector: "ng-component", inputs: { editor: "editor", node: "node", decorations: "decorations", selected: "selected", extension: "extension", getPos: "getPos", updateAttributes: "updateAttributes", deleteNode: "deleteNode", HTMLAttributes: "HTMLAttributes", innerDecorations: "innerDecorations", view: "view" }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AngularNodeViewComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, template: '' }]
+        }], propDecorators: { editor: [{
+                type: Input
+            }], node: [{
+                type: Input
+            }], decorations: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], extension: [{
+                type: Input
+            }], getPos: [{
+                type: Input
+            }], updateAttributes: [{
+                type: Input
+            }], deleteNode: [{
+                type: Input
+            }], HTMLAttributes: [{
+                type: Input
+            }], innerDecorations: [{
+                type: Input
+            }], view: [{
+                type: Input
+            }] } });
+
+class ImageUploadingPlaceholderComponent extends AngularNodeViewComponent {
+    src;
+    error;
+    _canceled = false;
+    ngOnInit() {
+        const uploadFn = this.extension.options['uploadFn'];
+        this.src = this.node.attrs['src'];
+        const blob = this._dataURItoBlob(this.src);
+        uploadFn(blob).then((src) => {
+            if (this._canceled) {
+                return;
+            }
+            const image = new Image();
+            image.src = src;
+            image.onload = () => {
+                this.editor.chain().focus().setImage({ src }).run();
+            };
+        }, (error) => {
+            this.error = error;
+        });
+    }
+    ngOnDestroy() {
+        this._canceled = true;
+    }
+    _dataURItoBlob(dataURI) {
+        // convert base64 to raw binary data held in a string
+        // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
+        const byteString = atob(dataURI.split(',')[1]);
+        // separate out the mime component
+        const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
+        // write the bytes of the string to an ArrayBuffer
+        const ab = new ArrayBuffer(byteString.length);
+        const ia = new Uint8Array(ab);
+        for (var i = 0; i < byteString.length; i++) {
+            ia[i] = byteString.charCodeAt(i);
+        }
+        return new Blob([ab], { type: mimeString });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ImageUploadingPlaceholderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: ImageUploadingPlaceholderComponent, isStandalone: true, selector: "emr-image-uploading-placeholder", host: { properties: { "class.selected": "selected" }, classAttribute: "emr-image-uploading-placeholder" }, usesInheritance: true, ngImport: i0, template: "@if (src) {\r\n  <div class=\"flex items-center justify-center relative\">\r\n    @if (error) {\r\n      <div class=\"absolute top-0 start-0 right-0 min-h-8 bg-error z-[2]\r\n                    text-on-error text-tiny flex items-center px-3\">{{ error }}</div>\r\n    }\r\n    <div class=\"w-max absolute start-1/2 top-1/2 z-[1] -translate-y-1/2 -translate-x-1/2\">\r\n      @if (!error) {\r\n        <mat-spinner></mat-spinner>\r\n      }\r\n    </div>\r\n    <img [src]=\"src\" alt=\"\" class=\"max-w-full opacity-70\">\r\n  </div>\r\n}\r\n", styles: [":host{display:block}:host.selected{outline:var(--sys-tertiary) solid 4px}\n/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ImageUploadingPlaceholderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'emr-image-uploading-placeholder', imports: [
+                        MatProgressSpinner
+                    ], host: {
+                        'class': 'emr-image-uploading-placeholder',
+                        '[class.selected]': 'selected'
+                    }, template: "@if (src) {\r\n  <div class=\"flex items-center justify-center relative\">\r\n    @if (error) {\r\n      <div class=\"absolute top-0 start-0 right-0 min-h-8 bg-error z-[2]\r\n                    text-on-error text-tiny flex items-center px-3\">{{ error }}</div>\r\n    }\r\n    <div class=\"w-max absolute start-1/2 top-1/2 z-[1] -translate-y-1/2 -translate-x-1/2\">\r\n      @if (!error) {\r\n        <mat-spinner></mat-spinner>\r\n      }\r\n    </div>\r\n    <img [src]=\"src\" alt=\"\" class=\"max-w-full opacity-70\">\r\n  </div>\r\n}\r\n", styles: [":host{display:block}:host.selected{outline:var(--sys-tertiary) solid 4px}\n/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+const ImageUploadingPlaceholderExtension = (injector, options) => {
+    return Node.create({
+        name: 'imageUploadingPlaceholder',
+        draggable: false,
+        group: 'block',
+        addOptions() {
+            return {
+                uploadFn: options.uploadFn
+            };
+        },
+        addAttributes() {
+            return {
+                uploadId: {
+                    default: ''
+                },
+                src: {
+                    default: null
+                }
+            };
+        },
+        addCommands() {
+            return {
+                addImageUploadingPlaceholder: options => ({ commands }) => {
+                    return commands.insertContent({
+                        type: this.name,
+                        attrs: {
+                            src: options.src
+                        }
+                    });
+                },
+            };
+        },
+        addNodeView() {
+            return AngularNodeViewRenderer(ImageUploadingPlaceholderComponent, { injector });
+        },
+        parseHTML() {
+            return [
+                {
+                    tag: 'image-uploading-placeholder',
+                }
+            ];
+        },
+        renderHTML({ HTMLAttributes }) {
+            return [
+                'image-uploading-placeholder', mergeAttributes(HTMLAttributes),
+            ];
+        }
+    });
+};
+
+class CommentEditorComponent {
+    _platformId = inject(PLATFORM_ID);
+    _document = inject(DOCUMENT);
+    _cdr = inject(ChangeDetectorRef);
+    _injector = inject(Injector);
+    _content = viewChild.required('content');
+    _bubbleMenu = viewChild.required('bubbleMenu');
+    _imageBubbleMenu = viewChild.required('imageBubbleMenu');
+    _value = '';
+    editor;
+    showToolbar = false;
+    fullView = false;
+    contentMaxHeight = input(...(ngDevMode ? [undefined, { debugName: "contentMaxHeight" }] : []));
+    buttonCancelLabel = input('Cancel', ...(ngDevMode ? [{ debugName: "buttonCancelLabel" }] : []));
+    buttonSendLabel = input('Send', ...(ngDevMode ? [{ debugName: "buttonSendLabel" }] : []));
+    placeholder = input('Write something …', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    toolbarAlwaysVisible = input(false, ...(ngDevMode ? [{ debugName: "toolbarAlwaysVisible", transform: booleanAttribute }] : [{
+            transform: booleanAttribute
+        }]));
+    fullViewMode = input(false, ...(ngDevMode ? [{ debugName: "fullViewMode", transform: booleanAttribute }] : [{
+            transform: booleanAttribute
+        }]));
+    cancelButtonAlwaysVisible = input(false, ...(ngDevMode ? [{ debugName: "cancelButtonAlwaysVisible", transform: booleanAttribute }] : [{
+            transform: booleanAttribute
+        }]));
+    imageUploadFn = input(...(ngDevMode ? [undefined, { debugName: "imageUploadFn" }] : []));
+    sent = output();
+    canceled = output();
+    ngOnInit() {
+        this._init();
+    }
+    get api() {
+        return {
+            isCommandDisabled: (command) => this.isCommandDisabled(command),
+            isActive: (command) => this.editor?.isActive(command),
+            runCommand: (command) => this._runCommand(command),
+            editor: () => this.editor,
+            isToolbarActive: () => this.showToolbar,
+            toggleToolbar: () => this.toggleToolbar(),
+            isEditorActivated: () => this.fullView || this.fullViewMode()
+        };
+    }
+    isCommandDisabled(command) {
+        if (!this.editor) {
+            return true;
+        }
+        const canFocus = this.editor.can().chain().focus();
+        return !canFocus[command]().run() || null;
+    }
+    ngOnDestroy() {
+        this.editor?.destroy();
+    }
+    send(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.sent.emit(this._value);
+        this.showToolbar = false;
+        this.fullView = false;
+        this._value = '';
+        this.editor.commands.clearContent(true);
+    }
+    activateFullView() {
+        if (this.fullView) {
+            return;
+        }
+        this.fullView = true;
+    }
+    toggleToolbar() {
+        this.showToolbar = !this.showToolbar;
+    }
+    cancel(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.showToolbar = false;
+        this.fullView = false;
+        this._value = '';
+        this.editor.commands.clearContent(true);
+        this.canceled.emit();
+    }
+    _runCommand(command) {
+        if (!this.editor) {
+            return;
+        }
+        const chainFocus = this.editor.chain().focus();
+        chainFocus[command]().run();
+    }
+    _init() {
+        if (isPlatformServer(this._platformId)) {
+            return;
+        }
+        this.editor = new Editor({
+            element: this._content().nativeElement,
+            extensions: [
+                Document,
+                Paragraph,
+                Text,
+                Bold,
+                Italic,
+                Strike,
+                Blockquote,
+                CodeBlock,
+                BulletList,
+                OrderedList,
+                ListItem,
+                Code,
+                History,
+                Dropcursor,
+                Youtube.configure({
+                    controls: false,
+                    nocookie: true,
+                }),
+                ImageUploadingPlaceholderExtension(this._injector, {
+                    uploadFn: this.imageUploadFn(),
+                }),
+                Image$1.configure({
+                    inline: true,
+                    allowBase64: true
+                }),
+                Link.configure({
+                    openOnClick: false,
+                    defaultProtocol: 'https',
+                }),
+                Placeholder.configure({
+                    placeholder: this.placeholder()
+                }),
+                // FloatingMenu.configure({
+                //   element: this._floatingMenu().nativeElement
+                // }),
+                BubbleMenu.configure({
+                    element: this._imageBubbleMenu().nativeElement,
+                    shouldShow: ({ editor, view, state, oldState, from, to }) => {
+                        // return editor.isActive('image');
+                        return false;
+                    },
+                }),
+                BubbleMenu.configure({
+                    element: this._bubbleMenu().nativeElement,
+                    tippyOptions: {
+                        appendTo: this._document.body,
+                        zIndex: 999
+                    },
+                    shouldShow: ({ editor, view, state, oldState, from, to }) => {
+                        return !editor.isActive('image') &&
+                            !editor.isActive('youtube') &&
+                            !editor.isActive('imageUploadingPlaceholder') &&
+                            !editor.view.state.selection.empty;
+                    },
+                })
+            ],
+            content: '',
+            onUpdate: ({ editor }) => {
+                this._value = !editor.isEmpty ? editor.getHTML() : '';
+            }
+        });
+        this._cdr.detectChanges();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: CommentEditorComponent, isStandalone: true, selector: "emr-comment-editor", inputs: { contentMaxHeight: { classPropertyName: "contentMaxHeight", publicName: "contentMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, buttonCancelLabel: { classPropertyName: "buttonCancelLabel", publicName: "buttonCancelLabel", isSignal: true, isRequired: false, transformFunction: null }, buttonSendLabel: { classPropertyName: "buttonSendLabel", publicName: "buttonSendLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, toolbarAlwaysVisible: { classPropertyName: "toolbarAlwaysVisible", publicName: "toolbarAlwaysVisible", isSignal: true, isRequired: false, transformFunction: null }, fullViewMode: { classPropertyName: "fullViewMode", publicName: "fullViewMode", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonAlwaysVisible: { classPropertyName: "cancelButtonAlwaysVisible", publicName: "cancelButtonAlwaysVisible", isSignal: true, isRequired: false, transformFunction: null }, imageUploadFn: { classPropertyName: "imageUploadFn", publicName: "imageUploadFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sent: "sent", canceled: "canceled" }, host: { listeners: { "click": "activateFullView()" }, properties: { "class.full-view": "fullView || fullViewMode()" }, classAttribute: "emr-comment-editor" }, providers: [
+            {
+                provide: COMMENT_EDITOR,
+                useExisting: forwardRef(() => CommentEditorComponent)
+            }
+        ], viewQueries: [{ propertyName: "_content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "_bubbleMenu", first: true, predicate: ["bubbleMenu"], descendants: true, isSignal: true }, { propertyName: "_imageBubbleMenu", first: true, predicate: ["imageBubbleMenu"], descendants: true, isSignal: true }], exportAs: ["emrCommentEditor"], ngImport: i0, template: "@if ((showToolbar || toolbarAlwaysVisible()) && (fullView || fullViewMode())) {\r\n  <div class=\"toolbar\">\r\n    <ng-content select=\"emr-comment-editor-toolbar\" />\r\n  </div>\r\n}\r\n<div #content class=\"content prose dark:prose-invert max-w-full\"></div>\r\n<div class=\"footer\">\r\n  <div class=\"flex items-center gap-0.5\">\r\n    <ng-content select=\"emr-comment-editor-footer-bar\"/>\r\n  </div>\r\n  <div class=\"flex items-center gap-2\">\r\n    @if ((fullView && !fullViewMode()) || cancelButtonAlwaysVisible()) {\r\n      <button mat-button (click)=\"cancel($event)\">{{ buttonCancelLabel() }}</button>\r\n    }\r\n\r\n    <button mat-flat-button [disabled]=\"!_value || null\" (click)=\"send($event)\">{{ buttonSendLabel() }}</button>\r\n  </div>\r\n</div>\r\n<div #imageBubbleMenu class=\"emr-comment-editor-bubble-menu\">\r\n</div>\r\n<div #bubbleMenu>\r\n  <ng-content select=\"emr-comment-editor-bubble-menu\"/>\r\n</div>\r\n<!--<div #floatingMenu class=\"floating-menu\">-->\r\n<!--  @if (editor) {-->\r\n<!--    <div class=\"flex items-center gap-1.5\">-->\r\n<!--      <button class=\"button\"-->\r\n<!--              [disabled]=\"isCommandDisabled('toggleCodeBlock')\"-->\r\n<!--              [class.active]=\"editor && editor.isActive('codeBlock')\"-->\r\n<!--              (click)=\"onButtonClick('toggleCodeBlock')\">-->\r\n<!--        <mat-icon>code</mat-icon>-->\r\n<!--      </button>-->\r\n<!--      <button class=\"button\">-->\r\n<!--        <mat-icon>image</mat-icon>-->\r\n<!--      </button>-->\r\n<!--    </div>-->\r\n<!--  }-->\r\n<!--</div>-->\r\n", styles: [":host{--emr-comment-editor-bg: transparent;--emr-comment-editor-content-max-height: 9999px;display:block;position:relative;overflow:hidden;background:var(--emr-comment-editor-bg)}:host .floating-menu{box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a;background:#fff;padding-top:calc(var(--spacing) * 1.5);padding-bottom:calc(var(--spacing) * 1.5);padding-inline-start:calc(var(--spacing) * 2);padding-inline-end:calc(var(--spacing) * 2);border:1px solid var(--color-border);border-radius:calc(infinity * 1px)}:host .floating-menu .button:hover{color:var(--color-primary);border-radius:calc(infinity * 1px)}:host .floating-menu .button mat-icon{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6);font-size:1.25rem;line-height:1.25}:host .floating-menu .button:disabled{pointer-events:none;opacity:70%}:host .content{position:absolute;inset:0;height:calc(var(--spacing) * 14)}:host .content ::ng-deep .tiptap{padding:calc(var(--spacing) * 4);min-height:calc(var(--spacing) * 10)}:host .content ::ng-deep .tiptap:focus{outline:none}:host .content ::ng-deep .tiptap div[data-youtube-video]{cursor:move;background:var(--color-neutral-100);padding:calc(var(--spacing) * 6);display:flex;align-items:center;justify-content:center}:host .content ::ng-deep .tiptap div[data-youtube-video] iframe{width:100%;aspect-ratio:16/9;border:none;display:block;min-height:200px;min-width:200px;outline:none}:host .content ::ng-deep .tiptap div[data-youtube-video].ProseMirror-selectednode iframe{outline:var(--sys-tertiary) solid 4px;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .content ::ng-deep .tiptap img{display:block;height:auto;margin:calc(var(--spacing) * 6) 0;max-width:100%}:host .content ::ng-deep .tiptap img.ProseMirror-selectednode{outline:var(--sys-tertiary) solid 4px;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .content ::ng-deep .tiptap p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--color-neutral-500);float:left;height:0;pointer-events:none;font-size:14px}:host .content ::ng-deep .tiptap.ProseMirror-focused p.is-editor-empty:first-child:before{content:none}:host .content ::ng-deep .tiptap p.is-empty:before{content:attr(data-placeholder);color:var(--color-neutral-500);float:left;height:0;pointer-events:none;font-size:14px}:host .content ::ng-deep p:first-child,:host .content ::ng-deep pre:first-child{margin-top:0}:host .content ::ng-deep p:last-child,:host .content ::ng-deep pre:last-child{margin-bottom:0}:host.full-view .content{position:static;height:auto;min-height:calc(var(--spacing) * 12);max-height:var(--emr-comment-editor-content-max-height);overflow-y:auto}:host .footer{height:calc(var(--spacing) * 14);padding:0 calc(var(--spacing) * 2.5);display:flex;align-items:center;justify-content:space-between}:host .toolbar{border-bottom:1px solid var(--color-border);height:calc(var(--spacing) * 14);padding:0 calc(var(--spacing) * 3);display:flex;align-items:center;justify-content:space-between}:host .button.active,:host ::ng-deep .button.active{background:var(--color-neutral-200)}:host-context(html.dark) .button.active,:host-context(html.dark) ::ng-deep .button.active{background:var(--color-neutral-650);color:var(--color-neutral-200)}\n/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'emr-comment-editor', exportAs: 'emrCommentEditor', imports: [
+                        MatButton
+                    ], providers: [
+                        {
+                            provide: COMMENT_EDITOR,
+                            useExisting: forwardRef(() => CommentEditorComponent)
+                        }
+                    ], host: {
+                        'class': 'emr-comment-editor',
+                        '[class.full-view]': 'fullView || fullViewMode()',
+                        '(click)': 'activateFullView()'
+                    }, template: "@if ((showToolbar || toolbarAlwaysVisible()) && (fullView || fullViewMode())) {\r\n  <div class=\"toolbar\">\r\n    <ng-content select=\"emr-comment-editor-toolbar\" />\r\n  </div>\r\n}\r\n<div #content class=\"content prose dark:prose-invert max-w-full\"></div>\r\n<div class=\"footer\">\r\n  <div class=\"flex items-center gap-0.5\">\r\n    <ng-content select=\"emr-comment-editor-footer-bar\"/>\r\n  </div>\r\n  <div class=\"flex items-center gap-2\">\r\n    @if ((fullView && !fullViewMode()) || cancelButtonAlwaysVisible()) {\r\n      <button mat-button (click)=\"cancel($event)\">{{ buttonCancelLabel() }}</button>\r\n    }\r\n\r\n    <button mat-flat-button [disabled]=\"!_value || null\" (click)=\"send($event)\">{{ buttonSendLabel() }}</button>\r\n  </div>\r\n</div>\r\n<div #imageBubbleMenu class=\"emr-comment-editor-bubble-menu\">\r\n</div>\r\n<div #bubbleMenu>\r\n  <ng-content select=\"emr-comment-editor-bubble-menu\"/>\r\n</div>\r\n<!--<div #floatingMenu class=\"floating-menu\">-->\r\n<!--  @if (editor) {-->\r\n<!--    <div class=\"flex items-center gap-1.5\">-->\r\n<!--      <button class=\"button\"-->\r\n<!--              [disabled]=\"isCommandDisabled('toggleCodeBlock')\"-->\r\n<!--              [class.active]=\"editor && editor.isActive('codeBlock')\"-->\r\n<!--              (click)=\"onButtonClick('toggleCodeBlock')\">-->\r\n<!--        <mat-icon>code</mat-icon>-->\r\n<!--      </button>-->\r\n<!--      <button class=\"button\">-->\r\n<!--        <mat-icon>image</mat-icon>-->\r\n<!--      </button>-->\r\n<!--    </div>-->\r\n<!--  }-->\r\n<!--</div>-->\r\n", styles: [":host{--emr-comment-editor-bg: transparent;--emr-comment-editor-content-max-height: 9999px;display:block;position:relative;overflow:hidden;background:var(--emr-comment-editor-bg)}:host .floating-menu{box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a;background:#fff;padding-top:calc(var(--spacing) * 1.5);padding-bottom:calc(var(--spacing) * 1.5);padding-inline-start:calc(var(--spacing) * 2);padding-inline-end:calc(var(--spacing) * 2);border:1px solid var(--color-border);border-radius:calc(infinity * 1px)}:host .floating-menu .button:hover{color:var(--color-primary);border-radius:calc(infinity * 1px)}:host .floating-menu .button mat-icon{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6);font-size:1.25rem;line-height:1.25}:host .floating-menu .button:disabled{pointer-events:none;opacity:70%}:host .content{position:absolute;inset:0;height:calc(var(--spacing) * 14)}:host .content ::ng-deep .tiptap{padding:calc(var(--spacing) * 4);min-height:calc(var(--spacing) * 10)}:host .content ::ng-deep .tiptap:focus{outline:none}:host .content ::ng-deep .tiptap div[data-youtube-video]{cursor:move;background:var(--color-neutral-100);padding:calc(var(--spacing) * 6);display:flex;align-items:center;justify-content:center}:host .content ::ng-deep .tiptap div[data-youtube-video] iframe{width:100%;aspect-ratio:16/9;border:none;display:block;min-height:200px;min-width:200px;outline:none}:host .content ::ng-deep .tiptap div[data-youtube-video].ProseMirror-selectednode iframe{outline:var(--sys-tertiary) solid 4px;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .content ::ng-deep .tiptap img{display:block;height:auto;margin:calc(var(--spacing) * 6) 0;max-width:100%}:host .content ::ng-deep .tiptap img.ProseMirror-selectednode{outline:var(--sys-tertiary) solid 4px;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .content ::ng-deep .tiptap p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--color-neutral-500);float:left;height:0;pointer-events:none;font-size:14px}:host .content ::ng-deep .tiptap.ProseMirror-focused p.is-editor-empty:first-child:before{content:none}:host .content ::ng-deep .tiptap p.is-empty:before{content:attr(data-placeholder);color:var(--color-neutral-500);float:left;height:0;pointer-events:none;font-size:14px}:host .content ::ng-deep p:first-child,:host .content ::ng-deep pre:first-child{margin-top:0}:host .content ::ng-deep p:last-child,:host .content ::ng-deep pre:last-child{margin-bottom:0}:host.full-view .content{position:static;height:auto;min-height:calc(var(--spacing) * 12);max-height:var(--emr-comment-editor-content-max-height);overflow-y:auto}:host .footer{height:calc(var(--spacing) * 14);padding:0 calc(var(--spacing) * 2.5);display:flex;align-items:center;justify-content:space-between}:host .toolbar{border-bottom:1px solid var(--color-border);height:calc(var(--spacing) * 14);padding:0 calc(var(--spacing) * 3);display:flex;align-items:center;justify-content:space-between}:host .button.active,:host ::ng-deep .button.active{background:var(--color-neutral-200)}:host-context(html.dark) .button.active,:host-context(html.dark) ::ng-deep .button.active{background:var(--color-neutral-650);color:var(--color-neutral-200)}\n/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { _content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], _bubbleMenu: [{ type: i0.ViewChild, args: ['bubbleMenu', { isSignal: true }] }], _imageBubbleMenu: [{ type: i0.ViewChild, args: ['imageBubbleMenu', { isSignal: true }] }], contentMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentMaxHeight", required: false }] }], buttonCancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonCancelLabel", required: false }] }], buttonSendLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonSendLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], toolbarAlwaysVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbarAlwaysVisible", required: false }] }], fullViewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullViewMode", required: false }] }], cancelButtonAlwaysVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonAlwaysVisible", required: false }] }], imageUploadFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUploadFn", required: false }] }], sent: [{ type: i0.Output, args: ["sent"] }], canceled: [{ type: i0.Output, args: ["canceled"] }] } });
+
+class CommentEditorDividerComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: CommentEditorDividerComponent, isStandalone: true, selector: "emr-comment-editor-divider", ngImport: i0, template: "<div class=\"divider\"></div>\r\n", styles: [":host{display:block;padding:0 calc(var(--spacing) * 2)}:host .divider{height:calc(var(--spacing) * 6);background:var(--color-neutral-300);width:1px}:host-context(html.dark) .divider{background:var(--color-neutral-500)}\n/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorDividerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'emr-comment-editor-divider', imports: [], template: "<div class=\"divider\"></div>\r\n", styles: [":host{display:block;padding:0 calc(var(--spacing) * 2)}:host .divider{height:calc(var(--spacing) * 6);background:var(--color-neutral-300);width:1px}:host-context(html.dark) .divider{background:var(--color-neutral-500)}\n/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class CommentEditorToolbarComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: CommentEditorToolbarComponent, isStandalone: true, selector: "emr-comment-editor-toolbar", host: { classAttribute: "emr-comment-editor-toolbar" }, exportAs: ["emrCommentEditorToolbar"], ngImport: i0, template: "<ng-content select=\"[emrCommentEditorCommand],emr-comment-editor-divider\"></ng-content>\r\n", styles: [":host{display:flex;align-items:center;gap:calc(var(--spacing) * .5)}\n/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'emr-comment-editor-toolbar', exportAs: 'emrCommentEditorToolbar', host: {
+                        'class': 'emr-comment-editor-toolbar',
+                    }, template: "<ng-content select=\"[emrCommentEditorCommand],emr-comment-editor-divider\"></ng-content>\r\n", styles: [":host{display:flex;align-items:center;gap:calc(var(--spacing) * .5)}\n/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class CommentEditorBubbleMenuComponent {
+    commentEditor = inject(COMMENT_EDITOR);
+    getLinkUrl() {
+        return (this.commentEditor.api.editor()?.getAttributes('link')).href || null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorBubbleMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: CommentEditorBubbleMenuComponent, isStandalone: true, selector: "emr-comment-editor-bubble-menu", host: { classAttribute: "emr-comment-editor-bubble-menu" }, providers: [
+            {
+                provide: COMMENT_EDITOR_BUBBLE_MENU,
+                useExisting: forwardRef(() => CommentEditorBubbleMenuComponent)
+            }
+        ], exportAs: ["emrCommentEditorBubbleMenu"], ngImport: i0, template: "@if (this.commentEditor.api.isActive('link') && getLinkUrl()) {\r\n  <div class=\"flex items-center gap-1 h-11 border-b border-b-default border-b-neutral-700\">\r\n    <div class=\"grow text-sm overflow-hidden text-ellipsis whitespace-nowrap w-[116px]\">\r\n      <a [href]=\"getLinkUrl()\" target=\"_blank\" class=\"link\">{{ getLinkUrl() }}</a>\r\n    </div>\r\n    <div class=\"flex items-center flex-none\">\r\n      <ng-content select=\"[emrCommentEditorCommandEditLink],[emrCommentEditorCommandUnsetLink]\"></ng-content>\r\n    </div>\r\n  </div>\r\n}\r\n<div class=\"h-12 flex items-center justify-center gap-0.5\">\r\n  <ng-content select=\"[emrCommentEditorCommand],emr-comment-editor-divider\"></ng-content>\r\n</div>\r\n", styles: [":host{display:block;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a;background:var(--color-neutral-950);color:var(--color-neutral-200);min-height:calc(var(--spacing) * 12);border-radius:1rem;top:1px;padding-inline-start:calc(var(--spacing) * 2);padding-inline-end:calc(var(--spacing) * 2)}:host .button,:host ::ng-deep .button{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10);display:flex;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--emr-icon-size: 1.25rem}:host .button:hover,:host ::ng-deep .button:hover{color:var(--color-tertiary-300);background-color:var(--color-neutral-700);border-radius:calc(infinity * 1px);padding:calc(var(--spacing) * 1.5)}:host .button.active,:host ::ng-deep .button.active{color:var(--color-tertiary-300);background-color:var(--color-neutral-700)}:host .button mat-icon,:host ::ng-deep .button mat-icon{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6);font-size:1.25rem;line-height:1.25}:host .button:disabled,:host ::ng-deep .button:disabled{pointer-events:none;opacity:70%}:host .link{color:var(--color-tertiary-300);position:relative;top:1px}:host .link:hover{color:var(--color-tertiary-100)}:host-context(html.dark){background:var(--color-tertiary-200);color:var(--color-neutral-900)}:host-context(html.dark) .link{color:var(--color-tertiary-700)}:host-context(html.dark) .link:hover{color:var(--color-tertiary-800)}\n/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorBubbleMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'emr-comment-editor-bubble-menu', exportAs: 'emrCommentEditorBubbleMenu', providers: [
+                        {
+                            provide: COMMENT_EDITOR_BUBBLE_MENU,
+                            useExisting: forwardRef(() => CommentEditorBubbleMenuComponent)
+                        }
+                    ], host: {
+                        'class': 'emr-comment-editor-bubble-menu',
+                    }, template: "@if (this.commentEditor.api.isActive('link') && getLinkUrl()) {\r\n  <div class=\"flex items-center gap-1 h-11 border-b border-b-default border-b-neutral-700\">\r\n    <div class=\"grow text-sm overflow-hidden text-ellipsis whitespace-nowrap w-[116px]\">\r\n      <a [href]=\"getLinkUrl()\" target=\"_blank\" class=\"link\">{{ getLinkUrl() }}</a>\r\n    </div>\r\n    <div class=\"flex items-center flex-none\">\r\n      <ng-content select=\"[emrCommentEditorCommandEditLink],[emrCommentEditorCommandUnsetLink]\"></ng-content>\r\n    </div>\r\n  </div>\r\n}\r\n<div class=\"h-12 flex items-center justify-center gap-0.5\">\r\n  <ng-content select=\"[emrCommentEditorCommand],emr-comment-editor-divider\"></ng-content>\r\n</div>\r\n", styles: [":host{display:block;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a;background:var(--color-neutral-950);color:var(--color-neutral-200);min-height:calc(var(--spacing) * 12);border-radius:1rem;top:1px;padding-inline-start:calc(var(--spacing) * 2);padding-inline-end:calc(var(--spacing) * 2)}:host .button,:host ::ng-deep .button{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10);display:flex;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--emr-icon-size: 1.25rem}:host .button:hover,:host ::ng-deep .button:hover{color:var(--color-tertiary-300);background-color:var(--color-neutral-700);border-radius:calc(infinity * 1px);padding:calc(var(--spacing) * 1.5)}:host .button.active,:host ::ng-deep .button.active{color:var(--color-tertiary-300);background-color:var(--color-neutral-700)}:host .button mat-icon,:host ::ng-deep .button mat-icon{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6);font-size:1.25rem;line-height:1.25}:host .button:disabled,:host ::ng-deep .button:disabled{pointer-events:none;opacity:70%}:host .link{color:var(--color-tertiary-300);position:relative;top:1px}:host .link:hover{color:var(--color-tertiary-100)}:host-context(html.dark){background:var(--color-tertiary-200);color:var(--color-neutral-900)}:host-context(html.dark) .link{color:var(--color-tertiary-700)}:host-context(html.dark) .link:hover{color:var(--color-tertiary-800)}\n/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class CommentEditorFooterBarComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorFooterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: CommentEditorFooterBarComponent, isStandalone: true, selector: "emr-comment-editor-footer-bar", host: { classAttribute: "emr-comment-editor-footer-bar" }, exportAs: ["emrCommentEditorFooterBar"], ngImport: i0, template: "<ng-content select=\"[emrCommentEditorCommand],emr-comment-editor-divider\"></ng-content>\r\n", styles: [":host{display:flex;align-items:center;gap:calc(var(--spacing) * .5)}\n/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorFooterBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'emr-comment-editor-footer-bar', exportAs: 'emrCommentEditorFooterBar', host: {
+                        'class': 'emr-comment-editor-footer-bar',
+                    }, template: "<ng-content select=\"[emrCommentEditorCommand],emr-comment-editor-divider\"></ng-content>\r\n", styles: [":host{display:flex;align-items:center;gap:calc(var(--spacing) * .5)}\n/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class CommentEditorCommandDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: CommentEditorCommandDirective, isStandalone: true, selector: "[emrCommentEditorCommand]", host: { properties: { "class.button": "true" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[emrCommentEditorCommand]',
+                    standalone: true,
+                    host: {
+                        '[class.button]': 'true'
+                    }
+                }]
+        }] });
+
+class CommentEditorCommandBoldDirective {
+    commentEditor = inject(COMMENT_EDITOR);
+    onClick() {
+        this.commentEditor.api.runCommand('toggleBold');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandBoldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: CommentEditorCommandBoldDirective, isStandalone: true, selector: "[emrCommentEditorCommandBold]", host: { listeners: { "click": "onClick()" }, properties: { "attr.disabled": "(commentEditor && commentEditor.api.isCommandDisabled('toggleBold')) ? '' : null", "class.active": "commentEditor && commentEditor.api.isActive('bold')" } }, exportAs: ["emrCommentEditorCommandBold"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandBoldDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[emrCommentEditorCommandBold]',
+                    exportAs: 'emrCommentEditorCommandBold',
+                    standalone: true,
+                    host: {
+                        '[attr.disabled]': `(commentEditor && commentEditor.api.isCommandDisabled('toggleBold')) ? '' : null`,
+                        '[class.active]': `commentEditor && commentEditor.api.isActive('bold')`,
+                        '(click)': `onClick()`
+                    }
+                }]
+        }] });
+
+class CommentEditorCommandItalicDirective {
+    commentEditor = inject(COMMENT_EDITOR);
+    onClick() {
+        this.commentEditor.api.runCommand('toggleItalic');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandItalicDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: CommentEditorCommandItalicDirective, isStandalone: true, selector: "[emrCommentEditorCommandItalic]", host: { listeners: { "click": "onClick()" }, properties: { "attr.disabled": "(commentEditor && commentEditor.api.isCommandDisabled('toggleItalic')) ? '' : null", "class.active": "commentEditor && commentEditor.api.isActive('italic')" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandItalicDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[emrCommentEditorCommandItalic]',
+                    standalone: true,
+                    host: {
+                        '[attr.disabled]': `(commentEditor && commentEditor.api.isCommandDisabled('toggleItalic')) ? '' : null`,
+                        '[class.active]': `commentEditor && commentEditor.api.isActive('italic')`,
+                        '(click)': `onClick()`
+                    }
+                }]
+        }] });
+
+class CommentEditorCommandStrikeDirective {
+    commentEditor = inject(COMMENT_EDITOR);
+    onClick() {
+        this.commentEditor.api.runCommand('toggleStrike');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandStrikeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: CommentEditorCommandStrikeDirective, isStandalone: true, selector: "[emrCommentEditorCommandStrike]", host: { listeners: { "click": "onClick()" }, properties: { "attr.disabled": "(commentEditor && commentEditor.api.isCommandDisabled('toggleStrike')) ? '' : null", "class.active": "commentEditor && commentEditor.api.isActive('strike')" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandStrikeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[emrCommentEditorCommandStrike]',
+                    standalone: true,
+                    host: {
+                        '[attr.disabled]': `(commentEditor && commentEditor.api.isCommandDisabled('toggleStrike')) ? '' : null`,
+                        '[class.active]': `commentEditor && commentEditor.api.isActive('strike')`,
+                        '(click)': `onClick()`
+                    }
+                }]
+        }] });
+
+class CommentEditorCommandBulletListDirective {
+    commentEditor = inject(COMMENT_EDITOR);
+    onClick() {
+        this.commentEditor.api.runCommand('toggleBulletList');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandBulletListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: CommentEditorCommandBulletListDirective, isStandalone: true, selector: "[emrCommentEditorCommandBulletList]", host: { listeners: { "click": "onClick()" }, properties: { "attr.disabled": "(commentEditor && commentEditor.api.isCommandDisabled('toggleBulletList')) ? '' : null", "class.active": "commentEditor && commentEditor.api.isActive('bulletList')" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandBulletListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[emrCommentEditorCommandBulletList]',
+                    standalone: true,
+                    host: {
+                        '[attr.disabled]': `(commentEditor && commentEditor.api.isCommandDisabled('toggleBulletList')) ? '' : null`,
+                        '[class.active]': `commentEditor && commentEditor.api.isActive('bulletList')`,
+                        '(click)': `onClick()`
+                    }
+                }]
+        }] });
+
+class CommentEditorCommandOrderedListDirective {
+    commentEditor = inject(COMMENT_EDITOR);
+    onClick() {
+        this.commentEditor.api.runCommand('toggleOrderedList');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandOrderedListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: CommentEditorCommandOrderedListDirective, isStandalone: true, selector: "[emrCommentEditorCommandOrderedList]", host: { listeners: { "click": "onClick()" }, properties: { "attr.disabled": "(commentEditor && commentEditor.api.isCommandDisabled('toggleOrderedList')) ? '' : null", "class.active": "commentEditor && commentEditor.api.isActive('orderedList')" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandOrderedListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[emrCommentEditorCommandOrderedList]',
+                    standalone: true,
+                    host: {
+                        '[attr.disabled]': `(commentEditor && commentEditor.api.isCommandDisabled('toggleOrderedList')) ? '' : null`,
+                        '[class.active]': `commentEditor && commentEditor.api.isActive('orderedList')`,
+                        '(click)': `onClick()`
+                    }
+                }]
+        }] });
+
+class CommentEditorCommandBlockquoteDirective {
+    commentEditor = inject(COMMENT_EDITOR);
+    onClick() {
+        this.commentEditor.api.runCommand('toggleBlockquote');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandBlockquoteDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: CommentEditorCommandBlockquoteDirective, isStandalone: true, selector: "[emrCommentEditorCommandBlockquote]", host: { listeners: { "click": "onClick()" }, properties: { "attr.disabled": "(commentEditor && commentEditor.api.isCommandDisabled('toggleBlockquote')) ? '' : null", "class.active": "commentEditor && commentEditor.api.isActive('blockquote')" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandBlockquoteDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[emrCommentEditorCommandBlockquote]',
+                    standalone: true,
+                    host: {
+                        '[attr.disabled]': `(commentEditor && commentEditor.api.isCommandDisabled('toggleBlockquote')) ? '' : null`,
+                        '[class.active]': `commentEditor && commentEditor.api.isActive('blockquote')`,
+                        '(click)': `onClick()`
+                    }
+                }]
+        }] });
+
+class CommentEditorCommandCodeBlockDirective {
+    commentEditor = inject(COMMENT_EDITOR);
+    onClick() {
+        this.commentEditor.api.runCommand('toggleCodeBlock');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandCodeBlockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: CommentEditorCommandCodeBlockDirective, isStandalone: true, selector: "[emrCommentEditorCommandCodeBlock]", host: { listeners: { "click": "onClick()" }, properties: { "attr.disabled": "(commentEditor && commentEditor.api.isCommandDisabled('toggleCodeBlock')) ? '' : null", "class.active": "commentEditor && commentEditor.api.isActive('codeBlock')" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandCodeBlockDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[emrCommentEditorCommandCodeBlock]',
+                    standalone: true,
+                    host: {
+                        '[attr.disabled]': `(commentEditor && commentEditor.api.isCommandDisabled('toggleCodeBlock')) ? '' : null`,
+                        '[class.active]': `commentEditor && commentEditor.api.isActive('codeBlock')`,
+                        '(click)': `onClick()`
+                    }
+                }]
+        }] });
+
+class CommentEditorCommandImageDirective {
+    commentEditor = inject(COMMENT_EDITOR);
+    onImageSelected(event) {
+        const file = event.files[0];
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => {
+            const src = reader.result;
+            this.commentEditor.api.editor().chain().focus().addImageUploadingPlaceholder({ src, file }).run();
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: CommentEditorCommandImageDirective, isStandalone: true, selector: "[emrCommentEditorCommandImage]", host: { listeners: { "fileSelected": "onImageSelected($event)" }, properties: { "attr.accept": "\"image/*\"" } }, hostDirectives: [{ directive: i1.UploadTriggerDirective, outputs: ["fileSelected", "fileSelected"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandImageDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[emrCommentEditorCommandImage]',
+                    standalone: true,
+                    hostDirectives: [
+                        {
+                            directive: UploadTriggerDirective,
+                            outputs: ['fileSelected']
+                        }
+                    ],
+                    host: {
+                        '[attr.accept]': '"image/*"',
+                        '(fileSelected)': `onImageSelected($event)`
+                    }
+                }]
+        }] });
+
+class YoutubeDialog {
+    _dialogRef = inject(MatDialogRef);
+    _data = inject(MAT_DIALOG_DATA);
+    linkUrl = this._data.linkUrl || '';
+    isUpdate = !!this._data.linkUrl;
+    onSubmit() {
+        this._dialogRef.close(this.linkUrl);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: YoutubeDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: YoutubeDialog, isStandalone: true, selector: "emr-youtube", ngImport: i0, template: "<form class=\"w-[500px]\" (ngSubmit)=\"onSubmit()\">\r\n  <h3 class=\"mat-title-large\" mat-dialog-title>\r\n    @if (isUpdate) {\r\n      Update Youtube\r\n    } @else {\r\n      Add Youtube\r\n    }\r\n  </h3>\r\n  <mat-dialog-content>\r\n    <div class=\"pt-4\">\r\n      <mat-form-field class=\"w-full\">\r\n        <mat-label>Paste Url</mat-label>\r\n        <input name=\"linkUrl\" matInput [(ngModel)]=\"linkUrl\">\r\n      </mat-form-field>\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions align=\"end\">\r\n    <button mat-button>Cancel</button>\r\n    <button type=\"submit\" mat-flat-button color=\"primary\"\r\n            cdkFocusInitial [disabled]=\"!linkUrl.trim() || null\">\r\n      @if (isUpdate) {\r\n        Save\r\n      } @else {\r\n        Add url\r\n      }\r\n    </button>\r\n  </mat-dialog-actions>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: YoutubeDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'emr-youtube', imports: [
+                        FormsModule,
+                        MatButton,
+                        MatDialogActions,
+                        MatDialogContent,
+                        MatDialogTitle,
+                        MatFormField,
+                        MatInput,
+                        MatLabel,
+                        ReactiveFormsModule
+                    ], template: "<form class=\"w-[500px]\" (ngSubmit)=\"onSubmit()\">\r\n  <h3 class=\"mat-title-large\" mat-dialog-title>\r\n    @if (isUpdate) {\r\n      Update Youtube\r\n    } @else {\r\n      Add Youtube\r\n    }\r\n  </h3>\r\n  <mat-dialog-content>\r\n    <div class=\"pt-4\">\r\n      <mat-form-field class=\"w-full\">\r\n        <mat-label>Paste Url</mat-label>\r\n        <input name=\"linkUrl\" matInput [(ngModel)]=\"linkUrl\">\r\n      </mat-form-field>\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions align=\"end\">\r\n    <button mat-button>Cancel</button>\r\n    <button type=\"submit\" mat-flat-button color=\"primary\"\r\n            cdkFocusInitial [disabled]=\"!linkUrl.trim() || null\">\r\n      @if (isUpdate) {\r\n        Save\r\n      } @else {\r\n        Add url\r\n      }\r\n    </button>\r\n  </mat-dialog-actions>\r\n</form>\r\n" }]
+        }] });
+
+class CommentEditorCommandYoutubeDirective {
+    commentEditor = inject(COMMENT_EDITOR);
+    _dialog = inject(MatDialog);
+    _destroyRef = inject(DestroyRef);
+    onClick() {
+        const dialogRef = this._dialog.open(YoutubeDialog, {
+            data: {
+                linkUrl: this.commentEditor.api.editor().getAttributes('iframe').src
+            }
+        });
+        dialogRef
+            .afterClosed()
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((linkUrl) => {
+            if (typeof linkUrl === 'undefined') {
+                return;
+            }
+            this.commentEditor.api.editor().commands.setYoutubeVideo({
+                src: linkUrl
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandYoutubeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: CommentEditorCommandYoutubeDirective, isStandalone: true, selector: "[emrCommentEditorCommandYoutube]", host: { listeners: { "click": "onClick()" }, properties: { "attr.disabled": "(commentEditor && commentEditor.api.isCommandDisabled('toggleBlockquote')) ? '' : null", "class.active": "commentEditor && commentEditor.api.isActive('blockquote')" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandYoutubeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[emrCommentEditorCommandYoutube]',
+                    standalone: true,
+                    host: {
+                        '[attr.disabled]': `(commentEditor && commentEditor.api.isCommandDisabled('toggleBlockquote')) ? '' : null`,
+                        '[class.active]': `commentEditor && commentEditor.api.isActive('blockquote')`,
+                        '(click)': `onClick()`
+                    }
+                }]
+        }] });
+
+class LinkDialog {
+    _dialogRef = inject(MatDialogRef);
+    _data = inject(MAT_DIALOG_DATA);
+    linkUrl = this._data.linkUrl || '';
+    isUpdate = !!this._data.linkUrl;
+    onSubmit() {
+        this._dialogRef.close(this.linkUrl);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LinkDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: LinkDialog, isStandalone: true, selector: "emr-link", ngImport: i0, template: "<form class=\"w-[500px]\" (ngSubmit)=\"onSubmit()\">\r\n  <h3 class=\"mat-title-large\" mat-dialog-title>\r\n    @if (isUpdate) {\r\n      Update Link\r\n    } @else {\r\n      Add Link\r\n    }</h3>\r\n  <mat-dialog-content>\r\n    <div class=\"pt-4\">\r\n      <mat-form-field class=\"w-full\">\r\n        <mat-label>Paste Link</mat-label>\r\n        <input name=\"linkUrl\" matInput [(ngModel)]=\"linkUrl\">\r\n      </mat-form-field>\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions align=\"end\">\r\n    <button mat-button>Cancel</button>\r\n    <button type=\"submit\" mat-flat-button color=\"primary\"\r\n            cdkFocusInitial [disabled]=\"!linkUrl.trim() || null\">\r\n      @if (isUpdate) {\r\n        Save\r\n      } @else {\r\n        Add link\r\n      }\r\n    </button>\r\n  </mat-dialog-actions>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LinkDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'emr-link', imports: [
+                        MatButton,
+                        MatDialogActions,
+                        MatDialogContent,
+                        MatDialogTitle,
+                        MatFormField,
+                        MatInput,
+                        MatLabel,
+                        ReactiveFormsModule,
+                        FormsModule
+                    ], template: "<form class=\"w-[500px]\" (ngSubmit)=\"onSubmit()\">\r\n  <h3 class=\"mat-title-large\" mat-dialog-title>\r\n    @if (isUpdate) {\r\n      Update Link\r\n    } @else {\r\n      Add Link\r\n    }</h3>\r\n  <mat-dialog-content>\r\n    <div class=\"pt-4\">\r\n      <mat-form-field class=\"w-full\">\r\n        <mat-label>Paste Link</mat-label>\r\n        <input name=\"linkUrl\" matInput [(ngModel)]=\"linkUrl\">\r\n      </mat-form-field>\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions align=\"end\">\r\n    <button mat-button>Cancel</button>\r\n    <button type=\"submit\" mat-flat-button color=\"primary\"\r\n            cdkFocusInitial [disabled]=\"!linkUrl.trim() || null\">\r\n      @if (isUpdate) {\r\n        Save\r\n      } @else {\r\n        Add link\r\n      }\r\n    </button>\r\n  </mat-dialog-actions>\r\n</form>\r\n" }]
+        }] });
+
+class CommentEditorCommandLinkDirective {
+    _destroyRef = inject(DestroyRef);
+    _dialog = inject(MatDialog);
+    commentEditor = inject(COMMENT_EDITOR);
+    setLinkActive = false;
+    onClick() {
+        this.setLinkActive = true;
+        const dialogRef = this._dialog.open(LinkDialog, {
+            data: {
+                linkUrl: this.commentEditor.api.editor().getAttributes('link').href
+            }
+        });
+        dialogRef
+            .afterClosed()
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((linkUrl) => {
+            this.setLinkActive = false;
+            if (typeof linkUrl === 'undefined') {
+                return;
+            }
+            this._setLink(linkUrl);
+        });
+    }
+    _setLink(url) {
+        // cancelled
+        if (url === null) {
+            return;
+        }
+        // empty
+        if (url === '') {
+            this.commentEditor.api.editor()
+                .chain()
+                .focus()
+                .extendMarkRange('link')
+                .unsetLink()
+                .run();
+            return;
+        }
+        // update link
+        this.commentEditor.api.editor()
+            .chain()
+            .focus()
+            .extendMarkRange('link')
+            .setLink({ href: url })
+            .run();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: CommentEditorCommandLinkDirective, isStandalone: true, selector: "[emrCommentEditorCommandLink]", host: { listeners: { "click": "onClick()" }, properties: { "attr.disabled": "(commentEditor && commentEditor.api.isCommandDisabled('toggleLink')) ? '' : null", "class.active": "commentEditor && commentEditor.api.isActive('link')" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandLinkDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[emrCommentEditorCommandLink]',
+                    standalone: true,
+                    host: {
+                        '[attr.disabled]': `(commentEditor && commentEditor.api.isCommandDisabled('toggleLink')) ? '' : null`,
+                        '[class.active]': `commentEditor && commentEditor.api.isActive('link')`,
+                        '(click)': `onClick()`
+                    }
+                }]
+        }] });
+
+class CommentEditorCommandCodeDirective {
+    commentEditor = inject(COMMENT_EDITOR);
+    onClick() {
+        this.commentEditor.api.runCommand('toggleCode');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandCodeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: CommentEditorCommandCodeDirective, isStandalone: true, selector: "[emrCommentEditorCommandCode]", host: { listeners: { "click": "onClick()" }, properties: { "attr.disabled": "(commentEditor && commentEditor.api.isCommandDisabled('toggleCode')) ? '' : null", "class.active": "commentEditor && commentEditor.api.isActive('code')" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandCodeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[emrCommentEditorCommandCode]',
+                    standalone: true,
+                    host: {
+                        '[attr.disabled]': `(commentEditor && commentEditor.api.isCommandDisabled('toggleCode')) ? '' : null`,
+                        '[class.active]': `commentEditor && commentEditor.api.isActive('code')`,
+                        '(click)': `onClick()`
+                    }
+                }]
+        }] });
+
+class CommentEditorCommandEditLinkDirective {
+    _destroyRef = inject(DestroyRef);
+    _dialog = inject(MatDialog);
+    commentEditor = inject(COMMENT_EDITOR);
+    setLinkActive = false;
+    onClick() {
+        this.setLinkActive = true;
+        const dialogRef = this._dialog.open(LinkDialog, {
+            data: {
+                linkUrl: this.commentEditor.api.editor().getAttributes('link').href
+            }
+        });
+        dialogRef
+            .afterClosed()
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((linkUrl) => {
+            this.setLinkActive = false;
+            if (typeof linkUrl === 'undefined') {
+                return;
+            }
+            this._setLink(linkUrl);
+        });
+    }
+    _setLink(url) {
+        // cancelled
+        if (url === null) {
+            return;
+        }
+        // empty
+        if (url === '') {
+            this.commentEditor.api.editor()
+                .chain()
+                .focus()
+                .extendMarkRange('link')
+                .unsetLink()
+                .run();
+            return;
+        }
+        // update link
+        this.commentEditor.api.editor()
+            .chain()
+            .focus()
+            .extendMarkRange('link')
+            .setLink({ href: url })
+            .run();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandEditLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: CommentEditorCommandEditLinkDirective, isStandalone: true, selector: "[emrCommentEditorCommandEditLink]", host: { listeners: { "click": "onClick()" }, properties: { "class.button": "true" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandEditLinkDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[emrCommentEditorCommandEditLink]',
+                    standalone: true,
+                    host: {
+                        '[class.button]': 'true',
+                        '(click)': `onClick()`
+                    }
+                }]
+        }] });
+
+class CommentEditorCommandUnsetLinkDirective {
+    commentEditor = inject(COMMENT_EDITOR);
+    onClick() {
+        this.commentEditor.api.editor().commands.unsetLink();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandUnsetLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: CommentEditorCommandUnsetLinkDirective, isStandalone: true, selector: "[emrCommentEditorCommandUnsetLink]", host: { listeners: { "click": "onClick()" }, properties: { "class.button": "true" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandUnsetLinkDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[emrCommentEditorCommandUnsetLink]',
+                    standalone: true,
+                    host: {
+                        '[class.button]': 'true',
+                        '(click)': `onClick()`
+                    }
+                }]
+        }] });
+
+class CommentEditorCommandToggleToolbarDirective {
+    commentEditor = inject(COMMENT_EDITOR);
+    onClick() {
+        this.commentEditor.api.toggleToolbar();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandToggleToolbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: CommentEditorCommandToggleToolbarDirective, isStandalone: true, selector: "[emrCommentEditorCommandToggleToolbar]", host: { listeners: { "click": "onClick()" }, properties: { "class.active": "commentEditor && commentEditor.api.isToolbarActive()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CommentEditorCommandToggleToolbarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[emrCommentEditorCommandToggleToolbar]',
+                    standalone: true,
+                    host: {
+                        '[class.active]': `commentEditor && commentEditor.api.isToolbarActive()`,
+                        '(click)': `onClick()`
+                    }
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { COMMENT_EDITOR, COMMENT_EDITOR_BUBBLE_MENU, CommentEditorBubbleMenuComponent, CommentEditorCommandBlockquoteDirective, CommentEditorCommandBoldDirective, CommentEditorCommandBulletListDirective, CommentEditorCommandCodeBlockDirective, CommentEditorCommandCodeDirective, CommentEditorCommandDirective, CommentEditorCommandEditLinkDirective, CommentEditorCommandImageDirective, CommentEditorCommandItalicDirective, CommentEditorCommandLinkDirective, CommentEditorCommandOrderedListDirective, CommentEditorCommandStrikeDirective, CommentEditorCommandToggleToolbarDirective, CommentEditorCommandUnsetLinkDirective, CommentEditorCommandYoutubeDirective, CommentEditorComponent, CommentEditorDividerComponent, CommentEditorFooterBarComponent, CommentEditorToolbarComponent };
+//# sourceMappingURL=elementar-rt-components-comment-editor.mjs.map