@blokkli/editor 2.0.0-alpha.29 → 2.0.0-alpha.30

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@blokkli/editor",
   "configKey": "blokkli",
-  "version": "2.0.0-alpha.29",
+  "version": "2.0.0-alpha.30",
   "compatibility": {
     "nuxt": ">=3.15.0"
   },

package/dist/module.mjs

@@ -15,7 +15,7 @@ import { BK_VISIBLE_LANGUAGES, BK_HIDDEN_GLOBALLY } from './global/constants';
 import { defu, createDefu } from 'defu';
 
 const name = "@blokkli/editor";
-const version = "2.0.0-alpha.29";
+const version = "2.0.0-alpha.30";
 
 function sortObjectKeys(obj) {
   if (Array.isArray(obj)) {

package/dist/runtime/editor/features/selection/AddButtons/Renderer/index.d.vue.ts

@@ -1,6 +1,9 @@
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const __VLS_export: import("vue").DefineComponent<{
+    hostEmptyFieldKeys: string[];
+    hostEmptyFieldTooltips: string[];
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     toggle: (data: {
         position: "before" | "after";
         coordinates: {
@@ -15,7 +18,10 @@ declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, im
             y: number;
         };
     }) => any;
-}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<{
+    hostEmptyFieldKeys: string[];
+    hostEmptyFieldTooltips: string[];
+}> & Readonly<{
     onToggle?: ((data: {
         position: "before" | "after";
         coordinates: {
@@ -30,4 +36,4 @@ declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, im
             y: number;
         };
     }) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/selection/AddButtons/Renderer/index.vue

@@ -116,6 +116,10 @@ const tooltipData = computed(() => {
   }
   return { x: screenX, y: screenY, transform, position, text, isField };
 });
+const props = defineProps({
+  hostEmptyFieldKeys: { type: Array, required: true },
+  hostEmptyFieldTooltips: { type: Array, required: true }
+});
 const emit = defineEmits(["toggle", "toggleField"]);
 const MAX_CIRCLES = 10;
 const BUTTON_RADIUS = 12;
@@ -340,7 +344,7 @@ const { collector } = defineRenderer("add-buttons", {
   },
   program: () => ({ shaders: [vs, fs] }),
   enabled: () => {
-    if (selection.uuids.value.length !== 1) {
+    if (selection.uuids.value.length !== 1 && !selection.hasHostSelected.value) {
       return false;
     }
     if (ui.openTooltip.value && ui.openTooltip.value !== "add-buttons") {
@@ -353,7 +357,7 @@ const { collector } = defineRenderer("add-buttons", {
   },
   cursor: () => hoveredCircle.value >= 0 ? "pointer" : null,
   onClick: ({ mouseArtboard }) => {
-    if (selection.uuids.value.length !== 1) {
+    if (selection.uuids.value.length !== 1 && !selection.hasHostSelected.value) {
       return false;
     }
     const clickedCircle = getCircleAtPoint(mouseArtboard.x, mouseArtboard.y);
@@ -361,11 +365,13 @@ const { collector } = defineRenderer("add-buttons", {
       const cx = circlePositions[clickedCircle * 2];
       const cy = circlePositions[clickedCircle * 2 + 1];
       if (clickedCircle === 0 || clickedCircle === 1) {
-        const position = clickedCircle === 0 ? "before" : "after";
-        emit("toggle", {
-          position,
-          coordinates: { x: cx, y: cy }
-        });
+        if (!selection.hasHostSelected.value) {
+          const position = clickedCircle === 0 ? "before" : "after";
+          emit("toggle", {
+            position,
+            coordinates: { x: cx, y: cy }
+          });
+        }
       } else {
         const fieldIndex = clickedCircle - 2;
         emit("toggleField", {
@@ -385,45 +391,53 @@ const { collector } = defineRenderer("add-buttons", {
       return;
     }
     circleVisible.fill(0);
-    if (ctx.selectedUuids.length !== 1) {
+    const isHostSelected = selection.hasHostSelected.value;
+    if (ctx.selectedUuids.length !== 1 && !isHostSelected) {
       return;
     }
-    const uuid = ctx.selectedUuids[0];
-    if (!uuid) {
-      return;
-    }
-    const blockState = getBlockState(uuid);
-    const blockRect = dom.getBlockRect(uuid);
-    if (!blockRect || blockRect.width === 0) {
-      return;
-    }
-    const orientation = getOrientationForUuid(uuid);
-    currentOrientation.value = orientation;
-    if (blockState.canShowBeforeAfter) {
-      const BUTTON_SHIFT = 2 / ctx.artboardScale;
-      if (orientation === "horizontal") {
-        circlePositions[0] = blockRect.x - BUTTON_SHIFT;
-        circlePositions[1] = blockRect.y + blockRect.height / 2;
-        circleVisible[0] = 1;
-        circlePositions[2] = blockRect.x + blockRect.width + BUTTON_SHIFT;
-        circlePositions[3] = blockRect.y + blockRect.height / 2;
-        circleVisible[1] = 1;
-      } else {
-        circlePositions[0] = blockRect.x + blockRect.width / 2;
-        circlePositions[1] = blockRect.y - BUTTON_SHIFT;
-        circleVisible[0] = 1;
-        circlePositions[2] = blockRect.x + blockRect.width / 2;
-        circlePositions[3] = blockRect.y + blockRect.height + BUTTON_SHIFT;
-        circleVisible[1] = 1;
+    let blockState = null;
+    let blockRect;
+    if (isHostSelected) {
+    } else {
+      const uuid = ctx.selectedUuids[0];
+      if (!uuid) {
+        return;
+      }
+      blockState = getBlockState(uuid);
+      blockRect = dom.getBlockRect(uuid);
+      if (!blockRect || blockRect.width === 0) {
+        return;
+      }
+      const orientation = getOrientationForUuid(uuid);
+      currentOrientation.value = orientation;
+      if (blockState.canShowBeforeAfter) {
+        const BUTTON_SHIFT = 2 / ctx.artboardScale;
+        if (orientation === "horizontal") {
+          circlePositions[0] = blockRect.x - BUTTON_SHIFT;
+          circlePositions[1] = blockRect.y + blockRect.height / 2;
+          circleVisible[0] = 1;
+          circlePositions[2] = blockRect.x + blockRect.width + BUTTON_SHIFT;
+          circlePositions[3] = blockRect.y + blockRect.height / 2;
+          circleVisible[1] = 1;
+        } else {
+          circlePositions[0] = blockRect.x + blockRect.width / 2;
+          circlePositions[1] = blockRect.y - BUTTON_SHIFT;
+          circleVisible[0] = 1;
+          circlePositions[2] = blockRect.x + blockRect.width / 2;
+          circlePositions[3] = blockRect.y + blockRect.height + BUTTON_SHIFT;
+          circleVisible[1] = 1;
+        }
       }
+      currentUuid.value = uuid;
+      currentBundleLabel.value = blockState.bundleLabel;
+      currentSingleAllowedBundleLabel.value = blockState.singleAllowedBundleLabel;
     }
-    currentUuid.value = uuid;
-    currentBundleLabel.value = blockState.bundleLabel;
-    currentSingleAllowedBundleLabel.value = blockState.singleAllowedBundleLabel;
-    if (blockState.emptyFieldKeys.length > 0) {
-      emptyFieldTooltips.value = blockState.emptyFieldTooltips;
-      for (let i = 0; i < blockState.emptyFieldKeys.length && i < 8; i++) {
-        const fieldKey = blockState.emptyFieldKeys[i];
+    const emptyFieldKeys = isHostSelected ? props.hostEmptyFieldKeys : blockState?.emptyFieldKeys || [];
+    const emptyFieldTooltipsData = isHostSelected ? props.hostEmptyFieldTooltips : blockState?.emptyFieldTooltips || [];
+    if (emptyFieldKeys.length > 0) {
+      emptyFieldTooltips.value = emptyFieldTooltipsData;
+      for (let i = 0; i < emptyFieldKeys.length && i < 8; i++) {
+        const fieldKey = emptyFieldKeys[i];
         if (!fieldKey) {
           continue;
         }
@@ -433,15 +447,21 @@ const { collector } = defineRenderer("add-buttons", {
         }
         const initialX = fieldRect.x + fieldRect.width / 2;
         const initialY = fieldRect.y + fieldRect.height / 2;
-        const adjusted = adjustEmptyFieldButtonPosition(
-          initialX,
-          initialY,
-          blockRect,
-          ctx.artboardScale
-        );
+        let finalX = initialX;
+        let finalY = initialY;
+        if (blockRect) {
+          const adjusted = adjustEmptyFieldButtonPosition(
+            initialX,
+            initialY,
+            blockRect,
+            ctx.artboardScale
+          );
+          finalX = adjusted.x;
+          finalY = adjusted.y;
+        }
         const circleIndex = i + 2;
-        circlePositions[circleIndex * 2] = adjusted.x;
-        circlePositions[circleIndex * 2 + 1] = adjusted.y;
+        circlePositions[circleIndex * 2] = finalX;
+        circlePositions[circleIndex * 2 + 1] = finalY;
         circleVisible[circleIndex] = 1;
       }
     } else {
@@ -469,45 +489,53 @@ const { collector } = defineRenderer("add-buttons", {
   },
   renderFallback: (ctx, ctx2d) => {
     circleVisible.fill(0);
-    if (ctx.selectedUuids.length !== 1) {
-      return;
-    }
-    const uuid = ctx.selectedUuids[0];
-    if (!uuid) {
+    const isHostSelected = selection.hasHostSelected.value;
+    if (ctx.selectedUuids.length !== 1 && !isHostSelected) {
       return;
     }
-    const blockState = getBlockState(uuid);
-    const blockRect = dom.getBlockRect(uuid);
-    if (!blockRect || blockRect.width === 0) {
-      return;
-    }
-    const orientation = getOrientationForUuid(uuid);
-    currentOrientation.value = orientation;
-    if (blockState.canShowBeforeAfter) {
-      const BUTTON_SHIFT = 2 / ctx.artboardScale;
-      if (orientation === "horizontal") {
-        circlePositions[0] = blockRect.x - BUTTON_SHIFT;
-        circlePositions[1] = blockRect.y + blockRect.height / 2;
-        circleVisible[0] = 1;
-        circlePositions[2] = blockRect.x + blockRect.width + BUTTON_SHIFT;
-        circlePositions[3] = blockRect.y + blockRect.height / 2;
-        circleVisible[1] = 1;
-      } else {
-        circlePositions[0] = blockRect.x + blockRect.width / 2;
-        circlePositions[1] = blockRect.y - BUTTON_SHIFT;
-        circleVisible[0] = 1;
-        circlePositions[2] = blockRect.x + blockRect.width / 2;
-        circlePositions[3] = blockRect.y + blockRect.height + BUTTON_SHIFT;
-        circleVisible[1] = 1;
+    let blockState = null;
+    let blockRect;
+    if (isHostSelected) {
+    } else {
+      const uuid = ctx.selectedUuids[0];
+      if (!uuid) {
+        return;
+      }
+      blockState = getBlockState(uuid);
+      blockRect = dom.getBlockRect(uuid);
+      if (!blockRect || blockRect.width === 0) {
+        return;
+      }
+      const orientation = getOrientationForUuid(uuid);
+      currentOrientation.value = orientation;
+      if (blockState.canShowBeforeAfter) {
+        const BUTTON_SHIFT = 2 / ctx.artboardScale;
+        if (orientation === "horizontal") {
+          circlePositions[0] = blockRect.x - BUTTON_SHIFT;
+          circlePositions[1] = blockRect.y + blockRect.height / 2;
+          circleVisible[0] = 1;
+          circlePositions[2] = blockRect.x + blockRect.width + BUTTON_SHIFT;
+          circlePositions[3] = blockRect.y + blockRect.height / 2;
+          circleVisible[1] = 1;
+        } else {
+          circlePositions[0] = blockRect.x + blockRect.width / 2;
+          circlePositions[1] = blockRect.y - BUTTON_SHIFT;
+          circleVisible[0] = 1;
+          circlePositions[2] = blockRect.x + blockRect.width / 2;
+          circlePositions[3] = blockRect.y + blockRect.height + BUTTON_SHIFT;
+          circleVisible[1] = 1;
+        }
       }
+      currentUuid.value = uuid;
+      currentBundleLabel.value = blockState.bundleLabel;
+      currentSingleAllowedBundleLabel.value = blockState.singleAllowedBundleLabel;
     }
-    currentUuid.value = uuid;
-    currentBundleLabel.value = blockState.bundleLabel;
-    currentSingleAllowedBundleLabel.value = blockState.singleAllowedBundleLabel;
-    if (blockState.emptyFieldKeys.length > 0) {
-      emptyFieldTooltips.value = blockState.emptyFieldTooltips;
-      for (let i = 0; i < blockState.emptyFieldKeys.length && i < 8; i++) {
-        const fieldKey = blockState.emptyFieldKeys[i];
+    const emptyFieldKeys = isHostSelected ? props.hostEmptyFieldKeys : blockState?.emptyFieldKeys || [];
+    const emptyFieldTooltipsData = isHostSelected ? props.hostEmptyFieldTooltips : blockState?.emptyFieldTooltips || [];
+    if (emptyFieldKeys.length > 0) {
+      emptyFieldTooltips.value = emptyFieldTooltipsData;
+      for (let i = 0; i < emptyFieldKeys.length && i < 8; i++) {
+        const fieldKey = emptyFieldKeys[i];
         if (!fieldKey) {
           continue;
         }
@@ -517,15 +545,21 @@ const { collector } = defineRenderer("add-buttons", {
         }
         const initialX = fieldRect.x + fieldRect.width / 2;
         const initialY = fieldRect.y + fieldRect.height / 2;
-        const adjusted = adjustEmptyFieldButtonPosition(
-          initialX,
-          initialY,
-          blockRect,
-          ctx.artboardScale
-        );
+        let finalX = initialX;
+        let finalY = initialY;
+        if (blockRect) {
+          const adjusted = adjustEmptyFieldButtonPosition(
+            initialX,
+            initialY,
+            blockRect,
+            ctx.artboardScale
+          );
+          finalX = adjusted.x;
+          finalY = adjusted.y;
+        }
         const circleIndex = i + 2;
-        circlePositions[circleIndex * 2] = adjusted.x;
-        circlePositions[circleIndex * 2 + 1] = adjusted.y;
+        circlePositions[circleIndex * 2] = finalX;
+        circlePositions[circleIndex * 2 + 1] = finalY;
         circleVisible[circleIndex] = 1;
       }
     } else {

package/dist/runtime/editor/features/selection/AddButtons/Renderer/index.vue.d.ts

@@ -1,6 +1,9 @@
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const __VLS_export: import("vue").DefineComponent<{
+    hostEmptyFieldKeys: string[];
+    hostEmptyFieldTooltips: string[];
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     toggle: (data: {
         position: "before" | "after";
         coordinates: {
@@ -15,7 +18,10 @@ declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, im
             y: number;
         };
     }) => any;
-}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<{
+    hostEmptyFieldKeys: string[];
+    hostEmptyFieldTooltips: string[];
+}> & Readonly<{
     onToggle?: ((data: {
         position: "before" | "after";
         coordinates: {
@@ -30,4 +36,4 @@ declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, im
             y: number;
         };
     }) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/selection/AddButtons/index.vue

@@ -19,6 +19,8 @@
     <Renderer
       v-if="!isLocked"
       :key="animation.renderKey.value"
+      :host-empty-field-keys="hostEmptyFieldKeys"
+      :host-empty-field-tooltips="hostFieldTooltips"
       @toggle="onRendererToggle"
       @toggle-field="onRendererToggleField"
     />
@@ -47,7 +49,7 @@ import { onBlokkliEvent } from "#blokkli/editor/composables";
 const props = defineProps({
   items: { type: Array, required: true }
 });
-const { dom, state, eventBus, types, $t, blocks, fields, animation } = useBlokkli();
+const { dom, state, eventBus, types, $t, blocks, fields, animation, context, selection } = useBlokkli();
 const isLocked = ref(false);
 const shouldRender = computed(() => {
   return props.items.length === 1;
@@ -78,6 +80,20 @@ const emptyBlockFields = computed(() => {
     return v.count === 0;
   });
 });
+const emptyHostFields = computed(() => {
+  return types.fieldConfig.forEntityTypeAndBundle(context.value.entityType, context.value.entityBundle).map((field) => {
+    const key = getFieldKey(context.value.entityUuid, field.name);
+    const count = state.getFieldBlockCount(key);
+    return {
+      key,
+      count,
+      name: field.name
+    };
+  }).filter((v) => v.count === 0);
+});
+const hostEmptyFieldKeys = computed(() => {
+  return emptyHostFields.value.map((v) => v.key);
+});
 const containerStyle = ref({ visibility: "hidden" });
 const orientationClass = ref("");
 const containerRect = ref(null);
@@ -158,6 +174,26 @@ const fieldTooltips = computed(() => {
     ).replace("@parentBundle", bundleLabel.value).replace("@fieldLabel", fieldLabel);
   });
 });
+const hostFieldTooltips = computed(() => {
+  return emptyHostFields.value.map((field) => {
+    const fieldConfig = types.fieldConfig.forEntityTypeAndBundle(context.value.entityType, context.value.entityBundle).find((f) => f.name === field.name);
+    const fieldLabel = fieldConfig?.label || field.name;
+    const fieldElement = fields.find(context.value.entityUuid, field.name);
+    if (fieldElement) {
+      const allowedBundles = fieldElement.allowedBundles.filter(
+        (bundle) => !isInternalBundle(bundle)
+      );
+      if (allowedBundles.length === 1) {
+        const bundle = allowedBundles[0];
+        if (bundle) {
+          const singleBundleLabel = types.getBlockBundleDefinition(bundle)?.label || bundle;
+          return $t("addButtonBundleToField", 'Add "@bundle" to @fieldLabel').replace("@bundle", singleBundleLabel).replace("@fieldLabel", fieldLabel);
+        }
+      }
+    }
+    return $t("addButtonToField", "Add to @fieldLabel...").replace("@fieldLabel", fieldLabel);
+  });
+});
 watch(emptyBlockFields, (fields2) => {
   const neededCount = fields2.length;
   while (fieldButtonSlots.value.length < neededCount) {
@@ -377,18 +413,21 @@ function onRendererToggleField(data) {
   if (addData.value?.key === key) {
     return closeOverlay();
   }
-  if (!uuid.value) {
+  const entityUuid = selection.hasHostSelected.value ? context.value.entityUuid : uuid.value;
+  if (!entityUuid) {
     return;
   }
-  const emptyField = emptyBlockFields.value[data.index];
+  const emptyFields = selection.hasHostSelected.value ? emptyHostFields.value : emptyBlockFields.value;
+  const tooltips = selection.hasHostSelected.value ? hostFieldTooltips.value : fieldTooltips.value;
+  const emptyField = emptyFields[data.index];
   if (!emptyField) {
     return;
   }
-  const field = fields.find(uuid.value, emptyField.name);
+  const field = fields.find(entityUuid, emptyField.name);
   if (!field) {
     return;
   }
-  const label = (fieldTooltips.value[data.index] || "").replace("...", "");
+  const label = (tooltips[data.index] || "").replace("...", "");
   setAddData(key, field, label, null, void 0, data.coordinates);
 }
 onBlokkliEvent("dragging:start", closeOverlay);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blokkli/editor",
-  "version": "2.0.0-alpha.29",
+  "version": "2.0.0-alpha.30",
   "description": "Interactive page building experience for Nuxt",
   "keywords": [
     "cms",