domma-cms 0.36.19 → 0.38.0

package/server/services/markdown.js

@@ -173,12 +173,77 @@ function formatDate(input, fmt) {
         t => String(tokens[t]()));
 }
 
+/**
+ * Build the `data-ctx` attribute that powers the public-site right-click
+ * search/filter menu (public/js/collection-context.js). The payload carries
+ * ONLY the fields the display actually renders — never the full entry data —
+ * so hidden/allowlisted-away fields can't leak through the attribute.
+ *
+ * @param {Array<{name: string, label?: string}>} fields - displayed fields
+ * @param {object[]} entries - collection entries {id, data}
+ * @returns {string} ` data-ctx="<base64 JSON>"` (leading space included)
+ */
+function buildCtxAttr(fields, entries) {
+    const names = [...new Set(fields.map(f => f?.name).filter(Boolean))];
+    if (!names.length || !entries.length) return '';
+    const payload = {
+        fields: names.map(n => ({name: n, label: fields.find(f => f.name === n)?.label || n})),
+        entries: entries.map(e => ({
+            id: String(e.id ?? ''),
+            data: Object.fromEntries(names.map(n => [n, e.data?.[n] ?? '']))
+        }))
+    };
+    return ` data-ctx="${Buffer.from(JSON.stringify(payload), 'utf8').toString('base64')}"`;
+}
+
+/** Fields referenced by a block template's {{placeholders}} (system keys excluded). */
+function blockTemplateFields(tpl) {
+    const names = new Set();
+    for (const m of String(tpl || '').matchAll(/\{\{\{?([\w]+)/g)) {
+        if (!['_id', '_createdAt', '_updatedAt'].includes(m[1])) names.add(m[1]);
+    }
+    return [...names].map(n => ({name: n, label: n}));
+}
+
 function buildBlockStyleTag(blockName, css) {
     if (!css || !css.trim()) return '';
     const body = String(css).replace(/<\/style/gi, '<\\/style');
     return `<style>[data-block="${escapeAttr(blockName)}"] {\n${body}\n}</style>\n`;
 }
 
+/**
+ * Interpolate a block template against a single collection entry.
+ *
+ * Triple-brace `{{{field}}}` — raw HTML pass-through (no escape). Use for
+ * fields that contain pre-rendered HTML. Must be processed BEFORE double-brace
+ * so the outer `{`/`}` of a triple match aren't consumed by the double-brace
+ * regex. Double-brace `{{field}}` — HTML-escaped (default, safe), with an
+ * optional `:format` suffix (e.g. `{{_createdAt:DD MMM YYYY}}`) that applies
+ * moment-style date formatting when the value parses as a Date.
+ *
+ * @param {string} blockTemplate - Raw HTML template with {{placeholders}}
+ * @param {object} e             - Collection entry { id, data, meta }
+ * @returns {string}
+ */
+function interpolateBlockTemplate(blockTemplate, e) {
+    let html = blockTemplate.replace(/\{\{\{(\w+)\}\}\}/g, (_, key) => {
+        return String(e.data?.[key] ?? '');
+    });
+    html = html.replace(/\{\{([\w_]+)(?::([^{}]+))?\}\}/g, (_, key, fmt) => {
+        let value;
+        if (key === '_id') value = e.id ?? '';
+        else if (key === '_createdAt') value = e.meta?.createdAt ?? '';
+        else if (key === '_updatedAt') value = e.meta?.updatedAt ?? '';
+        else value = e.data?.[key] ?? '';
+        if (fmt) {
+            const formatted = formatDate(value, fmt);
+            if (formatted !== null) return escapeHtmlText(formatted);
+        }
+        return escapeHtmlText(value);
+    });
+    return html;
+}
+
 /**
  * Render collection entries using a reusable HTML block template.
  * Replaces {{fieldName}}, {{_id}}, {{_createdAt}}, {{_updatedAt}} placeholders.
@@ -194,38 +259,16 @@ function renderCollectionBlocks(entries, blockTemplate, emptyMsg, ctaOpts, cols,
         return `<div class="dm-collection-display dm-collection-empty"><p>${escapeHtmlText(emptyMsg)}</p></div>`;
     }
 
-    // Only wrap entries when the block carries CSS — otherwise keep the existing
-    // DOM structure unchanged (backward-compatible for pages using block display
-    // before this feature existed).
+    // Every entry gets a neutral wrapper carrying data-entry-id (needed by the
+    // public right-click filter menu); the data-block attribute — which scopes
+    // the block's CSS — is only added when the block actually carries CSS.
     const hasCss = !!(blockCss && blockCss.trim());
-    const wrapOpen  = hasCss && blockName ? `<div data-block="${escapeAttr(blockName)}">` : '';
-    const wrapClose = hasCss && blockName ? `</div>` : '';
+    const blockAttr = hasCss && blockName ? ` data-block="${escapeAttr(blockName)}"` : '';
 
     const items = entries.map(e => {
-        // Triple-brace `{{{field}}}` — raw HTML pass-through (no escape).
-        // Use for fields that contain pre-rendered HTML (bullet lists, code
-        // blocks, embedded elements). Must be processed BEFORE double-brace
-        // so the outer `{` and `}` of a triple match aren't consumed by the
-        // double-brace regex.
-        let html = blockTemplate.replace(/\{\{\{(\w+)\}\}\}/g, (_, key) => {
-            return String(e.data?.[key] ?? '');
-        });
-        // Double-brace `{{field}}` — HTML-escaped (default, safe).
-        // Optional `:format` suffix (e.g. `{{_createdAt:DD MMM YYYY}}`) applies
-        // moment-style date formatting when the value parses as a Date; any
-        // field that doesn't parse falls back to its raw value.
-        html = html.replace(/\{\{([\w_]+)(?::([^{}]+))?\}\}/g, (_, key, fmt) => {
-            let value;
-            if (key === '_id') value = e.id ?? '';
-            else if (key === '_createdAt') value = e.meta?.createdAt ?? '';
-            else if (key === '_updatedAt') value = e.meta?.updatedAt ?? '';
-            else value = e.data?.[key] ?? '';
-            if (fmt) {
-                const formatted = formatDate(value, fmt);
-                if (formatted !== null) return escapeHtmlText(formatted);
-            }
-            return escapeHtmlText(value);
-        });
+        const wrapOpen  = `<div${blockAttr} data-entry-id="${escapeAttr(String(e.id ?? ''))}">`;
+        const wrapClose = `</div>`;
+        let html = interpolateBlockTemplate(blockTemplate, e);
 
         if (ctaOpts) {
             const ctaStyle = escapeAttr(ctaOpts.style || 'primary');
@@ -243,8 +286,9 @@ function renderCollectionBlocks(entries, blockTemplate, emptyMsg, ctaOpts, cols,
         ? `dm-collection-display dm-collection-blocks grid ${responsiveGridCols(validCols).join(' ')} gap-4`
         : 'dm-collection-display dm-collection-blocks';
 
+    const ctx = buildCtxAttr(blockTemplateFields(blockTemplate), entries);
     const styleTag = buildBlockStyleTag(blockName, blockCss);
-    return `${styleTag}<div class="${wrapperClass}">\n${items.join('\n')}\n</div>`;
+    return `${styleTag}<div class="${wrapperClass}"${ctx}>\n${items.join('\n')}\n</div>`;
 }
 
 function renderBlockFromAttrs(tmpl, attrs, blockName = '') {
@@ -459,9 +503,9 @@ function renderCollectionCards(entries, visibleFields, titleField, columns, empt
             const iconHtml = ctaOpts.icon ? `<span data-icon="${escapeAttr(ctaOpts.icon)}"></span> ` : '';
             footer = `<div class="card-footer"><button class="${btnCls}" ${btnData}>${iconHtml}${escapeHtmlText(ctaOpts.label || 'Run')}</button></div>`;
         }
-        return `<div class="card">${title ? `<div class="card-header">${title}</div>` : ''}<div class="card-body">${body || '&nbsp;'}</div>${footer}</div>`;
+        return `<div class="card" data-entry-id="${escapeAttr(String(e.id ?? ''))}">${title ? `<div class="card-header">${title}</div>` : ''}<div class="card-body">${body || '&nbsp;'}</div>${footer}</div>`;
     }).join('\n');
-    return `<div class="dm-collection-display grid ${responsiveGridCols(cols).join(' ')} gap-4">\n${cards}\n</div>`;
+    return `<div class="dm-collection-display grid ${responsiveGridCols(cols).join(' ')} gap-4"${buildCtxAttr(visibleFields, entries)}>\n${cards}\n</div>`;
 }
 
 function renderCollectionList(entries, visibleFields, titleField, emptyMsg, ctaOpts) {
@@ -486,9 +530,9 @@ function renderCollectionList(entries, visibleFields, titleField, emptyMsg, ctaO
             const iconHtml = ctaOpts.icon ? `<span data-icon="${escapeAttr(ctaOpts.icon)}"></span> ` : '';
             ctaHtml = `<button class="${btnCls}" ${btnData}>${iconHtml}${escapeHtmlText(ctaOpts.label || 'Run')}</button>`;
         }
-        return `<div class="dm-collection-list-item">${title ? `<strong>${title}</strong>` : ''}${rest}${ctaHtml}</div>`;
+        return `<div class="dm-collection-list-item" data-entry-id="${escapeAttr(String(e.id ?? ''))}">${title ? `<strong>${title}</strong>` : ''}${rest}${ctaHtml}</div>`;
     }).join('\n');
-    return `<div class="dm-collection-display dm-collection-list">\n${items}\n</div>`;
+    return `<div class="dm-collection-display dm-collection-list"${buildCtxAttr(visibleFields, entries)}>\n${items}\n</div>`;
 }
 
 /**
@@ -511,7 +555,7 @@ function renderCollectionAccordion(entries, titleField, bodyField, multiple, emp
         const bodyVal = String(e.data?.[bodyField] ?? '');
         const bodyHtml = marked.parse(bodyVal);
         return (
-            `<div class="accordion-item">\n` +
+            `<div class="accordion-item" data-entry-id="${escapeAttr(String(e.id ?? ''))}">\n` +
             `  <h3 class="accordion-header"><button class="accordion-button" type="button">${title}` +
             `<span class="accordion-icon" data-icon="chevron-down"></span></button></h3>\n` +
             `  <div class="accordion-body"><div class="accordion-content">${bodyHtml}</div></div>\n` +
@@ -519,7 +563,8 @@ function renderCollectionAccordion(entries, titleField, bodyField, multiple, emp
         );
     }).join('\n');
 
-    return `<div class="dm-collection-display accordion"${multiAttr}>\n${items}\n</div>`;
+    const ctx = buildCtxAttr([{name: titleField}, {name: bodyField}], entries);
+    return `<div class="dm-collection-display accordion"${multiAttr}${ctx}>\n${items}\n</div>`;
 }
 
 /**
@@ -553,10 +598,167 @@ function renderCollectionTimeline(entries, opts) {
         const bodyHtml = bodyField
             ? marked.parse(String(e.data?.[bodyField] ?? ''))
             : '';
-        return `<div class="dm-progression-item"${date}${status}${icon}><div class="dm-progression-item-title">${title}</div><div class="dm-progression-item-body">${bodyHtml}</div></div>`;
+        return `<div class="dm-progression-item" data-entry-id="${escapeAttr(String(e.id ?? ''))}"${date}${status}${icon}><div class="dm-progression-item-title">${title}</div><div class="dm-progression-item-body">${bodyHtml}</div></div>`;
+    }).join('\n');
+
+    const ctx = buildCtxAttr(
+        [{name: titleField}, {name: dateField}, {name: statusField}, {name: bodyField}].filter(f => f.name),
+        entries
+    );
+    return `<div class="dm-collection-display dm-progression" data-layout="${layout}" data-theme="${theme}" data-mode="${mode}"${ctx}>\n${items}\n</div>`;
+}
+
+/**
+ * Render a collection as a Domma carousel — one slide per entry.
+ * Output mirrors processCarouselBlocks so site.js's `.carousel` auto-init
+ * (Domma.elements.carousel) picks it up unchanged.
+ *
+ * Per-slide content comes either from a block template (opts.blockTemplate,
+ * interpolated per entry like display="block") or from image/title/body
+ * fields rendered in the standard carousel-slide structure.
+ *
+ * @param {object[]} entries
+ * @param {object} opts
+ * @param {string} [opts.imageField]    - field holding the slide image URL
+ * @param {string} [opts.titleField]    - field for the slide title
+ * @param {string} [opts.bodyField]     - Markdown body field
+ * @param {string} [opts.blockTemplate] - optional block template (wins over fields)
+ * @param {string} [opts.blockName]
+ * @param {string} [opts.blockCss]
+ * @param {object} [opts.dataAttrs]     - autoplay/interval/loop/animation passthrough
+ * @param {string} opts.emptyMsg
+ * @returns {string}
+ */
+function renderCollectionCarousel(entries, opts) {
+    const {imageField, titleField, bodyField, blockTemplate, blockName, blockCss, dataAttrs = {}, emptyMsg} = opts;
+    if (!entries.length) {
+        return `<div class="dm-collection-display dm-collection-empty"><p>${escapeHtmlText(emptyMsg)}</p></div>`;
+    }
+
+    const passthrough = ['autoplay', 'interval', 'loop', 'animation', 'animation-duration', 'animation-easing']
+        .map(k => dataAttrs[k] ? ` data-${k}="${escapeAttr(String(dataAttrs[k]))}"` : '')
+        .join('');
+
+    const hasCss = !!(blockCss && blockCss.trim());
+    const slides = entries.map(e => {
+        let inner = '';
+        if (blockTemplate) {
+            const html = interpolateBlockTemplate(blockTemplate, e);
+            inner = hasCss && blockName ? `<div data-block="${escapeAttr(blockName)}">${html}</div>` : html;
+        } else {
+            const img = imageField && e.data?.[imageField]
+                ? `<img src="${escapeAttr(String(e.data[imageField]))}" alt="${escapeAttr(String(e.data?.[titleField] ?? ''))}">\n`
+                : '';
+            const title = titleField && e.data?.[titleField] != null
+                ? `<h2 class="carousel-slide-title">${escapeHtmlText(String(e.data[titleField]))}</h2>`
+                : '';
+            const bodyHtml = bodyField && e.data?.[bodyField] != null
+                ? `<div class="carousel-slide-description">${marked.parse(String(e.data[bodyField]))}</div>`
+                : '';
+            inner = img + (title || bodyHtml ? `<div class="carousel-slide-content">${title}${bodyHtml}</div>` : '');
+        }
+        return `<div class="carousel-slide" data-entry-id="${escapeAttr(String(e.id ?? ''))}">${inner}</div>`;
+    }).join('\n');
+
+    const ctxFields = blockTemplate
+        ? blockTemplateFields(blockTemplate)
+        : [{name: titleField}, {name: bodyField}].filter(f => f.name);
+    const ctx = buildCtxAttr(ctxFields, entries);
+    const styleTag = blockTemplate ? buildBlockStyleTag(blockName, blockCss) : '';
+    return `${styleTag}<div class="dm-collection-display carousel"${passthrough}${ctx}><div class="carousel-track">${slides}</div></div>`;
+}
+
+/**
+ * Render a collection as a Domma list group — one item per entry.
+ * Output mirrors processListGroupBlocks (pure CSS component, no JS init).
+ *
+ * Per-item content comes either from a block template (interpolated per
+ * entry) or from title/body fields.
+ *
+ * @param {object[]} entries
+ * @param {object} opts
+ * @param {string} [opts.titleField]    - field for the item's leading text
+ * @param {string} [opts.bodyField]     - inline-Markdown body field
+ * @param {string} [opts.variant]       - flush | numbered | horizontal
+ * @param {string} [opts.size]          - sm | lg
+ * @param {string} [opts.itemVariant]   - primary | secondary | success | danger | warning | info
+ * @param {boolean} [opts.action]       - add .list-group-item-action per item
+ * @param {string} [opts.blockTemplate] - optional block template (wins over fields)
+ * @param {string} [opts.blockName]
+ * @param {string} [opts.blockCss]
+ * @param {string} opts.emptyMsg
+ * @returns {string}
+ */
+/** Standard "block template not found" fragment. */
+function blockNotFoundHtml(blockName) {
+    return `<div class="dm-collection-display dm-collection-empty"><p>Block template &ldquo;${escapeHtmlText(blockName || '')}&rdquo; not found.</p></div>`;
+}
+
+/**
+ * Load a block's template + CSS when a block attr is present.
+ * Returns {tpl: '', css: '', missing: false} when no block was requested,
+ * and {missing: true} when the named block can't be loaded — callers show
+ * blockNotFoundHtml() rather than silently falling back to field rendering.
+ *
+ * @param {string} [blockName]
+ * @returns {Promise<{tpl: string, css: string, missing: boolean}>}
+ */
+async function loadOptionalBlockAssets(blockName) {
+    if (!blockName) return {tpl: '', css: '', missing: false};
+    try {
+        const [tpl, css] = await Promise.all([
+            loadBlockTemplate(blockName),
+            loadBlockCss(blockName),
+        ]);
+        return {tpl, css, missing: false};
+    } catch {
+        return {tpl: '', css: '', missing: true};
+    }
+}
+
+function renderCollectionListgroup(entries, opts) {
+    const {titleField, bodyField, variant, size, itemVariant, action, blockTemplate, blockName, blockCss, emptyMsg} = opts;
+    if (!entries.length) {
+        return `<div class="dm-collection-display dm-collection-empty"><p>${escapeHtmlText(emptyMsg)}</p></div>`;
+    }
+
+    const variantMap = {flush: 'list-group-flush', numbered: 'list-group-numbered', horizontal: 'list-group-horizontal'};
+    const sizeMap = {sm: 'list-group-sm', lg: 'list-group-lg'};
+    const wrapperClasses = ['dm-collection-display', 'list-group'];
+    if (variantMap[variant]) wrapperClasses.push(variantMap[variant]);
+    if (sizeMap[size]) wrapperClasses.push(sizeMap[size]);
+
+    const itemClasses = ['list-group-item'];
+    if (action) itemClasses.push('list-group-item-action');
+    if (itemVariant && /^(primary|secondary|success|danger|warning|info)$/.test(itemVariant)) {
+        itemClasses.push(`list-group-item-${itemVariant}`);
+    }
+    const itemClassStr = itemClasses.join(' ');
+
+    const hasCss = !!(blockCss && blockCss.trim());
+    const items = entries.map(e => {
+        let inner;
+        if (blockTemplate) {
+            const html = interpolateBlockTemplate(blockTemplate, e);
+            inner = hasCss && blockName ? `<div data-block="${escapeAttr(blockName)}">${html}</div>` : html;
+        } else {
+            const title = titleField && e.data?.[titleField] != null
+                ? `<strong>${escapeHtmlText(String(e.data[titleField]))}</strong>`
+                : '';
+            const body = bodyField && e.data?.[bodyField] != null
+                ? `${title ? ' ' : ''}${marked.parseInline(String(e.data[bodyField]))}`
+                : '';
+            inner = (title + body) || escapeHtmlText(String(e.id ?? ''));
+        }
+        return `<div class="${itemClassStr}" data-entry-id="${escapeAttr(String(e.id ?? ''))}">${inner}</div>`;
     }).join('\n');
 
-    return `<div class="dm-collection-display dm-progression" data-layout="${layout}" data-theme="${theme}" data-mode="${mode}">\n${items}\n</div>`;
+    const ctxFields = blockTemplate
+        ? blockTemplateFields(blockTemplate)
+        : [{name: titleField}, {name: bodyField}].filter(f => f.name);
+    const ctx = buildCtxAttr(ctxFields, entries);
+    const styleTag = blockTemplate ? buildBlockStyleTag(blockName, blockCss) : '';
+    return `${styleTag}<div class="${wrapperClasses.join(' ')}"${ctx}>\n${items}\n</div>`;
 }
 
 /**
@@ -661,6 +863,36 @@ async function processViewBlocks(markdown, tagSet) {
                     mode:   timelineMode,
                     emptyMsg,
                 });
+            } else if (display === 'carousel') {
+                const {tpl, css, missing} = await loadOptionalBlockAssets(attrs.block);
+                replacement = missing
+                    ? blockNotFoundHtml(attrs.block)
+                    : renderCollectionCarousel(entries, {
+                        imageField: attrs['image-field'] || '',
+                        titleField: attrs['title-field'] || 'title',
+                        bodyField:  attrs['body-field']  || '',
+                        blockTemplate: tpl,
+                        blockName: attrs.block || '',
+                        blockCss: css,
+                        dataAttrs: attrs,
+                        emptyMsg,
+                    });
+            } else if (display === 'listgroup') {
+                const {tpl, css, missing} = await loadOptionalBlockAssets(attrs.block);
+                replacement = missing
+                    ? blockNotFoundHtml(attrs.block)
+                    : renderCollectionListgroup(entries, {
+                        titleField: attrs['title-field'] || 'title',
+                        bodyField:  attrs['body-field']  || '',
+                        variant:     attrs.variant || '',
+                        size:        attrs.size || '',
+                        itemVariant: attrs.itemvariant || '',
+                        action:      attrs.action === 'true',
+                        blockTemplate: tpl,
+                        blockName: attrs.block || '',
+                        blockCss: css,
+                        emptyMsg,
+                    });
             } else if (display === 'block') {
                 const blockName = attrs.block || viewConfig?.display?.block || '';
                 if (blockName) {
@@ -671,7 +903,7 @@ async function processViewBlocks(markdown, tagSet) {
                         ]);
                         replacement = renderCollectionBlocks(entries, tpl, emptyMsg, ctaOpts, '', blockName, css);
                     } catch {
-                        replacement = `<div class="dm-collection-display dm-collection-empty"><p>Block template &ldquo;${escapeHtmlText(blockName)}&rdquo; not found.</p></div>`;
+                        replacement = blockNotFoundHtml(blockName);
                     }
                 }
             } else {
@@ -1118,6 +1350,36 @@ export async function renderCollectionFragment(attrs, { extraFilter = null } = {
                 mode:   timelineMode,
                 emptyMsg,
             });
+        } else if (display === 'carousel') {
+            const {tpl, css, missing} = await loadOptionalBlockAssets(attrs.block);
+            replacement = missing
+                ? blockNotFoundHtml(attrs.block)
+                : renderCollectionCarousel(entries, {
+                    imageField: attrs['image-field'] || '',
+                    titleField: attrs['title-field'] || 'title',
+                    bodyField:  attrs['body-field']  || '',
+                    blockTemplate: tpl,
+                    blockName: attrs.block || '',
+                    blockCss: css,
+                    dataAttrs: attrs,
+                    emptyMsg,
+                });
+        } else if (display === 'listgroup') {
+            const {tpl, css, missing} = await loadOptionalBlockAssets(attrs.block);
+            replacement = missing
+                ? blockNotFoundHtml(attrs.block)
+                : renderCollectionListgroup(entries, {
+                    titleField: attrs['title-field'] || 'title',
+                    bodyField:  attrs['body-field']  || '',
+                    variant:     attrs.variant || '',
+                    size:        attrs.size || '',
+                    itemVariant: attrs.itemvariant || '',
+                    action:      attrs.action === 'true',
+                    blockTemplate: tpl,
+                    blockName: attrs.block || '',
+                    blockCss: css,
+                    emptyMsg,
+                });
         } else if (display === 'block') {
             const blockName = attrs.block || '';
             if (blockName) {
@@ -1129,7 +1391,7 @@ export async function renderCollectionFragment(attrs, { extraFilter = null } = {
                     const cols = attrs.cols || '';
                     replacement = renderCollectionBlocks(entries, tpl, emptyMsg, ctaOpts, cols, blockName, css);
                 } catch {
-                    replacement = `<div class="dm-collection-display dm-collection-empty"><p>Block template &ldquo;${escapeHtmlText(blockName)}&rdquo; not found.</p></div>`;
+                    replacement = blockNotFoundHtml(blockName);
                 }
             }
         } else {

package/server/templates/page.html

@@ -116,7 +116,8 @@
     </script>
 
     <!-- Site initialisation -->
-    <script src="/public/js/site.js?v=20260524-formerror" type="module"></script>
+    <script src="/public/js/site.js?v=20260722-collection-ctx" type="module"></script>
+    <script src="/public/js/collection-context.js?v=20260722-collection-ctx" defer></script>
 
     <!-- Interactive Collection Browser (used by [collection] shortcodes with
          searchable / filterable / sortable / paginate attributes) -->
@@ -124,7 +125,7 @@
 
     <!-- Core Forms (logic engine must load before renderer) -->
     <script src="/public/js/form-logic-engine.js?v=20260704-chooser-events"></script>
-    <script src="/public/js/forms.js?v=20260509-chooser" type="module"></script>
+    <script src="/public/js/forms.js?v=20260722-pickers" type="module"></script>
 
     <!-- Core effects runtime -->
     <script src="/public/js/effects.js"></script>