@blokkli/editor 2.0.0-alpha.23 → 2.0.0-alpha.24

package/dist/runtime/components/Edit/Features/DraggingOverlay/DragItems/index.vue

@@ -16,40 +16,7 @@
       <Icon name="cursor-move" />
       <p v-html="currentActiveLabel" />
     </div>
-    <div
-      v-for="(rect, i) in rects"
-      :key="i"
-      class="bk-dragging-overlay-item"
-      :class="{ 'bk-is-top': rect.isTop, 'bk-is-fallback': !rect.markup }"
-      :style="{
-  width: rect.width + 'px',
-  height: rect.height + 'px',
-  transform: `translate(${rect.x}px, ${rect.y}px) scale(${rect.scaleX}, ${rect.scaleY})`,
-  opacity: rect.opacity,
-  background: rect.background,
-  transformOrigin: rect.transformOrigin,
-  borderRadius: rect.borderRadius
-}"
-    >
-      <div
-        v-if="rect.markup"
-        class="bk-dragging-overlay-markup"
-        v-html="rect.markup"
-      />
-      <div
-        v-else
-        class="bk-dragging-overlay-fallback"
-        :style="{ color: rect.fallbackColor }"
-      >
-        <div :style="{ transform: `scale(${1 / rect.to.scaleX})` }">
-          <template v-if="rect.isTop">
-            <ItemIcon v-if="rect.bundle" :bundle="rect.bundle" />
-            <Icon v-else-if="rect.icon" :name="rect.icon" />
-            <div v-if="rect.label">{{ rect.label }}</div>
-          </template>
-        </div>
-      </div>
-    </div>
+    <DragItem v-for="(rect, i) in rects" :key="i" v-bind="rect" />
   </div>
 </template>
 
@@ -62,16 +29,10 @@ import {
   onMounted,
   onBeforeUnmount
 } from "#imports";
-import {
-  isInsideRect,
-  realBackgroundColor,
-  lerp,
-  falsy
-} from "#blokkli/helpers";
-import { Icon, ItemIcon } from "#blokkli/components";
-import { easeOutElastic } from "#blokkli/helpers/easing";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-const { dom, ui, animation, theme, types } = useBlokkli();
+import { isInsideRect, realBackgroundColor, falsy } from "#blokkli/helpers";
+import { Icon } from "#blokkli/components";
+import DragItem, {} from "./DragItem.vue";
+const { dom, ui, types } = useBlokkli();
 const props = defineProps({
   items: { type: Array, required: true },
   x: { type: Number, required: true },
@@ -136,51 +97,6 @@ function getRect() {
 }
 defineExpose({ getRect });
 const rects = ref([]);
-const animationStart = Date.now();
-const duration = 500;
-const isDone = ref(false);
-onBlokkliEvent("animationFrame", () => {
-  if (isDone.value) {
-    return;
-  }
-  const newRects = [];
-  const elapsed = Date.now() - animationStart;
-  const alphaX = easeOutElastic(elapsed / duration, 1.92, 0.91);
-  const alphaY = easeOutElastic(elapsed / duration, 2.2, 0.76);
-  const opacityAlpha = Math.min(Math.max(elapsed - 300, 0) / 200, 1);
-  for (let i = 0; i < rects.value.length; i++) {
-    const rect = rects.value[i];
-    const newX = lerp(rect.from.x, rect.to.x, alphaX);
-    const newY = lerp(rect.from.y, rect.to.y, alphaY);
-    const newOpacity = lerp(rect.from.opacity, rect.to.opacity, opacityAlpha);
-    const newScaleX = lerp(rect.from.scaleX, rect.to.scaleX, alphaX);
-    const newScaleY = lerp(rect.from.scaleY, rect.to.scaleY, alphaY);
-    animation.requestDraw();
-    newRects.push({
-      ...rect,
-      x: newX,
-      y: newY,
-      scaleX: newScaleX,
-      scaleY: newScaleY,
-      opacity: newOpacity
-    });
-  }
-  if (elapsed > duration || !ui.useAnimations.value || ui.lowPerformanceMode.value) {
-    rects.value = newRects.map((v) => {
-      return {
-        ...v,
-        opacity: v.to.opacity,
-        scaleX: v.to.scaleX,
-        scaleY: v.to.scaleY,
-        x: v.to.x,
-        y: v.to.y
-      };
-    });
-    isDone.value = true;
-    return;
-  }
-  rects.value = newRects;
-});
 function getDraggingBounds(mouse, rect, maxWidth) {
   const aspectRatio = rect.width / rect.height;
   const effectiveWidth = Math.min(rect.width, maxWidth);
@@ -223,7 +139,7 @@ onMounted(() => {
     props.startCoords,
     boundRect.rect,
     // Limit width to 250px
-    340
+    351
   );
   const boundsX = props.isTouch ? 0 : bounds.x;
   const boundsY = props.isTouch ? translateY.value : bounds.y;
@@ -258,7 +174,6 @@ onMounted(() => {
       scaleX: targetScaleX,
       scaleY: targetScaleY
     };
-    const style2 = theme.getDraggableStyle(element);
     const markup = (elRects.length < 6 || isTop) && !ui.lowPerformanceMode.value ? dom.getDropElementMarkup(item.item, true) : "";
     let bundle;
     let label = "";
@@ -277,19 +192,15 @@ onMounted(() => {
       isTop,
       from: ui.lowPerformanceMode.value ? to : from,
       to,
-      ...from,
       width: item.element.offsetWidth,
       height: item.element.offsetHeight,
-      opacity: 1,
       transformOrigin: `${originX}px ${originY}px`,
       markup,
-      background: realBackgroundColor(item.element),
+      background: item.item.itemType === "existing" ? realBackgroundColor(item.element) : "",
       prevVisibility: item.item.itemType === "existing" || item.item.itemType === "existing_structure" ? item.element.style.visibility : void 0,
       element: item.element,
-      borderRadius: style2.radiusString,
       bundle,
-      label,
-      fallbackColor: style2.textColor
+      label
     };
   }).filter(falsy);
   elRects.forEach((item) => {

package/dist/runtime/components/Edit/Features/DraggingOverlay/Renderer/fragment.glsl

@@ -15,6 +15,7 @@ in float v_thickness;
 in float v_edge_softness;
 in float v_radius_outer;
 in float v_radius_inner;
+in float v_fill_alpha;
 
 out vec4 fragColor;
 
@@ -52,11 +53,7 @@ void main() {
   // Alpha value for the border.
   float alphaBorder = clamp(alphaOuter - alphaInner, 0.0, 1.0);
 
-  // Adjust alphas based on intersection.
-  float adjustedAlphaFill =
-    v_intersecting >= 0.5
-      ? alphaInner * 0.95
-      : alphaInner * 0.2;
+  float adjustedAlphaFill = alphaInner * v_fill_alpha;
 
   if (v_is_hover_area >= 1.0) {
     // If nesting level is 0, don't render the fill (border only)

package/dist/runtime/components/Edit/Features/DraggingOverlay/Renderer/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <slot :color="activeColorHex" :label="active?.label" />
   </Teleport>
 </template>
@@ -153,10 +153,20 @@ const draggingBundles = computed(
       }
     } else if (item.itemBundle) {
       bundles.push(item.itemBundle);
+    } else if (item.itemType === "action" && item.action.itemBundle) {
+      bundles.push(item.action.itemBundle);
     }
     return bundles;
   }).filter(falsy)
 );
+const draggingFragments = computed(
+  () => props.items.flatMap((item) => {
+    if ((item.itemType === "existing" || item.itemType === "existing_structure") && item.block.bundle === "blokkli_fragment" && item.block.fragment?.name) {
+      return [item.block.fragment.name];
+    }
+    return [];
+  }).filter(falsy)
+);
 const selectionUuids = computed(
   () => props.items.map((item) => {
     if (item.itemType === "existing") {
@@ -178,6 +188,8 @@ const buildChildren = (field, visible) => {
   const children = [];
   let prevWasInSelection = false;
   let prevUuid = "";
+  let prevElOffsetTop = 0;
+  let prevElHeight = 0;
   for (let i = 0; i < field.childrenElements.length; i++) {
     const childrenForUuid = [];
     const isLast = i === field.childrenElements.length - 1;
@@ -190,11 +202,17 @@ const buildChildren = (field, visible) => {
       continue;
     }
     if (!visible.includes(uuid)) {
+      const elRect2 = dom.getBlockRect(uuid) || ui.getAbsoluteElementRect(dom.getBoundingClientRect(el));
+      prevElOffsetTop = elRect2.y - field.y;
+      prevElHeight = el.scrollHeight;
       prevUuid = uuid;
       continue;
     }
     const cached = fieldChildCache[uuid];
     if (cached) {
+      const elRect2 = dom.getBlockRect(uuid) || ui.getAbsoluteElementRect(dom.getBoundingClientRect(el));
+      prevElOffsetTop = elRect2.y - field.y;
+      prevElHeight = el.scrollHeight;
       children.push(...cached);
       prevUuid = uuid;
       continue;
@@ -204,9 +222,10 @@ const buildChildren = (field, visible) => {
       prevUuid = uuid;
       continue;
     }
-    const elRect = dom.getBlockRect(uuid) || ui.getAbsoluteElementRect(el.getBoundingClientRect());
+    const elRect = dom.getBlockRect(uuid) || ui.getAbsoluteElementRect(dom.getBoundingClientRect(el));
     const elOffsetTop = elRect.y - field.y;
     const elOffsetLeft = elRect.x - field.x;
+    const elHeight = el.scrollHeight;
     if (isLast) {
       const id2 = buildChildId(field.field, uuid, "last", uuid);
       if (field.orientation === "vertical") {
@@ -215,7 +234,7 @@ const buildChildren = (field, visible) => {
           width: field.width,
           height: MIN_GAP,
           x: 0,
-          y: elOffsetTop + el.scrollHeight,
+          y: elOffsetTop + elHeight,
           label: field.label
         });
       } else {
@@ -232,17 +251,28 @@ const buildChildren = (field, visible) => {
     if (prevWasInSelection) {
       prevWasInSelection = false;
       prevUuid = uuid;
+      prevElOffsetTop = elOffsetTop;
+      prevElHeight = elHeight;
       children.push(...childrenForUuid);
       continue;
     }
     const id = buildChildId(field.field, prevUuid, "between", uuid);
     if (field.orientation === "vertical") {
+      let dropTargetY;
+      if (prevElHeight > 0) {
+        const prevBlockBottom = prevElOffsetTop + prevElHeight;
+        const gapMiddle = (prevBlockBottom + elOffsetTop) / 2;
+        dropTargetY = gapMiddle - MIN_GAP / 2;
+      } else {
+        const gapMiddle = elOffsetTop / 2;
+        dropTargetY = gapMiddle - MIN_GAP / 2;
+      }
       childrenForUuid.push({
         id,
         width: field.width,
         height: MIN_GAP,
         x: 0,
-        y: elOffsetTop - field.gap / 2,
+        y: dropTargetY,
         label: field.label
       });
     } else {
@@ -257,6 +287,8 @@ const buildChildren = (field, visible) => {
     }
     fieldChildCache[uuid] = childrenForUuid;
     children.push(...childrenForUuid);
+    prevElOffsetTop = elOffsetTop;
+    prevElHeight = elHeight;
     prevUuid = uuid;
   }
   return children;
@@ -316,7 +348,8 @@ const buildFieldRect = (key) => {
     selectionUuids.value,
     currentCount,
     props.items.length,
-    draggingBundles.value
+    draggingBundles.value,
+    draggingFragments.value
   );
   const orientation = field.dropAlignment || getChildrenOrientation(field.element);
   const rect = dom.getFieldRect(field.key);

package/dist/runtime/components/Edit/Features/DraggingOverlay/Renderer/vertex.glsl

@@ -35,6 +35,7 @@ out float v_thickness;
 out float v_edge_softness;
 out float v_radius_outer;
 out float v_radius_inner;
+out float v_fill_alpha;
 
 vec4 getQuad() {
   if (a_rect_type >= 5.0) {
@@ -72,6 +73,8 @@ void main() {
 
   v_is_hover_area = a_rect_type >= 5.0 ? 1.0 : 0.0;
 
+  bool is_drop_target = a_rect_type <= 0.5;
+
   // Set correct colors based on type.
   if (a_rect_type < 1.0) {
     v_color = u_color_area;
@@ -89,7 +92,7 @@ void main() {
 
   // Compute values that are constant per quad (optimization)
   bool isHoverArea = v_is_hover_area >= 1.0;
-  float stroke = isHoverArea ? 0.75 : 2.0;
+  float stroke = isHoverArea ? 0.5 : 1.0;
   float radiusBase = stroke * u_scale;
 
   v_thickness = max(min(1.0 * u_scale, 3.0), 0.5);
@@ -118,4 +121,10 @@ void main() {
   v_radius_inner = v_radius_outer - borderWidth;
 
   v_size_inner = v_size - 2.0 * borderWidth;
+
+  if (is_drop_target) {
+    v_fill_alpha = v_intersecting >= 0.5 ? 0.5 : 0.2;
+  } else {
+    v_fill_alpha = v_intersecting >= 0.5 ? 1.0 : 0.2;
+  }
 }

package/dist/runtime/components/Edit/Features/DraggingOverlay/index.vue

@@ -188,8 +188,7 @@ const onDropSearchContentItem = async (item, host, afterUuid) => {
   }
 };
 const onDropAction = (action, host, field, afterUuid) => {
-  eventBus.emit("action:placed", {
-    id: action.actionType,
+  action.action.callback({
     preceedingUuid: afterUuid,
     host,
     field

package/dist/runtime/components/Edit/Features/EditForm/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="slide-in">
       <FormOverlay
         v-if="form"
@@ -32,7 +32,7 @@ const { adapter } = defineBlokkliFeature({
   description: "Listens to edit events and renders an iframe containing the edit form.",
   requiredAdapterMethods: ["formFrameBuilder"]
 });
-const { types, state, context, $t, dom, definitions, blocks } = useBlokkli();
+const { types, state, context, $t, dom, definitions, blocks, ui } = useBlokkli();
 const form = ref(null);
 const formUrl = computed(() => {
   if (form.value) {

package/dist/runtime/components/Edit/Features/EditableField/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="caret-tooltip" :enabled="hasTransition">
       <Overlay
         v-if="selectedEditable"
@@ -32,7 +32,7 @@ defineBlokkliFeature({
   requiredAdapterMethods: ["updateFieldValue", "getEditableFieldConfig"],
   description: "Implements a form overlay to edit a single field of a block."
 });
-const { selection, adapter, types, $t, state, directive, blocks, context } = useBlokkli();
+const { selection, adapter, types, $t, state, directive, blocks, context, ui } = useBlokkli();
 const selectedEditable = ref(null);
 const hasTransition = ref(false);
 const key = computed(() => {

package/dist/runtime/components/Edit/Features/Exit/index.vue

@@ -1,17 +1,10 @@
 <template>
-  <PluginMenuButton
-    id="exit"
-    :title="$t('exitTitle', 'Close')"
-    :description="$t('exitDescription', 'Close editor without publishing')"
-    :weight="100"
-    icon="exit"
-    @click="onClick"
-  />
+  <div />
 </template>
 
 <script setup>
 import { useBlokkli, useRoute, nextTick, defineBlokkliFeature } from "#imports";
-import { PluginMenuButton } from "#blokkli/plugins";
+import defineMenuButton from "#blokkli/helpers/composables/defineMenuButton";
 defineBlokkliFeature({
   id: "exit",
   label: "Exit",
@@ -26,6 +19,16 @@ function onClick() {
     window.location.href = route.path;
   });
 }
+defineMenuButton(() => {
+  return {
+    id: "exit",
+    title: $t("exitTitle", "Close"),
+    description: $t("exitDescription", "Close editor without publishing"),
+    icon: "exit",
+    weight: 100,
+    callback: onClick
+  };
+});
 </script>
 
 <script>

package/dist/runtime/components/Edit/Features/Fragments/index.vue

@@ -1,27 +1,8 @@
 <template>
-  <PluginAddAction
-    v-if="
-  adapter.addLibraryItem && adapter.getLibraryItems && isSupportedOnEntity
-"
-    type="fragment"
-    :title="$t('fragmentsAddFragmentAction', 'Add fragment')"
-    :description="
-  $t(
-    'fragmentsAddFragmentDescription',
-    '<p>Drag the icon into the page to add a fragment block.</p><p>Fragments are reusable blocks that always render the same content.</p>'
-  )
-"
-    :disabled="!isEnabled"
-    item-bundle="blokkli_fragment"
-    icon="fragment"
-    color="accent"
-    @placed="placedAction = $event"
-  />
-
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="slide-in">
       <FragmentsDialog
-        v-if="placedAction && adapter.getLibraryItems"
+        v-if="placedAction"
         :field="placedAction.field"
         @close="placedAction = null"
         @submit="onAddFragment"
@@ -32,9 +13,9 @@
 
 <script setup>
 import { ref, useBlokkli, defineBlokkliFeature, computed } from "#imports";
-import { PluginAddAction } from "#blokkli/plugins";
 import FragmentsDialog from "./Dialog/index.vue";
 import { BlokkliTransition } from "#blokkli/components";
+import defineAddAction from "#blokkli/helpers/composables/defineAddAction";
 const { adapter } = defineBlokkliFeature({
   id: "fragments",
   icon: "fragment",
@@ -43,15 +24,7 @@ const { adapter } = defineBlokkliFeature({
   requiredAdapterMethods: ["fragmentsAddBlock"],
   dependencies: ["add-list"]
 });
-const { state, $t, types, selection, dom } = useBlokkli();
-const isEnabled = computed(() => {
-  const item = selection.item.value;
-  if (item) {
-    const field = dom.getRegisteredField(item.host.uuid, item.host.fieldName);
-    return !!field?.allowedFragments.length;
-  }
-  return true;
-});
+const { state, $t, types, dom, ui } = useBlokkli();
 const placedAction = ref(null);
 const onAddFragment = async (name) => {
   if (!placedAction.value || !adapter.fragmentsAddBlock) {
@@ -69,6 +42,29 @@ const onAddFragment = async (name) => {
 const isSupportedOnEntity = computed(
   () => types.generallyAvailableBundles.find((v) => v.id === "blokkli_fragment")
 );
+defineAddAction(() => {
+  if (!isSupportedOnEntity.value) {
+    return;
+  }
+  return {
+    id: "fragment",
+    icon: "fragment",
+    color: "accent",
+    itemBundle: "blokkli_fragment",
+    title: $t("fragmentsAddFragmentAction", "Add fragment"),
+    description: $t(
+      "fragmentsAddFragmentDescription",
+      "<p>Drag the icon into the page to add a fragment block.</p><p>Fragments are reusable blocks that always render the same content.</p>"
+    ),
+    callback: (action) => {
+      placedAction.value = action;
+    },
+    enabled: (item) => {
+      const field = dom.getRegisteredField(item.host.uuid, item.host.fieldName);
+      return !!field?.allowedFragments.length;
+    }
+  };
+});
 </script>
 
 <script>

package/dist/runtime/components/Edit/Features/ImportExisting/Dialog/index.vue

@@ -1,5 +1,6 @@
 <template>
   <DialogModal
+    id="import-existing"
     :title="$t('importExistingDialogTitle', 'Import from existing page')"
     :lead="
   $t(

package/dist/runtime/components/Edit/Features/ImportExisting/index.vue

@@ -1,18 +1,5 @@
 <template>
-  <PluginMenuButton
-    v-if="state.mutatedFields.value.length"
-    id="import_existing"
-    :title="$t('importExistingTitle', 'Import...')"
-    :description="
-  $t('importExistingDescription', 'Import from an existing page')
-"
-    :disabled="state.editMode.value !== 'editing'"
-    :weight="50"
-    icon="import"
-    @click="showModal = true"
-  />
-
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="slide-up">
       <ExistingDialog
         v-if="showModal"
@@ -24,16 +11,11 @@
 </template>
 
 <script setup>
-import {
-  ref,
-  computed,
-  useBlokkli,
-  onMounted,
-  defineBlokkliFeature
-} from "#imports";
-import { PluginMenuButton } from "#blokkli/plugins";
+import { computed, useBlokkli, onMounted, defineBlokkliFeature } from "#imports";
 import { BlokkliTransition } from "#blokkli/components";
 import ExistingDialog from "./Dialog/index.vue";
+import defineMenuButton from "#blokkli/helpers/composables/defineMenuButton";
+import { useDialog } from "#blokkli/helpers/composables/useDialog";
 const { adapter, settings } = defineBlokkliFeature({
   id: "import-existing",
   label: "Import existing content",
@@ -50,11 +32,11 @@ const { adapter, settings } = defineBlokkliFeature({
     }
   }
 });
-const { state, $t } = useBlokkli();
+const { ui, state, $t } = useBlokkli();
 const isEmpty = computed(
   () => !state.mutatedFields.value.find((v) => v.list?.length)
 );
-const showModal = ref(false);
+const showModal = useDialog("import-existing", "center");
 function onSubmit(sourceUuid, sourceFields) {
   showModal.value = false;
   state.mutateWithLoadingState(
@@ -71,6 +53,25 @@ onMounted(() => {
     showModal.value = true;
   }
 });
+defineMenuButton(() => {
+  if (!state.mutatedFields.value.length) {
+    return void 0;
+  }
+  return {
+    id: "import_existing",
+    title: $t("importExistingTitle", "Import..."),
+    description: $t(
+      "importExistingDescription",
+      "Import from an existing page"
+    ),
+    icon: "import",
+    disabled: state.editMode.value !== "editing",
+    weight: 50,
+    callback: () => {
+      showModal.value = true;
+    }
+  };
+});
 </script>
 
 <script>

package/dist/runtime/components/Edit/Features/Library/EditReusable/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <Loading v-if="isLoading" />
     <Transition name="bk-library-edit-header">
       <header v-show="isLoaded" class="bk bk-library-edit-overlay-header">
@@ -46,7 +46,7 @@ const props = defineProps({
   uuid: { type: String, required: true },
   label: { type: String, required: false }
 });
-const { $t, element } = useBlokkli();
+const { $t, element, ui } = useBlokkli();
 const DURATION = 530;
 const emit = defineEmits(["submit", "close"]);
 function getOriginatingElement() {

package/dist/runtime/components/Edit/Features/Library/ReusableDialog/index.vue

@@ -1,5 +1,6 @@
 <template>
   <DialogModal
+    id="library-reusable"
     :title="$t('libraryDialogTitle', 'Add to library')"
     :lead="
   $t(