@aduptive/strapi-blockscene 1.0.0-alpha.1

package/dist/server.cjs

@@ -0,0 +1,419 @@
+"use strict";
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+
+// server/groups.js
+var require_groups = __commonJS({
+  "server/groups.js"(exports2, module2) {
+    "use strict";
+    var UID = /^[a-z0-9-]+\.[a-z0-9-]+$/;
+    function safeGroups2(value, knownUids) {
+      if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+      const out = {};
+      for (const [open, close] of Object.entries(value)) {
+        if (!UID.test(open) || typeof close !== "string" || !UID.test(close) || open === close) continue;
+        if (knownUids && (!knownUids.includes(open) || !knownUids.includes(close))) continue;
+        out[open] = close;
+      }
+      for (const close of Object.values(out)) if (out[close]) return null;
+      return Object.keys(out).length ? out : null;
+    }
+    var uidOf = (row) => typeof row?.__component === "string" ? row.__component : "";
+    var isOpener = (row, g) => Boolean(g) && Object.prototype.hasOwnProperty.call(g, uidOf(row));
+    var isClose = (row, g) => Boolean(g) && Object.values(g).includes(uidOf(row));
+    var blockKey = (row) => row && row.id != null ? `${row.__component}#${row.id}` : row && row.__temp_key__ != null ? String(row.__temp_key__) : null;
+    function validateGroups2(rows, g) {
+      const errors = [];
+      if (!g || !Array.isArray(rows)) return errors;
+      const stack = [];
+      rows.forEach((row, index) => {
+        const uid = uidOf(row);
+        if (isOpener(row, g)) {
+          stack.push({ index, uid, close: g[uid] });
+          return;
+        }
+        if (!isClose(row, g)) return;
+        const top = stack[stack.length - 1];
+        if (!top) errors.push({ code: "closeBeforeOpen", index, uid });
+        else if (top.close !== uid) errors.push({ code: "mismatch", index, uid, expected: top.close, open: top.uid, openIndex: top.index });
+        else stack.pop();
+      });
+      for (const open of stack) errors.push({ code: "unclosed", index: open.index, uid: open.uid, expected: open.close });
+      return errors;
+    }
+    function groupRange(rows, start, g) {
+      const stack = [g[uidOf(rows[start])]];
+      for (let i = start + 1; i < rows.length; i++) {
+        const row = rows[i];
+        if (isOpener(row, g)) stack.push(g[uidOf(row)]);
+        else if (isClose(row, g) && uidOf(row) === stack[stack.length - 1]) {
+          stack.pop();
+          if (!stack.length) return [start, i];
+        }
+      }
+      return [start, rows.length - 1];
+    }
+    function groupRows(rows, g, depth = 0, offset = 0) {
+      const out = [];
+      let i = 0;
+      while (i < rows.length) {
+        const row = rows[i];
+        if (isOpener(row, g)) {
+          const [, end] = groupRange(rows, i, g);
+          const closed = uidOf(rows[end]) === g[uidOf(row)] && end > i;
+          out.push({
+            type: "group",
+            key: blockKey(row),
+            closeKey: closed ? blockKey(rows[end]) : null,
+            row,
+            index: offset + i,
+            depth,
+            children: groupRows(rows.slice(i + 1, closed ? end : end + 1), g, depth + 1, offset + i + 1)
+          });
+          i = end + 1;
+          continue;
+        }
+        out.push({ type: "block", key: blockKey(row), row, index: offset + i, depth, stray: isClose(row, g) });
+        i++;
+      }
+      return out;
+    }
+    function topLevelRanges(rows, g) {
+      const ranges = [];
+      let i = 0;
+      while (i < rows.length) {
+        const end = isOpener(rows[i], g) ? groupRange(rows, i, g)[1] : i;
+        ranges.push([i, end]);
+        i = end + 1;
+      }
+      return ranges;
+    }
+    function moveGroup(rows, key, direction, g) {
+      if (!g) return null;
+      const ranges = topLevelRanges(rows, g);
+      const at = ranges.findIndex(([s]) => blockKey(rows[s]) === String(key));
+      const to = at + (direction === "up" ? -1 : 1);
+      if (at < 0 || to < 0 || to >= ranges.length) return null;
+      const [a, b] = direction === "up" ? [ranges[to], ranges[at]] : [ranges[at], ranges[to]];
+      return [...rows.slice(0, a[0]), ...rows.slice(b[0], b[1] + 1), ...rows.slice(a[0], a[1] + 1), ...rows.slice(b[1] + 1)];
+    }
+    function removeGroup(rows, key, g) {
+      if (!g) return null;
+      const start = rows.findIndex((row) => blockKey(row) === String(key));
+      if (start < 0 || !isOpener(rows[start], g)) return null;
+      const [, end] = groupRange(rows, start, g);
+      return [...rows.slice(0, start), ...rows.slice(end + 1)];
+    }
+    module2.exports = { safeGroups: safeGroups2, validateGroups: validateGroups2, groupRange, groupRows, topLevelRanges, moveGroup, removeGroup, blockKey, isOpener, isClose };
+  }
+});
+
+// server/settings.js
+var require_settings = __commonJS({
+  "server/settings.js"(exports2, module2) {
+    "use strict";
+    var PLUGIN2 = "blockscene";
+    var TEMPLATES2 = ["generic", "banner", "cards", "imageText", "faq", "none"];
+    var INITIAL_STATES = ["closed", "open", "remember"];
+    var PREVIEW_MODES = ["form", "split", "preview"];
+    var DEFAULTS2 = {
+      palette: { background: "#F6F6F9", surface: "#DCDCE4", text: "#32324D", accent: "#4945FF" },
+      components: {},
+      // previewUrl: '' means "reuse Strapi's native Preview origin when configured"; a URL overrides it.
+      // blockPreviewInForm: compact read-only preview above a block's fields in form
+      // mode. Only installations that ship the accordion integration (server config
+      // `blockPreview: true`) show and honour it; the page preview is the editor.
+      editor: { enabled: true, showOpenAll: true, showCloseAll: true, initialState: "closed", previewMode: "form", previewUrl: "", blockPreviewInForm: false }
+    };
+    var PREVIEW_URL = /^https?:\/\/[^\s"'<>]{1,500}$/;
+    var COLOR = /^#[0-9A-Fa-f]{6}$/;
+    var UID = /^[a-z0-9-]+\.[a-z0-9-]+$/;
+    var safeUrl2 = (value) => typeof value === "string" && (/^\/(?!\/)/.test(value) || /^https?:\/\//.test(value)) ? value : void 0;
+    var { safeGroups: safeGroups2 } = require_groups();
+    var safeVersion = (value) => typeof value === "string" && /^[\w.-]{1,32}$/.test(value) ? value : void 0;
+    var fail2 = (message, details) => {
+      let ValidationError;
+      try {
+        ValidationError = require("@strapi/utils").errors.ValidationError;
+      } catch {
+        ValidationError = class extends Error {
+          constructor(m, d) {
+            super(m);
+            this.name = "ValidationError";
+            this.details = d;
+          }
+        };
+      }
+      throw new ValidationError(message, details);
+    };
+    function catalog2(config = {}) {
+      const entries = {};
+      for (const [uid, entry] of Object.entries(config.components || {})) {
+        if (!entry || typeof entry !== "object") continue;
+        entries[uid] = Object.fromEntries(
+          ["label", "description", "category", "keywords"].filter((key) => typeof entry[key] === "string").map((key) => [key, entry[key]])
+        );
+        entries[uid].image = safeUrl2(entry.image);
+      }
+      return {
+        components: entries,
+        previewBaseUrl: safeUrl2(config.previewBaseUrl) || "/block-previews",
+        previewVersion: safeVersion(config.previewVersion),
+        disabled: config.disabled === true,
+        blockPreviewAvailable: config.blockPreview === true,
+        // Optional OPEN -> CLOSE map (see groups.js); null means every component is an ordinary block.
+        groups: safeGroups2(config.groups, config.componentUids)
+      };
+    }
+    function validateSettings2(input, componentUids2) {
+      if (!input || typeof input !== "object" || Array.isArray(input)) fail2("Settings must be an object");
+      if (JSON.stringify(input).length > 64 * 1024) fail2("Settings payload too large");
+      const out = structuredClone(DEFAULTS2);
+      for (const key of Object.keys(input)) if (!(key in DEFAULTS2)) fail2(`Unknown setting "${key}"`);
+      for (const [key, value] of Object.entries(input.palette || {})) {
+        if (!(key in DEFAULTS2.palette)) fail2(`Unknown palette color "${key}"`);
+        if (!COLOR.test(String(value))) fail2(`Color "${key}" must use #RRGGBB`);
+        out.palette[key] = String(value).toUpperCase();
+      }
+      for (const [key, value] of Object.entries(input.editor || {})) {
+        if (!(key in DEFAULTS2.editor)) fail2(`Unknown editor option "${key}"`);
+        const valid = key === "initialState" ? INITIAL_STATES.includes(value) : key === "previewMode" ? PREVIEW_MODES.includes(value) : key === "previewUrl" ? value === "" || typeof value === "string" && PREVIEW_URL.test(value) : typeof value === "boolean";
+        if (!valid) fail2(`Invalid value for editor option "${key}"`);
+        out.editor[key] = key === "previewUrl" && value ? String(new URL(value).href).replace(/\/$/, "") : value;
+      }
+      const components = input.components || {};
+      if (typeof components !== "object" || Array.isArray(components)) fail2("components must be an object");
+      for (const [uid, entry] of Object.entries(components)) {
+        if (!UID.test(uid) || !componentUids2.includes(uid)) fail2(`Unknown component "${uid}"`);
+        if (!entry || typeof entry !== "object") fail2(`Invalid entry for "${uid}"`);
+        const clean = {};
+        for (const key of Object.keys(entry)) {
+          if (key === "template") {
+            if (!TEMPLATES2.includes(entry.template)) fail2(`Unknown template for "${uid}"`);
+            clean.template = entry.template;
+          } else if (key === "mediaId") {
+            if (!Number.isInteger(entry.mediaId) || entry.mediaId <= 0) fail2(`Invalid media for "${uid}"`);
+            clean.mediaId = entry.mediaId;
+          } else fail2(`Unknown component setting "${key}"`);
+        }
+        if (Object.keys(clean).length) out.components[uid] = clean;
+      }
+      return out;
+    }
+    function mergeSaved2(saved, componentUids2) {
+      const out = structuredClone(DEFAULTS2);
+      if (!saved || typeof saved !== "object") return out;
+      for (const key of Object.keys(DEFAULTS2.palette)) if (COLOR.test(String(saved.palette?.[key]))) out.palette[key] = saved.palette[key];
+      for (const key of Object.keys(DEFAULTS2.editor)) {
+        const value = saved.editor?.[key];
+        if (value === void 0 || typeof value !== typeof DEFAULTS2.editor[key]) continue;
+        if (key === "initialState" && !INITIAL_STATES.includes(value)) continue;
+        if (key === "previewMode" && !PREVIEW_MODES.includes(value)) continue;
+        if (key === "previewUrl" && value && !PREVIEW_URL.test(value)) continue;
+        out.editor[key] = value;
+      }
+      for (const [uid, entry] of Object.entries(saved.components || {})) if (componentUids2.includes(uid) && entry && typeof entry === "object") out.components[uid] = { ...entry };
+      return out;
+    }
+    module2.exports = { PLUGIN: PLUGIN2, TEMPLATES: TEMPLATES2, DEFAULTS: DEFAULTS2, catalog: catalog2, validateSettings: validateSettings2, mergeSaved: mergeSaved2, safeUrl: safeUrl2, fail: fail2 };
+  }
+});
+
+// server/index.js
+var { PLUGIN, TEMPLATES, DEFAULTS, catalog, validateSettings, mergeSaved, safeUrl, fail } = require_settings();
+var { safeGroups, validateGroups } = require_groups();
+var store = (strapi) => strapi.store({ type: "plugin", name: PLUGIN });
+var LEGACY_PLUGIN = "block-picker";
+async function readSettings(strapi) {
+  const current = await store(strapi).get({ key: "settings" });
+  if (current) return current;
+  const legacy = await strapi.store({ type: "plugin", name: LEGACY_PLUGIN }).get({ key: "settings" });
+  if (legacy) {
+    await store(strapi).set({ key: "settings", value: legacy });
+    strapi.log.info(`[${PLUGIN}] settings migrated from "${LEGACY_PLUGIN}"`);
+  }
+  return legacy;
+}
+var componentUids = (strapi) => Object.keys(strapi.components || {});
+var findMedia = (strapi, id) => strapi.db.query("plugin::upload.file").findOne({ where: { id }, select: ["id", "url", "mime", "name"] });
+async function resolveMedia(strapi, settings) {
+  const resolved = {};
+  for (const [uid, entry] of Object.entries(settings.components)) {
+    if (!entry.mediaId) continue;
+    const file = await findMedia(strapi, entry.mediaId).catch(() => null);
+    resolved[uid] = file && safeUrl(file.url) && String(file.mime || "").startsWith("image/") ? { manualImage: file.url, manualName: file.name } : { manualMissing: true };
+  }
+  return resolved;
+}
+var zonesOf = (schema) => Object.entries(schema?.attributes || {}).filter(([, attr]) => attr?.type === "dynamiczone").map(([name]) => name);
+var label = (error) => `row ${error.index + 1}: ${error.code === "closeBeforeOpen" ? `close marker ${error.uid} has no open marker before it` : error.code === "mismatch" ? `close marker ${error.uid} does not match the open group ${error.open} (expected ${error.expected})` : `group ${error.uid} is not closed (expected ${error.expected})`}`;
+function checkZones(strapi, uid, entry, groups) {
+  for (const name of zonesOf(strapi.getModel(uid))) {
+    const errors = validateGroups(Array.isArray(entry?.[name]) ? entry[name] : [], groups);
+    if (errors.length) fail(
+      `Block groups in "${name}" are not balanced; fix the markers before publishing (${errors.map(label).join("; ")}).`,
+      { plugin: PLUGIN, field: name, errors: errors.map((error) => ({ path: [name, error.index], message: label(error), name: "ValidationError", code: error.code, uid: error.uid, expected: error.expected })) }
+    );
+  }
+}
+function registerPublishGuard(strapi) {
+  const plugin = strapi.plugin(PLUGIN);
+  const groups = safeGroups(plugin.config("groups"), componentUids(strapi));
+  if (plugin.config("groups") && !groups) strapi.log.warn(`[${PLUGIN}] "groups" config ignored: expected { "<open component uid>": "<close component uid>" } with existing components; every block is treated as ordinary.`);
+  if (!groups) return;
+  if (strapi.documents?.use) {
+    const defaultLocale = async () => {
+      try {
+        return await strapi.plugin("i18n")?.service("locales")?.getDefaultLocale?.();
+      } catch {
+        return void 0;
+      }
+    };
+    strapi.documents.use(async (ctx, next) => {
+      const { action, params = {} } = ctx;
+      const publishing = action === "publish" || (action === "create" || action === "update") && params.status === "published";
+      if (!publishing || !ctx.uid) return next();
+      const model = strapi.getModel(ctx.uid);
+      const zones = zonesOf(model);
+      if (!zones.length) return next();
+      if (action === "create") {
+        checkZones(strapi, ctx.uid, params.data || {}, groups);
+        return next();
+      }
+      const populate = Object.fromEntries(zones.map((name) => [name, true]));
+      const localized = Boolean(model?.pluginOptions?.i18n?.localized);
+      const { documentId } = params;
+      let drafts;
+      if (!localized) drafts = [await strapi.documents(ctx.uid).findOne({ documentId, status: "draft", populate })];
+      else if (params.locale === "*") drafts = await strapi.documents(ctx.uid).findMany({ filters: { documentId }, status: "draft", locale: "*", populate });
+      else {
+        const locale = params.locale || await defaultLocale();
+        drafts = [await strapi.documents(ctx.uid).findOne({ documentId, locale, status: "draft", populate })];
+      }
+      for (const draft of drafts) {
+        const entry = action === "update" ? { ...draft || {}, ...Object.fromEntries(zones.filter((name) => Array.isArray(params.data?.[name])).map((name) => [name, params.data[name]])) } : draft;
+        checkZones(strapi, ctx.uid, entry, groups);
+      }
+      return next();
+    });
+    return;
+  }
+  const published = (data) => Boolean(data && data.publishedAt);
+  strapi.db.lifecycles.subscribe({
+    async beforeCreate(event) {
+      if (published(event.params?.data)) checkZones(strapi, event.model.uid, event.params.data, groups);
+    },
+    async beforeUpdate(event) {
+      const { data, where } = event.params || {};
+      const zones = zonesOf(strapi.getModel(event.model.uid));
+      if (!published(data) || !zones.length) return;
+      const entry = zones.every((name) => Array.isArray(data[name])) ? data : { ...await strapi.entityService.findOne(event.model.uid, where?.id, { populate: zones }), ...data };
+      checkZones(strapi, event.model.uid, entry, groups);
+    },
+    async beforeUpdateMany(event) {
+      const { data, where } = event.params || {};
+      const zones = zonesOf(strapi.getModel(event.model.uid));
+      if (!published(data) || !zones.length) return;
+      for (const entry of await strapi.entityService.findMany(event.model.uid, { filters: where, populate: zones })) checkZones(strapi, event.model.uid, entry, groups);
+    }
+  });
+}
+module.exports = {
+  config: {
+    default: {
+      components: {},
+      previewBaseUrl: "/block-previews",
+      previewVersion: void 0,
+      // Emergency bypass read once at boot: BLOCKSCENE_DISABLED=true forces the native editor. Restart to change.
+      disabled: process.env.BLOCKSCENE_DISABLED === "true",
+      // true only where the Content Manager ships the per-block preview slot (see docs).
+      blockPreview: false,
+      // Optional layout groups: OPEN component uid -> its CLOSE uid, e.g. { 'wrappers.join': 'wrappers.close' }.
+      // Empty/absent: every Dynamic Zone component is an ordinary block. See README "Layout groups".
+      groups: null
+    },
+    validator: catalog
+  },
+  async bootstrap({ strapi }) {
+    await strapi.admin.services.permission.actionProvider.registerMany([
+      { section: "plugins", displayName: "Read gallery settings", uid: "settings.read", pluginName: PLUGIN },
+      { section: "plugins", displayName: "Change gallery settings", uid: "settings.update", pluginName: PLUGIN }
+    ]);
+    registerPublishGuard(strapi);
+  },
+  services: { settings: ({ strapi }) => ({
+    async get() {
+      return mergeSaved(await readSettings(strapi), componentUids(strapi));
+    },
+    async set(value) {
+      const next = validateSettings(value, componentUids(strapi));
+      for (const [uid, entry] of Object.entries(next.components)) {
+        if (entry.mediaId && !await findMedia(strapi, entry.mediaId).catch(() => null)) fail(`Media for "${uid}" does not exist`);
+      }
+      await store(strapi).set({ key: "settings", value: next });
+      return next;
+    }
+  }) },
+  controllers: {
+    catalog: ({ strapi }) => ({
+      async find(ctx) {
+        const plugin = strapi.plugin(PLUGIN);
+        const base = catalog({
+          components: plugin.config("components"),
+          previewBaseUrl: plugin.config("previewBaseUrl"),
+          previewVersion: plugin.config("previewVersion"),
+          disabled: plugin.config("disabled"),
+          blockPreview: plugin.config("blockPreview"),
+          groups: plugin.config("groups"),
+          componentUids: componentUids(strapi)
+        });
+        const settings = await plugin.service("settings").get();
+        const media = await resolveMedia(strapi, settings);
+        for (const [uid, entry] of Object.entries(settings.components)) {
+          base.components[uid] = { ...base.components[uid], ...media[uid], template: entry.template };
+        }
+        ctx.body = {
+          ...base,
+          palette: settings.palette,
+          editor: { ...settings.editor, enabled: settings.editor.enabled && !base.disabled }
+        };
+      }
+    }),
+    settings: ({ strapi }) => ({
+      async find(ctx) {
+        const settings = await strapi.plugin(PLUGIN).service("settings").get();
+        const components = Object.entries(strapi.components || {}).map(([uid, schema]) => ({
+          uid,
+          displayName: schema.info?.displayName || uid,
+          category: schema.category || uid.split(".")[0]
+        }));
+        ctx.body = {
+          settings,
+          components,
+          media: await resolveMedia(strapi, settings),
+          templates: TEMPLATES,
+          disabled: strapi.plugin(PLUGIN).config("disabled") === true,
+          blockPreviewAvailable: strapi.plugin(PLUGIN).config("blockPreview") === true,
+          defaults: DEFAULTS
+        };
+      },
+      async update(ctx) {
+        ctx.body = await strapi.plugin(PLUGIN).service("settings").set(ctx.request?.body);
+      }
+    })
+  },
+  routes: { admin: { type: "admin", routes: [
+    { method: "GET", path: "/catalog", handler: "catalog.find", config: { policies: ["admin::isAuthenticatedAdmin"] } },
+    ...["find", "update"].map((handler, index) => ({
+      method: index ? "PUT" : "GET",
+      path: "/settings",
+      handler: `settings.${handler}`,
+      config: { policies: ["admin::isAuthenticatedAdmin", {
+        name: "admin::hasPermissions",
+        config: { actions: [`plugin::${PLUGIN}.settings.${index ? "update" : "read"}`] }
+      }] }
+    }))
+  ] } }
+};

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@aduptive/strapi-blockscene",
+  "version": "1.0.0-alpha.1",
+  "description": "Visual component gallery for native Strapi dynamic zones.",
+  "license": "MIT",
+  "author": "Andrea Scarpello <aduptive@gmail.com>",
+  "keywords": [
+    "strapi",
+    "strapi-plugin",
+    "blockscene"
+  ],
+  "main": "strapi-server.js",
+  "files": [
+    "dist",
+    "strapi-admin.js",
+    "strapi-server.js",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    "./strapi-admin": {
+      "import": "./dist/admin.mjs",
+      "require": "./dist/admin.cjs",
+      "default": "./dist/admin.mjs"
+    },
+    "./strapi-server": {
+      "require": "./strapi-server.js",
+      "default": "./strapi-server.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "strapi": {
+    "name": "blockscene",
+    "displayName": "Blockscene",
+    "kind": "plugin",
+    "description": "Independent of the frontend framework."
+  },
+  "engines": {
+    "node": ">=18.17 <21"
+  },
+  "peerDependencies": {
+    "@strapi/strapi": ">=4.20.0 <5",
+    "@strapi/design-system": "^1.19.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "styled-components": "^5.3.0",
+    "react-intl": "^6.0.0",
+    "@strapi/helper-plugin": ">=4.20.0 <5",
+    "@strapi/admin": ">=4.20.0 <5"
+  },
+  "dependencies": {
+    "fractional-indexing": "3.2.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/aduptive/strapi-plugin-blockscene.git",
+    "directory": "packages/strapi4"
+  },
+  "homepage": "https://github.com/aduptive/strapi-plugin-blockscene#readme",
+  "bugs": {
+    "url": "https://github.com/aduptive/strapi-plugin-blockscene/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "tag": "strapi4"
+  }
+}

package/strapi-admin.js

@@ -0,0 +1 @@
+module.exports = require('./dist/admin.cjs').default

package/strapi-server.js

@@ -0,0 +1 @@
+module.exports = require('./dist/server.cjs')