@malva-ui/editor 0.1.13 → 0.1.14

package/esm2022/lib/toolbar/editor-toolbar.js

@@ -1,826 +0,0 @@
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { DOCUMENT, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, computed, DestroyRef, Directive, ElementRef, effect, inject, input, Injectable, PLATFORM_ID, signal, viewChild, ViewEncapsulation, } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { LucideEllipsis } from '@lucide/angular';
-import { MlvFade, MlvResizeObserverService } from '@malva-ui/cdk/utils';
-import { MlvButton, MlvButtonIcon } from '@malva-ui/core/button';
-import { MlvListItem } from '@malva-ui/core/list';
-import { MlvMenu, MlvMenuItem, MlvMenuTrigger } from '@malva-ui/core/menu';
-import { MlvToolbar } from '@malva-ui/core/toolbar';
-import { MlvDivider } from '@malva-ui/core/divider';
-import { MlvTooltip } from '@malva-ui/core/tooltip';
-import { MLV_EDITOR_I18N } from '@malva-ui/i18n';
-import { MLV_EDITOR_OVERLAY_REGISTRY, MLV_EDITOR_TOOLBAR_CONTEXT, MLV_EDITOR_TOOLBAR_ROVING, MLV_EDITOR_TOOLBAR_REVISION, MlvEditorOverlayRegistry, MlvEditorToolbarRovingRegistry, MlvEditorToolbarRevision, } from '../editor-toolbar-context';
-import { MlvEditorAlignment } from './editor-alignment';
-import { MlvEditorBlockInsert } from './editor-block-insert';
-import { MlvEditorHeading } from './editor-heading';
-import { MlvEditorHighlight } from './editor-highlight';
-import { MlvEditorInlineMarks } from './editor-inline-marks';
-import { MlvEditorList } from './editor-list';
-import { MlvEditorLink } from './editor-link';
-import { MlvEditorImageUpload } from './editor-image-upload';
-import { MlvEditorTable } from './editor-table';
-import { MlvEditorUndoRedo } from './editor-undo-redo';
-import { MlvEditorZoom } from './editor-zoom';
-import { MlvEditorTextColor } from './editor-text-color';
-import { MlvEditorToolbarWidget } from './editor-toolbar-widget';
-import * as i0 from "@angular/core";
-/** @internal Named roving-focus root used by editor and compatibility toolbar shells. */
-export class MlvEditorToolbarRoot {
-    /** Whether the toolbar has entered its compact overflow layout. */
-    narrow = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
-    /** Accessible toolbar name. */
-    ariaLabel = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    /** Whether the composite toolbar is unavailable. */
-    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
-    /** Keyboard-navigation axis. */
-    orientation = input('horizontal', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
-    /** Whether arrow navigation wraps at the boundaries. */
-    wrap = input(true, { ...(ngDevMode ? { debugName: "wrap" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
-    /** @internal Editor-scoped focus registry. */
-    _registry = inject(MLV_EDITOR_TOOLBAR_ROVING);
-    /** @internal Transaction state that re-evaluates disabled toolbar widgets. */
-    _revision = inject(MLV_EDITOR_TOOLBAR_REVISION, {
-        optional: true,
-    });
-    /** @internal Optional localized defaults. */
-    _i18n = inject(MLV_EDITOR_I18N, { optional: true });
-    /** @internal Actual composite-root element. */
-    _element = inject(ElementRef);
-    /** @internal Root teardown lifecycle. */
-    _destroyRef = inject(DestroyRef);
-    /** @internal Avoids DOM observers during server rendering. */
-    _isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
-    /** @internal Shared observer abstraction for responsive width changes. */
-    _resizeObserver = inject(MlvResizeObserverService);
-    constructor() {
-        effect(() => {
-            this._revision?.();
-            this._registry.setDisabled(this.disabled());
-        });
-        if (this._isBrowser) {
-            this._destroyRef.onDestroy(this._registry.connect(this._element.nativeElement));
-            this._resizeObserver
-                .observe(this._element)
-                .pipe(takeUntilDestroyed(this._destroyRef))
-                .subscribe((entries) => {
-                const width = entries[entries.length - 1]?.contentRect.width;
-                if (width !== undefined && width > 0)
-                    this.narrow.set(width < 640);
-            });
-        }
-    }
-    /** @internal Resolves the user or localized toolbar label. */
-    resolvedAriaLabel() {
-        return this.ariaLabel() ?? this._i18n?.().toolbarLabel ?? 'Editor toolbar';
-    }
-    /** @internal Handles roving navigation from the host metadata event binding. */
-    handleKeydown(event) {
-        if (this.disabled())
-            return;
-        const target = event.target instanceof HTMLElement ? event.target : null;
-        if (!target)
-            return;
-        if (event.key === 'Home' || event.key === 'End') {
-            event.preventDefault();
-            this._registry.focusBoundary(event.key === 'Home' ? 'start' : 'end');
-            return;
-        }
-        const direction = this.orientation() === 'vertical'
-            ? event.key === 'ArrowUp'
-                ? -1
-                : event.key === 'ArrowDown'
-                    ? 1
-                    : undefined
-            : event.key === 'ArrowLeft'
-                ? -1
-                : event.key === 'ArrowRight'
-                    ? 1
-                    : undefined;
-        if (!direction)
-            return;
-        event.preventDefault();
-        this._registry.move(target, direction, this.wrap());
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvEditorToolbarRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MlvEditorToolbarRoot, isStandalone: true, selector: "[mlvEditorToolbarRoot]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "toolbar" }, listeners: { "keydown": "handleKeydown($event)" }, properties: { "class.mlv-editor-toolbar--narrow": "narrow()", "attr.aria-label": "resolvedAriaLabel()", "attr.aria-orientation": "orientation()", "attr.aria-disabled": "disabled() || null" }, classAttribute: "mlv-editor-toolbar" }, exportAs: ["mlvEditorToolbarRoot"], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvEditorToolbarRoot, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[mlvEditorToolbarRoot]',
-                    exportAs: 'mlvEditorToolbarRoot',
-                    host: {
-                        class: 'mlv-editor-toolbar',
-                        '[class.mlv-editor-toolbar--narrow]': 'narrow()',
-                        role: 'toolbar',
-                        '[attr.aria-label]': 'resolvedAriaLabel()',
-                        '[attr.aria-orientation]': 'orientation()',
-                        '[attr.aria-disabled]': 'disabled() || null',
-                        '(keydown)': 'handleKeydown($event)',
-                    },
-                }]
-        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }] } });
-/** @internal Responsive menu containing commands removed from the primary row. */
-export class MlvEditorToolbarOverflow {
-    /** @protected Responsive state owned by the enclosing toolbar root. */
-    _root = inject(MlvEditorToolbarRoot);
-    /** @protected Editor-scoped command state. */
-    _context = inject(MLV_EDITOR_TOOLBAR_CONTEXT);
-    /** @private Command-state invalidation signal. */
-    _revision = inject(MLV_EDITOR_TOOLBAR_REVISION, {
-        optional: true,
-    });
-    /** @private Roving coordinator used to recover focus after wide layout returns. */
-    _roving = inject(MLV_EDITOR_TOOLBAR_ROVING);
-    /** @private Detached overlay registry. */
-    _overlays = inject(MLV_EDITOR_OVERLAY_REGISTRY);
-    /** @private Document used after a browser menu opens. */
-    _document = inject(DOCUMENT);
-    /** @private Teardown scope for a currently open menu. */
-    _destroyRef = inject(DestroyRef);
-    /** @private Optional reactive localized editor copy. */
-    _i18n = inject(MLV_EDITOR_I18N, { optional: true });
-    /** @protected Rendered overflow menu. */
-    _menu = viewChild.required('_menu', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_menu" }] : /* istanbul ignore next */ []));
-    /** @protected Trigger that owns the overflow menu. */
-    _trigger = viewChild.required(MlvMenuTrigger, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_trigger" }] : /* istanbul ignore next */ []));
-    /** @private Current detached-overlay registration. */
-    _unregister;
-    /** @private Guards queued registration after close. */
-    _menuOpen = false;
-    /** @private Previous responsive state used to identify a narrow-to-wide edge. */
-    _wasNarrow = false;
-    /** @protected Formatting order retained when controls move into overflow. */
-    _alignments = computed(() => [
-        { value: 'left', label: this._copy().alignLeft },
-        { value: 'center', label: this._copy().alignCenter },
-        { value: 'right', label: this._copy().alignRight },
-        { value: 'justify', label: this._copy().alignJustify },
-    ], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_alignments" }] : /* istanbul ignore next */ []));
-    /** @protected Reactive localized copy for every overflow command. */
-    _copy = computed(() => {
-        const copy = this._i18n?.();
-        return {
-            moreFormatting: copy?.moreFormatting ?? 'More formatting',
-            bold: copy?.bold ?? 'Bold',
-            italic: copy?.italic ?? 'Italic',
-            strike: copy?.strike ?? 'Strike-through',
-            underline: copy?.underline ?? 'Underline',
-            alignLeft: copy?.alignLeft ?? 'Align left',
-            alignCenter: copy?.alignCenter ?? 'Align center',
-            alignRight: copy?.alignRight ?? 'Align right',
-            alignJustify: copy?.alignJustify ?? 'Justify',
-            blockquote: copy?.blockquote ?? 'Blockquote',
-            codeBlock: copy?.codeBlock ?? 'Code block',
-            horizontalRule: copy?.horizontalRule ?? 'Horizontal rule',
-        };
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_copy" }] : /* istanbul ignore next */ []));
-    /** @protected Bold toggle command. */
-    _bold = (editor) => editor.chain().focus().toggleBold().run();
-    /** @protected Italic toggle command. */
-    _italic = (editor) => editor.chain().focus().toggleItalic().run();
-    /** @protected Strike toggle command. */
-    _strike = (editor) => editor.chain().focus().toggleStrike().run();
-    /** @protected Underline toggle command. */
-    _underline = (editor) => editor.chain().focus().toggleUnderline().run();
-    /** @protected Blockquote toggle command. */
-    _blockquote = (editor) => editor.chain().focus().toggleBlockquote().run();
-    /** @protected Code-block toggle command. */
-    _codeBlock = (editor) => editor.chain().focus().toggleCodeBlock().run();
-    /** @protected Horizontal-rule insertion command. */
-    _horizontalRule = (editor) => editor.chain().focus().setHorizontalRule().run();
-    /** @protected Non-mutating bold capability check. */
-    _canBold = (editor) => editor.can().chain().toggleBold().run();
-    /** @protected Non-mutating italic capability check. */
-    _canItalic = (editor) => editor.can().chain().toggleItalic().run();
-    /** @protected Non-mutating strike capability check. */
-    _canStrike = (editor) => editor.can().chain().toggleStrike().run();
-    /** @protected Non-mutating underline capability check. */
-    _canUnderline = (editor) => editor.can().chain().toggleUnderline().run();
-    /** @protected Non-mutating blockquote capability check. */
-    _canBlockquote = (editor) => editor.can().chain().toggleBlockquote().run();
-    /** @protected Non-mutating code-block capability check. */
-    _canCodeBlock = (editor) => editor.can().chain().toggleCodeBlock().run();
-    /** @protected Non-mutating horizontal-rule capability check. */
-    _canHorizontalRule = (editor) => editor.can().chain().setHorizontalRule().run();
-    constructor() {
-        effect(() => {
-            const narrow = this._root.narrow();
-            const wasNarrow = this._wasNarrow;
-            this._wasNarrow = narrow;
-            if (narrow || !wasNarrow || !this._menuOpen)
-                return;
-            this._menu().close();
-            queueMicrotask(() => this._roving.focusBoundary('start'));
-        });
-        this._destroyRef.onDestroy(() => this._unregisterOverlay());
-    }
-    /** @protected Whether the active extension set registered a command. */
-    _supported(command) {
-        this._revision?.();
-        const editor = this._context.editor();
-        if (!editor)
-            return false;
-        return (typeof editor.commands[command] === 'function');
-    }
-    /** @protected Alignment command factory. */
-    _align(value) {
-        return (editor) => editor.chain().focus().setTextAlign(value).run();
-    }
-    /** @protected Non-mutating alignment capability factory. */
-    _canAlign(value) {
-        return (editor) => editor.can().chain().setTextAlign(value).run();
-    }
-    /** @protected Whether the command is blocked or unsupported. */
-    _commandDisabled(command) {
-        this._revision?.();
-        if (this._context.disabled() || this._context.readonly())
-            return true;
-        try {
-            return !this._context.can(command);
-        }
-        catch {
-            return true;
-        }
-    }
-    /** @protected Executes one overflow command through the context guard. */
-    _run(command) {
-        this._context.run(command);
-    }
-    /** @protected Registers the detached overflow panel with composite focus. */
-    _registerOverlay() {
-        this._menuOpen = true;
-        queueMicrotask(() => {
-            if (!this._menuOpen)
-                return;
-            const panel = this._document.getElementById(this._menu().panelId);
-            if (!panel)
-                return;
-            this._unregister?.();
-            this._unregister = this._overlays.register(panel, () => this._trigger().close());
-        });
-    }
-    /** @protected Releases focus ownership after close. */
-    _unregisterOverlay() {
-        this._menuOpen = false;
-        this._unregister?.();
-        this._unregister = undefined;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvEditorToolbarOverflow, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvEditorToolbarOverflow, isStandalone: true, selector: "mlv-editor-toolbar-overflow", host: { properties: { "hidden": "!_root.narrow()" }, classAttribute: "mlv-editor-toolbar__overflow" }, viewQueries: [{ propertyName: "_menu", first: true, predicate: ["_menu"], descendants: true, isSignal: true }, { propertyName: "_trigger", first: true, predicate: MlvMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: `
-    <button
-      mlvButton
-      mlvEditorToolbarWidget
-      type="button"
-      shape="circle"
-      variant="transparent"
-      [attr.aria-label]="_copy().moreFormatting"
-      [disabled]="_context.disabled()"
-      [mlvMenuTrigger]="_menu"
-      [menuTriggerDisabled]="_context.disabled()"
-      [mlvTooltip]="_copy().moreFormatting"
-      (menuOpened)="_registerOverlay()"
-      (menuClosed)="_unregisterOverlay()"
-    >
-      <svg mlvButtonIcon lucideEllipsis aria-hidden="true" />
-    </button>
-    <mlv-menu #_menu [label]="_copy().moreFormatting">
-      @if (_supported('toggleBold')) {
-        <mlv-list-item
-          mlvMenuItem
-          [disabled]="_commandDisabled(_canBold)"
-          [attr.aria-current]="_context.isActive('bold') ? 'true' : null"
-          (itemClick)="_run(_bold)"
-          >{{ _copy().bold }}</mlv-list-item
-        >
-      }
-      @if (_supported('toggleItalic')) {
-        <mlv-list-item
-          mlvMenuItem
-          [disabled]="_commandDisabled(_canItalic)"
-          [attr.aria-current]="_context.isActive('italic') ? 'true' : null"
-          (itemClick)="_run(_italic)"
-          >{{ _copy().italic }}</mlv-list-item
-        >
-      }
-      @if (_supported('toggleStrike')) {
-        <mlv-list-item
-          mlvMenuItem
-          [disabled]="_commandDisabled(_canStrike)"
-          [attr.aria-current]="_context.isActive('strike') ? 'true' : null"
-          (itemClick)="_run(_strike)"
-          >{{ _copy().strike }}</mlv-list-item
-        >
-      }
-      @if (_supported('toggleUnderline')) {
-        <mlv-list-item
-          mlvMenuItem
-          [disabled]="_commandDisabled(_canUnderline)"
-          [attr.aria-current]="_context.isActive('underline') ? 'true' : null"
-          (itemClick)="_run(_underline)"
-          >{{ _copy().underline }}</mlv-list-item
-        >
-      }
-      @if (_supported('setTextAlign')) {
-        @for (alignment of _alignments(); track alignment.value) {
-          <mlv-list-item
-            mlvMenuItem
-            [disabled]="_commandDisabled(_canAlign(alignment.value))"
-            [attr.aria-current]="
-              _context.isActive('paragraph', { textAlign: alignment.value })
-                ? 'true'
-                : null
-            "
-            (itemClick)="_run(_align(alignment.value))"
-            >{{ alignment.label }}</mlv-list-item
-          >
-        }
-      }
-      @if (_supported('toggleBlockquote')) {
-        <mlv-list-item
-          mlvMenuItem
-          [disabled]="_commandDisabled(_canBlockquote)"
-          [attr.aria-current]="_context.isActive('blockquote') ? 'true' : null"
-          (itemClick)="_run(_blockquote)"
-          >{{ _copy().blockquote }}</mlv-list-item
-        >
-      }
-      @if (_supported('toggleCodeBlock')) {
-        <mlv-list-item
-          mlvMenuItem
-          [disabled]="_commandDisabled(_canCodeBlock)"
-          [attr.aria-current]="_context.isActive('codeBlock') ? 'true' : null"
-          (itemClick)="_run(_codeBlock)"
-          >{{ _copy().codeBlock }}</mlv-list-item
-        >
-      }
-      @if (_supported('setHorizontalRule')) {
-        <mlv-list-item
-          mlvMenuItem
-          [disabled]="_commandDisabled(_canHorizontalRule)"
-          (itemClick)="_run(_horizontalRule)"
-          >{{ _copy().horizontalRule }}</mlv-list-item
-        >
-      }
-    </mlv-menu>
-  `, isInline: true, dependencies: [{ kind: "component", type: MlvButton, selector: "button[mlvButton], a[mlvButton]", inputs: ["variant", "shape", "disabled", "loading"] }, { kind: "directive", type: MlvButtonIcon, selector: "[mlvButtonIcon]" }, { kind: "directive", type: MlvTooltip, selector: "[mlvTooltip]", inputs: ["mlvTooltip", "tooltipPlacement", "tooltipTone", "tooltipDelay", "tooltipDisabled", "tooltipArrow"] }, { kind: "component", type: LucideEllipsis, selector: "svg[lucideEllipsis], svg[lucideMoreHorizontal]" }, { kind: "component", type: MlvListItem, selector: "mlv-list-item", inputs: ["itemRole", "unread", "accent"] }, { kind: "component", type: MlvMenu, selector: "mlv-menu", inputs: ["label", "mlvDensity"], outputs: ["closed"] }, { kind: "directive", type: MlvMenuItem, selector: "mlv-list-item[mlvMenuItem]", inputs: ["disabled"], outputs: ["itemClick"] }, { kind: "directive", type: MlvMenuTrigger, selector: "[mlvMenuTrigger]", inputs: ["mlvMenuTrigger", "isSubmenuTrigger", "menuTriggerDisabled"], outputs: ["menuOpened", "menuClosed"] }, { kind: "directive", type: MlvEditorToolbarWidget, selector: "[mlvEditorToolbarWidget]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvEditorToolbarOverflow, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'mlv-editor-toolbar-overflow',
-                    imports: [
-                        MlvButton,
-                        MlvButtonIcon,
-                        MlvTooltip,
-                        LucideEllipsis,
-                        MlvListItem,
-                        MlvMenu,
-                        MlvMenuItem,
-                        MlvMenuTrigger,
-                        MlvEditorToolbarWidget,
-                    ],
-                    template: `
-    <button
-      mlvButton
-      mlvEditorToolbarWidget
-      type="button"
-      shape="circle"
-      variant="transparent"
-      [attr.aria-label]="_copy().moreFormatting"
-      [disabled]="_context.disabled()"
-      [mlvMenuTrigger]="_menu"
-      [menuTriggerDisabled]="_context.disabled()"
-      [mlvTooltip]="_copy().moreFormatting"
-      (menuOpened)="_registerOverlay()"
-      (menuClosed)="_unregisterOverlay()"
-    >
-      <svg mlvButtonIcon lucideEllipsis aria-hidden="true" />
-    </button>
-    <mlv-menu #_menu [label]="_copy().moreFormatting">
-      @if (_supported('toggleBold')) {
-        <mlv-list-item
-          mlvMenuItem
-          [disabled]="_commandDisabled(_canBold)"
-          [attr.aria-current]="_context.isActive('bold') ? 'true' : null"
-          (itemClick)="_run(_bold)"
-          >{{ _copy().bold }}</mlv-list-item
-        >
-      }
-      @if (_supported('toggleItalic')) {
-        <mlv-list-item
-          mlvMenuItem
-          [disabled]="_commandDisabled(_canItalic)"
-          [attr.aria-current]="_context.isActive('italic') ? 'true' : null"
-          (itemClick)="_run(_italic)"
-          >{{ _copy().italic }}</mlv-list-item
-        >
-      }
-      @if (_supported('toggleStrike')) {
-        <mlv-list-item
-          mlvMenuItem
-          [disabled]="_commandDisabled(_canStrike)"
-          [attr.aria-current]="_context.isActive('strike') ? 'true' : null"
-          (itemClick)="_run(_strike)"
-          >{{ _copy().strike }}</mlv-list-item
-        >
-      }
-      @if (_supported('toggleUnderline')) {
-        <mlv-list-item
-          mlvMenuItem
-          [disabled]="_commandDisabled(_canUnderline)"
-          [attr.aria-current]="_context.isActive('underline') ? 'true' : null"
-          (itemClick)="_run(_underline)"
-          >{{ _copy().underline }}</mlv-list-item
-        >
-      }
-      @if (_supported('setTextAlign')) {
-        @for (alignment of _alignments(); track alignment.value) {
-          <mlv-list-item
-            mlvMenuItem
-            [disabled]="_commandDisabled(_canAlign(alignment.value))"
-            [attr.aria-current]="
-              _context.isActive('paragraph', { textAlign: alignment.value })
-                ? 'true'
-                : null
-            "
-            (itemClick)="_run(_align(alignment.value))"
-            >{{ alignment.label }}</mlv-list-item
-          >
-        }
-      }
-      @if (_supported('toggleBlockquote')) {
-        <mlv-list-item
-          mlvMenuItem
-          [disabled]="_commandDisabled(_canBlockquote)"
-          [attr.aria-current]="_context.isActive('blockquote') ? 'true' : null"
-          (itemClick)="_run(_blockquote)"
-          >{{ _copy().blockquote }}</mlv-list-item
-        >
-      }
-      @if (_supported('toggleCodeBlock')) {
-        <mlv-list-item
-          mlvMenuItem
-          [disabled]="_commandDisabled(_canCodeBlock)"
-          [attr.aria-current]="_context.isActive('codeBlock') ? 'true' : null"
-          (itemClick)="_run(_codeBlock)"
-          >{{ _copy().codeBlock }}</mlv-list-item
-        >
-      }
-      @if (_supported('setHorizontalRule')) {
-        <mlv-list-item
-          mlvMenuItem
-          [disabled]="_commandDisabled(_canHorizontalRule)"
-          (itemClick)="_run(_horizontalRule)"
-          >{{ _copy().horizontalRule }}</mlv-list-item
-        >
-      }
-    </mlv-menu>
-  `,
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        class: 'mlv-editor-toolbar__overflow',
-                        '[hidden]': '!_root.narrow()',
-                    },
-                }]
-        }], ctorParameters: () => [], propDecorators: { _menu: [{ type: i0.ViewChild, args: ['_menu', { isSignal: true }] }], _trigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MlvMenuTrigger), { isSignal: true }] }] } });
-/** @internal Defers public-toolbar context reads until Angular has assigned inputs. */
-class MlvEditorToolbarContextProxy {
-    /** @internal Owning public toolbar component. */
-    _toolbar = inject(MlvEditorToolbar);
-    /** Editor instance supplied through the public context input. */
-    get editor() {
-        return this._toolbar.context().editor;
-    }
-    /** Disabled state combines the shell input and public context. */
-    disabled = computed(() => this._toolbar.disabled() || this._toolbar.context().disabled(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    /** Readonly state supplied through the public context input. */
-    get readonly() {
-        return this._toolbar.context().readonly;
-    }
-    /** Focus state supplied by the public owner context. */
-    get focused() {
-        return this._toolbar.context().focused;
-    }
-    /** Editable state supplied by the public owner context without shadowing. */
-    get editable() {
-        return this._toolbar.context().editable;
-    }
-    /** Serialization format supplied through the public context input. */
-    get format() {
-        return this._toolbar.context().format;
-    }
-    /** View zoom supplied through the public context input. */
-    get zoom() {
-        return this._toolbar.context().zoom;
-    }
-    /** Exact editor-owned upload capability supplied through the public context. */
-    get imageUpload() {
-        return this._toolbar.context().imageUpload;
-    }
-    /** Runs a public-context command. */
-    run(command) {
-        return this._toolbar.context().run(command);
-    }
-    /** Checks a public-context command. */
-    can(command) {
-        return this._toolbar.context().can(command);
-    }
-    /** Checks active state through the public context. */
-    isActive(name, attributes) {
-        return this._toolbar.context().isActive(name, attributes);
-    }
-    /** Reports a typed error through the public owner context. */
-    reportError(error) {
-        this._toolbar.context().reportError(error);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvEditorToolbarContextProxy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvEditorToolbarContextProxy });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvEditorToolbarContextProxy, decorators: [{
-            type: Injectable
-        }] });
-/** Public compatibility toolbar shell for standalone consumer use. */
-export class MlvEditorToolbar {
-    /** Accessible toolbar name. */
-    ariaLabel = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    /** Whether all toolbar interactions are disabled. */
-    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
-    /** Optional content rendered before built-in groups. */
-    startTemplate = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "startTemplate" }] : /* istanbul ignore next */ []));
-    /** Optional content rendered after built-in groups. */
-    endTemplate = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "endTemplate" }] : /* istanbul ignore next */ []));
-    /** Context supplied to custom toolbar templates. */
-    context = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
-    /** @internal Invalidates built-in command state for the supplied standalone editor. */
-    _revision = inject(MlvEditorToolbarRevision);
-    constructor() {
-        effect((onCleanup) => {
-            const editor = this.context().editor();
-            this._revision.revision.update((revision) => revision + 1);
-            if (!editor)
-                return;
-            const invalidate = () => this._revision.revision.update((revision) => revision + 1);
-            editor.on('transaction', invalidate);
-            editor.on('selectionUpdate', invalidate);
-            onCleanup(() => {
-                editor.off('transaction', invalidate);
-                editor.off('selectionUpdate', invalidate);
-            });
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvEditorToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvEditorToolbar, isStandalone: true, selector: "mlv-editor-toolbar", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, startTemplate: { classPropertyName: "startTemplate", publicName: "startTemplate", isSignal: true, isRequired: false, transformFunction: null }, endTemplate: { classPropertyName: "endTemplate", publicName: "endTemplate", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.mlv-editor-toolbar--disabled": "disabled() || context().disabled()" }, classAttribute: "mlv-editor-toolbar" }, providers: [
-            MlvEditorOverlayRegistry,
-            MlvEditorToolbarRevision,
-            MlvEditorToolbarRovingRegistry,
-            MlvEditorToolbarContextProxy,
-            {
-                provide: MLV_EDITOR_OVERLAY_REGISTRY,
-                useExisting: MlvEditorOverlayRegistry,
-            },
-            {
-                provide: MLV_EDITOR_TOOLBAR_CONTEXT,
-                useExisting: MlvEditorToolbarContextProxy,
-            },
-            {
-                provide: MLV_EDITOR_TOOLBAR_REVISION,
-                useFactory: (state) => state.revision,
-                deps: [MlvEditorToolbarRevision],
-            },
-            {
-                provide: MLV_EDITOR_TOOLBAR_ROVING,
-                useExisting: MlvEditorToolbarRovingRegistry,
-            },
-        ], ngImport: i0, template: `<div
-    mlvEditorToolbarRoot
-    #toolbarRoot="mlvEditorToolbarRoot"
-    [ariaLabel]="ariaLabel()"
-    [disabled]="disabled() || context().disabled()"
-  >
-    <ng-content select="[mlvEditorToolbarStart]" />
-    @if (startTemplate(); as template) {
-      <ng-container
-        [ngTemplateOutlet]="template"
-        [ngTemplateOutletContext]="{ $implicit: context() }"
-      />
-    }
-    <div mlvFade class="mlv-editor-toolbar__scroll">
-      <mlv-toolbar>
-        <mlv-editor-undo-redo />
-        <mlv-divider
-          class="mlv-editor-toolbar__separator"
-          orientation="vertical"
-          muted
-        />
-        <mlv-editor-zoom />
-        <mlv-divider
-          class="mlv-editor-toolbar__separator"
-          orientation="vertical"
-          muted
-        />
-        <mlv-editor-heading />
-        <mlv-editor-list />
-        <mlv-divider
-          class="mlv-editor-toolbar__separator"
-          orientation="vertical"
-          muted
-          [hidden]="toolbarRoot.narrow()"
-        />
-        <mlv-editor-inline-marks [hidden]="toolbarRoot.narrow()" />
-        <mlv-divider
-          class="mlv-editor-toolbar__separator"
-          orientation="vertical"
-          muted
-          [hidden]="toolbarRoot.narrow()"
-        />
-        <mlv-editor-text-color />
-        <mlv-editor-highlight />
-        <mlv-divider
-          class="mlv-editor-toolbar__separator"
-          orientation="vertical"
-          muted
-          [hidden]="toolbarRoot.narrow()"
-        />
-        <mlv-editor-alignment [hidden]="toolbarRoot.narrow()" />
-        <mlv-divider
-          class="mlv-editor-toolbar__separator"
-          orientation="vertical"
-          muted
-          [hidden]="toolbarRoot.narrow()"
-        />
-        <mlv-editor-link />
-        <mlv-editor-table />
-        <mlv-divider
-          class="mlv-editor-toolbar__separator"
-          orientation="vertical"
-          muted
-          [hidden]="toolbarRoot.narrow()"
-        />
-        <mlv-editor-block-insert [hidden]="toolbarRoot.narrow()" />
-        <mlv-divider
-          class="mlv-editor-toolbar__separator"
-          orientation="vertical"
-          muted
-          [hidden]="toolbarRoot.narrow()"
-        />
-        <mlv-editor-image-upload />
-      </mlv-toolbar>
-    </div>
-    <mlv-editor-toolbar-overflow />
-    @if (endTemplate(); as template) {
-      <ng-container
-        [ngTemplateOutlet]="template"
-        [ngTemplateOutletContext]="{ $implicit: context() }"
-      />
-    }
-    <ng-content select="[mlvEditorToolbarEnd]" /><ng-content />
-  </div>`, isInline: true, styles: [".mlv-editor-toolbar{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-typography-body-m-size)}.mlv-editor-toolbar *{box-sizing:border-box}.mlv-editor-toolbar{display:flex;align-items:center;min-width:0;overflow:hidden}.mlv-editor-toolbar [hidden]{display:none!important}.mlv-editor-toolbar__scroll{flex:1 1 auto;min-width:0}.mlv-editor-toolbar__scroll>.mlv-toolbar{width:max-content;min-width:100%;flex-wrap:nowrap}.mlv-editor-toolbar__separator{flex:0 0 auto;align-self:stretch;min-height:var(--mlv-height-s);margin-inline:var(--mlv-spacing-1)}.mlv-editor-toolbar__overflow,.mlv-editor-toolbar .mlv-editor-undo-redo,.mlv-editor-toolbar .mlv-editor-inline-marks,.mlv-editor-toolbar .mlv-editor-block-insert{display:inline-flex;flex:0 0 auto;flex-direction:row;align-items:center;gap:var(--mlv-spacing-1)}.mlv-editor-toolbar mlv-editor-zoom,.mlv-editor-toolbar mlv-editor-heading,.mlv-editor-toolbar mlv-editor-list,.mlv-editor-toolbar mlv-editor-text-color,.mlv-editor-toolbar mlv-editor-highlight,.mlv-editor-toolbar mlv-editor-alignment,.mlv-editor-toolbar mlv-editor-link,.mlv-editor-toolbar mlv-editor-table,.mlv-editor-toolbar mlv-editor-image-upload{flex:0 0 auto}.mlv-editor-toolbar--disabled{opacity:var(--mlv-disabled-opacity)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MlvFade, selector: "[mlvFade]", inputs: ["mlvFadeHeight", "mlvFadeSize", "mlvFadeOffset", "mlvFade"] }, { kind: "component", type: MlvToolbar, selector: "mlv-toolbar", inputs: ["gap", "equalSize"] }, { kind: "component", type: MlvDivider, selector: "mlv-divider", inputs: ["orientation", "dashed", "muted"] }, { kind: "directive", type: MlvEditorToolbarRoot, selector: "[mlvEditorToolbarRoot]", inputs: ["ariaLabel", "disabled", "orientation", "wrap"], exportAs: ["mlvEditorToolbarRoot"] }, { kind: "component", type: MlvEditorUndoRedo, selector: "mlv-editor-undo-redo" }, { kind: "component", type: MlvEditorZoom, selector: "mlv-editor-zoom", inputs: ["zoom", "zoomLevels", "min", "max", "fitToContainer"], outputs: ["zoomChange"] }, { kind: "component", type: MlvEditorHeading, selector: "mlv-editor-heading", inputs: ["levels"] }, { kind: "component", type: MlvEditorList, selector: "mlv-editor-list" }, { kind: "component", type: MlvEditorInlineMarks, selector: "mlv-editor-inline-marks" }, { kind: "component", type: MlvEditorTextColor, selector: "mlv-editor-text-color" }, { kind: "component", type: MlvEditorHighlight, selector: "mlv-editor-highlight" }, { kind: "component", type: MlvEditorLink, selector: "mlv-editor-link", inputs: ["allowedProtocols"] }, { kind: "component", type: MlvEditorImageUpload, selector: "mlv-editor-image-upload" }, { kind: "component", type: MlvEditorTable, selector: "mlv-editor-table" }, { kind: "component", type: MlvEditorAlignment, selector: "mlv-editor-alignment" }, { kind: "component", type: MlvEditorBlockInsert, selector: "mlv-editor-block-insert" }, { kind: "component", type: MlvEditorToolbarOverflow, selector: "mlv-editor-toolbar-overflow" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvEditorToolbar, decorators: [{
-            type: Component,
-            args: [{ selector: 'mlv-editor-toolbar', host: {
-                        class: 'mlv-editor-toolbar',
-                        '[class.mlv-editor-toolbar--disabled]': 'disabled() || context().disabled()',
-                    }, imports: [
-                        NgTemplateOutlet,
-                        MlvFade,
-                        MlvToolbar,
-                        MlvDivider,
-                        MlvEditorToolbarRoot,
-                        MlvEditorUndoRedo,
-                        MlvEditorZoom,
-                        MlvEditorHeading,
-                        MlvEditorList,
-                        MlvEditorInlineMarks,
-                        MlvEditorTextColor,
-                        MlvEditorHighlight,
-                        MlvEditorLink,
-                        MlvEditorImageUpload,
-                        MlvEditorTable,
-                        MlvEditorAlignment,
-                        MlvEditorBlockInsert,
-                        MlvEditorToolbarOverflow,
-                    ], template: `<div
-    mlvEditorToolbarRoot
-    #toolbarRoot="mlvEditorToolbarRoot"
-    [ariaLabel]="ariaLabel()"
-    [disabled]="disabled() || context().disabled()"
-  >
-    <ng-content select="[mlvEditorToolbarStart]" />
-    @if (startTemplate(); as template) {
-      <ng-container
-        [ngTemplateOutlet]="template"
-        [ngTemplateOutletContext]="{ $implicit: context() }"
-      />
-    }
-    <div mlvFade class="mlv-editor-toolbar__scroll">
-      <mlv-toolbar>
-        <mlv-editor-undo-redo />
-        <mlv-divider
-          class="mlv-editor-toolbar__separator"
-          orientation="vertical"
-          muted
-        />
-        <mlv-editor-zoom />
-        <mlv-divider
-          class="mlv-editor-toolbar__separator"
-          orientation="vertical"
-          muted
-        />
-        <mlv-editor-heading />
-        <mlv-editor-list />
-        <mlv-divider
-          class="mlv-editor-toolbar__separator"
-          orientation="vertical"
-          muted
-          [hidden]="toolbarRoot.narrow()"
-        />
-        <mlv-editor-inline-marks [hidden]="toolbarRoot.narrow()" />
-        <mlv-divider
-          class="mlv-editor-toolbar__separator"
-          orientation="vertical"
-          muted
-          [hidden]="toolbarRoot.narrow()"
-        />
-        <mlv-editor-text-color />
-        <mlv-editor-highlight />
-        <mlv-divider
-          class="mlv-editor-toolbar__separator"
-          orientation="vertical"
-          muted
-          [hidden]="toolbarRoot.narrow()"
-        />
-        <mlv-editor-alignment [hidden]="toolbarRoot.narrow()" />
-        <mlv-divider
-          class="mlv-editor-toolbar__separator"
-          orientation="vertical"
-          muted
-          [hidden]="toolbarRoot.narrow()"
-        />
-        <mlv-editor-link />
-        <mlv-editor-table />
-        <mlv-divider
-          class="mlv-editor-toolbar__separator"
-          orientation="vertical"
-          muted
-          [hidden]="toolbarRoot.narrow()"
-        />
-        <mlv-editor-block-insert [hidden]="toolbarRoot.narrow()" />
-        <mlv-divider
-          class="mlv-editor-toolbar__separator"
-          orientation="vertical"
-          muted
-          [hidden]="toolbarRoot.narrow()"
-        />
-        <mlv-editor-image-upload />
-      </mlv-toolbar>
-    </div>
-    <mlv-editor-toolbar-overflow />
-    @if (endTemplate(); as template) {
-      <ng-container
-        [ngTemplateOutlet]="template"
-        [ngTemplateOutletContext]="{ $implicit: context() }"
-      />
-    }
-    <ng-content select="[mlvEditorToolbarEnd]" /><ng-content />
-  </div>`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        MlvEditorOverlayRegistry,
-                        MlvEditorToolbarRevision,
-                        MlvEditorToolbarRovingRegistry,
-                        MlvEditorToolbarContextProxy,
-                        {
-                            provide: MLV_EDITOR_OVERLAY_REGISTRY,
-                            useExisting: MlvEditorOverlayRegistry,
-                        },
-                        {
-                            provide: MLV_EDITOR_TOOLBAR_CONTEXT,
-                            useExisting: MlvEditorToolbarContextProxy,
-                        },
-                        {
-                            provide: MLV_EDITOR_TOOLBAR_REVISION,
-                            useFactory: (state) => state.revision,
-                            deps: [MlvEditorToolbarRevision],
-                        },
-                        {
-                            provide: MLV_EDITOR_TOOLBAR_ROVING,
-                            useExisting: MlvEditorToolbarRovingRegistry,
-                        },
-                    ], styles: [".mlv-editor-toolbar{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-typography-body-m-size)}.mlv-editor-toolbar *{box-sizing:border-box}.mlv-editor-toolbar{display:flex;align-items:center;min-width:0;overflow:hidden}.mlv-editor-toolbar [hidden]{display:none!important}.mlv-editor-toolbar__scroll{flex:1 1 auto;min-width:0}.mlv-editor-toolbar__scroll>.mlv-toolbar{width:max-content;min-width:100%;flex-wrap:nowrap}.mlv-editor-toolbar__separator{flex:0 0 auto;align-self:stretch;min-height:var(--mlv-height-s);margin-inline:var(--mlv-spacing-1)}.mlv-editor-toolbar__overflow,.mlv-editor-toolbar .mlv-editor-undo-redo,.mlv-editor-toolbar .mlv-editor-inline-marks,.mlv-editor-toolbar .mlv-editor-block-insert{display:inline-flex;flex:0 0 auto;flex-direction:row;align-items:center;gap:var(--mlv-spacing-1)}.mlv-editor-toolbar mlv-editor-zoom,.mlv-editor-toolbar mlv-editor-heading,.mlv-editor-toolbar mlv-editor-list,.mlv-editor-toolbar mlv-editor-text-color,.mlv-editor-toolbar mlv-editor-highlight,.mlv-editor-toolbar mlv-editor-alignment,.mlv-editor-toolbar mlv-editor-link,.mlv-editor-toolbar mlv-editor-table,.mlv-editor-toolbar mlv-editor-image-upload{flex:0 0 auto}.mlv-editor-toolbar--disabled{opacity:var(--mlv-disabled-opacity)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], startTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "startTemplate", required: false }] }], endTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "endTemplate", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: true }] }] } });
-//# sourceMappingURL=editor-toolbar.js.map