cms-renderer 0.5.0 → 0.5.2

package/dist/lib/client-editable-block.js

@@ -3,19 +3,23 @@
 
 // lib/client-editable-block.tsx
 import { useCallback, useLayoutEffect, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function ClientEditableBlock({
   blockId,
   blockType,
   contentEntries,
-  children
+  children,
+  blockProps
 }) {
-  const containerRef = useRef(null);
+  const sentinelRef = useRef(null);
   const observerRef = useRef(null);
   const isInjectingRef = useRef(false);
+  const getBlockRoot = useCallback(() => {
+    return sentinelRef.current?.nextElementSibling ?? null;
+  }, []);
   const injectSpans = useCallback(() => {
     if (isInjectingRef.current) return;
-    const container = containerRef.current;
+    const container = getBlockRoot();
     if (!container) return;
     isInjectingRef.current = true;
     observerRef.current?.disconnect();
@@ -41,6 +45,7 @@ function ClientEditableBlock({
         n = walker.nextNode();
       }
       for (const textNode of textNodes) {
+        if (textNode.parentElement?.closest("svg") != null) continue;
         const text = textNode.nodeValue;
         if (!text) continue;
         for (const entry of contentEntries) {
@@ -48,6 +53,7 @@ function ClientEditableBlock({
           if (text.indexOf(entry.v) !== -1 && text.trim() === entry.v.trim()) {
             used.add(entry.p);
             const span = document.createElement("span");
+            span.style.display = "contents";
             span.setAttribute("data-cms-editable", "");
             span.setAttribute("data-block-id", blockId);
             span.setAttribute("data-block-type", blockType);
@@ -60,22 +66,28 @@ function ClientEditableBlock({
       }
     } finally {
       isInjectingRef.current = false;
-      const current = containerRef.current;
-      if (current && observerRef.current) {
-        observerRef.current.observe(current, {
+      const blockRoot = getBlockRoot();
+      if (blockRoot && observerRef.current) {
+        observerRef.current.observe(blockRoot, {
           childList: true,
           subtree: true,
           characterData: true
         });
       }
     }
-  }, [blockId, blockType, contentEntries]);
+  }, [blockId, blockType, contentEntries, getBlockRoot]);
   useLayoutEffect(() => {
+    const blockRoot = getBlockRoot();
+    if (blockRoot && blockProps) {
+      for (const [key, value] of Object.entries(blockProps)) {
+        blockRoot.setAttribute(key, value);
+      }
+    }
     injectSpans();
     const observer = new MutationObserver(injectSpans);
     observerRef.current = observer;
-    if (containerRef.current) {
-      observer.observe(containerRef.current, {
+    if (blockRoot) {
+      observer.observe(blockRoot, {
         childList: true,
         subtree: true,
         characterData: true
@@ -85,8 +97,11 @@ function ClientEditableBlock({
       observer.disconnect();
       observerRef.current = null;
     };
-  }, [injectSpans]);
-  return /* @__PURE__ */ jsx("div", { ref: containerRef, style: { display: "contents" }, children });
+  }, [injectSpans, getBlockRoot, blockProps]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { ref: sentinelRef, style: { display: "none" }, "aria-hidden": "true" }),
+    children
+  ] });
 }
 export {
   ClientEditableBlock

package/dist/lib/client-editable-block.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../lib/client-editable-block.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useLayoutEffect, useRef } from 'react';\n\ninterface ContentEntry {\n  v: string;\n  p: string;\n}\n\ninterface ClientEditableBlockProps {\n  blockId: string;\n  blockType: string;\n  contentEntries: ContentEntry[];\n  children: React.ReactNode;\n}\n\n/**\n * Client-side span injector for blocks whose components use React hooks\n * and therefore can't be walked server-side.\n *\n * Uses a MutationObserver to re-inject [data-cms-editable] spans after every\n * React commit (including state-driven re-renders like animations), so the\n * overlays survive React's reconciliation.\n */\nexport function ClientEditableBlock({\n  blockId,\n  blockType,\n  contentEntries,\n  children,\n}: ClientEditableBlockProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const observerRef = useRef<MutationObserver | null>(null);\n  const isInjectingRef = useRef(false);\n\n  const injectSpans = useCallback(() => {\n    if (isInjectingRef.current) return;\n    const container = containerRef.current;\n    if (!container) return;\n\n    isInjectingRef.current = true;\n    // Disconnect observer while we mutate the DOM to avoid re-entrant calls.\n    observerRef.current?.disconnect();\n\n    try {\n      // Remove previously injected text-level spans, restoring the original text nodes.\n      const existing = Array.from(\n        container.querySelectorAll<HTMLElement>('span[data-cms-editable][data-content-path]')\n      );\n      for (const span of existing) {\n        const parent = span.parentNode;\n        if (!parent) continue;\n        while (span.firstChild) parent.insertBefore(span.firstChild, span);\n        parent.removeChild(span);\n      }\n\n      // Walk all visible text nodes and wrap the ones that match content values.\n      const used = new Set<string>();\n      const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, null);\n      const textNodes: Text[] = [];\n      let n = walker.nextNode();\n      while (n !== null) {\n        const textNode = n as Text;\n        if (\n          textNode.parentElement?.closest('.cms-block-toolbar') == null &&\n          textNode.nodeValue?.trim()\n        ) {\n          textNodes.push(textNode);\n        }\n        n = walker.nextNode();\n      }\n\n      for (const textNode of textNodes) {\n        const text = textNode.nodeValue;\n        if (!text) continue;\n        for (const entry of contentEntries) {\n          if (used.has(entry.p)) continue;\n          if (text.indexOf(entry.v) !== -1 && text.trim() === entry.v.trim()) {\n            used.add(entry.p);\n            const span = document.createElement('span');\n            span.setAttribute('data-cms-editable', '');\n            span.setAttribute('data-block-id', blockId);\n            span.setAttribute('data-block-type', blockType);\n            span.setAttribute('data-content-path', entry.p);\n            textNode.parentNode?.insertBefore(span, textNode);\n            span.appendChild(textNode);\n            break;\n          }\n        }\n      }\n    } finally {\n      isInjectingRef.current = false;\n      // Reconnect after our mutations are done.\n      const current = containerRef.current;\n      if (current && observerRef.current) {\n        observerRef.current.observe(current, {\n          childList: true,\n          subtree: true,\n          characterData: true,\n        });\n      }\n    }\n  }, [blockId, blockType, contentEntries]);\n\n  useLayoutEffect(() => {\n    // Initial injection after React's first commit.\n    injectSpans();\n\n    // Re-inject whenever the child component mutates the DOM\n    // (e.g. animated state changes that swap visible elements).\n    const observer = new MutationObserver(injectSpans);\n    observerRef.current = observer;\n\n    if (containerRef.current) {\n      observer.observe(containerRef.current, {\n        childList: true,\n        subtree: true,\n        characterData: true,\n      });\n    }\n\n    return () => {\n      observer.disconnect();\n      observerRef.current = null;\n    };\n  }, [injectSpans]);\n\n  return (\n    <div ref={containerRef} style={{ display: 'contents' }}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;AAEA,SAAS,aAAa,iBAAiB,cAAc;AA6HjD;AAvGG,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6B;AAC3B,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,cAAc,OAAgC,IAAI;AACxD,QAAM,iBAAiB,OAAO,KAAK;AAEnC,QAAM,cAAc,YAAY,MAAM;AACpC,QAAI,eAAe,QAAS;AAC5B,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,UAAW;AAEhB,mBAAe,UAAU;AAEzB,gBAAY,SAAS,WAAW;AAEhC,QAAI;AAEF,YAAM,WAAW,MAAM;AAAA,QACrB,UAAU,iBAA8B,4CAA4C;AAAA,MACtF;AACA,iBAAW,QAAQ,UAAU;AAC3B,cAAM,SAAS,KAAK;AACpB,YAAI,CAAC,OAAQ;AACb,eAAO,KAAK,WAAY,QAAO,aAAa,KAAK,YAAY,IAAI;AACjE,eAAO,YAAY,IAAI;AAAA,MACzB;AAGA,YAAM,OAAO,oBAAI,IAAY;AAC7B,YAAM,SAAS,SAAS,iBAAiB,WAAW,WAAW,WAAW,IAAI;AAC9E,YAAM,YAAoB,CAAC;AAC3B,UAAI,IAAI,OAAO,SAAS;AACxB,aAAO,MAAM,MAAM;AACjB,cAAM,WAAW;AACjB,YACE,SAAS,eAAe,QAAQ,oBAAoB,KAAK,QACzD,SAAS,WAAW,KAAK,GACzB;AACA,oBAAU,KAAK,QAAQ;AAAA,QACzB;AACA,YAAI,OAAO,SAAS;AAAA,MACtB;AAEA,iBAAW,YAAY,WAAW;AAChC,cAAM,OAAO,SAAS;AACtB,YAAI,CAAC,KAAM;AACX,mBAAW,SAAS,gBAAgB;AAClC,cAAI,KAAK,IAAI,MAAM,CAAC,EAAG;AACvB,cAAI,KAAK,QAAQ,MAAM,CAAC,MAAM,MAAM,KAAK,KAAK,MAAM,MAAM,EAAE,KAAK,GAAG;AAClE,iBAAK,IAAI,MAAM,CAAC;AAChB,kBAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,iBAAK,aAAa,qBAAqB,EAAE;AACzC,iBAAK,aAAa,iBAAiB,OAAO;AAC1C,iBAAK,aAAa,mBAAmB,SAAS;AAC9C,iBAAK,aAAa,qBAAqB,MAAM,CAAC;AAC9C,qBAAS,YAAY,aAAa,MAAM,QAAQ;AAChD,iBAAK,YAAY,QAAQ;AACzB;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF,UAAE;AACA,qBAAe,UAAU;AAEzB,YAAM,UAAU,aAAa;AAC7B,UAAI,WAAW,YAAY,SAAS;AAClC,oBAAY,QAAQ,QAAQ,SAAS;AAAA,UACnC,WAAW;AAAA,UACX,SAAS;AAAA,UACT,eAAe;AAAA,QACjB,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,WAAW,cAAc,CAAC;AAEvC,kBAAgB,MAAM;AAEpB,gBAAY;AAIZ,UAAM,WAAW,IAAI,iBAAiB,WAAW;AACjD,gBAAY,UAAU;AAEtB,QAAI,aAAa,SAAS;AACxB,eAAS,QAAQ,aAAa,SAAS;AAAA,QACrC,WAAW;AAAA,QACX,SAAS;AAAA,QACT,eAAe;AAAA,MACjB,CAAC;AAAA,IACH;AAEA,WAAO,MAAM;AACX,eAAS,WAAW;AACpB,kBAAY,UAAU;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,SACE,oBAAC,SAAI,KAAK,cAAc,OAAO,EAAE,SAAS,WAAW,GAClD,UACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../lib/client-editable-block.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useLayoutEffect, useRef } from 'react';\n\ninterface ContentEntry {\n  v: string;\n  p: string;\n}\n\ninterface ClientEditableBlockProps {\n  blockId: string;\n  blockType: string;\n  contentEntries: ContentEntry[];\n  children: React.ReactNode;\n  blockProps?: Record<string, string>;\n}\n\n/**\n * Client-side span injector for blocks whose components use React hooks\n * and therefore can't be walked server-side.\n *\n * Renders a hidden sentinel element, then locates the block's actual root DOM\n * element via nextElementSibling — no wrapper div is added to the tree.\n *\n * Uses a MutationObserver to re-inject [data-cms-editable] spans after every\n * React commit (including state-driven re-renders like animations), so the\n * overlays survive React's reconciliation.\n */\nexport function ClientEditableBlock({\n  blockId,\n  blockType,\n  contentEntries,\n  children,\n  blockProps,\n}: ClientEditableBlockProps) {\n  const sentinelRef = useRef<HTMLSpanElement>(null);\n  const observerRef = useRef<MutationObserver | null>(null);\n  const isInjectingRef = useRef(false);\n\n  const getBlockRoot = useCallback((): Element | null => {\n    return sentinelRef.current?.nextElementSibling ?? null;\n  }, []);\n\n  const injectSpans = useCallback(() => {\n    if (isInjectingRef.current) return;\n    const container = getBlockRoot();\n    if (!container) return;\n\n    isInjectingRef.current = true;\n    // Disconnect observer while we mutate the DOM to avoid re-entrant calls.\n    observerRef.current?.disconnect();\n\n    try {\n      // Remove previously injected text-level spans, restoring the original text nodes.\n      const existing = Array.from(\n        container.querySelectorAll<HTMLElement>('span[data-cms-editable][data-content-path]')\n      );\n      for (const span of existing) {\n        const parent = span.parentNode;\n        if (!parent) continue;\n        while (span.firstChild) parent.insertBefore(span.firstChild, span);\n        parent.removeChild(span);\n      }\n\n      // Walk all visible text nodes and wrap the ones that match content values.\n      const used = new Set<string>();\n      const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, null);\n      const textNodes: Text[] = [];\n      let n = walker.nextNode();\n      while (n !== null) {\n        const textNode = n as Text;\n        if (\n          textNode.parentElement?.closest('.cms-block-toolbar') == null &&\n          textNode.nodeValue?.trim()\n        ) {\n          textNodes.push(textNode);\n        }\n        n = walker.nextNode();\n      }\n\n      for (const textNode of textNodes) {\n        // Never inject spans inside SVG — <span> is not valid SVG content\n        if (textNode.parentElement?.closest('svg') != null) continue;\n\n        const text = textNode.nodeValue;\n        if (!text) continue;\n        for (const entry of contentEntries) {\n          if (used.has(entry.p)) continue;\n          if (text.indexOf(entry.v) !== -1 && text.trim() === entry.v.trim()) {\n            used.add(entry.p);\n            const span = document.createElement('span');\n            // Inline style ensures layout-transparency before the stylesheet cascade applies\n            span.style.display = 'contents';\n            span.setAttribute('data-cms-editable', '');\n            span.setAttribute('data-block-id', blockId);\n            span.setAttribute('data-block-type', blockType);\n            span.setAttribute('data-content-path', entry.p);\n            textNode.parentNode?.insertBefore(span, textNode);\n            span.appendChild(textNode);\n            break;\n          }\n        }\n      }\n    } finally {\n      isInjectingRef.current = false;\n      // Reconnect after our mutations are done.\n      const blockRoot = getBlockRoot();\n      if (blockRoot && observerRef.current) {\n        observerRef.current.observe(blockRoot, {\n          childList: true,\n          subtree: true,\n          characterData: true,\n        });\n      }\n    }\n  }, [blockId, blockType, contentEntries, getBlockRoot]);\n\n  useLayoutEffect(() => {\n    const blockRoot = getBlockRoot();\n\n    // Stamp block data attributes directly onto the component's root DOM element.\n    if (blockRoot && blockProps) {\n      for (const [key, value] of Object.entries(blockProps)) {\n        blockRoot.setAttribute(key, value);\n      }\n    }\n\n    // Initial injection after React's first commit.\n    injectSpans();\n\n    // Re-inject whenever the child component mutates the DOM\n    // (e.g. animated state changes that swap visible elements).\n    const observer = new MutationObserver(injectSpans);\n    observerRef.current = observer;\n\n    if (blockRoot) {\n      observer.observe(blockRoot, {\n        childList: true,\n        subtree: true,\n        characterData: true,\n      });\n    }\n\n    return () => {\n      observer.disconnect();\n      observerRef.current = null;\n    };\n  }, [injectSpans, getBlockRoot, blockProps]);\n\n  return (\n    <>\n      {/* Sentinel: zero-size, invisible anchor used only to locate the block's root element via nextElementSibling */}\n      <span ref={sentinelRef} style={{ display: 'none' }} aria-hidden=\"true\" />\n      {children}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/lib/renderer.js

@@ -245,13 +245,27 @@ import { notFound } from "next/navigation";
 import React from "react";
 import { BlockToolbar } from "./block-toolbar.js";
 import { ClientEditableBlock } from "./client-editable-block.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SKIP_SPAN_PARENTS = /* @__PURE__ */ new Set([
+  // SVG text-bearing elements — spans are not valid SVG children
+  "text",
+  "tspan",
+  "textPath",
+  "desc",
+  // Form elements whose text content must not be interrupted
+  "option",
+  "optgroup",
+  // Non-rendered elements
+  "script",
+  "style",
+  "noscript"
+]);
 function walkReactNode(node, visitors, ctx = {}) {
   const path = ctx.path ?? [];
   if (node == null || typeof node === "boolean") return node;
   if (typeof node === "string" || typeof node === "number") {
     const value = String(node);
-    return visitors.onText ? visitors.onText({ value, path, parentType: ctx.parentType, key: ctx.key }) : node;
+    return visitors.onText ? visitors.onText({ value, path, parentType: ctx.parentType, key: ctx.key, inSvg: ctx.inSvg }) : node;
   }
   if (Array.isArray(node)) {
     return node.map((child, i) => {
@@ -259,7 +273,8 @@ function walkReactNode(node, visitors, ctx = {}) {
       const result = walkReactNode(child, visitors, {
         path: [...path, i],
         parentType: ctx.parentType,
-        key: childKey
+        key: childKey,
+        inSvg: ctx.inSvg
       });
       if (React.isValidElement(result) && result.key == null) {
         return React.cloneElement(result, { key: childKey ?? `arr-${path.join("-")}-${i}` });
@@ -270,13 +285,15 @@ function walkReactNode(node, visitors, ctx = {}) {
   if (React.isValidElement(node)) {
     const el = node;
     const elProps = el.props;
+    const nextInSvg = ctx.inSvg || el.type === "svg";
     const hasChildren = elProps && "children" in elProps;
     const nextChildren = hasChildren ? React.Children.map(elProps.children, (child, i) => {
       const childKey = child?.key ?? null;
       const result = walkReactNode(child, visitors, {
         path: [...path, "children", i],
         parentType: el.type,
-        key: childKey
+        key: childKey,
+        inSvg: nextInSvg
       });
       if (React.isValidElement(result) && result.key == null) {
         return React.cloneElement(result, { key: childKey ?? `child-${path.join("-")}-${i}` });
@@ -309,6 +326,140 @@ function extractContentValues(content, basePath = []) {
   walk(content, basePath);
   return map;
 }
+var CMS_EDITABLE_STYLES = `
+  .cms-block-toolbar {
+    position: fixed;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 4px;
+    background: #1f2937;
+    border-radius: 6px;
+    padding: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+    z-index: 9999;
+  }
+  .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;
+  }
+`;
+var CMS_EDITABLE_SCRIPT = `
+(function() {
+  if (!window.__cmsEditableInitialized) {
+    window.__cmsEditableInitialized = true;
+    var _ab = null;
+
+    function _tb(bid) {
+      return document.querySelector('.cms-block-toolbar[data-block-id="' + bid + '"]');
+    }
+
+    function _show(bid, target) {
+      var tb = _tb(bid);
+      if (tb && target) {
+        var r = target.getBoundingClientRect();
+        tb.style.left = Math.round(r.left + r.width / 2) + 'px';
+        tb.style.top = Math.round(r.bottom + 8) + 'px';
+        tb.style.opacity = '1';
+        tb.style.pointerEvents = 'auto';
+      }
+    }
+
+    function _hide(bid) {
+      var tb = _tb(bid);
+      if (tb) { tb.style.opacity = '0'; tb.style.pointerEvents = 'none'; }
+    }
+
+    document.addEventListener('mouseover', function(e) {
+      if (e.target.closest('.cms-block-toolbar')) return;
+      var bel = e.target.closest('[data-cms-block]');
+      var bid = bel ? bel.getAttribute('data-block-id') : null;
+      if (bid === _ab) return;
+      if (_ab) _hide(_ab);
+      _ab = bid;
+      if (bid) _show(bid, e.target);
+    });
+
+    document.addEventListener('click', function(e) {
+      if (e.target.closest('.cms-block-toolbar')) return;
+
+      var path = e.composedPath ? e.composedPath() : [e.target];
+      var et = null;
+      for (var i = 0; i < path.length; i++) {
+        var n = path[i];
+        if (n.nodeType === 1 && n.hasAttribute && n.hasAttribute('data-cms-editable')) { et = n; break; }
+      }
+      if (!et) et = e.target.closest && e.target.closest('[data-cms-editable]');
+
+      if (et) {
+        if (window.parent && window.parent !== window) {
+          window.parent.postMessage({
+            type: 'cms-editable-click',
+            blockId: et.getAttribute('data-block-id'),
+            blockType: et.getAttribute('data-block-type'),
+            contentPath: et.getAttribute('data-content-path')
+          }, '*');
+        }
+        return;
+      }
+
+      var bt = e.target.closest && e.target.closest('[data-cms-block]');
+      if (bt) {
+        if (window.parent && window.parent !== window) {
+          window.parent.postMessage({
+            type: 'cms-editable-click',
+            blockId: bt.getAttribute('data-block-id'),
+            blockType: bt.getAttribute('data-block-type'),
+            contentPath: null
+          }, '*');
+        }
+      }
+    });
+  }
+})();
+`;
+function CmsEditableInit() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: CMS_EDITABLE_STYLES }),
+    /* @__PURE__ */ jsx(
+      "script",
+      {
+        dangerouslySetInnerHTML: { __html: CMS_EDITABLE_SCRIPT }
+      }
+    )
+  ] });
+}
 function pathMatchesPattern(path, pattern) {
   const pathSegs = path.split("/").filter(Boolean);
   const patternSegs = pattern.split("/").filter(Boolean);
@@ -398,7 +549,11 @@ function BlockRenderer({
     if (isWalkable) {
       const usedPaths = /* @__PURE__ */ new Set();
       renderedComponent = walkReactNode(renderedTree, {
-        onText: ({ value, key, path: path2 }) => {
+        onText: ({ value, key, path: path2, inSvg, parentType }) => {
+          if (inSvg) return value;
+          if (parentType && typeof parentType === "string" && SKIP_SPAN_PARENTS.has(parentType)) {
+            return value;
+          }
           const matches = contentValueMap.get(value);
           if (!matches || matches.length === 0) return value;
           const match = matches.find((m) => !usedPaths.has(m.contentPath)) ?? matches[0];
@@ -412,6 +567,7 @@ function BlockRenderer({
               "data-block-id": block.id,
               "data-block-type": block.type,
               "data-content-path": match.contentPath,
+              style: { display: "contents" },
               children: value
             },
             spanKey
@@ -423,165 +579,35 @@ function BlockRenderer({
   } catch {
   }
   const contentEntries = needsClientSideSpans ? Array.from(contentValueMap.entries()).map(([value, matches]) => ({ v: value, p: matches[0]?.contentPath })).filter((e) => !!e.p) : [];
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-cms-block": true,
-      "data-block-id": block.id,
-      "data-block-type": block.type,
-      style: { display: "contents" },
-      children: [
-        /* @__PURE__ */ jsx("style", { children: `
-        [data-cms-block] {
-          display: contents;
-        }
-        [data-cms-editable] {
-          display: contents;
-          cursor: pointer;
-        }
-        .cms-block-toolbar {
-          position: fixed;
-          transform: translateX(-50%);
-          display: flex;
-          gap: 4px;
-          background: #1f2937;
-          border-radius: 6px;
-          padding: 4px;
-          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-          opacity: 0;
-          pointer-events: none;
-          transition: opacity 0.15s ease;
-          z-index: 9999;
-        }
-        .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() {
-              if (!window.__cmsEditableInitialized) {
-                window.__cmsEditableInitialized = true;
-                var _ab = null;
-
-                function _tb(bid) {
-                  return document.querySelector('.cms-block-toolbar[data-block-id="' + bid + '"]');
-                }
-
-                function _show(bid, target) {
-                  var tb = _tb(bid);
-                  if (tb && target) {
-                    var r = target.getBoundingClientRect();
-                    tb.style.left = Math.round(r.left + r.width / 2) + 'px';
-                    tb.style.top = Math.round(r.bottom + 8) + 'px';
-                    tb.style.opacity = '1';
-                    tb.style.pointerEvents = 'auto';
-                  }
-                }
-
-                function _hide(bid) {
-                  var tb = _tb(bid);
-                  if (tb) { tb.style.opacity = '0'; tb.style.pointerEvents = 'none'; }
-                }
-
-                document.addEventListener('mouseover', function(e) {
-                  if (e.target.closest('.cms-block-toolbar')) return;
-                  var bel = e.target.closest('[data-cms-block]');
-                  var bid = bel ? bel.getAttribute('data-block-id') : null;
-                  if (bid === _ab) return;
-                  if (_ab) _hide(_ab);
-                  _ab = bid;
-                  if (bid) _show(bid, e.target);
-                });
-
-                document.addEventListener('click', function(e) {
-                  if (e.target.closest('.cms-block-toolbar')) return;
-
-                  var path = e.composedPath ? e.composedPath() : [e.target];
-                  var et = null;
-                  for (var i = 0; i < path.length; i++) {
-                    var n = path[i];
-                    if (n.nodeType === 1 && n.hasAttribute && n.hasAttribute('data-cms-editable')) { et = n; break; }
-                  }
-                  if (!et) et = e.target.closest && e.target.closest('[data-cms-editable]');
-
-                  if (et) {
-                    if (window.parent && window.parent !== window) {
-                      window.parent.postMessage({
-                        type: 'cms-editable-click',
-                        blockId: et.getAttribute('data-block-id'),
-                        blockType: et.getAttribute('data-block-type'),
-                        contentPath: et.getAttribute('data-content-path')
-                      }, '*');
-                    }
-                    return;
-                  }
-
-                  var bt = e.target.closest && e.target.closest('[data-cms-block]');
-                  if (bt) {
-                    if (window.parent && window.parent !== window) {
-                      window.parent.postMessage({
-                        type: 'cms-editable-click',
-                        blockId: bt.getAttribute('data-block-id'),
-                        blockType: bt.getAttribute('data-block-type'),
-                        contentPath: null
-                      }, '*');
-                    }
-                  }
-                });
-              }
-            })();
-          `
-            }
-          }
-        ),
-        needsClientSideSpans && contentEntries.length > 0 ? /* @__PURE__ */ jsx(
-          ClientEditableBlock,
-          {
-            blockId: block.id,
-            blockType: block.type,
-            contentEntries,
-            children: renderedComponent
-          }
-        ) : renderedComponent,
-        /* @__PURE__ */ jsx(BlockToolbar, { blockId: block.id }, "cms-toolbar")
-      ]
-    },
-    block.id
-  );
+  const blockProps = {
+    "data-cms-block": "true",
+    "data-block-id": block.id,
+    "data-block-type": block.type
+  };
+  if (needsClientSideSpans) {
+    return /* @__PURE__ */ jsxs(
+      ClientEditableBlock,
+      {
+        blockId: block.id,
+        blockType: block.type,
+        contentEntries,
+        blockProps,
+        children: [
+          renderedComponent,
+          /* @__PURE__ */ jsx(BlockToolbar, { blockId: block.id }, "cms-toolbar")
+        ]
+      },
+      block.id
+    );
+  }
+  const rootWithProps = React.isValidElement(renderedComponent) ? React.cloneElement(
+    renderedComponent,
+    blockProps
+  ) : renderedComponent;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    rootWithProps,
+    /* @__PURE__ */ jsx(BlockToolbar, { blockId: block.id }, "cms-toolbar")
+  ] });
 }
 
 // lib/cms-api.ts
@@ -624,7 +650,7 @@ function getCmsClient(options) {
 }
 
 // lib/renderer.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function getWebsiteId(providedWebsiteId) {
   const websiteId = providedWebsiteId ?? process.env.NEXT_PUBLIC_WEBSITE_ID ?? process.env.WEBSITE_ID ?? process.env.CMS_WEBSITE_ID;
   if (!websiteId) {
@@ -743,17 +769,20 @@ async function ParametricRoutePage({
         }
       ])
     ) : void 0;
-    return /* @__PURE__ */ jsx2("main", { children: blocks.map((block) => /* @__PURE__ */ jsx2(
-      BlockRenderer,
-      {
-        block,
-        registry: registry ?? {},
-        disableEditable: !editMode,
-        routeParams,
-        path
-      },
-      block.id
-    )) });
+    return /* @__PURE__ */ jsxs2("main", { children: [
+      editMode && /* @__PURE__ */ jsx2(CmsEditableInit, {}),
+      blocks.map((block) => /* @__PURE__ */ jsx2(
+        BlockRenderer,
+        {
+          block,
+          registry: registry ?? {},
+          disableEditable: !editMode,
+          routeParams,
+          path
+        },
+        block.id
+      ))
+    ] });
   } catch (error) {
     console.error(`Route fetch error for path: ${path}`, error);
     const errorCode = error instanceof Error && "data" in error ? error.data?.code : error instanceof Error && "code" in error ? error.code : void 0;