domma-cms 0.54.2 → 0.66.0

package/server/services/markdown.js

@@ -97,12 +97,44 @@ function buildShortcodeFilter(attrs) {
  * Load a block template by name from content/blocks/{name}.html.
  * Throws if the file does not exist.
  *
+ * The template's HTML comments are DROPPED here, before anything looks at it.
+ * Every block ships with a header comment documenting its parameters and
+ * showing an example call - documentation for whoever opens the file, which
+ * has no business on a public page and, worse, is still live markup by the
+ * time the shortcode processor sees it.
+ *
+ * `plugin-card` is what that costs: its example reads
+ * `[collection slug="plugins" display="block" block="plugin-card" …]` with no
+ * `/]`, so the processor took it for an unclosed tag and swallowed the rest of
+ * the render. Four plugin cards came out as one empty `<div>`, and the block's
+ * stylesheet came out as prose. The card that renders documentation for itself
+ * is not a rare shape - every bundled block has that comment - so this is
+ * fixed at the load point rather than in one template.
+ *
  * @param {string} blockName
  * @returns {Promise<string>}
  */
 async function loadBlockTemplate(blockName) {
     const safe = path.basename(blockName).replace(/[^a-z0-9-]/g, '');
-    return readFile(path.join(BLOCKS_DIR, `${safe}.html`), 'utf8');
+    const raw = await readFile(path.join(BLOCKS_DIR, `${safe}.html`), 'utf8');
+    return stripTemplateComments(raw);
+}
+
+/**
+ * Remove HTML comments from a block template.
+ *
+ * Unterminated (`<!--` with no `-->`) is treated as comment-to-end: a truncated
+ * comment leaking its remainder onto the page is the failure this exists to
+ * prevent, so the safe reading is that everything after it was meant to be one.
+ *
+ * @param {string} tpl
+ * @returns {string}
+ */
+export function stripTemplateComments(tpl) {
+    return String(tpl || '')
+        .replace(/<!--[\s\S]*?-->/g, '')
+        .replace(/<!--[\s\S]*$/, '')
+        .trim();
 }
 
 /**
@@ -258,9 +290,23 @@ function blockTemplateFields(tpl) {
     return [...names].map(n => ({name: n, label: n}));
 }
 
-function buildBlockStyleTag(blockName, css) {
+/**
+ * Wrap a block's CSS in a `<style>` scoped to that block.
+ *
+ * BLANK LINES ARE REMOVED, and that is the whole of the second bug here. A
+ * block rendered inside another shortcode's wrapper - `[reveal]`, a `[col]`,
+ * anything - arrives mid-HTML-block as far as Markdown is concerned, and a
+ * blank line ENDS an HTML block: everything after the first one in the
+ * stylesheet came back wrapped in `<p>` and was printed on the page as text.
+ * Readable CSS is not worth a stylesheet in the body copy, so the blank lines
+ * go and the line breaks stay.
+ */
+export function buildBlockStyleTag(blockName, css) {
     if (!css || !css.trim()) return '';
-    const body = String(css).replace(/<\/style/gi, '<\\/style');
+    const body = String(css)
+        .replace(/<\/style/gi, '<\\/style')
+        .replace(/\n\s*\n+/g, '\n')
+        .trim();
     return `<style>[data-block="${escapeAttr(blockName)}"] {\n${body}\n}</style>\n`;
 }
 
@@ -1940,8 +1986,14 @@ export async function refreshComponentTagAllowlist() {
 export function collectAndRewriteComponents(source) {
     const used = new Set();
 
+    // Scrub first: a `[component …/]` or a `<dm-x>` tag written inside a fenced
+    // block is documentation showing the syntax, not a component to mount.
+    // Rewriting it turns the example into the thing it was explaining, and
+    // counting it pulls that component's script onto a page that never uses it.
+    const {scrubbed, restore} = scrubCodeRegions(source);
+
     // Rewrite shortcode form → raw tag form.
-    const rewritten = source.replace(
+    const rewritten = scrubbed.replace(
         /\[component\s+([^\]]+?)\s*\/?\]/g,
         (_, attrs) => {
             const nameMatch = attrs.match(/name\s*=\s*["']([a-z][a-z0-9-]*)["']/);
@@ -1957,7 +2009,7 @@ export function collectAndRewriteComponents(source) {
         used.add(m[1]);
     }
 
-    return {output: rewritten, used};
+    return {output: restore(rewritten), used};
 }
 
 export function escapeAttr(str) {
@@ -3652,7 +3704,12 @@ async function processFormBlocks(markdown, tagSet) {
       const raw = await readFile(filePath, 'utf8');
       const form = JSON.parse(raw);
       await expandReferenceFields(form);
-      const encoded = Buffer.from(JSON.stringify(form)).toString('base64');
+      // `actions` holds the notification email recipients and the webhook URL.
+      // The embed is base64 in the page source, which is not a secret keeping
+      // measure, so strip them exactly as GET /forms/:slug/public does - the
+      // browser never reads them, the submit route resolves them server-side.
+      const {actions: _actions, ...publicForm} = form;
+      const encoded = Buffer.from(JSON.stringify(publicForm)).toString('base64');
         const extraClass = attrs.class ? ` ${escapeAttr(attrs.class)}` : '';
         const idAttr = attrs.id ? ` id="${escapeAttr(attrs.id)}"` : '';
         replacement = `<div class="cms-form-embed${extraClass}" data-form-inline="${escapeAttr(encoded)}"${idAttr}></div>`;
@@ -3868,11 +3925,15 @@ function processSlideoverBlocks(markdown) {
  * @returns {Promise<string>}
  */
 async function processMenuBlocks(markdown, user, ctx = {}) {
+    // Scrub first, or a `[menu …/]` written inside a fenced block as an example
+    // of the syntax is rendered into a real nav and then escaped into the code
+    // block - the docs page shows the output instead of the shortcode.
+    const {scrubbed, restore} = scrubCodeRegions(markdown);
     const re = /\[menu(\s+[^\]]*?)?\s*\/\]/gi;
-    const matches = [...markdown.matchAll(re)];
+    const matches = [...scrubbed.matchAll(re)];
     if (!matches.length) return markdown;
 
-    let out = markdown;
+    let out = scrubbed;
     for (const m of matches) {
         const attrs = parseShortcodeAttrs(m[1] || '');
         // A bare `slug` / `location` with no value parses as the boolean `true`
@@ -3925,7 +3986,7 @@ async function processMenuBlocks(markdown, user, ctx = {}) {
         });
         out = out.replace(m[0], html);
     }
-    return out;
+    return restore(out);
 }
 
 /** Visible diagnostic for an unusable [menu] shortcode - mirrors [form]'s. */

package/server/services/menuRender.js

@@ -14,7 +14,7 @@ import {colourToCss, floatToCss, floatBehaviour, spacerSize} from './menus.js';
 // Highlight helpers live once, in the browser module, and are imported here -
 // the same shared-module arrangement collection-export.mjs has with
 // collections.js. Nothing in them touches the DOM.
-import {highlightAttrs, isCurrentItem} from '../../public/js/menu-decor.mjs';
+import {highlightAttrs, itemHighlightAttrs, isCurrentItem, menuAlign} from '../../public/js/menu-decor.mjs';
 
 /** Attribute-safe escaping - mirrors escapeAttr in markdown.js. */
 function esc(str) {
@@ -57,9 +57,26 @@ export function renderMenuItemsAsUl(items, currentPath = '') {
         const current   = isCurrentItem(it.url, currentPath);
         const classAttr = current ? ' class="is-active" aria-current="page"' : '';
 
+        // Per-item highlight override. `data-menu-item-*` rather than the
+        // menu's `data-menu-*` so the CSS can let the item win without the two
+        // rules colliding on specificity - see the note in menu-highlight.css.
+        // The sanitiser allows `data-*` and `style` on every tag, so both
+        // survive the `[menu]` shortcode's trip through sanitize-html.
+        const ihl      = itemHighlightAttrs(it);
+        const ihlAttrs = [
+            ihl.hover  && ` data-menu-item-hover="${esc(ihl.hover)}"`,
+            ihl.active && ` data-menu-item-active="${esc(ihl.active)}"`
+        ].filter(Boolean).join('');
+
         // Colour override (the server sanitiser allows inline style on <a>).
+        // The item's accent rides in the same style attribute: it inherits, so
+        // it shadows the container's `--dm-menu-highlight` for this item alone.
         const colourCss = it.colour ? colourToCss(it.colour) : '';
-        const styleAttr = colourCss ? ` style="color:${colourCss}"` : '';
+        const styleCss  = [
+            colourCss  && `color:${colourCss}`,
+            ihl.accent && `--dm-menu-highlight:${ihl.accent}`
+        ].filter(Boolean).join(';');
+        const styleAttr = styleCss ? ` style="${esc(styleCss)}"` : '';
 
         // Badge - static text, or a count stamped on by resolveMenuDecorations.
         let badge = '';
@@ -69,7 +86,7 @@ export function renderMenuItemsAsUl(items, currentPath = '') {
             badge = `<span class="dm-menu-badge"${badgeStyle}>${esc(String(it.badge.text))}</span>`;
         }
 
-        return `<li><a href="${href}"${classAttr}${styleAttr}>${text}${badge}</a>${child}</li>`;
+        return `<li><a href="${href}"${classAttr}${styleAttr}${ihlAttrs}>${text}${badge}</a>${child}</li>`;
     }).join('');
     return `<ul>${lis}</ul>`;
 }
@@ -99,6 +116,13 @@ export function buildMenuNav(menu, items, opts = {}) {
         : (['horizontal', 'vertical'].includes(menu.orientation) ? menu.orientation : null);
     const orientClass = orientation ? ` dm-menu--${orientation}` : '';
 
+    // Alignment only has anywhere to go in a horizontal layout - a vertical
+    // list is as wide as its box. Unlike the navbar, an unset value emits no
+    // class: a `[menu]` in the page body has always packed left and a silent
+    // change of that on upgrade is not wanted.
+    const align      = orientation === 'horizontal' ? menuAlign(menu) : '';
+    const alignClass = align ? ` dm-menu--align-${align}` : '';
+
     const floatCss   = opts.noFloat ? '' : floatToCss(menu);
     const floatClass = floatCss ? ' dm-menu-floating' : '';
     const floatAnchorAttr = floatCss
@@ -134,7 +158,7 @@ export function buildMenuNav(menu, items, opts = {}) {
         ? ` style="${esc([floatCss, hlStyle].filter(Boolean).join(';'))}"`
         : '';
 
-    return `<nav class="dm-menu dm-menu--${esc(menu.slug)}${orientClass}${variantClass}${floatClass}${collapsedClass}${flexClass}${klass}"`
+    return `<nav class="dm-menu dm-menu--${esc(menu.slug)}${orientClass}${alignClass}${variantClass}${floatClass}${collapsedClass}${flexClass}${klass}"`
         + ` data-menu="${esc(menu.slug)}"${styleAttr}${floatAnchorAttr}${behAttrs}${hlAttrs}>`
         + buildFloatChrome(menu, beh)
         + renderMenuItemsAsUl(items, opts.currentPath || '')

package/server/services/menus.js

@@ -17,7 +17,7 @@ import * as cache from './cache/index.js';
 // The highlight vocabularies are defined once, in the browser module, and
 // imported here so validation and the renderer can never drift apart.
 import {
-    HIGHLIGHT_HOVER, HIGHLIGHT_ACTIVE,
+    HIGHLIGHT_HOVER, HIGHLIGHT_ACTIVE, MENU_ALIGN,
     LEGACY_STYLE_HOVER, LEGACY_STYLE_ACTIVE, legacyStyleHighlight,
     PRESET_COLOUR_VARS, PRESET_COLOUR_FALLBACKS, colourToCss
 } from '../../public/js/menu-decor.mjs';
@@ -437,6 +437,7 @@ export async function createMenu(input) {
         ...(input.variant  != null && {variant:  input.variant}),
         ...(input.position != null && {position: input.position}),
         ...(input.orientation != null && {orientation: input.orientation}),
+        ...(input.align    != null && {align:    input.align}),
         ...(input.side     != null && {side:     input.side}),
         ...(input.appearOnHover != null && {appearOnHover: !!input.appearOnHover}),
         ...(input.float    != null && {float:    input.float}),
@@ -481,6 +482,7 @@ export async function updateMenu(slug, input) {
         ...(input.variant  != null && {variant:  input.variant}),
         ...(input.position != null && {position: input.position}),
         ...(input.orientation != null && {orientation: input.orientation}),
+        ...(input.align    != null && {align:    input.align}),
         ...(input.side     != null && {side:     input.side}),
         ...(input.appearOnHover != null && {appearOnHover: !!input.appearOnHover}),
         ...(input.float    != null && {float:    input.float}),
@@ -677,6 +679,9 @@ export function validateMenu(menu) {
             }
         }
     }
+    if (menu.align != null && menu.align !== '' && !MENU_ALIGN.includes(menu.align)) {
+        errors.push(`align must be one of: ${MENU_ALIGN.join(', ')}`);
+    }
     if (menu.highlight != null) {
         if (typeof menu.highlight !== 'object' || Array.isArray(menu.highlight)) {
             errors.push('highlight must be an object');
@@ -760,6 +765,25 @@ export function validateMenu(menu) {
             if (item.colour != null && !isValidColour(item.colour)) {
                 errors.push(`Item ${path}: colour must be a preset key or #rrggbb`);
             }
+            // Per-item highlight override. Same shape and same value sets as
+            // the menu-level `highlight` block validated above - an item that
+            // omits a half falls through to the menu's choice for that half.
+            if (item.highlight != null) {
+                if (typeof item.highlight !== 'object' || Array.isArray(item.highlight)) {
+                    errors.push(`Item ${path}: highlight must be an object`);
+                } else {
+                    const {hover, active, accent} = item.highlight;
+                    if (hover != null && hover !== '' && !HIGHLIGHT_HOVER.includes(hover)) {
+                        errors.push(`Item ${path}: highlight.hover must be one of: ${HIGHLIGHT_HOVER.join(', ')}`);
+                    }
+                    if (active != null && active !== '' && !HIGHLIGHT_ACTIVE.includes(active)) {
+                        errors.push(`Item ${path}: highlight.active must be one of: ${HIGHLIGHT_ACTIVE.join(', ')}`);
+                    }
+                    if (accent != null && accent !== '' && !isValidColour(accent)) {
+                        errors.push(`Item ${path}: highlight.accent must be a preset key or #rrggbb`);
+                    }
+                }
+            }
         });
     }
     return errors;

package/server/services/permissionRegistry.js

@@ -87,6 +87,19 @@ export const REGISTRY = [
             {key: 'delete', label: 'Delete', description: 'Delete menus'}
         ]
     },
+    {
+        key: 'context-menus',
+        label: 'Context Menus',
+        description: 'Author right-click menus and the regions they bind to.',
+        icon: 'menu',
+        group: 'Structure',
+        actions: [
+            {key: 'read',   label: 'View',   description: 'View context menus'},
+            {key: 'create', label: 'Create', description: 'Create new context menus'},
+            {key: 'update', label: 'Edit',   description: 'Edit context menus'},
+            {key: 'delete', label: 'Delete', description: 'Delete context menus'}
+        ]
+    },
     {
         key: 'projects',
         label: 'Projects',
@@ -165,6 +178,17 @@ export const REGISTRY = [
             {key: 'delete', label: 'Delete', description: 'Delete users'}
         ]
     },
+    {
+        key: 'theme',
+        label: 'Theme',
+        description: 'Choose the site and admin themes, fonts, and per-element theme overrides.',
+        icon: 'droplet',
+        group: 'Configuration',
+        actions: [
+            {key: 'read', label: 'View', description: 'View theme settings and overrides'},
+            {key: 'update', label: 'Edit', description: 'Change themes, fonts and overrides'}
+        ]
+    },
     {
         key: 'settings',
         label: 'Settings',

package/server/services/pluginFiles.js

@@ -7,8 +7,16 @@
  * valid names), paths are normalised and containment-checked after symlink
  * resolution, and only known text extensions are editable.
  *
- * Thrown errors carry `statusCode` (400 invalid, 404 missing, 413 too large)
- * for direct mapping in the route layer.
+ * A plugin marked `"closedSource": true` in its manifest is refused - licensed
+ * code is distributed to a site so it can RUN there, not so it can be read out
+ * of it, and the editor was handing over the server source in full. The one
+ * exception is a SUPER-ADMIN (role level 0), which on the fleet exists only on
+ * the manager: the people who publish the paid plugins are the people who need
+ * to read and edit them. Customer sites are all level 1, so nothing changes
+ * there - see the `allowLicensed` argument, set from the request's user.
+ *
+ * Thrown errors carry `statusCode` (400 invalid, 403 licensed, 404 missing,
+ * 413 too large) for direct mapping in the route layer.
  */
 import fs from 'fs/promises';
 import path from 'path';
@@ -40,7 +48,7 @@ function fail(statusCode, message) {
  * @param {string} name
  * @returns {Promise<string>} Absolute plugin directory
  */
-async function resolvePluginDir(name) {
+async function resolvePluginDir(name, allowLicensed = false) {
     if (!NAME_PATTERN.test(String(name || ''))) throw fail(400, 'Invalid plugin name.');
     const dir = path.join(PLUGINS_DIR, name);
     try {
@@ -49,9 +57,42 @@ async function resolvePluginDir(name) {
     } catch {
         throw fail(404, `Plugin "${name}" not found.`);
     }
+
+    // Every operation in this module goes through here, which is why the check
+    // lives here and not in four places that could drift apart.
+    if (!allowLicensed && await isClosedSource(dir)) {
+        throw fail(403, `"${name}" is a licensed plugin. Its source is not editable here.`);
+    }
     return dir;
 }
 
+/**
+ * Is this plugin's source off limits to the code editor?
+ *
+ * A licensed plugin is distributed to a site so it can RUN there, not so it
+ * can be read and copied - and the editor made it readable AND writable to
+ * anyone holding `plugins.develop`, which on a customer's own site is the
+ * customer. Writable is the worse half: the licence check is in that file.
+ *
+ * Declared by the plugin itself (`"closedSource": true` in plugin.json) so the
+ * flag travels with it wherever it is distributed, rather than depending on a
+ * list somewhere that a new paid plugin would have to be remembered into.
+ *
+ * A manifest that cannot be read is treated as closed. This gate failing open
+ * would publish the very thing it exists to protect.
+ *
+ * @param   {string} dir - absolute plugin directory
+ * @returns {Promise<boolean>}
+ */
+async function isClosedSource(dir) {
+    try {
+        const manifest = JSON.parse(await fs.readFile(path.join(dir, 'plugin.json'), 'utf8'));
+        return manifest.closedSource === true;
+    } catch {
+        return true;
+    }
+}
+
 /**
  * Resolve a relative file path inside the plugin dir, or throw.
  * Rejects absolute paths, traversal, hidden segments and unknown extensions.
@@ -98,8 +139,8 @@ async function resolveFilePath(pluginDir, relPath) {
  * @param {string} name
  * @returns {Promise<Array<{path: string, size: number, modified: string}>>}
  */
-export async function listPluginFiles(name) {
-    const pluginDir = await resolvePluginDir(name);
+export async function listPluginFiles(name, {allowLicensed = false} = {}) {
+    const pluginDir = await resolvePluginDir(name, allowLicensed);
     const files = [];
 
     async function walk(dir) {
@@ -132,8 +173,8 @@ export async function listPluginFiles(name) {
  * @param {string} relPath
  * @returns {Promise<{path: string, content: string}>}
  */
-export async function readPluginFile(name, relPath) {
-    const pluginDir = await resolvePluginDir(name);
+export async function readPluginFile(name, relPath, {allowLicensed = false} = {}) {
+    const pluginDir = await resolvePluginDir(name, allowLicensed);
     const abs = await resolveFilePath(pluginDir, relPath);
 
     let stat;
@@ -158,8 +199,8 @@ export async function readPluginFile(name, relPath) {
  * @param {string} content
  * @returns {Promise<{path: string, restartRequired: boolean}>}
  */
-export async function writePluginFile(name, relPath, content) {
-    const pluginDir = await resolvePluginDir(name);
+export async function writePluginFile(name, relPath, content, {allowLicensed = false} = {}) {
+    const pluginDir = await resolvePluginDir(name, allowLicensed);
     const abs = await resolveFilePath(pluginDir, relPath);
 
     if (typeof content !== 'string') throw fail(400, 'Content must be a string.');
@@ -198,8 +239,8 @@ export async function writePluginFile(name, relPath, content) {
  * @param {string} relPath
  * @returns {Promise<{path: string}>}
  */
-export async function deletePluginFile(name, relPath) {
-    const pluginDir = await resolvePluginDir(name);
+export async function deletePluginFile(name, relPath, {allowLicensed = false} = {}) {
+    const pluginDir = await resolvePluginDir(name, allowLicensed);
     const abs = await resolveFilePath(pluginDir, relPath);
     const rel = path.relative(pluginDir, abs).split(path.sep).join('/');