cms-renderer 0.6.13 → 0.8.0

package/dist/lib/renderer.js

@@ -104,12 +104,12 @@ function isArticlePublished(article) {
 var BLOCK_METADATA = {
   "hero-block": {
     name: "Hero",
-    description: "Full-width hero section with headline, subheadline, and CTA",
+    description: "Full-width hero section with headline, description, and CTA",
     category: "Marketing",
     icon: "image",
     fields: [
       { name: "headline", label: "Headline", type: "Text" },
-      { name: "subheadline", label: "Subheadline", type: "Text" },
+      { name: "subheadline", label: "Description", type: "Text" },
       { name: "ctaText", label: "CTA Label", type: "Text" },
       { name: "ctaUrl", label: "CTA URL", type: "URL" },
       { name: "backgroundImage", label: "Background Image", type: "Image" }
@@ -320,7 +320,7 @@ var fileSchema = z5.object({
 var HeroAlignment = ["left", "center", "right"];
 var HeroBlockContentSchema = z6.object({
   headline: z6.string().min(1, "Headline is required").max(100, "Headline too long"),
-  subheadline: z6.string().max(200, "Subheadline too long").optional(),
+  subheadline: z6.string().max(200, "Description too long").optional(),
   ctaText: z6.string().max(50, "CTA text too long").optional(),
   ctaUrl: z6.string().refine(
     (val) => {
@@ -474,7 +474,7 @@ function generateCmsOverlayScript(cmsParentOrigin) {
       border-radius: 2px;
     }
     [data-cms-editable]:not([data-cms-block]):hover {
-      outline: 2px solid #3b82f6;
+      outline: 2px solid var(--component-accent, #A78BFA);
       outline-offset: 2px;
     }
     #cms-overlay-root {
@@ -491,15 +491,38 @@ function generateCmsOverlayScript(cmsParentOrigin) {
     }
     .cms-block-outline {
       position: fixed;
-      border: 2px solid #3b82f6;
+      box-sizing: border-box;
+      border: 4px solid var(--component-accent, #A78BFA);
       border-radius: 4px;
       pointer-events: none;
       z-index: 99997;
       transition: all 0.15s ease;
     }
     .cms-block-outline.cms-outline-selected {
-      border-color: #2563eb;
-      border-width: 3px;
+      border-color: var(--component-accent, #A78BFA);
+      border-width: 4px;
+    }
+    .cms-block-label {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: none;
+      max-width: 240px;
+      padding: 2px 8px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 1.4;
+      color: #fff;
+      background: var(--component-accent, #A78BFA);
+      border-radius: 4px 4px 4px 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      pointer-events: none;
+    }
+    .cms-block-label.cms-label-visible {
+      display: block;
     }
     .cms-block-cursor {
       position: fixed;
@@ -664,15 +687,19 @@ function generateCmsOverlayScript(cmsParentOrigin) {
   cursor.className = 'cms-block-cursor';
   overlayRoot.appendChild(cursor);
 
-  var outline = document.createElement('div');
-  outline.className = 'cms-block-outline';
-  outline.style.display = 'none';
-  overlayRoot.appendChild(outline);
+  function createOutline(extraClass) {
+    var el = document.createElement('div');
+    el.className = 'cms-block-outline' + (extraClass ? ' ' + extraClass : '');
+    el.style.display = 'none';
+    var label = document.createElement('span');
+    label.className = 'cms-block-label';
+    el.appendChild(label);
+    overlayRoot.appendChild(el);
+    return el;
+  }
 
-  var selectedOutline = document.createElement('div');
-  selectedOutline.className = 'cms-block-outline cms-outline-selected';
-  selectedOutline.style.display = 'none';
-  overlayRoot.appendChild(selectedOutline);
+  var outline = createOutline();
+  var selectedOutline = createOutline('cms-outline-selected');
 
   var toolbar = document.createElement('div');
   toolbar.className = 'cms-block-toolbar';
@@ -700,35 +727,19 @@ function generateCmsOverlayScript(cmsParentOrigin) {
   var toolbarVisible = false;
   var selectedBlockId = null;
 
-  function decoratePreviewUrl(rawHref) {
-    if (!rawHref) return rawHref;
-    try {
-      var url = new URL(rawHref, window.location.href);
-      if (url.origin !== window.location.origin) return rawHref;
-      url.searchParams.set('edit_mode', 'true');
-      if (CMS_PARENT_ORIGIN) {
-        url.searchParams.set('cms_parent_origin', CMS_PARENT_ORIGIN);
-      }
-      return url.toString();
-    } catch (_) {
-      return rawHref;
-    }
-  }
-
-  function preserveEditParamsOnNavigation(e) {
-    if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
-      return;
-    }
-
-    var anchor = e.target.closest('a[href]');
-    if (!anchor || (anchor.target && anchor.target !== '_self') || anchor.hasAttribute('download')) {
-      return;
-    }
-
-    var href = anchor.getAttribute('href');
-    var decorated = decoratePreviewUrl(href);
-    if (decorated && decorated !== href) {
-      anchor.setAttribute('href', decorated);
+  // In edit mode we hijack every link/button activation. Following a link or
+  // firing a button's own handler makes inline editing on that element
+  // impossible (the click navigates away or triggers an action instead of
+  // placing the caret). We block the default action and stop the event from
+  // reaching the element's own listeners, while still letting our selection /
+  // edit routing run below.
+  function blockInteractiveActivation(e) {
+    var interactive = e.target.closest(
+      'a[href], button, [role="button"], input[type="submit"], input[type="button"], input[type="reset"]'
+    );
+    if (interactive) {
+      e.preventDefault();
+      e.stopPropagation();
     }
   }
 
@@ -748,7 +759,11 @@ function generateCmsOverlayScript(cmsParentOrigin) {
   setTimeout(sendReadySignal, 1500);
 
   function getBlockElement(blockId) {
-    return document.querySelector('[data-block-id="' + blockId + '"]');
+    // Match the real block element, not the hidden sentinel <span> that shares
+    // the same data-block-id and precedes it in the DOM. The sentinel is
+    // display:none (a 0x0 rect), so selecting it would paint the outline at the
+    // top-left corner. Only the stamped block carries data-cms-block.
+    return document.querySelector('[data-cms-block][data-block-id="' + blockId + '"]');
   }
 
   function getAllBlocks() {
@@ -763,17 +778,38 @@ function generateCmsOverlayScript(cmsParentOrigin) {
     return -1;
   }
 
+  function formatBlockType(type) {
+    if (!type) return 'Block';
+    return type
+      .replace(/[-_]+/g, ' ')
+      .replace(/\\b\\w/g, function(c) { return c.toUpperCase(); });
+  }
+
   function updateOutline(el, outlineEl) {
+    var label = outlineEl.querySelector('.cms-block-label');
     if (!el) {
       outlineEl.style.display = 'none';
+      if (label) label.classList.remove('cms-label-visible');
       return;
     }
     var rect = el.getBoundingClientRect();
+    // A 0x0 rect means the element isn't laid out yet (or is hidden). Hide the
+    // outline instead of drawing a zero-size box with a floating label at the
+    // top-left corner.
+    if (rect.width === 0 && rect.height === 0) {
+      outlineEl.style.display = 'none';
+      if (label) label.classList.remove('cms-label-visible');
+      return;
+    }
     outlineEl.style.display = 'block';
     outlineEl.style.top = rect.top + 'px';
     outlineEl.style.left = rect.left + 'px';
     outlineEl.style.width = rect.width + 'px';
     outlineEl.style.height = rect.height + 'px';
+    if (label) {
+      label.textContent = formatBlockType(el.getAttribute('data-block-type'));
+      label.classList.add('cms-label-visible');
+    }
   }
 
   function positionToolbar(x, y) {
@@ -850,17 +886,19 @@ function generateCmsOverlayScript(cmsParentOrigin) {
   });
 
   document.addEventListener('click', function(e) {
-    preserveEditParamsOnNavigation(e);
+    // The floating toolbar is interactive (and its buttons are real <button>s);
+    // bail out before any blocking so its own handlers run.
+    if (e.target.closest('[data-cms-toolbar]')) return;
 
-    if (toolbarVisible && !e.target.closest('[data-cms-toolbar]')) {
-      var block = e.target.closest('[data-cms-block]');
-      if (!block || block.getAttribute('data-block-id') !== currentBlockId) {
+    blockInteractiveActivation(e);
+
+    if (toolbarVisible) {
+      var activeBlock = e.target.closest('[data-cms-block]');
+      if (!activeBlock || activeBlock.getAttribute('data-block-id') !== currentBlockId) {
         hideToolbar();
       }
     }
 
-    if (e.target.closest('[data-cms-toolbar]')) return;
-
     var editable = e.target.closest('[data-cms-editable]');
     if (editable) {
       postToParent({
@@ -1072,7 +1110,7 @@ function BlockRenderer({
     return null;
   }
   const language = routeParams ? Object.values(routeParams).find((p) => p.schemaName === "language")?.value : void 0;
-  const component = /* @__PURE__ */ jsx(Component, { content: block.content, routeParams, language });
+  const component = /* @__PURE__ */ jsx(Component, { content: block.content, routeParams, language, path });
   if (disableEditable) {
     return component;
   }