ngwr 14.9.0 → 14.10.0

package/fesm2022/ngwr-editor.mjs

@@ -1821,6 +1821,16 @@ function withoutMarks(node, known) {
  * editor is read-only and carries `wr-editor--refused`: the model still holds the
  * refused value, and an edit would write the document on screen over it.
  *
+ * **`readonly` never mounts ProseMirror.** The document is drawn as ordinary
+ * Angular markup instead — the same rendering the server prerenders — so a page
+ * showing thirty saved comments boots no editor at all, and the headings, lists
+ * and tables of what it shows stay in the accessibility tree rather than being
+ * swallowed by a textbox, every descendant of which is presentational. It is
+ * lazy, not permanent: the first time `readonly` is lifted the editor mounts,
+ * and from there behaves exactly as one that never was read-only. Setting it
+ * again keeps the mounted view — throwing a live session's undo history away to
+ * save one view would cost more than the view.
+ *
  * Headings stop at three levels: an h4–h6 read from HTML or markdown becomes an
  * h3 rather than a paragraph. Underline exists in `html` and `json` only —
  * markdown cannot spell it, so in that format the tool, the shortcut and the mark
@@ -1859,13 +1869,22 @@ class WrEditor {
      */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
     /**
-     * Refuse edits while the text stays focusable, selectable and announced.
+     * Refuse edits while the text stays reachable, selectable and announced.
      * Bound automatically from the field's readonly state when used with
      * `[formField]`.
      *
-     * The surface keeps its tab stop and reports `aria-readonly`; typing, paste,
-     * drop, the shortcuts and every toolbar command are refused. The toolbar goes
-     * inert, since none of its tools can apply.
+     * Set before the editor mounts, it means ProseMirror is never started: the
+     * document is drawn as ordinary markup in a focusable `role="group"` that
+     * keeps the tab stop and carries the editor's name, so a viewer costs no
+     * editor and the structure of what it shows is still announced. `aria-readonly`
+     * is deliberately absent there — ARIA does not allow it on `group`, and
+     * `aria-disabled`, the only attribute that would apply, means something else —
+     * so the cue is the `wr-editor--readonly` class. The toolbar goes inert, since
+     * none of its tools can apply; a pure viewer binds `[toolbar]="false"`.
+     *
+     * A view that is already mounted stays mounted, refuses typing, paste, drop,
+     * the shortcuts and every toolbar command, and reports `aria-readonly` on its
+     * surface as before.
      *
      * @default false
      */
@@ -1878,7 +1897,8 @@ class WrEditor {
     placeholder = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     /**
-     * Accessible name of the text surface. Falls back to the surrounding
+     * Accessible name of the text — of the surface, or of the document a
+     * read-only editor draws in its place. Falls back to the surrounding
      * `<wr-form-field>`'s label, then to `editor.label`.
      */
     ariaLabel = input(null, /* @ts-ignore */
@@ -1934,6 +1954,13 @@ class WrEditor {
     /** ProseMirror owns the surface from here on; until then the preview stands in. */
     mounted = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "mounted" }] : /* istanbul ignore next */ []));
+    /**
+     * Read-only and nothing mounted: the preview is not standing in for a surface,
+     * it IS the editor, and the surface is not rendered at all. One id, one name
+     * and one tab stop move onto it with the job. @internal
+     */
+    staticMode = computed(() => !this.mounted() && this.readonly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "staticMode" }] : /* istanbul ignore next */ []));
     focused = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
     editorState = signal(null, /* @ts-ignore */
@@ -1953,8 +1980,12 @@ class WrEditor {
     /** Apple keyboards name the modifier ⌘. Read in the browser only — see `mount()`. */
     apple = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "apple" }] : /* istanbul ignore next */ []));
-    surface = viewChild.required('surface', /* @ts-ignore */
+    // Optional, both of them: exactly one is in the DOM at a time, and which one
+    // is the difference between a mounted editor and the static document.
+    surface = viewChild('surface', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
+    staticDoc = viewChild('staticDoc', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "staticDoc" }] : /* istanbul ignore next */ []));
     // `read`, because `#tool` sits on a `wr-btn` and would otherwise resolve to the component.
     toolButtons = viewChildren('tool', { ...(ngDevMode ? { debugName: "toolButtons" } : /* istanbul ignore next */ {}), read: ElementRef });
     linkPopover = viewChild('linkPopover', /* @ts-ignore */
@@ -1970,6 +2001,12 @@ class WrEditor {
      */
     lastSerialized = undefined;
     linkToSurface = false;
+    /**
+     * Whether the static path has already named the refusal the model is holding.
+     * A read-only editor reports one itself, and a mount that follows would
+     * otherwise warn a second time about the same value.
+     */
+    refusalWarned = false;
     // Labels
     toolbarLabel = readI18nText('editor.toolbar', 'Formatting');
     linkUrlLabel = readI18nText('editor.linkUrl', 'Link address');
@@ -2092,7 +2129,12 @@ class WrEditor {
         list_item: listItemView({ done: this.taskDoneLabel(), todo: this.taskTodoLabel() }),
     }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "nodeViews" }] : /* istanbul ignore next */ []));
-    ariaPlaceholder = computed(() => (this.placeholder() && this.empty() ? this.placeholder() : null), /* @ts-ignore */
+    /**
+     * Nothing in the static mode: a hint for input, where no input is taken, and
+     * `aria-placeholder` is not among the attributes `role="group"` allows — so
+     * one drawn there would be text no screen reader ever reaches.
+     */
+    ariaPlaceholder = computed(() => this.placeholder() && this.empty() && !this.staticMode() ? this.placeholder() : null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaPlaceholder" }] : /* istanbul ignore next */ []));
     // Link panel
     linkDraft = signal('', /* @ts-ignore */
@@ -2101,9 +2143,10 @@ class WrEditor {
     linkActive = computed(() => this.toolStates().get('link')?.active ?? false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "linkActive" }] : /* istanbul ignore next */ []));
     /**
-     * The value rendered by Angular until ProseMirror takes over: on the server,
-     * and for the first browser frame. Read from the doc JSON, so it shows exactly
-     * what the schema kept — the same sanitised document the editor will mount.
+     * The value rendered by Angular rather than by ProseMirror: on the server, for
+     * the first browser frame, and — for as long as it lasts — in the static mode,
+     * where no mount is coming. Read from the doc JSON, so it shows exactly what
+     * the schema kept: the same sanitised document the editor would mount.
      */
     preview = computed(() => {
         if (this.mounted())
@@ -2113,7 +2156,8 @@ class WrEditor {
             return readValue(this.value(), format, editorSchema(format), this.document).toJSON();
         }
         catch (error) {
-            // The browser warns once, when it mounts; the server has no mount to wait for.
+            // The browser warns from `sync()` — at the mount, or at the write itself
+            // while read-only; the server has neither to wait for.
             if (!this.isBrowser && isDevMode())
                 this.warnRefused(format, error);
             return null;
@@ -2170,9 +2214,22 @@ class WrEditor {
         // flag, not on `PLATFORM_ID`, so a platform test would still run it.
         if (!this.isBrowser)
             return;
-        afterNextRender(() => this.mount());
+        // Mount on the first render that is not read-only — usually the very first
+        // one, and otherwise the one that lifts `readonly`. A WRITE phase, so the
+        // surface the template puts back is already in the DOM by the time
+        // `mount()` looks for it; `mount()` itself happens once and never undoes.
+        afterRenderEffect({
+            write: () => {
+                if (!this.readonly())
+                    this.mount();
+            },
+        });
     }
-    /** Focus the text surface — what Signal Forms calls to focus this control. */
+    /**
+     * Focus the editor — what Signal Forms calls to focus this control. Whatever
+     * is on screen takes it: the mounted surface, or the static document, which
+     * keeps a tab stop for exactly this reason.
+     */
     focus(options) {
         const view = this.view;
         // ProseMirror's own `focus()` is a no-op while the view is not editable,
@@ -2180,7 +2237,7 @@ class WrEditor {
         if (view?.editable)
             view.focus();
         else
-            this.surface().nativeElement.focus(options);
+            (this.surface() ?? this.staticDoc())?.nativeElement.focus(options);
     }
     // Template handlers
     label(tool) {
@@ -2387,6 +2444,15 @@ class WrEditor {
         return !this.readonly() && !this.disabled() && !this.refused();
     }
     mount() {
+        // Once and for all: a second call would drop a live document, and going
+        // back to read-only is not a reason to throw a session's history away.
+        if (this.view)
+            return;
+        // The template draws the surface in every state but the static one, which
+        // this is never called out of — after the render that puts it back.
+        const surface = this.surface();
+        if (!surface)
+            return;
         this.apple.set((this.platform.userAgent ?? '').toLowerCase().includes('mac'));
         const format = untracked(this.resolvedFormat);
         const value = untracked(this.value);
@@ -2396,14 +2462,15 @@ class WrEditor {
             doc = readValue(value, format, schema, this.document);
         }
         catch (error) {
-            if (isDevMode())
+            // Never twice for a refusal the static path has already named.
+            if (isDevMode() && !this.refusalWarned)
                 this.warnRefused(format, error);
             doc = schema.topNodeType.createAndFill();
             // An empty document over a stored value: see `refused`.
             this.refused.set(true);
         }
         const state = this.createState(doc);
-        this.view = new EditorView({ mount: this.surface().nativeElement }, {
+        this.view = new EditorView({ mount: surface.nativeElement }, {
             state,
             editable: () => untracked(() => this.canEdit()),
             dispatchTransaction: tr => this.dispatch(tr),
@@ -2464,8 +2531,16 @@ class WrEditor {
      */
     sync(value, format) {
         const view = this.view;
-        if (!view)
+        if (!view) {
+            // Nothing to bring it into. `preview()` redraws it either way; what it
+            // cannot do is REPORT a value it could not read, and in the static mode
+            // no mount is coming to do that — so the check happens here instead.
+            // Before a mount that IS coming it is `mount()` that reports, and on the
+            // server `preview()` does, each exactly once.
+            if (this.isBrowser && untracked(this.readonly))
+                this.readStatically(value, format);
             return;
+        }
         if (format === this.viewFormat && value === this.lastSerialized)
             return;
         const schema = editorSchema(format);
@@ -2492,6 +2567,30 @@ class WrEditor {
         this.viewFormat = format;
         this.replaceState(doc);
     }
+    /**
+     * The check `mount()` makes, made without a mount: the same warning and the
+     * same `refused` flag, so an unreadable value is refused whether or not
+     * ProseMirror ever starts. Without it a read-only editor met one with silence
+     * — `preview()` renders nothing for a document it cannot read, and the model
+     * goes on holding a value nothing has said a word about.
+     *
+     * The parsed document is dropped; `preview()` reads its own. The cost is one
+     * extra parse per write, and only while read-only, where a write is rare.
+     */
+    readStatically(value, format) {
+        try {
+            readValue(value, format, editorSchema(format), this.document);
+            this.refused.set(false);
+            this.refusalWarned = false;
+        }
+        catch (error) {
+            if (isDevMode()) {
+                this.warnRefused(format, error);
+                this.refusalWarned = true;
+            }
+            this.refused.set(true);
+        }
+    }
     /**
      * A new format whose value could not be read: keep the document, moved into
      * the new format's schema — markdown's lacks underline, so that mark is
@@ -2580,7 +2679,7 @@ class WrEditor {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: WrEditor, isStandalone: true, selector: "wr-editor", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { listeners: { "focusout": "onFocusOut($event)" }, properties: { "class": "classes()" } }, providers: [
             { provide: WrEditorLinkField, useFactory: () => new WrEditorLinkField() },
             { provide: WR_FORM_FIELD, useExisting: WrEditorLinkField },
-        ], viewQueries: [{ propertyName: "surface", first: true, predicate: ["surface"], descendants: true, isSignal: true }, { propertyName: "toolButtons", predicate: ["tool"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "linkPopover", first: true, predicate: ["linkPopover"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (tools().length) {\n  <div class=\"wr-editor__toolbar\" role=\"toolbar\" [attr.aria-label]=\"toolbarLabel()\" [attr.aria-controls]=\"surfaceId\">\n    @for (item of tools(); track $index; let n = $index) {\n      @if (item === '|') {\n        <span class=\"wr-editor__separator\" aria-hidden=\"true\"></span>\n      } @else if (item === 'link') {\n        <!-- The link button hosts the link panel, so it carries the popover's own\n             `aria-haspopup` / `aria-expanded` / `aria-controls` \u2014 and no tooltip,\n             since one element cannot host `[wrPopover]` twice; its name and\n             `aria-keyshortcuts` still say what the others' tooltips say. No\n             `aria-pressed` either: a button that opens a popup is not a toggle,\n             and the panel's remove button is where \"in a link\" is announced. -->\n        <button\n          #tool\n          #linkPopover=\"wrPopover\"\n          wr-btn\n          type=\"button\"\n          class=\"wr-editor__tool\"\n          [class.wr-editor__tool--active]=\"state(item)?.active\"\n          [disabled]=\"!state(item)?.available\"\n          [attr.aria-label]=\"label(item)\"\n          [attr.aria-keyshortcuts]=\"keyShortcuts(item)\"\n          [wrPopover]=\"linkPanel\"\n          [ariaLabel]=\"label(item)\"\n          (opened)=\"onLinkOpened()\"\n          (closed)=\"onLinkClosed()\"\n          (focus)=\"onToolFocus(buttonIndex()[n])\"\n          (keydown)=\"onToolbarKeydown($event)\"\n          (mousedown)=\"$event.preventDefault()\"\n        >\n          <svg\n            class=\"wr-editor__icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            @for (d of icon(item); track $index) {\n              <path [attr.d]=\"d\" />\n            }\n          </svg>\n        </button>\n      } @else {\n        <button\n          #tool\n          wr-btn\n          type=\"button\"\n          class=\"wr-editor__tool\"\n          mode=\"tooltip\"\n          [class.wr-editor__tool--active]=\"state(item)?.active\"\n          [disabled]=\"!state(item)?.available\"\n          [attr.aria-pressed]=\"isToggle(item) ? (state(item)?.active ? 'true' : 'false') : null\"\n          [attr.aria-label]=\"label(item)\"\n          [attr.aria-keyshortcuts]=\"keyShortcuts(item)\"\n          [wrPopover]=\"tooltip(item)\"\n          (click)=\"onToolClick(item, $event)\"\n          (focus)=\"onToolFocus(buttonIndex()[n])\"\n          (keydown)=\"onToolbarKeydown($event)\"\n          (mousedown)=\"$event.preventDefault()\"\n        >\n          <svg\n            class=\"wr-editor__icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            @for (d of icon(item); track $index) {\n              <path [attr.d]=\"d\" />\n            }\n          </svg>\n        </button>\n      }\n    }\n  </div>\n}\n\n<!--\n  The static preview: what Angular renders until ProseMirror mounts \u2014 on the\n  server, and for the first browser frame. It is a SIBLING of the mount surface,\n  never inside it: `{ mount }` replaces the element's children, and nodes Angular\n  owns would be deleted out from under the next change detection.\n-->\n@if (preview(); as doc) {\n  <div class=\"wr-editor__preview wr-editor__content\">\n    <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: doc.content }\" />\n  </div>\n}\n\n<!--\n  The mount surface. Angular binds every attribute it needs, so the prerendered\n  page and the synchronous first render already carry the role, the name and the\n  field's error state; ProseMirror adds only its own class, `contenteditable` and\n  `translate`, and never touches an attribute it did not set. No Angular child\n  ever lives in here.\n-->\n<div\n  #surface\n  class=\"wr-editor__surface wr-editor__content\"\n  role=\"textbox\"\n  aria-multiline=\"true\"\n  [id]=\"surfaceId\"\n  [hidden]=\"!mounted()\"\n  [attr.aria-label]=\"accessibleName()\"\n  [attr.aria-labelledby]=\"labelledBy()\"\n  [attr.aria-describedby]=\"fieldAria.describedBy()\"\n  [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n  [attr.aria-readonly]=\"locked() && !disabled() ? 'true' : null\"\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n  [attr.aria-placeholder]=\"ariaPlaceholder()\"\n  [attr.tabindex]=\"locked() && !disabled() ? 0 : null\"\n  (focus)=\"focused.set(true)\"\n  (blur)=\"focused.set(false)\"\n></div>\n\n<!--\n  The popover styles its panel as `.wr-popover-overlay > *`, which is this form,\n  so the form stays a plain block and the layout lives one level in.\n-->\n<ng-template #linkPanel>\n  <form\n    class=\"wr-editor-link\"\n    novalidate\n    [id]=\"linkField.panelId\"\n    (submit)=\"applyLink($event)\"\n    (focusout)=\"onFocusOut($event)\"\n  >\n    <div class=\"wr-editor-link__body\">\n      <label class=\"wr-editor-link__label\" [attr.for]=\"linkField.controlId()\">{{ linkUrlLabel() }}</label>\n      <input\n        wrInput\n        class=\"wr-editor-link__input\"\n        type=\"text\"\n        inputmode=\"url\"\n        autocomplete=\"url\"\n        spellcheck=\"false\"\n        [value]=\"linkDraft()\"\n        (input)=\"onLinkInput($event)\"\n      />\n      @if (linkField.invalid()) {\n        <p class=\"wr-editor-link__error\" role=\"alert\" [id]=\"linkField.errorId\">{{ linkInvalidLabel() }}</p>\n      }\n      <div class=\"wr-editor-link__actions\">\n        @if (linkActive()) {\n          <button wr-btn type=\"button\" class=\"wr-editor-link__remove\" (click)=\"removeLink()\">\n            {{ linkRemoveLabel() }}\n          </button>\n        }\n        <button wr-btn type=\"submit\" color=\"primary\" class=\"wr-editor-link__apply\">{{ linkApplyLabel() }}</button>\n      </div>\n    </div>\n  </form>\n</ng-template>\n\n<!--\n  Recursion runs through `ngTemplateOutlet`, as in `<wr-markdown>`, so the preview\n  is exactly the document with no wrapper between a `<ul>` and its `<li>`.\n-->\n<ng-template #previewBlocks let-raw>\n  @for (node of nodesOf(raw); track $index) {\n    @switch (node.type) {\n      @case ('paragraph') {\n        <p [class.wr-editor__placeholder]=\"ariaPlaceholder() !== null\" [attr.data-placeholder]=\"ariaPlaceholder()\">\n          <ng-container [ngTemplateOutlet]=\"previewInline\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n        </p>\n      }\n      @case ('heading') {\n        @switch (attr(node, 'level')) {\n          @case (2) {\n            <h2>\n              <ng-container\n                [ngTemplateOutlet]=\"previewInline\"\n                [ngTemplateOutletContext]=\"{ $implicit: node.content }\"\n              />\n            </h2>\n          }\n          @case (3) {\n            <h3>\n              <ng-container\n                [ngTemplateOutlet]=\"previewInline\"\n                [ngTemplateOutletContext]=\"{ $implicit: node.content }\"\n              />\n            </h3>\n          }\n          @default {\n            <h1>\n              <ng-container\n                [ngTemplateOutlet]=\"previewInline\"\n                [ngTemplateOutletContext]=\"{ $implicit: node.content }\"\n              />\n            </h1>\n          }\n        }\n      }\n      @case ('blockquote') {\n        <blockquote>\n          <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n        </blockquote>\n      }\n      @case ('code_block') {\n        <pre><code>{{ textOf(node) }}</code></pre>\n      }\n      @case ('horizontal_rule') {\n        <hr />\n      }\n      @case ('bullet_list') {\n        <ul>\n          <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n        </ul>\n      }\n      @case ('ordered_list') {\n        <ol [attr.start]=\"attr(node, 'order') === 1 ? null : attr(node, 'order')\">\n          <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n        </ol>\n      }\n      @case ('list_item') {\n        @let checked = attr(node, 'checked');\n        @if (checked === null) {\n          <li>\n            <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n          </li>\n        } @else {\n          <li class=\"wr-editor__item wr-editor__item--task\" [attr.data-checked]=\"checked\">\n            <span class=\"wr-editor__task\" [class.wr-editor__task--checked]=\"checked === true\" aria-hidden=\"true\"></span>\n            <span class=\"wr-editor__sr-only\">{{ checked === true ? taskDoneLabel() : taskTodoLabel() }}</span>\n            <div class=\"wr-editor__task-body\">\n              <ng-container\n                [ngTemplateOutlet]=\"previewBlocks\"\n                [ngTemplateOutletContext]=\"{ $implicit: node.content }\"\n              />\n            </div>\n          </li>\n        }\n      }\n      @case ('table') {\n        <table>\n          <tbody>\n            <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n          </tbody>\n        </table>\n      }\n      @case ('table_row') {\n        <tr>\n          <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n        </tr>\n      }\n      @case ('table_header') {\n        <th [style.text-align]=\"text(node, 'align')\">\n          <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n        </th>\n      }\n      @case ('table_cell') {\n        <td [style.text-align]=\"text(node, 'align')\">\n          <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n        </td>\n      }\n    }\n  }\n</ng-template>\n\n<ng-template #previewInline let-raw>\n  @for (node of nodesOf(raw); track $index) {\n    <ng-container [ngTemplateOutlet]=\"previewMarked\" [ngTemplateOutletContext]=\"{ $implicit: node, depth: 0 }\" />\n  }\n</ng-template>\n\n<!-- One mark per level, outermost first \u2014 the order the schema ranks them in. -->\n<ng-template #previewMarked let-raw let-depth=\"depth\">\n  @let node = nodeOf(raw);\n  @let mark = markAt(node, depth);\n  @if (mark) {\n    @switch (mark.type) {\n      @case ('link') {\n        <a [href]=\"text(mark, 'href')\" [attr.title]=\"text(mark, 'title')\" rel=\"noopener noreferrer nofollow\"\n          ><ng-container\n            [ngTemplateOutlet]=\"previewMarked\"\n            [ngTemplateOutletContext]=\"{ $implicit: node, depth: depth + 1 }\"\n        /></a>\n      }\n      @case ('strong') {\n        <strong\n          ><ng-container\n            [ngTemplateOutlet]=\"previewMarked\"\n            [ngTemplateOutletContext]=\"{ $implicit: node, depth: depth + 1 }\"\n        /></strong>\n      }\n      @case ('em') {\n        <em\n          ><ng-container\n            [ngTemplateOutlet]=\"previewMarked\"\n            [ngTemplateOutletContext]=\"{ $implicit: node, depth: depth + 1 }\"\n        /></em>\n      }\n      @case ('underline') {\n        <u\n          ><ng-container\n            [ngTemplateOutlet]=\"previewMarked\"\n            [ngTemplateOutletContext]=\"{ $implicit: node, depth: depth + 1 }\"\n        /></u>\n      }\n      @case ('strike') {\n        <s\n          ><ng-container\n            [ngTemplateOutlet]=\"previewMarked\"\n            [ngTemplateOutletContext]=\"{ $implicit: node, depth: depth + 1 }\"\n        /></s>\n      }\n      @case ('code') {\n        <code\n          ><ng-container\n            [ngTemplateOutlet]=\"previewMarked\"\n            [ngTemplateOutletContext]=\"{ $implicit: node, depth: depth + 1 }\"\n        /></code>\n      }\n      @default {\n        <ng-container\n          [ngTemplateOutlet]=\"previewMarked\"\n          [ngTemplateOutletContext]=\"{ $implicit: node, depth: depth + 1 }\"\n        />\n      }\n    }\n  } @else {\n    @switch (node.type) {\n      @case ('text') {\n        <ng-container>{{ node.text }}</ng-container>\n      }\n      @case ('hard_break') {\n        <br />\n      }\n      @case ('image') {\n        <img [src]=\"text(node, 'src')\" [alt]=\"text(node, 'alt') ?? ''\" [attr.title]=\"text(node, 'title')\" />\n      }\n    }\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: WrButton, selector: "wr-btn, button[wr-btn], a[wr-btn]", inputs: ["color", "size", "shape", "icon", "iconPosition", "disabled", "outlined", "block", "loading", "disabledWhenLoading"] }, { kind: "directive", type: WrInput, selector: "input[wrInput], textarea[wrInput]", inputs: ["size", "rounded"] }, { kind: "directive", type: WrPopover, selector: "[wrPopover]", inputs: ["wrPopover", "mode", "trigger", "position", "showDelay", "hideDelay", "responsive", "ariaLabel"], outputs: ["opened", "closed"], exportAs: ["wrPopover"] }], encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "surface", first: true, predicate: ["surface"], descendants: true, isSignal: true }, { propertyName: "staticDoc", first: true, predicate: ["staticDoc"], descendants: true, isSignal: true }, { propertyName: "toolButtons", predicate: ["tool"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "linkPopover", first: true, predicate: ["linkPopover"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (tools().length) {\n  <div class=\"wr-editor__toolbar\" role=\"toolbar\" [attr.aria-label]=\"toolbarLabel()\" [attr.aria-controls]=\"surfaceId\">\n    @for (item of tools(); track $index; let n = $index) {\n      @if (item === '|') {\n        <span class=\"wr-editor__separator\" aria-hidden=\"true\"></span>\n      } @else if (item === 'link') {\n        <!-- The link button hosts the link panel, so it carries the popover's own\n             `aria-haspopup` / `aria-expanded` / `aria-controls` \u2014 and no tooltip,\n             since one element cannot host `[wrPopover]` twice; its name and\n             `aria-keyshortcuts` still say what the others' tooltips say. No\n             `aria-pressed` either: a button that opens a popup is not a toggle,\n             and the panel's remove button is where \"in a link\" is announced. -->\n        <button\n          #tool\n          #linkPopover=\"wrPopover\"\n          wr-btn\n          type=\"button\"\n          class=\"wr-editor__tool\"\n          [class.wr-editor__tool--active]=\"state(item)?.active\"\n          [disabled]=\"!state(item)?.available\"\n          [attr.aria-label]=\"label(item)\"\n          [attr.aria-keyshortcuts]=\"keyShortcuts(item)\"\n          [wrPopover]=\"linkPanel\"\n          [ariaLabel]=\"label(item)\"\n          (opened)=\"onLinkOpened()\"\n          (closed)=\"onLinkClosed()\"\n          (focus)=\"onToolFocus(buttonIndex()[n])\"\n          (keydown)=\"onToolbarKeydown($event)\"\n          (mousedown)=\"$event.preventDefault()\"\n        >\n          <svg\n            class=\"wr-editor__icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            @for (d of icon(item); track $index) {\n              <path [attr.d]=\"d\" />\n            }\n          </svg>\n        </button>\n      } @else {\n        <button\n          #tool\n          wr-btn\n          type=\"button\"\n          class=\"wr-editor__tool\"\n          mode=\"tooltip\"\n          [class.wr-editor__tool--active]=\"state(item)?.active\"\n          [disabled]=\"!state(item)?.available\"\n          [attr.aria-pressed]=\"isToggle(item) ? (state(item)?.active ? 'true' : 'false') : null\"\n          [attr.aria-label]=\"label(item)\"\n          [attr.aria-keyshortcuts]=\"keyShortcuts(item)\"\n          [wrPopover]=\"tooltip(item)\"\n          (click)=\"onToolClick(item, $event)\"\n          (focus)=\"onToolFocus(buttonIndex()[n])\"\n          (keydown)=\"onToolbarKeydown($event)\"\n          (mousedown)=\"$event.preventDefault()\"\n        >\n          <svg\n            class=\"wr-editor__icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            @for (d of icon(item); track $index) {\n              <path [attr.d]=\"d\" />\n            }\n          </svg>\n        </button>\n      }\n    }\n  </div>\n}\n\n<!--\n  The document drawn by Angular, in either of the two ways it stands on screen.\n\n  In the STATIC mode \u2014 read-only with nothing mounted \u2014 it is the editor, for as\n  long as `readonly` holds, so it takes the id, the name, the field's state and\n  the tab stop the surface below would have carried, and that surface is not\n  rendered at all: two elements with one id, or a nameless empty textbox beside\n  the text, is what rendering both would mean. A focusable `role=\"group\"` and not\n  a textbox, because every descendant of a textbox is presentational \u2014 the\n  headings, lists and tables being shown would stop being announced, which is the\n  whole point of showing a document. No `aria-readonly`: ARIA does not allow it\n  on `group`, and `.wr-editor--readonly` on the host is the cue instead.\n\n  Otherwise it is the preview that stands in until ProseMirror mounts \u2014 on the\n  server, and for the first browser frame \u2014 and carries nothing of the surface's.\n\n  Either way it is a SIBLING of the mount surface, never inside it: `{ mount }`\n  replaces the element's children, and nodes Angular owns would be deleted out\n  from under the next change detection.\n-->\n@if (staticMode()) {\n  <div\n    #staticDoc\n    class=\"wr-editor__preview wr-editor__preview--static wr-editor__content\"\n    role=\"group\"\n    [id]=\"surfaceId\"\n    [attr.aria-label]=\"accessibleName()\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-describedby]=\"fieldAria.describedBy()\"\n    [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n    [attr.tabindex]=\"disabled() ? null : 0\"\n    (focus)=\"focused.set(true)\"\n    (blur)=\"focused.set(false)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"previewContent\" />\n  </div>\n} @else {\n  @if (preview()) {\n    <div class=\"wr-editor__preview wr-editor__content\">\n      <ng-container [ngTemplateOutlet]=\"previewContent\" />\n    </div>\n  }\n\n  <!--\n    The mount surface. Angular binds every attribute it needs, so the prerendered\n    page and the synchronous first render already carry the role, the name and the\n    field's error state; ProseMirror adds only its own class, `contenteditable` and\n    `translate`, and never touches an attribute it did not set. No Angular child\n    ever lives in here.\n  -->\n  <div\n    #surface\n    class=\"wr-editor__surface wr-editor__content\"\n    role=\"textbox\"\n    aria-multiline=\"true\"\n    [id]=\"surfaceId\"\n    [hidden]=\"!mounted()\"\n    [attr.aria-label]=\"accessibleName()\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-describedby]=\"fieldAria.describedBy()\"\n    [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n    [attr.aria-readonly]=\"locked() && !disabled() ? 'true' : null\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n    [attr.aria-placeholder]=\"ariaPlaceholder()\"\n    [attr.tabindex]=\"locked() && !disabled() ? 0 : null\"\n    (focus)=\"focused.set(true)\"\n    (blur)=\"focused.set(false)\"\n  ></div>\n}\n\n<!-- The document itself, written once for both of the containers above. -->\n<ng-template #previewContent>\n  <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: preview()?.content }\" />\n</ng-template>\n\n<!--\n  The popover styles its panel as `.wr-popover-overlay > *`, which is this form,\n  so the form stays a plain block and the layout lives one level in.\n-->\n<ng-template #linkPanel>\n  <form\n    class=\"wr-editor-link\"\n    novalidate\n    [id]=\"linkField.panelId\"\n    (submit)=\"applyLink($event)\"\n    (focusout)=\"onFocusOut($event)\"\n  >\n    <div class=\"wr-editor-link__body\">\n      <label class=\"wr-editor-link__label\" [attr.for]=\"linkField.controlId()\">{{ linkUrlLabel() }}</label>\n      <input\n        wrInput\n        class=\"wr-editor-link__input\"\n        type=\"text\"\n        inputmode=\"url\"\n        autocomplete=\"url\"\n        spellcheck=\"false\"\n        [value]=\"linkDraft()\"\n        (input)=\"onLinkInput($event)\"\n      />\n      @if (linkField.invalid()) {\n        <p class=\"wr-editor-link__error\" role=\"alert\" [id]=\"linkField.errorId\">{{ linkInvalidLabel() }}</p>\n      }\n      <div class=\"wr-editor-link__actions\">\n        @if (linkActive()) {\n          <button wr-btn type=\"button\" class=\"wr-editor-link__remove\" (click)=\"removeLink()\">\n            {{ linkRemoveLabel() }}\n          </button>\n        }\n        <button wr-btn type=\"submit\" color=\"primary\" class=\"wr-editor-link__apply\">{{ linkApplyLabel() }}</button>\n      </div>\n    </div>\n  </form>\n</ng-template>\n\n<!--\n  Recursion runs through `ngTemplateOutlet`, as in `<wr-markdown>`, so the preview\n  is exactly the document with no wrapper between a `<ul>` and its `<li>`.\n-->\n<ng-template #previewBlocks let-raw>\n  @for (node of nodesOf(raw); track $index) {\n    @switch (node.type) {\n      @case ('paragraph') {\n        <p [class.wr-editor__placeholder]=\"ariaPlaceholder() !== null\" [attr.data-placeholder]=\"ariaPlaceholder()\">\n          <ng-container [ngTemplateOutlet]=\"previewInline\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n        </p>\n      }\n      @case ('heading') {\n        @switch (attr(node, 'level')) {\n          @case (2) {\n            <h2>\n              <ng-container\n                [ngTemplateOutlet]=\"previewInline\"\n                [ngTemplateOutletContext]=\"{ $implicit: node.content }\"\n              />\n            </h2>\n          }\n          @case (3) {\n            <h3>\n              <ng-container\n                [ngTemplateOutlet]=\"previewInline\"\n                [ngTemplateOutletContext]=\"{ $implicit: node.content }\"\n              />\n            </h3>\n          }\n          @default {\n            <h1>\n              <ng-container\n                [ngTemplateOutlet]=\"previewInline\"\n                [ngTemplateOutletContext]=\"{ $implicit: node.content }\"\n              />\n            </h1>\n          }\n        }\n      }\n      @case ('blockquote') {\n        <blockquote>\n          <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n        </blockquote>\n      }\n      @case ('code_block') {\n        <pre><code>{{ textOf(node) }}</code></pre>\n      }\n      @case ('horizontal_rule') {\n        <hr />\n      }\n      @case ('bullet_list') {\n        <ul>\n          <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n        </ul>\n      }\n      @case ('ordered_list') {\n        <ol [attr.start]=\"attr(node, 'order') === 1 ? null : attr(node, 'order')\">\n          <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n        </ol>\n      }\n      @case ('list_item') {\n        @let checked = attr(node, 'checked');\n        @if (checked === null) {\n          <li>\n            <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n          </li>\n        } @else {\n          <li class=\"wr-editor__item wr-editor__item--task\" [attr.data-checked]=\"checked\">\n            <span class=\"wr-editor__task\" [class.wr-editor__task--checked]=\"checked === true\" aria-hidden=\"true\"></span>\n            <span class=\"wr-editor__sr-only\">{{ checked === true ? taskDoneLabel() : taskTodoLabel() }}</span>\n            <div class=\"wr-editor__task-body\">\n              <ng-container\n                [ngTemplateOutlet]=\"previewBlocks\"\n                [ngTemplateOutletContext]=\"{ $implicit: node.content }\"\n              />\n            </div>\n          </li>\n        }\n      }\n      @case ('table') {\n        <table>\n          <tbody>\n            <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n          </tbody>\n        </table>\n      }\n      @case ('table_row') {\n        <tr>\n          <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n        </tr>\n      }\n      @case ('table_header') {\n        <th [style.text-align]=\"text(node, 'align')\">\n          <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n        </th>\n      }\n      @case ('table_cell') {\n        <td [style.text-align]=\"text(node, 'align')\">\n          <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n        </td>\n      }\n    }\n  }\n</ng-template>\n\n<ng-template #previewInline let-raw>\n  @for (node of nodesOf(raw); track $index) {\n    <ng-container [ngTemplateOutlet]=\"previewMarked\" [ngTemplateOutletContext]=\"{ $implicit: node, depth: 0 }\" />\n  }\n</ng-template>\n\n<!-- One mark per level, outermost first \u2014 the order the schema ranks them in. -->\n<ng-template #previewMarked let-raw let-depth=\"depth\">\n  @let node = nodeOf(raw);\n  @let mark = markAt(node, depth);\n  @if (mark) {\n    @switch (mark.type) {\n      @case ('link') {\n        <a [href]=\"text(mark, 'href')\" [attr.title]=\"text(mark, 'title')\" rel=\"noopener noreferrer nofollow\"\n          ><ng-container\n            [ngTemplateOutlet]=\"previewMarked\"\n            [ngTemplateOutletContext]=\"{ $implicit: node, depth: depth + 1 }\"\n        /></a>\n      }\n      @case ('strong') {\n        <strong\n          ><ng-container\n            [ngTemplateOutlet]=\"previewMarked\"\n            [ngTemplateOutletContext]=\"{ $implicit: node, depth: depth + 1 }\"\n        /></strong>\n      }\n      @case ('em') {\n        <em\n          ><ng-container\n            [ngTemplateOutlet]=\"previewMarked\"\n            [ngTemplateOutletContext]=\"{ $implicit: node, depth: depth + 1 }\"\n        /></em>\n      }\n      @case ('underline') {\n        <u\n          ><ng-container\n            [ngTemplateOutlet]=\"previewMarked\"\n            [ngTemplateOutletContext]=\"{ $implicit: node, depth: depth + 1 }\"\n        /></u>\n      }\n      @case ('strike') {\n        <s\n          ><ng-container\n            [ngTemplateOutlet]=\"previewMarked\"\n            [ngTemplateOutletContext]=\"{ $implicit: node, depth: depth + 1 }\"\n        /></s>\n      }\n      @case ('code') {\n        <code\n          ><ng-container\n            [ngTemplateOutlet]=\"previewMarked\"\n            [ngTemplateOutletContext]=\"{ $implicit: node, depth: depth + 1 }\"\n        /></code>\n      }\n      @default {\n        <ng-container\n          [ngTemplateOutlet]=\"previewMarked\"\n          [ngTemplateOutletContext]=\"{ $implicit: node, depth: depth + 1 }\"\n        />\n      }\n    }\n  } @else {\n    @switch (node.type) {\n      @case ('text') {\n        <ng-container>{{ node.text }}</ng-container>\n      }\n      @case ('hard_break') {\n        <br />\n      }\n      @case ('image') {\n        <img [src]=\"text(node, 'src')\" [alt]=\"text(node, 'alt') ?? ''\" [attr.title]=\"text(node, 'title')\" />\n      }\n    }\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: WrButton, selector: "wr-btn, button[wr-btn], a[wr-btn]", inputs: ["color", "size", "shape", "icon", "iconPosition", "disabled", "outlined", "block", "loading", "disabledWhenLoading"] }, { kind: "directive", type: WrInput, selector: "input[wrInput], textarea[wrInput]", inputs: ["size", "rounded"] }, { kind: "directive", type: WrPopover, selector: "[wrPopover]", inputs: ["wrPopover", "mode", "trigger", "position", "showDelay", "hideDelay", "responsive", "ariaLabel"], outputs: ["opened", "closed"], exportAs: ["wrPopover"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrEditor, decorators: [{
             type: Component,
@@ -2590,8 +2689,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     }, providers: [
                         { provide: WrEditorLinkField, useFactory: () => new WrEditorLinkField() },
                         { provide: WR_FORM_FIELD, useExisting: WrEditorLinkField },
-                    ], imports: [NgTemplateOutlet, WrButton, WrInput, WrPopover], template: "@if (tools().length) {\n  <div class=\"wr-editor__toolbar\" role=\"toolbar\" [attr.aria-label]=\"toolbarLabel()\" [attr.aria-controls]=\"surfaceId\">\n    @for (item of tools(); track $index; let n = $index) {\n      @if (item === '|') {\n        <span class=\"wr-editor__separator\" aria-hidden=\"true\"></span>\n      } @else if (item === 'link') {\n        <!-- The link button hosts the link panel, so it carries the popover's own\n             `aria-haspopup` / `aria-expanded` / `aria-controls` \u2014 and no tooltip,\n             since one element cannot host `[wrPopover]` twice; its name and\n             `aria-keyshortcuts` still say what the others' tooltips say. No\n             `aria-pressed` either: a button that opens a popup is not a toggle,\n             and the panel's remove button is where \"in a link\" is announced. -->\n        <button\n          #tool\n          #linkPopover=\"wrPopover\"\n          wr-btn\n          type=\"button\"\n          class=\"wr-editor__tool\"\n          [class.wr-editor__tool--active]=\"state(item)?.active\"\n          [disabled]=\"!state(item)?.available\"\n          [attr.aria-label]=\"label(item)\"\n          [attr.aria-keyshortcuts]=\"keyShortcuts(item)\"\n          [wrPopover]=\"linkPanel\"\n          [ariaLabel]=\"label(item)\"\n          (opened)=\"onLinkOpened()\"\n          (closed)=\"onLinkClosed()\"\n          (focus)=\"onToolFocus(buttonIndex()[n])\"\n          (keydown)=\"onToolbarKeydown($event)\"\n          (mousedown)=\"$event.preventDefault()\"\n        >\n          <svg\n            class=\"wr-editor__icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            @for (d of icon(item); track $index) {\n              <path [attr.d]=\"d\" />\n            }\n          </svg>\n        </button>\n      } @else {\n        <button\n          #tool\n          wr-btn\n          type=\"button\"\n          class=\"wr-editor__tool\"\n          mode=\"tooltip\"\n          [class.wr-editor__tool--active]=\"state(item)?.active\"\n          [disabled]=\"!state(item)?.available\"\n          [attr.aria-pressed]=\"isToggle(item) ? (state(item)?.active ? 'true' : 'false') : null\"\n          [attr.aria-label]=\"label(item)\"\n          [attr.aria-keyshortcuts]=\"keyShortcuts(item)\"\n          [wrPopover]=\"tooltip(item)\"\n          (click)=\"onToolClick(item, $event)\"\n          (focus)=\"onToolFocus(buttonIndex()[n])\"\n          (keydown)=\"onToolbarKeydown($event)\"\n          (mousedown)=\"$event.preventDefault()\"\n        >\n          <svg\n            class=\"wr-editor__icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            @for (d of icon(item); track $index) {\n              <path [attr.d]=\"d\" />\n            }\n          </svg>\n        </button>\n      }\n    }\n  </div>\n}\n\n<!--\n  The static preview: what Angular renders until ProseMirror mounts \u2014 on the\n  server, and for the first browser frame. It is a SIBLING of the mount surface,\n  never inside it: `{ mount }` replaces the element's children, and nodes Angular\n  owns would be deleted out from under the next change detection.\n-->\n@if (preview(); as doc) {\n  <div class=\"wr-editor__preview wr-editor__content\">\n    <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: doc.content }\" />\n  </div>\n}\n\n<!--\n  The mount surface. Angular binds every attribute it needs, so the prerendered\n  page and the synchronous first render already carry the role, the name and the\n  field's error state; ProseMirror adds only its own class, `contenteditable` and\n  `translate`, and never touches an attribute it did not set. No Angular child\n  ever lives in here.\n-->\n<div\n  #surface\n  class=\"wr-editor__surface wr-editor__content\"\n  role=\"textbox\"\n  aria-multiline=\"true\"\n  [id]=\"surfaceId\"\n  [hidden]=\"!mounted()\"\n  [attr.aria-label]=\"accessibleName()\"\n  [attr.aria-labelledby]=\"labelledBy()\"\n  [attr.aria-describedby]=\"fieldAria.describedBy()\"\n  [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n  [attr.aria-readonly]=\"locked() && !disabled() ? 'true' : null\"\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n  [attr.aria-placeholder]=\"ariaPlaceholder()\"\n  [attr.tabindex]=\"locked() && !disabled() ? 0 : null\"\n  (focus)=\"focused.set(true)\"\n  (blur)=\"focused.set(false)\"\n></div>\n\n<!--\n  The popover styles its panel as `.wr-popover-overlay > *`, which is this form,\n  so the form stays a plain block and the layout lives one level in.\n-->\n<ng-template #linkPanel>\n  <form\n    class=\"wr-editor-link\"\n    novalidate\n    [id]=\"linkField.panelId\"\n    (submit)=\"applyLink($event)\"\n    (focusout)=\"onFocusOut($event)\"\n  >\n    <div class=\"wr-editor-link__body\">\n      <label class=\"wr-editor-link__label\" [attr.for]=\"linkField.controlId()\">{{ linkUrlLabel() }}</label>\n      <input\n        wrInput\n        class=\"wr-editor-link__input\"\n        type=\"text\"\n        inputmode=\"url\"\n        autocomplete=\"url\"\n        spellcheck=\"false\"\n        [value]=\"linkDraft()\"\n        (input)=\"onLinkInput($event)\"\n      />\n      @if (linkField.invalid()) {\n        <p class=\"wr-editor-link__error\" role=\"alert\" [id]=\"linkField.errorId\">{{ linkInvalidLabel() }}</p>\n      }\n      <div class=\"wr-editor-link__actions\">\n        @if (linkActive()) {\n          <button wr-btn type=\"button\" class=\"wr-editor-link__remove\" (click)=\"removeLink()\">\n            {{ linkRemoveLabel() }}\n          </button>\n        }\n        <button wr-btn type=\"submit\" color=\"primary\" class=\"wr-editor-link__apply\">{{ linkApplyLabel() }}</button>\n      </div>\n    </div>\n  </form>\n</ng-template>\n\n<!--\n  Recursion runs through `ngTemplateOutlet`, as in `<wr-markdown>`, so the preview\n  is exactly the document with no wrapper between a `<ul>` and its `<li>`.\n-->\n<ng-template #previewBlocks let-raw>\n  @for (node of nodesOf(raw); track $index) {\n    @switch (node.type) {\n      @case ('paragraph') {\n        <p [class.wr-editor__placeholder]=\"ariaPlaceholder() !== null\" [attr.data-placeholder]=\"ariaPlaceholder()\">\n          <ng-container [ngTemplateOutlet]=\"previewInline\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n        </p>\n      }\n      @case ('heading') {\n        @switch (attr(node, 'level')) {\n          @case (2) {\n            <h2>\n              <ng-container\n                [ngTemplateOutlet]=\"previewInline\"\n                [ngTemplateOutletContext]=\"{ $implicit: node.content }\"\n              />\n            </h2>\n          }\n          @case (3) {\n            <h3>\n              <ng-container\n                [ngTemplateOutlet]=\"previewInline\"\n                [ngTemplateOutletContext]=\"{ $implicit: node.content }\"\n              />\n            </h3>\n          }\n          @default {\n            <h1>\n              <ng-container\n                [ngTemplateOutlet]=\"previewInline\"\n                [ngTemplateOutletContext]=\"{ $implicit: node.content }\"\n              />\n            </h1>\n          }\n        }\n      }\n      @case ('blockquote') {\n        <blockquote>\n          <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n        </blockquote>\n      }\n      @case ('code_block') {\n        <pre><code>{{ textOf(node) }}</code></pre>\n      }\n      @case ('horizontal_rule') {\n        <hr />\n      }\n      @case ('bullet_list') {\n        <ul>\n          <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n        </ul>\n      }\n      @case ('ordered_list') {\n        <ol [attr.start]=\"attr(node, 'order') === 1 ? null : attr(node, 'order')\">\n          <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n        </ol>\n      }\n      @case ('list_item') {\n        @let checked = attr(node, 'checked');\n        @if (checked === null) {\n          <li>\n            <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n          </li>\n        } @else {\n          <li class=\"wr-editor__item wr-editor__item--task\" [attr.data-checked]=\"checked\">\n            <span class=\"wr-editor__task\" [class.wr-editor__task--checked]=\"checked === true\" aria-hidden=\"true\"></span>\n            <span class=\"wr-editor__sr-only\">{{ checked === true ? taskDoneLabel() : taskTodoLabel() }}</span>\n            <div class=\"wr-editor__task-body\">\n              <ng-container\n                [ngTemplateOutlet]=\"previewBlocks\"\n                [ngTemplateOutletContext]=\"{ $implicit: node.content }\"\n              />\n            </div>\n          </li>\n        }\n      }\n      @case ('table') {\n        <table>\n          <tbody>\n            <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n          </tbody>\n        </table>\n      }\n      @case ('table_row') {\n        <tr>\n          <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n        </tr>\n      }\n      @case ('table_header') {\n        <th [style.text-align]=\"text(node, 'align')\">\n          <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n        </th>\n      }\n      @case ('table_cell') {\n        <td [style.text-align]=\"text(node, 'align')\">\n          <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n        </td>\n      }\n    }\n  }\n</ng-template>\n\n<ng-template #previewInline let-raw>\n  @for (node of nodesOf(raw); track $index) {\n    <ng-container [ngTemplateOutlet]=\"previewMarked\" [ngTemplateOutletContext]=\"{ $implicit: node, depth: 0 }\" />\n  }\n</ng-template>\n\n<!-- One mark per level, outermost first \u2014 the order the schema ranks them in. -->\n<ng-template #previewMarked let-raw let-depth=\"depth\">\n  @let node = nodeOf(raw);\n  @let mark = markAt(node, depth);\n  @if (mark) {\n    @switch (mark.type) {\n      @case ('link') {\n        <a [href]=\"text(mark, 'href')\" [attr.title]=\"text(mark, 'title')\" rel=\"noopener noreferrer nofollow\"\n          ><ng-container\n            [ngTemplateOutlet]=\"previewMarked\"\n            [ngTemplateOutletContext]=\"{ $implicit: node, depth: depth + 1 }\"\n        /></a>\n      }\n      @case ('strong') {\n        <strong\n          ><ng-container\n            [ngTemplateOutlet]=\"previewMarked\"\n            [ngTemplateOutletContext]=\"{ $implicit: node, depth: depth + 1 }\"\n        /></strong>\n      }\n      @case ('em') {\n        <em\n          ><ng-container\n            [ngTemplateOutlet]=\"previewMarked\"\n            [ngTemplateOutletContext]=\"{ $implicit: node, depth: depth + 1 }\"\n        /></em>\n      }\n      @case ('underline') {\n        <u\n          ><ng-container\n            [ngTemplateOutlet]=\"previewMarked\"\n            [ngTemplateOutletContext]=\"{ $implicit: node, depth: depth + 1 }\"\n        /></u>\n      }\n      @case ('strike') {\n        <s\n          ><ng-container\n            [ngTemplateOutlet]=\"previewMarked\"\n            [ngTemplateOutletContext]=\"{ $implicit: node, depth: depth + 1 }\"\n        /></s>\n      }\n      @case ('code') {\n        <code\n          ><ng-container\n            [ngTemplateOutlet]=\"previewMarked\"\n            [ngTemplateOutletContext]=\"{ $implicit: node, depth: depth + 1 }\"\n        /></code>\n      }\n      @default {\n        <ng-container\n          [ngTemplateOutlet]=\"previewMarked\"\n          [ngTemplateOutletContext]=\"{ $implicit: node, depth: depth + 1 }\"\n        />\n      }\n    }\n  } @else {\n    @switch (node.type) {\n      @case ('text') {\n        <ng-container>{{ node.text }}</ng-container>\n      }\n      @case ('hard_break') {\n        <br />\n      }\n      @case ('image') {\n        <img [src]=\"text(node, 'src')\" [alt]=\"text(node, 'alt') ?? ''\" [attr.title]=\"text(node, 'title')\" />\n      }\n    }\n  }\n</ng-template>\n" }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }], surface: [{ type: i0.ViewChild, args: ['surface', { isSignal: true }] }], toolButtons: [{ type: i0.ViewChildren, args: ['tool', { ...{ read: ElementRef }, isSignal: true }] }], linkPopover: [{ type: i0.ViewChild, args: ['linkPopover', { isSignal: true }] }] } });
+                    ], imports: [NgTemplateOutlet, WrButton, WrInput, WrPopover], template: "@if (tools().length) {\n  <div class=\"wr-editor__toolbar\" role=\"toolbar\" [attr.aria-label]=\"toolbarLabel()\" [attr.aria-controls]=\"surfaceId\">\n    @for (item of tools(); track $index; let n = $index) {\n      @if (item === '|') {\n        <span class=\"wr-editor__separator\" aria-hidden=\"true\"></span>\n      } @else if (item === 'link') {\n        <!-- The link button hosts the link panel, so it carries the popover's own\n             `aria-haspopup` / `aria-expanded` / `aria-controls` \u2014 and no tooltip,\n             since one element cannot host `[wrPopover]` twice; its name and\n             `aria-keyshortcuts` still say what the others' tooltips say. No\n             `aria-pressed` either: a button that opens a popup is not a toggle,\n             and the panel's remove button is where \"in a link\" is announced. -->\n        <button\n          #tool\n          #linkPopover=\"wrPopover\"\n          wr-btn\n          type=\"button\"\n          class=\"wr-editor__tool\"\n          [class.wr-editor__tool--active]=\"state(item)?.active\"\n          [disabled]=\"!state(item)?.available\"\n          [attr.aria-label]=\"label(item)\"\n          [attr.aria-keyshortcuts]=\"keyShortcuts(item)\"\n          [wrPopover]=\"linkPanel\"\n          [ariaLabel]=\"label(item)\"\n          (opened)=\"onLinkOpened()\"\n          (closed)=\"onLinkClosed()\"\n          (focus)=\"onToolFocus(buttonIndex()[n])\"\n          (keydown)=\"onToolbarKeydown($event)\"\n          (mousedown)=\"$event.preventDefault()\"\n        >\n          <svg\n            class=\"wr-editor__icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            @for (d of icon(item); track $index) {\n              <path [attr.d]=\"d\" />\n            }\n          </svg>\n        </button>\n      } @else {\n        <button\n          #tool\n          wr-btn\n          type=\"button\"\n          class=\"wr-editor__tool\"\n          mode=\"tooltip\"\n          [class.wr-editor__tool--active]=\"state(item)?.active\"\n          [disabled]=\"!state(item)?.available\"\n          [attr.aria-pressed]=\"isToggle(item) ? (state(item)?.active ? 'true' : 'false') : null\"\n          [attr.aria-label]=\"label(item)\"\n          [attr.aria-keyshortcuts]=\"keyShortcuts(item)\"\n          [wrPopover]=\"tooltip(item)\"\n          (click)=\"onToolClick(item, $event)\"\n          (focus)=\"onToolFocus(buttonIndex()[n])\"\n          (keydown)=\"onToolbarKeydown($event)\"\n          (mousedown)=\"$event.preventDefault()\"\n        >\n          <svg\n            class=\"wr-editor__icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            @for (d of icon(item); track $index) {\n              <path [attr.d]=\"d\" />\n            }\n          </svg>\n        </button>\n      }\n    }\n  </div>\n}\n\n<!--\n  The document drawn by Angular, in either of the two ways it stands on screen.\n\n  In the STATIC mode \u2014 read-only with nothing mounted \u2014 it is the editor, for as\n  long as `readonly` holds, so it takes the id, the name, the field's state and\n  the tab stop the surface below would have carried, and that surface is not\n  rendered at all: two elements with one id, or a nameless empty textbox beside\n  the text, is what rendering both would mean. A focusable `role=\"group\"` and not\n  a textbox, because every descendant of a textbox is presentational \u2014 the\n  headings, lists and tables being shown would stop being announced, which is the\n  whole point of showing a document. No `aria-readonly`: ARIA does not allow it\n  on `group`, and `.wr-editor--readonly` on the host is the cue instead.\n\n  Otherwise it is the preview that stands in until ProseMirror mounts \u2014 on the\n  server, and for the first browser frame \u2014 and carries nothing of the surface's.\n\n  Either way it is a SIBLING of the mount surface, never inside it: `{ mount }`\n  replaces the element's children, and nodes Angular owns would be deleted out\n  from under the next change detection.\n-->\n@if (staticMode()) {\n  <div\n    #staticDoc\n    class=\"wr-editor__preview wr-editor__preview--static wr-editor__content\"\n    role=\"group\"\n    [id]=\"surfaceId\"\n    [attr.aria-label]=\"accessibleName()\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-describedby]=\"fieldAria.describedBy()\"\n    [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n    [attr.tabindex]=\"disabled() ? null : 0\"\n    (focus)=\"focused.set(true)\"\n    (blur)=\"focused.set(false)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"previewContent\" />\n  </div>\n} @else {\n  @if (preview()) {\n    <div class=\"wr-editor__preview wr-editor__content\">\n      <ng-container [ngTemplateOutlet]=\"previewContent\" />\n    </div>\n  }\n\n  <!--\n    The mount surface. Angular binds every attribute it needs, so the prerendered\n    page and the synchronous first render already carry the role, the name and the\n    field's error state; ProseMirror adds only its own class, `contenteditable` and\n    `translate`, and never touches an attribute it did not set. No Angular child\n    ever lives in here.\n  -->\n  <div\n    #surface\n    class=\"wr-editor__surface wr-editor__content\"\n    role=\"textbox\"\n    aria-multiline=\"true\"\n    [id]=\"surfaceId\"\n    [hidden]=\"!mounted()\"\n    [attr.aria-label]=\"accessibleName()\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-describedby]=\"fieldAria.describedBy()\"\n    [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n    [attr.aria-readonly]=\"locked() && !disabled() ? 'true' : null\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n    [attr.aria-placeholder]=\"ariaPlaceholder()\"\n    [attr.tabindex]=\"locked() && !disabled() ? 0 : null\"\n    (focus)=\"focused.set(true)\"\n    (blur)=\"focused.set(false)\"\n  ></div>\n}\n\n<!-- The document itself, written once for both of the containers above. -->\n<ng-template #previewContent>\n  <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: preview()?.content }\" />\n</ng-template>\n\n<!--\n  The popover styles its panel as `.wr-popover-overlay > *`, which is this form,\n  so the form stays a plain block and the layout lives one level in.\n-->\n<ng-template #linkPanel>\n  <form\n    class=\"wr-editor-link\"\n    novalidate\n    [id]=\"linkField.panelId\"\n    (submit)=\"applyLink($event)\"\n    (focusout)=\"onFocusOut($event)\"\n  >\n    <div class=\"wr-editor-link__body\">\n      <label class=\"wr-editor-link__label\" [attr.for]=\"linkField.controlId()\">{{ linkUrlLabel() }}</label>\n      <input\n        wrInput\n        class=\"wr-editor-link__input\"\n        type=\"text\"\n        inputmode=\"url\"\n        autocomplete=\"url\"\n        spellcheck=\"false\"\n        [value]=\"linkDraft()\"\n        (input)=\"onLinkInput($event)\"\n      />\n      @if (linkField.invalid()) {\n        <p class=\"wr-editor-link__error\" role=\"alert\" [id]=\"linkField.errorId\">{{ linkInvalidLabel() }}</p>\n      }\n      <div class=\"wr-editor-link__actions\">\n        @if (linkActive()) {\n          <button wr-btn type=\"button\" class=\"wr-editor-link__remove\" (click)=\"removeLink()\">\n            {{ linkRemoveLabel() }}\n          </button>\n        }\n        <button wr-btn type=\"submit\" color=\"primary\" class=\"wr-editor-link__apply\">{{ linkApplyLabel() }}</button>\n      </div>\n    </div>\n  </form>\n</ng-template>\n\n<!--\n  Recursion runs through `ngTemplateOutlet`, as in `<wr-markdown>`, so the preview\n  is exactly the document with no wrapper between a `<ul>` and its `<li>`.\n-->\n<ng-template #previewBlocks let-raw>\n  @for (node of nodesOf(raw); track $index) {\n    @switch (node.type) {\n      @case ('paragraph') {\n        <p [class.wr-editor__placeholder]=\"ariaPlaceholder() !== null\" [attr.data-placeholder]=\"ariaPlaceholder()\">\n          <ng-container [ngTemplateOutlet]=\"previewInline\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n        </p>\n      }\n      @case ('heading') {\n        @switch (attr(node, 'level')) {\n          @case (2) {\n            <h2>\n              <ng-container\n                [ngTemplateOutlet]=\"previewInline\"\n                [ngTemplateOutletContext]=\"{ $implicit: node.content }\"\n              />\n            </h2>\n          }\n          @case (3) {\n            <h3>\n              <ng-container\n                [ngTemplateOutlet]=\"previewInline\"\n                [ngTemplateOutletContext]=\"{ $implicit: node.content }\"\n              />\n            </h3>\n          }\n          @default {\n            <h1>\n              <ng-container\n                [ngTemplateOutlet]=\"previewInline\"\n                [ngTemplateOutletContext]=\"{ $implicit: node.content }\"\n              />\n            </h1>\n          }\n        }\n      }\n      @case ('blockquote') {\n        <blockquote>\n          <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n        </blockquote>\n      }\n      @case ('code_block') {\n        <pre><code>{{ textOf(node) }}</code></pre>\n      }\n      @case ('horizontal_rule') {\n        <hr />\n      }\n      @case ('bullet_list') {\n        <ul>\n          <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n        </ul>\n      }\n      @case ('ordered_list') {\n        <ol [attr.start]=\"attr(node, 'order') === 1 ? null : attr(node, 'order')\">\n          <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n        </ol>\n      }\n      @case ('list_item') {\n        @let checked = attr(node, 'checked');\n        @if (checked === null) {\n          <li>\n            <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n          </li>\n        } @else {\n          <li class=\"wr-editor__item wr-editor__item--task\" [attr.data-checked]=\"checked\">\n            <span class=\"wr-editor__task\" [class.wr-editor__task--checked]=\"checked === true\" aria-hidden=\"true\"></span>\n            <span class=\"wr-editor__sr-only\">{{ checked === true ? taskDoneLabel() : taskTodoLabel() }}</span>\n            <div class=\"wr-editor__task-body\">\n              <ng-container\n                [ngTemplateOutlet]=\"previewBlocks\"\n                [ngTemplateOutletContext]=\"{ $implicit: node.content }\"\n              />\n            </div>\n          </li>\n        }\n      }\n      @case ('table') {\n        <table>\n          <tbody>\n            <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n          </tbody>\n        </table>\n      }\n      @case ('table_row') {\n        <tr>\n          <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n        </tr>\n      }\n      @case ('table_header') {\n        <th [style.text-align]=\"text(node, 'align')\">\n          <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n        </th>\n      }\n      @case ('table_cell') {\n        <td [style.text-align]=\"text(node, 'align')\">\n          <ng-container [ngTemplateOutlet]=\"previewBlocks\" [ngTemplateOutletContext]=\"{ $implicit: node.content }\" />\n        </td>\n      }\n    }\n  }\n</ng-template>\n\n<ng-template #previewInline let-raw>\n  @for (node of nodesOf(raw); track $index) {\n    <ng-container [ngTemplateOutlet]=\"previewMarked\" [ngTemplateOutletContext]=\"{ $implicit: node, depth: 0 }\" />\n  }\n</ng-template>\n\n<!-- One mark per level, outermost first \u2014 the order the schema ranks them in. -->\n<ng-template #previewMarked let-raw let-depth=\"depth\">\n  @let node = nodeOf(raw);\n  @let mark = markAt(node, depth);\n  @if (mark) {\n    @switch (mark.type) {\n      @case ('link') {\n        <a [href]=\"text(mark, 'href')\" [attr.title]=\"text(mark, 'title')\" rel=\"noopener noreferrer nofollow\"\n          ><ng-container\n            [ngTemplateOutlet]=\"previewMarked\"\n            [ngTemplateOutletContext]=\"{ $implicit: node, depth: depth + 1 }\"\n        /></a>\n      }\n      @case ('strong') {\n        <strong\n          ><ng-container\n            [ngTemplateOutlet]=\"previewMarked\"\n            [ngTemplateOutletContext]=\"{ $implicit: node, depth: depth + 1 }\"\n        /></strong>\n      }\n      @case ('em') {\n        <em\n          ><ng-container\n            [ngTemplateOutlet]=\"previewMarked\"\n            [ngTemplateOutletContext]=\"{ $implicit: node, depth: depth + 1 }\"\n        /></em>\n      }\n      @case ('underline') {\n        <u\n          ><ng-container\n            [ngTemplateOutlet]=\"previewMarked\"\n            [ngTemplateOutletContext]=\"{ $implicit: node, depth: depth + 1 }\"\n        /></u>\n      }\n      @case ('strike') {\n        <s\n          ><ng-container\n            [ngTemplateOutlet]=\"previewMarked\"\n            [ngTemplateOutletContext]=\"{ $implicit: node, depth: depth + 1 }\"\n        /></s>\n      }\n      @case ('code') {\n        <code\n          ><ng-container\n            [ngTemplateOutlet]=\"previewMarked\"\n            [ngTemplateOutletContext]=\"{ $implicit: node, depth: depth + 1 }\"\n        /></code>\n      }\n      @default {\n        <ng-container\n          [ngTemplateOutlet]=\"previewMarked\"\n          [ngTemplateOutletContext]=\"{ $implicit: node, depth: depth + 1 }\"\n        />\n      }\n    }\n  } @else {\n    @switch (node.type) {\n      @case ('text') {\n        <ng-container>{{ node.text }}</ng-container>\n      }\n      @case ('hard_break') {\n        <br />\n      }\n      @case ('image') {\n        <img [src]=\"text(node, 'src')\" [alt]=\"text(node, 'alt') ?? ''\" [attr.title]=\"text(node, 'title')\" />\n      }\n    }\n  }\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }], surface: [{ type: i0.ViewChild, args: ['surface', { isSignal: true }] }], staticDoc: [{ type: i0.ViewChild, args: ['staticDoc', { isSignal: true }] }], toolButtons: [{ type: i0.ViewChildren, args: ['tool', { ...{ read: ElementRef }, isSignal: true }] }], linkPopover: [{ type: i0.ViewChild, args: ['linkPopover', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.