@rohal12/spindle 0.21.0 → 0.23.0

package/package.json

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

package/src/components/Passage.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useEffect, useState } from 'preact/hooks';
 import { tokenize } from '../markup/tokenizer';
 import { buildAST } from '../markup/ast';
-import { renderNodes } from '../markup/render';
+import { renderNodes, NobrContext } from '../markup/render';
 import { useStoryStore } from '../store';
 import type { Passage as PassageData } from '../parser';
 import { sourceLocationOf } from '../utils/source-location';
@@ -9,7 +9,8 @@ import { sourceLocationOf } from '../utils/source-location';
 export function renderPassageContent(passage: PassageData) {
   const tokens = tokenize(passage.content);
   const ast = buildAST(tokens);
-  return renderNodes(ast);
+  const nobr = passage.tags.includes('nobr');
+  return renderNodes(ast, nobr ? { nobr: true } : undefined);
 }
 
 interface PassageProps {
@@ -88,7 +89,9 @@ export function Passage({ passage, dataTransition }: PassageProps) {
     }
   }, [doneReady, donePassage?.content]);
 
-  return (
+  const nobr = passage.tags.includes('nobr');
+
+  const inner = (
     <div
       class="passage"
       data-passage={passage.name}
@@ -101,4 +104,10 @@ export function Passage({ passage, dataTransition }: PassageProps) {
       {doneContent && <div hidden>{doneContent}</div>}
     </div>
   );
+
+  return nobr ? (
+    <NobrContext.Provider value={true}>{inner}</NobrContext.Provider>
+  ) : (
+    inner
+  );
 }

package/src/components/StoryInterface.tsx

@@ -1,7 +1,7 @@
 import { useStoryStore } from '../store';
 import { tokenize } from '../markup/tokenizer';
 import { buildAST } from '../markup/ast';
-import { renderInlineNodes } from '../markup/render';
+import { renderInlineNodes, NobrContext } from '../markup/render';
 
 const DEFAULT_MARKUP =
   '<header class="story-menubar">{story-title}{back}{forward}{restart}{quicksave}{quickload}{saves}{settings}</header>\n{passage}';
@@ -12,11 +12,17 @@ export function StoryInterface() {
   const overridePassage = storyData?.passages.get('StoryInterface');
   const markup =
     overridePassage !== undefined ? overridePassage.content : DEFAULT_MARKUP;
+  const nobr = overridePassage?.tags.includes('nobr') ?? false;
 
   try {
     const tokens = tokenize(markup);
     const ast = buildAST(tokens);
-    return <>{renderInlineNodes(ast)}</>;
+    const rendered = <>{renderInlineNodes(ast)}</>;
+    return nobr ? (
+      <NobrContext.Provider value={true}>{rendered}</NobrContext.Provider>
+    ) : (
+      rendered
+    );
   } catch (err) {
     return (
       <span class="error">

package/src/components/macros/Include.tsx

@@ -1,6 +1,7 @@
 import { useStoryStore } from '../../store';
 import { tokenize } from '../../markup/tokenizer';
 import { buildAST } from '../../markup/ast';
+import { NobrContext } from '../../markup/render';
 import { defineMacro } from '../../define-macro';
 
 defineMacro({
@@ -33,10 +34,16 @@ defineMacro({
       );
     }
 
+    const nobr = passage.tags.includes('nobr');
     const tokens = tokenize(passage.content);
     const ast = buildAST(tokens);
-    const content = inline ? ctx.renderInlineNodes(ast) : ctx.renderNodes(ast);
+    const content = inline
+      ? ctx.renderInlineNodes(ast)
+      : ctx.renderNodes(ast, nobr ? { nobr: true } : undefined);
 
+    if (nobr) {
+      return ctx.wrap(ctx.h(NobrContext.Provider, { value: true }, content));
+    }
     return ctx.wrap(content);
   },
 });

package/src/components/macros/Nobr.tsx

@@ -0,0 +1,15 @@
+import { defineMacro } from '../../define-macro';
+import { NobrContext } from '../../markup/render';
+
+defineMacro({
+  name: 'nobr',
+  render({ children = [] }, ctx) {
+    return ctx.wrap(
+      ctx.h(
+        NobrContext.Provider,
+        { value: true },
+        ctx.renderNodes(children, { nobr: true }),
+      ),
+    );
+  },
+});

package/src/macros/register-builtins.ts

@@ -20,6 +20,7 @@ import '../components/macros/Dialog';
 import '../components/macros/SaveManager';
 import '../components/macros/SettingsControls';
 import '../components/macros/Include';
+import '../components/macros/Nobr';
 import '../components/macros/Goto';
 import '../components/macros/Unset';
 import '../components/macros/Textbox';

package/src/markup/ast.ts

@@ -54,6 +54,7 @@ const BLOCK_MACROS = new Set([
   'type',
   'widget',
   'span',
+  'nobr',
 ]);
 
 /** Map from branch macro name → required parent macro name */

package/src/markup/render.tsx

@@ -1,4 +1,5 @@
 import { createContext } from 'preact';
+import { useContext } from 'preact/hooks';
 import { VarDisplay } from '../components/macros/VarDisplay';
 import { WidgetInvocation } from '../components/macros/WidgetInvocation';
 import { getWidget } from '../widgets/widget-registry';
@@ -21,6 +22,7 @@ const defaultUpdater: LocalsUpdater = {
 
 export const LocalsValuesContext = createContext<Record<string, unknown>>({});
 export const LocalsUpdateContext = createContext<LocalsUpdater>(defaultUpdater);
+export const NobrContext = createContext(false);
 
 /**
  * Convert an HTML string (from micromark) to Preact VNodes,
@@ -29,9 +31,15 @@ export const LocalsUpdateContext = createContext<LocalsUpdater>(defaultUpdater);
 function htmlToPreact(
   html: string,
   components: preact.ComponentChildren[],
+  nobr = false,
 ): preact.ComponentChildren {
   const temp = document.createElement('div');
   temp.innerHTML = html.trim();
+  if (nobr) {
+    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),
   );
@@ -74,6 +82,7 @@ function convertDomNode(
 
 function HtmlNodeRenderer({ node }: { node: HtmlNode }) {
   const resolve = useInterpolate();
+  const nobr = useContext(NobrContext);
   const attrs: Record<string, unknown> = {};
   for (const [k, v] of Object.entries(node.attributes)) {
     attrs[k] = resolve(v) ?? v;
@@ -81,7 +90,9 @@ function HtmlNodeRenderer({ node }: { node: HtmlNode }) {
   return h(
     node.tag,
     attrs,
-    node.children.length > 0 ? renderNodes(node.children) : undefined,
+    node.children.length > 0
+      ? renderNodes(node.children, nobr ? { nobr: true } : undefined)
+      : undefined,
   );
 }
 
@@ -210,7 +221,10 @@ function getVariableTextValue(node: VariableNode): string {
  * After micromark processes the combined string, the HTML is parsed back into
  * Preact VNodes with placeholders replaced by the real rendered components.
  */
-export function renderNodes(nodes: ASTNode[]): preact.ComponentChildren {
+export function renderNodes(
+  nodes: ASTNode[],
+  options?: { nobr?: boolean },
+): preact.ComponentChildren {
   if (nodes.length === 0) return null;
 
   // If there's no text at all, render nodes directly without markdown
@@ -241,5 +255,5 @@ export function renderNodes(nodes: ASTNode[]): preact.ComponentChildren {
   const html = markdownToHtml(combined);
 
   // Convert HTML to Preact VNodes, replacing placeholders with components
-  return htmlToPreact(html, components);
+  return htmlToPreact(html, components, options?.nobr);
 }