@juo/blocks 1.12.0-alpha.0 → 1.12.0-alpha.2

package/dist/editor.js

@@ -1,9 +1,9 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { createBlockInstanceFromObject, indexOverrides, onRegisterBlock, getDefinedBlocks } from "@juo/blocks";
-import { a as createEditorBridge, f as createOpenAddBlockMenuMessage, g as createRemoveBlockMessage, h as createRegisterBlocksMessage, i as createRegisterRoutesMessage } from "./bridge-w5KQ-czl.js";
-import { j, k, b, l, m, n, o, p, c, q, r, s, t, u, e, v, w, x, y, d, z, A, B, C } from "./bridge-w5KQ-czl.js";
+import { createBlockInstanceFromObject, indexOverrides, DEFAULT_GLOBAL_STYLES, effect, onRegisterBlock, getDefinedBlocks } from "@juo/blocks";
+import { c as createEditorBridge, d as createOpenAddBlockMenuMessage, e as createRemoveBlockMessage, f as createRegisterBlocksMessage, g as createRegisterOverlaysMessage, h as createRegisterRoutesMessage } from "./bridge-r7Yk8fjY.js";
+import { i, j, a, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z, b, A, B, C, D } from "./bridge-r7Yk8fjY.js";
 function createEditorHandler(options) {
   const { themeState, onBlockSelection } = options;
   const blockSurfaceIndex = /* @__PURE__ */ new Map();
@@ -126,17 +126,17 @@ function createEditorHandler(options) {
       if (location.type === "before" || location.type === "after") {
         let findAndInsertBlock = function(blocks, targetId, newBlock2, position) {
           var _a2;
-          for (let i = 0; i < blocks.length; i++) {
-            if (blocks[i].id === targetId) {
+          for (let i2 = 0; i2 < blocks.length; i2++) {
+            if (blocks[i2].id === targetId) {
               if (position === "before") {
-                blocks.splice(i, 0, newBlock2);
+                blocks.splice(i2, 0, newBlock2);
               } else {
-                blocks.splice(i + 1, 0, newBlock2);
+                blocks.splice(i2 + 1, 0, newBlock2);
               }
               return true;
             }
-            for (const slotKey of Object.keys(blocks[i].slots || {})) {
-              const slotBlocks = blocks[i].slots[slotKey];
+            for (const slotKey of Object.keys(blocks[i2].slots || {})) {
+              const slotBlocks = blocks[i2].slots[slotKey];
               const slotArray = Array.isArray(slotBlocks) ? slotBlocks : [slotBlocks];
               for (let j2 = 0; j2 < slotArray.length; j2++) {
                 if (typeof slotArray[j2] !== "string" && ((_a2 = slotArray[j2]) == null ? void 0 : _a2.id) === targetId) {
@@ -145,7 +145,7 @@ function createEditorHandler(options) {
                   } else {
                     slotArray.splice(j2 + 1, 0, newBlock2);
                   }
-                  blocks[i].slots[slotKey] = slotArray;
+                  blocks[i2].slots[slotKey] = slotArray;
                   return true;
                 }
               }
@@ -199,21 +199,21 @@ function createEditorHandler(options) {
     } else if (message.type === "REMOVE_BLOCK") {
       let findAndRemoveBlock = function(blocks, blockId, slot, parentId) {
         var _a2;
-        for (let i = 0; i < blocks.length; i++) {
-          if (blocks[i].id === parentId && ((_a2 = blocks[i].slots) == null ? void 0 : _a2[slot])) {
-            const slotBlocks = blocks[i].slots[slot];
+        for (let i2 = 0; i2 < blocks.length; i2++) {
+          if (blocks[i2].id === parentId && ((_a2 = blocks[i2].slots) == null ? void 0 : _a2[slot])) {
+            const slotBlocks = blocks[i2].slots[slot];
             const slotArray = Array.isArray(slotBlocks) ? slotBlocks : [slotBlocks];
             const index = slotArray.findIndex(
               (b2) => typeof b2 !== "string" && (b2 == null ? void 0 : b2.id) === blockId
             );
             if (index !== -1) {
               slotArray.splice(index, 1);
-              blocks[i].slots[slot] = slotArray;
+              blocks[i2].slots[slot] = slotArray;
               return true;
             }
           }
-          for (const slotKey of Object.keys(blocks[i].slots || {})) {
-            const slotBlocks = blocks[i].slots[slotKey];
+          for (const slotKey of Object.keys(blocks[i2].slots || {})) {
+            const slotBlocks = blocks[i2].slots[slotKey];
             const slotArray = Array.isArray(slotBlocks) ? slotBlocks : [slotBlocks];
             for (const child of slotArray) {
               if (typeof child !== "string" && (child == null ? void 0 : child.id)) {
@@ -857,8 +857,8 @@ class BlockWrapper extends HTMLElement {
     const moreBtn = document.createElement("button");
     moreBtn.type = "button";
     moreBtn.innerHTML = moreIconSvg;
-    moreBtn.addEventListener("click", (e2) => {
-      e2.stopPropagation();
+    moreBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
       this.toggleMenu();
     });
     const menuEl = document.createElement("div");
@@ -874,8 +874,8 @@ class BlockWrapper extends HTMLElement {
     deleteBtn.className = "block-wrapper__menu-item block-wrapper__menu-item--danger";
     deleteBtn.setAttribute("role", "menuitem");
     deleteBtn.innerHTML = `${trashIconSvg}<span>Delete</span>`;
-    deleteBtn.addEventListener("click", (e2) => {
-      e2.stopPropagation();
+    deleteBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
       this.closeMenu();
       this.handleRemoveBlock();
     });
@@ -943,9 +943,9 @@ class BlockWrapper extends HTMLElement {
     surface.appendChild(text);
     inner.appendChild(surface);
     btn.appendChild(inner);
-    btn.addEventListener("click", (e2) => {
-      e2.stopPropagation();
-      e2.preventDefault();
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
       this.handleAddBlock(position, btn);
     });
     return btn;
@@ -1006,6 +1006,11 @@ class BlockWrapper extends HTMLElement {
     }
     this.addEventListener("mouseenter", this.handleHoverEnter);
     this.addEventListener("mouseleave", this.handleHoverLeave);
+    if (this.block != null) {
+      this.updateActiveState(
+        this.editorBridge.getSelectedBlockId() === this.block.id
+      );
+    }
   }
   /**
    * Resolve the slotted block's first painted descendant — the
@@ -1051,8 +1056,8 @@ class BlockWrapper extends HTMLElement {
     if (!this.menuElement) return;
     this.menuElement.classList.add("open");
     this.isMenuOpen = true;
-    this.closeMenuOnOutsideClick = (e2) => {
-      if (!this.shadowRoot.contains(e2.composedPath()[0])) {
+    this.closeMenuOnOutsideClick = (e) => {
+      if (!this.shadowRoot.contains(e.composedPath()[0])) {
         this.closeMenu();
       }
     };
@@ -1070,6 +1075,7 @@ class BlockWrapper extends HTMLElement {
   setBlock(block) {
     this.block = block;
     this.setAttribute("data-block-id", block.id);
+    this.setAttribute("data-block-type", block.type);
     if (this.nameElement) {
       this.nameElement.textContent = block.definition.displayName ?? block.definition.name;
     }
@@ -1157,7 +1163,7 @@ async function serializeBlock(block) {
         }
       })
     );
-    const loaded = entries.filter((e2) => e2 !== null);
+    const loaded = entries.filter((e) => e !== null);
     if (loaded.length > 0) {
       locales = Object.fromEntries(loaded);
     }
@@ -1173,11 +1179,23 @@ async function serializeBlock(block) {
   };
 }
 const EDITOR_BODY_TOP_PADDING_PX = 48;
+const EDITOR_BODY_BOTTOM_PADDING_PX = 12;
+function buildEditorCanvasStyleContent(backgroundColor) {
+  const bg = backgroundColor || DEFAULT_GLOBAL_STYLES.colors.background;
+  return `body {
+  padding-top: ${EDITOR_BODY_TOP_PADDING_PX}px;
+  background-color: ${bg};
+}`;
+}
 async function setupEditorMode(deps) {
-  const { routerService, themeState } = deps;
+  const { routerService, themeState, overlayService } = deps;
   const padStyle = document.createElement("style");
-  padStyle.textContent = `body { padding-top: ${EDITOR_BODY_TOP_PADDING_PX}px; }`;
   document.head.appendChild(padStyle);
+  const disposeCanvasStyles = effect(() => {
+    padStyle.textContent = buildEditorCanvasStyleContent(
+      themeState.globalStyles.value.colors.background
+    );
+  });
   const editor = createEditorBridge();
   const handler = createEditorHandler({
     themeState
@@ -1196,11 +1214,24 @@ async function setupEditorMode(deps) {
         })
       )
     );
+    if (typeof block.name === "string" && block.name.startsWith("overlay:")) {
+      editor.sendMessage(
+        createRegisterOverlaysMessage({
+          overlays: overlayService.getEditableOverlays()
+        })
+      );
+    }
   });
   const blocks = await Promise.all(getDefinedBlocks().map(serializeBlock));
   editor.sendMessage(createRegisterBlocksMessage({ blocks }));
   editor.sendMessage(createRegisterRoutesMessage({ routes }));
+  editor.sendMessage(
+    createRegisterOverlaysMessage({
+      overlays: overlayService.getEditableOverlays()
+    })
+  );
   return () => {
+    disposeCanvasStyles();
     padStyle.remove();
     unsubscribeRegister();
     unsubscribe();
@@ -1209,19 +1240,23 @@ async function setupEditorMode(deps) {
 }
 export {
   BlockWrapper,
-  j as createAddBlockMenuClosedMessage,
-  k as createAddBlockMessage,
+  EDITOR_BODY_BOTTOM_PADDING_PX,
+  EDITOR_BODY_TOP_PADDING_PX,
+  buildEditorCanvasStyleContent,
+  i as createAddBlockMenuClosedMessage,
+  j as createAddBlockMessage,
   createEditorBridge,
   createEditorHandler,
-  b as createFocusInlineTextMessage,
-  l as createMoveBlockMessage,
+  a as createFocusInlineTextMessage,
+  k as createMoveBlockMessage,
   createOpenAddBlockMenuMessage,
-  m as createProvideGlobalStylesMessage,
-  n as createProvideInitialGlobalStylesMessage,
-  o as createProvideThemeStateMessage,
-  p as createProvideTranslationOverridesMessage,
-  c as createRegisterBlockTranslationKeysMessage,
+  l as createProvideGlobalStylesMessage,
+  m as createProvideInitialGlobalStylesMessage,
+  n as createProvideThemeStateMessage,
+  o as createProvideTranslationOverridesMessage,
+  p as createRegisterBlockTranslationKeysMessage,
   createRegisterBlocksMessage,
+  createRegisterOverlaysMessage,
   createRegisterRoutesMessage,
   createRemoveBlockMessage,
   q as createReportContentHeightMessage,
@@ -1229,15 +1264,15 @@ export {
   s as createRequestThemeStateMessage,
   t as createRequestTranslationOverridesMessage,
   u as createScrollSyncMessage,
-  e as createSelectBlockMessage,
-  v as createSetBlockPresetMessage,
-  w as createSetGlobalStylesMessage,
-  x as createSetLocaleMessage,
-  y as createUpdateBlockPropsMessage,
-  d as createUpdateBlockTranslationMessage,
-  z as createUpsertThemeStateMessage,
-  A as getEditorBridge,
-  B as isEditorMessage,
-  C as isIframeMessage,
+  v as createSelectBlockMessage,
+  w as createSetBlockPresetMessage,
+  x as createSetGlobalStylesMessage,
+  y as createSetLocaleMessage,
+  z as createUpdateBlockPropsMessage,
+  b as createUpdateBlockTranslationMessage,
+  A as createUpsertThemeStateMessage,
+  B as getEditorBridge,
+  C as isEditorMessage,
+  D as isIframeMessage,
   setupEditorMode
 };