cms-renderer 0.6.10 → 0.6.11

package/dist/lib/block-renderer.d.ts

@@ -46,6 +46,15 @@ declare function walkReactNode(node: React__default.ReactNode, visitors: WalkVis
     key?: React__default.Key | null;
     inSvg?: boolean;
 }): React__default.ReactNode;
+type ContentMatch = {
+    contentPath: string;
+    value: string;
+};
+/**
+ * Extracts all string values from a content object with their paths.
+ * Returns a Map where keys are string values and values are arrays of content paths.
+ */
+declare function extractContentValues(content: Record<string, unknown>, basePath?: string[]): Map<string, ContentMatch[]>;
 /**
  * Renders the shared CMS edit-mode styles and click-routing script.
  * Place this once at the top of your page when edit_mode is active.
@@ -79,20 +88,30 @@ interface BlockRendererProps {
      */
     path?: string;
 }
+/**
+ * Returns true if each segment of `path` matches the corresponding segment in
+ * `pattern`, where a pattern segment wrapped in `{…}` or `(…)` is a wildcard.
+ */
+declare function pathMatchesPattern(path: string, pattern: string): boolean;
+/**
+ * Resolves the component for `blockType` from the registry.
+ *
+ * When `path` is provided, keys of the form `"/{pattern} BlockType"` are
+ * checked first. The first key whose path pattern matches the current path
+ * and whose block-type suffix matches `blockType` wins. Falls back to a
+ * direct `registry[blockType]` lookup.
+ */
+declare function resolveComponent(registry: Partial<BlockComponentRegistry>, blockType: string, path?: string): BlockComponentRegistry[string] | undefined;
 /**
  * Renders a single block by dispatching to the appropriate component.
  *
  * Uses the ComponentMap pattern: the block's `type` field determines which
  * component renders the block's `content`.
  *
- * In editable mode, wraps the block in a ClientEditableBlock that:
- * - Stamps data-cms-block attributes directly on the component's root element
- * - Injects data-cms-editable spans around matching text nodes
- * - Portals the BlockToolbar into the component's root element
- *
- * Render CmsEditableInit once at the page level to include the shared styles
- * and click-routing script.
+ * In editable mode, renders a hidden sentinel before the component. The shared
+ * CMS overlay script uses that sentinel to stamp attributes on the component's
+ * root element without adding a layout-affecting wrapper.
  */
 declare function BlockRenderer({ block, registry, disableEditable, routeParams, path, }: BlockRendererProps): React__default.JSX.Element | null;
 
-export { BlockRenderer, CmsEditableInit, walkReactNode };
+export { BlockRenderer, CmsEditableInit, extractContentValues, pathMatchesPattern, resolveComponent, walkReactNode };

package/dist/lib/block-renderer.js

@@ -1,6 +1,390 @@
 // lib/block-renderer.tsx
 import React from "react";
-import { ClientEditableBlock } from "./client-editable-block.js";
+
+// lib/cms-overlay-script.ts
+function generateCmsOverlayScript(cmsParentOrigin) {
+  return `
+(function() {
+  if (window.__cmsOverlayInitialized) return;
+  window.__cmsOverlayInitialized = true;
+
+  var CMS_PARENT_ORIGIN = ${JSON.stringify(cmsParentOrigin)};
+
+  var style = document.createElement('style');
+  style.setAttribute('data-cms-overlay', '');
+  style.textContent = \`
+    [data-cms-editable] {
+      cursor: pointer;
+      border-radius: 2px;
+    }
+    [data-cms-editable]:hover {
+      outline: 2px solid #3b82f6;
+      outline-offset: 2px;
+    }
+    #cms-overlay-root {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 0;
+      height: 0;
+      pointer-events: none;
+      z-index: 99998;
+    }
+    #cms-overlay-root > * {
+      pointer-events: auto;
+    }
+    .cms-block-outline {
+      position: fixed;
+      border: 2px solid #3b82f6;
+      border-radius: 4px;
+      pointer-events: none;
+      z-index: 99997;
+      transition: all 0.15s ease;
+    }
+    .cms-block-outline.cms-outline-selected {
+      border-color: #2563eb;
+      border-width: 3px;
+    }
+    .cms-block-cursor {
+      position: fixed;
+      width: 22px;
+      height: 22px;
+      background: radial-gradient(circle, #fff 5px, #000 5px);
+      border-radius: 50%;
+      pointer-events: none;
+      z-index: 99999;
+      transform: translate(-50%, -50%);
+      opacity: 0;
+      transition: opacity 0.1s ease;
+    }
+    .cms-block-cursor.cms-cursor-visible {
+      opacity: 1;
+    }
+    .cms-block-toolbar {
+      position: fixed;
+      display: flex;
+      gap: 4px;
+      background: #1f2937;
+      border-radius: 6px;
+      padding: 4px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.25);
+      z-index: 99999;
+      pointer-events: none;
+      opacity: 0;
+      transform: scale(0.9) translateY(4px);
+      transition: opacity 0.15s ease, transform 0.15s ease;
+    }
+    .cms-block-toolbar.cms-toolbar-visible {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+      pointer-events: auto;
+    }
+    .cms-block-toolbar button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: transparent;
+      color: #9ca3af;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: background 0.15s ease, color 0.15s ease;
+    }
+    .cms-block-toolbar button:hover {
+      background: #374151;
+      color: #fff;
+    }
+    .cms-block-toolbar button.delete:hover {
+      background: #dc2626;
+      color: #fff;
+    }
+    .cms-block-toolbar button:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+    .cms-block-toolbar button:disabled:hover {
+      background: transparent;
+      color: #9ca3af;
+    }
+    .cms-block-toolbar svg {
+      width: 16px;
+      height: 16px;
+    }
+  \`;
+  document.head.appendChild(style);
+
+  function stampBlockElements() {
+    var sentinels = document.querySelectorAll('[data-cms-sentinel]');
+    sentinels.forEach(function(sentinel) {
+      var blockEl = sentinel.nextElementSibling;
+      if (!blockEl) return;
+
+      var blockId = sentinel.getAttribute('data-block-id');
+      var blockType = sentinel.getAttribute('data-block-type');
+
+      blockEl.setAttribute('data-cms-block', '');
+      blockEl.setAttribute('data-block-id', blockId);
+      blockEl.setAttribute('data-block-type', blockType);
+      blockEl.setAttribute('data-cms-editable', '');
+    });
+  }
+
+  stampBlockElements();
+
+  var stampObserver = new MutationObserver(function(mutations) {
+    var needsStamp = mutations.some(function(m) {
+      return m.addedNodes.length > 0;
+    });
+    if (needsStamp) stampBlockElements();
+  });
+  stampObserver.observe(document.body, { childList: true, subtree: true });
+
+  var overlayRoot = document.createElement('div');
+  overlayRoot.id = 'cms-overlay-root';
+  document.body.appendChild(overlayRoot);
+
+  var cursor = document.createElement('div');
+  cursor.className = 'cms-block-cursor';
+  overlayRoot.appendChild(cursor);
+
+  var outline = document.createElement('div');
+  outline.className = 'cms-block-outline';
+  outline.style.display = 'none';
+  overlayRoot.appendChild(outline);
+
+  var selectedOutline = document.createElement('div');
+  selectedOutline.className = 'cms-block-outline cms-outline-selected';
+  selectedOutline.style.display = 'none';
+  overlayRoot.appendChild(selectedOutline);
+
+  var toolbar = document.createElement('div');
+  toolbar.className = 'cms-block-toolbar';
+  toolbar.setAttribute('data-cms-toolbar', '');
+  toolbar.innerHTML = \`
+    <button class="move-up" title="Move up">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M18 15l-6-6-6 6"/>
+      </svg>
+    </button>
+    <button class="move-down" title="Move down">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M6 9l6 6 6-6"/>
+      </svg>
+    </button>
+    <button class="delete" title="Delete">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+      </svg>
+    </button>
+  \`;
+  overlayRoot.appendChild(toolbar);
+
+  var currentBlockId = null;
+  var toolbarVisible = false;
+  var selectedBlockId = null;
+
+  function postToParent(message) {
+    if (!CMS_PARENT_ORIGIN || !window.parent || window.parent === window) {
+      return;
+    }
+    window.parent.postMessage(message, CMS_PARENT_ORIGIN);
+  }
+
+  function sendReadySignal() {
+    postToParent({ type: 'cms-preview-ready' });
+  }
+  sendReadySignal();
+  // The preview iframe can execute before the admin listener is attached.
+  setTimeout(sendReadySignal, 500);
+  setTimeout(sendReadySignal, 1500);
+
+  function getBlockElement(blockId) {
+    return document.querySelector('[data-block-id="' + blockId + '"]');
+  }
+
+  function getAllBlocks() {
+    return Array.from(document.querySelectorAll('[data-cms-block]'));
+  }
+
+  function getBlockIndex(blockId) {
+    var blocks = getAllBlocks();
+    for (var i = 0; i < blocks.length; i++) {
+      if (blocks[i].getAttribute('data-block-id') === blockId) return i;
+    }
+    return -1;
+  }
+
+  function updateOutline(el, outlineEl) {
+    if (!el) {
+      outlineEl.style.display = 'none';
+      return;
+    }
+    var rect = el.getBoundingClientRect();
+    outlineEl.style.display = 'block';
+    outlineEl.style.top = rect.top + 'px';
+    outlineEl.style.left = rect.left + 'px';
+    outlineEl.style.width = rect.width + 'px';
+    outlineEl.style.height = rect.height + 'px';
+  }
+
+  function positionToolbar(x, y) {
+    var rect = toolbar.getBoundingClientRect();
+    var top = Math.max(4, y - rect.height - 12);
+    var left = Math.max(4, Math.min(x - rect.width / 2, window.innerWidth - rect.width - 4));
+    toolbar.style.top = top + 'px';
+    toolbar.style.left = left + 'px';
+  }
+
+  function showToolbar(x, y, blockId) {
+    currentBlockId = blockId;
+    toolbarVisible = true;
+    positionToolbar(x, y);
+    toolbar.classList.add('cms-toolbar-visible');
+
+    var index = getBlockIndex(blockId);
+    var total = getAllBlocks().length;
+    toolbar.querySelector('.move-up').disabled = index <= 0;
+    toolbar.querySelector('.move-down').disabled = index >= total - 1;
+  }
+
+  function hideToolbar() {
+    toolbarVisible = false;
+    toolbar.classList.remove('cms-toolbar-visible');
+  }
+
+  function showCursor(x, y) {
+    cursor.style.top = y + 'px';
+    cursor.style.left = x + 'px';
+    cursor.classList.add('cms-cursor-visible');
+  }
+
+  function hideCursor() {
+    cursor.classList.remove('cms-cursor-visible');
+  }
+
+  document.addEventListener('mouseover', function(e) {
+    if (toolbarVisible) return;
+    var block = e.target.closest('[data-cms-block]');
+    if (block) {
+      updateOutline(block, outline);
+    }
+  });
+
+  document.addEventListener('mouseout', function(e) {
+    var block = e.target.closest('[data-cms-block]');
+    var related = e.relatedTarget ? e.relatedTarget.closest('[data-cms-block]') : null;
+    if (block && block !== related) {
+      outline.style.display = 'none';
+      hideCursor();
+    }
+  });
+
+  document.addEventListener('mousemove', function(e) {
+    if (toolbarVisible) return;
+    var block = e.target.closest('[data-cms-block]');
+    if (block) {
+      showCursor(e.clientX, e.clientY);
+    }
+  });
+
+  document.addEventListener('contextmenu', function(e) {
+    if (e.target.closest('[data-cms-toolbar]')) return;
+    var block = e.target.closest('[data-cms-block]');
+    if (block) {
+      if (toolbarVisible) return;
+      e.preventDefault();
+      hideCursor();
+      outline.style.display = 'none';
+      var blockId = block.getAttribute('data-block-id');
+      showToolbar(e.clientX, e.clientY, blockId);
+    }
+  });
+
+  document.addEventListener('click', function(e) {
+    if (toolbarVisible && !e.target.closest('[data-cms-toolbar]')) {
+      var block = e.target.closest('[data-cms-block]');
+      if (!block || block.getAttribute('data-block-id') !== currentBlockId) {
+        hideToolbar();
+      }
+    }
+
+    if (e.target.closest('[data-cms-toolbar]')) return;
+
+    var editable = e.target.closest('[data-cms-editable]');
+    if (editable) {
+      postToParent({
+        type: 'cms-editable-click',
+        blockId: editable.getAttribute('data-block-id'),
+        blockType: editable.getAttribute('data-block-type'),
+        contentPath: editable.getAttribute('data-content-path')
+      });
+      return;
+    }
+
+    var block = e.target.closest('[data-cms-block]');
+    if (block) {
+      postToParent({
+        type: 'cms-editable-click',
+        blockId: block.getAttribute('data-block-id'),
+        blockType: block.getAttribute('data-block-type'),
+        contentPath: null
+      });
+    }
+  });
+
+  toolbar.querySelector('.move-up').addEventListener('click', function() {
+    if (!currentBlockId) return;
+    postToParent({ type: 'cms-block-move', blockId: currentBlockId, direction: 'up' });
+    hideToolbar();
+  });
+
+  toolbar.querySelector('.move-down').addEventListener('click', function() {
+    if (!currentBlockId) return;
+    postToParent({ type: 'cms-block-move', blockId: currentBlockId, direction: 'down' });
+    hideToolbar();
+  });
+
+  toolbar.querySelector('.delete').addEventListener('click', function() {
+    if (!currentBlockId) return;
+    postToParent({ type: 'cms-block-delete', blockId: currentBlockId });
+    hideToolbar();
+  });
+
+  window.addEventListener('scroll', function() {
+    hideCursor();
+    hideToolbar();
+    if (selectedBlockId) {
+      var el = getBlockElement(selectedBlockId);
+      updateOutline(el, selectedOutline);
+    }
+  }, { passive: true, capture: true });
+
+  window.addEventListener('resize', function() {
+    if (selectedBlockId) {
+      var el = getBlockElement(selectedBlockId);
+      updateOutline(el, selectedOutline);
+    }
+  }, { passive: true });
+
+  window.addEventListener('message', function(e) {
+    if (CMS_PARENT_ORIGIN && e.origin !== CMS_PARENT_ORIGIN) return;
+    if (e.source !== window.parent) return;
+
+    if (e.data && e.data.type === 'cms-select-block') {
+      selectedBlockId = e.data.blockId || null;
+      if (selectedBlockId) {
+        var el = getBlockElement(selectedBlockId);
+        updateOutline(el, selectedOutline);
+      } else {
+        selectedOutline.style.display = 'none';
+      }
+    }
+  });
+})();
+`;
+}
 
 // lib/cms-post-message.ts
 var CMS_PARENT_ORIGIN_PARAM = "cms_parent_origin";
@@ -128,112 +512,15 @@ function CmsEditableInit({
   cmsUrl,
   cmsParentOrigin
 }) {
-  const cmsParentOriginJson = JSON.stringify(
-    getCmsParentTargetOrigin(cmsUrl, cmsParentOrigin) ?? ""
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("style", { children: `
-        [data-cms-editable] {
-          cursor: pointer;
-          border-radius: 2px;
-        }
-        [data-cms-editable]:hover {
-          outline: 2px solid #3b82f6;
-          outline-offset: 2px;
-        }
-        .cms-block-toolbar {
-          position: fixed;
-          display: flex;
-          gap: 4px;
-          background: #1f2937;
-          border-radius: 6px;
-          padding: 4px;
-          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-          transition: opacity 0.15s ease;
-          z-index: 99999;
-          pointer-events: auto;
-        }
-        .cms-block-toolbar button {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 28px;
-          height: 28px;
-          border: none;
-          background: transparent;
-          color: #9ca3af;
-          border-radius: 4px;
-          cursor: pointer;
-          transition: background 0.15s ease, color 0.15s ease;
-        }
-        .cms-block-toolbar button:hover {
-          background: #374151;
-          color: #fff;
-        }
-        .cms-block-toolbar button.delete:hover {
-          background: #dc2626;
-          color: #fff;
-        }
-        .cms-block-toolbar button:disabled {
-          opacity: 0.4;
-          cursor: not-allowed;
-        }
-        .cms-block-toolbar button:disabled:hover {
-          background: transparent;
-          color: #9ca3af;
-        }
-        .cms-block-toolbar svg {
-          width: 16px;
-          height: 16px;
-        }
-      ` }),
-    /* @__PURE__ */ jsx(
-      "script",
-      {
-        dangerouslySetInnerHTML: {
-          __html: `
-            (function() {
-              var cmsParentOrigin = ${cmsParentOriginJson};
-              if (!window.__cmsEditableInitialized) {
-                window.__cmsEditableInitialized = true;
-
-                document.addEventListener('click', function(e) {
-                  if (e.target.closest('.cms-block-toolbar')) return;
-
-                  var editableTarget = e.target.closest('[data-cms-editable]');
-                  if (editableTarget) {
-                    var message = {
-                      type: 'cms-editable-click',
-                      blockId: editableTarget.getAttribute('data-block-id'),
-                      blockType: editableTarget.getAttribute('data-block-type'),
-                      contentPath: editableTarget.getAttribute('data-content-path')
-                    };
-                    if (cmsParentOrigin && window.parent && window.parent !== window) {
-                      window.parent.postMessage(message, cmsParentOrigin);
-                    }
-                    return;
-                  }
-
-                  var blockTarget = e.target.closest('[data-cms-block]');
-                  if (blockTarget) {
-                    var message = {
-                      type: 'cms-editable-click',
-                      blockId: blockTarget.getAttribute('data-block-id'),
-                      blockType: blockTarget.getAttribute('data-block-type'),
-                      contentPath: null
-                    };
-                    if (cmsParentOrigin && window.parent && window.parent !== window) {
-                      window.parent.postMessage(message, cmsParentOrigin);
-                    }
-                  }
-                });
-              }
-            })();
-          `
-        }
+  const targetOrigin = getCmsParentTargetOrigin(cmsUrl, cmsParentOrigin) ?? "";
+  return /* @__PURE__ */ jsx(
+    "script",
+    {
+      dangerouslySetInnerHTML: {
+        __html: generateCmsOverlayScript(targetOrigin)
       }
-    )
-  ] });
+    }
+  );
 }
 function pathMatchesPattern(path, pattern) {
   const pathSegs = path.split("/").filter(Boolean);
@@ -284,13 +571,26 @@ function BlockRenderer({
   if (disableEditable) {
     return component;
   }
-  const contentValueMap = extractContentValues(block.content);
-  const contentEntries = Array.from(contentValueMap.entries()).map(([value, matches]) => ({ v: value, p: matches[0]?.contentPath })).filter((e) => !!e.p);
-  return /* @__PURE__ */ jsx(ClientEditableBlock, { blockId: block.id, blockType: block.type, contentEntries, children: component });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-cms-sentinel": "",
+        "data-block-id": block.id,
+        "data-block-type": block.type,
+        style: { display: "none" },
+        "aria-hidden": "true"
+      }
+    ),
+    component
+  ] });
 }
 export {
   BlockRenderer,
   CmsEditableInit,
+  extractContentValues,
+  pathMatchesPattern,
+  resolveComponent,
   walkReactNode
 };
 //# sourceMappingURL=block-renderer.js.map