@chromamark/renderer 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chromamark/renderer",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "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

@@ -36,18 +36,29 @@ export function injectTheme(doc) {
   (d.head || d.documentElement).appendChild(style);
 }
 
-/** Strip shared leading indentation so source can be indented inside HTML. */
+/** Strip shared leading indentation so source can be indented inside HTML.
+ * Only the common leading-whitespace prefix is removed; tabs that appear in
+ * content (e.g. inside a code span) are preserved. */
 function dedent(text) {
-  const lines = text.replace(/\t/g, '  ').replace(/\r/g, '').split('\n');
+  const lines = text.replace(/\r/g, '').split('\n');
   while (lines.length && lines[0].trim() === '') lines.shift();
   while (lines.length && lines[lines.length - 1].trim() === '') lines.pop();
-  let min = Infinity;
+  let prefix = null;
   for (const line of lines) {
     if (!line.trim()) continue;
-    min = Math.min(min, line.match(/^ */)[0].length);
+    const lead = line.match(/^[ \t]*/)[0];
+    if (prefix === null) {
+      prefix = lead;
+      continue;
+    }
+    let i = 0;
+    const lim = Math.min(prefix.length, lead.length);
+    while (i < lim && prefix[i] === lead[i]) i++;
+    prefix = prefix.slice(0, i);
+    if (prefix === '') break;
   }
-  if (!Number.isFinite(min)) min = 0;
-  return lines.map((line) => line.slice(min)).join('\n');
+  const cut = prefix ? prefix.length : 0;
+  return lines.map((line) => line.slice(cut)).join('\n');
 }
 
 function resolve(target) {

package/src/containers.js

@@ -95,13 +95,56 @@ function makeRule(enabled) {
 
     let nextLine = startLine;
     let autoClosed = false;
+    let fenceCh = 0;
+    let fenceLen = 0;
     for (;;) {
       nextLine++;
       if (nextLine >= endLine) break;
       const lstart = state.bMarks[nextLine] + state.tShift[nextLine];
       const lmax = state.eMarks[nextLine];
-      if (state.src.charCodeAt(lstart) !== MARKER) continue;
-      if (state.sCount[nextLine] - state.blkIndent >= 4) continue;
+      const indent = state.sCount[nextLine] - state.blkIndent;
+
+      // Skip over fenced code blocks so a ::: (or fence) line inside one counts
+      // as content, not as the container's closing fence.
+      if (fenceCh) {
+        if (indent < 4 && state.src.charCodeAt(lstart) === fenceCh) {
+          let q = lstart;
+          while (q < lmax && state.src.charCodeAt(q) === fenceCh) q++;
+          if (q - lstart >= fenceLen) {
+            let r = q;
+            while (r < lmax && (state.src.charCodeAt(r) === 0x20 || state.src.charCodeAt(r) === 0x09)) r++;
+            if (r >= lmax) {
+              fenceCh = 0;
+              fenceLen = 0;
+            }
+          }
+        }
+        continue;
+      }
+      const openCh = state.src.charCodeAt(lstart);
+      if (indent < 4 && (openCh === 0x60 || openCh === 0x7e)) {
+        let q = lstart;
+        while (q < lmax && state.src.charCodeAt(q) === openCh) q++;
+        if (q - lstart >= 3) {
+          let ok = true;
+          if (openCh === 0x60) {
+            for (let r = q; r < lmax; r++) {
+              if (state.src.charCodeAt(r) === 0x60) {
+                ok = false;
+                break;
+              }
+            }
+          }
+          if (ok) {
+            fenceCh = openCh;
+            fenceLen = q - lstart;
+            continue;
+          }
+        }
+      }
+
+      if (openCh !== MARKER) continue;
+      if (indent >= 4) continue;
       const closeLen = fenceLength(state.src, lstart, lmax);
       if (closeLen < openLen) continue;
       let p = lstart + closeLen;
@@ -154,6 +197,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 +224,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 +236,34 @@ 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>';
   };
+
+  // Container bodies are always safe: escape any raw HTML inside a container so
+  // ChromaMark stays consistent with its force-escaped titles/fields even when
+  // attached to a host MarkdownIt({ html: true }). Raw HTML outside a container
+  // still honors the host setting. Under the default html:false there are no
+  // html_block/html_inline tokens, so this is a no-op.
+  md.core.ruler.push('cm_sanitize_bodies', (state) => {
+    let depth = 0;
+    for (const token of state.tokens) {
+      if (token.type === 'cm_container_open') {
+        depth++;
+      } else if (token.type === 'cm_container_close') {
+        depth--;
+      } else if (depth > 0) {
+        if (token.type === 'html_block') {
+          token.content = esc(token.content);
+        } else if (token.type === 'inline' && token.children) {
+          for (const child of token.children) {
+            if (child.type === 'html_inline') child.content = esc(child.content);
+          }
+        }
+      }
+    }
+  });
 }