flux-md 0.15.0 → 0.16.0

package/src/hi.ts

@@ -55,7 +55,7 @@ const jsPats: Pat[] = [
   ["str", /"(?:\\.|[^"\\\n])*"/y],
   ["str", /'(?:\\.|[^'\\\n])*'/y],
   ["str", /`(?:\\.|[^`\\])*`/y],
-  ["rx", /\/(?:\\.|\[(?:\\.|[^\]\\])*\]|[^/\\\n])+\/[gimsuy]*/y],
+  ["rx", /\/(?![*/])(?:\\.|[^/\\\n])+\/[gimsuy]*/y],
   ["num", /\b(?:0x[\da-fA-F_]+|0b[01_]+|0o[0-7_]+|\d[\d_]*(?:\.\d[\d_]*)?(?:[eE][+-]?\d+)?)\b/y],
   ["ident", /[A-Za-z_$][\w$]*/y],
   ["pun", /[+\-*/=<>!&|^~?:;,.[\](){}]/y],
@@ -103,7 +103,7 @@ const goPats: Pat[] = [
 
 const bashPats: Pat[] = [
   ["com", /#[^\n]*/y],
-  ["str", /"(?:\\.|\$\([^)]*\)|[^"\\])*"/y],
+  ["str", /"(?:\\.|[^"\\])*"/y],
   ["str", /'[^']*'/y],
   ["var", /\$\{[^}]+\}|\$\w+|\$[*@#?!$0-9]/y],
   ["num", /\b\d+\b/y],
@@ -187,6 +187,9 @@ function escapeHtml(s: string): string {
 }
 
 export function highlight(code: string, lang: string): string {
+  // Defense-in-depth: never tokenize a pathologically huge block on the main
+  // thread — fall back to plain escaped text.
+  if (code.length > 50_000) return escapeHtml(code);
   const conf = LANGS[lang.toLowerCase()];
   if (!conf) return escapeHtml(code);
 

package/src/html-to-react.ts

@@ -10,7 +10,10 @@ const VOID = new Set([
 // Attribute name → React prop name, for the handful that differ. Anything not
 // listed passes through verbatim (React forwards data-*/aria-* and lowercase
 // attributes unchanged).
-const ATTR_MAP: Record<string, string> = {
+// Prototype-free map so an attribute named `constructor`/`hasOwnProperty`/etc.
+// returns undefined (and the `?? name` fallback fires) rather than resolving to
+// an inherited Object.prototype member.
+const ATTR_MAP: Record<string, string> = Object.assign(Object.create(null), {
   class: "className",
   for: "htmlFor",
   colspan: "colSpan",
@@ -26,7 +29,7 @@ const ATTR_MAP: Record<string, string> = {
   crossorigin: "crossOrigin",
   enterkeyhint: "enterKeyHint",
   inputmode: "inputMode",
-};
+});
 
 // URL-bearing attributes whose value must be scheme-checked. `htmlToReact` is
 // exported and may be handed untrusted HTML directly; React happily renders a
@@ -34,6 +37,19 @@ const ATTR_MAP: Record<string, string> = {
 // defense-in-depth — the core's own output is already sanitized.
 const URL_ATTRS = new Set(["href", "src", "xlink:href", "formaction", "action", "poster", "data"]);
 
+// React-meaningful prop names that must never be forwarded from (possibly
+// untrusted) HTML attributes: `dangerouslySetInnerHTML` as a prop crashes the
+// whole render tree (DoS), and ref/key/defaultValue/etc. are injectable.
+const PROP_DENY = new Set([
+  "dangerouslysetinnerhtml", "ref", "key", "defaultvalue", "defaultchecked",
+  "suppresshydrationwarning", "suppresscontenteditablewarning",
+]);
+
+// Only forward attribute names that are a plain HTML attribute identifier
+// (so camelCase / `__proto__` / `constructor` never reach React props). The
+// explicit ATTR_MAP renames and `xlink:href` are allowed past this gate.
+const SAFE_ATTR_NAME = /^[a-z][a-z0-9-]*$/i;
+
 /** Replace a dangerous-scheme URL with "#". Mirrors the Rust `is_dangerous_scheme`:
  *  strip control chars (C0, DEL, C1 — matching Rust char::is_control),
  *  lowercase, then match. The strip affects only the probe, never output. */
@@ -42,8 +58,10 @@ function safeUrl(value: string): string {
   // reaches the DOM, so peel layers to a fixpoint before the scheme check —
   // catches `javascript&#58;` and double-encoded `javascript&amp;#58;`. Only the
   // probe is decoded; the returned value is untouched (safe URLs stay verbatim).
+  // Cap at 8 iterations: far beyond any legit URL (browsers entity-decode an
+  // href once), and bounds the loop so a hostile value can't make it quadratic.
   let decoded = value;
-  for (let prev = ""; decoded !== prev; ) {
+  for (let i = 0, prev = ""; i < 8 && decoded !== prev; i++) {
     prev = decoded;
     decoded = decodeEntities(decoded);
   }
@@ -265,6 +283,9 @@ function attrsToProps(tag: string, attrs: Record<string, string | true>, key: st
     // React drops most lowercase `on*` attrs — this also covers casings and
     // future React behavior.
     if (lower.startsWith("on")) continue;
+    // Reject React-meaningful names that would crash the render tree or inject
+    // internals (dangerouslySetInnerHTML, ref, key, defaultValue, …).
+    if (PROP_DENY.has(lower)) continue;
     if (lower === "style" && typeof value === "string") {
       props.style = safeStyle(parseStyle(value));
       continue;
@@ -280,6 +301,10 @@ function attrsToProps(tag: string, attrs: Record<string, string | true>, key: st
       props.defaultChecked = value === true ? true : value;
       continue;
     }
+    // Restrict forwarded ORIGINAL names to a plain HTML attribute identifier
+    // (plus the ATTR_MAP renames and xlink:href handled above) so weird casings
+    // / `__proto__` / `constructor` can never become a React prop.
+    if (!(lower in ATTR_MAP) && !SAFE_ATTR_NAME.test(name)) continue;
     props[ATTR_MAP[lower] ?? name] = value;
   }
   return props;
@@ -307,12 +332,116 @@ function nodesToReact(nodes: HNode[], components: Components, keyPrefix: string)
   return out.length === 0 ? null : out.length === 1 ? out[0] : out;
 }
 
+/**
+ * Split trusted HTML into its TOP-LEVEL node segments (each segment is the
+ * exact substring spanning one root node — an element with its full subtree, or
+ * a run of text between elements). Used only by the opt-in child-memo path so an
+ * OPEN block whose leading children are unchanged can reuse their already-built
+ * React nodes instead of re-parsing the whole string every tick. Mirrors
+ * `parseTrustedHtml`'s tokenizer for boundary detection, but records spans only.
+ */
+function topLevelSegments(html: string): string[] {
+  const segs: string[] = [];
+  let depth = 0; // open-element nesting depth
+  let segStart = 0; // start of the current top-level segment
+  let i = 0;
+  while (i < html.length) {
+    const lt = html.indexOf("<", i);
+    if (lt === -1) break;
+    if (html.startsWith("<!--", lt)) {
+      const end = html.indexOf("-->", lt + 4);
+      i = end === -1 ? html.length : end + 3;
+      continue;
+    }
+    if (html[lt + 1] === "!") {
+      const end = html.indexOf(">", lt);
+      i = end === -1 ? html.length : end + 1;
+      continue;
+    }
+    if (html[lt + 1] === "/") {
+      const end = html.indexOf(">", lt);
+      if (depth > 0) {
+        depth--;
+        if (depth === 0) {
+          // Closing the outermost element ends one top-level segment.
+          const stop = end === -1 ? html.length : end + 1;
+          segs.push(html.slice(segStart, stop));
+          segStart = stop;
+        }
+      }
+      i = end === -1 ? html.length : end + 1;
+      continue;
+    }
+    const c1 = html[lt + 1];
+    const isName = (c1 >= "a" && c1 <= "z") || (c1 >= "A" && c1 <= "Z");
+    if (!isName) {
+      // A stray '<' is literal text — not a boundary.
+      i = lt + 1;
+      continue;
+    }
+    const { tag, selfClose, next } = parseOpenTag(html, lt);
+    if (depth === 0) {
+      // Any text before this element is its own top-level segment.
+      if (lt > segStart) {
+        segs.push(html.slice(segStart, lt));
+        segStart = lt;
+      }
+    }
+    const isVoid = selfClose || VOID.has(tag.toLowerCase());
+    if (isVoid) {
+      if (depth === 0) {
+        segs.push(html.slice(segStart, next));
+        segStart = next;
+      }
+    } else {
+      depth++;
+    }
+    i = next;
+  }
+  // Trailing text (or an unterminated subtree) after the last boundary.
+  if (segStart < html.length) segs.push(html.slice(segStart));
+  return segs;
+}
+
 /**
  * Convert a block's trusted HTML string into a React node tree, replacing any
- * element whose tag name appears in `components`. Call this only for **closed**
- * blocks (open/streaming blocks have partial HTML); memoize on `(html,
- * components)` at the call site.
+ * element whose tag name appears in `components`.
+ *
+ * With no `childMemoMap`, behavior is byte-identical to a single
+ * `parseTrustedHtml` + convert pass — the closed-block call site memoizes on
+ * `(html, components)`.
+ *
+ * Passing a `childMemoMap` opts into OPEN-block child reuse: the html is split
+ * into top-level node segments and each is keyed by its exact substring. On a
+ * hit the cached React node is reused (no re-parse, no re-serialize); only new /
+ * changed trailing segments are parsed. The caller owns the map's lifetime and
+ * must scope it per block.id and invalidate it when `components` changes (a hit
+ * carries the React node built under the previous components map). Segment keys
+ * carry their original document order via `keyOffset` so React keys stay stable.
  */
-export function htmlToReact(html: string, components: Components): ReactNode {
-  return nodesToReact(parseTrustedHtml(html), components, "");
+export function htmlToReact(
+  html: string,
+  components: Components,
+  childMemoMap?: Map<string, ReactNode>,
+): ReactNode {
+  if (!childMemoMap) return nodesToReact(parseTrustedHtml(html), components, "");
+  const segs = topLevelSegments(html);
+  const out: ReactNode[] = [];
+  for (let idx = 0; idx < segs.length; idx++) {
+    const seg = segs[idx];
+    // Key the cache by index + segment text so identical segments at different
+    // positions get distinct React keys (no collision) and a leading segment
+    // stays a hit only while it keeps the same document index (append-only
+    // growth — the common open-block case — preserves both).
+    const cacheKey = idx + "" + seg;
+    const hit = childMemoMap.get(cacheKey);
+    if (hit !== undefined) {
+      out.push(hit);
+      continue;
+    }
+    const node = nodesToReact(parseTrustedHtml(seg), components, idx + ".");
+    childMemoMap.set(cacheKey, node);
+    out.push(node);
+  }
+  return out.length === 0 ? null : out.length === 1 ? out[0] : out;
 }

package/src/index.ts

@@ -37,4 +37,6 @@ export type {
   CodeBlockData,
   MathBlockData,
   ListData,
+  NestedBlock,
+  ContainerData,
 } from "./types";

package/src/morph.ts

@@ -0,0 +1,253 @@
+/**
+ * Tiny, self-contained idiomorph-style DOM morph (zero npm dependency, to keep
+ * the security/supply-chain posture). It mutates a live element's children to
+ * match a desired tree **in place** instead of replacing them wholesale, so the
+ * browser only repaints/relayouts the parts that actually changed and focus +
+ * text-selection survive a streaming update.
+ *
+ * Scope: this is intentionally minimal — it handles the cases the streaming
+ * open-block tail produces (text growth, appended trailing nodes, attribute
+ * tweaks). It is OPT-IN (see `morphOpenBlocks` in dom.ts) and never runs on the
+ * default path.
+ *
+ * Matching strategy (per child level):
+ *  - Build an id-set over the *new* subtree so a node carrying an `id` that the
+ *    incoming tree also has can be matched across reorders/insertions.
+ *  - Walk old/new children with two cursors. When the heads are "soft-equal"
+ *    (same nodeType, same tagName for elements) we morph them in place and
+ *    recurse; otherwise we id-match, insert, or remove the minimum.
+ *  - Mutate matched element attributes/text in place; append trailing new nodes;
+ *    remove old nodes with no match.
+ */
+
+/** Parse an HTML string into a detached `<template>`'s content (a DocumentFragment). */
+export function htmlToFragment(html: string): DocumentFragment {
+  const tpl = document.createElement("template");
+  tpl.innerHTML = html;
+  return tpl.content;
+}
+
+interface SavedFocus {
+  node: Element;
+  start: number | null;
+  end: number | null;
+}
+
+// Snapshot the active element + (for text inputs/areas) its selection range, so
+// a morph that touches the focused node — or its ancestors — does not blur it.
+function saveFocus(root: Node): SavedFocus | null {
+  if (typeof document === "undefined") return null;
+  const active = document.activeElement;
+  if (!active || active === document.body) return null;
+  if (!root.contains(active)) return null;
+  let start: number | null = null;
+  let end: number | null = null;
+  const el = active as HTMLInputElement & HTMLTextAreaElement;
+  try {
+    if (typeof el.selectionStart === "number") {
+      start = el.selectionStart;
+      end = el.selectionEnd;
+    }
+  } catch {
+    // Some input types throw on selectionStart access; ignore.
+  }
+  return { node: active, start, end };
+}
+
+function restoreFocus(saved: SavedFocus | null): void {
+  if (!saved) return;
+  const node = saved.node as HTMLElement & HTMLInputElement & HTMLTextAreaElement;
+  // Still attached? (a morph could have removed it — then there's nothing to do)
+  if (typeof document !== "undefined" && !document.contains(node)) return;
+  if (document.activeElement === node) {
+    // Selection may still need restoring even if focus was kept.
+  } else if (typeof node.focus === "function") {
+    try {
+      node.focus({ preventScroll: true });
+    } catch {
+      try {
+        node.focus();
+      } catch {
+        /* not focusable anymore */
+      }
+    }
+  }
+  if (saved.start !== null && typeof node.setSelectionRange === "function") {
+    try {
+      node.setSelectionRange(saved.start, saved.end ?? saved.start);
+    } catch {
+      // setSelectionRange throws for input types that don't support it.
+    }
+  }
+}
+
+/**
+ * Morph `from`'s children to match `to` (a fragment, element, or HTML string).
+ * `from` itself is never replaced — only its subtree is reconciled in place.
+ */
+export function morph(from: Element, to: string | DocumentFragment | Element): void {
+  const fragment: DocumentFragment | Element =
+    typeof to === "string" ? htmlToFragment(to) : to;
+  const saved = saveFocus(from);
+  morphChildren(from, fragment);
+  restoreFocus(saved);
+}
+
+// Two element nodes can be morphed into one another (vs. replaced) when they are
+// the same element type. Text/comment nodes match on nodeType alone.
+function isSoftMatch(a: Node, b: Node): boolean {
+  if (a.nodeType !== b.nodeType) return false;
+  if (a.nodeType === 1) {
+    return (a as Element).tagName === (b as Element).tagName;
+  }
+  return true;
+}
+
+function nodeId(n: Node): string | null {
+  if (n.nodeType !== 1) return null;
+  const id = (n as Element).getAttribute("id");
+  return id && id.length > 0 ? id : null;
+}
+
+// Collect the set of element ids present anywhere in `parent`'s direct children
+// (one level — recursion handles deeper levels). Used so a keyed node can be
+// matched across insertions before we resort to soft-matching.
+function childIdSet(parent: Node): Set<string> {
+  const ids = new Set<string>();
+  for (let c = parent.firstChild; c; c = c.nextSibling) {
+    const id = nodeId(c);
+    if (id) ids.add(id);
+  }
+  return ids;
+}
+
+function morphChildren(oldParent: Node, newParent: Node): void {
+  const newIds = childIdSet(newParent);
+
+  let oldChild = oldParent.firstChild;
+  let newChild = newParent.firstChild;
+
+  while (newChild) {
+    const nextNew = newChild.nextSibling;
+
+    // No more old nodes → append the rest of the new ones (the common streaming
+    // case: trailing tokens/elements grew onto the tail). We must import nodes
+    // out of the source fragment into the live document.
+    if (!oldChild) {
+      oldParent.appendChild(importNode(oldParent, newChild));
+      newChild = nextNew;
+      continue;
+    }
+
+    const nextOld = oldChild.nextSibling;
+
+    // Exact id match at the head → morph in place.
+    const newKey = nodeId(newChild);
+    const oldKey = nodeId(oldChild);
+
+    if (isSoftMatch(oldChild, newChild) && newKey === oldKey) {
+      morphNode(oldChild, newChild);
+      oldChild = nextOld;
+      newChild = nextNew;
+      continue;
+    }
+
+    // The old head carries an id the new tree no longer has → it's gone; remove
+    // it and retry this new child against the next old node.
+    if (oldKey && !newIds.has(oldKey)) {
+      const toRemove = oldChild;
+      oldChild = nextOld;
+      oldParent.removeChild(toRemove);
+      continue;
+    }
+
+    // The new head has an id that exists further down the old list → pull that
+    // old node up to the head, morph, and continue.
+    if (newKey) {
+      const match = findChildById(oldParent, newKey);
+      if (match) {
+        if (match !== oldChild) oldParent.insertBefore(match, oldChild);
+        morphNode(match, newChild);
+        oldChild = match.nextSibling;
+        newChild = nextNew;
+        continue;
+      }
+      // New keyed node not present in the old tree → insert a fresh import.
+      oldParent.insertBefore(importNode(oldParent, newChild), oldChild);
+      newChild = nextNew;
+      continue;
+    }
+
+    // Soft (unkeyed) match → morph in place.
+    if (isSoftMatch(oldChild, newChild)) {
+      morphNode(oldChild, newChild);
+      oldChild = nextOld;
+      newChild = nextNew;
+      continue;
+    }
+
+    // No match at all: replace the old head with an import of the new head.
+    oldParent.insertBefore(importNode(oldParent, newChild), oldChild);
+    oldParent.removeChild(oldChild);
+    oldChild = nextOld;
+    newChild = nextNew;
+  }
+
+  // Any leftover old children have no counterpart → remove them.
+  while (oldChild) {
+    const next = oldChild.nextSibling;
+    oldParent.removeChild(oldChild);
+    oldChild = next;
+  }
+}
+
+// Find a direct child of `parent` whose element id equals `id`.
+function findChildById(parent: Node, id: string): Node | null {
+  for (let c = parent.firstChild; c; c = c.nextSibling) {
+    if (nodeId(c) === id) return c;
+  }
+  return null;
+}
+
+// Bring a node from a source fragment into the live document so it can be
+// inserted. `importNode(deep)` clones; the source fragment is discarded after.
+function importNode(target: Node, source: Node): Node {
+  const doc = target.ownerDocument ?? document;
+  return doc.importNode(source, true);
+}
+
+// Morph a single matched node `oldNode` toward `newNode`. Elements get their
+// attributes synced and children recursed; text/comment nodes get their data
+// updated in place (so the live text node identity — and any caret in it —
+// survives a token append).
+function morphNode(oldNode: Node, newNode: Node): void {
+  if (oldNode.nodeType === 1) {
+    morphAttributes(oldNode as Element, newNode as Element);
+    morphChildren(oldNode, newNode);
+    return;
+  }
+  // Text (3) / comment (8) / CDATA: update character data in place.
+  if (oldNode.nodeValue !== newNode.nodeValue) {
+    oldNode.nodeValue = newNode.nodeValue;
+  }
+}
+
+function morphAttributes(oldEl: Element, newEl: Element): void {
+  // Set/update attributes present on the new element.
+  const newAttrs = newEl.attributes;
+  for (let i = 0; i < newAttrs.length; i++) {
+    const attr = newAttrs[i];
+    if (oldEl.getAttribute(attr.name) !== attr.value) {
+      oldEl.setAttribute(attr.name, attr.value);
+    }
+  }
+  // Remove attributes the new element no longer has. Iterate over a snapshot of
+  // names because removeAttribute mutates the live NamedNodeMap.
+  const oldAttrs = oldEl.attributes;
+  const stale: string[] = [];
+  for (let i = 0; i < oldAttrs.length; i++) {
+    const name = oldAttrs[i].name;
+    if (!newEl.hasAttribute(name)) stale.push(name);
+  }
+  for (const name of stale) oldEl.removeAttribute(name);
+}