@semantic-components/editor 0.4.0 → 0.61.0

package/fesm2022/semantic-components-editor.mjs

@@ -1,4721 +0,0 @@
-import * as i0 from '@angular/core';
-import { inject, ElementRef, input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, signal, Injectable, ChangeDetectorRef, contentChild, afterNextRender, forwardRef } from '@angular/core';
-import * as i1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
-import { cn } from '@semantic-components/utils';
-import { Editor } from '@tiptap/core';
-import Document from '@tiptap/extension-document';
-import Heading from '@tiptap/extension-heading';
-import Paragraph from '@tiptap/extension-paragraph';
-import Text from '@tiptap/extension-text';
-import { ScTooltip, ScToggle, ScMenuShortcut, ScMenuSeparator, ScMenuGroup, ScMenuItem, ScMenuTriggerFor, ScMenu, ScButton, ScLabel, ScInput, ScPopoverTriggerFor, ScSeparator } from '@semantic-components/ui';
-import { SiQuoteIcon, SiBoldIcon, SiListIcon, SiCodeIcon, SiHighlighterIcon, SiMinusIcon, SiItalicIcon, SiListOrderedIcon, SiRedoIcon, SiStrikethroughIcon, SiAlignCenterIcon, SiAlignLeftIcon, SiAlignRightIcon, SiUnderlineIcon, SiUndoIcon, SiUnlinkIcon, SiPaletteIcon, SiImagePlusIcon, SiFileVideoIcon } from '@semantic-icons/lucide-icons';
-import { Dialog, DialogRef, DialogModule } from '@angular/cdk/dialog';
-import { CdkMenuTrigger, CdkMenu, CdkMenuItem } from '@angular/cdk/menu';
-
-class ScEditorContent {
-    host = inject(ElementRef);
-    classInput = input('', {
-        alias: 'class',
-    });
-    class = computed(() => cn('block p-4 min-h-[200px]', this.classInput()));
-    get nativeElement() {
-        return this.host.nativeElement;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: ScEditorContent, isStandalone: true, selector: "sc-editor-content", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()" } }, ngImport: i0, template: ``, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorContent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-editor-content', imports: [], template: ``, host: {
-                        '[class]': 'class()',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
-
-class ScExtensions {
-    //history extension
-    undo = signal(false);
-    redo = signal(false);
-    history = computed(() => this.undo() || this.redo());
-    //link extension
-    setLink = signal(false);
-    unsetLink = signal(false);
-    link = computed(() => this.setLink() || this.unsetLink());
-    //text align extension
-    textAlignRight = signal(false);
-    textAlignLeft = signal(false);
-    textAlignCenter = signal(false);
-    textAlign = computed(() => this.textAlignRight() || this.textAlignLeft() || this.textAlignCenter());
-    //
-    highlight = signal(false);
-    color = signal(false);
-    underline = signal(false);
-    fontFamily = signal(false);
-    bold = signal(false);
-    youtube = signal(false);
-    image = signal(false);
-    code = signal(false);
-    strike = signal(false);
-    italic = signal(false);
-    blockquote = signal(false);
-    bulletList = signal(false);
-    orderedList = signal(false);
-    horizontalRule = signal(false);
-    textStyle = signal(false);
-    table = signal(false);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScExtensions, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScExtensions });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScExtensions, decorators: [{
-            type: Injectable
-        }] });
-
-class ScEditor {
-    changeDetectorRef = inject(ChangeDetectorRef);
-    editorContent = contentChild.required(ScEditorContent);
-    value = signal('');
-    isEditable = signal(true);
-    classInput = input('', {
-        alias: 'class',
-    });
-    class = computed(() => cn('block border rounded-md dark:border-gray-700', this.classInput()));
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onChange = () => { };
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onTouched = () => { };
-    editor;
-    extensions = inject(ScExtensions);
-    constructor() {
-        afterNextRender(() => {
-            this.createEditor();
-        });
-    }
-    async createEditor() {
-        const extensions = [];
-        extensions.push(Document);
-        extensions.push(Heading);
-        extensions.push(Paragraph);
-        extensions.push(Text);
-        try {
-            if (this.extensions.highlight()) {
-                const Highlight = (await import('@tiptap/extension-highlight')).Highlight;
-                extensions.push(Highlight);
-            }
-            if (this.extensions.textStyle()) {
-                const TextStyle = (await import('@tiptap/extension-text-style')).TextStyle;
-                extensions.push(TextStyle);
-            }
-            if (this.extensions.color()) {
-                const Color = (await import('@tiptap/extension-color')).Color;
-                extensions.push(Color);
-            }
-            if (this.extensions.fontFamily()) {
-                const FontFamily = (await import('@tiptap/extension-font-family')).FontFamily;
-                extensions.push(FontFamily);
-            }
-            if (this.extensions.underline()) {
-                const Underline = (await import('@tiptap/extension-underline')).Underline;
-                extensions.push(Underline);
-            }
-            if (this.extensions.image()) {
-                const Image = (await import('@tiptap/extension-image')).Image;
-                extensions.push(Image);
-            }
-            if (this.extensions.youtube()) {
-                const Youtube = (await import('@tiptap/extension-youtube')).Youtube;
-                extensions.push(Youtube);
-            }
-            if (this.extensions.link()) {
-                const Link = (await import('@tiptap/extension-link')).Link;
-                extensions.push(Link);
-            }
-            if (this.extensions.textAlign()) {
-                const TextAlign = (await import('@tiptap/extension-text-align')).TextAlign;
-                extensions.push(TextAlign.configure({
-                    types: ['heading', 'paragraph'],
-                }));
-            }
-            if (this.extensions.bulletList() || this.extensions.orderedList()) {
-                const ListItem = (await import('@tiptap/extension-list-item')).ListItem;
-                extensions.push(ListItem);
-            }
-            if (this.extensions.bulletList()) {
-                const BulletList = (await import('@tiptap/extension-bullet-list')).BulletList;
-                extensions.push(BulletList);
-            }
-            if (this.extensions.orderedList()) {
-                const OrderedList = (await import('@tiptap/extension-ordered-list')).OrderedList;
-                extensions.push(OrderedList);
-            }
-            if (this.extensions.strike()) {
-                const Strike = (await import('@tiptap/extension-strike')).Strike;
-                extensions.push(Strike);
-            }
-            if (this.extensions.italic()) {
-                const Italic = (await import('@tiptap/extension-italic')).Italic;
-                extensions.push(Italic);
-            }
-            if (this.extensions.bold()) {
-                const Bold = (await import('@tiptap/extension-bold')).Bold;
-                extensions.push(Bold);
-            }
-            if (this.extensions.horizontalRule()) {
-                const HorizontalRule = (await import('@tiptap/extension-horizontal-rule')).HorizontalRule;
-                extensions.push(HorizontalRule);
-            }
-            if (this.extensions.blockquote()) {
-                const Blockquote = (await import('@tiptap/extension-blockquote')).Blockquote;
-                extensions.push(Blockquote);
-            }
-            if (this.extensions.code()) {
-                const Code = (await import('@tiptap/extension-code')).Code;
-                extensions.push(Code);
-            }
-            if (this.extensions.history()) {
-                const History = (await import('@tiptap/extension-history')).History;
-                extensions.push(History);
-            }
-            if (this.extensions.table()) {
-                const TableHeader = (await import('@tiptap/extension-table-header')).TableHeader;
-                extensions.push(TableHeader);
-                const TableRow = (await import('@tiptap/extension-table-row')).TableRow;
-                extensions.push(TableRow);
-                const TableCell = (await import('@tiptap/extension-table-cell')).TableCell;
-                extensions.push(TableCell);
-                const Table = (await import('@tiptap/extension-table')).Table;
-                extensions.push(Table.configure({
-                    resizable: true,
-                }));
-            }
-        }
-        catch (e) {
-            console.log(e);
-        }
-        this.editor = new Editor({
-            element: this.editorContent().nativeElement,
-            extensions: extensions,
-            content: this.value(),
-            editable: this.isEditable(),
-            editorProps: {
-                attributes: {
-                    class: 'prose dark:prose-invert focus:outline-none max-w-full',
-                },
-            },
-        });
-        this.editor.on('update', ({ editor }) => {
-            this.setHtmlContent(editor.getHTML());
-        });
-        this.editor.on('blur', () => {
-            this.onTouched();
-        });
-    }
-    writeValue(value) {
-        this.value.set(value);
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.isEditable.set(!isDisabled);
-    }
-    setHtmlContent(htmlContent) {
-        this.value.set(htmlContent);
-        this.onChange(htmlContent);
-        this.changeDetectorRef.markForCheck();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", type: ScEditor, isStandalone: true, selector: "sc-editor", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => ScEditor),
-                multi: true,
-            },
-            ScExtensions,
-        ], queries: [{ propertyName: "editorContent", first: true, predicate: ScEditorContent, descendants: true, isSignal: true }], ngImport: i0, template: `
-    <ng-content />
-  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditor, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-editor', imports: [], template: `
-    <ng-content />
-  `, host: {
-                        '[class]': 'class()',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => ScEditor),
-                            multi: true,
-                        },
-                        ScExtensions,
-                    ] }]
-        }], ctorParameters: () => [] });
-
-class ScEditorBlockquote {
-    ariaLabel = input('Toggle blockquote', {
-        alias: 'aria-label',
-    });
-    parent = inject(ScEditor);
-    extensions = inject(ScExtensions);
-    constructor() {
-        this.extensions.blockquote.set(true);
-    }
-    get editor() {
-        return this.parent.editor;
-    }
-    toggleBlockquote() {
-        this.editor.chain().focus().toggleBlockquote().run();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorBlockquote, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: ScEditorBlockquote, isStandalone: true, selector: "sc-editor-blockquote", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <button
-      [attr.aria-label]="ariaLabel()"
-      [scTooltip]="ariaLabel()"
-      (click)="toggleBlockquote()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg si-quote-icon></svg>
-      <span class="sr-only">{{ ariaLabel() }}</span>
-    </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]" }, { kind: "component", type: SiQuoteIcon, selector: "svg[si-quote-icon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorBlockquote, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-editor-blockquote', imports: [ScTooltip, ScToggle, SiQuoteIcon], template: `
-    <button
-      [attr.aria-label]="ariaLabel()"
-      [scTooltip]="ariaLabel()"
-      (click)="toggleBlockquote()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg si-quote-icon></svg>
-      <span class="sr-only">{{ ariaLabel() }}</span>
-    </button>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [] });
-
-class ScEditorBold {
-    ariaLabel = input('Toggle Bold', {
-        alias: 'aria-label',
-    });
-    parent = inject(ScEditor);
-    extensions = inject(ScExtensions);
-    constructor() {
-        this.extensions.bold.set(true);
-    }
-    get editor() {
-        return this.parent.editor;
-    }
-    toggleBold() {
-        this.editor.chain().focus().toggleBold().run();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorBold, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: ScEditorBold, isStandalone: true, selector: "sc-editor-bold", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <button
-      [attr.aria-label]="ariaLabel()"
-      [scTooltip]="ariaLabel()"
-      (click)="toggleBold()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg si-bold-icon></svg>
-      <span class="sr-only">{{ ariaLabel() }}</span>
-    </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]" }, { kind: "component", type: SiBoldIcon, selector: "svg[si-bold-icon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorBold, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-editor-bold', imports: [ScTooltip, ScToggle, SiBoldIcon], template: `
-    <button
-      [attr.aria-label]="ariaLabel()"
-      [scTooltip]="ariaLabel()"
-      (click)="toggleBold()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg si-bold-icon></svg>
-      <span class="sr-only">{{ ariaLabel() }}</span>
-    </button>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [] });
-
-class ScEditorBulletList {
-    ariaLabel = 'Toggle List';
-    parent = inject(ScEditor);
-    extensions = inject(ScExtensions);
-    constructor() {
-        this.extensions.bulletList.set(true);
-    }
-    get editor() {
-        return this.parent.editor;
-    }
-    toggleBulletList() {
-        this.editor.chain().focus().toggleBulletList().run();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorBulletList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ScEditorBulletList, isStandalone: true, selector: "sc-editor-bullet-list", ngImport: i0, template: `
-    <button
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      (click)="toggleBulletList()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg si-list-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]" }, { kind: "component", type: SiListIcon, selector: "svg[si-list-icon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorBulletList, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-editor-bullet-list', imports: [ScTooltip, ScToggle, SiListIcon], template: `
-    <button
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      (click)="toggleBulletList()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg si-list-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [] });
-
-class ScEditorCode {
-    ariaLabel = 'Format code';
-    parent = inject(ScEditor);
-    extensions = inject(ScExtensions);
-    constructor() {
-        this.extensions.code.set(true);
-    }
-    get editor() {
-        return this.parent.editor;
-    }
-    toggleCode() {
-        this.editor.chain().focus().toggleCode().run();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorCode, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ScEditorCode, isStandalone: true, selector: "sc-editor-code", ngImport: i0, template: `
-    <button
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      (click)="toggleCode()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg si-code-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SiCodeIcon, selector: "svg[si-code-icon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorCode, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-editor-code', imports: [ScTooltip, SiCodeIcon, ScToggle], template: `
-    <button
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      (click)="toggleCode()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg si-code-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [] });
-
-class ScEditorHighlight {
-    ariaLabel = 'Toggle Highlight';
-    parent = inject(ScEditor);
-    extensions = inject(ScExtensions);
-    constructor() {
-        this.extensions.highlight.set(true);
-    }
-    get editor() {
-        return this.parent.editor;
-    }
-    toggleHighlight() {
-        this.editor.chain().focus().toggleHighlight().run();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorHighlight, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ScEditorHighlight, isStandalone: true, selector: "sc-editor-highlight", ngImport: i0, template: `
-    <button
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      (click)="toggleHighlight()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg si-highlighter-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]" }, { kind: "component", type: SiHighlighterIcon, selector: "svg[si-highlighter-icon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorHighlight, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-editor-highlight', imports: [ScTooltip, ScToggle, SiHighlighterIcon], template: `
-    <button
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      (click)="toggleHighlight()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg si-highlighter-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [] });
-
-class ScEditorHorizontalRule {
-    ariaLabel = 'Toggle Horizontal Rule';
-    parent = inject(ScEditor);
-    extensions = inject(ScExtensions);
-    constructor() {
-        this.extensions.horizontalRule.set(true);
-    }
-    get editor() {
-        return this.parent.editor;
-    }
-    setHorizontalRule() {
-        this.editor.chain().focus().setHorizontalRule().run();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorHorizontalRule, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ScEditorHorizontalRule, isStandalone: true, selector: "sc-editor-horizontal-rule", ngImport: i0, template: `
-    <button
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      (click)="setHorizontalRule()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg si-minus-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]" }, { kind: "component", type: SiMinusIcon, selector: "svg[si-minus-icon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorHorizontalRule, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-editor-horizontal-rule', imports: [ScTooltip, ScToggle, SiMinusIcon], template: `
-    <button
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      (click)="setHorizontalRule()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg si-minus-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [] });
-
-class ScEditorItalic {
-    ariaLabel = 'Toggle Italic';
-    parent = inject(ScEditor);
-    extensions = inject(ScExtensions);
-    constructor() {
-        this.extensions.italic.set(true);
-    }
-    get editor() {
-        return this.parent.editor;
-    }
-    toggleItalic() {
-        this.editor.chain().focus().toggleItalic().run();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorItalic, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ScEditorItalic, isStandalone: true, selector: "sc-editor-italic", ngImport: i0, template: `
-    <button
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      (click)="toggleItalic()"
-      type="button"
-      sc-toggle
-      variant="outline"
-    >
-      <svg si-italic-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]" }, { kind: "component", type: SiItalicIcon, selector: "svg[si-italic-icon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorItalic, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-editor-italic', imports: [ScTooltip, ScToggle, SiItalicIcon], template: `
-    <button
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      (click)="toggleItalic()"
-      type="button"
-      sc-toggle
-      variant="outline"
-    >
-      <svg si-italic-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [] });
-
-class ScEditorOrderedList {
-    ariaLabel = 'Toggle ordered list';
-    parent = inject(ScEditor);
-    extensions = inject(ScExtensions);
-    constructor() {
-        this.extensions.orderedList.set(true);
-    }
-    get editor() {
-        return this.parent.editor;
-    }
-    toggleOrderedList() {
-        this.editor.chain().focus().toggleOrderedList().run();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorOrderedList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ScEditorOrderedList, isStandalone: true, selector: "sc-editor-ordered-list", ngImport: i0, template: `
-    <button
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      (click)="toggleOrderedList()"
-      type="button"
-      sc-toggle
-      variant="outline"
-    >
-      <svg si-list-ordered-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]" }, { kind: "component", type: SiListOrderedIcon, selector: "svg[si-list-ordered-icon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorOrderedList, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-editor-ordered-list', imports: [ScTooltip, ScToggle, SiListOrderedIcon], template: `
-    <button
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      (click)="toggleOrderedList()"
-      type="button"
-      sc-toggle
-      variant="outline"
-    >
-      <svg si-list-ordered-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [] });
-
-class ScEditorParagraph {
-    parent = inject(ScEditor);
-    get editor() {
-        return this.parent.editor;
-    }
-    setParagraph() {
-        this.editor.chain().focus().setParagraph().run();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorParagraph, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ScEditorParagraph, isStandalone: true, selector: "sc-editor-paragraph", ngImport: i0, template: `
-    <button [scMenuTriggerFor]="menu" sc-toggle variant="outline" type="button">
-      Paragraph & Headings
-    </button>
-
-    <ng-template #menu>
-      <div sc-menu>
-        <sc-menu-group>
-          <button (click)="setParagraph()" sc-menu-item>
-            <span>Paragraph</span>
-            <span sc-menu-shortcut>⌘+Alt+0</span>
-          </button>
-        </sc-menu-group>
-        <hr sc-menu-separator />
-        <sc-menu-group>
-          <button sc-menu-item>
-            <h1>Heading 1</h1>
-            <span sc-menu-shortcut>⌘+Alt+1</span>
-          </button>
-          <button sc-menu-item>
-            <h2>Heading 2</h2>
-            <span sc-menu-shortcut>⌘+Alt+2</span>
-          </button>
-
-          <button sc-menu-item>
-            <h3>Heading 3</h3>
-            <span sc-menu-shortcut>⌘+Alt+3</span>
-          </button>
-
-          <button sc-menu-item>
-            <h4>Heading 4</h4>
-            <span sc-menu-shortcut>⌘+Alt+4</span>
-          </button>
-
-          <button sc-menu-item>
-            <h5>Heading 5</h5>
-            <span sc-menu-shortcut>⌘+Alt+5</span>
-          </button>
-
-          <button sc-menu-item>
-            <h6>Heading 6</h6>
-            <span sc-menu-shortcut>⌘+Alt+6</span>
-          </button>
-        </sc-menu-group>
-      </div>
-    </ng-template>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScMenuShortcut, selector: "span[sc-menu-shortcut]", inputs: ["class"] }, { kind: "component", type: ScMenuSeparator, selector: "hr[sc-menu-separator]", inputs: ["class"] }, { kind: "component", type: ScMenuGroup, selector: "sc-menu-group", inputs: ["class"] }, { kind: "component", type: ScMenuItem, selector: "button[sc-menu-item]", inputs: ["class", "inset"] }, { kind: "directive", type: ScMenuTriggerFor, selector: "[scMenuTriggerFor]", inputs: ["scMenuTriggerFor"] }, { kind: "component", type: ScMenu, selector: "div[sc-menu]", inputs: ["class"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorParagraph, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-editor-paragraph', imports: [
-                        ScMenuShortcut,
-                        ScMenuSeparator,
-                        ScMenuGroup,
-                        ScMenuItem,
-                        ScMenuTriggerFor,
-                        ScMenu,
-                        ScToggle,
-                    ], template: `
-    <button [scMenuTriggerFor]="menu" sc-toggle variant="outline" type="button">
-      Paragraph & Headings
-    </button>
-
-    <ng-template #menu>
-      <div sc-menu>
-        <sc-menu-group>
-          <button (click)="setParagraph()" sc-menu-item>
-            <span>Paragraph</span>
-            <span sc-menu-shortcut>⌘+Alt+0</span>
-          </button>
-        </sc-menu-group>
-        <hr sc-menu-separator />
-        <sc-menu-group>
-          <button sc-menu-item>
-            <h1>Heading 1</h1>
-            <span sc-menu-shortcut>⌘+Alt+1</span>
-          </button>
-          <button sc-menu-item>
-            <h2>Heading 2</h2>
-            <span sc-menu-shortcut>⌘+Alt+2</span>
-          </button>
-
-          <button sc-menu-item>
-            <h3>Heading 3</h3>
-            <span sc-menu-shortcut>⌘+Alt+3</span>
-          </button>
-
-          <button sc-menu-item>
-            <h4>Heading 4</h4>
-            <span sc-menu-shortcut>⌘+Alt+4</span>
-          </button>
-
-          <button sc-menu-item>
-            <h5>Heading 5</h5>
-            <span sc-menu-shortcut>⌘+Alt+5</span>
-          </button>
-
-          <button sc-menu-item>
-            <h6>Heading 6</h6>
-            <span sc-menu-shortcut>⌘+Alt+6</span>
-          </button>
-        </sc-menu-group>
-      </div>
-    </ng-template>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
-
-class ScEditorRedo {
-    ariaLabel = 'Redo';
-    parent = inject(ScEditor);
-    extensions = inject(ScExtensions);
-    constructor() {
-        this.extensions.redo.set(true);
-    }
-    get editor() {
-        return this.parent.editor;
-    }
-    redo() {
-        this.editor.chain().focus().redo().run();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorRedo, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ScEditorRedo, isStandalone: true, selector: "sc-editor-redo", ngImport: i0, template: `
-    <button
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      (click)="redo()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg si-redo-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]" }, { kind: "component", type: SiRedoIcon, selector: "svg[si-redo-icon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorRedo, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-editor-redo', imports: [ScTooltip, ScToggle, SiRedoIcon], template: `
-    <button
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      (click)="redo()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg si-redo-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [] });
-
-class ScEditorStrike {
-    ariaLabel = 'Toggle Strike';
-    parent = inject(ScEditor);
-    extensions = inject(ScExtensions);
-    constructor() {
-        this.extensions.strike.set(true);
-    }
-    get editor() {
-        return this.parent.editor;
-    }
-    toggleStrike() {
-        this.editor.chain().focus().toggleStrike().run();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorStrike, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ScEditorStrike, isStandalone: true, selector: "sc-editor-strike", ngImport: i0, template: `
-    <button
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      (click)="toggleStrike()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg si-strikethrough-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SiStrikethroughIcon, selector: "svg[si-strikethrough-icon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorStrike, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-editor-strike', imports: [ScTooltip, SiStrikethroughIcon, ScToggle], template: `
-    <button
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      (click)="toggleStrike()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg si-strikethrough-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [] });
-
-class ScEditorTextAlignCenter {
-    ariaLabel = 'Align center';
-    parent = inject(ScEditor);
-    extensions = inject(ScExtensions);
-    constructor() {
-        this.extensions.textAlignCenter.set(true);
-    }
-    get editor() {
-        return this.parent.editor;
-    }
-    setCenterAlign() {
-        this.editor.chain().focus().setTextAlign('center').run();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorTextAlignCenter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ScEditorTextAlignCenter, isStandalone: true, selector: "sc-editor-text-align-center", ngImport: i0, template: `
-    <button
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      (click)="setCenterAlign()"
-      type="button"
-      sc-toggle
-      variant="outline"
-    >
-      <svg si-align-center-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SiAlignCenterIcon, selector: "svg[si-align-center-icon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorTextAlignCenter, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-editor-text-align-center', imports: [ScTooltip, SiAlignCenterIcon, ScToggle], template: `
-    <button
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      (click)="setCenterAlign()"
-      type="button"
-      sc-toggle
-      variant="outline"
-    >
-      <svg si-align-center-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [] });
-
-class ScEditorTextAlignLeft {
-    ariaLabel = 'Align left';
-    parent = inject(ScEditor);
-    extensions = inject(ScExtensions);
-    constructor() {
-        this.extensions.textAlignLeft.set(true);
-    }
-    get editor() {
-        return this.parent.editor;
-    }
-    setLeftAlign() {
-        this.editor.chain().focus().setTextAlign('left').run();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorTextAlignLeft, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ScEditorTextAlignLeft, isStandalone: true, selector: "sc-editor-text-align-left", ngImport: i0, template: `
-    <button
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      (click)="setLeftAlign()"
-      type="button"
-      sc-toggle
-      variant="outline"
-    >
-      <svg si-align-left-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SiAlignLeftIcon, selector: "svg[si-align-left-icon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorTextAlignLeft, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-editor-text-align-left', imports: [ScTooltip, SiAlignLeftIcon, ScToggle], template: `
-    <button
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      (click)="setLeftAlign()"
-      type="button"
-      sc-toggle
-      variant="outline"
-    >
-      <svg si-align-left-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [] });
-
-class ScEditorTextAlignRight {
-    ariaLabel = 'Align right';
-    parent = inject(ScEditor);
-    extensions = inject(ScExtensions);
-    constructor() {
-        this.extensions.textAlignRight.set(true);
-    }
-    get editor() {
-        return this.parent.editor;
-    }
-    setRightAlign() {
-        this.editor.chain().focus().setTextAlign('right').run();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorTextAlignRight, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ScEditorTextAlignRight, isStandalone: true, selector: "sc-editor-text-align-right", ngImport: i0, template: `
-    <button
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      (click)="setRightAlign()"
-      type="button"
-      sc-toggle
-      variant="outline"
-    >
-      <svg si-align-right-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SiAlignRightIcon, selector: "svg[si-align-right-icon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorTextAlignRight, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-editor-text-align-right', imports: [ScTooltip, SiAlignRightIcon, ScToggle], template: `
-    <button
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      (click)="setRightAlign()"
-      type="button"
-      sc-toggle
-      variant="outline"
-    >
-      <svg si-align-right-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [] });
-
-class ScEditorUnderline {
-    ariaLabel = 'Toggle underline';
-    parent = inject(ScEditor);
-    extensions = inject(ScExtensions);
-    constructor() {
-        this.extensions.underline.set(true);
-    }
-    get editor() {
-        return this.parent.editor;
-    }
-    toggleUnderline() {
-        this.editor.chain().focus().toggleUnderline().run();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorUnderline, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ScEditorUnderline, isStandalone: true, selector: "sc-editor-underline", ngImport: i0, template: `
-    <button
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      (click)="toggleUnderline()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg si-underline-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SiUnderlineIcon, selector: "svg[si-underline-icon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorUnderline, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-editor-underline', imports: [ScTooltip, SiUnderlineIcon, ScToggle], template: `
-    <button
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      (click)="toggleUnderline()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg si-underline-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [] });
-
-class ScEditorUndo {
-    ariaLabel = 'Undo';
-    parent = inject(ScEditor);
-    extensions = inject(ScExtensions);
-    constructor() {
-        this.extensions.undo.set(true);
-    }
-    get editor() {
-        return this.parent.editor;
-    }
-    undo() {
-        this.editor.chain().focus().undo().run();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorUndo, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ScEditorUndo, isStandalone: true, selector: "sc-editor-undo", ngImport: i0, template: `
-    <button
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      (click)="undo()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg si-undo-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]" }, { kind: "component", type: SiUndoIcon, selector: "svg[si-undo-icon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorUndo, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-editor-undo', imports: [ScTooltip, ScToggle, SiUndoIcon], template: `
-    <button
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      (click)="undo()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg si-undo-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [] });
-
-class ScEditorUnsetLink {
-    ariaLabel = 'Unset Link';
-    parent = inject(ScEditor);
-    dialog = inject(Dialog);
-    extensions = inject(ScExtensions);
-    constructor() {
-        this.extensions.unsetLink.set(true);
-    }
-    get editor() {
-        return this.parent.editor;
-    }
-    unsetLink() {
-        this.editor.chain().focus().unsetLink().run();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorUnsetLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ScEditorUnsetLink, isStandalone: true, selector: "sc-editor-unset-link", ngImport: i0, template: `
-    <button
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      (click)="unsetLink()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg si-unlink-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]" }, { kind: "component", type: SiUnlinkIcon, selector: "svg[si-unlink-icon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorUnsetLink, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-editor-unset-link', imports: [ScTooltip, ScToggle, SiUnlinkIcon], template: `
-    <button
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      (click)="unsetLink()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg si-unlink-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [] });
-
-class ScEditorGroup {
-    classInput = input('', {
-        alias: 'class',
-    });
-    class = computed(() => cn('flex flex-wrap items-center gap-1', this.classInput()));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: ScEditorGroup, isStandalone: true, selector: "sc-editor-group", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()" } }, ngImport: i0, template: `
-    <ng-content />
-  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorGroup, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-editor-group', imports: [], template: `
-    <ng-content />
-  `, host: {
-                        '[class]': 'class()',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
-
-class ScEditorToolbar {
-    classInput = input('', {
-        alias: 'class',
-    });
-    class = computed(() => cn('flex items-center justify-between border-b p-2 dark:border-gray-700', this.classInput()));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: ScEditorToolbar, isStandalone: true, selector: "sc-editor-toolbar", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()" } }, ngImport: i0, template: `
-    <ng-content />
-  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScEditorToolbar, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-editor-toolbar', imports: [], template: `
-    <ng-content />
-  `, host: {
-                        '[class]': 'class()',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
-
-const allColors = {
-    slate: {
-        50: '#f8fafc',
-        100: '#f1f5f9',
-        200: '#e2e8f0',
-        300: '#cbd5e1',
-        400: '#94a3b8',
-        500: '#64748b',
-        600: '#475569',
-        700: '#334155',
-        800: '#1e293b',
-        900: '#0f172a',
-        950: '#020617',
-    },
-    gray: {
-        50: '#f9fafb',
-        100: '#f3f4f6',
-        200: '#e5e7eb',
-        300: '#d1d5db',
-        400: '#9ca3af',
-        500: '#6b7280',
-        600: '#4b5563',
-        700: '#374151',
-        800: '#1f2937',
-        900: '#111827',
-        950: '#030712',
-    },
-    zinc: {
-        50: '#fafafa',
-        100: '#f4f4f5',
-        200: '#e4e4e7',
-        300: '#d4d4d8',
-        400: '#a1a1aa',
-        500: '#71717a',
-        600: '#52525b',
-        700: '#3f3f46',
-        800: '#27272a',
-        900: '#18181b',
-        950: '#09090b',
-    },
-    neutral: {
-        50: '#fafafa',
-        100: '#f5f5f5',
-        200: '#e5e5e5',
-        300: '#d4d4d4',
-        400: '#a3a3a3',
-        500: '#737373',
-        600: '#525252',
-        700: '#404040',
-        800: '#262626',
-        900: '#171717',
-        950: '#0a0a0a',
-    },
-    stone: {
-        50: '#fafaf9',
-        100: '#f5f5f4',
-        200: '#e7e5e4',
-        300: '#d6d3d1',
-        400: '#a8a29e',
-        500: '#78716c',
-        600: '#57534e',
-        700: '#44403c',
-        800: '#292524',
-        900: '#1c1917',
-        950: '#0c0a09',
-    },
-    red: {
-        50: '#fef2f2',
-        100: '#fee2e2',
-        200: '#fecaca',
-        300: '#fca5a5',
-        400: '#f87171',
-        500: '#ef4444',
-        600: '#dc2626',
-        700: '#b91c1c',
-        800: '#991b1b',
-        900: '#7f1d1d',
-        950: '#450a0a',
-    },
-    orange: {
-        50: '#fff7ed',
-        100: '#ffedd5',
-        200: '#fed7aa',
-        300: '#fdba74',
-        400: '#fb923c',
-        500: '#f97316',
-        600: '#ea580c',
-        700: '#c2410c',
-        800: '#9a3412',
-        900: '#7c2d12',
-        950: '#431407',
-    },
-    amber: {
-        50: '#fffbeb',
-        100: '#fef3c7',
-        200: '#fde68a',
-        300: '#fcd34d',
-        400: '#fbbf24',
-        500: '#f59e0b',
-        600: '#d97706',
-        700: '#b45309',
-        800: '#92400e',
-        900: '#78350f',
-        950: '#451a03',
-    },
-    yellow: {
-        50: '#fefce8',
-        100: '#fef9c3',
-        200: '#fef08a',
-        300: '#fde047',
-        400: '#facc15',
-        500: '#eab308',
-        600: '#ca8a04',
-        700: '#a16207',
-        800: '#854d0e',
-        900: '#713f12',
-        950: '#422006',
-    },
-    lime: {
-        50: '#f7fee7',
-        100: '#ecfccb',
-        200: '#d9f99d',
-        300: '#bef264',
-        400: '#a3e635',
-        500: '#84cc16',
-        600: '#65a30d',
-        700: '#4d7c0f',
-        800: '#3f6212',
-        900: '#365314',
-        950: '#1a2e05',
-    },
-    green: {
-        50: '#f0fdf4',
-        100: '#dcfce7',
-        200: '#bbf7d0',
-        300: '#86efac',
-        400: '#4ade80',
-        500: '#22c55e',
-        600: '#16a34a',
-        700: '#15803d',
-        800: '#166534',
-        900: '#14532d',
-        950: '#052e16',
-    },
-    emerald: {
-        50: '#ecfdf5',
-        100: '#d1fae5',
-        200: '#a7f3d0',
-        300: '#6ee7b7',
-        400: '#34d399',
-        500: '#10b981',
-        600: '#059669',
-        700: '#047857',
-        800: '#065f46',
-        900: '#064e3b',
-        950: '#022c22',
-    },
-    teal: {
-        50: '#f0fdfa',
-        100: '#ccfbf1',
-        200: '#99f6e4',
-        300: '#5eead4',
-        400: '#2dd4bf',
-        500: '#14b8a6',
-        600: '#0d9488',
-        700: '#0f766e',
-        800: '#115e59',
-        900: '#134e4a',
-        950: '#042f2e',
-    },
-    cyan: {
-        50: '#ecfeff',
-        100: '#cffafe',
-        200: '#a5f3fc',
-        300: '#67e8f9',
-        400: '#22d3ee',
-        500: '#06b6d4',
-        600: '#0891b2',
-        700: '#0e7490',
-        800: '#155e75',
-        900: '#164e63',
-        950: '#083344',
-    },
-    sky: {
-        50: '#f0f9ff',
-        100: '#e0f2fe',
-        200: '#bae6fd',
-        300: '#7dd3fc',
-        400: '#38bdf8',
-        500: '#0ea5e9',
-        600: '#0284c7',
-        700: '#0369a1',
-        800: '#075985',
-        900: '#0c4a6e',
-        950: '#082f49',
-    },
-    blue: {
-        50: '#eff6ff',
-        100: '#dbeafe',
-        200: '#bfdbfe',
-        300: '#93c5fd',
-        400: '#60a5fa',
-        500: '#3b82f6',
-        600: '#2563eb',
-        700: '#1d4ed8',
-        800: '#1e40af',
-        900: '#1e3a8a',
-        950: '#172554',
-    },
-    indigo: {
-        50: '#eef2ff',
-        100: '#e0e7ff',
-        200: '#c7d2fe',
-        300: '#a5b4fc',
-        400: '#818cf8',
-        500: '#6366f1',
-        600: '#4f46e5',
-        700: '#4338ca',
-        800: '#3730a3',
-        900: '#312e81',
-        950: '#1e1b4b',
-    },
-    violet: {
-        50: '#f5f3ff',
-        100: '#ede9fe',
-        200: '#ddd6fe',
-        300: '#c4b5fd',
-        400: '#a78bfa',
-        500: '#8b5cf6',
-        600: '#7c3aed',
-        700: '#6d28d9',
-        800: '#5b21b6',
-        900: '#4c1d95',
-        950: '#2e1065',
-    },
-    purple: {
-        50: '#faf5ff',
-        100: '#f3e8ff',
-        200: '#e9d5ff',
-        300: '#d8b4fe',
-        400: '#c084fc',
-        500: '#a855f7',
-        600: '#9333ea',
-        700: '#7e22ce',
-        800: '#6b21a8',
-        900: '#581c87',
-        950: '#3b0764',
-    },
-    fuchsia: {
-        50: '#fdf4ff',
-        100: '#fae8ff',
-        200: '#f5d0fe',
-        300: '#f0abfc',
-        400: '#e879f9',
-        500: '#d946ef',
-        600: '#c026d3',
-        700: '#a21caf',
-        800: '#86198f',
-        900: '#701a75',
-        950: '#4a044e',
-    },
-    pink: {
-        50: '#fdf2f8',
-        100: '#fce7f3',
-        200: '#fbcfe8',
-        300: '#f9a8d4',
-        400: '#f472b6',
-        500: '#ec4899',
-        600: '#db2777',
-        700: '#be185d',
-        800: '#9d174d',
-        900: '#831843',
-        950: '#500724',
-    },
-    rose: {
-        50: '#fff1f2',
-        100: '#ffe4e6',
-        200: '#fecdd3',
-        300: '#fda4af',
-        400: '#fb7185',
-        500: '#f43f5e',
-        600: '#e11d48',
-        700: '#be123c',
-        800: '#9f1239',
-        900: '#881337',
-        950: '#4c0519',
-    },
-};
-const colors = Object.values(allColors).map((v) => v[500]);
-
-class ScExtensionColor {
-    parent = inject(ScEditor);
-    extensions = inject(ScExtensions);
-    colors = colors;
-    constructor() {
-        this.extensions.color.set(true);
-    }
-    get editor() {
-        return this.parent.editor;
-    }
-    resetColor() {
-        this.editor.commands.unsetColor();
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    setHexColor(e) {
-        const hexColor = e.target.getAttribute('data-hex-color');
-        this.editor.chain().focus().setColor(hexColor).run();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScExtensionColor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: ScExtensionColor, isStandalone: true, selector: "sc-extension-color", ngImport: i0, template: `
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      [cdkMenuTriggerFor]="textColorDropdown"
-      type="button"
-      scTooltip="Text color"
-    >
-      <svg si-palette-icon></svg>
-      <span class="sr-only">Text color</span>
-    </button>
-
-    <ng-template #textColorDropdown>
-      <div
-        class="z-10 w-48 rounded bg-white p-2 shadow dark:bg-gray-700"
-        id="textColorDropdown"
-        cdkMenu
-      >
-        <div
-          class="group mb-3 grid grid-cols-6 items-center gap-2 rounded-lg p-1.5 hover:bg-gray-100 dark:hover:bg-gray-600"
-        >
-          <input
-            class="col-span-3 h-8 w-full rounded-md border border-gray-200 bg-gray-50 p-px px-1 hover:bg-gray-50 group-hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:group-hover:bg-gray-700"
-            id="color"
-            type="color"
-            value="#e66465"
-          />
-          <label
-            class="col-span-3 text-sm font-medium text-gray-500 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
-            for="color"
-          >
-            Pick a color
-          </label>
-        </div>
-        <div class="mb-3 grid grid-cols-6 gap-1">
-          @for (color of colors; track $index) {
-            <button
-              class="size-6 rounded-md"
-              [style]="'background-color: ' + color"
-              [attr.data-hex-color]="color"
-              (click)="setHexColor($event)"
-              type="button"
-              cdkMenuItem
-            >
-              <span class="sr-only">Blue</span>
-            </button>
-          }
-        </div>
-        <button
-          class="w-full rounded-lg bg-white py-1.5 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-700"
-          id="reset-color"
-          (click)="resetColor()"
-          cdkMenuItem
-          type="button"
-        >
-          Reset color
-        </button>
-      </div>
-    </ng-template>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SiPaletteIcon, selector: "svg[si-palette-icon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScExtensionColor, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-extension-color', imports: [CdkMenuTrigger, CdkMenu, CdkMenuItem, ScTooltip, SiPaletteIcon], template: `
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      [cdkMenuTriggerFor]="textColorDropdown"
-      type="button"
-      scTooltip="Text color"
-    >
-      <svg si-palette-icon></svg>
-      <span class="sr-only">Text color</span>
-    </button>
-
-    <ng-template #textColorDropdown>
-      <div
-        class="z-10 w-48 rounded bg-white p-2 shadow dark:bg-gray-700"
-        id="textColorDropdown"
-        cdkMenu
-      >
-        <div
-          class="group mb-3 grid grid-cols-6 items-center gap-2 rounded-lg p-1.5 hover:bg-gray-100 dark:hover:bg-gray-600"
-        >
-          <input
-            class="col-span-3 h-8 w-full rounded-md border border-gray-200 bg-gray-50 p-px px-1 hover:bg-gray-50 group-hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:group-hover:bg-gray-700"
-            id="color"
-            type="color"
-            value="#e66465"
-          />
-          <label
-            class="col-span-3 text-sm font-medium text-gray-500 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
-            for="color"
-          >
-            Pick a color
-          </label>
-        </div>
-        <div class="mb-3 grid grid-cols-6 gap-1">
-          @for (color of colors; track $index) {
-            <button
-              class="size-6 rounded-md"
-              [style]="'background-color: ' + color"
-              [attr.data-hex-color]="color"
-              (click)="setHexColor($event)"
-              type="button"
-              cdkMenuItem
-            >
-              <span class="sr-only">Blue</span>
-            </button>
-          }
-        </div>
-        <button
-          class="w-full rounded-lg bg-white py-1.5 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-700"
-          id="reset-color"
-          (click)="resetColor()"
-          cdkMenuItem
-          type="button"
-        >
-          Reset color
-        </button>
-      </div>
-    </ng-template>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [] });
-
-class ScExtensionFontFamily {
-    parent = inject(ScEditor);
-    extensions = inject(ScExtensions);
-    constructor() {
-        this.extensions.fontFamily.set(true);
-    }
-    get editor() {
-        return this.parent.editor;
-    }
-    setFontFamily(e) {
-        const fontFamily = e.target.getAttribute('data-font-family');
-        if (fontFamily === null) {
-            throw new Error('Missing data-font-family');
-        }
-        this.editor.chain().focus().setFontFamily(fontFamily).run();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScExtensionFontFamily, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ScExtensionFontFamily, isStandalone: true, selector: "sc-extension-font-family", ngImport: i0, template: `
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      [cdkMenuTriggerFor]="fontFamilyDropdown"
-      type="button"
-      scTooltip="Font Family"
-    >
-      <svg
-        class="size-5"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="m10.6 19 4.298-10.93a.11.11 0 0 1 .204 0L19.4 19m-8.8 0H9.5m1.1 0h1.65m7.15 0h-1.65m1.65 0h1.1m-7.7-3.985h4.4M3.021 16l1.567-3.985m0 0L7.32 5.07a.11.11 0 0 1 .205 0l2.503 6.945h-5.44Z"
-        />
-      </svg>
-      <span class="sr-only">Font family</span>
-    </button>
-
-    <ng-template #fontFamilyDropdown>
-      <div
-        class="z-10 w-48 rounded bg-white p-2 shadow dark:bg-gray-700"
-        id="fontFamilyDropdown"
-        cdkMenu
-      >
-        <ul class="space-y-1 text-sm font-medium" aria-labelledby="toggleFontFamilyButton">
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 font-sans text-sm text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (click)="setFontFamily($event)"
-              data-font-family="Poppins, ui-sans-serif"
-              cdkMenuItem
-              type="button"
-            >
-              Default (Poppins)
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-sm text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (click)="setFontFamily($event)"
-              data-font-family="Arial, sans-serif"
-              cdkMenuItem
-              type="button"
-              style="font-family: Arial, sans-serif;"
-            >
-              Arial
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-sm text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (click)="setFontFamily($event)"
-              data-font-family="'Courier New', monospace"
-              cdkMenuItem
-              type="button"
-              style="font-family: 'Courier New', monospace;"
-            >
-              Courier New
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-sm text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (click)="setFontFamily($event)"
-              data-font-family="Georgia, serif"
-              cdkMenuItem
-              type="button"
-              style="font-family: Georgia, serif;"
-            >
-              Georgia
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-sm text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (click)="setFontFamily($event)"
-              data-font-family="'Lucida Sans Unicode', sans-serif"
-              cdkMenuItem
-              type="button"
-              style="font-family: 'Lucida Sans Unicode', sans-serif;"
-            >
-              Lucida Sans Unicode
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-sm text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (click)="setFontFamily($event)"
-              data-font-family="Tahoma, sans-serif"
-              cdkMenuItem
-              type="button"
-              style="font-family: Tahoma, sans-serif;"
-            >
-              Tahoma
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-sm text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (click)="setFontFamily($event)"
-              data-font-family="'Times New Roman', serif;"
-              cdkMenuItem
-              type="button"
-              style="font-family: 'Times New Roman', serif;"
-            >
-              Times New Roman
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-sm text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (click)="setFontFamily($event)"
-              data-font-family="'Trebuchet MS', sans-serif"
-              cdkMenuItem
-              type="button"
-              style="font-family: 'Trebuchet MS', sans-serif;"
-            >
-              Trebuchet MS
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-sm text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (click)="setFontFamily($event)"
-              data-font-family="Verdana, sans-serif"
-              cdkMenuItem
-              type="button"
-              style="font-family: Verdana, sans-serif;"
-            >
-              Verdana
-            </button>
-          </li>
-        </ul>
-      </div>
-    </ng-template>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScExtensionFontFamily, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-extension-font-family', imports: [CdkMenuTrigger, CdkMenu, CdkMenuItem, ScTooltip], template: `
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      [cdkMenuTriggerFor]="fontFamilyDropdown"
-      type="button"
-      scTooltip="Font Family"
-    >
-      <svg
-        class="size-5"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="m10.6 19 4.298-10.93a.11.11 0 0 1 .204 0L19.4 19m-8.8 0H9.5m1.1 0h1.65m7.15 0h-1.65m1.65 0h1.1m-7.7-3.985h4.4M3.021 16l1.567-3.985m0 0L7.32 5.07a.11.11 0 0 1 .205 0l2.503 6.945h-5.44Z"
-        />
-      </svg>
-      <span class="sr-only">Font family</span>
-    </button>
-
-    <ng-template #fontFamilyDropdown>
-      <div
-        class="z-10 w-48 rounded bg-white p-2 shadow dark:bg-gray-700"
-        id="fontFamilyDropdown"
-        cdkMenu
-      >
-        <ul class="space-y-1 text-sm font-medium" aria-labelledby="toggleFontFamilyButton">
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 font-sans text-sm text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (click)="setFontFamily($event)"
-              data-font-family="Poppins, ui-sans-serif"
-              cdkMenuItem
-              type="button"
-            >
-              Default (Poppins)
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-sm text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (click)="setFontFamily($event)"
-              data-font-family="Arial, sans-serif"
-              cdkMenuItem
-              type="button"
-              style="font-family: Arial, sans-serif;"
-            >
-              Arial
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-sm text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (click)="setFontFamily($event)"
-              data-font-family="'Courier New', monospace"
-              cdkMenuItem
-              type="button"
-              style="font-family: 'Courier New', monospace;"
-            >
-              Courier New
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-sm text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (click)="setFontFamily($event)"
-              data-font-family="Georgia, serif"
-              cdkMenuItem
-              type="button"
-              style="font-family: Georgia, serif;"
-            >
-              Georgia
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-sm text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (click)="setFontFamily($event)"
-              data-font-family="'Lucida Sans Unicode', sans-serif"
-              cdkMenuItem
-              type="button"
-              style="font-family: 'Lucida Sans Unicode', sans-serif;"
-            >
-              Lucida Sans Unicode
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-sm text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (click)="setFontFamily($event)"
-              data-font-family="Tahoma, sans-serif"
-              cdkMenuItem
-              type="button"
-              style="font-family: Tahoma, sans-serif;"
-            >
-              Tahoma
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-sm text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (click)="setFontFamily($event)"
-              data-font-family="'Times New Roman', serif;"
-              cdkMenuItem
-              type="button"
-              style="font-family: 'Times New Roman', serif;"
-            >
-              Times New Roman
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-sm text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (click)="setFontFamily($event)"
-              data-font-family="'Trebuchet MS', sans-serif"
-              cdkMenuItem
-              type="button"
-              style="font-family: 'Trebuchet MS', sans-serif;"
-            >
-              Trebuchet MS
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-sm text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (click)="setFontFamily($event)"
-              data-font-family="Verdana, sans-serif"
-              cdkMenuItem
-              type="button"
-              style="font-family: Verdana, sans-serif;"
-            >
-              Verdana
-            </button>
-          </li>
-        </ul>
-      </div>
-    </ng-template>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [] });
-
-class ScExtensionHeading {
-    parent = inject(ScEditor);
-    get editor() {
-        return this.parent.editor;
-    }
-    setHeadingLevel(level) {
-        this.editor.chain().focus().toggleHeading({ level: level }).run();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScExtensionHeading, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ScExtensionHeading, isStandalone: true, selector: "sc-extension-heading", ngImport: i0, template: `
-    <button
-      class="flex items-center justify-center rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-500 hover:bg-gray-200 hover:text-gray-900 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-50 dark:bg-gray-600 dark:text-gray-400 dark:hover:bg-gray-500 dark:hover:text-white dark:focus:ring-gray-600"
-      [cdkMenuTriggerFor]="typographyDropdown"
-      type="button"
-    >
-      Heading
-      <svg
-        class="-me-0.5 ms-1.5 size-3.5"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="m19 9-7 7-7-7"
-        />
-      </svg>
-    </button>
-
-    <!-- Heading Dropdown -->
-    <ng-template #typographyDropdown>
-      <div class="z-10 w-72 rounded bg-white p-2 shadow dark:bg-gray-700" cdkMenu>
-        <ul class="space-y-1 text-sm font-medium" aria-labelledby="typographyDropdownButton">
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-base text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (cdkMenuItemTriggered)="setHeadingLevel(1)"
-              data-heading-level="1"
-              cdkMenuItem
-              type="button"
-            >
-              Heading 1
-              <div class="space-x-1.5">
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  Cmd
-                </kbd>
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  Alt
-                </kbd>
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  1
-                </kbd>
-              </div>
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-base text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (cdkMenuItemTriggered)="setHeadingLevel(2)"
-              data-heading-level="2"
-              cdkMenuItem
-              type="button"
-            >
-              Heading 2
-              <div class="space-x-1.5">
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  Cmd
-                </kbd>
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  Alt
-                </kbd>
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  2
-                </kbd>
-              </div>
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-base text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (cdkMenuItemTriggered)="setHeadingLevel(3)"
-              data-heading-level="3"
-              cdkMenuItem
-              type="button"
-            >
-              Heading 3
-              <div class="space-x-1.5">
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  Cmd
-                </kbd>
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  Alt
-                </kbd>
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  3
-                </kbd>
-              </div>
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-base text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (cdkMenuItemTriggered)="setHeadingLevel(4)"
-              data-heading-level="4"
-              cdkMenuItem
-              type="button"
-            >
-              Heading 4
-              <div class="space-x-1.5">
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  Cmd
-                </kbd>
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  Alt
-                </kbd>
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  4
-                </kbd>
-              </div>
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-base text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (cdkMenuItemTriggered)="setHeadingLevel(5)"
-              data-heading-level="5"
-              cdkMenuItem
-              type="button"
-            >
-              Heading 5
-              <div class="space-x-1.5">
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  Cmd
-                </kbd>
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  Alt
-                </kbd>
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  5
-                </kbd>
-              </div>
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-base text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (cdkMenuItemTriggered)="setHeadingLevel(6)"
-              data-heading-level="6"
-              cdkMenuItem
-              type="button"
-            >
-              Heading 6
-              <div class="space-x-1.5">
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  Cmd
-                </kbd>
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  Alt
-                </kbd>
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  6
-                </kbd>
-              </div>
-            </button>
-          </li>
-        </ul>
-      </div>
-    </ng-template>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScExtensionHeading, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-extension-heading', imports: [CdkMenuTrigger, CdkMenu, CdkMenuItem], template: `
-    <button
-      class="flex items-center justify-center rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-500 hover:bg-gray-200 hover:text-gray-900 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-50 dark:bg-gray-600 dark:text-gray-400 dark:hover:bg-gray-500 dark:hover:text-white dark:focus:ring-gray-600"
-      [cdkMenuTriggerFor]="typographyDropdown"
-      type="button"
-    >
-      Heading
-      <svg
-        class="-me-0.5 ms-1.5 size-3.5"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="m19 9-7 7-7-7"
-        />
-      </svg>
-    </button>
-
-    <!-- Heading Dropdown -->
-    <ng-template #typographyDropdown>
-      <div class="z-10 w-72 rounded bg-white p-2 shadow dark:bg-gray-700" cdkMenu>
-        <ul class="space-y-1 text-sm font-medium" aria-labelledby="typographyDropdownButton">
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-base text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (cdkMenuItemTriggered)="setHeadingLevel(1)"
-              data-heading-level="1"
-              cdkMenuItem
-              type="button"
-            >
-              Heading 1
-              <div class="space-x-1.5">
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  Cmd
-                </kbd>
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  Alt
-                </kbd>
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  1
-                </kbd>
-              </div>
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-base text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (cdkMenuItemTriggered)="setHeadingLevel(2)"
-              data-heading-level="2"
-              cdkMenuItem
-              type="button"
-            >
-              Heading 2
-              <div class="space-x-1.5">
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  Cmd
-                </kbd>
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  Alt
-                </kbd>
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  2
-                </kbd>
-              </div>
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-base text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (cdkMenuItemTriggered)="setHeadingLevel(3)"
-              data-heading-level="3"
-              cdkMenuItem
-              type="button"
-            >
-              Heading 3
-              <div class="space-x-1.5">
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  Cmd
-                </kbd>
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  Alt
-                </kbd>
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  3
-                </kbd>
-              </div>
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-base text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (cdkMenuItemTriggered)="setHeadingLevel(4)"
-              data-heading-level="4"
-              cdkMenuItem
-              type="button"
-            >
-              Heading 4
-              <div class="space-x-1.5">
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  Cmd
-                </kbd>
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  Alt
-                </kbd>
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  4
-                </kbd>
-              </div>
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-base text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (cdkMenuItemTriggered)="setHeadingLevel(5)"
-              data-heading-level="5"
-              cdkMenuItem
-              type="button"
-            >
-              Heading 5
-              <div class="space-x-1.5">
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  Cmd
-                </kbd>
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  Alt
-                </kbd>
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  5
-                </kbd>
-              </div>
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-base text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (cdkMenuItemTriggered)="setHeadingLevel(6)"
-              data-heading-level="6"
-              cdkMenuItem
-              type="button"
-            >
-              Heading 6
-              <div class="space-x-1.5">
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  Cmd
-                </kbd>
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  Alt
-                </kbd>
-                <kbd
-                  class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400"
-                >
-                  6
-                </kbd>
-              </div>
-            </button>
-          </li>
-        </ul>
-      </div>
-    </ng-template>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
-
-class ScAddImageDialog {
-    dialogRef = inject((DialogRef));
-    imageForm = new FormGroup({
-        url: new FormControl('https://placehold.co/600x400', Validators.required),
-        alt: new FormControl(''),
-        title: new FormControl(''),
-    });
-    get url() {
-        return this.imageForm.get('url');
-    }
-    get alt() {
-        return this.imageForm.get('alt');
-    }
-    get title() {
-        return this.imageForm.get('title');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScAddImageDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ScAddImageDialog, isStandalone: true, selector: "sc-add-image-dialog", ngImport: i0, template: `
-    <div
-      class="z-50 h-[calc(100%-1rem)] max-h-full w-full items-center justify-center overflow-y-auto overflow-x-hidden md:inset-0"
-      tabindex="-1"
-      aria-hidden="true"
-    >
-      <div class="relative max-h-full w-full max-w-md p-4">
-        <!-- Modal content -->
-        <div class="relative rounded-lg bg-white shadow dark:bg-gray-700">
-          <!-- Modal header -->
-          <div
-            class="flex items-center justify-between rounded-t border-b p-4 md:p-5 dark:border-gray-600"
-          >
-            <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
-              Insert advanced image
-            </h3>
-            <button
-              class="end-2.5 ms-auto inline-flex size-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
-              (click)="dialogRef.close()"
-              type="button"
-            >
-              <svg
-                class="size-3"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 14 14"
-              >
-                <path
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
-                />
-              </svg>
-              <span class="sr-only">Close modal</span>
-            </button>
-          </div>
-          <!-- Modal body -->
-          <div class="p-4 md:p-5">
-            <form class="space-y-4" [formGroup]="imageForm">
-              <div>
-                <label
-                  class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
-                  for="image-url"
-                >
-                  Image URL
-                </label>
-                <input
-                  class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:text-white dark:placeholder:text-gray-400"
-                  id="image-url"
-                  type="url"
-                  name="image-url"
-                  formControlName="url"
-                />
-              </div>
-              <div>
-                <label
-                  class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
-                  for="alt"
-                >
-                  Image alt
-                </label>
-                <input
-                  class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:text-white dark:placeholder:text-gray-400"
-                  id="alt"
-                  type="text"
-                  formControlName="alt"
-                  name="alt"
-                />
-              </div>
-              <div>
-                <label
-                  class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
-                  for="title"
-                >
-                  Image title
-                </label>
-                <input
-                  class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:text-white dark:placeholder:text-gray-400"
-                  id="title"
-                  type="text"
-                  formControlName="title"
-                  name="title"
-                />
-              </div>
-              <button
-                class="w-full rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-                (click)="
-                  dialogRef.close({
-                    url: url?.value,
-                    alt: alt?.value,
-                    title: title?.value,
-                  })
-                "
-              >
-                Add image
-              </button>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScAddImageDialog, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-add-image-dialog', imports: [ReactiveFormsModule], template: `
-    <div
-      class="z-50 h-[calc(100%-1rem)] max-h-full w-full items-center justify-center overflow-y-auto overflow-x-hidden md:inset-0"
-      tabindex="-1"
-      aria-hidden="true"
-    >
-      <div class="relative max-h-full w-full max-w-md p-4">
-        <!-- Modal content -->
-        <div class="relative rounded-lg bg-white shadow dark:bg-gray-700">
-          <!-- Modal header -->
-          <div
-            class="flex items-center justify-between rounded-t border-b p-4 md:p-5 dark:border-gray-600"
-          >
-            <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
-              Insert advanced image
-            </h3>
-            <button
-              class="end-2.5 ms-auto inline-flex size-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
-              (click)="dialogRef.close()"
-              type="button"
-            >
-              <svg
-                class="size-3"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 14 14"
-              >
-                <path
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
-                />
-              </svg>
-              <span class="sr-only">Close modal</span>
-            </button>
-          </div>
-          <!-- Modal body -->
-          <div class="p-4 md:p-5">
-            <form class="space-y-4" [formGroup]="imageForm">
-              <div>
-                <label
-                  class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
-                  for="image-url"
-                >
-                  Image URL
-                </label>
-                <input
-                  class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:text-white dark:placeholder:text-gray-400"
-                  id="image-url"
-                  type="url"
-                  name="image-url"
-                  formControlName="url"
-                />
-              </div>
-              <div>
-                <label
-                  class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
-                  for="alt"
-                >
-                  Image alt
-                </label>
-                <input
-                  class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:text-white dark:placeholder:text-gray-400"
-                  id="alt"
-                  type="text"
-                  formControlName="alt"
-                  name="alt"
-                />
-              </div>
-              <div>
-                <label
-                  class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
-                  for="title"
-                >
-                  Image title
-                </label>
-                <input
-                  class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:text-white dark:placeholder:text-gray-400"
-                  id="title"
-                  type="text"
-                  formControlName="title"
-                  name="title"
-                />
-              </div>
-              <button
-                class="w-full rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-                (click)="
-                  dialogRef.close({
-                    url: url?.value,
-                    alt: alt?.value,
-                    title: title?.value,
-                  })
-                "
-              >
-                Add image
-              </button>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
-
-class ScExtensionImage {
-    ariaLabel = 'Add image';
-    parent = inject(ScEditor);
-    dialog = inject(Dialog);
-    extensions = inject(ScExtensions);
-    constructor() {
-        this.extensions.image.set(true);
-    }
-    get editor() {
-        return this.parent.editor;
-    }
-    setImage(image) {
-        if (image?.url) {
-            this.editor
-                .chain()
-                .focus()
-                .setImage({
-                src: image.url,
-                alt: image.alt ? image.alt : '',
-                title: image.title ? image.title : '',
-            })
-                .run();
-        }
-    }
-    openDialog() {
-        const dialogRef = this.dialog.open(ScAddImageDialog, {
-            minWidth: '600px',
-        });
-        dialogRef.closed.subscribe((result) => {
-            this.setImage(result);
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScExtensionImage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ScExtensionImage, isStandalone: true, selector: "sc-extension-image", ngImport: i0, template: `
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="openDialog()"
-      type="button"
-      scTooltip="Add image"
-    >
-      <svg
-        class="size-5"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M13 10a1 1 0 0 1 1-1h.01a1 1 0 1 1 0 2H14a1 1 0 0 1-1-1Z"
-          clip-rule="evenodd"
-        />
-        <path
-          fill-rule="evenodd"
-          d="M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12c0 .556-.227 1.06-.593 1.422A.999.999 0 0 1 20.5 20H4a2.002 2.002 0 0 1-2-2V6Zm6.892 12 3.833-5.356-3.99-4.322a1 1 0 0 0-1.549.097L4 12.879V6h16v9.95l-3.257-3.619a1 1 0 0 0-1.557.088L11.2 18H8.892Z"
-          clip-rule="evenodd"
-        />
-      </svg>
-      <span class="sr-only">Add image</span>
-    </button>
-
-    <button
-      [scPopoverTriggerFor]="popover"
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      type="button"
-      sc-toggle
-      variant="outline"
-    >
-      <svg si-image-plus-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-
-    <ng-template #popover>
-      <div class="grid gap-4">
-        <div class="space-y-2">
-          <h4 class="font-medium leading-none">Dimensions</h4>
-          <p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
-        </div>
-        <div class="grid gap-2">
-          <div class="grid grid-cols-3 items-center gap-4">
-            <label sc-label for="width">Url</label>
-            <input class="col-span-2 h-8" id="width" sc-input defaultValue="100%" />
-          </div>
-          <div class="grid grid-cols-3 items-center gap-4">
-            <label sc-label for="maxWidth">Alt</label>
-            <input class="col-span-2 h-8" id="maxWidth" sc-input defaultValue="300px" />
-          </div>
-          <div class="grid grid-cols-3 items-center gap-4">
-            <label sc-label for="height">Title</label>
-            <input class="col-span-2 h-8" id="height" sc-input defaultValue="25px" />
-          </div>
-          <div class="grid grid-cols-3 items-center gap-4">
-            <button sc-button variant="outline" type="button">Cancel</button>
-            <button sc-button type="button">Done</button>
-          </div>
-        </div>
-      </div>
-    </ng-template>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: ScButton, selector: "button[sc-button]" }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]" }, { kind: "component", type: ScLabel, selector: "label[sc-label]", inputs: ["class", "for"] }, { kind: "component", type: ScInput, selector: "input[sc-input]", inputs: ["class", "value", "id"], outputs: ["valueChange"] }, { kind: "directive", type: ScPopoverTriggerFor, selector: "[scPopoverTriggerFor]", inputs: ["scPopoverTriggerFor"] }, { kind: "component", type: SiImagePlusIcon, selector: "svg[si-image-plus-icon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScExtensionImage, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-extension-image', imports: [
-                        ScTooltip,
-                        DialogModule,
-                        ScButton,
-                        ScToggle,
-                        ScLabel,
-                        ScInput,
-                        ScPopoverTriggerFor,
-                        SiImagePlusIcon,
-                    ], template: `
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="openDialog()"
-      type="button"
-      scTooltip="Add image"
-    >
-      <svg
-        class="size-5"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M13 10a1 1 0 0 1 1-1h.01a1 1 0 1 1 0 2H14a1 1 0 0 1-1-1Z"
-          clip-rule="evenodd"
-        />
-        <path
-          fill-rule="evenodd"
-          d="M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12c0 .556-.227 1.06-.593 1.422A.999.999 0 0 1 20.5 20H4a2.002 2.002 0 0 1-2-2V6Zm6.892 12 3.833-5.356-3.99-4.322a1 1 0 0 0-1.549.097L4 12.879V6h16v9.95l-3.257-3.619a1 1 0 0 0-1.557.088L11.2 18H8.892Z"
-          clip-rule="evenodd"
-        />
-      </svg>
-      <span class="sr-only">Add image</span>
-    </button>
-
-    <button
-      [scPopoverTriggerFor]="popover"
-      [attr.aria-label]="ariaLabel"
-      [scTooltip]="ariaLabel"
-      type="button"
-      sc-toggle
-      variant="outline"
-    >
-      <svg si-image-plus-icon></svg>
-      <span class="sr-only">{{ ariaLabel }}</span>
-    </button>
-
-    <ng-template #popover>
-      <div class="grid gap-4">
-        <div class="space-y-2">
-          <h4 class="font-medium leading-none">Dimensions</h4>
-          <p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
-        </div>
-        <div class="grid gap-2">
-          <div class="grid grid-cols-3 items-center gap-4">
-            <label sc-label for="width">Url</label>
-            <input class="col-span-2 h-8" id="width" sc-input defaultValue="100%" />
-          </div>
-          <div class="grid grid-cols-3 items-center gap-4">
-            <label sc-label for="maxWidth">Alt</label>
-            <input class="col-span-2 h-8" id="maxWidth" sc-input defaultValue="300px" />
-          </div>
-          <div class="grid grid-cols-3 items-center gap-4">
-            <label sc-label for="height">Title</label>
-            <input class="col-span-2 h-8" id="height" sc-input defaultValue="25px" />
-          </div>
-          <div class="grid grid-cols-3 items-center gap-4">
-            <button sc-button variant="outline" type="button">Cancel</button>
-            <button sc-button type="button">Done</button>
-          </div>
-        </div>
-      </div>
-    </ng-template>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [] });
-
-class ScAddLinkDialog {
-    dialogRef = inject((DialogRef));
-    linkForm = new FormGroup({
-        url: new FormControl('https://flowbite.com', Validators.required),
-    });
-    get url() {
-        return this.linkForm.get('url');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScAddLinkDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ScAddLinkDialog, isStandalone: true, selector: "sc-add-link-dialog", ngImport: i0, template: `
-    <div
-      class="z-50 h-[calc(100%-1rem)] max-h-full w-full items-center justify-center overflow-y-auto overflow-x-hidden md:inset-0"
-      tabindex="-1"
-    >
-      <div class="relative max-h-full w-full max-w-md p-4">
-        <!-- Modal content -->
-        <div class="relative rounded-lg bg-white shadow dark:bg-gray-700">
-          <!-- Modal header -->
-          <div
-            class="flex items-center justify-between rounded-t border-b p-4 md:p-5 dark:border-gray-600"
-          >
-            <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Insert Url</h3>
-            <button
-              class="end-2.5 ms-auto inline-flex size-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
-              (click)="dialogRef.close()"
-              type="button"
-            >
-              <svg
-                class="size-3"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 14 14"
-              >
-                <path
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
-                />
-              </svg>
-              <span class="sr-only">Close modal</span>
-            </button>
-          </div>
-          <!-- Modal body -->
-          <div class="p-4 md:p-5">
-            <form class="space-y-4" [formGroup]="linkForm">
-              <div>
-                <label
-                  class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
-                  for="url"
-                >
-                  Url
-                </label>
-                <input
-                  class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:text-white dark:placeholder:text-gray-400"
-                  id="url"
-                  type="url"
-                  name="url"
-                  formControlName="url"
-                />
-              </div>
-
-              <button
-                class="w-full rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-                (click)="
-                  dialogRef.close({
-                    url: url?.value,
-                  })
-                "
-              >
-                Add link
-              </button>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScAddLinkDialog, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-add-link-dialog', imports: [ReactiveFormsModule], template: `
-    <div
-      class="z-50 h-[calc(100%-1rem)] max-h-full w-full items-center justify-center overflow-y-auto overflow-x-hidden md:inset-0"
-      tabindex="-1"
-    >
-      <div class="relative max-h-full w-full max-w-md p-4">
-        <!-- Modal content -->
-        <div class="relative rounded-lg bg-white shadow dark:bg-gray-700">
-          <!-- Modal header -->
-          <div
-            class="flex items-center justify-between rounded-t border-b p-4 md:p-5 dark:border-gray-600"
-          >
-            <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Insert Url</h3>
-            <button
-              class="end-2.5 ms-auto inline-flex size-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
-              (click)="dialogRef.close()"
-              type="button"
-            >
-              <svg
-                class="size-3"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 14 14"
-              >
-                <path
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
-                />
-              </svg>
-              <span class="sr-only">Close modal</span>
-            </button>
-          </div>
-          <!-- Modal body -->
-          <div class="p-4 md:p-5">
-            <form class="space-y-4" [formGroup]="linkForm">
-              <div>
-                <label
-                  class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
-                  for="url"
-                >
-                  Url
-                </label>
-                <input
-                  class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:text-white dark:placeholder:text-gray-400"
-                  id="url"
-                  type="url"
-                  name="url"
-                  formControlName="url"
-                />
-              </div>
-
-              <button
-                class="w-full rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-                (click)="
-                  dialogRef.close({
-                    url: url?.value,
-                  })
-                "
-              >
-                Add link
-              </button>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
-
-class ScExtensionLink {
-    parent = inject(ScEditor);
-    dialog = inject(Dialog);
-    extensions = inject(ScExtensions);
-    constructor() {
-        this.extensions.setLink.set(true);
-    }
-    get editor() {
-        return this.parent.editor;
-    }
-    openDialog() {
-        const dialogRef = this.dialog.open(ScAddLinkDialog, {
-            minWidth: '600px',
-        });
-        dialogRef.closed.subscribe((result) => {
-            this.editor
-                .chain()
-                .focus()
-                .toggleLink({ href: result?.url ?? '' })
-                .run();
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScExtensionLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ScExtensionLink, isStandalone: true, selector: "sc-extension-link", ngImport: i0, template: `
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="openDialog()"
-      type="button"
-      scTooltip="Add link"
-    >
-      <svg
-        class="size-5"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M13.213 9.787a3.391 3.391 0 0 0-4.795 0l-3.425 3.426a3.39 3.39 0 0 0 4.795 4.794l.321-.304m-.321-4.49a3.39 3.39 0 0 0 4.795 0l3.424-3.426a3.39 3.39 0 0 0-4.794-4.795l-1.028.961"
-        />
-      </svg>
-      <span class="sr-only">Link</span>
-    </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScExtensionLink, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-extension-link', imports: [ScTooltip], template: `
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="openDialog()"
-      type="button"
-      scTooltip="Add link"
-    >
-      <svg
-        class="size-5"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M13.213 9.787a3.391 3.391 0 0 0-4.795 0l-3.425 3.426a3.39 3.39 0 0 0 4.795 4.794l.321-.304m-.321-4.49a3.39 3.39 0 0 0 4.795 0l3.424-3.426a3.39 3.39 0 0 0-4.794-4.795l-1.028.961"
-        />
-      </svg>
-      <span class="sr-only">Link</span>
-    </button>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [] });
-
-class ScAddCellAttributeDialog {
-    dialogRef = inject((DialogRef));
-    attributeForm = new FormGroup({
-        name: new FormControl('backgroundColor', Validators.required),
-        value: new FormControl('#E1EFFE;'),
-    });
-    get name() {
-        return this.attributeForm.get('name');
-    }
-    get value() {
-        return this.attributeForm.get('value');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScAddCellAttributeDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ScAddCellAttributeDialog, isStandalone: true, selector: "sc-add-cell-attribute-dialog", ngImport: i0, template: `
-    <div
-      class="fixed inset-x-0 top-0 z-50 h-[calc(100%-1rem)] max-h-full w-full items-center justify-center overflow-y-auto overflow-x-hidden md:inset-0"
-      id="cell-attribute-modal"
-      tabindex="-1"
-    >
-      <div class="relative max-h-full w-full max-w-md p-4">
-        <!-- Modal content -->
-        <div class="relative rounded-lg bg-white shadow dark:bg-gray-700">
-          <!-- Modal header -->
-          <div
-            class="flex items-center justify-between rounded-t border-b p-4 md:p-5 dark:border-gray-600"
-          >
-            <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Add cell attribute</h3>
-            <button
-              class="end-2.5 ms-auto inline-flex size-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
-              (click)="dialogRef.close()"
-              type="button"
-              data-modal-hide="cell-attribute-modal"
-            >
-              <svg
-                class="size-3"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 14 14"
-              >
-                <path
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
-                />
-              </svg>
-              <span class="sr-only">Close modal</span>
-            </button>
-          </div>
-          <!-- Modal body -->
-          <div class="p-4 md:p-5">
-            <form class="space-y-4" [formGroup]="attributeForm">
-              <div>
-                <label
-                  class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
-                  for="attribute-name"
-                >
-                  Attribute name
-                </label>
-                <input
-                  class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:text-white dark:placeholder:text-gray-400"
-                  id="attribute-name"
-                  type="text"
-                  formControlName="name"
-                  placeholder="eg. backgroundColor"
-                />
-              </div>
-              <div>
-                <label
-                  class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
-                  for="attribute-value"
-                >
-                  Attribute value
-                </label>
-                <input
-                  class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:text-white dark:placeholder:text-gray-400"
-                  id="attribute-value"
-                  type="text"
-                  formControlName="value"
-                  placeholder="#E1EFFE;"
-                />
-              </div>
-              <button
-                class="w-full rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-                (click)="
-                  dialogRef.close({
-                    name: name?.value,
-                    value: value?.value,
-                  })
-                "
-                type="submit"
-              >
-                Set attribute
-              </button>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScAddCellAttributeDialog, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-add-cell-attribute-dialog', imports: [ReactiveFormsModule], template: `
-    <div
-      class="fixed inset-x-0 top-0 z-50 h-[calc(100%-1rem)] max-h-full w-full items-center justify-center overflow-y-auto overflow-x-hidden md:inset-0"
-      id="cell-attribute-modal"
-      tabindex="-1"
-    >
-      <div class="relative max-h-full w-full max-w-md p-4">
-        <!-- Modal content -->
-        <div class="relative rounded-lg bg-white shadow dark:bg-gray-700">
-          <!-- Modal header -->
-          <div
-            class="flex items-center justify-between rounded-t border-b p-4 md:p-5 dark:border-gray-600"
-          >
-            <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Add cell attribute</h3>
-            <button
-              class="end-2.5 ms-auto inline-flex size-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
-              (click)="dialogRef.close()"
-              type="button"
-              data-modal-hide="cell-attribute-modal"
-            >
-              <svg
-                class="size-3"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 14 14"
-              >
-                <path
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
-                />
-              </svg>
-              <span class="sr-only">Close modal</span>
-            </button>
-          </div>
-          <!-- Modal body -->
-          <div class="p-4 md:p-5">
-            <form class="space-y-4" [formGroup]="attributeForm">
-              <div>
-                <label
-                  class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
-                  for="attribute-name"
-                >
-                  Attribute name
-                </label>
-                <input
-                  class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:text-white dark:placeholder:text-gray-400"
-                  id="attribute-name"
-                  type="text"
-                  formControlName="name"
-                  placeholder="eg. backgroundColor"
-                />
-              </div>
-              <div>
-                <label
-                  class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
-                  for="attribute-value"
-                >
-                  Attribute value
-                </label>
-                <input
-                  class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:text-white dark:placeholder:text-gray-400"
-                  id="attribute-value"
-                  type="text"
-                  formControlName="value"
-                  placeholder="#E1EFFE;"
-                />
-              </div>
-              <button
-                class="w-full rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-                (click)="
-                  dialogRef.close({
-                    name: name?.value,
-                    value: value?.value,
-                  })
-                "
-                type="submit"
-              >
-                Set attribute
-              </button>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
-
-class ScExtensionTable {
-    parent = inject(ScEditor);
-    dialog = inject(Dialog);
-    extensions = inject(ScExtensions);
-    constructor() {
-        this.extensions.table.set(true);
-    }
-    get editor() {
-        return this.parent.editor;
-    }
-    insertTable() {
-        this.editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
-    }
-    deleteTable() {
-        this.editor.chain().focus().deleteTable().run();
-    }
-    addColumnBefore() {
-        this.editor.chain().focus().addColumnBefore().run();
-    }
-    addColumnAfter() {
-        this.editor.chain().focus().addColumnAfter().run();
-    }
-    deleteColumn() {
-        this.editor.chain().focus().deleteColumn().run();
-    }
-    addRowBefore() {
-        this.editor.chain().focus().addRowBefore().run();
-    }
-    addRowAfter() {
-        this.editor.chain().focus().addRowAfter().run();
-    }
-    deleteRow() {
-        this.editor.chain().focus().deleteRow().run();
-    }
-    mergeCells() {
-        this.editor.chain().focus().mergeCells().run();
-    }
-    splitCell() {
-        this.editor.chain().focus().splitCell().run();
-    }
-    mergeOrSplit() {
-        this.editor.chain().focus().mergeOrSplit().run();
-    }
-    toggleHeaderColumn() {
-        this.editor.chain().focus().toggleHeaderColumn().run();
-    }
-    toggleHeaderRow() {
-        this.editor.chain().focus().toggleHeaderRow().run();
-    }
-    toggleHeaderCell() {
-        this.editor.chain().focus().toggleHeaderCell().run();
-    }
-    fixTables() {
-        this.editor.commands.fixTables();
-    }
-    goToPreviousCell() {
-        this.editor.chain().focus().goToPreviousCell().run();
-    }
-    goToNextCell() {
-        this.editor.chain().focus().goToNextCell().run();
-    }
-    openDialog() {
-        const dialogRef = this.dialog.open(ScAddCellAttributeDialog, {
-            minWidth: '600px',
-        });
-        dialogRef.closed.subscribe((result) => {
-            this.editor.commands.setCellAttribute(result?.name ?? '', result?.value ?? '');
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScExtensionTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ScExtensionTable, isStandalone: true, selector: "sc-extension-table", ngImport: i0, template: `
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="insertTable()"
-      type="button"
-      scTooltip="Add table"
-    >
-      <svg
-        class="size-5"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M3 15v3c0 .5523.44772 1 1 1h10.5M3 15v-4m0 4h11M3 11V6c0-.55228.44772-1 1-1h16c.5523 0 1 .44772 1 1v5M3 11h18m0 0v1M8 11v8m4-8v8m4-8v2m1 4h2m0 0h2m-2 0v2m0-2v-2"
-        />
-      </svg>
-      <span class="sr-only">Add table</span>
-    </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="deleteTable()"
-      type="button"
-      scTooltip="Delete table"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M3 15.5v3c0 .5523.44772 1 1 1h10.5M3 15.5v-4m0 4h11m-11-4v-5c0-.55228.44772-1 1-1h16c.5523 0 1 .44772 1 1v5m-18 0h18m0 0v1m-13-1v8m4-8v8m4-8v2m1.8956 5.9528 1.5047-1.5047m0 0 1.5048-1.5048m-1.5048 1.5048 1.4605 1.4604m-1.4605-1.4604-1.4604-1.4605"
-        />
-      </svg>
-      <span class="sr-only">Delete table</span>
-    </button>
-
-    <sc-separator class="h5" orientation="vertical" />
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="addColumnBefore()"
-      type="button"
-      data-tooltip-target="tooltip-add-column-before"
-      scTooltip="Add column before"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M15 5.5v14m-8-7h2m0 0h2m-2 0v2m0-2v-2m12 1h-6m6 4h-6m-11 4h16c.5523 0 1-.4477 1-1v-12c0-.55228-.4477-1-1-1H4c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1Z"
-        />
-      </svg>
-      <span class="sr-only">Add column before</span>
-    </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="addColumnAfter()"
-      type="button"
-      data-tooltip-target="tooltip-add-column-after"
-      scTooltip="Add column after"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M9 5.5v14m8-7h-2m0 0h-2m2 0v2m0-2v-2m-12 1h6m-6 4h6m11 4H4c-.55228 0-1-.4477-1-1v-12c0-.55228.44772-1 1-1h16c.5523 0 1 .44772 1 1v12c0 .5523-.4477 1-1 1Z"
-        />
-      </svg>
-      <span class="sr-only">Add column after</span>
-    </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="deleteColumn()"
-      type="button"
-      data-tooltip-target="tooltip-remove-column"
-      scTooltip="Remove column"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M9 5.5v14m-6-8h6m-6 4h6m4.5061-1.4939L15.0123 12.5m0 0 1.5061-1.5061M15.0123 12.5l1.5061 1.5061M15.0123 12.5l-1.5062-1.5061M20 19.5H4c-.55228 0-1-.4477-1-1v-12c0-.55228.44772-1 1-1h16c.5523 0 1 .44772 1 1v12c0 .5523-.4477 1-1 1Z"
-        />
-      </svg>
-      <span class="sr-only">Remove column</span>
-    </button>
-
-    <sc-separator class="h5" orientation="vertical" />
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="addRowBefore()"
-      type="button"
-      data-tooltip-target="tooltip-add-row-before"
-      scTooltip="Add row before"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M3 15.5v3c0 .5523.44772 1 1 1h16c.5523 0 1-.4477 1-1v-3m-18 0v-9c0-.55228.44772-1 1-1h16c.5523 0 1 .44772 1 1v9m-18 0h18m-13 0v4m4-4v4m4-4v4m-6-9h2m0 0h2m-2 0v2m0-2v-2"
-        />
-      </svg>
-      <span class="sr-only">Add row before</span>
-    </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="addRowAfter()"
-      type="button"
-      data-tooltip-target="tooltip-add-row-after"
-      scTooltip="Add row after"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M3 9.5v-3c0-.55228.44772-1 1-1h16c.5523 0 1 .44771 1 1v3m-18 0v9c0 .5523.44772 1 1 1h16c.5523 0 1-.4477 1-1v-9m-18 0h18m-13 0v-4m4 4v-4m4 4v-4m-6 9h2m0 0h2m-2 0v-2m0 2v2"
-        />
-      </svg>
-      <span class="sr-only">Add row after</span>
-    </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="deleteRow()"
-      type="button"
-      data-tooltip-target="tooltip-remove-row"
-      scTooltip="Remove row"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M3 15.5v3c0 .5523.44772 1 1 1h16c.5523 0 1-.4477 1-1v-3m-18 0v-9c0-.55228.44772-1 1-1h16c.5523 0 1 .44772 1 1v9m-18 0h18m-13 0v4m4-4v4m4-4v4m-5.5061-7.4939L12 10.5m0 0 1.5061-1.50614M12 10.5l1.5061 1.5061M12 10.5l-1.5061-1.50614"
-        />
-      </svg>
-      <span class="sr-only">Remove row</span>
-    </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="mergeCells()"
-      type="button"
-      data-tooltip-target="tooltip-merge-cells"
-      scTooltip="Merge cells"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M10 18.5v2H4v-16h6v2m4 12v2h6v-16h-6v2m-6.49543 8.4954L10 12.5m0 0-2.49543-2.4954M10 12.5H4.05191m12.50199 2.5539L14 12.5m0 0 2.5539-2.55392M14 12.5h5.8319"
-        />
-      </svg>
-      <span class="sr-only">Merge cells</span>
-    </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="splitCell()"
-      type="button"
-      data-tooltip-target="tooltip-split-cells"
-      scTooltip="Split cells"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M4 18.5v2h6v-16H4v2m16 12v2h-6v-16h6v2M6.49545 14.9954 4.00003 12.5m0 0 2.49542-2.4954M4.00003 12.5h5.94809m7.49798 2.5539L20 12.5m0 0-2.5539-2.55392M20 12.5h-5.8319"
-        />
-      </svg>
-      <span class="sr-only">Split cells</span>
-    </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="mergeOrSplit()"
-      type="button"
-      data-tooltip-target="tooltip-merge-or-split"
-      scTooltip="Merge or split"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M18.5045 14.9954 21 12.5m0 0-2.4955-2.4954M21 12.5h-5.9481m-9.49798 2.5539L3 12.5m0 0 2.55392-2.55392M3 12.5h5.83192m.16807 7v-14H15v14H8.99999Z"
-        />
-      </svg>
-      <span class="sr-only">Merge or split</span>
-    </button>
-
-    <sc-separator class="h5" orientation="vertical" />
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="toggleHeaderColumn()"
-      type="button"
-      data-tooltip-target="tooltip-toggle-header-column"
-      scTooltip="Toggle header column"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M15 5.5v14m6-8h-6m6 4h-6m-9-3h1.99093M4 19.5h16c.5523 0 1-.4477 1-1v-12c0-.55228-.4477-1-1-1H4c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1Zm8-7c0 1.1046-.8954 2-2 2-1.10457 0-2-.8954-2-2s.89543-2 2-2c1.1046 0 2 .8954 2 2Z"
-        />
-      </svg>
-      <span class="sr-only">Toggle header column</span>
-    </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="toggleHeaderRow()"
-      type="button"
-      data-tooltip-target="tooltip-toggle-header-row"
-      scTooltip="Toggle header row"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M3 15.5v3c0 .5523.44772 1 1 1h16c.5523 0 1-.4477 1-1v-3m-18 0v-9c0-.55228.44772-1 1-1h16c.5523 0 1 .44772 1 1v9m-18 0h18m-13 0v4m4-4v4m4-4v4m-7-9h1.9909M15 10.5c0 1.1046-.8954 2-2 2s-2-.8954-2-2c0-1.10457.8954-2 2-2s2 .89543 2 2Z"
-        />
-      </svg>
-      <span class="sr-only">Toggle header row</span>
-    </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="toggleHeaderCell()"
-      type="button"
-      data-tooltip-target="tooltip-toggle-header-cell"
-      scTooltip="Toggle header cell"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M3 15.5v3c0 .5523.44772 1 1 1h16c.5523 0 1-.4477 1-1v-3m-18 0v-9c0-.55228.44772-1 1-1h16c.5523 0 1 .44772 1 1v9m-18 0h18m-13 0v4m4-4v4m4-4v4m-7-9h1.9909M15 10.5c0 1.1046-.8954 2-2 2s-2-.8954-2-2c0-1.10457.8954-2 2-2s2 .89543 2 2Z"
-        />
-      </svg>
-      <span class="sr-only">Toggle header cell</span>
-    </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="openDialog()"
-      type="button"
-      scTooltip="Add cell attribute"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M3 15.5v3c0 .5523.44772 1 1 1h8v-8m-9 4v-4m0 4h9m-9-4v-5c0-.55228.44772-1 1-1h16c.5523 0 1 .44772 1 1v4m-18 1h11m6.25 5c0 1.2426-1.0073 2.25-2.25 2.25m2.25-2.25c0-1.2426-1.0073-2.25-2.25-2.25m2.25 2.25H21m-3 2.25c-1.2426 0-2.25-1.0074-2.25-2.25M18 18.75v.75m-2.25-3c0-1.2426 1.0074-2.25 2.25-2.25m-2.25 2.25H15m3-2.25v-.75m-1.591 1.409-.5303-.5303m4.2426 4.2426-.5303-.5303m-3.182 0-.5303.5303m4.2426-4.2426-.5303.5303"
-        />
-      </svg>
-      <span class="sr-only">Add cell attribute</span>
-    </button>
-
-    <sc-separator class="h5" orientation="vertical" />
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="fixTables()"
-      type="button"
-      data-tooltip-target="tooltip-fix-tables"
-      scTooltip="Fix tables"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M3 15.5v3c0 .5523.44772 1 1 1h4v-4m-5 0v-4m0 4h5m-5-4v-5c0-.55228.44772-1 1-1h16c.5523 0 1 .44772 1 1v1.98935M3 11.5h5v4m9.4708 4.1718-.8696-1.4388-2.8164-.235-2.573-4.2573 1.4873-2.8362 1.4441 2.3893c.3865.6396 1.2183.8447 1.8579.4582.6396-.3866.8447-1.2184.4582-1.858l-1.444-2.38925h3.1353l2.6101 4.27715-1.0713 2.5847.8695 1.4388"
-        />
-      </svg>
-      <span class="sr-only">Fix tables</span>
-    </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="goToPreviousCell()"
-      type="button"
-      scTooltip="Previous cell"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M3 15.5v3c0 .5523.44772 1 1 1h9.5M3 15.5v-4m0 4h9m-9-4v-5c0-.55228.44772-1 1-1h16c.5523 0 1 .44772 1 1v5H3Zm5 0v8m4-8v8m5.9001-1.0999L16 16.5m0 0 1.9001-1.9001M16 16.5h5"
-        />
-      </svg>
-      <span class="sr-only">Previous cell</span>
-    </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="goToNextCell()"
-      type="button"
-      data-tooltip-target="tooltip-next-cell"
-      scTooltip="Next cell"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M3 15.5v3c0 .5523.44772 1 1 1h9.5M3 15.5v-4m0 4h9m-9-4v-5c0-.55228.44772-1 1-1h16c.5523 0 1 .44772 1 1v5H3Zm5 0v8m4-8v8m7.0999-1.0999L21 16.5m0 0-1.9001-1.9001M21 16.5h-5"
-        />
-      </svg>
-      <span class="sr-only">Next cell</span>
-    </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScSeparator, selector: "sc-separator", inputs: ["orientation", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScExtensionTable, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-extension-table', imports: [ScTooltip, ScSeparator], template: `
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="insertTable()"
-      type="button"
-      scTooltip="Add table"
-    >
-      <svg
-        class="size-5"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M3 15v3c0 .5523.44772 1 1 1h10.5M3 15v-4m0 4h11M3 11V6c0-.55228.44772-1 1-1h16c.5523 0 1 .44772 1 1v5M3 11h18m0 0v1M8 11v8m4-8v8m4-8v2m1 4h2m0 0h2m-2 0v2m0-2v-2"
-        />
-      </svg>
-      <span class="sr-only">Add table</span>
-    </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="deleteTable()"
-      type="button"
-      scTooltip="Delete table"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M3 15.5v3c0 .5523.44772 1 1 1h10.5M3 15.5v-4m0 4h11m-11-4v-5c0-.55228.44772-1 1-1h16c.5523 0 1 .44772 1 1v5m-18 0h18m0 0v1m-13-1v8m4-8v8m4-8v2m1.8956 5.9528 1.5047-1.5047m0 0 1.5048-1.5048m-1.5048 1.5048 1.4605 1.4604m-1.4605-1.4604-1.4604-1.4605"
-        />
-      </svg>
-      <span class="sr-only">Delete table</span>
-    </button>
-
-    <sc-separator class="h5" orientation="vertical" />
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="addColumnBefore()"
-      type="button"
-      data-tooltip-target="tooltip-add-column-before"
-      scTooltip="Add column before"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M15 5.5v14m-8-7h2m0 0h2m-2 0v2m0-2v-2m12 1h-6m6 4h-6m-11 4h16c.5523 0 1-.4477 1-1v-12c0-.55228-.4477-1-1-1H4c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1Z"
-        />
-      </svg>
-      <span class="sr-only">Add column before</span>
-    </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="addColumnAfter()"
-      type="button"
-      data-tooltip-target="tooltip-add-column-after"
-      scTooltip="Add column after"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M9 5.5v14m8-7h-2m0 0h-2m2 0v2m0-2v-2m-12 1h6m-6 4h6m11 4H4c-.55228 0-1-.4477-1-1v-12c0-.55228.44772-1 1-1h16c.5523 0 1 .44772 1 1v12c0 .5523-.4477 1-1 1Z"
-        />
-      </svg>
-      <span class="sr-only">Add column after</span>
-    </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="deleteColumn()"
-      type="button"
-      data-tooltip-target="tooltip-remove-column"
-      scTooltip="Remove column"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M9 5.5v14m-6-8h6m-6 4h6m4.5061-1.4939L15.0123 12.5m0 0 1.5061-1.5061M15.0123 12.5l1.5061 1.5061M15.0123 12.5l-1.5062-1.5061M20 19.5H4c-.55228 0-1-.4477-1-1v-12c0-.55228.44772-1 1-1h16c.5523 0 1 .44772 1 1v12c0 .5523-.4477 1-1 1Z"
-        />
-      </svg>
-      <span class="sr-only">Remove column</span>
-    </button>
-
-    <sc-separator class="h5" orientation="vertical" />
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="addRowBefore()"
-      type="button"
-      data-tooltip-target="tooltip-add-row-before"
-      scTooltip="Add row before"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M3 15.5v3c0 .5523.44772 1 1 1h16c.5523 0 1-.4477 1-1v-3m-18 0v-9c0-.55228.44772-1 1-1h16c.5523 0 1 .44772 1 1v9m-18 0h18m-13 0v4m4-4v4m4-4v4m-6-9h2m0 0h2m-2 0v2m0-2v-2"
-        />
-      </svg>
-      <span class="sr-only">Add row before</span>
-    </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="addRowAfter()"
-      type="button"
-      data-tooltip-target="tooltip-add-row-after"
-      scTooltip="Add row after"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M3 9.5v-3c0-.55228.44772-1 1-1h16c.5523 0 1 .44771 1 1v3m-18 0v9c0 .5523.44772 1 1 1h16c.5523 0 1-.4477 1-1v-9m-18 0h18m-13 0v-4m4 4v-4m4 4v-4m-6 9h2m0 0h2m-2 0v-2m0 2v2"
-        />
-      </svg>
-      <span class="sr-only">Add row after</span>
-    </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="deleteRow()"
-      type="button"
-      data-tooltip-target="tooltip-remove-row"
-      scTooltip="Remove row"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M3 15.5v3c0 .5523.44772 1 1 1h16c.5523 0 1-.4477 1-1v-3m-18 0v-9c0-.55228.44772-1 1-1h16c.5523 0 1 .44772 1 1v9m-18 0h18m-13 0v4m4-4v4m4-4v4m-5.5061-7.4939L12 10.5m0 0 1.5061-1.50614M12 10.5l1.5061 1.5061M12 10.5l-1.5061-1.50614"
-        />
-      </svg>
-      <span class="sr-only">Remove row</span>
-    </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="mergeCells()"
-      type="button"
-      data-tooltip-target="tooltip-merge-cells"
-      scTooltip="Merge cells"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M10 18.5v2H4v-16h6v2m4 12v2h6v-16h-6v2m-6.49543 8.4954L10 12.5m0 0-2.49543-2.4954M10 12.5H4.05191m12.50199 2.5539L14 12.5m0 0 2.5539-2.55392M14 12.5h5.8319"
-        />
-      </svg>
-      <span class="sr-only">Merge cells</span>
-    </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="splitCell()"
-      type="button"
-      data-tooltip-target="tooltip-split-cells"
-      scTooltip="Split cells"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M4 18.5v2h6v-16H4v2m16 12v2h-6v-16h6v2M6.49545 14.9954 4.00003 12.5m0 0 2.49542-2.4954M4.00003 12.5h5.94809m7.49798 2.5539L20 12.5m0 0-2.5539-2.55392M20 12.5h-5.8319"
-        />
-      </svg>
-      <span class="sr-only">Split cells</span>
-    </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="mergeOrSplit()"
-      type="button"
-      data-tooltip-target="tooltip-merge-or-split"
-      scTooltip="Merge or split"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M18.5045 14.9954 21 12.5m0 0-2.4955-2.4954M21 12.5h-5.9481m-9.49798 2.5539L3 12.5m0 0 2.55392-2.55392M3 12.5h5.83192m.16807 7v-14H15v14H8.99999Z"
-        />
-      </svg>
-      <span class="sr-only">Merge or split</span>
-    </button>
-
-    <sc-separator class="h5" orientation="vertical" />
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="toggleHeaderColumn()"
-      type="button"
-      data-tooltip-target="tooltip-toggle-header-column"
-      scTooltip="Toggle header column"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M15 5.5v14m6-8h-6m6 4h-6m-9-3h1.99093M4 19.5h16c.5523 0 1-.4477 1-1v-12c0-.55228-.4477-1-1-1H4c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1Zm8-7c0 1.1046-.8954 2-2 2-1.10457 0-2-.8954-2-2s.89543-2 2-2c1.1046 0 2 .8954 2 2Z"
-        />
-      </svg>
-      <span class="sr-only">Toggle header column</span>
-    </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="toggleHeaderRow()"
-      type="button"
-      data-tooltip-target="tooltip-toggle-header-row"
-      scTooltip="Toggle header row"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M3 15.5v3c0 .5523.44772 1 1 1h16c.5523 0 1-.4477 1-1v-3m-18 0v-9c0-.55228.44772-1 1-1h16c.5523 0 1 .44772 1 1v9m-18 0h18m-13 0v4m4-4v4m4-4v4m-7-9h1.9909M15 10.5c0 1.1046-.8954 2-2 2s-2-.8954-2-2c0-1.10457.8954-2 2-2s2 .89543 2 2Z"
-        />
-      </svg>
-      <span class="sr-only">Toggle header row</span>
-    </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="toggleHeaderCell()"
-      type="button"
-      data-tooltip-target="tooltip-toggle-header-cell"
-      scTooltip="Toggle header cell"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M3 15.5v3c0 .5523.44772 1 1 1h16c.5523 0 1-.4477 1-1v-3m-18 0v-9c0-.55228.44772-1 1-1h16c.5523 0 1 .44772 1 1v9m-18 0h18m-13 0v4m4-4v4m4-4v4m-7-9h1.9909M15 10.5c0 1.1046-.8954 2-2 2s-2-.8954-2-2c0-1.10457.8954-2 2-2s2 .89543 2 2Z"
-        />
-      </svg>
-      <span class="sr-only">Toggle header cell</span>
-    </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="openDialog()"
-      type="button"
-      scTooltip="Add cell attribute"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M3 15.5v3c0 .5523.44772 1 1 1h8v-8m-9 4v-4m0 4h9m-9-4v-5c0-.55228.44772-1 1-1h16c.5523 0 1 .44772 1 1v4m-18 1h11m6.25 5c0 1.2426-1.0073 2.25-2.25 2.25m2.25-2.25c0-1.2426-1.0073-2.25-2.25-2.25m2.25 2.25H21m-3 2.25c-1.2426 0-2.25-1.0074-2.25-2.25M18 18.75v.75m-2.25-3c0-1.2426 1.0074-2.25 2.25-2.25m-2.25 2.25H15m3-2.25v-.75m-1.591 1.409-.5303-.5303m4.2426 4.2426-.5303-.5303m-3.182 0-.5303.5303m4.2426-4.2426-.5303.5303"
-        />
-      </svg>
-      <span class="sr-only">Add cell attribute</span>
-    </button>
-
-    <sc-separator class="h5" orientation="vertical" />
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="fixTables()"
-      type="button"
-      data-tooltip-target="tooltip-fix-tables"
-      scTooltip="Fix tables"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M3 15.5v3c0 .5523.44772 1 1 1h4v-4m-5 0v-4m0 4h5m-5-4v-5c0-.55228.44772-1 1-1h16c.5523 0 1 .44772 1 1v1.98935M3 11.5h5v4m9.4708 4.1718-.8696-1.4388-2.8164-.235-2.573-4.2573 1.4873-2.8362 1.4441 2.3893c.3865.6396 1.2183.8447 1.8579.4582.6396-.3866.8447-1.2184.4582-1.858l-1.444-2.38925h3.1353l2.6101 4.27715-1.0713 2.5847.8695 1.4388"
-        />
-      </svg>
-      <span class="sr-only">Fix tables</span>
-    </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="goToPreviousCell()"
-      type="button"
-      scTooltip="Previous cell"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M3 15.5v3c0 .5523.44772 1 1 1h9.5M3 15.5v-4m0 4h9m-9-4v-5c0-.55228.44772-1 1-1h16c.5523 0 1 .44772 1 1v5H3Zm5 0v8m4-8v8m5.9001-1.0999L16 16.5m0 0 1.9001-1.9001M16 16.5h5"
-        />
-      </svg>
-      <span class="sr-only">Previous cell</span>
-    </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="goToNextCell()"
-      type="button"
-      data-tooltip-target="tooltip-next-cell"
-      scTooltip="Next cell"
-    >
-      <svg
-        class="size-5"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M3 15.5v3c0 .5523.44772 1 1 1h9.5M3 15.5v-4m0 4h9m-9-4v-5c0-.55228.44772-1 1-1h16c.5523 0 1 .44772 1 1v5H3Zm5 0v8m4-8v8m7.0999-1.0999L21 16.5m0 0-1.9001-1.9001M21 16.5h-5"
-        />
-      </svg>
-      <span class="sr-only">Next cell</span>
-    </button>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [] });
-
-class ScExtensionTextStyle {
-    parent = inject(ScEditor);
-    extensions = inject(ScExtensions);
-    constructor() {
-        this.extensions.textStyle.set(true);
-    }
-    get editor() {
-        return this.parent.editor;
-    }
-    setTextSize(fontSize) {
-        this.editor.chain().focus().setMark('textStyle', { fontSize }).run();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScExtensionTextStyle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ScExtensionTextStyle, isStandalone: true, selector: "sc-extension-text-style", ngImport: i0, template: `
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      [cdkMenuTriggerFor]="textSizeDropdown"
-      type="button"
-      scTooltip="Text size"
-    >
-      <svg
-        class="size-5"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M3 6.2V5h11v1.2M8 5v14m-3 0h6m2-6.8V11h8v1.2M17 11v8m-1.5 0h3"
-        />
-      </svg>
-      <span class="sr-only">Text size</span>
-    </button>
-
-    <ng-template #textSizeDropdown>
-      <div
-        class="z-10 w-72 rounded bg-white p-2 shadow dark:bg-gray-700"
-        id="textSizeDropdown"
-        cdkMenu
-      >
-        <ul class="space-y-1 text-sm font-medium" aria-labelledby="setTextSizeButton">
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-base text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (cdkMenuItemTriggered)="setTextSize('16px')"
-              data-text-size="16px"
-              cdkMenuItem
-              type="button"
-            >
-              16px (Default)
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-xs text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (cdkMenuItemTriggered)="setTextSize('12px')"
-              data-text-size="12px"
-              cdkMenuItem
-              type="button"
-            >
-              12px (Tiny)
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-sm text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (cdkMenuItemTriggered)="setTextSize('14px')"
-              data-text-size="14px"
-              cdkMenuItem
-              type="button"
-            >
-              14px (Small)
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-lg text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (cdkMenuItemTriggered)="setTextSize('18px')"
-              data-text-size="18px"
-              cdkMenuItem
-              type="button"
-            >
-              18px (Lead)
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-2xl text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (cdkMenuItemTriggered)="setTextSize('24px')"
-              data-text-size="24px"
-              cdkMenuItem
-              type="button"
-            >
-              24px (Large)
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-4xl text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (cdkMenuItemTriggered)="setTextSize('36px')"
-              data-text-size="36px"
-              cdkMenuItem
-              type="button"
-            >
-              36px (Huge)
-            </button>
-          </li>
-        </ul>
-      </div>
-    </ng-template>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScExtensionTextStyle, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-extension-text-style', imports: [CdkMenuTrigger, CdkMenu, CdkMenuItem, ScTooltip], template: `
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      [cdkMenuTriggerFor]="textSizeDropdown"
-      type="button"
-      scTooltip="Text size"
-    >
-      <svg
-        class="size-5"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M3 6.2V5h11v1.2M8 5v14m-3 0h6m2-6.8V11h8v1.2M17 11v8m-1.5 0h3"
-        />
-      </svg>
-      <span class="sr-only">Text size</span>
-    </button>
-
-    <ng-template #textSizeDropdown>
-      <div
-        class="z-10 w-72 rounded bg-white p-2 shadow dark:bg-gray-700"
-        id="textSizeDropdown"
-        cdkMenu
-      >
-        <ul class="space-y-1 text-sm font-medium" aria-labelledby="setTextSizeButton">
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-base text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (cdkMenuItemTriggered)="setTextSize('16px')"
-              data-text-size="16px"
-              cdkMenuItem
-              type="button"
-            >
-              16px (Default)
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-xs text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (cdkMenuItemTriggered)="setTextSize('12px')"
-              data-text-size="12px"
-              cdkMenuItem
-              type="button"
-            >
-              12px (Tiny)
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-sm text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (cdkMenuItemTriggered)="setTextSize('14px')"
-              data-text-size="14px"
-              cdkMenuItem
-              type="button"
-            >
-              14px (Small)
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-lg text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (cdkMenuItemTriggered)="setTextSize('18px')"
-              data-text-size="18px"
-              cdkMenuItem
-              type="button"
-            >
-              18px (Lead)
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-2xl text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (cdkMenuItemTriggered)="setTextSize('24px')"
-              data-text-size="24px"
-              cdkMenuItem
-              type="button"
-            >
-              24px (Large)
-            </button>
-          </li>
-          <li>
-            <button
-              class="flex w-full items-center justify-between rounded px-3 py-2 text-4xl text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-              (cdkMenuItemTriggered)="setTextSize('36px')"
-              data-text-size="36px"
-              cdkMenuItem
-              type="button"
-            >
-              36px (Huge)
-            </button>
-          </li>
-        </ul>
-      </div>
-    </ng-template>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [] });
-
-class ScAddVideoDialog {
-    dialogRef = inject((DialogRef));
-    videoForm = new FormGroup({
-        url: new FormControl('https://www.youtube.com/watch?v=KaLxCiilHns', Validators.required),
-        width: new FormControl(''),
-        height: new FormControl(''),
-    });
-    get url() {
-        return this.videoForm.get('url');
-    }
-    get width() {
-        return this.videoForm.get('width');
-    }
-    get height() {
-        return this.videoForm.get('height');
-    }
-    getVideoInfo() {
-        return {
-            url: this.url?.value,
-            width: parseInt(this.width?.value ?? ''),
-            height: parseInt(this.height?.value ?? ''),
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScAddVideoDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ScAddVideoDialog, isStandalone: true, selector: "sc-add-video-dialog", ngImport: i0, template: `
-    <div
-      class="z-50 h-[calc(100%-1rem)] max-h-full w-full items-center justify-center overflow-y-auto overflow-x-hidden md:inset-0"
-      tabindex="-1"
-      aria-hidden="true"
-    >
-      <div class="relative max-h-full w-full max-w-md p-4">
-        <!-- Modal content -->
-        <div class="relative rounded-lg bg-white shadow dark:bg-gray-700">
-          <!-- Modal header -->
-          <div
-            class="flex items-center justify-between rounded-t border-b p-4 md:p-5 dark:border-gray-600"
-          >
-            <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
-              Insert advanced video
-            </h3>
-            <button
-              class="end-2.5 ms-auto inline-flex size-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
-              (click)="dialogRef.close()"
-              type="button"
-            >
-              <svg
-                class="size-3"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 14 14"
-              >
-                <path
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
-                />
-              </svg>
-              <span class="sr-only">Close modal</span>
-            </button>
-          </div>
-          <!-- Modal body -->
-          <div class="p-4 md:p-5">
-            <form class="space-y-4" [formGroup]="videoForm">
-              <div>
-                <label
-                  class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
-                  for="URL"
-                >
-                  YouTube URL
-                </label>
-                <input
-                  class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:text-white dark:placeholder:text-gray-400"
-                  id="URL"
-                  type="url"
-                  name="url"
-                  formControlName="url"
-                />
-              </div>
-              <div class="grid grid-cols-2 gap-4">
-                <div>
-                  <label
-                    class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
-                    for="width"
-                  >
-                    Video width
-                  </label>
-                  <input
-                    class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:text-white dark:placeholder:text-gray-400"
-                    id="width"
-                    type="number"
-                    name="width"
-                    formControlName="width"
-                  />
-                </div>
-                <div>
-                  <label
-                    class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
-                    for="height"
-                  >
-                    Video height
-                  </label>
-                  <input
-                    class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:text-white dark:placeholder:text-gray-400"
-                    id="height"
-                    type="number"
-                    name="height"
-                    formControlName="height"
-                  />
-                </div>
-              </div>
-              <button
-                class="w-full rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-                (click)="dialogRef.close(getVideoInfo())"
-              >
-                Add video
-              </button>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScAddVideoDialog, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-add-video-dialog', imports: [ReactiveFormsModule], template: `
-    <div
-      class="z-50 h-[calc(100%-1rem)] max-h-full w-full items-center justify-center overflow-y-auto overflow-x-hidden md:inset-0"
-      tabindex="-1"
-      aria-hidden="true"
-    >
-      <div class="relative max-h-full w-full max-w-md p-4">
-        <!-- Modal content -->
-        <div class="relative rounded-lg bg-white shadow dark:bg-gray-700">
-          <!-- Modal header -->
-          <div
-            class="flex items-center justify-between rounded-t border-b p-4 md:p-5 dark:border-gray-600"
-          >
-            <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
-              Insert advanced video
-            </h3>
-            <button
-              class="end-2.5 ms-auto inline-flex size-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
-              (click)="dialogRef.close()"
-              type="button"
-            >
-              <svg
-                class="size-3"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 14 14"
-              >
-                <path
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
-                />
-              </svg>
-              <span class="sr-only">Close modal</span>
-            </button>
-          </div>
-          <!-- Modal body -->
-          <div class="p-4 md:p-5">
-            <form class="space-y-4" [formGroup]="videoForm">
-              <div>
-                <label
-                  class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
-                  for="URL"
-                >
-                  YouTube URL
-                </label>
-                <input
-                  class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:text-white dark:placeholder:text-gray-400"
-                  id="URL"
-                  type="url"
-                  name="url"
-                  formControlName="url"
-                />
-              </div>
-              <div class="grid grid-cols-2 gap-4">
-                <div>
-                  <label
-                    class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
-                    for="width"
-                  >
-                    Video width
-                  </label>
-                  <input
-                    class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:text-white dark:placeholder:text-gray-400"
-                    id="width"
-                    type="number"
-                    name="width"
-                    formControlName="width"
-                  />
-                </div>
-                <div>
-                  <label
-                    class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
-                    for="height"
-                  >
-                    Video height
-                  </label>
-                  <input
-                    class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:text-white dark:placeholder:text-gray-400"
-                    id="height"
-                    type="number"
-                    name="height"
-                    formControlName="height"
-                  />
-                </div>
-              </div>
-              <button
-                class="w-full rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-                (click)="dialogRef.close(getVideoInfo())"
-              >
-                Add video
-              </button>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
-
-class ScExtensionYoutube {
-    parent = inject(ScEditor);
-    dialog = inject(Dialog);
-    extensions = inject(ScExtensions);
-    constructor() {
-        this.extensions.youtube.set(true);
-    }
-    get editor() {
-        return this.parent.editor;
-    }
-    setYoutubeVideo(video) {
-        if (video?.url) {
-            this.editor.commands.setYoutubeVideo({
-                src: video.url,
-                width: video.width ? video.width : 640,
-                height: video.height ? video.height : 480,
-            });
-        }
-    }
-    openDialog() {
-        const dialogRef = this.dialog.open(ScAddVideoDialog, {
-            minWidth: '600px',
-        });
-        dialogRef.closed.subscribe((result) => {
-            this.setYoutubeVideo(result);
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScExtensionYoutube, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ScExtensionYoutube, isStandalone: true, selector: "sc-extension-youtube", ngImport: i0, template: `
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="openDialog()"
-      type="button"
-      scTooltip="Add video"
-    >
-      <svg
-        class="size-5"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M9 7V2.221a2 2 0 0 0-.5.365L4.586 6.5a2 2 0 0 0-.365.5H9Zm2 0V2h7a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9h5a2 2 0 0 0 2-2Zm-2 4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2H9Zm0 2h2v2H9v-2Zm7.965-.557a1 1 0 0 0-1.692-.72l-1.268 1.218a1 1 0 0 0-.308.721v.733a1 1 0 0 0 .37.776l1.267 1.032a1 1 0 0 0 1.631-.776v-2.984Z"
-          clip-rule="evenodd"
-        />
-      </svg>
-      <span class="sr-only">Add video</span>
-    </button>
-
-    <button type="button" sc-toggle variant="outline">
-      <svg si-file-video-icon></svg>
-    </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]" }, { kind: "component", type: SiFileVideoIcon, selector: "svg[si-file-video-icon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScExtensionYoutube, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-extension-youtube', imports: [ScTooltip, DialogModule, ScToggle, SiFileVideoIcon], template: `
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="openDialog()"
-      type="button"
-      scTooltip="Add video"
-    >
-      <svg
-        class="size-5"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M9 7V2.221a2 2 0 0 0-.5.365L4.586 6.5a2 2 0 0 0-.365.5H9Zm2 0V2h7a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9h5a2 2 0 0 0 2-2Zm-2 4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2H9Zm0 2h2v2H9v-2Zm7.965-.557a1 1 0 0 0-1.692-.72l-1.268 1.218a1 1 0 0 0-.308.721v.733a1 1 0 0 0 .37.776l1.267 1.032a1 1 0 0 0 1.631-.776v-2.984Z"
-          clip-rule="evenodd"
-        />
-      </svg>
-      <span class="sr-only">Add video</span>
-    </button>
-
-    <button type="button" sc-toggle variant="outline">
-      <svg si-file-video-icon></svg>
-    </button>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { ScEditor, ScEditorBlockquote, ScEditorBold, ScEditorBulletList, ScEditorCode, ScEditorContent, ScEditorGroup, ScEditorHighlight, ScEditorHorizontalRule, ScEditorItalic, ScEditorOrderedList, ScEditorParagraph, ScEditorRedo, ScEditorStrike, ScEditorTextAlignCenter, ScEditorTextAlignLeft, ScEditorTextAlignRight, ScEditorToolbar, ScEditorUnderline, ScEditorUndo, ScEditorUnsetLink, ScExtensionColor, ScExtensionFontFamily, ScExtensionHeading, ScExtensionImage, ScExtensionLink, ScExtensionTable, ScExtensionTextStyle, ScExtensionYoutube };
-//# sourceMappingURL=semantic-components-editor.mjs.map