@helping-ai-workflow/md2doc 3.17.2 → 3.17.4

package/lib/md2doc.js

@@ -379,6 +379,9 @@ function renderEditModeList(listToken, blocks, biRef, out) {
     const check = b.task
       ? `<span class="ed-li-check" data-checked="${b.checked ? 1 : 0}" role="checkbox" aria-checked="${!!b.checked}"></span>`
       : '';
+    // v3.17.3 C10: an svg in the item's own text gets the same white plate
+    // in dark as a top-level svg block (the attribute is read by the dark CSS).
+    const svgPlate = ownTokens.some((tk) => /<svg[\s>]/i.test(String(tk.raw || ''))) ? ' data-svg-plate="1"' : '';
     const runStart = liRunStartsHere(biRef, b) ? ' data-run-start="1"' : '';
     const listStartAttr = listStart ? ' data-list-start="1"' : '';
     listStart = false;
@@ -389,7 +392,7 @@ function renderEditModeList(listToken, blocks, biRef, out) {
     parts.push(
       `<div class="ed-block" data-block-id="${b.id}" data-block-type="li"` +
       ` data-list-type="${b.listType}" data-task="${b.task ? 1 : 0}" data-indent="${b.indent}"` +
-      runStart + listStartAttr + looseAttr + ` style="--ed-indent:${b.indent}">` +
+      runStart + listStartAttr + looseAttr + svgPlate + ` style="--ed-indent:${b.indent}">` +
       `<span class="ed-li-marker" aria-hidden="true"></span>` + check +
       `<div class="ed-li-text">${inner}</div>` +
       `</div>`
@@ -1079,6 +1082,13 @@ ${itemsHtml}
       openSvg = 0;
       return isSvgOnly(src);
     }
+    // v3.17.4 E5: an svg that is real inline html among a block's own inline
+    // tokens (a code span naming it is not one). The reader marks the block
+    // with data-svg-plate so dark mode plates it, whatever text sits beside it.
+    function hasInlineSvg(toks) {
+      return Array.isArray(toks) && toks.some((tk) => tk && ((tk.type === 'html' && /<svg[\s>]/i.test(String(tk.raw || ''))) ||
+        (tk.type === 'text' && hasInlineSvg(tk.tokens))));
+    }
 
     const baseHtml = renderer.html.bind(renderer);
     renderer.html = function(token) {
@@ -1238,6 +1248,9 @@ ${itemsHtml}
     };
     const baseParagraph = renderer.paragraph.bind(renderer);
     renderer.paragraph = function(token) {
+      // A loose item's text paragraph is made up by marked from the already
+      // rendered body, so its svg is real html there (a code span is escaped).
+      const madeUp = skipMadeUpParagraph;
       if (skipMadeUpParagraph) {
         skipMadeUpParagraph = false;
       } else {
@@ -1247,6 +1260,9 @@ ${itemsHtml}
       if (!opts.editMode && wrapsSvgParagraph(token.raw)) {
         return baseParagraph(token).replace(/^<p>/, '<p class="inline-svg">');
       }
+      if (!opts.editMode && (hasInlineSvg(token.tokens) || (madeUp && /<svg[\s>]/i.test(String(token.text || ''))))) {
+        return baseParagraph(token).replace(/^<p>/, '<p data-svg-plate="1">');
+      }
       return baseParagraph(token);
     };
 
@@ -1261,7 +1277,11 @@ ${itemsHtml}
       } finally {
         looseItemText = outerLoose;
       }
-      if (!token.task) return html;
+      // v3.17.4 E5: a tight item's own text sits straight in the li (no p). Marked
+      // last, because the task wrapping below anchors on a bare li tag.
+      const plateTight = (h) => (!opts.editMode && !token.loose && hasInlineSvg(token.tokens))
+        ? h.replace(/^<li( class="[^"]*")?/, '$& data-svg-plate="1"') : h;
+      if (!token.task) return plateTight(html);
       // v3.10.0: a task item drops its bullet and keeps its own text in a span,
       // so a checked item's strike-through stops at its own words — CSS
       // text-decoration cannot be undone on a nested child list. Shapes: tight
@@ -1270,8 +1290,8 @@ ${itemsHtml}
       // first: a block child's opening tag, the loose item's </p>, or </li>.
       const cls = token.checked ? 'task-item is-checked' : 'task-item';
       const m = html.match(/^<li>([\s\S]*?<input[^>]*>)([\s\S]*?)(<(?:ul|ol|blockquote|pre|table|div|p|h[1-6])[\s>][\s\S]*|<\/p>[\s\S]*|<\/li>\s*)$/);
-      if (!m) return html.replace(/^<li>/, '<li class="' + cls + '">');
-      return '<li class="' + cls + '">' + m[1] + ' <span class="task-text">' + m[2].trim() + '</span>' + m[3];
+      if (!m) return plateTight(html.replace(/^<li>/, '<li class="' + cls + '">'));
+      return plateTight('<li class="' + cls + '">' + m[1] + ' <span class="task-text">' + m[2].trim() + '</span>' + m[3]);
     };
 
     const baseBlockquote = renderer.blockquote.bind(renderer);
@@ -1402,7 +1422,7 @@ ${itemsHtml}
           // v3.14.0 T10: the reader wraps an svg-only block in .inline-svg for the
           // dark white plate; edit mode keeps its DOM, so it marks the wrapper.
           const svgPlate = ((t.type === 'html' && t.block && wrapsSvg(t.text)) ||
-            (t.type === 'paragraph' && wrapsSvgParagraph(t.raw))) ? ' data-svg-plate="1"' : '';
+            (t.type === 'paragraph' && (wrapsSvgParagraph(t.raw) || hasInlineSvg(t.tokens)))) ? ' data-svg-plate="1"' : '';
           parts.push(
             `<div class="ed-block" data-block-id="${b.id}" data-block-type="${b.type}"${svgPlate}>` +
             inner + '</div>'
@@ -2767,6 +2787,7 @@ const html = `<!DOCTYPE html>
     border-radius: 3px;
   }
   mark.search-hit-block { display: block; }
+  svg .svg-hit { stroke: var(--md-svg-hit); stroke-width: 6px; stroke-linejoin: round; paint-order: stroke; }
   .toc {
     display: flex;
     flex-direction: column;
@@ -4799,6 +4820,15 @@ ${mermaidInitTag}`)
   }
 
   const SKIP_SELECTOR = 'svg, .mermaid, .graphviz, script, style';
+  // v3.17.3 C11: a Markdown-native inline svg is read (its text is in the
+  // search index); a diagram's own svg (mermaid, graphviz, draw.io, WaveDrom,
+  // a formula) is not. Inside a native svg every text node is walked, the
+  // ones in its title and desc elements too: the index holds those as well
+  // (the paragraph's text tokens between the html tags), so a query that
+  // finds the section can find them here.
+  function isNativeSvg(el) {
+    return el.matches('svg') && !el.closest('.mermaid, .graphviz, .drawio, .katex, .code-block, [class*="wave"], [id^="WaveDrom"]');
+  }
 
   function buildSnippet(section, query) {
     const haystack = section.searchText || section.title || '';
@@ -4845,6 +4875,7 @@ ${mermaidInitTag}`)
       ? readerState.activeHighlights
       : (readerState.activeHighlight ? [readerState.activeHighlight] : []);
     marks.forEach((mark) => {
+      if (mark.namespaceURI === 'http://www.w3.org/2000/svg') { mark.classList.remove('svg-hit'); if (!mark.getAttribute('class')) mark.removeAttribute('class'); return; }
       const parent = mark.parentNode;
       if (!parent) return;
       while (mark.firstChild) parent.insertBefore(mark.firstChild, mark);
@@ -4975,7 +5006,8 @@ ${mermaidInitTag}`)
     const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT, {
       acceptNode(node) {
         if (node.nodeType === Node.ELEMENT_NODE) {
-          if (node.matches(SKIP_SELECTOR) || node.matches('.reader-sidebar, .heading-anchor, button')) return NodeFilter.FILTER_REJECT;
+          if (node.matches(SKIP_SELECTOR) && !isNativeSvg(node)) return NodeFilter.FILTER_REJECT;
+          if (node.matches('.reader-sidebar, .heading-anchor, button')) return NodeFilter.FILTER_REJECT;
           return node.matches('br, .katex') ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
         }
         if (!node.nodeValue) return NodeFilter.FILTER_REJECT;
@@ -5065,6 +5097,14 @@ ${mermaidInitTag}`)
     const marks = [];
     Array.from(spans.keys()).sort((a, b) => b - a).forEach((ni) => {
       const node = nodes[ni];
+      // v3.17.3 C11: svg cannot hold a mark element; the text node's parent
+      // (text or tspan) is flagged instead and painted by .svg-hit.
+      if (node.nodeType === Node.TEXT_NODE && node.parentElement && node.parentElement.closest('svg')) {
+        // Two text nodes can share one parent (a tspan or a comment splits it).
+        node.parentElement.classList.add('svg-hit');
+        if (marks.indexOf(node.parentElement) === -1) marks.unshift(node.parentElement);
+        return;
+      }
       const mark = document.createElement('mark');
       mark.className = 'search-hit is-selected';
       if (node.nodeType === Node.ELEMENT_NODE) {

package/lib/theme/tokens.js

@@ -34,6 +34,9 @@ const THEME_TOKENS = [
   { name: 'active-bg', light: ['#dbe6f3'], dark: '#24364f' },
   { name: 'hit-bg', light: ['#fff5c2'], dark: '#4d4417' },
   { name: 'mark-bg', light: ['#fde68a'], dark: '#6e5e14' },
+  // A search hit inside an inline svg is painted on the svg plate, which is white in both themes,
+  // so its halo is the same yellow in both (the dark mark-bg would read worse than no hit at all).
+  { name: 'svg-hit', light: ['#fde68a'], dark: '#fde68a', direct: true },
   { name: 'code', light: ['#b93a0c'], dark: '#ff9f70' },
   { name: 'accent-soft', light: ['#93c5fd'], dark: '#6ea8f5' },
   { name: 'error', light: ['#b91c1c'], dark: '#ff8a8a' },
@@ -165,7 +168,8 @@ function themeCss() {
     '    ' + D + ' .content .drawio { background: #ffffff; border-radius: 6px; box-shadow: 0 0 0 10px #ffffff; }',
     // R7 甲: a Markdown-native inline svg (wrapped in .inline-svg by the renderer) gets the
     // same white plate; its ink stays the light text colour because the plate is always white.
-    '    ' + D + ' .content .inline-svg > svg, ' + D + ' .content .ed-block[data-svg-plate="1"] > svg, ' + D + ' .content .ed-block[data-svg-plate="1"] > p > svg { background: #ffffff; color: #1f2328; border-radius: 4px; box-shadow: 0 0 0 10px #ffffff; }',
+    // A task item's svg sits one level down, inside span.task-text (tight li or loose p).
+    '    ' + D + ' .content .inline-svg > svg, ' + D + ' .content p[data-svg-plate="1"] > svg, ' + D + ' .content li[data-svg-plate="1"] > svg, ' + D + ' .content li[data-svg-plate="1"] > p > svg, ' + D + ' .content li[data-svg-plate="1"] > .task-text > svg, ' + D + ' .content p[data-svg-plate="1"] > .task-text > svg, ' + D + ' .content .ed-block[data-svg-plate="1"] > svg, ' + D + ' .content .ed-block[data-svg-plate="1"] > p > svg, ' + D + ' .content .ed-block[data-svg-plate="1"] .ed-li-text > svg, ' + D + ' .content .ed-block[data-svg-plate="1"] .ed-li-text > p > svg { background: #ffffff; color: #1f2328; border-radius: 4px; box-shadow: 0 0 0 10px #ffffff; }',
     '    ' + D + ' .lightbox-canvas > svg[data-md2doc-recoloured] { background: var(--md-bg); }',
     '  }',
     '  .md2doc-theme-toggle { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 40px; height: 40px;',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helping-ai-workflow/md2doc",
-  "version": "3.17.2",
+  "version": "3.17.4",
   "description": "Markdown → HTML / PDF renderer with WaveDrom, Mermaid, Graphviz, and draw.io support",
   "keywords": [
     "markdown",