domma-cms 0.46.4 → 0.47.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "domma-cms",
-  "version": "0.46.4",
+  "version": "0.47.1",
   "description": "File-based CMS powered by Domma and Fastify. Run npx domma-cms my-site to create a new project.",
   "type": "module",
   "main": "server/server.js",

package/public/js/text-style.mjs

@@ -0,0 +1 @@
+export const SIZE_MAP={xs:".75rem",sm:".875rem",base:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem"},WEIGHT_MAP={thin:"100",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800",black:"900"},SPACING_MAP={tight:"-0.05em",normal:"0em",wide:"0.05em",wider:"0.1em"},COLOUR_TOKENS={primary:"var(--dm-color-primary)",secondary:"var(--dm-color-secondary)",muted:"var(--dm-text-muted)",danger:"var(--dm-color-danger)",success:"var(--dm-color-success)",warning:"var(--dm-color-warning)",info:"var(--dm-color-info)"},FONT_MAP={Georgia:"Georgia,serif",Arial:"Arial,sans-serif",Verdana:"Verdana,sans-serif","Courier New":"'Courier New',monospace","Times New Roman":"'Times New Roman',serif","Trebuchet MS":"'Trebuchet MS',sans-serif"},TRANSFORM_MAP={upper:"uppercase",lower:"lowercase",capitalize:"capitalize",none:"none"},DECORATION_MAP={underline:"underline","line-through":"line-through",none:"none"};function l(e){return e!=null&&e!==!1&&e!=="false"&&e!=="0"}function i(e){return String(e).replace(/["<>]/g,"").trim()}export function buildTextStyle(e={}){const o=[];if(e.size&&o.push(`font-size:${SIZE_MAP[e.size]||i(e.size)}`),e["point-size"]){const r=parseFloat(e["point-size"]);!isNaN(r)&&r>0&&o.push(`font-size:${r}pt`)}l(e.bold)?o.push("font-weight:700"):e.weight&&WEIGHT_MAP[e.weight]&&o.push(`font-weight:${WEIGHT_MAP[e.weight]}`),l(e.italic)&&o.push("font-style:italic");const n=e.colour||e.color;return n&&o.push(`color:${COLOUR_TOKENS[n]||i(n)}`),e.font&&FONT_MAP[e.font]&&o.push(`font-family:${FONT_MAP[e.font]}`),e.transform&&TRANSFORM_MAP[e.transform]&&o.push(`text-transform:${TRANSFORM_MAP[e.transform]}`),e.decoration&&DECORATION_MAP[e.decoration]&&o.push(`text-decoration:${DECORATION_MAP[e.decoration]}`),e.spacing&&o.push(`letter-spacing:${SPACING_MAP[e.spacing]||i(e.spacing)}`),e.align&&(o.push("display:block"),o.push(`text-align:${i(e.align)}`)),e.style&&o.push(i(e.style).replace(/;+$/,"")),o.join(";")}

package/server/services/markdown.js

@@ -15,6 +15,7 @@ import {getMenu, resolveLocation, resolveMenuDecorations} from './menus.js';
 import {buildMenuNav} from './menuRender.js';
 import {checkVisibility} from '../middleware/auth.js';
 import {getRoleHierarchy} from './roles.js';
+import {buildTextStyle} from '../../public/js/text-style.mjs';
 
 const __dirname_md = path.dirname(fileURLToPath(import.meta.url));
 const BLOCKS_DIR = path.resolve(__dirname_md, '../../content/blocks');
@@ -1667,7 +1668,7 @@ function processEffectsBlocks(markdown) {
         if (body === null) return `<div class="${classes.join(' ')}"></div>`;
         // Restore code placeholders before the nested parse (tabs-handler
         // pattern) so code spans/fences render as <code>, not raw backticks.
-        const innerHtml = marked.parse(processCardBlocks(processGridBlocks(restore(body.trim()))));
+        const innerHtml = marked.parse(processCardBlocks(processGridBlocks(processInlineShortcodes(restore(body.trim())))));
         return `<div class="${classes.join(' ')}">${innerHtml}</div>\n`;
     });
 
@@ -1684,7 +1685,7 @@ function processEffectsBlocks(markdown) {
         if (!hasActions) {
             // Restore code placeholders before the nested parse (tabs-handler
         // pattern) so code spans/fences render as <code>, not raw backticks.
-        const innerHtml = marked.parse(processCardBlocks(processGridBlocks(restore(body.trim()))));
+        const innerHtml = marked.parse(processCardBlocks(processGridBlocks(processInlineShortcodes(restore(body.trim())))));
             return `<div class="dm-fx-scribe"${dataAttrs}>${innerHtml}</div>\n`;
         }
         const actions = [];
@@ -1723,7 +1724,7 @@ function processEffectsBlocks(markdown) {
             const dataAttrs = Object.entries(attrs).map(([k, v]) => ` data-fx-${k}="${v}"`).join('');
             // Restore code placeholders before the nested parse (tabs-handler
         // pattern) so code spans/fences render as <code>, not raw backticks.
-        const innerHtml = marked.parse(processCardBlocks(processGridBlocks(restore(body.trim()))));
+        const innerHtml = marked.parse(processCardBlocks(processGridBlocks(processInlineShortcodes(restore(body.trim())))));
             return `<div class="dm-fx-${name}"${dataAttrs}>${innerHtml}</div>\n`;
         });
     }
@@ -1740,7 +1741,7 @@ function processEffectsBlocks(markdown) {
         }
         // Restore code placeholders before the nested parse (tabs-handler
         // pattern) so code spans/fences render as <code>, not raw backticks.
-        const innerHtml = marked.parse(processCardBlocks(processGridBlocks(restore(body.trim()))));
+        const innerHtml = marked.parse(processCardBlocks(processGridBlocks(processInlineShortcodes(restore(body.trim())))));
         return `<div class="dm-fx-ticker-tape" data-fx-mode="container"${dataAttrs}>${innerHtml}</div>\n`;
     });
 
@@ -1758,7 +1759,7 @@ function processEffectsBlocks(markdown) {
             }
             // Restore code placeholders before the nested parse (tabs-handler
             // pattern) so code spans/fences render as <code>, not raw backticks.
-            const innerHtml = marked.parse(processCardBlocks(processGridBlocks(restore(body.trim()))));
+            const innerHtml = marked.parse(processCardBlocks(processGridBlocks(processInlineShortcodes(restore(body.trim())))));
             return `<div class="dm-fx-${name}" data-fx-mode="container"${dataAttrs}>${innerHtml}</div>\n`;
         });
     }
@@ -1771,7 +1772,7 @@ function processEffectsBlocks(markdown) {
         if (attrs.duration) classes.push(`animate-duration-${attrs.duration}`);
         if (attrs.delay) classes.push(`animate-delay-${attrs.delay}`);
         if (attrs.repeat) classes.push(`animate-${attrs.repeat}`);
-        return `<div class="${classes.join(' ')}">${marked.parse(processCardBlocks(processGridBlocks(restore(body.trim()))))}</div>\n`;
+        return `<div class="${classes.join(' ')}">${marked.parse(processCardBlocks(processGridBlocks(processInlineShortcodes(restore(body.trim())))))}</div>\n`;
     });
 
     apply('ambient', (attrStr, body) => {
@@ -1781,7 +1782,7 @@ function processEffectsBlocks(markdown) {
         if (attrs.type) classes.push(`bg-ambient-${attrs.type}`);
         if (attrs.speed) classes.push(`bg-ambient-${attrs.speed}`);
         if (attrs.intensity) classes.push(`bg-ambient-${attrs.intensity}`);
-        return `<div class="${classes.join(' ')}">${marked.parse(processCardBlocks(processGridBlocks(restore(body.trim()))))}</div>\n`;
+        return `<div class="${classes.join(' ')}">${marked.parse(processCardBlocks(processGridBlocks(processInlineShortcodes(restore(body.trim())))))}</div>\n`;
     });
 
     return restore(result);
@@ -1847,7 +1848,7 @@ function processGridBlocks(markdown) {
       // processCardBlocks, which creates its own empty store and fails to
       // decode them, producing the literal string "undefined" in place of
       // whatever was in <pre>, ``` fences, or `inline code`.
-      return `<div${cls}${id}${injected.effectDataAttrs}>${marked.parse(processCardBlocks(restore(body.trim())))}</div>`;
+      return `<div${cls}${id}${injected.effectDataAttrs}>${marked.parse(processCardBlocks(processInlineShortcodes(restore(body.trim()))))}</div>`;
     }
   );
 
@@ -2147,7 +2148,7 @@ LAYOUT_RENDERERS['basic'] = (attrs, body) => {
 LAYOUT_RENDERERS['header-body'] = (attrs, body) => {
     const title = typeof attrs.title === 'string' ? attrs.title.trim() : '';
     const hdr = title ? `<div class="card-header"><div class="card-title">${escapeAttr(title)}</div></div>` : '';
-    const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+    const bodyHtml = marked.parse(processGridBlocks(processInlineShortcodes(body.trim())));
     return `${cardRoot(attrs)}${hdr}<div class="card-body">${bodyHtml}</div>${cardFooterAttr(attrs)}</div>\n`;
 };
 
@@ -2155,14 +2156,14 @@ LAYOUT_RENDERERS['header-body-footer'] = (attrs, body) => {
     const title = typeof attrs.title === 'string' ? attrs.title.trim() : '';
     const footer = typeof attrs.footer === 'string' ? attrs.footer.trim() : '';
     const hdr = title ? `<div class="card-header"><div class="card-title">${escapeAttr(title)}</div></div>` : '';
-    const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+    const bodyHtml = marked.parse(processGridBlocks(processInlineShortcodes(body.trim())));
     const ftr = footer ? `<div class="card-footer">${escapeAttr(footer)}</div>` : '';
     return `${cardRoot(attrs)}${hdr}<div class="card-body">${bodyHtml}</div>${ftr}</div>\n`;
 };
 
 LAYOUT_RENDERERS['no-header-footer'] = (attrs, body) => {
     const footer = typeof attrs.footer === 'string' ? attrs.footer.trim() : '';
-    const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+    const bodyHtml = marked.parse(processGridBlocks(processInlineShortcodes(body.trim())));
     const ftr = footer ? `<div class="card-footer">${escapeAttr(footer)}</div>` : '';
     return `${cardRoot(attrs)}<div class="card-body">${bodyHtml}</div>${ftr}</div>\n`;
 };
@@ -2173,7 +2174,7 @@ LAYOUT_RENDERERS['icon-top'] = (attrs, body) => {
     const icon = typeof attrs.icon === 'string' ? attrs.icon.trim() : '';
     const iconHtml = icon ? `<span data-icon="${escapeAttr(icon)}" class="card-icon"></span>` : '';
     const subHtml = subtitle ? `<div class="card-subtitle">${escapeAttr(subtitle)}</div>` : '';
-    const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+    const bodyHtml = marked.parse(processGridBlocks(processInlineShortcodes(body.trim())));
     return `${cardRoot(attrs)}
     <div class="card-header card-header-icon-stacked">
       <div class="card-avatar-wrap">${iconHtml}<div class="card-title">${escapeAttr(title)}</div>${subHtml}</div>
@@ -2187,7 +2188,7 @@ LAYOUT_RENDERERS['icon-inline'] = (attrs, body) => {
     const icon = typeof attrs.icon === 'string' ? attrs.icon.trim() : '';
     const iconHtml = icon ? `<span data-icon="${escapeAttr(icon)}"></span>` : '';
     const subHtml = subtitle ? `<div class="card-subtitle">${escapeAttr(subtitle)}</div>` : '';
-    const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+    const bodyHtml = marked.parse(processGridBlocks(processInlineShortcodes(body.trim())));
     return `${cardRoot(attrs)}
     <div class="card-header card-header-icon-inline">
       ${iconHtml}<div class="card-header-content"><div class="card-title">${escapeAttr(title)}</div>${subHtml}</div>
@@ -2198,13 +2199,13 @@ LAYOUT_RENDERERS['icon-inline'] = (attrs, body) => {
 LAYOUT_RENDERERS['image-top'] = (attrs, body) => {
     const title = typeof attrs.title === 'string' ? attrs.title.trim() : '';
     const hdr = title ? `<div class="card-header"><div class="card-title">${escapeAttr(title)}</div></div>` : '';
-    const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+    const bodyHtml = marked.parse(processGridBlocks(processInlineShortcodes(body.trim())));
     return `${cardRoot(attrs)}<div class="card-img-top"${imgStyle(attrs)}></div>${hdr}<div class="card-body">${bodyHtml}</div>${cardFooterAttr(attrs)}</div>\n`;
 };
 
 LAYOUT_RENDERERS['image-overlay'] = (attrs, body) => {
     const title = typeof attrs.title === 'string' ? attrs.title.trim() : '';
-    const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+    const bodyHtml = marked.parse(processGridBlocks(processInlineShortcodes(body.trim())));
     return `${cardRoot(attrs)}
     <div class="card-img-overlay"${imgStyle(attrs)}>
       <div class="card-overlay-text"><div class="card-title">${escapeAttr(title)}</div></div>
@@ -2214,14 +2215,14 @@ LAYOUT_RENDERERS['image-overlay'] = (attrs, body) => {
 
 LAYOUT_RENDERERS['thumb-left'] = (attrs, body) => {
     const title = typeof attrs.title === 'string' ? attrs.title.trim() : '';
-    const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+    const bodyHtml = marked.parse(processGridBlocks(processInlineShortcodes(body.trim())));
     return `${cardRoot(attrs, ['card-layout-thumb-left'])}<div class="card-img-left"${imgStyle(attrs)}></div>
     <div class="card-body">${title ? `<div class="card-title">${escapeAttr(title)}</div>` : ''}${bodyHtml}</div>${cardFooterAttr(attrs)}</div>\n`;
 };
 
 LAYOUT_RENDERERS['thumb-right'] = (attrs, body) => {
     const title = typeof attrs.title === 'string' ? attrs.title.trim() : '';
-    const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+    const bodyHtml = marked.parse(processGridBlocks(processInlineShortcodes(body.trim())));
     return `${cardRoot(attrs, ['card-layout-thumb-right'])}
     <div class="card-body">${title ? `<div class="card-title">${escapeAttr(title)}</div>` : ''}${bodyHtml}</div>
     <div class="card-img-right"${imgStyle(attrs)}></div></div>\n`;
@@ -2229,14 +2230,14 @@ LAYOUT_RENDERERS['thumb-right'] = (attrs, body) => {
 
 LAYOUT_RENDERERS['wide-left-image'] = (attrs, body) => {
     const title = typeof attrs.title === 'string' ? attrs.title.trim() : '';
-    const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+    const bodyHtml = marked.parse(processGridBlocks(processInlineShortcodes(body.trim())));
     return `${cardRoot(attrs, ['card-layout-horizontal'])}<div class="card-img-wide"${imgStyle(attrs)}></div>
     <div class="card-body">${title ? `<div class="card-title">${escapeAttr(title)}</div>` : ''}${bodyHtml}${cardFooterAttr(attrs)}</div></div>\n`;
 };
 
 LAYOUT_RENDERERS['full-bg'] = (attrs, body) => {
     const title = typeof attrs.title === 'string' ? attrs.title.trim() : '';
-    const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+    const bodyHtml = marked.parse(processGridBlocks(processInlineShortcodes(body.trim())));
     return `${cardRoot(attrs, ['dm-card-full-bg'])}<div class="card-img-top"${imgStyle(attrs)}></div>
     <div class="card-body">${title ? `<div class="card-title">${escapeAttr(title)}</div>` : ''}${bodyHtml}</div>${cardFooterAttr(attrs)}</div>\n`;
 };
@@ -2244,7 +2245,7 @@ LAYOUT_RENDERERS['full-bg'] = (attrs, body) => {
 LAYOUT_RENDERERS['split-half'] = (attrs, body) => {
     const title = typeof attrs.title === 'string' ? attrs.title.trim() : '';
     const gradient = typeof attrs.gradient === 'string' ? attrs.gradient.trim() : 'indigo';
-    const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+    const bodyHtml = marked.parse(processGridBlocks(processInlineShortcodes(body.trim())));
     return `${cardRoot(attrs, ['card-layout-split'])}<div class="card-split-left card-gradient-${escapeAttr(gradient)}"${imgStyle(attrs)}></div>
     <div class="card-split-right"><div class="card-body">${title ? `<div class="card-title">${escapeAttr(title)}</div>` : ''}${bodyHtml}</div></div></div>\n`;
 };
@@ -2627,6 +2628,29 @@ function renderLegacyCard(attrs, body, markedInstance, escAttr) {
  * @param {string} markdown
  * @returns {string}
  */
+/**
+ * Resolve the inline shortcodes in a nested body BEFORE it reaches
+ * marked.parse.
+ *
+ * marked HTML-escapes the quotes in any `[tag attr="x"]` still sitting in the
+ * text, so a tag processed after it sees `attr=&quot;x&quot;` and loses every
+ * attribute - `[text size="lg"]` inside a `[tab]` or a `[card]` rendered
+ * unstyled, and `[button href="/x"]` came out with `href="true"`. The
+ * top-level pipeline runs these five before the container tags for exactly
+ * that reason (see parseMarkdown); every container that renders a nested body
+ * has to match the order rather than invent its own.
+ *
+ * Idempotent: a body whose inline tags are already HTML has none left to match.
+ *
+ * @param {string} markdown
+ * @returns {string}
+ */
+function processInlineShortcodes(markdown) {
+    return processCtaBlocks(processLinkBlocks(processButtonBlocks(
+        processTextBlocks(processBadgeBlocks(markdown))
+    )));
+}
+
 function processCardBlocks(markdown) {
     const {scrubbed, restore} = scrubCodeRegions(markdown);
     return restore(scrubbed.replace(
@@ -2693,7 +2717,7 @@ function processTabsBlocks(markdown) {
         // so fenced code blocks render as <pre><code> rather than surviving as raw text
         // that would confuse subsequent scrubCodeRegions calls.
         const restoredBody = restore(tabBody.trim());
-        const bodyHtml = marked.parse(processCardBlocks(processGridBlocks(restoredBody)));
+        const bodyHtml = marked.parse(processCardBlocks(processGridBlocks(processInlineShortcodes(restoredBody))));
           const icon = tabAttrs.icon ? tabAttrs.icon.trim() : '';
           items.push({title, icon, paneId, bodyHtml, first: tabIdx === 1});
       });
@@ -2748,7 +2772,7 @@ function processAccordionBlocks(markdown) {
       body.replace(/\[item([^\]]*)\]([\s\S]*?)\[\/item\]/gi, (__, itemAttr, itemBody) => {
         const itemAttrs = parseShortcodeAttrs(itemAttr);
         const title = itemAttrs.title || 'Item';
-        const bodyHtml = marked.parse(processCardBlocks(processGridBlocks(restore(itemBody.trim()))));
+        const bodyHtml = marked.parse(processCardBlocks(processGridBlocks(processInlineShortcodes(restore(itemBody.trim())))));
         items += (
           `<div class="accordion-item">\n` +
           `  <h3 class="accordion-header"><button class="accordion-button" type="button">${escapeAttr(title)}` +
@@ -2812,7 +2836,7 @@ function processCarouselBlocks(markdown) {
         if (slideAttrs.image) {
           inner += `<img src="${escapeAttr(slideAttrs.image)}" alt="${escapeAttr(slideAttrs.title || '')}">\n`;
         }
-        const contentHtml = marked.parse(processCardBlocks(processGridBlocks(restore(slideBody.trim()))));
+        const contentHtml = marked.parse(processCardBlocks(processGridBlocks(processInlineShortcodes(restore(slideBody.trim())))));
         if (slideAttrs.title || slideBody.trim()) {
           inner += `<div class="carousel-slide-content">`;
           if (slideAttrs.title) inner += `<h2 class="carousel-slide-title">${escapeAttr(slideAttrs.title)}</h2>`;
@@ -2914,7 +2938,7 @@ function processTimelineBlocks(markdown) {
           const date = ia.date ? ` data-date="${escapeAttr(ia.date)}"` : '';
           const status = ia.status ? ` data-status="${escapeAttr(ia.status)}"` : '';
           const icon = ia.icon ? ` data-icon="${escapeAttr(ia.icon)}"` : '';
-          const descHtml = marked.parse(processCardBlocks(processGridBlocks(restore(itemBody.trim()))));
+          const descHtml = marked.parse(processCardBlocks(processGridBlocks(processInlineShortcodes(restore(itemBody.trim())))));
           return `<div class="dm-progression-item"${date}${status}${icon}><div class="dm-progression-item-title">${title}</div><div class="dm-progression-item-body">${descHtml}</div></div>`;
         }
       );
@@ -3014,94 +3038,12 @@ function processBadgeBlocks(markdown) {
 function processTextBlocks(markdown) {
     const {scrubbed, restore} = scrubCodeRegions(markdown);
 
-    const SIZE_MAP = {
-        xs: '.75rem', sm: '.875rem', base: '1rem', lg: '1.125rem',
-        xl: '1.25rem', '2xl': '1.5rem', '3xl': '1.875rem', '4xl': '2.25rem',
-    };
-    const WEIGHT_MAP = {
-        thin: '100', light: '300', normal: '400', medium: '500',
-        semibold: '600', bold: '700', extrabold: '800', black: '900',
-    };
-    const SPACING_MAP = {
-        tight: '-0.05em', normal: '0em', wide: '0.05em', wider: '0.1em',
-    };
-    const COLOR_TOKENS = {
-        primary: 'var(--dm-color-primary)', secondary: 'var(--dm-color-secondary)',
-        muted: 'var(--dm-text-muted)', danger: 'var(--dm-color-danger)',
-        success: 'var(--dm-color-success)', warning: 'var(--dm-color-warning)',
-        info: 'var(--dm-color-info)',
-    };
-    const FONT_MAP = {
-        'Georgia': 'Georgia,serif',
-        'Arial': 'Arial,sans-serif',
-        'Verdana': 'Verdana,sans-serif',
-        'Courier New': "'Courier New',monospace",
-        'Times New Roman': "'Times New Roman',serif",
-        'Trebuchet MS': "'Trebuchet MS',sans-serif",
-    };
-    const TRANSFORM_MAP = {
-        upper: 'uppercase', lower: 'lowercase', capitalize: 'capitalize', none: 'none',
-    };
-    const DECORATION_MAP = {
-        underline: 'underline', 'line-through': 'line-through', none: 'none',
-    };
-
     function buildText(attrStr, inner) {
         const attrs = parseShortcodeAttrs(attrStr || '');
-        const styles = [];
-
-        if (attrs.size) {
-            styles.push(`font-size:${SIZE_MAP[attrs.size] || attrs.size}`);
-        }
-
-        if (attrs['point-size']) {
-            const pt = parseFloat(attrs['point-size']);
-            if (!isNaN(pt) && pt > 0) styles.push(`font-size:${pt}pt`);
-        }
-
-        // bold flag takes precedence over weight attr
-        const isBold = /\bbold\b/i.test(attrStr);
-        if (isBold) {
-            styles.push('font-weight:700');
-        } else if (attrs.weight && WEIGHT_MAP[attrs.weight]) {
-            styles.push(`font-weight:${WEIGHT_MAP[attrs.weight]}`);
-        }
-
-        if (/\bitalic\b/i.test(attrStr)) {
-            styles.push('font-style:italic');
-        }
-
-        const colourVal = attrs.colour || attrs.color;
-        if (colourVal) {
-            styles.push(`color:${COLOR_TOKENS[colourVal] || colourVal}`);
-        }
-
-        if (attrs.font && FONT_MAP[attrs.font]) {
-            styles.push(`font-family:${FONT_MAP[attrs.font]}`);
-        }
-
-        if (attrs.transform && TRANSFORM_MAP[attrs.transform]) {
-            styles.push(`text-transform:${TRANSFORM_MAP[attrs.transform]}`);
-        }
-
-        if (attrs.decoration && DECORATION_MAP[attrs.decoration]) {
-            styles.push(`text-decoration:${DECORATION_MAP[attrs.decoration]}`);
-        }
-
-        if (attrs.spacing) {
-            styles.push(`letter-spacing:${SPACING_MAP[attrs.spacing] || attrs.spacing}`);
-        }
-
-        if (attrs.align) {
-            styles.push('display:block');
-            styles.push(`text-align:${escapeAttr(attrs.align)}`);
-        }
-
-        if (attrs.style) {
-            styles.push(attrs.style.trim().replace(/;+$/, ''));
-        }
-
-        const styleAttr = styles.length ? ` style="${styles.join(';')}"` : '';
+        // The attribute → CSS mapping is shared with the admin editor's live
+        // preview (public/js/text-style.mjs), so the two cannot disagree.
+        const style = buildTextStyle(attrs);
+        const styleAttr = style ? ` style="${style}"` : '';
         const classAttr = attrs.class ? ` class="${escapeAttr(attrs.class)}"` : '';
         const idAttr = attrs.id ? ` id="${escapeAttr(attrs.id)}"` : '';
 
@@ -3338,7 +3280,7 @@ function processListGroupBlocks(markdown) {
             const itemClassStr = itemClasses.join(' ');
             let items = '';
             body.replace(/\[item\]([\s\S]*?)\[\/item\]/gi, (__, content) => {
-                const html = marked.parseInline(restore(content.trim()));
+                const html = marked.parseInline(processInlineShortcodes(restore(content.trim())));
                 items += `<div class="${itemClassStr}">${html}</div>\n`;
             });
 
@@ -3773,12 +3715,13 @@ function processHeroBlocks(markdown) {
       const style = styleParts.length ? ` style="${styleParts.join(';')}"` : '';
       const idAttr = id ? ` id="${escapeAttr(id)}"` : '';
 
-      // Button/link/cta must run before marked.parse so their quoted attributes
-      // aren't HTML-escaped to &quot; - that mangles parseShortcodeAttrs and
-      // turns `href="/x"` into a bare flag (attrs.href = true → href="true").
-      const processedBody = processCtaBlocks(processLinkBlocks(processButtonBlocks(
-          processTextBlocks(processBadgeBlocks(processCardBlocks(processGridBlocks(restore(body.trim())))))
-      )));
+      // The inline tags must run before marked.parse (see
+      // processInlineShortcodes) AND before the container tags, because
+      // processCardBlocks hands the card body straight to marked - which is
+      // what used to escape the attributes of anything left inside a card.
+      const processedBody = processCardBlocks(processGridBlocks(
+          processInlineShortcodes(restore(body.trim()))
+      ));
 
       let inner = '<div class="hero-content">';
       if (title) inner += `<h1 class="hero-title hero-title-responsive">${escapeAttr(title)}</h1>`;
@@ -3878,7 +3821,7 @@ function processSlideoverBlocks(markdown) {
       const trigger = escapeAttr(attrs.trigger || 'Open');
       const size = escapeAttr(attrs.size || 'md');
       const position = escapeAttr(attrs.position || 'right');
-      const bodyHtml = marked.parse(processCardBlocks(processGridBlocks(restore(body.trim()))));
+      const bodyHtml = marked.parse(processCardBlocks(processGridBlocks(processInlineShortcodes(restore(body.trim())))));
       return (
         `<button class="btn btn-link dm-so-trigger" data-so-target="${id}">${trigger}</button>\n` +
         `<div class="dm-so-content" id="${id}" style="display:none" ` +