domma-cms 0.47.0 → 0.47.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "domma-cms",
-  "version": "0.47.0",
+  "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/server/services/markdown.js

@@ -1668,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`;
     });
 
@@ -1685,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 = [];
@@ -1724,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`;
         });
     }
@@ -1741,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`;
     });
 
@@ -1759,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`;
         });
     }
@@ -1772,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) => {
@@ -1782,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);
@@ -1848,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>`;
     }
   );
 
@@ -2148,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`;
 };
 
@@ -2156,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`;
 };
@@ -2174,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>
@@ -2188,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>
@@ -2199,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>
@@ -2215,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`;
@@ -2230,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`;
 };
@@ -2245,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`;
 };
@@ -2628,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(
@@ -2694,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});
       });
@@ -2749,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)}` +
@@ -2813,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>`;
@@ -2915,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>`;
         }
       );
@@ -3257,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`;
             });
 
@@ -3692,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>`;
@@ -3797,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" ` +