cms-renderer 0.6.10 → 0.6.12

package/dist/lib/renderer.js

@@ -453,7 +453,427 @@ var LanguageSchema = z9.object({
 
 // 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-block],
+    [data-cms-editable] {
+      cursor: pointer;
+    }
+    [data-cms-editable] {
+      border-radius: 2px;
+    }
+    [data-cms-editable]:not([data-cms-block]):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: none;
+    }
+    .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);
+    });
+  }
+
+  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 decoratePreviewUrl(rawHref) {
+    if (!rawHref) return rawHref;
+    try {
+      var url = new URL(rawHref, window.location.href);
+      if (url.origin !== window.location.origin) return rawHref;
+      url.searchParams.set('edit_mode', 'true');
+      if (CMS_PARENT_ORIGIN) {
+        url.searchParams.set('cms_parent_origin', CMS_PARENT_ORIGIN);
+      }
+      return url.toString();
+    } catch (_) {
+      return rawHref;
+    }
+  }
+
+  function preserveEditParamsOnNavigation(e) {
+    if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+      return;
+    }
+
+    var anchor = e.target.closest('a[href]');
+    if (!anchor || (anchor.target && anchor.target !== '_self') || anchor.hasAttribute('download')) {
+      return;
+    }
+
+    var href = anchor.getAttribute('href');
+    var decorated = decoratePreviewUrl(href);
+    if (decorated && decorated !== href) {
+      anchor.setAttribute('href', decorated);
+    }
+  }
+
+  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) {
+    preserveEditParamsOnNavigation(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
+      });
+    }
+  }, true);
+
+  toolbar.querySelector('.move-up').addEventListener('click', function() {
+    if (!currentBlockId) return;
+    postToParent({ type: 'cms-block-action', action: 'move-up', blockId: currentBlockId });
+    hideToolbar();
+  });
+
+  toolbar.querySelector('.move-down').addEventListener('click', function() {
+    if (!currentBlockId) return;
+    postToParent({ type: 'cms-block-action', action: 'move-down', blockId: currentBlockId });
+    hideToolbar();
+  });
+
+  toolbar.querySelector('.delete').addEventListener('click', function() {
+    if (!currentBlockId) return;
+    postToParent({ type: 'cms-block-action', action: '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";
@@ -511,137 +931,19 @@ function getCmsParentTargetOrigin(preferredCmsUrl, explicitParentOrigin) {
 
 // lib/block-renderer.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function extractContentValues(content, basePath = []) {
-  const map = /* @__PURE__ */ new Map();
-  function walk(obj, path) {
-    if (typeof obj === "string" && obj.trim() !== "") {
-      const contentPath = path.join(".");
-      const existing = map.get(obj) || [];
-      existing.push({ contentPath, value: obj });
-      map.set(obj, existing);
-    } else if (Array.isArray(obj)) {
-      for (let index = 0; index < obj.length; index++) {
-        walk(obj[index], [...path, String(index)]);
-      }
-    } else if (obj && typeof obj === "object") {
-      for (const [key, value] of Object.entries(obj)) {
-        walk(value, [...path, key]);
-      }
-    }
-  }
-  walk(content, basePath);
-  return map;
-}
 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);
@@ -692,9 +994,19 @@ 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
+  ] });
 }
 
 // lib/parametric-route.tsx
@@ -724,11 +1036,11 @@ async function renderParametricRoute({
   websiteId: providedWebsiteId
 }) {
   const websiteId = getWebsiteId(providedWebsiteId);
-  const { slug } = await params;
-  const resolvedSearchParams = await searchParams;
+  const { slug } = "then" in params ? await params : params;
+  const resolvedSearchParams = searchParams && "then" in searchParams ? await searchParams : searchParams;
   let aiPreviewIndex = null;
   const aiPreviewParam = resolvedSearchParams?.ai_preview;
-  if (aiPreviewParam) {
+  if (aiPreviewParam && typeof aiPreviewParam !== "boolean") {
     const paramValue = Array.isArray(aiPreviewParam) ? aiPreviewParam[0] : aiPreviewParam;
     if (paramValue) {
       const parsed = parseInt(paramValue, 10);
@@ -738,9 +1050,9 @@ async function renderParametricRoute({
     }
   }
   const editModeParam = resolvedSearchParams?.edit_mode;
-  const editMode = editModeParam === "true" || editModeParam === "1";
+  const editMode = editModeParam === true || editModeParam === "true" || editModeParam === "1";
   const cmsParentOriginParam = resolvedSearchParams?.cms_parent_origin;
-  const cmsParentOrigin = Array.isArray(cmsParentOriginParam) ? cmsParentOriginParam[0] : cmsParentOriginParam;
+  const cmsParentOrigin = typeof cmsParentOriginParam === "boolean" ? void 0 : Array.isArray(cmsParentOriginParam) ? cmsParentOriginParam[0] : cmsParentOriginParam;
   const rawPath = `/${slug.join("/")}`;
   const path = normalizePath(rawPath);
   if (/\.[a-zA-Z0-9]+$/.test(path)) {