comark 0.3.2 → 0.5.0

package/README.md

@@ -8,7 +8,7 @@
 [![Documentation](https://img.shields.io/badge/Documentation-black?logo=readme&logoColor=white)](https://comark.dev)
 [![license](https://img.shields.io/github/license/comarkdown/comark?color=black)](https://github.com/comarkdown/comark/blob/main/LICENSE)
 
-A high-performance markdown parser and renderer with Vue, React, Svelte, HTML and ANSI terminal.
+A high-performance markdown parser and renderer with Vue, React, Svelte, Angular, HTML and ANSI terminal.
 
 ## Features
 
@@ -80,6 +80,30 @@ pnpm add @comark/svelte katex
 <Comark markdown={chatMessage} components={{ math: Math }} plugins={[math()]} />
 ```
 
+### Angular
+
+```bash
+npm install @comark/angular katex
+# or
+pnpm add @comark/angular katex
+```
+
+```typescript
+import { Component } from '@angular/core'
+import { ComarkComponent } from '@comark/angular'
+import math, { Math } from '@comark/angular/plugins/math'
+
+@Component({
+  selector: 'app-chat',
+  standalone: true,
+  imports: [ComarkComponent],
+  template: `<comark [markdown]="chatMessage" [components]="{ Math }" [plugins]="[math()]" />`,
+})
+export class ChatComponent {
+  chatMessage = ...
+}
+```
+
 ### HTML (No Framework)
 
 ```bash

package/dist/context.d.ts

@@ -0,0 +1,78 @@
+import type { ComarkNode, ComarkTree } from './types.ts';
+/**
+ * A patch describes a surgical mutation of a {@link ComarkTree}.
+ *
+ * `path` is a node index path into `tree.nodes`: the first segment indexes
+ * into `tree.nodes`, each subsequent segment indexes into the *children* of
+ * the addressed element. Because `ComarkElement` is `[tag, attrs, ...children]`,
+ * child index `i` is resolved against array slot `i + 2` internally — callers
+ * always work in plain child indices.
+ *
+ * @example `{ op: 'replace', path: [2, 0], node: 'updated' }`
+ * replaces the first child of the third top-level node.
+ */
+export type ComarkPatch = {
+    op: 'replace';
+    path: number[];
+    node: ComarkNode;
+} | {
+    op: 'insert';
+    path: number[];
+    node: ComarkNode;
+} | {
+    op: 'remove';
+    path: number[];
+} | {
+    op: 'meta';
+    meta: Record<string, unknown>;
+} | {
+    op: 'frontmatter';
+    frontmatter: Record<string, unknown>;
+} | {
+    op: 'data';
+    data: Record<string, unknown>;
+};
+/** A single live document: the per-id handle returned by `context.get(id)`. */
+export interface ComarkDocument {
+    /** The current tree. Replaced wholesale on `set`, structurally on `patch`. */
+    readonly tree: ComarkTree;
+    /** Replace the whole tree (e.g. an HMR re-parse or an agent rewrite). */
+    set(tree: ComarkTree): void;
+    /** Apply one or more patches against the current tree (structural sharing). */
+    patch(patch: ComarkPatch | ComarkPatch[]): void;
+    /** Subscribe to tree changes. Returns the cleanup function. */
+    listen(fn: (tree: ComarkTree) => void): (clear?: boolean) => void;
+}
+/**
+ * Ambient registry a `ComarkRenderer` subscribes to so external sources can
+ * drive a mounted document by `id`. A renderer calls `get(id).listen(fn)` on
+ * mount and the returned cleanup on unmount; drivers (HMR, devtools, collab,
+ * agents) call `get(id).set` / `.patch` to push new trees to every renderer
+ * with that id.
+ *
+ * The context is opt-in: a renderer only wires up when `globalThis.comarkContext`
+ * exists, so it costs one global lookup when absent and tree-shakes out of any
+ * build that never sets it.
+ */
+/** Document lifecycle event emitted by the context. */
+export interface ComarkContextEvent {
+    event: 'create' | 'remove';
+    id: string;
+    tree: ComarkTree;
+}
+export interface ComarkContext {
+    /** Get the document for `id`, creating it (with `initial`) on first access. */
+    get(id: string, initial?: ComarkTree): ComarkDocument;
+    /** Ids currently tracked — for devtools enumeration. */
+    keys(): string[];
+    /** Listen for documents being created or removed. Returns the cleanup. */
+    listen(fn: (e: ComarkContextEvent) => void): () => void;
+}
+declare global {
+    var comarkContext: ComarkContext | undefined;
+}
+/**
+ * Create a {@link ComarkContext} and (by default) install it on
+ * `globalThis.comarkContext`. Returns the context.
+ */
+export declare function createComarkContext(install?: boolean): ComarkContext;

package/dist/context.js

@@ -0,0 +1,127 @@
+function emptyTree() {
+    return { nodes: [], frontmatter: {}, meta: {} };
+}
+/**
+ * Apply a node-level patch to a node list, returning a **new** list with
+ * structural sharing: only the arrays along `path` are cloned, untouched
+ * siblings and branches keep their references so framework identity checks
+ * only re-render what actually changed.
+ */
+function patchNodeList(nodes, path, patch) {
+    const [index, ...rest] = path;
+    const next = nodes.slice();
+    if (rest.length === 0) {
+        if (patch.op === 'replace') {
+            if (index < 0 || index >= next.length) {
+                throw new Error(`Comark patch: cannot replace out-of-range index [${index}]`);
+            }
+            next[index] = patch.node;
+        }
+        else if (patch.op === 'insert') {
+            next.splice(index, 0, patch.node);
+        }
+        else if (patch.op === 'remove') {
+            if (index < 0 || index >= next.length) {
+                throw new Error(`Comark patch: cannot remove out-of-range index [${index}]`);
+            }
+            next.splice(index, 1);
+        }
+        return next;
+    }
+    const target = next[index];
+    if (!Array.isArray(target) || target[0] === null) {
+        throw new Error(`Comark patch: path segment [${index}] does not point to an element`);
+    }
+    const element = target;
+    const children = element.slice(2);
+    next[index] = [element[0], element[1], ...patchNodeList(children, rest, patch)];
+    return next;
+}
+function applyPatch(current, patch) {
+    switch (patch.op) {
+        case 'meta':
+            return { ...current, meta: { ...current.meta, ...patch.meta } };
+        case 'frontmatter':
+            return { ...current, frontmatter: { ...current.frontmatter, ...patch.frontmatter } };
+        case 'data':
+            // @ts-expect-error - patch.data is a plain object
+            return { ...current, data: { ...current.data, ...patch.data } };
+        default: {
+            if (!patch.path.length) {
+                throw new Error(`Comark patch "${patch.op}" requires a non-empty path`);
+            }
+            return { ...current, nodes: patchNodeList(current.nodes, patch.path, patch) };
+        }
+    }
+}
+function createDocument(initial, onEmpty) {
+    let tree = initial;
+    const listeners = new Set();
+    const emit = () => listeners.forEach((fn) => fn(tree));
+    return {
+        get tree() {
+            return tree;
+        },
+        set(next) {
+            tree = next;
+            emit();
+        },
+        patch(patch) {
+            const patches = Array.isArray(patch) ? patch : [patch];
+            for (const p of patches)
+                tree = applyPatch(tree, p);
+            emit();
+        },
+        listen(fn) {
+            listeners.add(fn);
+            return (clear = false) => {
+                if (!listeners.has(fn)) {
+                    return;
+                }
+                if (clear) {
+                    listeners.clear();
+                }
+                else {
+                    listeners.delete(fn);
+                }
+                // Drop the document once nobody is listening — frees ids on unmount.
+                if (listeners.size === 0)
+                    onEmpty(tree);
+            };
+        },
+    };
+}
+/**
+ * Create a {@link ComarkContext} and (by default) install it on
+ * `globalThis.comarkContext`. Returns the context.
+ */
+export function createComarkContext(install = true) {
+    if (install && globalThis.comarkContext) {
+        return globalThis.comarkContext;
+    }
+    const docs = new Map();
+    const lifecycle = new Set();
+    const emit = (e) => lifecycle.forEach((fn) => fn(e));
+    const ctx = {
+        get(id, initial) {
+            let doc = docs.get(id);
+            if (!doc) {
+                docs.set(id, (doc = createDocument(initial ?? emptyTree(), (tree) => {
+                    docs.delete(id);
+                    emit({ event: 'remove', id, tree });
+                })));
+                emit({ event: 'create', id, tree: doc.tree });
+            }
+            return doc;
+        },
+        keys: () => [...docs.keys()],
+        listen(fn) {
+            lifecycle.add(fn);
+            return () => lifecycle.delete(fn);
+        },
+    };
+    if (install)
+        globalThis.comarkContext = ctx;
+    return ctx;
+}
+// #endregion

package/dist/devtools/bridge.d.ts

@@ -0,0 +1 @@
+export * from '../../src/devtools/bridge'

package/dist/devtools/bridge.js

@@ -0,0 +1 @@
+export * from '../../src/devtools/bridge.ts'

package/dist/devtools/constants.d.ts

@@ -0,0 +1 @@
+export * from '../../src/devtools/constants'

package/dist/devtools/constants.js

@@ -0,0 +1 @@
+export * from '../../src/devtools/constants.ts'

package/dist/devtools/renderer/dom.d.ts

@@ -0,0 +1 @@
+export * from '../../../src/devtools/renderer/dom'

package/dist/devtools/renderer/dom.js

@@ -0,0 +1 @@
+export * from '../../../src/devtools/renderer/dom.ts'

package/dist/devtools/renderer/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../../../src/devtools/renderer/index'
+export { default } from '../../../src/devtools/renderer/index'

package/dist/devtools/renderer/index.js

@@ -0,0 +1,2 @@
+export * from '../../../src/devtools/renderer/index.ts'
+export { default } from '../../../src/devtools/renderer/index.ts'

package/dist/devtools/renderer/output.d.ts

@@ -0,0 +1 @@
+export * from '../../../src/devtools/renderer/output'

package/dist/devtools/renderer/output.js

@@ -0,0 +1 @@
+export * from '../../../src/devtools/renderer/output.ts'

package/dist/devtools/renderer/panel.d.ts

@@ -0,0 +1 @@
+export * from '../../../src/devtools/renderer/panel'

package/dist/devtools/renderer/panel.js

@@ -0,0 +1 @@
+export * from '../../../src/devtools/renderer/panel.ts'

package/dist/devtools/renderer/styles.d.ts

@@ -0,0 +1 @@
+export * from '../../../src/devtools/renderer/styles'

package/dist/devtools/renderer/styles.js

@@ -0,0 +1 @@
+export * from '../../../src/devtools/renderer/styles.ts'

package/dist/devtools/renderer/theme.d.ts

@@ -0,0 +1 @@
+export * from '../../../src/devtools/renderer/theme'

package/dist/devtools/renderer/theme.js

@@ -0,0 +1 @@
+export * from '../../../src/devtools/renderer/theme.ts'

package/dist/devtools/types.d.ts

@@ -0,0 +1 @@
+export * from '../../src/devtools/types'

package/dist/devtools/types.js

@@ -0,0 +1 @@
+export * from '../../src/devtools/types.ts'

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export { autoCloseMarkdown } from './internal/parse/auto-close/index.ts';
 export { applyAutoUnwrap } from './internal/parse/auto-unwrap.ts';
 export * from './parse.ts';
+export { createComarkContext } from './context.ts';
+export type { ComarkContext, ComarkDocument, ComarkPatch } from './context.ts';
 export type * from './types';

package/dist/index.js

@@ -4,3 +4,5 @@ export { autoCloseMarkdown } from "./internal/parse/auto-close/index.js";
 export { applyAutoUnwrap } from "./internal/parse/auto-unwrap.js";
 // Re-export parse utilities
 export * from "./parse.js";
+// Re-export the ambient renderer context for live updates
+export { createComarkContext } from "./context.js";

package/dist/internal/parse/auto-close/index.js

@@ -19,10 +19,33 @@ export function autoCloseMarkdown(markdown) {
     let inFrontmatter = false;
     let inBlockMath = false;
     let tableStart = -1;
+    // Tag name when inside a raw-text HTML element (`<style>`, `<script>`,
+    // `<pre>`, `<textarea>`). Their bodies must be passed through verbatim —
+    // any `::root`/`**` markers there are CSS/JS/text, not Comark/markdown.
+    let inRawTextElement = null;
+    const RAW_TEXT_OPEN_RE = /^<(script|pre|style|textarea)(\s|>|$)/i;
     const componentStack = [];
     for (let idx = 0; idx < n; idx++) {
         const line = lines[idx];
         const trimmed = line.trim();
+        // Raw-text HTML element: skip all line-level processing inside its body,
+        // and update the open/close state. Open and close can sit on the same
+        // line (e.g. `<style>body { ... }</style>` inline).
+        if (inRawTextElement) {
+            const closeRe = new RegExp(`</${inRawTextElement}\\s*>`, 'i');
+            if (closeRe.test(line))
+                inRawTextElement = null;
+            continue;
+        }
+        const rawTextMatch = trimmed.match(RAW_TEXT_OPEN_RE);
+        if (rawTextMatch) {
+            const tag = rawTextMatch[1].toLowerCase();
+            // Stay "inside" only if the close tag isn't already on this line.
+            const closeRe = new RegExp(`</${tag}\\s*>`, 'i');
+            if (!closeRe.test(line))
+                inRawTextElement = tag;
+            continue;
+        }
         // Frontmatter: only starts at document line 0
         if (idx === 0 && trimmed === '---') {
             inFrontmatter = true;
@@ -190,7 +213,8 @@ function closeInlineMarkersLinear(line) {
     // Count markers by scanning
     let asteriskCount = 0;
     let underscoreCount = 0;
-    let tildeCount = 0; // Count individual tildes
+    let doubleTildeCount = 0; // Count ~~ occurrences (GFM strikethrough delimiter)
+    let singleTildeCount = 0; // Count standalone ~ (not part of ~~)
     let backtickCount = 0;
     let dollarCount = 0; // Count $ for math
     let dollarPairCount = 0; // Count $$ pairs for block math
@@ -211,9 +235,31 @@ function closeInlineMarkersLinear(line) {
     let inAttributes = 0;
     let inLinkText = 0;
     let inLinkUrl = 0;
+    let linkTextBacktickCount = 0;
+    // Markers inside an inline code span (`...`) or math ($...$) are literal text
+    let inCode = false;
+    let inMath = false;
     for (let i = 0; i < len; i++) {
         const prevCh = i > 0 ? line[i - 1] : '';
         const ch = line[i];
+        if (ch === '\\') {
+            i++; // Backslash escapes the next char, so neither is a delimiter
+            continue;
+        }
+        if (inCode) {
+            if (ch === '`') {
+                backtickCount++;
+                inCode = false;
+            }
+            continue;
+        }
+        if (inMath) {
+            if (ch === '$' && !(i + 1 < len && line[i + 1] === '$')) {
+                dollarCount++;
+                inMath = false;
+            }
+            continue;
+        }
         if (ch === '{' && prevCh !== ' ') {
             inAttributes++;
             continue;
@@ -254,8 +300,30 @@ function closeInlineMarkersLinear(line) {
             }
             continue;
         }
-        if (inLinkText > 0 || inLinkUrl > 0)
+        if (inLinkText > 0) {
+            if (ch === '`')
+                linkTextBacktickCount++;
+            continue;
+        }
+        if (inLinkUrl > 0)
             continue;
+        if (ch === '`') {
+            backtickCount++;
+            inCode = true;
+            continue;
+        }
+        if (ch === '$') {
+            if (i + 1 < len && line[i + 1] === '$') {
+                dollarPairCount++; // `$$` is block math, counted as a pair
+                dollarCount += 2;
+                i++;
+            }
+            else {
+                dollarCount++;
+                inMath = true;
+            }
+            continue;
+        }
         if (ch === '*') {
             asteriskCount++;
             // Track ** positions (not part of ***)
@@ -280,23 +348,22 @@ function closeInlineMarkersLinear(line) {
             }
         }
         else if (ch === '~') {
-            tildeCount++;
-        }
-        else if (ch === '`') {
-            backtickCount++;
-        }
-        else if (ch === '$' && prevCh !== '\\') {
-            // Count $$ pairs for block/display math
-            if (i + 1 < len && line[i + 1] === '$') {
-                dollarPairCount++;
-                dollarCount += 2; // Count both dollars in the pair
-                i++; // Skip next $ since we counted the pair
+            if (i + 1 < len && line[i + 1] === '~') {
+                doubleTildeCount++;
+                i++; // Skip second tilde since we counted the pair
             }
             else {
-                dollarCount++; // Single $ for inline math
+                singleTildeCount++;
             }
         }
     }
+    // Open code/math region: close only it; everything after the opener is literal
+    if (inCode) {
+        return line + '`';
+    }
+    if (inMath) {
+        return line.trim() === '$$' ? line : line + '$';
+    }
     // Check for complete ** pairs in O(1) - pairs are matched left to right
     const hasCompleteBoldPair = doubleAsteriskPositions.length >= 2;
     let closingSuffix = '';
@@ -450,22 +517,18 @@ function closeInlineMarkersLinear(line) {
             }
         }
     }
-    // Check ~~ (strikethrough)
-    if (!closingSuffix && tildeCount >= 2) {
-        const remainder = tildeCount % 4;
-        if (remainder === 2) {
-            // Two tildes unclosed, close with ~~
-            closingSuffix = '~~';
-            if (hasTrailingSpace)
-                shouldTrim = true;
-        }
-        else if (remainder > 2 && remainder < 4) {
-            // Partial marker like ~~text~ (3 tildes), need 1 more
-            const needed = 4 - remainder;
-            closingSuffix = '~'.repeat(needed);
-            if (hasTrailingSpace)
-                shouldTrim = true;
-        }
+    // Check ~~ (strikethrough) and ~ (single-tilde) separately so that paired
+    // singles like ~Hello~ are left alone while ~~text and ~Hello both close.
+    if (!closingSuffix && doubleTildeCount % 2 === 1) {
+        // A trailing single ~ after an open ~~ is a partial closer (~~text~)
+        closingSuffix = singleTildeCount === 1 ? '~' : '~~';
+        if (hasTrailingSpace)
+            shouldTrim = true;
+    }
+    else if (!closingSuffix && singleTildeCount % 2 === 1) {
+        closingSuffix = '~';
+        if (hasTrailingSpace)
+            shouldTrim = true;
     }
     // Check ` (code)
     if (!closingSuffix && backtickCount % 2 === 1) {
@@ -486,7 +549,9 @@ function closeInlineMarkersLinear(line) {
     }
     // Check [ ] (brackets)
     if (!closingSuffix && bracketBalance > 0) {
-        closingSuffix = ']';
+        // An odd backtick opened inside the unclosed link text is an unclosed
+        // inline code span; close it before the bracket so `]` stays outside it.
+        closingSuffix = linkTextBacktickCount % 2 === 1 ? '`]' : ']';
     }
     // Check ( ) (parens)
     if (!closingSuffix && parenBalance > 0) {

package/dist/internal/parse/auto-unwrap.js

@@ -30,5 +30,9 @@ export function applyAutoUnwrap(node) {
     if (nonEmptyChildren.length > 1 || typeof nonEmptyChildren[0] === 'string' || nonEmptyChildren[0][0] !== 'p') {
         return [tag, props, ...children.map((child) => applyAutoUnwrap(child))];
     }
-    return [tag, props, ...nonEmptyChildren[0].slice(2)];
+    // Lift the paragraph's attrs onto the parent so trailing `{attr}` survives the unwrap.
+    // Parent attrs take precedence so explicit component props aren't overridden.
+    const paragraphAttrs = nonEmptyChildren[0][1];
+    const mergedProps = paragraphAttrs && Object.keys(paragraphAttrs).length > 0 ? { ...paragraphAttrs, ...props } : props;
+    return [tag, mergedProps, ...nonEmptyChildren[0].slice(2)];
 }

package/dist/internal/parse/html/html_block_rule.js

@@ -1,11 +1,10 @@
-// BASED ON https://github.com/serkodev/markdown-exit/blob/fe1351070a5841426223ab4a0a5c7874ba2b1257/packages/markdown-exit/src/parser/block/rules/html_block.ts
+// Standard CommonMark html_block rule — see
+// https://spec.commonmark.org/0.30/#html-blocks
+//
+// 7 sequences in priority order, each: [opener regex, closer regex, can-terminate-paragraph]
 import block_names from "./html_blocks.js";
 import { HTML_OPEN_CLOSE_TAG_RE } from "./html_re.js";
-// An array of opening and corresponding closing sequences for html tags,
-// last argument defines whether it can terminate a paragraph or not
-//
 const HTML_SEQUENCES = [
-    [new RegExp(`${HTML_OPEN_CLOSE_TAG_RE.source}\\s*$`), /^<\/[^>]+>$/, true],
     [/^<(script|pre|style|textarea)(?=(\s|>|$))/i, /<\/(script|pre|style|textarea)>/i, true],
     [/^<!--/, /-->/, true],
     [/^<\?/, /\?>/, true],
@@ -17,7 +16,6 @@ const HTML_SEQUENCES = [
 export default function html_block(state, startLine, endLine, silent) {
     let pos = state.bMarks[startLine] + state.tShift[startLine];
     let max = state.eMarks[startLine];
-    // if it's indented more than 3 spaces, it should be a code block
     if (state.sCount[startLine] - state.blkIndent >= 4)
         return false;
     if (state.src.charCodeAt(pos) !== 0x3c /* < */)
@@ -30,18 +28,14 @@ export default function html_block(state, startLine, endLine, silent) {
     }
     if (i === HTML_SEQUENCES.length)
         return false;
-    if (silent) {
-        // true if this sequence can be a terminator, false otherwise
+    if (silent)
         return HTML_SEQUENCES[i][2];
-    }
     let nextLine = startLine + 1;
-    // If we are here - we detected HTML block.
-    // Let's roll down till block end.
-    if (i !== 0 && !HTML_SEQUENCES[i][1].test(lineText)) {
+    // Walk forward until the closer regex matches or we hit a blank line.
+    if (!HTML_SEQUENCES[i][1].test(lineText)) {
         for (; nextLine < endLine; nextLine++) {
-            if (state.sCount[nextLine] < state.blkIndent) {
+            if (state.sCount[nextLine] < state.blkIndent)
                 break;
-            }
             pos = state.bMarks[nextLine] + state.tShift[nextLine];
             max = state.eMarks[nextLine];
             lineText = state.src.slice(pos, max);
@@ -53,7 +47,7 @@ export default function html_block(state, startLine, endLine, silent) {
         }
     }
     state.line = nextLine;
-    const token = lineText.startsWith('</') ? state.push('html_block_close', '', -1) : state.push('html_block', '', 1);
+    const token = state.push('html_block', '', 1);
     token.map = [startLine, nextLine];
     token.content = state.getLines(startLine, nextLine, state.blkIndent, true);
     return true;

package/dist/internal/parse/html/index.d.ts

@@ -1,4 +1,5 @@
 import type { ComarkNode } from 'comark';
+export declare const VOID_ELEMENTS: Set<string>;
 interface HtmlTagInfo {
     tag: string;
     attrs: Record<string, unknown>;

package/dist/internal/parse/html/index.js

@@ -1,5 +1,5 @@
 import { Parser } from 'htmlparser2';
-const VOID_ELEMENTS = new Set([
+export const VOID_ELEMENTS = new Set([
     'area',
     'base',
     'br',