ngwr 11.1.0 → 12.0.0

package/fesm2022/ngwr-markdown.mjs

@@ -499,9 +499,19 @@ function safeMarkdownUrl(raw, kind) {
 function parseInlines(source, options = {}) {
     return inlines(source, 0, newContext(options.streaming ?? false));
 }
-function inlines(source, depth, ctx) {
+function inlines(source, depth, outer) {
     if (depth >= MAX_DEPTH)
         return source ? [{ kind: 'text', value: source }] : [];
+    // The two failure memos hold INDEXES into `source`, so they are only ever true
+    // of the one string this call is scanning — and the context they live on spans
+    // the whole document. Shared, an index recorded in one paragraph is compared
+    // against a position in the next, and refuses emphasis and links that are
+    // perfectly well formed; `matchEmphasis` recursing on a slice (below) does the
+    // same thing INSIDE a single paragraph, so restoring on return would not be
+    // enough either. A memo per scan is the only keying that means anything, and it
+    // costs nothing: the linearity argument in {@link ParseContext.noCloser} is a
+    // statement about one string in the first place.
+    const ctx = { ...outer, noCloser: new Map(), noBracket: { from: Number.POSITIVE_INFINITY } };
     const out = [];
     let text = '';
     let i = 0;
@@ -1039,6 +1049,28 @@ const WR_MARKDOWN_HIGHLIGHTER = new InjectionToken('WR_MARKDOWN_HIGHLIGHTER', {
  * has stopped changing.
  */
 const CACHE_LIMIT = 256;
+/**
+ * How many languages to remember at all.
+ *
+ * {@link CACHE_LIMIT} bounds the store in the dimension a STREAM controls and
+ * left it unbounded in the dimension the DOCUMENT controls: `language` is the
+ * first word of the code fence's info string, arbitrary text from an input
+ * `<wr-markdown>` treats as untrusted — so a document of ```` ```a1 ```` …
+ * ```` ```aN ```` fences created N buckets that only `invalidate()` ever
+ * removed. Same `providedIn: 'root'` lifetime as the rest of this store.
+ *
+ * Comfortably larger than any one document for the same reason `CACHE_LIMIT` is:
+ * a window too small to hold what is on screen evicts what the same pass still
+ * renders. A document with more than a few dozen distinct languages is exotic.
+ *
+ * Evicting here cannot re-dirty the effect that requests, which is the loop this
+ * class is built around avoiding: that effect depends on `generation`, and
+ * nothing on this path writes it.
+ *
+ * Exported for the spec, not through `public-api.ts` — the number is the whole
+ * assertion, and a copy of it in the test would stop tracking this one.
+ */
+const LANGUAGE_LIMIT = 64;
 /**
  * Turns fenced code into coloured spans, once per distinct block.
  *
@@ -1136,8 +1168,16 @@ class WrMarkdownHighlight {
         // A bare fence has no grammar to pick, so there is nothing to ask for.
         if (!this.highlighter || !language || !code)
             return;
-        const perLanguage = this.cache.get(language) ?? new Map();
+        const existing = this.cache.get(language);
+        // Deleted before it is re-set, because `Map.set` on a key it already holds
+        // keeps the ORIGINAL position: a plain `set` would leave the outer map in
+        // first-sighting order, and `evictLanguage` would then drop a language still
+        // being asked for in favour of one seen earlier and no longer rendered.
+        if (existing)
+            this.cache.delete(language);
+        const perLanguage = existing ?? new Map();
         this.cache.set(language, perLanguage);
+        this.evictLanguage();
         // Presence IS the record of having asked — a separate `asked` set was a second
         // structure to keep in step with this one, and eviction only pruned one of them.
         if (perLanguage.has(code))
@@ -1185,10 +1225,28 @@ class WrMarkdownHighlight {
             perLanguage.delete(oldest.value);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrMarkdownHighlight, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrMarkdownHighlight, providedIn: 'root' });
+    /**
+     * The same bound, one dimension out. `request` re-inserts a bucket it already
+     * holds, so the outer map iterates least-recently-REQUESTED first — and the
+     * component's effect asks for every code block in the document it is showing,
+     * so a language that stops being requested is one nothing renders any more.
+     *
+     * Read is deliberately NOT a touch here, unlike {@link linesFor} for the inner
+     * map: with the effect re-asking for every block, request order already tracks
+     * what is rendered, and nothing has needed the finer signal.
+     */
+    evictLanguage() {
+        while (this.cache.size > LANGUAGE_LIMIT) {
+            const oldest = this.cache.keys().next();
+            if (oldest.done)
+                return;
+            this.cache.delete(oldest.value);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrMarkdownHighlight, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrMarkdownHighlight, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrMarkdownHighlight, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrMarkdownHighlight, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1429,10 +1487,10 @@ class WrMarkdown {
     asCells(value) {
         return value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrMarkdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrMarkdown, isStandalone: true, selector: "wr-markdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, streaming: { classPropertyName: "streaming", publicName: "streaming", isSignal: true, isRequired: false, transformFunction: null }, copyable: { classPropertyName: "copyable", publicName: "copyable", isSignal: true, isRequired: false, transformFunction: null }, linkTarget: { classPropertyName: "linkTarget", publicName: "linkTarget", isSignal: true, isRequired: false, transformFunction: null }, headingIds: { classPropertyName: "headingIds", publicName: "headingIds", isSignal: true, isRequired: false, transformFunction: null }, headingIdPrefix: { classPropertyName: "headingIdPrefix", publicName: "headingIdPrefix", isSignal: true, isRequired: false, transformFunction: null }, copyLabel: { classPropertyName: "copyLabel", publicName: "copyLabel", isSignal: true, isRequired: false, transformFunction: null }, copiedLabel: { classPropertyName: "copiedLabel", publicName: "copiedLabel", isSignal: true, isRequired: false, transformFunction: null }, taskDoneLabel: { classPropertyName: "taskDoneLabel", publicName: "taskDoneLabel", isSignal: true, isRequired: false, transformFunction: null }, taskTodoLabel: { classPropertyName: "taskTodoLabel", publicName: "taskTodoLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wr-markdown--streaming": "streaming()" }, classAttribute: "wr-markdown" }, ngImport: i0, template: "<!--\n  Recursion runs through `ngTemplateOutlet` into these templates rather than\n  through a child component, so the rendered DOM is exactly the document \u2014 no\n  wrapper element between a `<ul>` and its `<li>`. See `asBlocks` for the whole\n  reasoning.\n-->\n<ng-template #inlineList let-raw>\n  @let nodes = asInlines(raw);\n\n  @for (node of nodes; track $index) {\n    @switch (node.kind) {\n      @case ('text') {\n        <!-- Wrapped, and not for tidiness: a bare interpolation on its own line is\n             ONE text node that includes the indentation around it, so `a **b** c`\n             rendered with a space inside every `<strong>`. Inside an element the\n             whitespace becomes separate whitespace-only nodes, which Angular\n             removes, and `<ng-container>` itself renders nothing. Prettier\n             reformats the bare form back, so this also has to survive `--fix`. -->\n        <ng-container>{{ node.value }}</ng-container>\n      }\n      @case ('code') {\n        <!-- `dir=\"ltr\"` because code is not prose: under RTL the browser\n             reorders `foo();` to `;foo()`. -->\n        <code class=\"wr-markdown__code-inline\" dir=\"ltr\">{{ node.value }}</code>\n      }\n      @case ('strong') {\n        <strong class=\"wr-markdown__strong\"\n          ><ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: node.children }\"\n        /></strong>\n      }\n      @case ('em') {\n        <em class=\"wr-markdown__em\"\n          ><ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: node.children }\"\n        /></em>\n      }\n      @case ('del') {\n        <del class=\"wr-markdown__del\"\n          ><ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: node.children }\"\n        /></del>\n      }\n      @case ('link') {\n        <a\n          class=\"wr-markdown__link\"\n          [href]=\"hrefOf(node.href)\"\n          [attr.title]=\"node.title\"\n          [attr.target]=\"resolvedLinkTarget()\"\n          [attr.rel]=\"linkRel()\"\n          ><ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: node.children }\"\n        /></a>\n      }\n      @case ('image') {\n        <img\n          class=\"wr-markdown__image\"\n          [src]=\"node.src\"\n          [alt]=\"node.alt\"\n          [attr.title]=\"node.title\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        />\n      }\n      @case ('break') {\n        <br />\n      }\n    }\n  }\n</ng-template>\n\n<ng-template #itemList let-raw let-tight=\"tight\">\n  @let items = asItems(raw);\n\n  @for (item of items; track $index) {\n    <li class=\"wr-markdown__item\" [class.wr-markdown__item--task]=\"item.checked !== null\">\n      @if (item.checked !== null) {\n        <!-- Presentational, with the state as text beside it: a real\n             `<input type=\"checkbox\">` here would be an unlabelled form control,\n             which is a serious axe violation, and making it operable would\n             promise an interaction a renderer cannot honour. -->\n        <span class=\"wr-markdown__task\" [class.wr-markdown__task--checked]=\"item.checked\" aria-hidden=\"true\"></span>\n        <span class=\"wr-markdown__sr-only\">{{ item.checked ? resolvedTaskDoneLabel() : resolvedTaskTodoLabel() }}</span>\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"blockList\"\n        [ngTemplateOutletContext]=\"{ $implicit: item.children, tight: tight }\"\n      />\n    </li>\n  }\n</ng-template>\n\n<ng-template #blockList let-raw let-tight=\"tight\">\n  @let list = asBlocks(raw);\n\n  @for (block of list; track $index) {\n    @switch (block.kind) {\n      @case ('paragraph') {\n        <!-- A tight list drops the `<p>`, which is what CommonMark specifies and\n             what keeps a one-line list from being double-spaced. -->\n        @if (tight) {\n          <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n        } @else {\n          <p class=\"wr-markdown__paragraph\">\n            <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n          </p>\n        }\n      }\n      @case ('heading') {\n        @switch (block.level) {\n          @case (1) {\n            <h1 class=\"wr-markdown__heading\" [attr.id]=\"idOf(block.id)\">\n              <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n            </h1>\n          }\n          @case (2) {\n            <h2 class=\"wr-markdown__heading\" [attr.id]=\"idOf(block.id)\">\n              <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n            </h2>\n          }\n          @case (3) {\n            <h3 class=\"wr-markdown__heading\" [attr.id]=\"idOf(block.id)\">\n              <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n            </h3>\n          }\n          @case (4) {\n            <h4 class=\"wr-markdown__heading\" [attr.id]=\"idOf(block.id)\">\n              <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n            </h4>\n          }\n          @case (5) {\n            <h5 class=\"wr-markdown__heading\" [attr.id]=\"idOf(block.id)\">\n              <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n            </h5>\n          }\n          @default {\n            <h6 class=\"wr-markdown__heading\" [attr.id]=\"idOf(block.id)\">\n              <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n            </h6>\n          }\n        }\n      }\n      @case ('code') {\n        @let highlighted = linesOf(block.code, block.language);\n\n        <div class=\"wr-markdown__code-block\">\n          <pre\n            class=\"wr-markdown__pre\"\n            dir=\"ltr\"\n            tabindex=\"0\"\n          ><code class=\"wr-markdown__code\" [attr.data-language]=\"block.language\">@if (highlighted) {@for (row of highlighted; track $index) {<span class=\"wr-markdown__line\">@for (span of row; track $index) {<span\n            [style.color]=\"span.color\"\n            [style.font-style]=\"span.fontStyle === 'italic' ? 'italic' : null\"\n            [style.font-weight]=\"span.fontStyle === 'bold' ? 'bold' : null\"\n            [style.text-decoration]=\"span.fontStyle === 'underline' ? 'underline' : null\"\n          >{{ span.text }}</span>}</span>@if (!$last) {{{ newline }}}}} @else {{{ block.code }}}</code></pre>\n\n          @if (resolvedCopyable() && block.closed) {\n            <button\n              type=\"button\"\n              class=\"wr-markdown__copy\"\n              [wrCopyToClipboard]=\"block.code\"\n              [attr.aria-label]=\"isCopied(block) ? resolvedCopiedLabel() : resolvedCopyLabel()\"\n              (copied)=\"onCopied(block)\"\n            >\n              <svg\n                class=\"wr-markdown__copy-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                @if (isCopied(block)) {\n                  <path d=\"M20 6 9 17l-5-5\" />\n                } @else {\n                  <rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\" />\n                  <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\" />\n                }\n              </svg>\n            </button>\n          }\n        </div>\n      }\n      @case ('quote') {\n        <blockquote class=\"wr-markdown__quote\">\n          <ng-container\n            [ngTemplateOutlet]=\"blockList\"\n            [ngTemplateOutletContext]=\"{ $implicit: block.children, tight: false }\"\n          />\n        </blockquote>\n      }\n      @case ('list') {\n        @if (block.ordered) {\n          <ol\n            class=\"wr-markdown__list wr-markdown__list--ordered\"\n            [attr.start]=\"block.start === 1 ? null : block.start\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"itemList\"\n              [ngTemplateOutletContext]=\"{ $implicit: block.items, tight: block.tight }\"\n            />\n          </ol>\n        } @else {\n          <ul class=\"wr-markdown__list\">\n            <ng-container\n              [ngTemplateOutlet]=\"itemList\"\n              [ngTemplateOutletContext]=\"{ $implicit: block.items, tight: block.tight }\"\n            />\n          </ul>\n        }\n      }\n      @case ('table') {\n        <!-- Its own scroller: a wide table must not push the page sideways, which\n             is also what keeps the RTL layout gate quiet about it. -->\n        <div class=\"wr-markdown__table-scroll\" tabindex=\"0\">\n          <table class=\"wr-markdown__table\">\n            <thead>\n              <tr>\n                @for (cell of block.head; track column; let column = $index) {\n                  <th class=\"wr-markdown__th\" scope=\"col\" [style.text-align]=\"block.align[column]\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"inlineList\"\n                      [ngTemplateOutletContext]=\"{ $implicit: cell.inlines }\"\n                    />\n                  </th>\n                }\n              </tr>\n            </thead>\n            <tbody>\n              @for (row of block.rows; track $index) {\n                <tr>\n                  @for (cell of asCells(row); track column; let column = $index) {\n                    <td class=\"wr-markdown__td\" [style.text-align]=\"block.align[column]\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"inlineList\"\n                        [ngTemplateOutletContext]=\"{ $implicit: cell.inlines }\"\n                      />\n                    </td>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </div>\n      }\n      @case ('rule') {\n        <hr class=\"wr-markdown__rule\" />\n      }\n    }\n  }\n</ng-template>\n\n<ng-container [ngTemplateOutlet]=\"blockList\" [ngTemplateOutletContext]=\"{ $implicit: blocks(), tight: false }\" />\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: WrCopyToClipboard, selector: "[wrCopyToClipboard]", inputs: ["wrCopyToClipboard"], outputs: ["copied", "copyFailed"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrMarkdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: WrMarkdown, isStandalone: true, selector: "wr-markdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, streaming: { classPropertyName: "streaming", publicName: "streaming", isSignal: true, isRequired: false, transformFunction: null }, copyable: { classPropertyName: "copyable", publicName: "copyable", isSignal: true, isRequired: false, transformFunction: null }, linkTarget: { classPropertyName: "linkTarget", publicName: "linkTarget", isSignal: true, isRequired: false, transformFunction: null }, headingIds: { classPropertyName: "headingIds", publicName: "headingIds", isSignal: true, isRequired: false, transformFunction: null }, headingIdPrefix: { classPropertyName: "headingIdPrefix", publicName: "headingIdPrefix", isSignal: true, isRequired: false, transformFunction: null }, copyLabel: { classPropertyName: "copyLabel", publicName: "copyLabel", isSignal: true, isRequired: false, transformFunction: null }, copiedLabel: { classPropertyName: "copiedLabel", publicName: "copiedLabel", isSignal: true, isRequired: false, transformFunction: null }, taskDoneLabel: { classPropertyName: "taskDoneLabel", publicName: "taskDoneLabel", isSignal: true, isRequired: false, transformFunction: null }, taskTodoLabel: { classPropertyName: "taskTodoLabel", publicName: "taskTodoLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wr-markdown--streaming": "streaming()" }, classAttribute: "wr-markdown" }, ngImport: i0, template: "<!--\n  Recursion runs through `ngTemplateOutlet` into these templates rather than\n  through a child component, so the rendered DOM is exactly the document \u2014 no\n  wrapper element between a `<ul>` and its `<li>`. See `asBlocks` for the whole\n  reasoning.\n-->\n<ng-template #inlineList let-raw>\n  @let nodes = asInlines(raw);\n\n  @for (node of nodes; track $index) {\n    @switch (node.kind) {\n      @case ('text') {\n        <!-- Wrapped, and not for tidiness: a bare interpolation on its own line is\n             ONE text node that includes the indentation around it, so `a **b** c`\n             rendered with a space inside every `<strong>`. Inside an element the\n             whitespace becomes separate whitespace-only nodes, which Angular\n             removes, and `<ng-container>` itself renders nothing. Prettier\n             reformats the bare form back, so this also has to survive `--fix`. -->\n        <ng-container>{{ node.value }}</ng-container>\n      }\n      @case ('code') {\n        <!-- `dir=\"ltr\"` because code is not prose: under RTL the browser\n             reorders `foo();` to `;foo()`. -->\n        <code class=\"wr-markdown__code-inline\" dir=\"ltr\">{{ node.value }}</code>\n      }\n      @case ('strong') {\n        <strong class=\"wr-markdown__strong\"\n          ><ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: node.children }\"\n        /></strong>\n      }\n      @case ('em') {\n        <em class=\"wr-markdown__em\"\n          ><ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: node.children }\"\n        /></em>\n      }\n      @case ('del') {\n        <del class=\"wr-markdown__del\"\n          ><ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: node.children }\"\n        /></del>\n      }\n      @case ('link') {\n        <a\n          class=\"wr-markdown__link\"\n          [href]=\"hrefOf(node.href)\"\n          [attr.title]=\"node.title\"\n          [attr.target]=\"resolvedLinkTarget()\"\n          [attr.rel]=\"linkRel()\"\n          ><ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: node.children }\"\n        /></a>\n      }\n      @case ('image') {\n        <img\n          class=\"wr-markdown__image\"\n          [src]=\"node.src\"\n          [alt]=\"node.alt\"\n          [attr.title]=\"node.title\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        />\n      }\n      @case ('break') {\n        <br />\n      }\n    }\n  }\n</ng-template>\n\n<ng-template #itemList let-raw let-tight=\"tight\">\n  @let items = asItems(raw);\n\n  @for (item of items; track $index) {\n    <li class=\"wr-markdown__item\" [class.wr-markdown__item--task]=\"item.checked !== null\">\n      @if (item.checked !== null) {\n        <!-- Presentational, with the state as text beside it: a real\n             `<input type=\"checkbox\">` here would be an unlabelled form control,\n             which is a serious axe violation, and making it operable would\n             promise an interaction a renderer cannot honour. -->\n        <span class=\"wr-markdown__task\" [class.wr-markdown__task--checked]=\"item.checked\" aria-hidden=\"true\"></span>\n        <span class=\"wr-markdown__sr-only\">{{ item.checked ? resolvedTaskDoneLabel() : resolvedTaskTodoLabel() }}</span>\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"blockList\"\n        [ngTemplateOutletContext]=\"{ $implicit: item.children, tight: tight }\"\n      />\n    </li>\n  }\n</ng-template>\n\n<ng-template #blockList let-raw let-tight=\"tight\">\n  @let list = asBlocks(raw);\n\n  @for (block of list; track $index) {\n    @switch (block.kind) {\n      @case ('paragraph') {\n        <!-- A tight list drops the `<p>`, which is what CommonMark specifies and\n             what keeps a one-line list from being double-spaced. -->\n        @if (tight) {\n          <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n        } @else {\n          <p class=\"wr-markdown__paragraph\">\n            <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n          </p>\n        }\n      }\n      @case ('heading') {\n        @switch (block.level) {\n          @case (1) {\n            <h1 class=\"wr-markdown__heading\" [attr.id]=\"idOf(block.id)\">\n              <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n            </h1>\n          }\n          @case (2) {\n            <h2 class=\"wr-markdown__heading\" [attr.id]=\"idOf(block.id)\">\n              <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n            </h2>\n          }\n          @case (3) {\n            <h3 class=\"wr-markdown__heading\" [attr.id]=\"idOf(block.id)\">\n              <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n            </h3>\n          }\n          @case (4) {\n            <h4 class=\"wr-markdown__heading\" [attr.id]=\"idOf(block.id)\">\n              <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n            </h4>\n          }\n          @case (5) {\n            <h5 class=\"wr-markdown__heading\" [attr.id]=\"idOf(block.id)\">\n              <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n            </h5>\n          }\n          @default {\n            <h6 class=\"wr-markdown__heading\" [attr.id]=\"idOf(block.id)\">\n              <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n            </h6>\n          }\n        }\n      }\n      @case ('code') {\n        @let highlighted = linesOf(block.code, block.language);\n\n        <div class=\"wr-markdown__code-block\">\n          <pre\n            class=\"wr-markdown__pre\"\n            dir=\"ltr\"\n            tabindex=\"0\"\n          ><code class=\"wr-markdown__code\" [attr.data-language]=\"block.language\">@if (highlighted) {@for (row of highlighted; track $index) {<span class=\"wr-markdown__line\">@for (span of row; track $index) {<span\n            [style.color]=\"span.color\"\n            [style.font-style]=\"span.fontStyle === 'italic' ? 'italic' : null\"\n            [style.font-weight]=\"span.fontStyle === 'bold' ? 'bold' : null\"\n            [style.text-decoration]=\"span.fontStyle === 'underline' ? 'underline' : null\"\n          >{{ span.text }}</span>}</span>@if (!$last) {{{ newline }}}}} @else {{{ block.code }}}</code></pre>\n\n          @if (resolvedCopyable() && block.closed) {\n            <button\n              type=\"button\"\n              class=\"wr-markdown__copy\"\n              [wrCopyToClipboard]=\"block.code\"\n              [attr.aria-label]=\"isCopied(block) ? resolvedCopiedLabel() : resolvedCopyLabel()\"\n              (copied)=\"onCopied(block)\"\n            >\n              <svg\n                class=\"wr-markdown__copy-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                @if (isCopied(block)) {\n                  <path d=\"M20 6 9 17l-5-5\" />\n                } @else {\n                  <rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\" />\n                  <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\" />\n                }\n              </svg>\n            </button>\n          }\n        </div>\n      }\n      @case ('quote') {\n        <blockquote class=\"wr-markdown__quote\">\n          <ng-container\n            [ngTemplateOutlet]=\"blockList\"\n            [ngTemplateOutletContext]=\"{ $implicit: block.children, tight: false }\"\n          />\n        </blockquote>\n      }\n      @case ('list') {\n        @if (block.ordered) {\n          <ol\n            class=\"wr-markdown__list wr-markdown__list--ordered\"\n            [attr.start]=\"block.start === 1 ? null : block.start\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"itemList\"\n              [ngTemplateOutletContext]=\"{ $implicit: block.items, tight: block.tight }\"\n            />\n          </ol>\n        } @else {\n          <ul class=\"wr-markdown__list\">\n            <ng-container\n              [ngTemplateOutlet]=\"itemList\"\n              [ngTemplateOutletContext]=\"{ $implicit: block.items, tight: block.tight }\"\n            />\n          </ul>\n        }\n      }\n      @case ('table') {\n        <!-- Its own scroller: a wide table must not push the page sideways, which\n             is also what keeps the RTL layout gate quiet about it. -->\n        <div class=\"wr-markdown__table-scroll\" tabindex=\"0\">\n          <table class=\"wr-markdown__table\">\n            <thead>\n              <tr>\n                @for (cell of block.head; track column; let column = $index) {\n                  <th class=\"wr-markdown__th\" scope=\"col\" [style.text-align]=\"block.align[column]\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"inlineList\"\n                      [ngTemplateOutletContext]=\"{ $implicit: cell.inlines }\"\n                    />\n                  </th>\n                }\n              </tr>\n            </thead>\n            <tbody>\n              @for (row of block.rows; track $index) {\n                <tr>\n                  @for (cell of asCells(row); track column; let column = $index) {\n                    <td class=\"wr-markdown__td\" [style.text-align]=\"block.align[column]\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"inlineList\"\n                        [ngTemplateOutletContext]=\"{ $implicit: cell.inlines }\"\n                      />\n                    </td>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </div>\n      }\n      @case ('rule') {\n        <hr class=\"wr-markdown__rule\" />\n      }\n    }\n  }\n</ng-template>\n\n<ng-container [ngTemplateOutlet]=\"blockList\" [ngTemplateOutletContext]=\"{ $implicit: blocks(), tight: false }\" />\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: WrCopyToClipboard, selector: "[wrCopyToClipboard]", inputs: ["wrCopyToClipboard"], outputs: ["copied", "copyFailed"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrMarkdown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrMarkdown, decorators: [{
             type: Component,
             args: [{ selector: 'wr-markdown', imports: [NgTemplateOutlet, WrCopyToClipboard], encapsulation: ViewEncapsulation.None, host: {
                         class: 'wr-markdown',