cms-renderer 0.2.5 → 0.2.9

package/dist/lib/renderer.d.ts

@@ -1,22 +1,19 @@
 import * as React from 'react';
 import { Metadata } from 'next';
+import { CmsConfig } from './cms-api.js';
 import { BlockComponentRegistry } from './types.js';
+import '@repo/cms-schema/trpc';
+import '@trpc/client';
 import '@repo/cms-schema/blocks';
 
-type PageProps = {
+type PageProps = CmsConfig & {
     params: Promise<{
         slug: string[];
     }>;
     searchParams?: Promise<{
         [key: string]: string | string[] | undefined;
     }>;
-    /** CMS API base URL (e.g., 'http://localhost:3000') */
-    cmsUrl: string;
     registry?: Partial<BlockComponentRegistry>;
-    /** API key for CMS API authentication */
-    apiKey?: string;
-    /** Website ID (required if not using env variables) */
-    websiteId?: string;
 };
 /**
  * Force dynamic rendering to ensure routes are always fresh.

package/dist/lib/renderer.js

@@ -341,65 +341,66 @@ function renderToWalkableTree(node, keyPrefix = "") {
   }
   return node;
 }
-function BlockRenderer({ block, registry, disableEditable }) {
-  const Component = Object.hasOwn(registry, block.type) ? registry[block.type] : void 0;
+function BlockRenderer({
+  block,
+  registry,
+  disableEditable,
+  routeParams
+}) {
+  const Component = registry[block.type];
   if (!Component) {
     if (process.env.NODE_ENV === "development") {
       console.warn(`[BlockRenderer] Unknown block type: ${block.type}`);
     }
     return null;
   }
-  const component = /* @__PURE__ */ jsx(Component, { content: block.content });
+  const component = /* @__PURE__ */ jsx(Component, { content: block.content, routeParams });
   if (disableEditable) {
     return component;
   }
-  const renderedTree = renderToWalkableTree(component);
   const contentValueMap = extractContentValues(block.content);
-  const usedPaths = /* @__PURE__ */ new Set();
-  let isRoot = true;
-  const wrappedComponent = walkReactNode(renderedTree, {
-    onText: ({ value, key, path }) => {
-      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}-${path.join("-")}`;
-      return /* @__PURE__ */ jsx(
-        "span",
-        {
-          "data-cms-editable": true,
-          "data-block-id": block.id,
-          "data-block-type": block.type,
-          "data-content-path": match.contentPath,
-          children: value
-        },
-        spanKey
-      );
-    },
-    onElement: ({ element, path }) => {
-      if (isRoot && path.length === 0) {
-        isRoot = false;
-        const elProps = element.props;
-        const existingChildren = elProps?.children;
-        return React.cloneElement(
-          element,
-          {
-            "data-cms-block": true,
-            "data-block-id": block.id,
-            "data-block-type": block.type
-          },
-          existingChildren,
-          /* @__PURE__ */ jsx(BlockToolbar, { blockId: block.id }, "cms-toolbar")
-        );
-      }
-      return element;
+  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 }) => {
+          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}-${path.join("-")}`;
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-cms-editable": true,
+              "data-block-id": block.id,
+              "data-block-type": block.type,
+              "data-content-path": match.contentPath,
+              children: value
+            },
+            spanKey
+          );
+        }
+      });
+      needsClientSideSpans = false;
     }
-  });
-  return /* @__PURE__ */ jsxs("div", { style: { display: "contents" }, children: [
-    /* @__PURE__ */ jsx("style", { children: `
+  } 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: { position: "relative" },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
         [data-cms-block] {
           position: relative;
         }
@@ -469,73 +470,128 @@ function BlockRenderer({ block, registry, disableEditable }) {
           height: 16px;
         }
       ` }),
-    /* @__PURE__ */ jsx(
-      "script",
-      {
-        dangerouslySetInnerHTML: {
-          __html: `
+        /* @__PURE__ */ jsx(
+          "script",
+          {
+            dangerouslySetInnerHTML: {
+              __html: `
             (function() {
-              if (window.__cmsEditableInitialized) return;
-              window.__cmsEditableInitialized = true;
+              if (!window.__cmsEditableInitialized) {
+                window.__cmsEditableInitialized = true;
 
-              document.addEventListener('click', function(e) {
-                // Ignore toolbar clicks
-                if (e.target.closest('.cms-block-toolbar')) {
-                  return;
-                }
+                document.addEventListener('click', function(e) {
+                  if (e.target.closest('.cms-block-toolbar')) return;
 
-                // Check for editable text click first (more specific)
-                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')
-                  };
+                  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;
+                  }
 
-                  if (window.parent && window.parent !== window) {
-                    window.parent.postMessage(message, '*');
+                  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, '*');
+                    }
                   }
-                  return;
+                });
+              }
+            })();
+            ${contentEntries.length > 0 ? `
+            (function() {
+              var blockId = ${JSON.stringify(block.id)};
+              var blockType = ${JSON.stringify(block.type)};
+              var entries = ${JSON.stringify(contentEntries)};
+
+              function injectSpans() {
+                var block = document.querySelector('[data-block-id="' + blockId + '"]');
+                if (!block || block.getAttribute('data-cms-spans-injected')) return;
+                block.setAttribute('data-cms-spans-injected', 'true');
+
+                var used = {};
+                var walker = document.createTreeWalker(block, NodeFilter.SHOW_TEXT, null);
+                var textNodes = [];
+                var n;
+                while (n = walker.nextNode()) {
+                  if (n.parentNode && n.parentNode.closest && n.parentNode.closest('.cms-block-toolbar')) continue;
+                  if (n.nodeValue && n.nodeValue.trim()) textNodes.push(n);
                 }
 
-                // Check for block-level click
-                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
-                  };
+                for (var i = 0; i < textNodes.length; i++) {
+                  var node = textNodes[i];
+                  var text = node.nodeValue;
+                  if (!text) continue;
 
-                  if (window.parent && window.parent !== window) {
-                    window.parent.postMessage(message, '*');
+                  for (var j = 0; j < entries.length; j++) {
+                    var e = entries[j];
+                    if (used[e.p]) continue;
+                    if (text.indexOf(e.v) !== -1 && text.trim() === e.v.trim()) {
+                      used[e.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', e.p);
+                      node.parentNode.insertBefore(span, node);
+                      span.appendChild(node);
+                      break;
+                    }
                   }
                 }
-              });
+              }
+
+              if (document.readyState === 'complete') {
+                requestAnimationFrame(injectSpans);
+              } else {
+                window.addEventListener('load', function() {
+                  requestAnimationFrame(injectSpans);
+                });
+              }
             })();
+            ` : ""}
           `
-        }
-      }
-    ),
-    wrappedComponent
-  ] }, block.id);
+            }
+          }
+        ),
+        renderedComponent,
+        /* @__PURE__ */ jsx(BlockToolbar, { blockId: block.id }, "cms-toolbar")
+      ]
+    },
+    block.id
+  );
 }
 
 // lib/cms-api.ts
 import { createTRPCClient, httpBatchLink } from "@trpc/client";
 import superjson from "superjson";
 function getCmsApiUrl(cmsUrl) {
-  return `${cmsUrl}/api/trpc`;
+  return new URL("/api/trpc", cmsUrl).toString();
 }
-function createFetchWithApiKey(apiKey) {
+function createFetchWithApiKey(apiKey, websiteId) {
   return async (url, options) => {
     let finalUrl = url;
+    const urlObj = new URL(url.toString());
     if (apiKey) {
-      const urlObj = new URL(url.toString());
       urlObj.searchParams.set("api_key", apiKey);
+    }
+    if (websiteId) {
+      urlObj.searchParams.set("website_id", websiteId);
+    }
+    if (apiKey || websiteId) {
       finalUrl = urlObj.toString();
     }
     const response = await fetch(finalUrl, options);
@@ -544,13 +600,12 @@ function createFetchWithApiKey(apiKey) {
 }
 function createCmsClient(options) {
   const url = getCmsApiUrl(options.cmsUrl);
-  console.log("[CMS API] Creating client with URL:", url);
   return createTRPCClient({
     links: [
       httpBatchLink({
         url,
         transformer: superjson,
-        fetch: createFetchWithApiKey(options.apiKey)
+        fetch: createFetchWithApiKey(options.apiKey, options.websiteId)
       })
     ]
   });
@@ -606,7 +661,7 @@ async function ParametricRoutePage({
   const path = normalizePath(rawPath);
   const client = getCmsClient({ apiKey, cmsUrl });
   try {
-    const { route } = await client.route.getByPath.query({ websiteId, path });
+    const { route, resolvedParams } = await client.route.getByPath.query({ websiteId, path });
     if (route.state !== "Live") {
       console.error(`Route found but not Live. Path: ${path}, State: ${route.state}`);
       notFound();
@@ -663,12 +718,28 @@ async function ParametricRoutePage({
         content
       });
     }
+    const routeParams = resolvedParams ? Object.fromEntries(
+      Object.entries(resolvedParams).map(([key, param]) => [
+        key,
+        {
+          value: param.value,
+          schemaName: param.schemaName,
+          document: {
+            id: param.document.id,
+            title: param.document.title,
+            content: param.document.content,
+            schema_name: param.document.schema_name
+          }
+        }
+      ])
+    ) : void 0;
     return /* @__PURE__ */ jsx2("main", { children: blocks.map((block) => /* @__PURE__ */ jsx2(
       BlockRenderer,
       {
         block,
         registry: registry ?? {},
-        disableEditable: !editMode
+        disableEditable: !editMode,
+        routeParams
       },
       block.id
     )) });