@cmssy/react 0.17.0 → 0.18.0

package/dist/client.cjs

@@ -44,22 +44,37 @@ var PROTOCOL_VERSION = 2;
 
 // src/bridge/messages.ts
 function normalizeOrigin(origin) {
-  if (origin === "*") return "*";
+  const trimmed = origin.trim();
+  if (trimmed === "*") return "*";
   try {
-    return new URL(origin).origin;
+    return new URL(trimmed).origin;
   } catch {
-    return origin;
+    return trimmed;
   }
 }
 function postToEditor(target, editorOrigin, message) {
   target.postMessage(message, normalizeOrigin(editorOrigin));
 }
+function isOriginAllowed(origin, allowed) {
+  const list = Array.isArray(allowed) ? allowed : [allowed];
+  const actual = normalizeOrigin(origin);
+  return list.some((candidate) => {
+    const expected = normalizeOrigin(candidate);
+    return expected === "*" || expected === actual;
+  });
+}
+function resolveInitialTarget(editorOrigin) {
+  const list = (Array.isArray(editorOrigin) ? editorOrigin : [editorOrigin]).map((origin) => normalizeOrigin(origin));
+  if (list.includes("*")) return "*";
+  if (list.length === 1) return list[0];
+  const referrerOrigin = typeof document !== "undefined" && document.referrer ? normalizeOrigin(document.referrer) : "";
+  return list.find((origin) => origin === referrerOrigin) ?? list[0];
+}
 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 (!isOriginAllowed(origin, expectedOrigin)) return null;
   if (!isObject(data)) return null;
   switch (data.type) {
     case "cmssy:select":
@@ -130,6 +145,18 @@ function collectRects() {
   }
   return rects;
 }
+function findBlockEl(blockId) {
+  if (typeof document === "undefined") return null;
+  const escaped = typeof CSS !== "undefined" && typeof CSS.escape === "function" ? CSS.escape(blockId) : blockId.replace(/["\\]/g, "\\$&");
+  try {
+    return document.querySelector(`[data-block-id="${escaped}"]`);
+  } catch {
+    return null;
+  }
+}
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
 function collectLayoutBlocks(rects, pageIds) {
   const out = [];
   if (typeof document === "undefined") return out;
@@ -174,7 +201,9 @@ function useEditBridge(page, config) {
   react.useEffect(() => {
     if (typeof window === "undefined" || window.parent === window) return;
     const { editorOrigin } = config;
-    if (editorOrigin === "*" && typeof console !== "undefined") {
+    let postTarget = resolveInitialTarget(editorOrigin);
+    const isWildcard = Array.isArray(editorOrigin) ? editorOrigin.includes("*") : editorOrigin === "*";
+    if (isWildcard && typeof console !== "undefined") {
       console.warn(
         "[cmssy] editorOrigin '*' disables origin checks - dev only, do not use in production"
       );
@@ -183,7 +212,7 @@ function useEditBridge(page, config) {
       try {
         const rects = collectRects();
         const pageIds = new Set(blocks.map((b) => b.id));
-        postToEditor(window.parent, editorOrigin, {
+        postToEditor(window.parent, postTarget, {
           type: "cmssy:ready",
           protocolVersion: PROTOCOL_VERSION,
           blocks: [
@@ -211,6 +240,7 @@ function useEditBridge(page, config) {
         editorOrigin
       );
       if (!message) return;
+      postTarget = event.origin;
       if (message.type === "cmssy:patch") {
         if (message.layoutPosition !== void 0) return;
         setPatches((prev) => ({
@@ -235,6 +265,10 @@ function useEditBridge(page, config) {
       } else if (message.type === "cmssy:select") {
         setSelected(message.blockId);
         selectedIdRef.current = message.blockId;
+        findBlockEl(message.blockId)?.scrollIntoView({
+          behavior: prefersReducedMotion() ? "auto" : "smooth",
+          block: "nearest"
+        });
       } else if (message.type === "cmssy:insert") {
         setInserted((prev) => {
           const next = prev.filter((b) => b.blockId !== message.blockId);
@@ -268,7 +302,7 @@ function useEditBridge(page, config) {
       const r = el.getBoundingClientRect();
       const layoutPosition = el.getAttribute("data-layout-position");
       try {
-        postToEditor(window.parent, editorOrigin, {
+        postToEditor(window.parent, postTarget, {
           type: "cmssy:click",
           blockId: id,
           rect: { x: r.x, y: r.y, width: r.width, height: r.height },
@@ -287,13 +321,11 @@ function useEditBridge(page, config) {
         boundsRaf = 0;
         const id = selectedIdRef.current;
         if (!id) return;
-        const el = document.querySelector(
-          `[data-block-id="${id.replace(/["\\]/g, "\\$&")}"]`
-        );
+        const el = findBlockEl(id);
         if (!el) return;
         const r = el.getBoundingClientRect();
         try {
-          postToEditor(window.parent, editorOrigin, {
+          postToEditor(window.parent, postTarget, {
             type: "cmssy:bounds",
             blockId: id,
             rect: { x: r.x, y: r.y, width: r.width, height: r.height }
@@ -383,7 +415,9 @@ function useDragAgent(config) {
   react.useEffect(() => {
     if (typeof window === "undefined" || window.parent === window) return;
     const { editorOrigin } = config;
-    if (editorOrigin === "*" && typeof console !== "undefined") {
+    let postTarget = resolveInitialTarget(editorOrigin);
+    const isWildcard = Array.isArray(editorOrigin) ? editorOrigin.includes("*") : editorOrigin === "*";
+    if (isWildcard && typeof console !== "undefined") {
       console.warn(
         "[cmssy] editorOrigin '*' disables origin checks - dev only, do not use in production"
       );
@@ -419,7 +453,7 @@ function useDragAgent(config) {
       updateDropY(null);
       resolver.invalidate();
       try {
-        postToEditor(window.parent, editorOrigin, {
+        postToEditor(window.parent, postTarget, {
           type: "cmssy:move",
           protocolVersion: PROTOCOL_VERSION,
           blockId,
@@ -441,6 +475,7 @@ function useDragAgent(config) {
         editorOrigin
       );
       if (!message) return;
+      postTarget = event.origin;
       if (message.type === "cmssy:drag-over") {
         const edge = 64;
         const step = 20;
@@ -452,7 +487,7 @@ function useDragAgent(config) {
         const { index, y } = resolver.resolve(message.y);
         updateDropY(y);
         try {
-          postToEditor(window.parent, editorOrigin, {
+          postToEditor(window.parent, postTarget, {
             type: "cmssy:drag-index",
             protocolVersion: PROTOCOL_VERSION,
             index

package/dist/client.d.cts

@@ -5,7 +5,7 @@ import { ReactNode } from 'react';
 import '@cmssy/types';
 
 interface EditBridgeConfig {
-    editorOrigin: string;
+    editorOrigin: string | string[];
     schemas?: Record<string, BlockSchema>;
     blockMeta?: Record<string, BlockMeta>;
 }

package/dist/client.d.ts

@@ -5,7 +5,7 @@ import { ReactNode } from 'react';
 import '@cmssy/types';
 
 interface EditBridgeConfig {
-    editorOrigin: string;
+    editorOrigin: string | string[];
     schemas?: Record<string, BlockSchema>;
     blockMeta?: Record<string, BlockMeta>;
 }

package/dist/client.js

@@ -42,22 +42,37 @@ var PROTOCOL_VERSION = 2;
 
 // src/bridge/messages.ts
 function normalizeOrigin(origin) {
-  if (origin === "*") return "*";
+  const trimmed = origin.trim();
+  if (trimmed === "*") return "*";
   try {
-    return new URL(origin).origin;
+    return new URL(trimmed).origin;
   } catch {
-    return origin;
+    return trimmed;
   }
 }
 function postToEditor(target, editorOrigin, message) {
   target.postMessage(message, normalizeOrigin(editorOrigin));
 }
+function isOriginAllowed(origin, allowed) {
+  const list = Array.isArray(allowed) ? allowed : [allowed];
+  const actual = normalizeOrigin(origin);
+  return list.some((candidate) => {
+    const expected = normalizeOrigin(candidate);
+    return expected === "*" || expected === actual;
+  });
+}
+function resolveInitialTarget(editorOrigin) {
+  const list = (Array.isArray(editorOrigin) ? editorOrigin : [editorOrigin]).map((origin) => normalizeOrigin(origin));
+  if (list.includes("*")) return "*";
+  if (list.length === 1) return list[0];
+  const referrerOrigin = typeof document !== "undefined" && document.referrer ? normalizeOrigin(document.referrer) : "";
+  return list.find((origin) => origin === referrerOrigin) ?? list[0];
+}
 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 (!isOriginAllowed(origin, expectedOrigin)) return null;
   if (!isObject(data)) return null;
   switch (data.type) {
     case "cmssy:select":
@@ -128,6 +143,18 @@ function collectRects() {
   }
   return rects;
 }
+function findBlockEl(blockId) {
+  if (typeof document === "undefined") return null;
+  const escaped = typeof CSS !== "undefined" && typeof CSS.escape === "function" ? CSS.escape(blockId) : blockId.replace(/["\\]/g, "\\$&");
+  try {
+    return document.querySelector(`[data-block-id="${escaped}"]`);
+  } catch {
+    return null;
+  }
+}
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
 function collectLayoutBlocks(rects, pageIds) {
   const out = [];
   if (typeof document === "undefined") return out;
@@ -172,7 +199,9 @@ function useEditBridge(page, config) {
   useEffect(() => {
     if (typeof window === "undefined" || window.parent === window) return;
     const { editorOrigin } = config;
-    if (editorOrigin === "*" && typeof console !== "undefined") {
+    let postTarget = resolveInitialTarget(editorOrigin);
+    const isWildcard = Array.isArray(editorOrigin) ? editorOrigin.includes("*") : editorOrigin === "*";
+    if (isWildcard && typeof console !== "undefined") {
       console.warn(
         "[cmssy] editorOrigin '*' disables origin checks - dev only, do not use in production"
       );
@@ -181,7 +210,7 @@ function useEditBridge(page, config) {
       try {
         const rects = collectRects();
         const pageIds = new Set(blocks.map((b) => b.id));
-        postToEditor(window.parent, editorOrigin, {
+        postToEditor(window.parent, postTarget, {
           type: "cmssy:ready",
           protocolVersion: PROTOCOL_VERSION,
           blocks: [
@@ -209,6 +238,7 @@ function useEditBridge(page, config) {
         editorOrigin
       );
       if (!message) return;
+      postTarget = event.origin;
       if (message.type === "cmssy:patch") {
         if (message.layoutPosition !== void 0) return;
         setPatches((prev) => ({
@@ -233,6 +263,10 @@ function useEditBridge(page, config) {
       } else if (message.type === "cmssy:select") {
         setSelected(message.blockId);
         selectedIdRef.current = message.blockId;
+        findBlockEl(message.blockId)?.scrollIntoView({
+          behavior: prefersReducedMotion() ? "auto" : "smooth",
+          block: "nearest"
+        });
       } else if (message.type === "cmssy:insert") {
         setInserted((prev) => {
           const next = prev.filter((b) => b.blockId !== message.blockId);
@@ -266,7 +300,7 @@ function useEditBridge(page, config) {
       const r = el.getBoundingClientRect();
       const layoutPosition = el.getAttribute("data-layout-position");
       try {
-        postToEditor(window.parent, editorOrigin, {
+        postToEditor(window.parent, postTarget, {
           type: "cmssy:click",
           blockId: id,
           rect: { x: r.x, y: r.y, width: r.width, height: r.height },
@@ -285,13 +319,11 @@ function useEditBridge(page, config) {
         boundsRaf = 0;
         const id = selectedIdRef.current;
         if (!id) return;
-        const el = document.querySelector(
-          `[data-block-id="${id.replace(/["\\]/g, "\\$&")}"]`
-        );
+        const el = findBlockEl(id);
         if (!el) return;
         const r = el.getBoundingClientRect();
         try {
-          postToEditor(window.parent, editorOrigin, {
+          postToEditor(window.parent, postTarget, {
             type: "cmssy:bounds",
             blockId: id,
             rect: { x: r.x, y: r.y, width: r.width, height: r.height }
@@ -381,7 +413,9 @@ function useDragAgent(config) {
   useEffect(() => {
     if (typeof window === "undefined" || window.parent === window) return;
     const { editorOrigin } = config;
-    if (editorOrigin === "*" && typeof console !== "undefined") {
+    let postTarget = resolveInitialTarget(editorOrigin);
+    const isWildcard = Array.isArray(editorOrigin) ? editorOrigin.includes("*") : editorOrigin === "*";
+    if (isWildcard && typeof console !== "undefined") {
       console.warn(
         "[cmssy] editorOrigin '*' disables origin checks - dev only, do not use in production"
       );
@@ -417,7 +451,7 @@ function useDragAgent(config) {
       updateDropY(null);
       resolver.invalidate();
       try {
-        postToEditor(window.parent, editorOrigin, {
+        postToEditor(window.parent, postTarget, {
           type: "cmssy:move",
           protocolVersion: PROTOCOL_VERSION,
           blockId,
@@ -439,6 +473,7 @@ function useDragAgent(config) {
         editorOrigin
       );
       if (!message) return;
+      postTarget = event.origin;
       if (message.type === "cmssy:drag-over") {
         const edge = 64;
         const step = 20;
@@ -450,7 +485,7 @@ function useDragAgent(config) {
         const { index, y } = resolver.resolve(message.y);
         updateDropY(y);
         try {
-          postToEditor(window.parent, editorOrigin, {
+          postToEditor(window.parent, postTarget, {
             type: "cmssy:drag-index",
             protocolVersion: PROTOCOL_VERSION,
             index

package/dist/index.cjs

@@ -239,22 +239,30 @@ function isProtocolCompatible(version) {
 
 // src/bridge/messages.ts
 function normalizeOrigin(origin) {
-  if (origin === "*") return "*";
+  const trimmed = origin.trim();
+  if (trimmed === "*") return "*";
   try {
-    return new URL(origin).origin;
+    return new URL(trimmed).origin;
   } catch {
-    return origin;
+    return trimmed;
   }
 }
 function postToEditor(target, editorOrigin, message) {
   target.postMessage(message, normalizeOrigin(editorOrigin));
 }
+function isOriginAllowed(origin, allowed) {
+  const list = Array.isArray(allowed) ? allowed : [allowed];
+  const actual = normalizeOrigin(origin);
+  return list.some((candidate) => {
+    const expected = normalizeOrigin(candidate);
+    return expected === "*" || expected === actual;
+  });
+}
 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 (!isOriginAllowed(origin, expectedOrigin)) return null;
   if (!isObject(data)) return null;
   switch (data.type) {
     case "cmssy:select":
@@ -749,23 +757,23 @@ function createCmssyClient(input) {
   return {
     config,
     resolveWorkspaceId: resolveWorkspaceId2,
-    query(document, variables = {}, options) {
+    query(document2, variables = {}, options) {
       return graphqlRequest(
         config,
-        document,
+        document2,
         variables,
         options,
         "graphql operation"
       );
     },
-    async queryScoped(document, variables = {}, options = {}) {
+    async queryScoped(document2, variables = {}, options = {}) {
       const { workspaceId: provided, headers, ...rest } = options;
       const workspaceId = provided ?? await resolveWorkspaceId2({ ...rest, headers });
       const hasWorkspaceId = variables.workspaceId !== void 0 && variables.workspaceId !== null;
-      const scopedVariables = /\$workspaceId\b/.test(document) && !hasWorkspaceId ? { ...variables, workspaceId } : variables;
+      const scopedVariables = /\$workspaceId\b/.test(document2) && !hasWorkspaceId ? { ...variables, workspaceId } : variables;
       return graphqlRequest(
         config,
-        document,
+        document2,
         scopedVariables,
         { ...rest, headers: { ...headers, "x-workspace-id": workspaceId } },
         "graphql operation"

package/dist/index.d.cts

@@ -68,7 +68,7 @@ interface PostTarget {
 }
 declare function normalizeOrigin(origin: string): string;
 declare function postToEditor(target: PostTarget, editorOrigin: string, message: AppToEditorMessage): void;
-declare function parseEditorMessage(data: unknown, origin: string, expectedOrigin: string): EditorToAppMessage | null;
+declare function parseEditorMessage(data: unknown, origin: string, expectedOrigin: string | string[]): EditorToAppMessage | null;
 
 declare function getBlockContentForLanguage(content: unknown, locale: string, defaultLocale?: string, availableLocales?: string[]): Record<string, unknown>;
 

package/dist/index.d.ts

@@ -68,7 +68,7 @@ interface PostTarget {
 }
 declare function normalizeOrigin(origin: string): string;
 declare function postToEditor(target: PostTarget, editorOrigin: string, message: AppToEditorMessage): void;
-declare function parseEditorMessage(data: unknown, origin: string, expectedOrigin: string): EditorToAppMessage | null;
+declare function parseEditorMessage(data: unknown, origin: string, expectedOrigin: string | string[]): EditorToAppMessage | null;
 
 declare function getBlockContentForLanguage(content: unknown, locale: string, defaultLocale?: string, availableLocales?: string[]): Record<string, unknown>;
 

package/dist/index.js

@@ -237,22 +237,30 @@ function isProtocolCompatible(version) {
 
 // src/bridge/messages.ts
 function normalizeOrigin(origin) {
-  if (origin === "*") return "*";
+  const trimmed = origin.trim();
+  if (trimmed === "*") return "*";
   try {
-    return new URL(origin).origin;
+    return new URL(trimmed).origin;
   } catch {
-    return origin;
+    return trimmed;
   }
 }
 function postToEditor(target, editorOrigin, message) {
   target.postMessage(message, normalizeOrigin(editorOrigin));
 }
+function isOriginAllowed(origin, allowed) {
+  const list = Array.isArray(allowed) ? allowed : [allowed];
+  const actual = normalizeOrigin(origin);
+  return list.some((candidate) => {
+    const expected = normalizeOrigin(candidate);
+    return expected === "*" || expected === actual;
+  });
+}
 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 (!isOriginAllowed(origin, expectedOrigin)) return null;
   if (!isObject(data)) return null;
   switch (data.type) {
     case "cmssy:select":
@@ -747,23 +755,23 @@ function createCmssyClient(input) {
   return {
     config,
     resolveWorkspaceId: resolveWorkspaceId2,
-    query(document, variables = {}, options) {
+    query(document2, variables = {}, options) {
       return graphqlRequest(
         config,
-        document,
+        document2,
         variables,
         options,
         "graphql operation"
       );
     },
-    async queryScoped(document, variables = {}, options = {}) {
+    async queryScoped(document2, variables = {}, options = {}) {
       const { workspaceId: provided, headers, ...rest } = options;
       const workspaceId = provided ?? await resolveWorkspaceId2({ ...rest, headers });
       const hasWorkspaceId = variables.workspaceId !== void 0 && variables.workspaceId !== null;
-      const scopedVariables = /\$workspaceId\b/.test(document) && !hasWorkspaceId ? { ...variables, workspaceId } : variables;
+      const scopedVariables = /\$workspaceId\b/.test(document2) && !hasWorkspaceId ? { ...variables, workspaceId } : variables;
       return graphqlRequest(
         config,
-        document,
+        document2,
         scopedVariables,
         { ...rest, headers: { ...headers, "x-workspace-id": workspaceId } },
         "graphql operation"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmssy/react",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "React blocks, renderers, data client and editor bridge for cmssy headless sites",
   "keywords": [
     "cmssy",