cms-renderer 0.6.12 → 0.7.0

package/dist/lib/renderer.js

@@ -474,7 +474,7 @@ function generateCmsOverlayScript(cmsParentOrigin) {
       border-radius: 2px;
     }
     [data-cms-editable]:not([data-cms-block]):hover {
-      outline: 2px solid #3b82f6;
+      outline: 2px solid var(--component-accent, #A78BFA);
       outline-offset: 2px;
     }
     #cms-overlay-root {
@@ -486,20 +486,43 @@ function generateCmsOverlayScript(cmsParentOrigin) {
       pointer-events: none;
       z-index: 99998;
     }
-    #cms-overlay-root > * {
+    #cms-overlay-root > *:not(.cms-block-toolbar) {
       pointer-events: none;
     }
     .cms-block-outline {
       position: fixed;
-      border: 2px solid #3b82f6;
+      box-sizing: border-box;
+      border: 4px solid var(--component-accent, #A78BFA);
       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;
+      border-color: var(--component-accent, #A78BFA);
+      border-width: 4px;
+    }
+    .cms-block-label {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: none;
+      max-width: 240px;
+      padding: 2px 8px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 1.4;
+      color: #fff;
+      background: var(--component-accent, #A78BFA);
+      border-radius: 4px 4px 4px 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      pointer-events: none;
+    }
+    .cms-block-label.cms-label-visible {
+      display: block;
     }
     .cms-block-cursor {
       position: fixed;
@@ -583,9 +606,69 @@ function generateCmsOverlayScript(cmsParentOrigin) {
       blockEl.setAttribute('data-cms-block', '');
       blockEl.setAttribute('data-block-id', blockId);
       blockEl.setAttribute('data-block-type', blockType);
+
+      injectEditableSpans(
+        blockEl,
+        blockId,
+        blockType,
+        sentinel.getAttribute('data-content-entries')
+      );
     });
   }
 
+  function injectEditableSpans(blockEl, blockId, blockType, rawEntries) {
+    if (!rawEntries || blockEl.querySelector('[data-cms-editable][data-content-path]')) return;
+
+    var entries;
+    try {
+      entries = JSON.parse(rawEntries);
+    } catch (_) {
+      return;
+    }
+    if (!Array.isArray(entries) || entries.length === 0) return;
+
+    var used = {};
+    var walker = document.createTreeWalker(blockEl, NodeFilter.SHOW_TEXT, null);
+    var textNodes = [];
+    var node = walker.nextNode();
+    while (node !== null) {
+      if (node.nodeValue && node.nodeValue.trim()) {
+        textNodes.push(node);
+      }
+      node = walker.nextNode();
+    }
+
+    for (var i = 0; i < textNodes.length; i++) {
+      var textNode = textNodes[i];
+      var parentEl = textNode.parentElement;
+      if (!parentEl || parentEl.closest('svg') || parentEl.closest('[data-cms-editable]')) {
+        continue;
+      }
+
+      var text = textNode.nodeValue;
+      if (!text) continue;
+
+      for (var j = 0; j < entries.length; j++) {
+        var entry = entries[j];
+        if (!entry || typeof entry.v !== 'string' || typeof entry.p !== 'string' || used[entry.p]) {
+          continue;
+        }
+        if (text.trim() !== entry.v.trim()) continue;
+
+        used[entry.p] = true;
+        var span = document.createElement('span');
+        span.setAttribute('data-cms-editable', '');
+        span.setAttribute('data-block-id', blockId);
+        span.setAttribute('data-block-type', blockType);
+        span.setAttribute('data-content-path', entry.p);
+        span.setAttribute('contenteditable', 'true');
+        parentEl.insertBefore(span, textNode);
+        span.appendChild(textNode);
+        break;
+      }
+    }
+  }
+
   stampBlockElements();
 
   var stampObserver = new MutationObserver(function(mutations) {
@@ -604,15 +687,19 @@ function generateCmsOverlayScript(cmsParentOrigin) {
   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);
+  function createOutline(extraClass) {
+    var el = document.createElement('div');
+    el.className = 'cms-block-outline' + (extraClass ? ' ' + extraClass : '');
+    el.style.display = 'none';
+    var label = document.createElement('span');
+    label.className = 'cms-block-label';
+    el.appendChild(label);
+    overlayRoot.appendChild(el);
+    return el;
+  }
 
-  var selectedOutline = document.createElement('div');
-  selectedOutline.className = 'cms-block-outline cms-outline-selected';
-  selectedOutline.style.display = 'none';
-  overlayRoot.appendChild(selectedOutline);
+  var outline = createOutline();
+  var selectedOutline = createOutline('cms-outline-selected');
 
   var toolbar = document.createElement('div');
   toolbar.className = 'cms-block-toolbar';
@@ -640,35 +727,19 @@ function generateCmsOverlayScript(cmsParentOrigin) {
   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);
+  // In edit mode we hijack every link/button activation. Following a link or
+  // firing a button's own handler makes inline editing on that element
+  // impossible (the click navigates away or triggers an action instead of
+  // placing the caret). We block the default action and stop the event from
+  // reaching the element's own listeners, while still letting our selection /
+  // edit routing run below.
+  function blockInteractiveActivation(e) {
+    var interactive = e.target.closest(
+      'a[href], button, [role="button"], input[type="submit"], input[type="button"], input[type="reset"]'
+    );
+    if (interactive) {
+      e.preventDefault();
+      e.stopPropagation();
     }
   }
 
@@ -703,9 +774,18 @@ function generateCmsOverlayScript(cmsParentOrigin) {
     return -1;
   }
 
+  function formatBlockType(type) {
+    if (!type) return 'Block';
+    return type
+      .replace(/[-_]+/g, ' ')
+      .replace(/\\b\\w/g, function(c) { return c.toUpperCase(); });
+  }
+
   function updateOutline(el, outlineEl) {
+    var label = outlineEl.querySelector('.cms-block-label');
     if (!el) {
       outlineEl.style.display = 'none';
+      if (label) label.classList.remove('cms-label-visible');
       return;
     }
     var rect = el.getBoundingClientRect();
@@ -714,6 +794,10 @@ function generateCmsOverlayScript(cmsParentOrigin) {
     outlineEl.style.left = rect.left + 'px';
     outlineEl.style.width = rect.width + 'px';
     outlineEl.style.height = rect.height + 'px';
+    if (label) {
+      label.textContent = formatBlockType(el.getAttribute('data-block-type'));
+      label.classList.add('cms-label-visible');
+    }
   }
 
   function positionToolbar(x, y) {
@@ -790,17 +874,19 @@ function generateCmsOverlayScript(cmsParentOrigin) {
   });
 
   document.addEventListener('click', function(e) {
-    preserveEditParamsOnNavigation(e);
+    // The floating toolbar is interactive (and its buttons are real <button>s);
+    // bail out before any blocking so its own handlers run.
+    if (e.target.closest('[data-cms-toolbar]')) return;
 
-    if (toolbarVisible && !e.target.closest('[data-cms-toolbar]')) {
-      var block = e.target.closest('[data-cms-block]');
-      if (!block || block.getAttribute('data-block-id') !== currentBlockId) {
+    blockInteractiveActivation(e);
+
+    if (toolbarVisible) {
+      var activeBlock = e.target.closest('[data-cms-block]');
+      if (!activeBlock || activeBlock.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({
@@ -931,6 +1017,27 @@ 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
@@ -979,6 +1086,7 @@ function BlockRenderer({
   block,
   registry,
   disableEditable,
+  enableContentEditable,
   routeParams,
   path
 }) {
@@ -994,6 +1102,7 @@ function BlockRenderer({
   if (disableEditable) {
     return component;
   }
+  const contentEntries = enableContentEditable ? [...extractContentValues(block.content).values()].flat().map(({ value, contentPath }) => ({ v: value, p: contentPath })) : void 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "span",
@@ -1001,6 +1110,7 @@ function BlockRenderer({
         "data-cms-sentinel": "",
         "data-block-id": block.id,
         "data-block-type": block.type,
+        "data-content-entries": contentEntries ? JSON.stringify(contentEntries) : void 0,
         style: { display: "none" },
         "aria-hidden": "true"
       }
@@ -1034,7 +1144,7 @@ async function renderParametricRoute({
   apiKey,
   cmsUrl,
   websiteId: providedWebsiteId
-}) {
+}, { preview = false } = {}) {
   const websiteId = getWebsiteId(providedWebsiteId);
   const { slug } = "then" in params ? await params : params;
   const resolvedSearchParams = searchParams && "then" in searchParams ? await searchParams : searchParams;
@@ -1049,10 +1159,11 @@ async function renderParametricRoute({
       }
     }
   }
-  const editModeParam = resolvedSearchParams?.edit_mode;
-  const editMode = editModeParam === true || editModeParam === "true" || editModeParam === "1";
   const cmsParentOriginParam = resolvedSearchParams?.cms_parent_origin;
   const cmsParentOrigin = typeof cmsParentOriginParam === "boolean" ? void 0 : Array.isArray(cmsParentOriginParam) ? cmsParentOriginParam[0] : cmsParentOriginParam;
+  const previewMode = preview === true;
+  const editModeParam = resolvedSearchParams?.edit_mode;
+  const editMode = previewMode || editModeParam === true || editModeParam === "true" || editModeParam === "1";
   const rawPath = `/${slug.join("/")}`;
   const path = normalizePath(rawPath);
   if (/\.[a-zA-Z0-9]+$/.test(path)) {
@@ -1092,7 +1203,9 @@ async function renderParametricRoute({
     ]);
     const blocks = [];
     for (const block of blockResults) {
-      if (!block || block.published_content === null) continue;
+      if (!block) continue;
+      const blockContent = previewMode ? block.draft_content : block.published_content;
+      if (blockContent == null) continue;
       let content = null;
       if (aiPreviewIndex !== null) {
         const generatedBlock = generatedBlocks[block.id];
@@ -1102,7 +1215,7 @@ async function renderParametricRoute({
           content = variants[variantIndex].content;
         }
       }
-      content = content ?? block.published_content;
+      content = content ?? blockContent;
       if (!content) continue;
       if (block.schema_name === "article") {
         const article = normalizeArticleContent(content);
@@ -1150,6 +1263,7 @@ async function renderParametricRoute({
             block,
             registry: registry ?? {},
             disableEditable: !editMode,
+            enableContentEditable: previewMode,
             routeParams,
             path
           },
@@ -1178,6 +1292,16 @@ async function ParametricRoutePage(props) {
   }
   return result.node;
 }
+async function ParametricRoutePreviewPage(props) {
+  const result = await renderParametricRoute(props, { preview: true });
+  if (result.status === "not_found") {
+    notFound();
+  }
+  if (result.status === "error") {
+    throw result.error;
+  }
+  return result.node;
+}
 async function generateMetadata({
   params,
   apiKey,
@@ -1204,6 +1328,7 @@ async function generateMetadata({
   }
 }
 export {
+  ParametricRoutePreviewPage,
   ParametricRoutePage as default,
   generateMetadata
 };