cms-renderer 0.5.2 → 0.6.0

package/dist/lib/renderer.js

@@ -243,68 +243,8 @@ import { notFound } from "next/navigation";
 
 // lib/block-renderer.tsx
 import React from "react";
-import { BlockToolbar } from "./block-toolbar.js";
 import { ClientEditableBlock } from "./client-editable-block.js";
 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, inSvg: ctx.inSvg }) : node;
-  }
-  if (Array.isArray(node)) {
-    return node.map((child, i) => {
-      const childKey = child?.key ?? null;
-      const result = walkReactNode(child, visitors, {
-        path: [...path, i],
-        parentType: ctx.parentType,
-        key: childKey,
-        inSvg: ctx.inSvg
-      });
-      if (React.isValidElement(result) && result.key == null) {
-        return React.cloneElement(result, { key: childKey ?? `arr-${path.join("-")}-${i}` });
-      }
-      return result;
-    });
-  }
-  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,
-        inSvg: nextInSvg
-      });
-      if (React.isValidElement(result) && result.key == null) {
-        return React.cloneElement(result, { key: childKey ?? `child-${path.join("-")}-${i}` });
-      }
-      return result;
-    }) : elProps?.children;
-    const cloned = hasChildren ? React.cloneElement(el, void 0, nextChildren) : el;
-    return visitors.onElement ? visitors.onElement({ element: cloned, path }) : cloned;
-  }
-  return node;
-}
 function extractContentValues(content, basePath = []) {
   const map = /* @__PURE__ */ new Map();
   function walk(obj, path) {
@@ -326,136 +266,118 @@ 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("style", { children: `
+        [data-cms-block]:hover {
+          outline: 2px solid #3b82f6;
+          outline-offset: 4px;
+        }
+        [data-cms-editable] {
+          cursor: pointer;
+          border-radius: 2px;
+        }
+        [data-cms-editable]:hover {
+          outline: 2px solid #3b82f6;
+          outline-offset: 2px;
+        }
+        .cms-block-toolbar {
+          position: absolute;
+          bottom: 8px;
+          left: 50%;
+          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: 1000;
+        }
+        [data-cms-block]:hover .cms-block-toolbar {
+          opacity: 1;
+          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: CMS_EDITABLE_SCRIPT }
+        dangerouslySetInnerHTML: {
+          __html: `
+            (function() {
+              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 (window.parent && window.parent !== window) {
+                      window.parent.postMessage(message, '*');
+                    }
+                    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 (window.parent && window.parent !== window) {
+                      window.parent.postMessage(message, '*');
+                    }
+                  }
+                });
+              }
+            })();
+          `
+        }
       }
     )
   ] });
@@ -490,38 +412,6 @@ function resolveComponent(registry, blockType, path) {
   }
   return registry[blockType];
 }
-function renderToWalkableTree(node, keyPrefix = "") {
-  if (node == null || typeof node === "boolean") return node;
-  if (typeof node === "string" || typeof node === "number") return node;
-  if (Array.isArray(node)) {
-    return node.map((child, i) => {
-      const result = renderToWalkableTree(child, `${keyPrefix}${i}-`);
-      if (React.isValidElement(result) && result.key == null) {
-        const existingKey = child?.key;
-        return React.cloneElement(result, { key: existingKey ?? `${keyPrefix}${i}` });
-      }
-      return result;
-    });
-  }
-  if (React.isValidElement(node)) {
-    const el = node;
-    const elProps = el.props;
-    if (typeof el.type === "function") {
-      try {
-        const rendered = el.type(el.props);
-        return renderToWalkableTree(rendered, keyPrefix);
-      } catch {
-        return node;
-      }
-    }
-    if (elProps && "children" in elProps) {
-      const newChildren = renderToWalkableTree(elProps.children, keyPrefix);
-      return React.cloneElement(el, void 0, newChildren);
-    }
-    return node;
-  }
-  return node;
-}
 function BlockRenderer({
   block,
   registry,
@@ -541,73 +431,8 @@ function BlockRenderer({
     return component;
   }
   const contentValueMap = extractContentValues(block.content);
-  let renderedComponent = component;
-  let needsClientSideSpans = true;
-  try {
-    const renderedTree = renderToWalkableTree(component);
-    const isWalkable = React.isValidElement(renderedTree) && typeof renderedTree.type === "string";
-    if (isWalkable) {
-      const usedPaths = /* @__PURE__ */ new Set();
-      renderedComponent = walkReactNode(renderedTree, {
-        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];
-          if (!match) return value;
-          usedPaths.add(match.contentPath);
-          const spanKey = key ?? `${block.id}-${match.contentPath}-${path2.join("-")}`;
-          return /* @__PURE__ */ jsx(
-            "span",
-            {
-              "data-cms-editable": true,
-              "data-block-id": block.id,
-              "data-block-type": block.type,
-              "data-content-path": match.contentPath,
-              style: { display: "contents" },
-              children: value
-            },
-            spanKey
-          );
-        }
-      });
-      needsClientSideSpans = false;
-    }
-  } catch {
-  }
-  const contentEntries = needsClientSideSpans ? Array.from(contentValueMap.entries()).map(([value, matches]) => ({ v: value, p: matches[0]?.contentPath })).filter((e) => !!e.p) : [];
-  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")
-  ] });
+  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 });
 }
 
 // lib/cms-api.ts