comark 0.4.0 → 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/index.d.ts

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

package/dist/devtools/index.js

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

package/dist/devtools/register.d.ts

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

package/dist/devtools/register.js

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

package/dist/devtools/registry.d.ts

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

package/dist/devtools/registry.js

@@ -0,0 +1 @@
+export * from '../../src/devtools/registry.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/devtools/vite.d.ts

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

package/dist/devtools/vite.js

@@ -0,0 +1 @@
+export * from '../../src/devtools/vite.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

@@ -235,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;
@@ -278,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 ***)
@@ -312,20 +356,13 @@ function closeInlineMarkersLinear(line) {
                 singleTildeCount++;
             }
         }
-        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
-            }
-            else {
-                dollarCount++; // Single $ for inline math
-            }
-        }
+    }
+    // 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;
@@ -512,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/stringify/attributes.d.ts

@@ -5,7 +5,7 @@ export interface ResolveAttributesOptions {
      * `:` prefix is always stripped. Non-JSON strings fall back to a dot-path
      * lookup in `renderData`; unresolved paths yield `undefined`.
      *
-     * This matches the Vue/React/Svelte renderer semantics, which always
+     * This matches the Vue/React/Svelte/Angular renderer semantics, which always
      * normalize bindings into real JS values suitable for typed component props.
      *
      * When false (default) only dot-path lookups are applied — literals and

package/dist/internal/stringify/attributes.js

@@ -72,14 +72,15 @@ export function resolveAttribute(attrs, renderData, key) {
 // is implicit in `- [ ]`) so they should not echo back as user attrs.
 const IMPLICIT_ATTRS = {
     blockquote: { drop: ['as'] },
+    ol: { drop: ['start'] },
     ul: { classBlocklist: ['contains-task-list'] },
     li: { classBlocklist: ['task-list-item'] },
     // `language`/`filename`/`highlights`/`meta` ride on the fence info string.
-    // `tabindex`/`style` come from render-time plugins (e.g. shiki) and have no
-    // markdown form. `class` is handled specially in userBlockAttrs because shiki
-    // merges its injected classes with the user's class — we need to strip just
-    // the highlighter portion.
-    pre: { drop: ['language', 'filename', 'highlights', 'meta', 'tabindex', 'style'] },
+    // `style` comes from render-time plugins (e.g. shiki) and has no markdown
+    // form. `class` is handled specially in userBlockAttrs because shiki merges
+    // its injected classes with the user's class — we need to strip just the
+    // highlighter portion.
+    pre: { drop: ['language', 'filename', 'highlights', 'meta', 'style'] },
 };
 /**
  * Filter implicit/auto-generated attrs that are encoded by the native
@@ -104,10 +105,10 @@ export function userBlockAttrs(tag, attributes) {
                 result[key] = remaining;
             continue;
         }
-        if (key === 'class' && tag === 'pre' && typeof value === 'string' && value.startsWith('shiki ')) {
-            // Shiki injects `shiki [shiki-themes] <themes…> dark:<theme>` and any
-            // user-supplied class is appended after it. Recover the user portion by
-            // dropping everything up to and including the first `dark:*` token.
+        if (key === 'class' && tag === 'pre' && typeof value === 'string' && value.startsWith('shiki')) {
+            // Shiki injects `shiki [shiki-themes] <themes…>` (or a bare `shiki`) and
+            // appends any user class after a `.` separator. Recover the user portion
+            // by dropping everything up to and including that separator.
             const tokens = value.split(/\s+/);
             let cutoff = tokens.findIndex((t) => t === '.');
             const userClass = cutoff >= 0 ? tokens.slice(cutoff + 1).join(' ') : '';

package/dist/internal/stringify/handlers/li.js

@@ -16,23 +16,30 @@ export async function li(node, state) {
         prefix += input[1].checked || input[1][':checked'] ? '[x] ' : '[ ] ';
     }
     const prefixWidth = prefix.length;
+    // Direct text children render sibling components inline.
+    const hasInlineContent = children.some((child) => typeof child === 'string');
     let result = '';
     for (const child of children) {
-        const rendered = await state.one(child, state, node);
-        if (result && Array.isArray(child)) {
-            if (blockElements.has(child[0])) {
-                // Block-level child: put on its own line and indent to align with list prefix
-                const indented = indent(rendered, { width: prefixWidth });
+        if (Array.isArray(child)) {
+            const tag = child[0];
+            if (result && blockElements.has(tag)) {
+                const indented = indent(await state.one(child, state, node), { width: prefixWidth });
                 result = result.trimEnd() + '\n' + indented.trimEnd() + '\n';
                 continue;
             }
-            if (child[0] === 'p') {
-                const indented = indent(rendered, { width: prefixWidth });
+            if (result && tag === 'p') {
+                const indented = indent(await state.one(child, state, node), { width: prefixWidth });
                 result = result.trimEnd() + '\n\n' + indented.trimEnd() + '\n';
                 continue;
             }
+            // No parent → mdc skips its own nesting indentation, so li owns it here.
+            if (!hasInlineContent && !(tag in state.handlers)) {
+                const indented = indent(await state.one(child, state), { width: prefixWidth, ignoreFirstLine: !result });
+                result = result ? result.trimEnd() + '\n' + indented.trimEnd() + '\n' : indented.trimEnd() + '\n';
+                continue;
+            }
         }
-        result += rendered;
+        result += await state.one(child, state, node);
     }
     result = result.trim();
     const attrs = comarkAttributes(userBlockAttrs('li', node[1]));

package/dist/internal/stringify/handlers/ol.js

@@ -2,7 +2,10 @@ import { indent } from "../../../utils/index.js";
 import { comarkAttributes, userBlockAttrs } from "../attributes.js";
 export async function ol(node, state) {
     const children = node.slice(2);
-    const revert = state.applyContext({ list: true, order: 1, listIndent: 3 });
+    // `start` is carried by the native numbering; IMPLICIT_ATTRS drops it from user attrs.
+    const start = Number(node[1].start);
+    const order = Number.isInteger(start) && start >= 1 ? start : 1;
+    const revert = state.applyContext({ list: true, order, listIndent: 3 });
     let result = '';
     for (const child of children) {
         result += await state.one(child, state);

package/dist/internal/stringify/state.js

@@ -25,7 +25,7 @@ export async function one(node, state, parent) {
         if (state.context.html) {
             return escapeHtml(node);
         }
-        return node;
+        return escapeMarkdownText(node);
     }
     if (node[0] === null) {
         return await state.handlers.comment(node, state);
@@ -175,3 +175,15 @@ function escapeHtml(text) {
     };
     return text.replace(/[<>]/g, (char) => map[char]);
 }
+/**
+ * Escape characters in a markdown text node that would otherwise be
+ * misinterpreted as markdown syntax on a subsequent parse.
+ *
+ * `[` opens link/image syntax; `]` closes it.  Both must be escaped so that
+ * a text node like `[foo](bar)` round-trips as plain text, and a text node
+ * containing `]` inside a link (e.g. `dsd]dsd`) doesn't prematurely close
+ * the surrounding `[…]` brackets.
+ */
+function escapeMarkdownText(text) {
+    return text.replace(/[[\]]/g, (ch) => `\\${ch}`);
+}

package/dist/parse.js

@@ -53,7 +53,7 @@ export function createParse(options = {}) {
     plugins.unshift(alert());
     const parser = new MarkdownExit({
         html: false,
-        linkify: true,
+        linkify: options.linkify ?? true,
     }).enable(['table', 'strikethrough']);
     if (options.html !== false) {
         parser.inline.ruler.before('text', 'comark_html_inline', html_inline);

package/dist/plugins/highlight.js

@@ -284,7 +284,6 @@ export async function highlightCodeBlocks(tree, options = {}) {
         const newPreAttrs = {
             ...preAttrs,
             class: userClass ? `${classStr} . ${userClass}` : classStr,
-            tabindex: '0',
         };
         if (options.preStyles) {
             const lightTheme = options.themes?.light;

package/dist/plugins/security.d.ts

@@ -1,3 +1,4 @@
+import type { ComarkElement, ComarkNode } from 'comark';
 import type { PropsValidationOptions } from '../internal/props-validation.ts';
 interface SecurityOptions extends PropsValidationOptions {
     /**
@@ -5,6 +6,16 @@ interface SecurityOptions extends PropsValidationOptions {
      * @default []
      */
     blockedTags?: string[];
+    /**
+     * Tags to allow only in the output tree.
+     * @default []
+     */
+    allowedTags?: string[];
+    /**
+     * Behavior when encountering an unallowed or blocked tag.
+     * @default undefined
+     */
+    tagFallback?: (element: ComarkElement) => false | ComarkNode | Promise<false | ComarkNode>;
 }
 declare const _default: import("comark").ComarkPluginFactory<SecurityOptions, {}, {}>;
 export default _default;

package/dist/plugins/security.js

@@ -1,9 +1,10 @@
 import { defineComarkPlugin } from "../utils/helpers.js";
-import { visit } from "../utils/index.js";
+import { visitAsync } from "../utils/index.js";
 import { validateProps } from "../internal/props-validation.js";
 export default defineComarkPlugin((options = {}) => {
-    const { blockedTags = [], allowedLinkPrefixes, allowedImagePrefixes, allowedProtocols, defaultOrigin, allowDataImages, } = options;
+    const { blockedTags = [], allowedTags = [], tagFallback = undefined, allowedLinkPrefixes, allowedImagePrefixes, allowedProtocols, defaultOrigin, allowDataImages, } = options;
     const dropSet = new Set(blockedTags.map((t) => t.toLowerCase()));
+    const allowSet = new Set(allowedTags.map((t) => t.toLowerCase()));
     const propsOptions = {
         allowedLinkPrefixes,
         allowedImagePrefixes,
@@ -13,11 +14,17 @@ export default defineComarkPlugin((options = {}) => {
     };
     return {
         name: 'security',
-        post(state) {
-            visit(state.tree, (node) => typeof node !== 'string' && node[0] !== null, (node) => {
+        async post(state) {
+            await visitAsync(state.tree, (node) => typeof node !== 'string' && node[0] !== null, async (node) => {
                 const element = node;
-                // return false to remove the node from the tree
-                if (dropSet.has(element[0].toLowerCase())) {
+                const tagName = element[0].toLowerCase();
+                const isBlocked = dropSet.has(tagName);
+                const isNotAllowed = allowSet.size > 0 && !allowSet.has(tagName);
+                if (isNotAllowed || isBlocked) {
+                    if (typeof tagFallback === 'function') {
+                        return await tagFallback(element);
+                    }
+                    // return false to remove the node from the tree
                     return false;
                 }
                 const keys = Object.keys(element[1]);

package/dist/plugins/syntax.js

@@ -4,6 +4,22 @@ import { parseBracketContent } from "../internal/parse/syntax/brackets.js";
 import { searchProps } from "../internal/parse/syntax/props.js";
 import { parseBlockParams } from "../internal/parse/syntax/block-params.js";
 import { parseYaml } from "../internal/yaml.js";
+/**
+ * A component name must start with a letter or `$`, followed by word chars,
+ * `$` or `-`. Mirrors the block name grammar (`RE_BLOCK_NAME = /^[a-z$]/i`).
+ */
+const RE_COMPONENT_NAME = /^[a-z$][\w$-]*/i;
+/**
+ * Whether `name` begins with a syntactically valid component name.
+ *
+ * This prevents sequences such as `:8100` or `::30` from being treated as
+ * components — a purely numeric name is not a valid component and would
+ * otherwise produce invalid output like `createElement('8100')` (inline) or
+ * throw `Invalid block params` (block).
+ */
+function isValidComponentName(name) {
+    return RE_COMPONENT_NAME.test(name);
+}
 // #region Block component plugin (`::name` and `::name ... ::`)
 const blockYamlLines = {
     '---': '---',
@@ -18,7 +34,7 @@ const markdownItComarkBlock = (md) => {
     const marker_char = marker_str.charCodeAt(0);
     md.block.ruler.before('fence', 'comark_block_shorthand', function comark_block_shorthand(state, startLine, _endLine, silent) {
         const line = state.src.slice(state.bMarks[startLine] + state.tShift[startLine], state.eMarks[startLine]);
-        if (!/^:\w/.test(line))
+        if (line[0] !== ':' || !isValidComponentName(line.slice(1)))
             return false;
         const { name, content, props, remaining } = parseBlockParams(line.slice(1));
         // If there's unparsed remaining content, treat it as inline component in a paragraph
@@ -78,6 +94,11 @@ const markdownItComarkBlock = (md) => {
         if (marker_count < min_markers)
             return false;
         const markup = state.src.slice(start, pos);
+        // Bail out (plain text) on an invalid name instead of letting
+        // parseBlockParams throw on e.g. `::8100`.
+        const nameStart = state.skipSpaces(pos);
+        if (nameStart < max && !isValidComponentName(state.src.slice(nameStart, max)))
+            return false;
         const params = parseBlockParams(state.src.slice(pos, max));
         if (!params.name)
             return false;
@@ -383,10 +404,12 @@ const markdownItInlineComponent = (md) => {
         // Empty name
         if (nameEnd <= start + 1)
             return false;
+        const name = state.src.slice(start + 1, nameEnd);
+        if (!isValidComponentName(name))
+            return false;
         state.pos = index;
         if (silent)
             return true;
-        const name = state.src.slice(start + 1, nameEnd);
         if (contentStart !== -1) {
             state.push('mdc_inline_component', name, 1);
             const oldPos = state.pos;

package/dist/render.d.ts

@@ -8,7 +8,9 @@ export { resolveAttributes, resolveAttribute } from './internal/stringify/attrib
  * @param context - The context of the renderer
  * @returns The string representation of the Comark tree
  */
-export declare function render(tree: ComarkTree, context?: RenderOptions): Promise<string>;
+export declare function render(tree: ComarkTree | {
+    nodes: ComarkTree['nodes'];
+}, context?: RenderOptions): Promise<string>;
 /**
  * Render Comark tree to markdown
  *
@@ -16,4 +18,6 @@ export declare function render(tree: ComarkTree, context?: RenderOptions): Promi
  * @param options - Optional rendering options
  * @returns The markdown string with optional frontmatter
  */
-export declare function renderMarkdown(tree: ComarkTree, options?: RenderMarkdownOptions): Promise<string>;
+export declare function renderMarkdown(tree: ComarkTree | {
+    nodes: ComarkTree['nodes'];
+}, options?: RenderMarkdownOptions): Promise<string>;

package/dist/render.js

@@ -11,7 +11,7 @@ export { resolveAttributes, resolveAttribute } from "./internal/stringify/attrib
  * @returns The string representation of the Comark tree
  */
 export async function render(tree, context = {}) {
-    const state = createState({ ...context, tree, handlers: context.components });
+    const state = createState({ ...context, tree: tree, handlers: context.components });
     let result = '';
     for (const child of tree.nodes) {
         result += await one(child, state);
@@ -27,5 +27,5 @@ export async function render(tree, context = {}) {
  */
 export async function renderMarkdown(tree, options) {
     const content = await render(tree, { format: 'markdown/comark', ...options });
-    return renderFrontmatter(tree.frontmatter, content, options?.frontmatterOptions);
+    return renderFrontmatter(tree.frontmatter || {}, content, options?.frontmatterOptions);
 }

package/dist/types.d.ts

@@ -339,6 +339,11 @@ export interface ParseOptions<TPlugins extends readonly ComarkPlugin<any, any>[]
      * // With html: false — HTML tags are left as raw text / ignored
      */
     html?: boolean;
+    /**
+     * Set `false` to disable autoconvert URL-like text to links.
+     * @default true
+     */
+    linkify?: boolean;
     /**
      * Additional plugins to use
      * @default []

package/dist/utils/index.d.ts

@@ -1,4 +1,5 @@
 import type { ComarkNode, ComarkTree } from 'comark';
+type VisitResult = ComarkNode | false | undefined | void;
 /**
  * Get the text content of a Comark node
  *
@@ -17,7 +18,8 @@ export declare function textContent(node: ComarkNode, options?: {
  * @param checker - A function that checks if a node should be visited
  * @param visitor - A function that visits a node
  */
-export declare function visit(tree: ComarkTree, checker: (node: ComarkNode) => boolean, visitor: (node: ComarkNode) => ComarkNode | false | undefined | void): void;
+export declare function visit(tree: ComarkTree, checker: (node: ComarkNode) => boolean, visitor: (node: ComarkNode) => VisitResult): void;
+export declare function visitAsync(tree: ComarkTree, checker: (node: ComarkNode) => boolean, visitor: (node: ComarkNode) => Promise<VisitResult> | VisitResult): Promise<void>;
 export declare function indent(text: string, { ignoreFirstLine, level, width }?: {
     ignoreFirstLine?: boolean;
     level?: number;

package/dist/utils/index.js

@@ -22,20 +22,11 @@ export function textContent(node, options = {}) {
     }
     return out;
 }
-/**
- * Visit a Comark tree and apply a visitor function to each node
- *
- * @param tree - The Comark tree
- * @param checker - A function that checks if a node should be visited
- * @param visitor - A function that visits a node
- */
-export function visit(tree, checker, 
-// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
-visitor) {
-    function walk(node, parent, index) {
+function* walkGenerator(tree, checker) {
+    function* walk(node, parent, index) {
         let currentNode = node;
         if (checker(node)) {
-            const res = visitor(node);
+            const res = yield node;
             if (res === false) {
                 // remove the node from the parent
                 ;
@@ -52,7 +43,7 @@ visitor) {
             // Use a while loop to handle removals correctly - don't increment if node was removed
             let i = 2;
             while (i < currentNode.length) {
-                const childRemoved = walk(currentNode[i], currentNode, i);
+                const childRemoved = yield* walk(currentNode[i], currentNode, i);
                 if (childRemoved) {
                     // If removed, i stays the same (next node is now at this index)
                     continue;
@@ -65,7 +56,7 @@ visitor) {
     // Use a while loop to handle removals correctly - don't increment if node was removed
     let i = 0;
     while (i < tree.nodes.length) {
-        const removed = walk(tree.nodes[i], tree.nodes, i);
+        const removed = yield* walk(tree.nodes[i], tree.nodes, i);
         if (removed) {
             // If removed, i stays the same (next node is now at this index)
             continue;
@@ -73,6 +64,31 @@ visitor) {
         i += 1;
     }
 }
+/**
+ * Visit a Comark tree and apply a visitor function to each node
+ *
+ * @param tree - The Comark tree
+ * @param checker - A function that checks if a node should be visited
+ * @param visitor - A function that visits a node
+ */
+export function visit(tree, checker, 
+// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+visitor) {
+    const iterator = walkGenerator(tree, checker);
+    let step = iterator.next();
+    while (!step.done) {
+        const res = visitor(step.value);
+        step = iterator.next(res);
+    }
+}
+export async function visitAsync(tree, checker, visitor) {
+    const iterator = walkGenerator(tree, checker);
+    let step = iterator.next();
+    while (!step.done) {
+        const res = await visitor(step.value);
+        step = iterator.next(res);
+    }
+}
 // #region String Utils
 export function indent(text, { ignoreFirstLine = false, level = 1, width } = {}) {
     const pad = width ? ' '.repeat(width) : '  '.repeat(level);

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "comark",
-  "version": "0.4.0",
-  "description": "Components in Markdown (Comark) parser with streaming support for Vue, React, Svelte and HTML",
+  "version": "0.5.0",
+  "description": "Components in Markdown (Comark) parser with streaming support for Vue, React, Svelte, Angular and HTML",
   "keywords": [
+    "angular",
     "markdown",
     "mdc",
     "parser",
     "react",
     "streaming",
+    "svelte",
     "vue"
   ],
   "homepage": "https://comark.dev",