@rohal12/spindle 0.51.3 → 0.51.4

package/src/js-lexer.ts

@@ -0,0 +1,326 @@
+/**
+ * Lexical scanner for the JavaScript in expressions and macro arguments.
+ *
+ * It is the one place that knows where string, template and regex literals
+ * and comments begin and end. The expression transformer (`expression.ts`)
+ * and the macro argument splitters (`components/macros/arg-utils.ts`) both
+ * walk source text through `lexJs` and differ only in what they do with the
+ * pieces it reports.
+ *
+ * Besides literals, the scanner tracks whether the next token is an operand
+ * or an operator, which decides two ambiguities: `/` opens a regex in operand
+ * position and divides otherwise, and `%name` is a transient reference in
+ * operand position while `%` after an operand — `($n)%3`, `$a[i] %2`,
+ * `_i++ %n` — is the modulo operator.
+ */
+
+export interface JsLexHandlers {
+  /**
+   * One character of code, outside literals and comments. `nesting` is the
+   * number of template-literal `${…}` interpolations around it (0 at top
+   * level).
+   */
+  code?(ch: string, index: number, nesting: number): void;
+  /**
+   * Literal text passed through verbatim: a string or regex literal, a
+   * comment, or a piece of a template literal (its backticks, text, escapes
+   * and the `${` / `}` delimiters around interpolations, whose code is
+   * reported through `code`).
+   */
+  literal?(text: string, index: number, nesting: number): void;
+  /** A `%name` transient variable reference (`name` without the `%`). */
+  transient?(name: string, index: number, nesting: number): void;
+}
+
+/** Transient name after `%`: an identifier, so `%3` is never a reference. */
+const TRANS_NAME_RE = /[A-Za-z_]\w*/y;
+/**
+ * The rest of an assignment target and its operator after a transient name:
+ * ` = 1`, `.a.b += 2`, but not `== 1` or `=> 1`.
+ */
+const ASSIGNMENT_RE =
+  /(?:\s*\.\s*[A-Za-z_$][\w$]*)*\s*(?:\*\*|<<|>>>?|&&|\|\||\?\?|[-+*/%&|^])?=(?![=>])/y;
+/** Flags after the closing `/` of a regex literal. */
+const REGEX_FLAGS_RE = /\w*/y;
+/** Characters of identifiers, numbers and sigil variable references. */
+const WORD_CHAR_RE = /[\w$@]/;
+const SPACE_RE = /\s/;
+/** Keywords followed by an operand rather than an operator. */
+const OPERAND_KEYWORDS = new Set([
+  'await',
+  'case',
+  'delete',
+  'do',
+  'else',
+  'in',
+  'instanceof',
+  'new',
+  'of',
+  'return',
+  'throw',
+  'typeof',
+  'void',
+  'yield',
+]);
+/** Keywords whose parenthesised header is followed by a statement. */
+const HEADER_KEYWORDS = new Set(['for', 'if', 'while', 'with']);
+
+/**
+ * Scan the `"…"` or `'…'` string literal opening at `start`. `end` is the
+ * index just past its closing quote, or `src.length` when it is unterminated
+ * (`closed` false). A backslash escapes the character after it, so a quote
+ * after an even run of backslashes closes the string and one after an odd
+ * run does not.
+ */
+export function scanStringLiteral(
+  src: string,
+  start: number,
+): { end: number; closed: boolean } {
+  const quote = src.charAt(start);
+  let i = start + 1;
+  while (i < src.length) {
+    const c = src.charAt(i);
+    if (c === '\\') i += 2;
+    else if (c === quote) return { end: i + 1, closed: true };
+    else i++;
+  }
+  return { end: src.length, closed: false };
+}
+
+/** Index just past the regex literal (with flags) opening at `start`. */
+function skipRegex(src: string, start: number): number {
+  let inClass = false; // inside `[…]`, where `/` does not close
+  let i = start + 1;
+  while (i < src.length) {
+    const c = src.charAt(i);
+    if (c === '\\') {
+      i += 2;
+      continue;
+    }
+    if (c === '\n') return i; // unterminated: leave the rest to the parser
+    if (inClass) {
+      if (c === ']') inClass = false;
+    } else if (c === '[') {
+      inClass = true;
+    } else if (c === '/') {
+      REGEX_FLAGS_RE.lastIndex = i + 1;
+      return i + 1 + (REGEX_FLAGS_RE.exec(src)?.[0].length ?? 0);
+    }
+    i++;
+  }
+  return src.length;
+}
+
+/** Index just past the comment opening at `start` (`//` or `/*`). */
+function skipComment(src: string, start: number): number {
+  if (src.charAt(start + 1) === '/') {
+    const end = src.indexOf('\n', start);
+    return end < 0 ? src.length : end;
+  }
+  const end = src.indexOf('*/', start + 2);
+  return end < 0 ? src.length : end + 2;
+}
+
+/**
+ * Lex the template literal opening at `start` (a backtick): its backticks,
+ * text and escapes are reported as literal text and the code of its `${…}`
+ * interpolations through `lexJs` one nesting level deeper. Returns the index
+ * just past the closing backtick, or `src.length` if it is unterminated.
+ */
+export function lexTemplate(
+  src: string,
+  start: number,
+  handlers: JsLexHandlers = {},
+  nesting = 0,
+): number {
+  const literal = (text: string, index: number) =>
+    handlers.literal?.(text, index, nesting);
+  literal('`', start);
+  let i = start + 1;
+  while (i < src.length) {
+    const c = src.charAt(i);
+    if (c === '\\') {
+      literal(src.slice(i, i + 2), i);
+      i += 2;
+    } else if (c === '`') {
+      literal(c, i);
+      return i + 1;
+    } else if (c === '$' && src.charAt(i + 1) === '{') {
+      literal('${', i);
+      i = lexJs(src, handlers, i + 2, nesting + 1);
+      if (i < src.length) {
+        literal('}', i);
+        i++;
+      }
+    } else {
+      literal(c, i);
+      i++;
+    }
+  }
+  return Math.min(i, src.length);
+}
+
+/**
+ * Walk `src` from `start`, reporting code characters, literal text and
+ * transient references to `handlers` in source order. Every character of the
+ * scanned range is reported exactly once (a transient reference covers its
+ * `%` and name). Returns the index where scanning stopped: `src.length`, or
+ * — for an interpolation (`nesting > 0`) — the index of the `}` closing it.
+ */
+export function lexJs(
+  src: string,
+  handlers: JsLexHandlers,
+  start = 0,
+  nesting = 0,
+): number {
+  const interpolation = nesting > 0;
+  let i = start;
+
+  let operandNext = true; // an operand (not an operator) comes next
+  let word = ''; // identifier/number currently being read
+  let afterDot = false; // `word` is a property name, never a keyword
+  let afterHeaderKeyword = false; // last token was if/while/for/with
+  let lastPunct = '';
+  let lineBreak = false; // a line break since the last token
+  let braceDepth = 0;
+  const parenIsHeader: boolean[] = []; // per open `(`: closes a header?
+
+  const code = (ch: string, index: number) =>
+    handlers.code?.(ch, index, nesting);
+  const literal = (text: string, index: number) =>
+    handlers.literal?.(text, index, nesting);
+
+  function endWord() {
+    if (!word) return;
+    operandNext = !afterDot && OPERAND_KEYWORDS.has(word);
+    afterHeaderKeyword = !afterDot && HEADER_KEYWORDS.has(word);
+    afterDot = false;
+    lastPunct = '';
+    lineBreak = false;
+    word = '';
+  }
+
+  /** A string, template or regex literal, or a transient reference, ended. */
+  function endOperand() {
+    endWord();
+    operandNext = false;
+    afterHeaderKeyword = false;
+    afterDot = false;
+    lastPunct = '';
+    lineBreak = false;
+  }
+
+  /** Track an operator token: `operandNext` tells what may follow it. */
+  function endPunct(punct: string, nextIsOperand: boolean) {
+    operandNext = nextIsOperand;
+    afterDot = punct === '.';
+    afterHeaderKeyword = false;
+    lastPunct = punct;
+    lineBreak = false;
+  }
+
+  function trackCode(c: string) {
+    if (WORD_CHAR_RE.test(c)) {
+      word += c;
+      return;
+    }
+    endWord();
+    // A line break alone never changes operand/operator position:
+    // `$x = 5\n%n` continues the expression, as in JavaScript.
+    if (c === '\n') lineBreak = true;
+    if (SPACE_RE.test(c)) return;
+    if (c === '(') parenIsHeader.push(afterHeaderKeyword);
+    if (c === '{') braceDepth++;
+    if (c === '}') braceDepth--;
+    if (c === ')') {
+      // `if (…) %x = 1` vs `($n)%3`
+      endPunct(c, parenIsHeader.pop() ?? false);
+    } else if (c === '.') {
+      // Property access, unless it is the spread `...`
+      endPunct(c, lastPunct === '.');
+    } else {
+      // `]` ends an operand; `}` closes a block, so a statement may follow.
+      endPunct(c, c !== ']');
+    }
+  }
+
+  while (i < src.length) {
+    const ch = src.charAt(i);
+
+    // String literal — skip entirely
+    if (ch === '"' || ch === "'") {
+      const { end } = scanStringLiteral(src, i);
+      literal(src.slice(i, end), i);
+      i = end;
+      endOperand();
+      continue;
+    }
+
+    if (ch === '`') {
+      i = lexTemplate(src, i, handlers, nesting);
+      endOperand();
+      continue;
+    }
+
+    if (ch === '/') {
+      endWord();
+      const next = src.charAt(i + 1);
+      // Comment — skip entirely; it is not a token
+      if (next === '/' || next === '*') {
+        const end = skipComment(src, i);
+        const comment = src.slice(i, end);
+        literal(comment, i);
+        if (comment.includes('\n')) lineBreak = true;
+        i = end;
+        continue;
+      }
+      // Regex literal — only where an operand is expected
+      if (operandNext) {
+        const end = skipRegex(src, i);
+        literal(src.slice(i, end), i);
+        i = end;
+        endOperand();
+        continue;
+      }
+    }
+
+    // Transient reference — where an operand is expected, or as the target
+    // of an assignment starting a line: `$x = 5\n%a = 1` would otherwise be
+    // the invalid assignment `5 % a = 1`.
+    if (ch === '%') {
+      endWord();
+      TRANS_NAME_RE.lastIndex = i + 1;
+      const name = TRANS_NAME_RE.exec(src)?.[0];
+      if (name) {
+        ASSIGNMENT_RE.lastIndex = i + 1 + name.length;
+        if (operandNext || (lineBreak && ASSIGNMENT_RE.test(src))) {
+          handlers.transient?.(name, i, nesting);
+          i += 1 + name.length;
+          endOperand();
+          continue;
+        }
+      }
+    }
+
+    // Increment/decrement: postfix after an operand on the same line (no line
+    // break may precede postfix `++`), prefix otherwise.
+    if ((ch === '+' || ch === '-') && src.charAt(i + 1) === ch) {
+      endWord();
+      const postfix = !operandNext && !lineBreak;
+      code(ch, i);
+      code(ch, i + 1);
+      i += 2;
+      endPunct(ch, !postfix);
+      continue;
+    }
+
+    // End of a template interpolation
+    if (ch === '}' && interpolation && braceDepth === 0) break;
+
+    // Regular code character
+    trackCode(ch);
+    code(ch, i);
+    i++;
+  }
+  return i;
+}

package/src/markup/render.tsx

@@ -7,8 +7,7 @@ import { getWidget } from '../widgets/widget-registry';
 import { getMacro, isSubMacro } from '../registry';
 import { markdownToHtml } from './markdown';
 import { h } from 'preact';
-import type { ASTNode, HtmlNode, MacroNode, VariableNode } from './ast';
-import { useStoryStore } from '../store';
+import type { ASTNode, HtmlNode, MacroNode } from './ast';
 import { useInterpolate } from '../hooks/use-interpolate';
 
 export interface LocalsUpdater {
@@ -28,27 +27,97 @@ const defaultUpdater: LocalsUpdater = {
 export const LocalsValuesContext = createContext<Record<string, unknown>>({});
 export const LocalsUpdateContext = createContext<LocalsUpdater>(defaultUpdater);
 export const NobrContext = createContext(false);
+/**
+ * True while rendering inside an inline HTML element (e.g. `<span>`), where
+ * block-level markdown and `<p>` wrappers would produce invalid HTML (#220).
+ * Macro and widget bodies read it so their content stays inline too.
+ */
+export const InlineContext = createContext(false);
 export const SvgContext = createContext(false);
 export const WidgetChildrenContext = createContext<ASTNode[] | null>(null);
 
+/**
+ * Components rendered for the non-text nodes of one renderNodes() call. Each
+ * stands in the markdown source as `<span data-tw="NONCE:INDEX"></span>`.
+ * The per-call random nonce means author text that merely looks like a
+ * placeholder (e.g. decoded from `&lt;span data-tw=...&gt;`) is never
+ * swapped for a component.
+ */
+interface Placeholders {
+  nonce: string;
+  components: preact.ComponentChildren[];
+}
+
+function placeholderHtml(nonce: string, index: number): string {
+  return `<span data-tw="${nonce}:${index}"></span>`;
+}
+
+/**
+ * A placeholder as text. micromark escapes placeholders in code (a code span
+ * of any backtick length, or a fenced code block), so they reach the DOM as
+ * literal text and are swapped for the live component there, keeping it
+ * subscribed (#223). Letting micromark decide what is code keeps this exact,
+ * with no CommonMark re-implementation to drift from it. Also consumes an
+ * ESCAPE_GUARD in front of the placeholder.
+ */
+const PLACEHOLDER_TEXT_RE =
+  /(?:(?<=\\)\uE000)?<span data-tw="([0-9a-z]+):(\d+)"><\/span>/g;
+
+/**
+ * Emitted between author text ending in a backslash and a placeholder, so
+ * the backslash cannot escape the placeholder's `<` and leak it as text. A
+ * backslash before a non-punctuation character stays literal in CommonMark,
+ * matching what the author wrote. Removed again when converting text nodes.
+ */
+const ESCAPE_GUARD = '\uE000';
+
+/** Split text into literal parts and the components its placeholders name. */
+function expandPlaceholderText(
+  text: string,
+  ph: Placeholders,
+): preact.ComponentChildren[] {
+  if (!text.includes('<span data-tw="')) return [text];
+  const parts: preact.ComponentChildren[] = [];
+  let last = 0;
+  for (const m of text.matchAll(PLACEHOLDER_TEXT_RE)) {
+    if (m[1] !== ph.nonce) continue;
+    if (m.index > last) parts.push(text.slice(last, m.index));
+    parts.push(ph.components[parseInt(m[2]!, 10)]);
+    last = m.index + m[0].length;
+  }
+  if (last < text.length) parts.push(text.slice(last));
+  return parts;
+}
+
+/** The component index of a placeholder element of this call, or -1. */
+function placeholderIndex(node: Node | null, ph: Placeholders): number {
+  if (node == null || node.nodeType !== Node.ELEMENT_NODE) return -1;
+  const value = (node as Element).getAttribute('data-tw');
+  const prefix = `${ph.nonce}:`;
+  if (value == null || !value.startsWith(prefix)) return -1;
+  return parseInt(value.slice(prefix.length), 10);
+}
+
 /**
  * Convert an HTML string (from micromark) to Preact VNodes,
- * replacing <span data-tw="N"> placeholder elements with pre-rendered components.
+ * replacing placeholder elements with pre-rendered components.
+ * With `unwrapParagraphs` (nobr or inline content), top-level <p> wrappers are
+ * replaced by their children.
  */
 function htmlToPreact(
   html: string,
-  components: preact.ComponentChildren[],
-  nobr = false,
+  ph: Placeholders,
+  unwrapParagraphs = false,
 ): preact.ComponentChildren {
   const temp = document.createElement('div');
   temp.innerHTML = html.trim();
-  if (nobr) {
+  if (unwrapParagraphs) {
     for (const p of Array.from(temp.querySelectorAll(':scope > p'))) {
       p.replaceWith(...Array.from(p.childNodes));
     }
   }
   const children = Array.from(temp.childNodes).map((child, i) =>
-    convertDomNode(child, i, components),
+    convertDomNode(child, i, ph),
   );
   return <>{children}</>;
 }
@@ -56,19 +125,28 @@ function htmlToPreact(
 function convertDomNode(
   node: Node,
   key: number,
-  components: preact.ComponentChildren[],
+  ph: Placeholders,
 ): preact.ComponentChildren {
   if (node.nodeType === Node.TEXT_NODE) {
-    return node.textContent;
+    let text = node.textContent ?? '';
+    // Drop the escape guard in front of a placeholder element.
+    if (
+      text.endsWith(`\\${ESCAPE_GUARD}`) &&
+      placeholderIndex(node.nextSibling, ph) !== -1
+    ) {
+      text = text.slice(0, -1);
+    }
+    const parts = expandPlaceholderText(text, ph);
+    return parts.length === 1 ? parts[0] : parts;
   }
   if (node.nodeType === Node.ELEMENT_NODE) {
     const el = node as Element;
     const tag = el.localName;
 
     // Check if it's a placeholder for a Twine component
-    const twIdx = el.getAttribute('data-tw');
-    if (twIdx != null) {
-      return components[parseInt(twIdx, 10)];
+    const idx = placeholderIndex(el, ph);
+    if (idx !== -1) {
+      return ph.components[idx];
     }
 
     // Convert attributes
@@ -79,7 +157,7 @@ function convertDomNode(
 
     // Convert children recursively
     const children = Array.from(el.childNodes).map((child, i) =>
-      convertDomNode(child, i, components),
+      convertDomNode(child, i, ph),
     );
 
     return h(tag, props, ...children);
@@ -166,6 +244,7 @@ function HtmlNodeRenderer({ node }: { node: HtmlNode }) {
   const nobr = useContext(NobrContext);
   const locals = useContext(LocalsValuesContext);
   const inSvg = useContext(SvgContext);
+  const parentInline = useContext(InlineContext);
   const attrs: Record<string, unknown> = {};
   for (const [k, v] of Object.entries(node.attributes)) {
     attrs[k] = isPresentBooleanAttribute(k, v) ? true : (resolve(v) ?? v);
@@ -175,13 +254,24 @@ function HtmlNodeRenderer({ node }: { node: HtmlNode }) {
   // 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, inline: isInline })
-      : undefined;
+  // blockquotes) and <p> wrappers since those produce invalid HTML inside
+  // inline containers. The inline flag reaches nested macro/widget bodies via
+  // InlineContext; a block element nested inside resets it.
+  let children: preact.ComponentChildren = undefined;
+  if (node.children.length > 0) {
+    if (inSvg || isSvgRoot) {
+      children = renderInlineNodes(node.children);
+    } else {
+      children = renderNodes(node.children, { nobr, locals, inline: isInline });
+      if (isInline !== parentInline) {
+        children = (
+          <InlineContext.Provider value={isInline}>
+            {children}
+          </InlineContext.Provider>
+        );
+      }
+    }
+  }
   const element = h(node.tag, attrs, children);
   return isSvgRoot ? (
     <SvgContext.Provider value={true}>{element}</SvgContext.Provider>
@@ -193,9 +283,10 @@ function HtmlNodeRenderer({ node }: { node: HtmlNode }) {
 function ChildrenSlot() {
   const childrenAST = useContext(WidgetChildrenContext);
   const nobr = useContext(NobrContext);
+  const inline = useContext(InlineContext);
   const locals = useContext(LocalsValuesContext);
   if (!childrenAST || childrenAST.length === 0) return null;
-  return <>{renderNodes(childrenAST, { nobr, locals })}</>;
+  return <>{renderNodes(childrenAST, { nobr, locals, inline })}</>;
 }
 
 /**
@@ -316,37 +407,6 @@ export function renderInlineNodes(nodes: ASTNode[]): preact.ComponentChildren {
   return nodes.map((node) => renderSingleNode(node));
 }
 
-function hasUnclosedBacktick(s: string): boolean {
-  let count = 0;
-  for (let i = 0; i < s.length; i++) {
-    if (s[i] === '`') count++;
-  }
-  return count % 2 === 1;
-}
-
-function getVariableTextValue(
-  node: VariableNode,
-  locals: Record<string, unknown>,
-): string {
-  const state = useStoryStore.getState();
-  const parts = node.name.split('.');
-  const root = parts[0]!;
-
-  let value: unknown;
-  if (node.scope === 'variable') value = state.variables[root];
-  else if (node.scope === 'temporary') value = state.temporary[root];
-  else if (node.scope === 'transient') value = state.transient[root];
-  else value = locals[root];
-
-  for (let i = 1; i < parts.length; i++) {
-    // Primitives box on access, so `{$name.length}` works too.
-    if (value == null) return '';
-    value = (value as Record<string, unknown>)[parts[i]!];
-  }
-
-  return value == null ? '' : String(value);
-}
-
 /**
  * Characters/patterns that trigger CommonMark or GFM transformations.
  * Any match → fall through to the full micromark pipeline.
@@ -357,47 +417,42 @@ function getVariableTextValue(
 const MARKDOWN_SYNTAX_RE =
   /[*_`#|~\[>\\\-+=]|!\[|\d+\.|&#?[a-zA-Z0-9]+;| {2}\n/;
 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;
+const PLACEHOLDER_STRIP_RE = /<span data-tw="[0-9a-z]+:\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.
+ * and placeholders. No micromark, no innerHTML.
  */
 function buildPlainTextVnodes(
   combined: string,
-  components: preact.ComponentChildren[],
-  nobr?: boolean,
+  ph: Placeholders,
+  unwrapParagraphs?: 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);
+  const children = expandPlaceholderText(combined, ph).filter(
+    (part) => part !== '',
+  );
+  return unwrapParagraphs ? <>{children}</> : h('p', null, ...children);
 }
 
 /**
  * Render AST nodes with full CommonMark markdown support.
  *
- * Combines all nodes into a single markdown document, using <tw-N> placeholder
- * elements for non-text nodes (variables, macros, links, HTML). This allows
+ * Combines all nodes into a single markdown document, using placeholder
+ * elements (see Placeholders) for non-text nodes (variables, macros, links,
+ * HTML). This allows
  * markdown syntax to span across Twine tokens — e.g., markdown tables can
  * contain {$variables} and {macros} in their cells.
  *
  * After micromark processes the combined string, the HTML is parsed back into
  * Preact VNodes with placeholders replaced by the real rendered components.
+ * Placeholders that micromark escaped as code text are swapped back too (see
+ * PLACEHOLDER_TEXT_RE), so variables in code stay live components.
  */
 export function renderNodes(
   nodes: ASTNode[],
   options?: {
     nobr?: boolean;
+    /** Unused: components read locals from LocalsValuesContext. Kept for API compatibility. */
     locals?: Record<string, unknown>;
     inline?: boolean;
   },
@@ -419,35 +474,38 @@ export function renderNodes(
 
   // Build combined markdown string with placeholders for non-text nodes
   const components: preact.ComponentChildren[] = [];
+  const ph: Placeholders = {
+    nonce: Math.random().toString(36).slice(2, 10) || '0',
+    components,
+  };
   let combined = '';
-  const locals = options?.locals ?? {};
 
   for (let i = 0; i < nodes.length; i++) {
     const node = nodes[i]!;
     if (node.type === 'text') {
       combined += node.value;
-    } else if (node.type === 'variable' && hasUnclosedBacktick(combined)) {
-      // Inline variable value to avoid placeholder inside code span
-      combined += getVariableTextValue(node, locals);
-    } else {
-      const phIdx = components.length;
-      components.push(renderSingleNode(node));
-      combined += `<span data-tw="${phIdx}"></span>`;
+      continue;
     }
+    const phIdx = components.length;
+    components.push(renderSingleNode(node));
+    if (combined.endsWith('\\')) combined += ESCAPE_GUARD;
+    combined += placeholderHtml(ph.nonce, phIdx);
   }
 
   // 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).
+  // Inline content (inside <span> etc.) never gets <p> wrappers (#220).
+  const unwrapParagraphs = !!(options?.nobr || options?.inline);
   const textOnly = combined.replace(PLACEHOLDER_STRIP_RE, '');
   if (!MARKDOWN_SYNTAX_RE.test(textOnly) && !BLANK_LINE_RE.test(textOnly)) {
-    return buildPlainTextVnodes(combined, components, options?.nobr);
+    return buildPlainTextVnodes(combined, ph, unwrapParagraphs);
   }
 
   // Run combined text through markdown
   const html = markdownToHtml(combined, { inline: options?.inline });
 
   // Convert HTML to Preact VNodes, replacing placeholders with components
-  return htmlToPreact(html, components, options?.nobr);
+  return htmlToPreact(html, ph, unwrapParagraphs);
 }