@chromamark/renderer 0.1.1 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chromamark/renderer",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "ChromaMark renderer — a markdown-it plugin adding colored blocks, colored pills, collapsible sections, fields, meters and inline diff on top of CommonMark + GFM.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "cjfravel-dev",

package/src/browser-core.js

@@ -8,8 +8,10 @@ import { createRenderer, render as renderString } from './index.js';
 
 const STYLE_ID = 'chromamark-theme';
 const DONE_ATTR = 'data-chromamark-done';
+const SRC_ATTR = 'data-chromamark-src';
+const ERR_ATTR = 'data-chromamark-error';
 const DEFAULT_SELECTOR =
-  'script[type="text/chromamark"], template.chromamark, [data-chromamark], .chromamark';
+  'script[type="text/chromamark"], template.chromamark, [data-chromamark], [data-chromamark-src], .chromamark';
 
 /** The theme stylesheet (populated by the bundle via configureTheme). */
 export let theme = '';
@@ -67,16 +69,20 @@ function sourceOf(el, tag) {
 export function renderElement(target, options) {
   const el = resolve(target);
   if (!el || el.hasAttribute(DONE_ATTR)) return null;
+  if (el.hasAttribute && el.hasAttribute(SRC_ATTR)) return renderSrc(el, options);
 
+  const doc = el.ownerDocument || (typeof document !== 'undefined' ? document : null);
   const tag = (el.tagName || '').toLowerCase();
   const html = renderString(dedent(sourceOf(el, tag)), options);
   el.setAttribute(DONE_ATTR, '');
 
   if (tag === 'script' || tag === 'template') {
-    const out = document.createElement('div');
+    const out = doc.createElement('div');
     out.className = 'chromamark-output';
     out.innerHTML = html;
-    el.parentNode.insertBefore(out, el.nextSibling);
+    // A detached holder has no parent to receive a sibling; return the
+    // rendered node anyway so the caller can place it, rather than crashing.
+    if (el.parentNode) el.parentNode.insertBefore(out, el.nextSibling);
     return out;
   }
   el.innerHTML = html;
@@ -84,6 +90,43 @@ export function renderElement(target, options) {
   return el;
 }
 
+/**
+ * Fetch the external ChromaMark file named by an element's data-chromamark-src
+ * and render it into that element, the way a browser loads an external script or
+ * stylesheet. Resolves to the element on success, or null when skipped/failed;
+ * it never rejects, so a missing file degrades gracefully (the element keeps its
+ * existing content and gains a data-chromamark-error marker). Requires a DOM
+ * with fetch — i.e. the page must be served over http(s), not opened as file://.
+ */
+export function renderSrc(target, options) {
+  const el = resolve(target);
+  if (!el || el.hasAttribute(DONE_ATTR)) return Promise.resolve(null);
+  const url = el.getAttribute(SRC_ATTR);
+  if (!url) return Promise.resolve(null);
+  el.setAttribute(DONE_ATTR, '');
+
+  const view = el.ownerDocument && el.ownerDocument.defaultView;
+  const doFetch = (view && view.fetch) || (typeof fetch !== 'undefined' ? fetch : null);
+  const fail = (message) => {
+    el.setAttribute(ERR_ATTR, message);
+    return null;
+  };
+  if (!doFetch) return Promise.resolve(fail('ChromaMark: fetch is unavailable'));
+
+  return Promise.resolve()
+    .then(() => doFetch(url))
+    .then((res) => {
+      if (!res || !res.ok) throw new Error(`HTTP ${res ? res.status : '?'}`);
+      return res.text();
+    })
+    .then((text) => {
+      el.innerHTML = renderString(text, options);
+      el.classList.add('chromamark-output');
+      return el;
+    })
+    .catch((err) => fail(`ChromaMark: failed to load ${url} (${(err && err.message) || err})`));
+}
+
 /** Render every element matching the selector (defaults to the standard targets). */
 export function renderAll(selector, options) {
   const nodes = document.querySelectorAll(selector || DEFAULT_SELECTOR);
@@ -100,6 +143,7 @@ export const ChromaMark = {
   render,
   renderElement,
   renderAll,
+  renderSrc,
   injectTheme,
   autoRender,
   createRenderer,

package/src/containers.js

@@ -154,6 +154,19 @@ export default function containerPlugin(md, enabled) {
   });
   const esc = md.utils.escapeHtml;
 
+  // Render a title/summary/field value as inline content (so pills, colored
+  // text, meters, and markdown work there) while forcing html:false, so raw
+  // HTML in that user-controlled text is escaped rather than injected.
+  const renderInlineSafe = (text) => {
+    const prevHtml = md.options.html;
+    md.options.html = false;
+    try {
+      return md.renderInline(text);
+    } finally {
+      md.options.html = prevHtml;
+    }
+  };
+
   function decorate(meta) {
     const custom = meta.color ? ' cm-custom' : '';
     const style = meta.color ? ` style="--fg:${esc(meta.color)}"` : '';
@@ -168,11 +181,11 @@ export default function containerPlugin(md, enabled) {
       const open = meta.open ? ' open' : '';
       return (
         `<details class="cm-details${custom}"${tone}${style}${open}>` +
-        `<summary>${esc(meta.summary)}</summary><div class="cm-body">`
+        `<summary>${renderInlineSafe(meta.summary)}</summary><div class="cm-body">`
       );
     }
     let html = `<div class="cm-block${custom}"${tone}${style}>`;
-    if (meta.title) html += `<div class="cm-title">${esc(meta.title)}</div>`;
+    if (meta.title) html += `<div class="cm-title">${renderInlineSafe(meta.title)}</div>`;
     return html + '<div class="cm-body">';
   };
 
@@ -180,18 +193,10 @@ export default function containerPlugin(md, enabled) {
     tokens[idx].meta.structure === 'details' ? '</div></details>' : '</div></div>';
 
   md.renderer.rules.cm_fields = (tokens, idx) => {
-    // Field values go through renderInline; force html:false so raw HTML is
-    // escaped regardless of the host markdown-it configuration (defense in depth).
-    const prevHtml = md.options.html;
-    md.options.html = false;
-    try {
-      let html = '<dl class="cm-fields">';
-      for (const [key, value] of tokens[idx].meta.rows) {
-        html += `<dt>${esc(key)}</dt><dd>${md.renderInline(value)}</dd>`;
-      }
-      return html + '</dl>';
-    } finally {
-      md.options.html = prevHtml;
+    let html = '<dl class="cm-fields">';
+    for (const [key, value] of tokens[idx].meta.rows) {
+      html += `<dt>${esc(key)}</dt><dd>${renderInlineSafe(value)}</dd>`;
     }
+    return html + '</dl>';
   };
 }

package/src/critic.js

@@ -14,6 +14,20 @@ const KINDS = {
   '>>': { kind: 'comment', close: '<<}' },
 };
 
+/**
+ * First index of the close token at or after `from`, memoized per token on the
+ * parse state so many unterminated openers on one line stay O(n) overall
+ * instead of each rescanning the tail (O(n^2)).
+ */
+function findClose(state, needle, from) {
+  const slot = '_cmCritic' + needle;
+  const c = state[slot];
+  if (c !== undefined && c.from <= from && (c.at === -1 || from <= c.at)) return c.at;
+  const at = state.src.indexOf(needle, from);
+  state[slot] = { from, at };
+  return at;
+}
+
 function criticRule(state, silent) {
   const start = state.pos;
   const src = state.src;
@@ -23,7 +37,7 @@ function criticRule(state, silent) {
   if (!spec) return false;
 
   const contentStart = start + 3;
-  const closeIdx = src.indexOf(spec.close, contentStart);
+  const closeIdx = findClose(state, spec.close, contentStart);
   if (closeIdx === -1 || closeIdx + spec.close.length > state.posMax) return false;
 
   const raw = src.slice(contentStart, closeIdx);

package/src/inline.js

@@ -17,10 +17,21 @@ function unescape(text) {
   return text.replace(/\\([\s\S])/g, '$1');
 }
 
-function splitSpec(inner) {
-  const match = inner.match(/^(\S+)(?:\s+([\s\S]*))?$/);
-  if (!match) return null;
-  return { specToken: match[1], rest: (match[2] || '').trim() };
+const WS = /\s/;
+
+/**
+ * Split an inline construct's body (state.src between `from` and `end`) into its
+ * leading spec token and the start of the remaining content, without slicing the
+ * whole — possibly huge — span first, so an invalid spec is rejected cheaply.
+ * Equivalent to matching `^(\S+)(?:\s+…)?$` on the trimmed body.
+ */
+function splitInline(src, from, end) {
+  let s = from;
+  while (s < end && WS.test(src[s])) s++;
+  let e = s;
+  while (e < end && !WS.test(src[e])) e++;
+  if (e === s) return null; // empty / all-whitespace body
+  return { specToken: src.slice(s, e), restStart: e };
 }
 
 /** Compute a meter fill width (0–100, as a string) from a value like "87%" or "3/10". */
@@ -41,15 +52,43 @@ function meterWidth(value) {
   return String(+pct.toFixed(2));
 }
 
-function findClose(state, from) {
-  const src = state.src;
-  for (let i = from; i < state.posMax; i++) {
-    const c = src.charCodeAt(i);
-    if (c === 0x5c) { i++; continue; } // backslash escapes next char
-    if (c === 0x0a) return -1; // stay on one line
-    if (c === 0x5d) return i; // ]
+/**
+ * First index of `needle` (a single char) at or after `from`, memoized on the
+ * parse state so N openers on one long line cost O(line) total rather than
+ * O(N·line). The cache is valid because `state.src` is constant for a state and
+ * the first occurrence at-or-after `from` is monotonic.
+ */
+function nextIndex(state, slot, needle, from) {
+  const c = state[slot];
+  if (c !== undefined && c.from <= from && (c.at === -1 || from <= c.at)) return c.at;
+  const at = state.src.indexOf(needle, from);
+  state[slot] = { from, at };
+  return at;
+}
+
+/** True if `src[pos]` is escaped by an odd run of backslashes back to `floor`. */
+function isEscaped(src, pos, floor) {
+  let n = 0;
+  for (let i = pos - 1; i >= floor && src.charCodeAt(i) === 0x5c; i--) n++;
+  return (n & 1) === 1;
+}
+
+/** First unescaped `needle` at or after `from` (escapes counted from `floor`). */
+function nextUnescaped(state, slot, needle, from, floor, max) {
+  let at = nextIndex(state, slot, needle, from);
+  while (at !== -1 && at < max && isEscaped(state.src, at, floor)) {
+    at = nextIndex(state, slot, needle, at + 1);
   }
-  return -1;
+  return at;
+}
+
+function findClose(state, from) {
+  const max = state.posMax;
+  const bracket = nextUnescaped(state, '_cmBr', ']', from, from, max);
+  if (bracket === -1 || bracket >= max) return -1;
+  const newline = nextUnescaped(state, '_cmNl', '\n', from, from, max);
+  if (newline !== -1 && newline < bracket) return -1; // stays on one line
+  return bracket;
 }
 
 function makeRule(enabled) {
@@ -63,14 +102,14 @@ function makeRule(enabled) {
     const end = findClose(state, start + 2);
     if (end === -1) return false;
 
-    const inner = state.src.slice(start + 2, end).trim();
-    const parts = inner && splitSpec(inner);
+    const src = state.src;
+    const parts = splitInline(src, start + 2, end);
     if (!parts) return false;
 
     const spec = parseSpec(parts.specToken);
     if (!spec) return false;
 
-    const rest = unescape(parts.rest);
+    const rest = unescape(src.slice(parts.restStart, end).trim());
 
     let token;
     if (kind === 'meter') {