@uniweb/press 0.4.14 → 0.4.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/press",
-  "version": "0.4.14",
+  "version": "0.4.15",
   "description": "Press your React components into downloadable files — Word, Excel, PDF. Registration-based pattern with lazy-loaded format adapters.",
   "type": "module",
   "exports": {

package/src/adapters/docx.js

@@ -609,6 +609,10 @@ function irToTextRunPair(node) {
     if (node.smallCaps === 'true' || node.smallCaps === true) options.smallCaps = true
     if (node.allCaps === 'true' || node.allCaps === true) options.allCaps = true
     if (node.strike === 'true' || node.strike === true) options.strike = true
+    // Subscript / superscript — mutually exclusive vertical alignment.
+    if (node.subScript === 'true' || node.subScript === true) options.subScript = true
+    else if (node.superScript === 'true' || node.superScript === true)
+        options.superScript = true
 
     result.push(new TextRun(options))
     return result

package/src/docx/Headings.jsx

@@ -9,6 +9,7 @@
  */
 import { parseStyledString } from './parseStyledString.js'
 import TextRun from './TextRun.jsx'
+import LinkPart from './LinkPart.jsx'
 
 function Heading({ level, data, children, ...props }) {
     const Tag = `h${level}`
@@ -20,22 +21,15 @@ function Heading({ level, data, children, ...props }) {
             <Tag data-type="paragraph" data-heading={`HEADING_${level}`} {...props}>
                 {parts.map((part, i) =>
                     part.type === 'link' ? (
-                        <a
-                            key={i}
-                            data-type="externalHyperlink"
-                            data-link={part.href}
-                            href={part.href}
-                        >
-                            <span data-type="text" data-style="Hyperlink">
-                                {part.content}
-                            </span>
-                        </a>
+                        <LinkPart key={i} part={part} />
                     ) : (
                         <TextRun
                             key={i}
                             bold={part.bold}
                             italics={part.italics}
                             underline={!!part.underline}
+                            subscript={part.subscript}
+                            superscript={part.superscript}
                         >
                             {part.content}
                         </TextRun>

package/src/docx/Link.jsx

@@ -33,8 +33,15 @@ export default function Link({ data, ...props }) {
         )
     }
 
+    // The IR's anchor is a BARE bookmark name — `data-bookmark="x"` becomes
+    // `<w:bookmarkStart w:name="x"/>` — so a documented `href: '#section-3'`
+    // has to lose its '#' or `w:anchor="#section-3"` never matches
+    // `w:name="section-3"` and Word resolves nothing. `href` keeps the
+    // fragment form, which is what the browser preview needs.
+    const anchor = href.startsWith('#') ? href.slice(1) : href
+
     return (
-        <a data-type="internalHyperlink" data-anchor={href} href={href} {...props}>
+        <a data-type="internalHyperlink" data-anchor={anchor} href={href} {...props}>
             <span data-type="text" data-style="Hyperlink">
                 {label || href}
             </span>

package/src/docx/LinkPart.jsx

@@ -0,0 +1,52 @@
+/**
+ * Renders a `link` part from parseStyledString. INTERNAL helper — not in the
+ * barrel, same as parseStyledString itself.
+ *
+ * A link's label is one or more styled runs rather than a string, because a
+ * mark composes with an <a> from either side (`<strong><a>…</a></strong>`,
+ * `<a><strong>…</strong></a>`) and a label can mix runs (`x<sup>2</sup>`).
+ * Rendering each run through <TextRun> keeps the Hyperlink character style
+ * alongside the mark instead of trading one for the other.
+ *
+ * Not to be confused with the public <Link> builder, which is a different
+ * contract: it takes `{ label, href }` and adds target/rel. Both resolve an
+ * in-document anchor the same way (see below).
+ */
+import TextRun from './TextRun.jsx'
+
+/** `parts` is absent only for a hand-built part; fall back to the label. */
+export function labelRuns(part) {
+    return part.parts?.length ? part.parts : [{ content: part.content }]
+}
+
+export default function LinkPart({ part }) {
+    const href = part.href || ''
+
+    // An href starting with '#' is an in-document anchor, not a destination.
+    // Emitting it as an external hyperlink produced a relationship to the
+    // literal '#id' and no jump at all. The IR's anchor is a BARE bookmark
+    // name — `data-bookmark="x"` becomes `<w:bookmarkStart w:name="x"/>` — so
+    // the '#' is dropped here rather than shipped into `w:anchor`.
+    const anchor = href.startsWith('#') ? href.slice(1) : null
+    const linkAttrs = anchor
+        ? { 'data-type': 'internalHyperlink', 'data-anchor': anchor }
+        : { 'data-type': 'externalHyperlink', 'data-link': href }
+
+    return (
+        <a {...linkAttrs} href={href}>
+            {labelRuns(part).map((run, i) => (
+                <TextRun
+                    key={i}
+                    style="Hyperlink"
+                    bold={run.bold}
+                    italics={run.italics}
+                    underline={!!run.underline}
+                    subscript={run.subscript}
+                    superscript={run.superscript}
+                >
+                    {run.content}
+                </TextRun>
+            ))}
+        </a>
+    )
+}

package/src/docx/Paragraph.jsx

@@ -2,8 +2,9 @@
  * Block-level text container with optional styled string parsing.
  *
  * - Without `data`: renders children directly with data-type="paragraph".
- * - With `data`: parses the HTML string for inline marks (<strong>, <em>,
- *   <u>) and hyperlinks (<a href="...">) and renders as styled children.
+ * - With `data`: parses the HTML string for inline marks (<strong>, <em>, <u>,
+ *   <sub>, <sup>) and hyperlinks (<a href="...">) and renders as styled
+ *   children. A mark composing with a link applies to the link's label.
  *
  * The `as` prop changes the rendered HTML element (default: <p>).
  *
@@ -11,6 +12,7 @@
  */
 import { parseStyledString } from './parseStyledString.js'
 import TextRun from './TextRun.jsx'
+import LinkPart from './LinkPart.jsx'
 import Math from './Math.jsx'
 
 /**
@@ -42,8 +44,9 @@ function paragraphPolishProps({ tabStops, indent, role }) {
  * Block-level text container with optional styled string parsing.
  *
  * - Without `data`: renders children directly with data-type="paragraph".
- * - With `data`: parses the HTML string for inline marks (<strong>, <em>,
- *   <u>) and hyperlinks (<a href="...">) and renders as styled children.
+ * - With `data`: parses the HTML string for inline marks (<strong>, <em>, <u>,
+ *   <sub>, <sup>) and hyperlinks (<a href="...">) and renders as styled
+ *   children. A mark composing with a link applies to the link's label.
  *
  * @param {Object} props
  * @param {React.ElementType} [props.as='p'] - Element to render.
@@ -74,18 +77,7 @@ export default function Paragraph({
             <Tag data-type="paragraph" {...polish} {...props}>
                 {parts.map((part, i) => {
                     if (part.type === 'link') {
-                        return (
-                            <a
-                                key={i}
-                                data-type="externalHyperlink"
-                                data-link={part.href}
-                                href={part.href}
-                            >
-                                <span data-type="text" data-style="Hyperlink">
-                                    {part.content}
-                                </span>
-                            </a>
-                        )
+                        return <LinkPart key={i} part={part} />
                     }
                     if (part.type === 'math') {
                         return (
@@ -103,6 +95,8 @@ export default function Paragraph({
                             bold={part.bold}
                             italics={part.italics}
                             underline={!!part.underline}
+                            subscript={part.subscript}
+                            superscript={part.superscript}
                         >
                             {part.content}
                         </TextRun>

package/src/docx/TextRun.jsx

@@ -43,6 +43,8 @@ function coerceDateChildren(children) {
  *
  * @param {Object} props
  * @param {boolean} [props.bold]
+ * @param {boolean} [props.subscript] - Render below the baseline (docx vertAlign).
+ * @param {boolean} [props.superscript] - Render above the baseline (docx vertAlign).
  * @param {boolean} [props.italics]
  * @param {boolean} [props.underline]
  * @param {string} [props.color] - Hex color (with or without '#') or a
@@ -67,6 +69,8 @@ export default function TextRun({
     smallCaps,
     allCaps,
     strike,
+    subscript,
+    superscript,
     style,
     role,
     ...props
@@ -88,6 +92,8 @@ export default function TextRun({
     if (smallCaps) dataProps['data-smallcaps'] = 'true'
     if (allCaps) dataProps['data-allcaps'] = 'true'
     if (strike) dataProps['data-strike'] = 'true'
+    if (subscript) dataProps['data-subscript'] = 'true'
+    if (superscript) dataProps['data-superscript'] = 'true'
     if (resolvedStyle) dataProps['data-style'] = resolvedStyle
 
     return (

package/src/docx/parseStyledString.js

@@ -1,7 +1,7 @@
 /**
- * Parses a styled string with inline HTML marks (<strong>, <em>, <u>, <a>,
- * <span data-type="math">) into an array of text / link / math part
- * objects with style flags.
+ * Parses a styled string with inline HTML marks (<strong>/<b>, <em>/<i>, <u>,
+ * <sub>, <sup>, <a>, <span data-type="math">) into an array of text / link /
+ * math part objects with style flags.
  *
  * Ported from legacy report-sdk/src/utils.js:116-186, extended to support
  * <a href="..."> hyperlinks so paragraphs with auto-linked emails and URLs
@@ -10,8 +10,14 @@
  * than being walked as opaque DOM (which turns MathML into raw operator
  * text).
  *
+ * A `link` part carries `parts` — the styled runs making up its label — because
+ * a mark composes with an <a> from either side (`<strong><a>…</a></strong>` or
+ * `<a><strong>…</strong></a>`) and a label can mix runs (`x<sup>2</sup>`).
+ * `content` remains the flat plain-text label for callers that only want a
+ * string.
+ *
  * @param {string} inputString - HTML string with inline marks.
- * @returns {Array<{type: string, content?: string, bold?: boolean, italics?: boolean, underline?: object, href?: string, latex?: string, display?: boolean}>}
+ * @returns {Array<{type: string, content?: string, bold?: boolean, italics?: boolean, underline?: object, subscript?: boolean, superscript?: boolean, href?: string, parts?: Array<object>, latex?: string, display?: boolean}>}
  *
  * @example
  * parseStyledString('Hello <strong>World</strong>')
@@ -21,10 +27,15 @@
  * // ]
  *
  * @example
- * parseStyledString('Visit <a href="https://example.com">Example</a>')
+ * parseStyledString('Visit <a href="https://example.com"><strong>Example</strong></a>')
  * // => [
  * //   { type: 'text', content: 'Visit ' },
- * //   { type: 'link', content: 'Example', href: 'https://example.com' }
+ * //   {
+ * //     type: 'link',
+ * //     content: 'Example',
+ * //     href: 'https://example.com',
+ * //     parts: [{ type: 'text', content: 'Example', bold: true }]
+ * //   }
  * // ]
  *
  * @example
@@ -77,14 +88,40 @@ export function parseStyledString(inputString) {
                 result.push(createTextPart(plainText, styles))
             }
 
-            // Handle <a> tags as links
+            // Handle <a> tags as links.
+            //
+            // Marks compose with a link from both directions and both used to
+            // be lost here, because this branch returned without consulting
+            // the accumulated styles OR walking the body:
+            //
+            //   <strong><a href=…>x</a></strong>   outer mark -> dropped
+            //   <a href=…><strong>x</strong></a>   inner mark -> survived as a
+            //                                      LITERAL '<strong>x</strong>'
+            //                                      string, which React escapes
+            //                                      and Word then shows as
+            //                                      visible tag text.
+            //
+            // Parsing the body with the accumulated styles fixes both: an
+            // outer mark rides in via `styles`, an inner one is found by the
+            // recursion, and a link can now carry mixed runs (`x<sup>2</sup>`).
+            // `content` stays the flat plain-text label for callers that only
+            // want a string; `parts` carries the styled runs.
             if (tag === 'a' && attrs) {
                 const href = readAttr(attrs, 'href')
                 if (href) {
+                    // Text runs only. A link wrapping a non-text atom (inline
+                    // math) is exotic, and neither builder can place one inside
+                    // an <a> today; dropping it yields a clean text label
+                    // rather than the raw markup that used to leak through.
+                    const parts = processSegments(innerText, styles).filter(
+                        (p) => p.type === 'text',
+                    )
+
                     result.push({
                         type: 'link',
-                        content: innerText,
+                        content: parts.map((p) => p.content).join(''),
                         href,
+                        parts,
                     })
                     lastIndex = offset + match.length
                     return
@@ -118,6 +155,8 @@ export function parseStyledString(inputString) {
             if (tag === 'strong' || tag === 'b') newStyles.bold = true
             if (tag === 'em' || tag === 'i') newStyles.italics = true
             if (tag === 'u') newStyles.underline = {}
+            if (tag === 'sub') newStyles.subscript = true
+            if (tag === 'sup') newStyles.superscript = true
 
             result = result.concat(processSegments(innerText, newStyles))
             lastIndex = offset + match.length

package/src/ir/attributes.js

@@ -187,6 +187,8 @@ export const attributeMap = {
     'data-smallcaps': { path: ['smallCaps'], transform: asTrue },
     'data-allcaps': { path: ['allCaps'], transform: asTrue },
     'data-strike': { path: ['strike'], transform: asTrue },
+    'data-subscript': { path: ['subScript'], transform: asTrue },
+    'data-superscript': { path: ['superScript'], transform: asTrue },
 
     // Row-level: whether the row repeats as a header on each new page
     // when the table breaks. Presence-only — any truthy value counts.

package/src/typst/Heading.jsx

@@ -7,6 +7,7 @@
  */
 import { parseStyledString } from '../docx/parseStyledString.js'
 import TextRun from './TextRun.jsx'
+import LinkPart from './LinkPart.jsx'
 
 export default function Heading({ level = 1, id, data, children, ...props }) {
     const clamped = Math.min(Math.max(level, 1), 6)
@@ -20,14 +21,7 @@ export default function Heading({ level = 1, id, data, children, ...props }) {
             <Tag data-type="heading" data-level={clamped} {...idAttr} {...props}>
                 {parts.map((part, i) =>
                     part.type === 'link' ? (
-                        <a
-                            key={i}
-                            data-type="link"
-                            data-href={part.href}
-                            href={part.href}
-                        >
-                            <span data-type="text">{part.content}</span>
-                        </a>
+                        <LinkPart key={i} part={part} />
                     ) : (
                         <TextRun
                             key={i}

package/src/typst/LinkPart.jsx

@@ -0,0 +1,45 @@
+/**
+ * Renders a `link` part from parseStyledString. INTERNAL helper — not in the
+ * barrel, same as parseStyledString itself.
+ *
+ * A link's label is one or more styled runs rather than a string, because a
+ * mark composes with an <a> from either side (`<strong><a>…</a></strong>`,
+ * `<a><strong>…</strong></a>`) and a label can mix runs.
+ *
+ * The docx lane has its own copy: the two emit different `data-type` values
+ * and their TextRuns accept different marks (this one takes `code`; the docx
+ * one takes sub/superscript and a Hyperlink style). Parameterising one shared
+ * component over those differences would need more knobs than either version
+ * has lines.
+ *
+ * Unlike the docx copy, this one does NOT special-case an in-document anchor
+ * (`href="#id"`). That is deliberate: the typst adapter has no
+ * `internalHyperlink` case, so emitting one would drop the link entirely,
+ * whereas `#link("#id")` at least renders its label. Typst addresses
+ * in-document targets through labels rather than URL fragments, so wiring
+ * this up means teaching the adapter that concept first.
+ */
+import TextRun from './TextRun.jsx'
+
+/** `parts` is absent only for a hand-built part; fall back to the label. */
+export function labelRuns(part) {
+    return part.parts?.length ? part.parts : [{ content: part.content }]
+}
+
+export default function LinkPart({ part }) {
+    return (
+        <a data-type="link" data-href={part.href} href={part.href}>
+            {labelRuns(part).map((run, i) => (
+                <TextRun
+                    key={i}
+                    bold={run.bold}
+                    italics={run.italics}
+                    underline={!!run.underline}
+                    code={run.code}
+                >
+                    {run.content}
+                </TextRun>
+            ))}
+        </a>
+    )
+}

package/src/typst/Paragraph.jsx

@@ -13,6 +13,7 @@
  */
 import { parseStyledString } from '../docx/parseStyledString.js'
 import TextRun from './TextRun.jsx'
+import LinkPart from './LinkPart.jsx'
 import Math from './Math.jsx'
 
 export default function Paragraph({ as: Tag = 'p', data, children, ...props }) {
@@ -23,16 +24,7 @@ export default function Paragraph({ as: Tag = 'p', data, children, ...props }) {
             <Tag data-type="paragraph" {...props}>
                 {parts.map((part, i) => {
                     if (part.type === 'link') {
-                        return (
-                            <a
-                                key={i}
-                                data-type="link"
-                                data-href={part.href}
-                                href={part.href}
-                            >
-                                <span data-type="text">{part.content}</span>
-                            </a>
-                        )
+                        return <LinkPart key={i} part={part} />
                     }
                     if (part.type === 'math') {
                         return (