@cmssy/react 12.2.0 → 12.4.0

package/dist/client.cjs

@@ -38,6 +38,34 @@ function blocksToMeta(blocks, defaults = {}) {
   }
   return out;
 }
+
+// src/bridge/shortcut-keys.ts
+function isMacPlatform() {
+  const platform = typeof navigator !== "undefined" ? navigator.platform : void 0;
+  return typeof platform === "string" && platform.toUpperCase().includes("MAC");
+}
+function isTypingTarget(target) {
+  const el = target;
+  if (!el || typeof el.tagName !== "string") return false;
+  return el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.isContentEditable === true;
+}
+function resolveShortcutAction(event, isMac, isTyping) {
+  if (event.repeat || event.isComposing) return null;
+  const modifier = isMac ? event.metaKey : event.ctrlKey;
+  const key = event.key.length === 1 ? event.key.toLowerCase() : event.key;
+  if (modifier && key === "z") {
+    if (isTyping) return null;
+    return event.shiftKey ? "redo" : "undo";
+  }
+  if (modifier && key === "s") return "save";
+  if (modifier && key === "d") return isTyping ? null : "duplicate";
+  const isDeleteKey = key === "Delete" || isMac && key === "Backspace";
+  if (isDeleteKey) return isTyping ? null : "delete";
+  if (key === "Escape") return "escape";
+  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();
@@ -94,6 +122,8 @@ function useEditBridge(page, config) {
   const selectedIdRef = react.useRef(null);
   const postSafeRef = react.useRef(() => {
   });
+  const emitBoundsRef = react.useRef(() => {
+  });
   const { id: pageId, blocks } = page;
   const blocksKey = blocks.map((b) => `${b.id}:${b.type}`).join("|");
   react.useEffect(() => {
@@ -141,7 +171,8 @@ function useEditBridge(page, config) {
             ...collectLayoutBlocks(rects, pageIds)
           ],
           schemas: config.schemas ?? /* @__PURE__ */ Object.create(null),
-          blockMeta: config.blockMeta ?? /* @__PURE__ */ Object.create(null)
+          blockMeta: config.blockMeta ?? /* @__PURE__ */ Object.create(null),
+          capabilities: ["shortcuts"]
         });
       } catch (error) {
         if (typeof console !== "undefined") {
@@ -236,6 +267,20 @@ function useEditBridge(page, config) {
         ...layoutPosition !== null ? { layoutPosition } : {}
       });
     };
+    const onKeyDown = (event) => {
+      const action = resolveShortcutAction(
+        event,
+        isMacPlatform(),
+        isTypingTarget(event.target)
+      );
+      if (!action) return;
+      event.preventDefault();
+      postSafe({
+        type: "cmssy:shortcut",
+        protocolVersion: core.PROTOCOL_VERSION,
+        action
+      });
+    };
     let boundsRaf = 0;
     let boundsPending = false;
     const emitSelectedBounds = () => {
@@ -256,8 +301,10 @@ function useEditBridge(page, config) {
         });
       });
     };
+    emitBoundsRef.current = emitSelectedBounds;
     window.addEventListener("message", handler);
     document.addEventListener("click", onClick, { capture: true });
+    document.addEventListener("keydown", onKeyDown, { capture: true });
     window.addEventListener("scroll", emitSelectedBounds, {
       capture: true,
       passive: true
@@ -268,12 +315,16 @@ function useEditBridge(page, config) {
       if (boundsRaf) cancelAnimationFrame(boundsRaf);
       window.removeEventListener("message", handler);
       document.removeEventListener("click", onClick, { capture: true });
+      document.removeEventListener("keydown", onKeyDown, { capture: true });
       window.removeEventListener("scroll", emitSelectedBounds, {
         capture: true
       });
       window.removeEventListener("resize", emitSelectedBounds);
     };
   }, [config.editorOrigin, pageId, blocksKey]);
+  react.useEffect(() => {
+    emitBoundsRef.current();
+  });
   react.useEffect(() => {
     if (typeof window === "undefined" || window.parent === window) return;
     const notifySelectionGone = () => {

package/dist/client.js

@@ -36,6 +36,34 @@ function blocksToMeta(blocks, defaults = {}) {
   }
   return out;
 }
+
+// src/bridge/shortcut-keys.ts
+function isMacPlatform() {
+  const platform = typeof navigator !== "undefined" ? navigator.platform : void 0;
+  return typeof platform === "string" && platform.toUpperCase().includes("MAC");
+}
+function isTypingTarget(target) {
+  const el = target;
+  if (!el || typeof el.tagName !== "string") return false;
+  return el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.isContentEditable === true;
+}
+function resolveShortcutAction(event, isMac, isTyping) {
+  if (event.repeat || event.isComposing) return null;
+  const modifier = isMac ? event.metaKey : event.ctrlKey;
+  const key = event.key.length === 1 ? event.key.toLowerCase() : event.key;
+  if (modifier && key === "z") {
+    if (isTyping) return null;
+    return event.shiftKey ? "redo" : "undo";
+  }
+  if (modifier && key === "s") return "save";
+  if (modifier && key === "d") return isTyping ? null : "duplicate";
+  const isDeleteKey = key === "Delete" || isMac && key === "Backspace";
+  if (isDeleteKey) return isTyping ? null : "delete";
+  if (key === "Escape") return "escape";
+  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();
@@ -92,6 +120,8 @@ function useEditBridge(page, config) {
   const selectedIdRef = useRef(null);
   const postSafeRef = useRef(() => {
   });
+  const emitBoundsRef = useRef(() => {
+  });
   const { id: pageId, blocks } = page;
   const blocksKey = blocks.map((b) => `${b.id}:${b.type}`).join("|");
   useEffect(() => {
@@ -139,7 +169,8 @@ function useEditBridge(page, config) {
             ...collectLayoutBlocks(rects, pageIds)
           ],
           schemas: config.schemas ?? /* @__PURE__ */ Object.create(null),
-          blockMeta: config.blockMeta ?? /* @__PURE__ */ Object.create(null)
+          blockMeta: config.blockMeta ?? /* @__PURE__ */ Object.create(null),
+          capabilities: ["shortcuts"]
         });
       } catch (error) {
         if (typeof console !== "undefined") {
@@ -234,6 +265,20 @@ function useEditBridge(page, config) {
         ...layoutPosition !== null ? { layoutPosition } : {}
       });
     };
+    const onKeyDown = (event) => {
+      const action = resolveShortcutAction(
+        event,
+        isMacPlatform(),
+        isTypingTarget(event.target)
+      );
+      if (!action) return;
+      event.preventDefault();
+      postSafe({
+        type: "cmssy:shortcut",
+        protocolVersion: PROTOCOL_VERSION,
+        action
+      });
+    };
     let boundsRaf = 0;
     let boundsPending = false;
     const emitSelectedBounds = () => {
@@ -254,8 +299,10 @@ function useEditBridge(page, config) {
         });
       });
     };
+    emitBoundsRef.current = emitSelectedBounds;
     window.addEventListener("message", handler);
     document.addEventListener("click", onClick, { capture: true });
+    document.addEventListener("keydown", onKeyDown, { capture: true });
     window.addEventListener("scroll", emitSelectedBounds, {
       capture: true,
       passive: true
@@ -266,12 +313,16 @@ function useEditBridge(page, config) {
       if (boundsRaf) cancelAnimationFrame(boundsRaf);
       window.removeEventListener("message", handler);
       document.removeEventListener("click", onClick, { capture: true });
+      document.removeEventListener("keydown", onKeyDown, { capture: true });
       window.removeEventListener("scroll", emitSelectedBounds, {
         capture: true
       });
       window.removeEventListener("resize", emitSelectedBounds);
     };
   }, [config.editorOrigin, pageId, blocksKey]);
+  useEffect(() => {
+    emitBoundsRef.current();
+  });
   useEffect(() => {
     if (typeof window === "undefined" || window.parent === window) return;
     const notifySelectionGone = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmssy/react",
-  "version": "12.2.0",
+  "version": "12.4.0",
   "description": "React blocks, renderers, data client and editor bridge for cmssy headless sites",
   "keywords": [
     "cmssy",
@@ -97,7 +97,7 @@
   },
   "dependencies": {
     "@cmssy/types": "0.35.0",
-    "@cmssy/core": "12.2.0"
+    "@cmssy/core": "12.4.0"
   },
   "scripts": {
     "build": "tsup",