@fractaal/pi-tui 1.4.1 → 1.6.0

package/dist/components/markdown.d.ts

@@ -36,6 +36,7 @@ export interface MarkdownTheme {
     italic: (text: string) => string;
     strikethrough: (text: string) => string;
     underline: (text: string) => string;
+    /** Highlighted lines of a code block. A Markdown component reuses the result for the same code until invalidate(). */
     highlightCode?: (code: string, lang?: string) => string[];
     /** Prefix applied to each rendered code block line (default: "  ") */
     codeBlockIndent?: string;
@@ -62,10 +63,15 @@ export declare class Markdown implements Component {
     private cachedWidth?;
     private cachedLines?;
     private cachedTokens?;
+    private blocks?;
+    private blockHighlightedCode?;
     constructor(text: string, paddingX: number, paddingY: number, theme: MarkdownTheme, defaultTextStyle?: DefaultTextStyle, options?: MarkdownOptions);
     setText(text: string): void;
     invalidate(): void;
+    private clearRenderCache;
     render(width: number): string[];
+    /** Render one top-level block to output lines: wrapped, with margins, and padded or backgrounded to the width. */
+    private renderBlock;
     /**
      * Apply default text style to a string.
      * This is the base styling applied to all text content.

package/dist/components/markdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../src/components/markdown.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../src/components/markdown.ts"],"names":[],"mappings":"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"}

package/dist/components/markdown.js

@@ -2,9 +2,18 @@ import { Marked, Tokenizer } from "marked";
 import markedCjkFriendly from "marked-cjk-friendly";
 import { renderLatex } from "../latex.js";
 import { getCapabilities, hyperlink, isImageLine } from "../terminal-image.js";
-import { applyBackgroundToLine, flattenLines, visibleWidth, wrapTextWithAnsi } from "../utils.js";
+import { applyBackgroundToLine, cjkPunctuationRegex, flattenLines, visibleWidth, wrapTextWithAnsi } from "../utils.js";
 const STRICT_STRIKETHROUGH_REGEX = /^(~~)(?=[^\s~])((?:\\.|[^\\])*?(?:\\.|[^\s~\\]))\1(?=[^~]|$)/;
-class StrictStrikethroughTokenizer extends Tokenizer {
+class MarkdownTokenizer extends Tokenizer {
+    url(src) {
+        const token = super.url(src);
+        if (!token)
+            return undefined;
+        // Bare URLs stop at CJK punctuation; explicit links and angle autolinks
+        // use separate tokenizers and can still contain these characters.
+        const punctuationIndex = token.raw.search(cjkPunctuationRegex);
+        return punctuationIndex < 0 ? token : super.url(token.raw.slice(0, punctuationIndex));
+    }
     del(src) {
         const match = STRICT_STRIKETHROUGH_REGEX.exec(src);
         if (!match) {
@@ -159,9 +168,40 @@ function trimPartialClosingFences(tokens) {
     }
     token.text = token.text.slice(0, -lastLine.length).replace(/\n$/, "");
 }
+// An unclosed comment runs to the end of an HTML block, as in CommonMark, so streamed comments stay hidden.
+const HTML_COMMENT_REGEX = /<!--[\s\S]*?(?:-->|$)/g;
+function stripHtmlComments(html) {
+    return html.replace(HTML_COMMENT_REGEX, "");
+}
+/**
+ * Remove block HTML tokens that hold only comments, so they render no line. A removed comment between two blank
+ * lines, or at the start or end, also drops a blank line, so it leaves no extra gap.
+ * See https://github.com/earendil-works/pi/issues/11710.
+ */
+function removeHtmlCommentBlocks(tokens) {
+    for (let i = tokens.length - 1; i >= 0; i--) {
+        const token = tokens[i];
+        if (token.type === "list") {
+            for (const item of token.items)
+                removeHtmlCommentBlocks(item.tokens);
+        }
+        else if (token.type === "blockquote") {
+            removeHtmlCommentBlocks(token.tokens ?? []);
+        }
+        else if (token.type === "html" && stripHtmlComments(token.raw).trim() === "") {
+            tokens.splice(i, 1);
+            if (tokens[i]?.type === "space" && (i === 0 || tokens[i - 1]?.type === "space")) {
+                tokens.splice(i, 1);
+            }
+            else if (i === tokens.length && tokens[i - 1]?.type === "space") {
+                tokens.splice(--i, 1);
+            }
+        }
+    }
+}
 const markdownParser = new Marked();
 markdownParser.setOptions({
-    tokenizer: new StrictStrikethroughTokenizer(),
+    tokenizer: new MarkdownTokenizer(),
 });
 markdownParser.use({
     tokenizer: { emStrong: markedCjkFriendly().tokenizer?.emStrong },
@@ -183,6 +223,13 @@ export class Markdown {
     // about ten times the size of its source, and every message of a long transcript keeps a Markdown component. The
     // tokens survive a burst of re-renders, such as a theme preview, and are collected afterwards.
     cachedTokens;
+    // The last render's top-level blocks. While a message streams only its last block changes, so a render styles and
+    // wraps only that block. Each render keeps only the blocks it used, which drops a streamed block's earlier versions.
+    // Held weakly like the tokens: the blocks repeat the source in their keys and the code in their highlighting, and
+    // only a burst of renders, such as streaming or a resize, needs them.
+    blocks;
+    // Highlighted code of the block being rendered, only set while renderBlock runs.
+    blockHighlightedCode;
     constructor(text, paddingX, paddingY, theme, defaultTextStyle, options) {
         this.text = text;
         this.paddingX = paddingX;
@@ -193,9 +240,15 @@ export class Markdown {
     }
     setText(text) {
         this.text = text;
-        this.invalidate();
+        this.clearRenderCache();
     }
     invalidate() {
+        this.clearRenderCache();
+        // The theme may have changed, which changes every styled line and the default style's prefix.
+        this.blocks = undefined;
+        this.defaultStylePrefix = undefined;
+    }
+    clearRenderCache() {
         this.cachedText = undefined;
         this.cachedWidth = undefined;
         this.cachedLines = undefined;
@@ -210,6 +263,7 @@ export class Markdown {
         const text = this.options.transform?.(this.text, contentWidth) ?? this.text;
         // Don't render anything if there's no actual text
         if (!text || text.trim() === "") {
+            this.blocks = undefined;
             const result = [];
             // Update cache
             this.cachedText = this.text;
@@ -225,67 +279,77 @@ export class Markdown {
         if (!tokens) {
             tokens = markdownParser.lexer(normalizedText);
             trimPartialClosingFences(tokens);
+            removeHtmlCommentBlocks(tokens);
             this.cachedTokens = new WeakRef({ source: normalizedText, tokens });
         }
-        // Convert tokens to styled terminal output
-        const renderedLines = [];
+        // A reference link resolves through a definition anywhere in the text, so blocks with the same source can render
+        // differently; such texts are rare in practice and render without reusing blocks.
+        const reuseBlocks = Object.keys(tokens.links).length === 0;
+        const previousBlocks = this.blocks?.deref();
+        const blocks = new Map();
+        this.blocks = new WeakRef(blocks);
+        const contentLines = [];
         for (let i = 0; i < tokens.length; i++) {
             const token = tokens[i];
-            const nextToken = tokens[i + 1];
-            const tokenLines = this.renderToken(token, contentWidth, nextToken?.type);
-            for (const tokenLine of tokenLines) {
-                renderedLines.push(tokenLine);
-            }
-        }
-        // Wrap lines (NO padding, NO background yet)
-        const wrappedLines = [];
-        for (const line of renderedLines) {
-            if (isImageLine(line)) {
-                wrappedLines.push(line);
-            }
-            else {
-                for (const wrappedLine of wrapTextWithAnsi(line, contentWidth)) {
-                    wrappedLines.push(wrappedLine);
-                }
+            const nextTokenType = tokens[i + 1]?.type;
+            const reused = reuseBlocks ? (blocks.get(token.raw) ?? previousBlocks?.get(token.raw)) : undefined;
+            const block = reused ?? { width: -1, nextTokenType, lines: [], highlightedCode: new Map() };
+            if (block.width !== width || block.nextTokenType !== nextTokenType) {
+                this.renderBlock(block, token, nextTokenType, width, contentWidth);
             }
-        }
-        // Add margins and background to each wrapped line
-        const leftMargin = " ".repeat(this.paddingX);
-        const rightMargin = " ".repeat(this.paddingX);
-        const bgFn = this.defaultTextStyle?.bgColor;
-        const contentLines = [];
-        for (const line of wrappedLines) {
-            if (isImageLine(line)) {
+            if (reuseBlocks)
+                blocks.set(token.raw, block);
+            for (const line of block.lines) {
                 contentLines.push(line);
-                continue;
-            }
-            const lineWithMargins = leftMargin + line + rightMargin;
-            if (bgFn) {
-                contentLines.push(applyBackgroundToLine(lineWithMargins, width, bgFn));
-            }
-            else {
-                // No background - just pad to width
-                const visibleLen = visibleWidth(lineWithMargins);
-                const paddingNeeded = Math.max(0, width - visibleLen);
-                contentLines.push(lineWithMargins + " ".repeat(paddingNeeded));
             }
         }
         // Add top/bottom padding (empty lines)
+        const bgFn = this.defaultTextStyle?.bgColor;
         const emptyLine = " ".repeat(width);
         const emptyLines = [];
         for (let i = 0; i < this.paddingY; i++) {
             const line = bgFn ? applyBackgroundToLine(emptyLine, width, bgFn) : emptyLine;
             emptyLines.push(line);
         }
+        flattenLines(emptyLines);
         // Combine top padding, content, and bottom padding
         const result = emptyLines.concat(contentLines, emptyLines);
-        flattenLines(result);
         // Update cache
         this.cachedText = this.text;
         this.cachedWidth = width;
         this.cachedLines = result;
         return result.length > 0 ? result : [""];
     }
+    /** Render one top-level block to output lines: wrapped, with margins, and padded or backgrounded to the width. */
+    renderBlock(block, token, nextTokenType, width, contentWidth) {
+        this.blockHighlightedCode = block.highlightedCode;
+        const leftMargin = " ".repeat(this.paddingX);
+        const rightMargin = " ".repeat(this.paddingX);
+        const bgFn = this.defaultTextStyle?.bgColor;
+        const lines = [];
+        for (const line of this.renderToken(token, contentWidth, nextTokenType)) {
+            if (isImageLine(line)) {
+                lines.push(line);
+                continue;
+            }
+            for (const wrappedLine of wrapTextWithAnsi(line, contentWidth)) {
+                const lineWithMargins = leftMargin + wrappedLine + rightMargin;
+                if (bgFn) {
+                    lines.push(applyBackgroundToLine(lineWithMargins, width, bgFn));
+                }
+                else {
+                    // No background - just pad to width
+                    const paddingNeeded = Math.max(0, width - visibleWidth(lineWithMargins));
+                    lines.push(lineWithMargins + " ".repeat(paddingNeeded));
+                }
+            }
+        }
+        this.blockHighlightedCode = undefined;
+        flattenLines(lines);
+        block.lines = lines;
+        block.width = width;
+        block.nextTokenType = nextTokenType;
+    }
     /**
      * Apply default text style to a string.
      * This is the base styling applied to all text content.
@@ -398,9 +462,13 @@ export class Markdown {
                 break;
             case "latexBlock": {
                 const latexToken = token;
-                const rendered = !latexToken.pending && this.options.renderLatex !== false
-                    ? (renderLatex(latexToken.text, { display: true }) ?? latexToken.raw.trim())
-                    : latexToken.raw.trim();
+                let rendered = !latexToken.pending && this.options.renderLatex !== false
+                    ? renderLatex(latexToken.text, { display: true })
+                    : undefined;
+                // A 2D layout cannot be wrapped row by row; fall back to the raw source when it does not fit.
+                if (rendered === undefined || rendered.split("\n").some((line) => visibleWidth(line) > width)) {
+                    rendered = latexToken.raw.trim();
+                }
                 for (const line of rendered.split("\n")) {
                     lines.push(this.applyDefaultStyle(line));
                 }
@@ -413,8 +481,13 @@ export class Markdown {
                 const indent = this.theme.codeBlockIndent ?? "  ";
                 lines.push(this.theme.codeBlockBorder(`\`\`\`${token.lang || ""}`));
                 if (this.theme.highlightCode) {
-                    const highlightedLines = this.theme.highlightCode(token.text, token.lang);
-                    for (const hlLine of highlightedLines) {
+                    const key = `${token.lang ?? ""}\0${token.text}`;
+                    let highlighted = this.blockHighlightedCode?.get(key);
+                    if (!highlighted) {
+                        highlighted = this.theme.highlightCode(token.text, token.lang);
+                        this.blockHighlightedCode?.set(key, highlighted);
+                    }
+                    for (const hlLine of highlighted) {
                         lines.push(`${indent}${hlLine}`);
                     }
                 }
@@ -506,9 +579,9 @@ export class Markdown {
                 }
                 break;
             case "html":
-                // Render HTML as plain text (escaped for terminal)
+                // Render HTML as plain text (escaped for terminal), without its comments
                 if ("raw" in token && typeof token.raw === "string") {
-                    lines.push(this.applyDefaultStyle(token.raw.trim()));
+                    lines.push(this.applyDefaultStyle(stripHtmlComments(token.raw).trim()));
                 }
                 break;
             case "space":
@@ -531,7 +604,15 @@ export class Markdown {
             const segments = text.split("\n");
             return segments.map((segment) => applyText(segment)).join("\n");
         };
-        for (const token of tokens) {
+        // After a skipped HTML comment, drop the next text's leading space if the text before ended with one,
+        // so "a <!-- c --> b" renders as "a b".
+        let dropLeadingSpace = false;
+        for (let i = 0; i < tokens.length; i++) {
+            let token = tokens[i];
+            if (dropLeadingSpace && token.type === "text" && !token.tokens?.length && /^[ \t]/.test(token.text)) {
+                token = { ...token, text: token.text.replace(/^[ \t]+/, "") };
+            }
+            dropLeadingSpace = false;
             switch (token.type) {
                 case "latex": {
                     const latexToken = token;
@@ -602,8 +683,11 @@ export class Markdown {
                     break;
                 }
                 case "html":
-                    // Render inline HTML as plain text
-                    if ("raw" in token && typeof token.raw === "string") {
+                    // Render inline HTML as plain text; comments are hidden
+                    if (token.raw.startsWith("<!--")) {
+                        dropLeadingSpace = i === 0 || /[ \t]$/.test(tokens[i - 1].raw);
+                    }
+                    else {
                         result += applyTextWithNewlines(token.raw);
                     }
                     break;