cms-renderer 0.5.0 → 0.5.1

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
@@ -431,143 +587,6 @@ function BlockRenderer({
       "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,
           {
@@ -624,7 +643,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 +762,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;