@vectojs/markdown 0.10.0 → 0.12.0

package/dist/Markdown.d.ts

@@ -45,6 +45,8 @@ export declare class CodeBlock extends UIComponent {
     private rawLines;
     private cellWidth;
     private source;
+    /** Bumped by {@link buildLines} and {@link setSelectable}; read by `Scene`. */
+    private contentEpoch;
     private lang;
     private theme;
     private lineH;
@@ -56,6 +58,7 @@ export declare class CodeBlock extends UIComponent {
     setCode(code: string, lang?: string): this;
     /** Enable or disable browser-native selection for this code block. */
     setSelectable(selectable: boolean): this;
+    getContentEpoch(): number;
     /**
      * Change the block's box width.
      *
@@ -542,6 +545,71 @@ export declare class Markdown extends UIComponent {
     private paragraphImage;
     /** One table cell entity, shared by the render arm and the streamed-table path. */
     private tableCellRichText;
+    /**
+     * Token types a list item's fast path can render as one `RichText`.
+     *
+     * An ALLOWLIST, deliberately, following `markstream-vue`'s
+     * `SIMPLE_INLINE_TYPES` (`SimpleInlineRenderer/simpleInline.ts:15-31`): a block
+     * type is excluded by OMISSION, so a token this renderer has never heard of
+     * falls out of the fast path automatically instead of being silently flattened
+     * to its raw text. A denylist fails the other way, and the failure is quiet —
+     * a formula painted as literal TeX rather than an error — which is why this
+     * defect survived so long.
+     *
+     * Deliberately small, because a list item's DIRECT children are far less varied
+     * than they look. Probed against marked 18.0.7: every inline construct
+     * (`strong`, `em`, `del`, `codespan`, `link`, `image`, `br`, `escape`, `html`,
+     * `inlineMath`) arrives nested one level DEEPER, inside a container whose own
+     * type is `text` — so a tight item's direct child list is `text` and nothing
+     * else. Listing those inline types here would be dead code.
+     *
+     * `space` and `checkbox` are included because both are inert here. A blank line
+     * between an item's paragraph and its block sibling produces a `space`, and
+     * marked unshifts a `checkbox` into every TIGHT GFM task item — the box itself
+     * is drawn from `item.task`/`item.checked` by `listItemSpans`, so the token
+     * renders nothing on its own. Omitting `checkbox` sent every task item down the
+     * block path and moved its marker into a nested entity, which broke four
+     * task-list assertions in `Markdown.test.ts`.
+     */
+    private static readonly INLINE_ITEM_TOKENS;
+    /**
+     * Does this item consist purely of inline content?
+     *
+     * True keeps the single-`RichText` fast path, which is not merely an
+     * optimization: `updateStreamedList` reuses `stack.children[i]` by calling
+     * `setSpans` on it, so an item that becomes a `Stack` forfeits streamed reuse
+     * for its entire list. Only pay for a block container when an item holds a
+     * block.
+     *
+     * A lone `paragraph` counts as inline. A LOOSE list re-lexes every item's
+     * inline content from `text` to `paragraph` — adding one blank line anywhere
+     * flips `token.loose` for the whole list — so treating a single paragraph as a
+     * block would drop the fast path for every item of every loose list, the common
+     * shape in real prose, for no rendering benefit.
+     */
+    private itemIsInlineOnly;
+    /**
+     * Build a list item that holds block-level children.
+     *
+     * The item becomes a vertical `Stack`: its leading inline run (carrying the
+     * marker) first, then every remaining child rendered through the same
+     * `renderToken` the document level uses, indented to clear the marker.
+     *
+     * Recursing rather than special-casing the types we know about is the point — a
+     * display formula, a fence, a table, a blockquote, a nested list, an `hr` and a
+     * second paragraph all render exactly as they would at indent 0, and a block
+     * type added later works here for free.
+     *
+     * Only the FIRST child can be the lead. Everything after it becomes a block,
+     * including a second `paragraph`: an item's two paragraphs are two blocks, and
+     * folding them into the lead run would concatenate them into one line with no
+     * separation.
+     *
+     * The lead `RichText` is emitted even when the item has no inline text, because
+     * it carries the marker — an item that is nothing but a formula still shows its
+     * bullet or ordinal.
+     */
+    private listItemBlockStack;
     private listItemSpans;
     /** Construct the `RichText` for one list item. */
     private listItemRichText;

package/dist/index.js

@@ -1127,6 +1127,8 @@ var CodeBlock = class extends import_ui.UIComponent {
   rawLines = null;
   cellWidth = 0;
   source;
+  /** Bumped by {@link buildLines} and {@link setSelectable}; read by `Scene`. */
+  contentEpoch = 0;
   lang;
   theme;
   lineH = 24;
@@ -1155,9 +1157,13 @@ var CodeBlock = class extends import_ui.UIComponent {
   /** Enable or disable browser-native selection for this code block. */
   setSelectable(selectable) {
     this.selectable = selectable;
+    this.contentEpoch++;
     this.scene?.markDirty();
     return this;
   }
+  getContentEpoch() {
+    return this.contentEpoch;
+  }
   /**
    * Change the block's box width.
    *
@@ -1225,6 +1231,7 @@ var CodeBlock = class extends import_ui.UIComponent {
    * lands mid-line, so that line's text (and therefore its tokenization) changes.
    */
   buildLines(code) {
+    this.contentEpoch++;
     const rawLines = code.split(/\r\n|\r|\n/);
     const previous = this.rawLines;
     let reusable = 0;
@@ -1524,7 +1531,7 @@ function renderInlineToRichText(tokens, fallbackText, font, color, maxWidth, the
     onLinkClick
   });
 }
-var Markdown = class extends import_ui.UIComponent {
+var Markdown = class _Markdown extends import_ui.UIComponent {
   content;
   maxWidth;
   theme;
@@ -2573,6 +2580,109 @@ var Markdown = class extends import_ui.UIComponent {
       onLinkClick: this.onLinkClick
     });
   }
+  /**
+   * Token types a list item's fast path can render as one `RichText`.
+   *
+   * An ALLOWLIST, deliberately, following `markstream-vue`'s
+   * `SIMPLE_INLINE_TYPES` (`SimpleInlineRenderer/simpleInline.ts:15-31`): a block
+   * type is excluded by OMISSION, so a token this renderer has never heard of
+   * falls out of the fast path automatically instead of being silently flattened
+   * to its raw text. A denylist fails the other way, and the failure is quiet —
+   * a formula painted as literal TeX rather than an error — which is why this
+   * defect survived so long.
+   *
+   * Deliberately small, because a list item's DIRECT children are far less varied
+   * than they look. Probed against marked 18.0.7: every inline construct
+   * (`strong`, `em`, `del`, `codespan`, `link`, `image`, `br`, `escape`, `html`,
+   * `inlineMath`) arrives nested one level DEEPER, inside a container whose own
+   * type is `text` — so a tight item's direct child list is `text` and nothing
+   * else. Listing those inline types here would be dead code.
+   *
+   * `space` and `checkbox` are included because both are inert here. A blank line
+   * between an item's paragraph and its block sibling produces a `space`, and
+   * marked unshifts a `checkbox` into every TIGHT GFM task item — the box itself
+   * is drawn from `item.task`/`item.checked` by `listItemSpans`, so the token
+   * renders nothing on its own. Omitting `checkbox` sent every task item down the
+   * block path and moved its marker into a nested entity, which broke four
+   * task-list assertions in `Markdown.test.ts`.
+   */
+  static INLINE_ITEM_TOKENS = /* @__PURE__ */ new Set([
+    "text",
+    "space",
+    "checkbox"
+  ]);
+  /**
+   * Does this item consist purely of inline content?
+   *
+   * True keeps the single-`RichText` fast path, which is not merely an
+   * optimization: `updateStreamedList` reuses `stack.children[i]` by calling
+   * `setSpans` on it, so an item that becomes a `Stack` forfeits streamed reuse
+   * for its entire list. Only pay for a block container when an item holds a
+   * block.
+   *
+   * A lone `paragraph` counts as inline. A LOOSE list re-lexes every item's
+   * inline content from `text` to `paragraph` — adding one blank line anywhere
+   * flips `token.loose` for the whole list — so treating a single paragraph as a
+   * block would drop the fast path for every item of every loose list, the common
+   * shape in real prose, for no rendering benefit.
+   */
+  itemIsInlineOnly(item) {
+    const children = item.tokens;
+    if (!children || children.length === 0) return true;
+    if (children.length === 1 && children[0].type === "paragraph") return true;
+    return children.every((child) => _Markdown.INLINE_ITEM_TOKENS.has(child.type));
+  }
+  /**
+   * Build a list item that holds block-level children.
+   *
+   * The item becomes a vertical `Stack`: its leading inline run (carrying the
+   * marker) first, then every remaining child rendered through the same
+   * `renderToken` the document level uses, indented to clear the marker.
+   *
+   * Recursing rather than special-casing the types we know about is the point — a
+   * display formula, a fence, a table, a blockquote, a nested list, an `hr` and a
+   * second paragraph all render exactly as they would at indent 0, and a block
+   * type added later works here for free.
+   *
+   * Only the FIRST child can be the lead. Everything after it becomes a block,
+   * including a second `paragraph`: an item's two paragraphs are two blocks, and
+   * folding them into the lead run would concatenate them into one line with no
+   * separation.
+   *
+   * The lead `RichText` is emitted even when the item has no inline text, because
+   * it carries the marker — an item that is nothing but a formula still shows its
+   * bullet or ordinal.
+   */
+  listItemBlockStack(token, index, availableWidth, t) {
+    const item = token.items[index];
+    const children = item.tokens ?? [];
+    const stack = new import_ui.Stack({ direction: "vertical", gap: 4 });
+    const first = children[0];
+    const leadChildren = first && (first.type === "text" || first.type === "paragraph") ? [first] : [];
+    const leadToken = {
+      ...token,
+      items: token.items.map((it, i) => i === index ? { ...it, tokens: leadChildren } : it)
+    };
+    stack.add(this.listItemRichText(leadToken, index, availableWidth, t));
+    const indent = Math.round(t.fontSize);
+    const childMetrics = {
+      marginBefore: 0,
+      marginAfter: 0,
+      indentStart: indent,
+      availableWidth: Math.max(1, availableWidth - indent)
+    };
+    for (let i = leadChildren.length; i < children.length; i++) {
+      const el = this.renderTokenWithMetrics(children[i], childMetrics);
+      if (!el) continue;
+      const wrapper = new MarkdownContainer();
+      el.x = indent;
+      wrapper.add(el);
+      wrapper.width = el.width + indent;
+      wrapper.height = el.height;
+      stack.add(wrapper);
+    }
+    return stack;
+  }
   listItemSpans(token, index) {
     const item = token.items[index];
     const num = Number(token.start ?? 1) + index;
@@ -2652,18 +2762,23 @@ var Markdown = class extends import_ui.UIComponent {
     const lastRetained = oldToken.items.length - 1;
     for (let i = 0; i < lastRetained; i++) {
       if (oldToken.items[i].text !== newToken.items[i].text) return false;
+      const isStack = stack.children[i] instanceof import_ui.Stack;
+      if (isStack !== !this.itemIsInlineOnly(newToken.items[i])) return false;
     }
     const availableWidth = this.activeBlockMetrics?.availableWidth ?? this.maxWidth;
     const t = this.theme;
     const tailEntity = stack.children[lastRetained];
     if (oldToken.items[lastRetained].text !== newToken.items[lastRetained].text) {
+      if (!this.itemIsInlineOnly(newToken.items[lastRetained])) return false;
       if (!("setSpans" in tailEntity)) return false;
       tailEntity.setSpans(
         this.listItemSpans(newToken, lastRetained)
       );
     }
     for (let i = oldToken.items.length; i < newToken.items.length; i++) {
-      stack.add(this.listItemRichText(newToken, i, availableWidth, t));
+      stack.add(
+        this.itemIsInlineOnly(newToken.items[i]) ? this.listItemRichText(newToken, i, availableWidth, t) : this.listItemBlockStack(newToken, i, availableWidth, t)
+      );
     }
     const last = stack.children.at(-1);
     if (last) stack.resizeLastChild(last);
@@ -3427,7 +3542,9 @@ var Markdown = class extends import_ui.UIComponent {
         const listToken = token;
         const listStack = new import_ui.Stack({ direction: "vertical", gap: 6 });
         for (let i = 0; i < listToken.items.length; i++) {
-          listStack.add(this.listItemRichText(listToken, i, availableWidth, t));
+          listStack.add(
+            this.itemIsInlineOnly(listToken.items[i]) ? this.listItemRichText(listToken, i, availableWidth, t) : this.listItemBlockStack(listToken, i, availableWidth, t)
+          );
         }
         return listStack;
       }

package/dist/index.mjs

@@ -1095,6 +1095,8 @@ var CodeBlock = class extends UIComponent {
   rawLines = null;
   cellWidth = 0;
   source;
+  /** Bumped by {@link buildLines} and {@link setSelectable}; read by `Scene`. */
+  contentEpoch = 0;
   lang;
   theme;
   lineH = 24;
@@ -1123,9 +1125,13 @@ var CodeBlock = class extends UIComponent {
   /** Enable or disable browser-native selection for this code block. */
   setSelectable(selectable) {
     this.selectable = selectable;
+    this.contentEpoch++;
     this.scene?.markDirty();
     return this;
   }
+  getContentEpoch() {
+    return this.contentEpoch;
+  }
   /**
    * Change the block's box width.
    *
@@ -1193,6 +1199,7 @@ var CodeBlock = class extends UIComponent {
    * lands mid-line, so that line's text (and therefore its tokenization) changes.
    */
   buildLines(code) {
+    this.contentEpoch++;
     const rawLines = code.split(/\r\n|\r|\n/);
     const previous = this.rawLines;
     let reusable = 0;
@@ -1492,7 +1499,7 @@ function renderInlineToRichText(tokens, fallbackText, font, color, maxWidth, the
     onLinkClick
   });
 }
-var Markdown = class extends UIComponent {
+var Markdown = class _Markdown extends UIComponent {
   content;
   maxWidth;
   theme;
@@ -2541,6 +2548,109 @@ var Markdown = class extends UIComponent {
       onLinkClick: this.onLinkClick
     });
   }
+  /**
+   * Token types a list item's fast path can render as one `RichText`.
+   *
+   * An ALLOWLIST, deliberately, following `markstream-vue`'s
+   * `SIMPLE_INLINE_TYPES` (`SimpleInlineRenderer/simpleInline.ts:15-31`): a block
+   * type is excluded by OMISSION, so a token this renderer has never heard of
+   * falls out of the fast path automatically instead of being silently flattened
+   * to its raw text. A denylist fails the other way, and the failure is quiet —
+   * a formula painted as literal TeX rather than an error — which is why this
+   * defect survived so long.
+   *
+   * Deliberately small, because a list item's DIRECT children are far less varied
+   * than they look. Probed against marked 18.0.7: every inline construct
+   * (`strong`, `em`, `del`, `codespan`, `link`, `image`, `br`, `escape`, `html`,
+   * `inlineMath`) arrives nested one level DEEPER, inside a container whose own
+   * type is `text` — so a tight item's direct child list is `text` and nothing
+   * else. Listing those inline types here would be dead code.
+   *
+   * `space` and `checkbox` are included because both are inert here. A blank line
+   * between an item's paragraph and its block sibling produces a `space`, and
+   * marked unshifts a `checkbox` into every TIGHT GFM task item — the box itself
+   * is drawn from `item.task`/`item.checked` by `listItemSpans`, so the token
+   * renders nothing on its own. Omitting `checkbox` sent every task item down the
+   * block path and moved its marker into a nested entity, which broke four
+   * task-list assertions in `Markdown.test.ts`.
+   */
+  static INLINE_ITEM_TOKENS = /* @__PURE__ */ new Set([
+    "text",
+    "space",
+    "checkbox"
+  ]);
+  /**
+   * Does this item consist purely of inline content?
+   *
+   * True keeps the single-`RichText` fast path, which is not merely an
+   * optimization: `updateStreamedList` reuses `stack.children[i]` by calling
+   * `setSpans` on it, so an item that becomes a `Stack` forfeits streamed reuse
+   * for its entire list. Only pay for a block container when an item holds a
+   * block.
+   *
+   * A lone `paragraph` counts as inline. A LOOSE list re-lexes every item's
+   * inline content from `text` to `paragraph` — adding one blank line anywhere
+   * flips `token.loose` for the whole list — so treating a single paragraph as a
+   * block would drop the fast path for every item of every loose list, the common
+   * shape in real prose, for no rendering benefit.
+   */
+  itemIsInlineOnly(item) {
+    const children = item.tokens;
+    if (!children || children.length === 0) return true;
+    if (children.length === 1 && children[0].type === "paragraph") return true;
+    return children.every((child) => _Markdown.INLINE_ITEM_TOKENS.has(child.type));
+  }
+  /**
+   * Build a list item that holds block-level children.
+   *
+   * The item becomes a vertical `Stack`: its leading inline run (carrying the
+   * marker) first, then every remaining child rendered through the same
+   * `renderToken` the document level uses, indented to clear the marker.
+   *
+   * Recursing rather than special-casing the types we know about is the point — a
+   * display formula, a fence, a table, a blockquote, a nested list, an `hr` and a
+   * second paragraph all render exactly as they would at indent 0, and a block
+   * type added later works here for free.
+   *
+   * Only the FIRST child can be the lead. Everything after it becomes a block,
+   * including a second `paragraph`: an item's two paragraphs are two blocks, and
+   * folding them into the lead run would concatenate them into one line with no
+   * separation.
+   *
+   * The lead `RichText` is emitted even when the item has no inline text, because
+   * it carries the marker — an item that is nothing but a formula still shows its
+   * bullet or ordinal.
+   */
+  listItemBlockStack(token, index, availableWidth, t) {
+    const item = token.items[index];
+    const children = item.tokens ?? [];
+    const stack = new Stack({ direction: "vertical", gap: 4 });
+    const first = children[0];
+    const leadChildren = first && (first.type === "text" || first.type === "paragraph") ? [first] : [];
+    const leadToken = {
+      ...token,
+      items: token.items.map((it, i) => i === index ? { ...it, tokens: leadChildren } : it)
+    };
+    stack.add(this.listItemRichText(leadToken, index, availableWidth, t));
+    const indent = Math.round(t.fontSize);
+    const childMetrics = {
+      marginBefore: 0,
+      marginAfter: 0,
+      indentStart: indent,
+      availableWidth: Math.max(1, availableWidth - indent)
+    };
+    for (let i = leadChildren.length; i < children.length; i++) {
+      const el = this.renderTokenWithMetrics(children[i], childMetrics);
+      if (!el) continue;
+      const wrapper = new MarkdownContainer();
+      el.x = indent;
+      wrapper.add(el);
+      wrapper.width = el.width + indent;
+      wrapper.height = el.height;
+      stack.add(wrapper);
+    }
+    return stack;
+  }
   listItemSpans(token, index) {
     const item = token.items[index];
     const num = Number(token.start ?? 1) + index;
@@ -2620,18 +2730,23 @@ var Markdown = class extends UIComponent {
     const lastRetained = oldToken.items.length - 1;
     for (let i = 0; i < lastRetained; i++) {
       if (oldToken.items[i].text !== newToken.items[i].text) return false;
+      const isStack = stack.children[i] instanceof Stack;
+      if (isStack !== !this.itemIsInlineOnly(newToken.items[i])) return false;
     }
     const availableWidth = this.activeBlockMetrics?.availableWidth ?? this.maxWidth;
     const t = this.theme;
     const tailEntity = stack.children[lastRetained];
     if (oldToken.items[lastRetained].text !== newToken.items[lastRetained].text) {
+      if (!this.itemIsInlineOnly(newToken.items[lastRetained])) return false;
       if (!("setSpans" in tailEntity)) return false;
       tailEntity.setSpans(
         this.listItemSpans(newToken, lastRetained)
       );
     }
     for (let i = oldToken.items.length; i < newToken.items.length; i++) {
-      stack.add(this.listItemRichText(newToken, i, availableWidth, t));
+      stack.add(
+        this.itemIsInlineOnly(newToken.items[i]) ? this.listItemRichText(newToken, i, availableWidth, t) : this.listItemBlockStack(newToken, i, availableWidth, t)
+      );
     }
     const last = stack.children.at(-1);
     if (last) stack.resizeLastChild(last);
@@ -3395,7 +3510,9 @@ var Markdown = class extends UIComponent {
         const listToken = token;
         const listStack = new Stack({ direction: "vertical", gap: 6 });
         for (let i = 0; i < listToken.items.length; i++) {
-          listStack.add(this.listItemRichText(listToken, i, availableWidth, t));
+          listStack.add(
+            this.itemIsInlineOnly(listToken.items[i]) ? this.listItemRichText(listToken, i, availableWidth, t) : this.listItemBlockStack(listToken, i, availableWidth, t)
+          );
         }
         return listStack;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectojs/markdown",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "publishConfig": {
     "access": "public"
   },