@cmssy/react 0.1.0

package/dist/client.js

@@ -0,0 +1,690 @@
+"use client";
+import { useState, useRef, useEffect, useMemo, createElement } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/registry.ts
+function buildBlockMap(blocks) {
+  const map = /* @__PURE__ */ Object.create(null);
+  for (const block of blocks) map[block.type] = block.component;
+  return map;
+}
+function blocksToSchemas(blocks) {
+  const out = /* @__PURE__ */ Object.create(null);
+  for (const block of blocks) {
+    const schema = {};
+    for (const [key, def] of Object.entries(block.props)) {
+      schema[key] = { ...def, label: def.label || key };
+    }
+    out[block.type] = schema;
+  }
+  return out;
+}
+function blocksToMeta(blocks, defaults = {}) {
+  const out = /* @__PURE__ */ Object.create(null);
+  for (const block of blocks) {
+    const category = block.category ?? defaults.category;
+    out[block.type] = {
+      label: block.label ?? block.type,
+      ...category ? { category } : {},
+      ...block.icon ? { icon: block.icon } : {},
+      ...block.layoutPositions ? { layoutPositions: block.layoutPositions } : {}
+    };
+  }
+  return out;
+}
+
+// src/bridge/protocol.ts
+var PROTOCOL_VERSION = 1;
+
+// src/bridge/messages.ts
+function normalizeOrigin(origin) {
+  if (origin === "*") return "*";
+  try {
+    return new URL(origin).origin;
+  } catch {
+    return origin;
+  }
+}
+function postToEditor(target, editorOrigin, message) {
+  target.postMessage(message, normalizeOrigin(editorOrigin));
+}
+function isObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function parseEditorMessage(data, origin, expectedOrigin) {
+  const expected = normalizeOrigin(expectedOrigin);
+  if (expected !== "*" && origin !== expected) return null;
+  if (!isObject(data)) return null;
+  switch (data.type) {
+    case "cmssy:select":
+      return typeof data.blockId === "string" && data.protocolVersion === PROTOCOL_VERSION ? {
+        type: "cmssy:select",
+        protocolVersion: PROTOCOL_VERSION,
+        blockId: data.blockId
+      } : null;
+    case "cmssy:patch":
+      return typeof data.blockId === "string" && isObject(data.content) && data.protocolVersion === PROTOCOL_VERSION ? {
+        type: "cmssy:patch",
+        blockId: data.blockId,
+        content: data.content,
+        protocolVersion: PROTOCOL_VERSION,
+        ...typeof data.layoutPosition === "string" ? { layoutPosition: data.layoutPosition } : {}
+      } : null;
+    case "cmssy:parent-ready":
+      return data.protocolVersion === PROTOCOL_VERSION ? { type: "cmssy:parent-ready", protocolVersion: PROTOCOL_VERSION } : null;
+    case "cmssy:insert":
+      return typeof data.blockId === "string" && typeof data.blockType === "string" && isObject(data.content) && typeof data.index === "number" && data.protocolVersion === PROTOCOL_VERSION ? {
+        type: "cmssy:insert",
+        protocolVersion: PROTOCOL_VERSION,
+        blockId: data.blockId,
+        blockType: data.blockType,
+        content: data.content,
+        index: data.index
+      } : null;
+    case "cmssy:reorder":
+      return Array.isArray(data.blockIds) && data.blockIds.every((id) => typeof id === "string") && data.protocolVersion === PROTOCOL_VERSION ? {
+        type: "cmssy:reorder",
+        protocolVersion: PROTOCOL_VERSION,
+        blockIds: data.blockIds
+      } : null;
+    case "cmssy:remove":
+      return typeof data.blockId === "string" && data.protocolVersion === PROTOCOL_VERSION ? {
+        type: "cmssy:remove",
+        protocolVersion: PROTOCOL_VERSION,
+        blockId: data.blockId
+      } : null;
+    case "cmssy:drag-over":
+      return typeof data.y === "number" && data.protocolVersion === PROTOCOL_VERSION ? {
+        type: "cmssy:drag-over",
+        protocolVersion: PROTOCOL_VERSION,
+        y: data.y
+      } : null;
+    case "cmssy:drag-end":
+      return data.protocolVersion === PROTOCOL_VERSION ? { type: "cmssy:drag-end", protocolVersion: PROTOCOL_VERSION } : null;
+    default:
+      return null;
+  }
+}
+
+// src/bridge/use-edit-bridge.tsx
+var ZERO_RECT = { x: 0, y: 0, width: 0, height: 0 };
+function collectRects() {
+  const rects = /* @__PURE__ */ new Map();
+  if (typeof document === "undefined") return rects;
+  for (const el of document.querySelectorAll("[data-block-id]")) {
+    const id = el.getAttribute("data-block-id");
+    if (id && !rects.has(id)) {
+      const r = el.getBoundingClientRect();
+      rects.set(id, { x: r.x, y: r.y, width: r.width, height: r.height });
+    }
+  }
+  return rects;
+}
+function collectLayoutBlocks(rects, pageIds) {
+  const out = [];
+  if (typeof document === "undefined") return out;
+  const seen = /* @__PURE__ */ new Set();
+  for (const el of document.querySelectorAll("[data-layout-position]")) {
+    const id = el.getAttribute("data-block-id");
+    const type = el.getAttribute("data-block-type");
+    const layoutPosition = el.getAttribute("data-layout-position");
+    if (id && type && layoutPosition !== null && !pageIds.has(id) && !seen.has(id)) {
+      seen.add(id);
+      out.push({
+        id,
+        type,
+        layoutPosition,
+        bounds: rects.get(id) ?? ZERO_RECT
+      });
+    }
+  }
+  return out;
+}
+function useEditBridge(page, config) {
+  const [patches, setPatches] = useState({});
+  const [selected, setSelected] = useState(null);
+  const [inserted, setInserted] = useState([]);
+  const [order, setOrder] = useState(null);
+  const [removed, setRemoved] = useState([]);
+  const selectedIdRef = useRef(null);
+  const { id: pageId, blocks } = page;
+  const blocksKey = blocks.map((b) => `${b.id}:${b.type}`).join("|");
+  useEffect(() => {
+    setPatches({});
+    setSelected(null);
+    setInserted([]);
+    setOrder(null);
+    setRemoved([]);
+    selectedIdRef.current = null;
+  }, [pageId, blocksKey]);
+  useEffect(() => {
+    if (typeof window === "undefined" || window.parent === window) return;
+    const { editorOrigin } = config;
+    if (editorOrigin === "*" && typeof console !== "undefined") {
+      console.warn(
+        "[cmssy] editorOrigin '*' disables origin checks - dev only, do not use in production"
+      );
+    }
+    const sendReady = () => {
+      try {
+        const rects = collectRects();
+        const pageIds = new Set(blocks.map((b) => b.id));
+        postToEditor(window.parent, editorOrigin, {
+          type: "cmssy:ready",
+          protocolVersion: PROTOCOL_VERSION,
+          blocks: [
+            ...blocks.map((b) => ({
+              id: b.id,
+              type: b.type,
+              bounds: rects.get(b.id) ?? ZERO_RECT
+            })),
+            ...collectLayoutBlocks(rects, pageIds)
+          ],
+          schemas: config.schemas ?? /* @__PURE__ */ Object.create(null),
+          blockMeta: config.blockMeta ?? /* @__PURE__ */ Object.create(null)
+        });
+      } catch (error) {
+        if (typeof console !== "undefined") {
+          console.warn("[cmssy] failed to post to editor", error);
+        }
+      }
+    };
+    const handler = (event) => {
+      if (event.source && event.source !== window.parent) return;
+      const message = parseEditorMessage(
+        event.data,
+        event.origin,
+        editorOrigin
+      );
+      if (!message) return;
+      if (message.type === "cmssy:patch") {
+        if (message.layoutPosition !== void 0) return;
+        setPatches((prev) => ({
+          ...prev,
+          [message.blockId]: { ...prev[message.blockId], ...message.content }
+        }));
+      } else if (message.type === "cmssy:select") {
+        setSelected(message.blockId);
+        selectedIdRef.current = message.blockId;
+      } else if (message.type === "cmssy:insert") {
+        setInserted((prev) => {
+          const next = prev.filter((b) => b.blockId !== message.blockId);
+          next.push({
+            blockId: message.blockId,
+            blockType: message.blockType,
+            content: message.content,
+            index: message.index
+          });
+          return next;
+        });
+      } else if (message.type === "cmssy:reorder") {
+        setOrder(message.blockIds);
+      } else if (message.type === "cmssy:remove") {
+        setRemoved(
+          (prev) => prev.includes(message.blockId) ? prev : [...prev, message.blockId]
+        );
+      } else if (message.type === "cmssy:parent-ready") {
+        sendReady();
+      }
+    };
+    const onClick = (event) => {
+      const target = event.target;
+      const el = target?.closest?.("[data-block-id]");
+      const id = el?.getAttribute("data-block-id");
+      if (!id || !el) return;
+      selectedIdRef.current = id;
+      if (target?.closest?.("a[href]")) event.preventDefault();
+      const r = el.getBoundingClientRect();
+      const layoutPosition = el.getAttribute("data-layout-position");
+      try {
+        postToEditor(window.parent, editorOrigin, {
+          type: "cmssy:click",
+          blockId: id,
+          rect: { x: r.x, y: r.y, width: r.width, height: r.height },
+          ...layoutPosition !== null ? { layoutPosition } : {}
+        });
+      } catch {
+      }
+    };
+    let boundsRaf = 0;
+    let boundsPending = false;
+    const emitSelectedBounds = () => {
+      if (boundsPending || !selectedIdRef.current) return;
+      boundsPending = true;
+      boundsRaf = requestAnimationFrame(() => {
+        boundsPending = false;
+        boundsRaf = 0;
+        const id = selectedIdRef.current;
+        if (!id) return;
+        const el = document.querySelector(
+          `[data-block-id="${id.replace(/["\\]/g, "\\$&")}"]`
+        );
+        if (!el) return;
+        const r = el.getBoundingClientRect();
+        try {
+          postToEditor(window.parent, editorOrigin, {
+            type: "cmssy:bounds",
+            blockId: id,
+            rect: { x: r.x, y: r.y, width: r.width, height: r.height }
+          });
+        } catch {
+        }
+      });
+    };
+    window.addEventListener("message", handler);
+    document.addEventListener("click", onClick);
+    window.addEventListener("scroll", emitSelectedBounds, {
+      capture: true,
+      passive: true
+    });
+    window.addEventListener("resize", emitSelectedBounds);
+    sendReady();
+    return () => {
+      if (boundsRaf) cancelAnimationFrame(boundsRaf);
+      window.removeEventListener("message", handler);
+      document.removeEventListener("click", onClick);
+      window.removeEventListener("scroll", emitSelectedBounds, {
+        capture: true
+      });
+      window.removeEventListener("resize", emitSelectedBounds);
+    };
+  }, [config.editorOrigin, pageId, blocksKey]);
+  return { patches, selected, inserted, order, removed };
+}
+var MOVE_MIME = "application/x-cmssy-move";
+function visible(el) {
+  return el.offsetParent !== null || el.getClientRects().length > 0;
+}
+function blockElements() {
+  return Array.from(
+    document.querySelectorAll(
+      "[data-block-id]:not([data-layout-position])"
+    )
+  ).filter(visible);
+}
+function computeDropTarget(clientY) {
+  const els = blockElements();
+  for (let i = 0; i < els.length; i++) {
+    const r = els[i].getBoundingClientRect();
+    if (clientY < r.top + r.height / 2) {
+      return { index: i, y: r.top };
+    }
+  }
+  const last = els[els.length - 1];
+  return {
+    index: els.length,
+    y: last ? last.getBoundingClientRect().bottom : 0
+  };
+}
+function useDragAgent(config) {
+  const [dropY, setDropY] = useState(null);
+  useEffect(() => {
+    if (typeof window === "undefined" || window.parent === window) return;
+    const { editorOrigin } = config;
+    if (editorOrigin === "*" && typeof console !== "undefined") {
+      console.warn(
+        "[cmssy] editorOrigin '*' disables origin checks - dev only, do not use in production"
+      );
+    }
+    let movingId = null;
+    let lastDropY = null;
+    const updateDropY = (y) => {
+      if (y === lastDropY) return;
+      lastDropY = y;
+      setDropY(y);
+    };
+    const onDragStart = (event) => {
+      const blockEl = event.target?.closest("[data-block-id]");
+      const id = blockEl?.getAttribute("data-block-id");
+      if (!id || !event.dataTransfer) return;
+      movingId = id;
+      event.dataTransfer.setData(MOVE_MIME, id);
+      event.dataTransfer.effectAllowed = "move";
+    };
+    const onDragOver = (event) => {
+      if (!movingId) return;
+      event.preventDefault();
+      updateDropY(computeDropTarget(event.clientY).y);
+    };
+    const onDrop = (event) => {
+      if (!movingId) return;
+      event.preventDefault();
+      const { index } = computeDropTarget(event.clientY);
+      const blockId = movingId;
+      movingId = null;
+      updateDropY(null);
+      try {
+        postToEditor(window.parent, editorOrigin, {
+          type: "cmssy:move",
+          protocolVersion: PROTOCOL_VERSION,
+          blockId,
+          index
+        });
+      } catch {
+      }
+    };
+    const onDragEnd = () => {
+      movingId = null;
+      updateDropY(null);
+    };
+    const onMessage = (event) => {
+      if (event.source && event.source !== window.parent) return;
+      const message = parseEditorMessage(
+        event.data,
+        event.origin,
+        editorOrigin
+      );
+      if (!message) return;
+      if (message.type === "cmssy:drag-over") {
+        const edge = 64;
+        const step = 20;
+        if (message.y < edge) {
+          window.scrollBy(0, -step);
+        } else if (message.y > window.innerHeight - edge) {
+          window.scrollBy(0, step);
+        }
+        const { index, y } = computeDropTarget(message.y);
+        updateDropY(y);
+        try {
+          postToEditor(window.parent, editorOrigin, {
+            type: "cmssy:drag-index",
+            protocolVersion: PROTOCOL_VERSION,
+            index
+          });
+        } catch {
+        }
+      } else if (message.type === "cmssy:drag-end") {
+        updateDropY(null);
+      }
+    };
+    document.addEventListener("dragstart", onDragStart);
+    document.addEventListener("dragover", onDragOver);
+    document.addEventListener("drop", onDrop);
+    document.addEventListener("dragend", onDragEnd);
+    window.addEventListener("message", onMessage);
+    return () => {
+      document.removeEventListener("dragstart", onDragStart);
+      document.removeEventListener("dragover", onDragOver);
+      document.removeEventListener("drop", onDrop);
+      document.removeEventListener("dragend", onDragEnd);
+      window.removeEventListener("message", onMessage);
+    };
+  }, [config.editorOrigin]);
+  return { dropY };
+}
+
+// src/content/get-block-content.ts
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function looksLikeLocaleKey(key) {
+  return /^[a-z]{2}(-[A-Za-z]{2})?$/.test(key);
+}
+function getBlockContentForLanguage(content, locale, defaultLocale = "en", availableLocales) {
+  if (!isPlainObject(content)) return {};
+  const isLocale = looksLikeLocaleKey;
+  const localeEntries = Object.entries(content).filter(
+    ([key, value]) => isLocale(key) && isPlainObject(value)
+  );
+  if (localeEntries.length === 0) return { ...content };
+  const localeMap = Object.fromEntries(localeEntries);
+  const nonTranslatable = {};
+  for (const [key, value] of Object.entries(content)) {
+    if (!(isLocale(key) && isPlainObject(value))) nonTranslatable[key] = value;
+  }
+  const fallbackKey = Object.keys(localeMap)[0];
+  const chosen = localeMap[locale] ?? localeMap[defaultLocale] ?? localeMap[fallbackKey];
+  return { ...nonTranslatable, ...chosen };
+}
+var WARN_CAP = 256;
+var warned = /* @__PURE__ */ new Set();
+function UnknownBlock({ type }) {
+  if (typeof window !== "undefined" && !warned.has(type)) {
+    if (warned.size >= WARN_CAP) warned.clear();
+    warned.add(type);
+    console.warn(`[cmssy] no component registered for block type "${type}"`);
+  }
+  return /* @__PURE__ */ jsx("div", { "data-cmssy-unknown-block": type });
+}
+function CmssyBlock({
+  block,
+  locale,
+  defaultLocale,
+  blockMap,
+  patchedContent,
+  editable,
+  layoutPosition
+}) {
+  const Component = Object.hasOwn(blockMap, block.type) ? blockMap[block.type] : void 0;
+  const base = getBlockContentForLanguage(block.content, locale, defaultLocale);
+  const content = patchedContent ? { ...base, ...patchedContent } : base;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-block-id": block.id,
+      "data-block-type": block.type,
+      "data-layout-position": layoutPosition,
+      draggable: editable || void 0,
+      style: Component ? void 0 : { display: "none" },
+      children: Component ? createElement(Component, { content }) : /* @__PURE__ */ jsx(UnknownBlock, { type: block.type })
+    }
+  );
+}
+function CmssyEditablePage({
+  page,
+  blocks,
+  locale = "en",
+  defaultLocale = "en",
+  edit,
+  category
+}) {
+  if (!Array.isArray(blocks)) {
+    throw new Error(
+      "cmssy: CmssyEditablePage requires a blocks array \u2014 pass your defineBlock(...) array"
+    );
+  }
+  if (!page) return null;
+  return /* @__PURE__ */ jsx(
+    EditableBlocks,
+    {
+      page,
+      blocks,
+      locale,
+      defaultLocale,
+      edit,
+      category
+    }
+  );
+}
+function EditableBlocks({
+  page,
+  blocks,
+  locale,
+  defaultLocale,
+  edit,
+  category
+}) {
+  const blockMap = useMemo(() => buildBlockMap(blocks), [blocks]);
+  const bridgeConfig = useMemo(
+    () => ({
+      ...edit,
+      schemas: edit.schemas ?? blocksToSchemas(blocks),
+      blockMeta: edit.blockMeta ?? blocksToMeta(blocks, { category })
+    }),
+    [edit, blocks, category]
+  );
+  const { patches, inserted, order, removed } = useEditBridge(
+    page,
+    bridgeConfig
+  );
+  const { dropY } = useDragAgent(bridgeConfig);
+  const renderBlocks = useMemo(() => {
+    const removedSet = new Set(removed);
+    const merged = page.blocks.filter((b) => !removedSet.has(b.id));
+    const sorted = [...inserted].filter((ins) => !removedSet.has(ins.blockId)).sort((a, b) => a.index - b.index);
+    for (const ins of sorted) {
+      const at = Math.max(0, Math.min(ins.index, merged.length));
+      merged.splice(at, 0, {
+        id: ins.blockId,
+        type: ins.blockType,
+        content: ins.content
+      });
+    }
+    if (order) {
+      const rank = new Map(order.map((id, i) => [id, i]));
+      const fallback = order.length;
+      merged.sort(
+        (a, b) => (rank.get(a.id) ?? fallback) - (rank.get(b.id) ?? fallback)
+      );
+    }
+    return merged;
+  }, [page.blocks, inserted, order, removed]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    renderBlocks.map((block) => /* @__PURE__ */ jsx(
+      CmssyBlock,
+      {
+        block,
+        locale,
+        defaultLocale,
+        patchedContent: patches[block.id],
+        blockMap,
+        editable: true
+      },
+      block.id
+    )),
+    dropY !== null && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          left: 0,
+          right: 0,
+          top: dropY,
+          height: 2,
+          background: "#3b82f6",
+          zIndex: 2147483647,
+          pointerEvents: "none"
+        }
+      }
+    )
+  ] });
+}
+function CmssyLazyEditor({ load, ...props }) {
+  const [loaded, setLoaded] = useState(null);
+  useEffect(() => {
+    let active = true;
+    setLoaded(null);
+    (async () => {
+      try {
+        const m = await load();
+        if (!active) return;
+        if (!Array.isArray(m.blocks)) {
+          throw new Error(
+            "cmssy: CmssyLazyEditor load() must resolve to { blocks: BlockDefinition[] }"
+          );
+        }
+        setLoaded({ blocks: m.blocks, category: m.category });
+      } catch (err) {
+        if (typeof console !== "undefined") {
+          console.error("[cmssy] CmssyLazyEditor failed to load blocks", err);
+        }
+      }
+    })();
+    return () => {
+      active = false;
+    };
+  }, [load]);
+  if (!loaded) return null;
+  return /* @__PURE__ */ jsx(
+    CmssyEditablePage,
+    {
+      ...props,
+      blocks: loaded.blocks,
+      category: loaded.category
+    }
+  );
+}
+function useLayoutPatchBridge(position, config) {
+  const [patches, setPatches] = useState({});
+  useEffect(() => {
+    setPatches({});
+    if (typeof window === "undefined" || window.parent === window) return;
+    const { editorOrigin } = config;
+    const handler = (event) => {
+      if (event.source && event.source !== window.parent) return;
+      const message = parseEditorMessage(
+        event.data,
+        event.origin,
+        editorOrigin
+      );
+      if (!message) return;
+      if (message.type === "cmssy:patch" && message.layoutPosition === position) {
+        setPatches((prev) => ({
+          ...prev,
+          [message.blockId]: { ...prev[message.blockId], ...message.content }
+        }));
+      }
+    };
+    window.addEventListener("message", handler);
+    return () => window.removeEventListener("message", handler);
+  }, [config.editorOrigin, position]);
+  return patches;
+}
+function CmssyEditableLayout({
+  groups,
+  blocks,
+  position,
+  locale = "en",
+  defaultLocale = "en",
+  edit
+}) {
+  const blockMap = useMemo(() => buildBlockMap(blocks), [blocks]);
+  const layoutBlocks = useMemo(() => {
+    const group = groups.find((g) => g.position === position);
+    return group ? group.blocks.filter((b) => b.isActive).slice().sort((a, b) => a.order - b.order) : [];
+  }, [groups, position]);
+  const patches = useLayoutPatchBridge(position, edit);
+  if (layoutBlocks.length === 0) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: layoutBlocks.map((block) => /* @__PURE__ */ jsx(
+    CmssyBlock,
+    {
+      block,
+      locale,
+      defaultLocale,
+      blockMap,
+      patchedContent: patches[block.id],
+      layoutPosition: position
+    },
+    block.id
+  )) });
+}
+function CmssyLazyLayout({ load, ...props }) {
+  const [blocks, setBlocks] = useState(null);
+  useEffect(() => {
+    let active = true;
+    setBlocks(null);
+    (async () => {
+      try {
+        const m = await load();
+        if (!active) return;
+        if (!Array.isArray(m.blocks)) {
+          throw new Error(
+            "cmssy: CmssyLazyLayout load() must resolve to { blocks: BlockDefinition[] }"
+          );
+        }
+        setBlocks(m.blocks);
+      } catch (err) {
+        if (typeof console !== "undefined") {
+          console.error("[cmssy] CmssyLazyLayout failed to load blocks", err);
+        }
+      }
+    })();
+    return () => {
+      active = false;
+    };
+  }, [load]);
+  if (!blocks) return null;
+  return /* @__PURE__ */ jsx(CmssyEditableLayout, { ...props, blocks });
+}
+
+export { CmssyEditableLayout, CmssyEditablePage, CmssyLazyEditor, CmssyLazyLayout, useEditBridge };