cms-renderer 0.6.12 → 0.6.13

package/dist/lib/docs-markdown.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as react from 'react';
 import { ReactNode } from 'react';
 
 interface DocsMarkdownProps {
@@ -13,6 +13,6 @@ interface DocsMarkdownProps {
 }
 declare function markdownStartsWithHeading(markdown: string): boolean;
 declare function initMarkdown(): Promise<void>;
-declare function DocsMarkdown({ content, className, renderImage, }: DocsMarkdownProps): Promise<React.JSX.Element>;
+declare function DocsMarkdown({ content, className, renderImage, }: DocsMarkdownProps): Promise<react.JSX.Element>;
 
 export { DocsMarkdown, type DocsMarkdownProps, initMarkdown, markdownStartsWithHeading };

package/dist/lib/parametric-route.d.ts

@@ -25,6 +25,19 @@ type ParametricRouteProps = CmsConfig & {
     };
     registry?: Partial<BlockComponentRegistry>;
 };
+/**
+ * Render-time options that are NOT part of the page props surface. `preview` is
+ * supplied only by the dedicated preview page wrapper (`ParametricRoutePreviewPage`),
+ * never by query params, so the production page can never accidentally opt into
+ * edit overlays or draft content.
+ */
+type RenderParametricRouteOptions = {
+    /**
+     * Renders the preview experience: forces the edit-mode overlay/hovers and pulls
+     * block content from `draft_content` instead of `published_content`.
+     */
+    preview?: boolean;
+};
 type ParametricRouteResult = {
     status: 'ok';
     node: ReactNode;
@@ -40,6 +53,6 @@ declare function getWebsiteId(providedWebsiteId?: string): string;
  * Renders CMS-backed blocks for a multi-segment path. Maps NOT_FOUND-style API
  * outcomes to `{ status: 'not_found' }` instead of throwing.
  */
-declare function renderParametricRoute({ params, searchParams, registry, apiKey, cmsUrl, websiteId: providedWebsiteId, }: ParametricRouteProps): Promise<ParametricRouteResult>;
+declare function renderParametricRoute({ params, searchParams, registry, apiKey, cmsUrl, websiteId: providedWebsiteId, }: ParametricRouteProps, { preview }?: RenderParametricRouteOptions): Promise<ParametricRouteResult>;
 
-export { type ParametricRouteProps, type ParametricRouteResult, getWebsiteId, renderParametricRoute };
+export { type ParametricRouteProps, type ParametricRouteResult, type RenderParametricRouteOptions, getWebsiteId, renderParametricRoute };

package/dist/lib/parametric-route.js

@@ -414,7 +414,7 @@ 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 {
@@ -511,9 +511,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) {
@@ -859,6 +919,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
@@ -907,6 +988,7 @@ function BlockRenderer({
   block,
   registry,
   disableEditable,
+  enableContentEditable,
   routeParams,
   path
 }) {
@@ -922,6 +1004,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",
@@ -929,6 +1012,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"
       }
@@ -1010,7 +1094,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;
@@ -1025,10 +1109,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)) {
@@ -1068,7 +1153,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];
@@ -1078,7 +1165,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);
@@ -1126,6 +1213,7 @@ async function renderParametricRoute({
             block,
             registry: registry ?? {},
             disableEditable: !editMode,
+            enableContentEditable: previewMode,
             routeParams,
             path
           },