@rohal12/spindle 0.43.3 → 0.43.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rohal12/spindle",
-  "version": "0.43.3",
+  "version": "0.43.5",
   "type": "module",
   "description": "A Preact-based story format for Twine 2.",
   "license": "Unlicense",

package/src/markup/markdown.ts

@@ -8,14 +8,31 @@ import {
 /**
  * Parse a text string as CommonMark markdown and return an HTML string.
  * Includes GFM table and strikethrough extensions.
+ *
+ * When `inline` is true, block-level constructs (lists, headings, blockquotes,
+ * thematic breaks) are disabled.  This is used when rendering content inside
+ * inline HTML elements like `<span>` where block-level output is invalid.
  */
-export function markdownToHtml(text: string): string {
+export function markdownToHtml(
+  text: string,
+  options?: { inline?: boolean },
+): string {
+  const disabled: string[] = ['codeIndented'];
+  if (options?.inline) {
+    disabled.push(
+      'list',
+      'headingAtx',
+      'setextUnderline',
+      'thematicBreak',
+      'blockQuote',
+    );
+  }
   return micromark(text, {
     allowDangerousHtml: true,
     extensions: [
       gfmTable(),
       gfmStrikethrough(),
-      { disable: { null: ['codeIndented'] } },
+      { disable: { null: disabled } },
     ],
     htmlExtensions: [gfmTableHtml(), gfmStrikethroughHtml()],
   });

package/src/markup/render.tsx

@@ -87,6 +87,43 @@ function convertDomNode(
   return null;
 }
 
+/** Inline elements where block-level markdown (lists, headings) is invalid. */
+const INLINE_ELEMENTS = new Set([
+  'a',
+  'abbr',
+  'b',
+  'bdi',
+  'bdo',
+  'br',
+  'cite',
+  'code',
+  'data',
+  'dfn',
+  'em',
+  'i',
+  'kbd',
+  'label',
+  'mark',
+  'meter',
+  'output',
+  'progress',
+  'q',
+  'rp',
+  'rt',
+  'ruby',
+  's',
+  'samp',
+  'small',
+  'span',
+  'strong',
+  'sub',
+  'sup',
+  'time',
+  'u',
+  'var',
+  'wbr',
+]);
+
 function HtmlNodeRenderer({ node }: { node: HtmlNode }) {
   const resolve = useInterpolate();
   const nobr = useContext(NobrContext);
@@ -97,13 +134,16 @@ function HtmlNodeRenderer({ node }: { node: HtmlNode }) {
     attrs[k] = resolve(v) ?? v;
   }
   const isSvgRoot = node.tag.toLowerCase() === 'svg';
-  // Inside SVG, skip markdown processing — markdown wraps content in <p> tags
-  // which break the SVG namespace and produce zero-dimension elements.
+  const isInline = INLINE_ELEMENTS.has(node.tag.toLowerCase());
+  // Inside SVG, skip markdown processing entirely — markdown wraps content
+  // in <p> tags which break the SVG namespace.
+  // Inside inline elements, disable block-level markdown (lists, headings,
+  // blockquotes) since those produce invalid HTML inside inline containers.
   const children =
     node.children.length > 0
       ? inSvg || isSvgRoot
         ? renderInlineNodes(node.children)
-        : renderNodes(node.children, { nobr, locals })
+        : renderNodes(node.children, { nobr, locals, inline: isInline })
       : undefined;
   const element = h(node.tag, attrs, children);
   return isSvgRoot ? (
@@ -254,6 +294,39 @@ function getVariableTextValue(
   return value == null ? '' : String(value);
 }
 
+/**
+ * Characters/patterns that trigger CommonMark or GFM transformations.
+ * Any match → fall through to the full micromark pipeline.
+ * False positives (e.g. `-` used as text, not list) just use the slower path.
+ */
+const MARKDOWN_SYNTAX_RE = /[*_`#|~\[>\\\-+=]|!\[|\d+\./;
+const BLANK_LINE_RE = /\n\s*\n/;
+const PLACEHOLDER_SPLIT_RE = /(<span data-tw="\d+"><\/span>)/;
+const PLACEHOLDER_IDX_RE = /^<span data-tw="(\d+)"><\/span>$/;
+const PLACEHOLDER_STRIP_RE = /<span data-tw="\d+"><\/span>/g;
+
+/**
+ * Build Preact vnodes from a combined string that contains only plain text
+ * and <span data-tw="N"></span> placeholders. No micromark, no innerHTML.
+ */
+function buildPlainTextVnodes(
+  combined: string,
+  components: preact.ComponentChildren[],
+  nobr?: boolean,
+): preact.ComponentChildren {
+  const parts = combined.split(PLACEHOLDER_SPLIT_RE);
+  const children: preact.ComponentChildren[] = [];
+  for (const part of parts) {
+    const m = PLACEHOLDER_IDX_RE.exec(part);
+    if (m) {
+      children.push(components[parseInt(m[1]!, 10)]);
+    } else if (part) {
+      children.push(part);
+    }
+  }
+  return nobr ? <>{children}</> : h('p', null, ...children);
+}
+
 /**
  * Render AST nodes with full CommonMark markdown support.
  *
@@ -267,7 +340,11 @@ function getVariableTextValue(
  */
 export function renderNodes(
   nodes: ASTNode[],
-  options?: { nobr?: boolean; locals?: Record<string, unknown> },
+  options?: {
+    nobr?: boolean;
+    locals?: Record<string, unknown>;
+    inline?: boolean;
+  },
 ): preact.ComponentChildren {
   if (nodes.length === 0) return null;
 
@@ -303,8 +380,17 @@ export function renderNodes(
     }
   }
 
+  // Fast path: skip micromark + innerHTML when text has no markdown syntax.
+  // This eliminates ~655 innerHTML calls on plain UI text like "ALMA",
+  // "▸ Crew", "Activate" that pass through the full pipeline only to
+  // produce the same text they started with (issue #145).
+  const textOnly = combined.replace(PLACEHOLDER_STRIP_RE, '');
+  if (!MARKDOWN_SYNTAX_RE.test(textOnly) && !BLANK_LINE_RE.test(textOnly)) {
+    return buildPlainTextVnodes(combined, components, options?.nobr);
+  }
+
   // Run combined text through markdown
-  const html = markdownToHtml(combined);
+  const html = markdownToHtml(combined, { inline: options?.inline });
 
   // Convert HTML to Preact VNodes, replacing placeholders with components
   return htmlToPreact(html, components, options?.nobr);