domma-cms 0.14.10 → 0.15.0

package/server/services/markdown.js

@@ -22,7 +22,7 @@ const BUILTIN_SHORTCODES = new Set([
     'text', 'button', 'link', 'cta', 'grid', 'row', 'col', 'card',
     'banner', 'slideover', 'counter', 'celebrate', 'firework', 'fireworks', 'scribe',
     'reveal', 'breathe', 'pulse', 'shake', 'scramble', 'ripple', 'twinkle',
-    'animate', 'ambient', 'list-group',
+    'ticker-tape', 'animate', 'ambient', 'list-group',
 ]);
 
 // Configure marked for safe output
@@ -790,7 +790,7 @@ function processPluginShortcodes(markdown) {
  * Process built-in Effects shortcodes natively.
  * Handles: [counter /], [celebrate /], [firework], [fireworks], [scribe],
  *          [reveal], [breathe], [pulse], [shake], [scramble], [ripple],
- *          [twinkle], [animate], [ambient]
+ *          [twinkle], [ticker-tape], [animate], [ambient]
  *
  * @param {string} markdown
  * @returns {string}
@@ -902,6 +902,20 @@ function processEffectsBlocks(markdown) {
         });
     }
 
+    // [ticker-tape /]            → full-page overlay (mode=page)
+    // [ticker-tape] body [/ticker-tape] → container-scoped (mode=container)
+    apply('ticker-tape', (attrStr, body) => {
+        const attrs = parseShortcodeAttrs(attrStr);
+        const dataAttrs = Object.entries(attrs)
+            .map(([k, v]) => ` data-fx-${k}="${escapeAttr(String(v))}"`)
+            .join('');
+        if (body === null) {
+            return `<div class="dm-fx-ticker-tape" data-fx-mode="page"${dataAttrs}></div>`;
+        }
+        const innerHtml = marked.parse(processCardBlocks(processGridBlocks(body.trim())));
+        return `<div class="dm-fx-ticker-tape" data-fx-mode="container"${dataAttrs}>${innerHtml}</div>\n`;
+    });
+
     apply('animate', (attrStr, body) => {
         if (body === null) return '';
         const attrs = parseShortcodeAttrs(attrStr);
@@ -975,14 +989,18 @@ function processGridBlocks(markdown) {
     /\[col([^\]]*)\]([\s\S]*?)\[\/col\]/gi,
     (_, attrStr, body) => {
       const attrs = parseShortcodeAttrs(attrStr);
-        const cls = attrs.span ? ` class="col-span-${attrs.span}"` : ' class="col"';
+      const COL_INJECTABLE = ['reveal', 'breathe', 'animate', 'ripple'];
+      const injected = extractInjectedEffects(attrs, COL_INJECTABLE);
+      const baseCls = attrs.span ? `col-span-${attrs.span}` : 'col';
+      const allClasses = [baseCls, ...injected.effectClasses].join(' ');
+      const cls = ` class="${allClasses}"`;
       const id = attrs.id ? ` id="${escapeAttr(attrs.id)}"` : '';
       // Restore the col body before passing it downstream — otherwise the
       // scrub placeholders from this processor's store get carried into
       // 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}>${marked.parse(processCardBlocks(restore(body.trim())))}</div>`;
+      return `<div${cls}${id}${injected.effectDataAttrs}>${marked.parse(processCardBlocks(restore(body.trim())))}</div>`;
     }
   );
 
@@ -1102,6 +1120,47 @@ export function escapeAttr(str) {
     .replace(/>/g, '&gt;');
 }
 
+/**
+ * Extract injected-effect flag attributes from a parsed shortcode attrs object.
+ *
+ * For each effect in `allowed` whose flag attribute is present in `attrs`,
+ * emit a `dm-fx-<effect>` class and convert all `<effect>-<attr>` keys to
+ * `data-fx-<attr>="<escaped-value>"` fragments. Returns the consumed keys
+ * so the host processor can skip them when emitting its own attributes.
+ *
+ * The flag attribute is presence-only (parseShortcodeAttrs stores bare flags
+ * as `true`); only prefixed attributes carry a meaningful value.
+ *
+ * @param {Object<string,string>} attrs - parsed shortcode attribute map
+ * @param {string[]} allowed - effect names this host accepts (e.g. ['reveal','pulse'])
+ * @returns {{effectClasses: string[], effectDataAttrs: string, consumedKeys: Set<string>}}
+ */
+export function extractInjectedEffects(attrs, allowed) {
+    const effectClasses = [];
+    const dataAttrParts = [];
+    const consumedKeys = new Set();
+
+    for (const effect of allowed) {
+        if (!(effect in attrs)) continue;
+        effectClasses.push(`dm-fx-${effect}`);
+        consumedKeys.add(effect);
+
+        const prefix = `${effect}-`;
+        for (const key of Object.keys(attrs)) {
+            if (!key.startsWith(prefix)) continue;
+            const param = key.slice(prefix.length);
+            dataAttrParts.push(` data-fx-${param}="${escapeAttr(String(attrs[key]))}"`);
+            consumedKeys.add(key);
+        }
+    }
+
+    return {
+        effectClasses,
+        effectDataAttrs: dataAttrParts.join(''),
+        consumedKeys,
+    };
+}
+
 // ---------------------------------------------------------------------------
 // Card shared helpers
 // ---------------------------------------------------------------------------
@@ -1141,6 +1200,10 @@ function cardVariantClasses(attrs) {
     return classes;
 }
 
+// Effects that may be injected as flag-attributes onto [card] hosts.
+// Used by both cardRoot (LAYOUT_RENDERERS path) and renderLegacyCard (fallback).
+const CARD_INJECTABLE = ['reveal', 'breathe', 'pulse', 'shake', 'twinkle', 'ambient', 'animate', 'ripple'];
+
 /**
  * Builds the opening `<div>` tag for a card root element.
  *
@@ -1149,10 +1212,11 @@ function cardVariantClasses(attrs) {
  * @returns {string}
  */
 function cardRoot(attrs, extraClasses = []) {
-    const classes = [...cardVariantClasses(attrs), ...extraClasses];
+    const injected = extractInjectedEffects(attrs, CARD_INJECTABLE);
+    const classes = [...cardVariantClasses(attrs), ...extraClasses, ...injected.effectClasses];
     const id = attrs.id ? ` id="${escapeAttr(attrs.id)}"` : '';
     const coll = attrs.collapsible === 'true' ? ' data-collapsible="true"' : '';
-    return `<div class="${classes.join(' ')}"${id}${coll}>`;
+    return `<div class="${classes.join(' ')}"${id}${coll}${injected.effectDataAttrs}>`;
 }
 
 /**
@@ -1630,12 +1694,15 @@ function renderLegacyCard(attrs, body, markedInstance, escAttr) {
     const collapsible = attrs.collapsible === 'true';
     const variant = strAttr('variant');
 
+    const injected = extractInjectedEffects(attrs, CARD_INJECTABLE);
+
     // Root class list — delegate to the shared helper so variant="gradient",
     // gradient="<name>", glass/accent/dark/glow, font, shadow, rounded, etc.
     // all work on legacy cards (cards without a `layout` attribute).
     const classes = cardVariantClasses(attrs);
     // Preserve legacy support for variant="primary" (not handled by cardVariantClasses).
     if (variant === 'primary') classes.push('card-primary');
+    classes.push(...injected.effectClasses);
 
     const id = attrs.id ? ` id="${escAttr(attrs.id)}"` : '';
     const coll = collapsible ? ' data-collapsible="true"' : '';
@@ -1692,7 +1759,7 @@ function renderLegacyCard(attrs, body, markedInstance, escAttr) {
         ? `<div class="card-footer">${markedInstance.parse(footerContent)}</div>`
         : footer ? `<div class="card-footer">${footer}</div>` : '';
 
-    return `<div class="${classes.join(' ')}"${coll}${id}>${headerHtml}${bodyHtml}${footerHtml}</div>\n`;
+    return `<div class="${classes.join(' ')}"${coll}${id}${injected.effectDataAttrs}>${headerHtml}${bodyHtml}${footerHtml}</div>\n`;
 }
 
 // ---------------------------------------------------------------------------
@@ -2234,6 +2301,8 @@ function processButtonBlocks(markdown) {
 
     function buildButton(attrStr, inner) {
         const attrs = parseShortcodeAttrs(attrStr || '');
+        const BUTTON_INJECTABLE = ['breathe', 'pulse', 'shake', 'animate', 'ripple'];
+        const injected = extractInjectedEffects(attrs, BUTTON_INJECTABLE);
         const href = attrs.href || '#';
         const label = inner !== null ? inner.trim() : (attrs.label || '');
         const variant = VALID_VARIANTS.has(attrs.variant) ? attrs.variant : 'primary';
@@ -2241,11 +2310,12 @@ function processButtonBlocks(markdown) {
         if (attrs.size === 'sm') classes.push('btn-sm');
         if (attrs.size === 'lg') classes.push('btn-lg');
         if (attrs.class) classes.push(escapeAttr(attrs.class));
+        classes.push(...injected.effectClasses);
         const idAttr = attrs.id ? ` id="${escapeAttr(attrs.id)}"` : '';
         const targetAttr = attrs.target ? ` target="${escapeAttr(attrs.target)}"` : '';
         const icon = attrs.icon ? `<span data-icon="${escapeAttr(attrs.icon)}"></span> ` : '';
         const iconAfter = attrs['icon-after'] ? ` <span data-icon="${escapeAttr(attrs['icon-after'])}"></span>` : '';
-        return `<a href="${escapeAttr(href)}" class="${classes.join(' ')}"${idAttr}${targetAttr}>${icon}${label}${iconAfter}</a>`;
+        return `<a href="${escapeAttr(href)}" class="${classes.join(' ')}"${idAttr}${targetAttr}${injected.effectDataAttrs}>${icon}${label}${iconAfter}</a>`;
     }
 
     let result = scrubbed.replace(/\[button([^\]]*?)\/\]/gi, (_, attrStr) => buildButton(attrStr, null));
@@ -2351,8 +2421,7 @@ function processTableBlocks(markdown) {
  *   fullwidth  - "true" breaks out of the page container to span the full viewport width (adds .hero-breakout).
  *                Must be the literal string "true" — the attribute is otherwise ignored.
  *   twinkle         - Flag attribute — adds particle overlay (requires Effects plugin)
- *   twinkle-count   - Number of twinkle particles
- *   twinkle-colour  - Particle colour (CSS value)
+ *   twinkle-*       - Any prefixed attribute is forwarded as data-fx-* (see extractInjectedEffects)
  *   blobs           - Flag attribute — adds ambient blob background
  *   blobs-type      - Blob animation type (default: "float-blobs")
  *   class      - Extra classes appended to .hero
@@ -2589,9 +2658,11 @@ function processHeroBlocks(markdown) {
         const heroColor = attrs.color ? String(attrs.color) : '';
         const minHeight = attrs['min-height'] ? String(attrs['min-height']) : '';
 
-      const twinkle = 'twinkle' in attrs;
-      const twinkleCount = attrs['twinkle-count'] || '';
-      const twinkleColour = attrs['twinkle-colour'] || '';
+      const HERO_INJECTABLE = ['reveal', 'breathe', 'pulse', 'twinkle', 'ticker-tape', 'ambient', 'animate'];
+      const injected = extractInjectedEffects(attrs, HERO_INJECTABLE);
+
+      // Legacy ad-hoc 'blobs' flag — keep for backward compat. Different keyspace
+      // (bg-ambient-* CSS class), not folded into the generic helper.
       const blobs = 'blobs' in attrs;
       const blobsType = attrs['blobs-type'] || 'float-blobs';
 
@@ -2603,7 +2674,7 @@ function processHeroBlocks(markdown) {
       if (overlay) classes.push(`hero-overlay-${overlay}`);
       if (fullwidth) classes.push('hero-breakout');
       if (cls) classes.push(cls);
-      if (twinkle) classes.push('dm-fx-twinkle');
+      classes.push(...injected.effectClasses);
       if (blobs) classes.push(`bg-ambient-${blobsType}`);
 
       const styleParts = [];
@@ -2616,11 +2687,6 @@ function processHeroBlocks(markdown) {
       const style = styleParts.length ? ` style="${styleParts.join(';')}"` : '';
       const idAttr = id ? ` id="${escapeAttr(id)}"` : '';
 
-      const twinkleAttrs = twinkle
-        ? (twinkleCount ? ` data-fx-count="${escapeAttr(twinkleCount)}"` : '') +
-        (twinkleColour ? ` data-fx-colour="${escapeAttr(twinkleColour)}"` : '')
-        : '';
-
       // 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").
@@ -2634,7 +2700,7 @@ function processHeroBlocks(markdown) {
       if (processedBody) inner += `<div class="hero-body">${marked.parse(processedBody)}</div>`;
       inner += '</div>';
 
-      return `<div class="${classes.join(' ')}"${idAttr}${style}${twinkleAttrs}>${inner}</div>\n`;
+      return `<div class="${classes.join(' ')}"${idAttr}${style}${injected.effectDataAttrs}>${inner}</div>\n`;
     }
   );
   return restore(result);
@@ -2678,6 +2744,8 @@ function processBannerBlocks(markdown) {
         /\[banner([^\]]*)\]([\s\S]*?)\[\/banner\]/gi,
         (_, attrStr, body) => {
             const attrs = parseShortcodeAttrs(attrStr);
+            const BANNER_INJECTABLE = ['reveal', 'pulse', 'shake', 'ambient', 'animate'];
+            const injected = extractInjectedEffects(attrs, BANNER_INJECTABLE);
             const VALID_BANNER_TYPES = new Set(['info', 'success', 'warning', 'danger', 'neutral']);
             const type = VALID_BANNER_TYPES.has(attrs.type) ? attrs.type : 'info';
             const title = attrs.title || '';
@@ -2687,6 +2755,7 @@ function processBannerBlocks(markdown) {
 
             const classes = [`dm-banner`, `dm-banner--${type}`];
             if (extraClass) classes.push(extraClass);
+            classes.push(...injected.effectClasses);
 
             const iconHtml = icon
                 ? `<span class="dm-banner__icon" data-icon="${escapeAttr(icon)}"></span>\n  `
@@ -2700,7 +2769,7 @@ function processBannerBlocks(markdown) {
                 : '';
 
             return (
-                `<div class="${classes.join(' ')}">\n` +
+                `<div class="${classes.join(' ')}"${injected.effectDataAttrs}>\n` +
                 `  ${iconHtml}<div class="dm-banner__body">\n` +
                 `    ${titleHtml}${bodyHtml}` +
                 `  </div>${dismissHtml}\n` +