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

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/LibraryDialog/Item/index.vue

@@ -21,11 +21,7 @@
       :class="backgroundClass"
     >
       <ScaleToFit :width="previewWidth" :max-height="400">
-        <BlokkliItem
-          v-bind="item"
-          parent-type="nested"
-          class="bk-drop-element"
-        />
+        <BlokkliItem v-bind="item" parent-type="nested" />
       </ScaleToFit>
     </div>
   </div>

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(

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

@@ -20,26 +20,7 @@
     @click="showReusableDialog = true"
   />
 
-  <PluginAddAction
-    v-if="
-  adapter.addLibraryItem && adapter.getLibraryItems && isSupportedOnEntity
-"
-    type="library"
-    :title="$t('libraryAddFromLibrary', 'Add from library')"
-    :description="
-  $t(
-    'libraryAddDescription',
-    'Add a reusable block from the block library.'
-  )
-"
-    icon="reusable"
-    color="lime"
-    :item-bundle="BUNDLE_FROM_LIBRARY"
-    :disabled="!fromLibraryAllowedInList"
-    @placed="placedAction = $event"
-  />
-
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="slide-up">
       <ReusableDialog
         v-if="showReusableDialog && selection.item.value"
@@ -51,7 +32,7 @@
     </BlokkliTransition>
   </Teleport>
 
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="slide-in">
       <LibraryDialog
         v-if="placedAction && adapter.getLibraryItems"
@@ -71,12 +52,14 @@
 
 <script setup>
 import { ref, computed, useBlokkli, defineBlokkliFeature } from "#imports";
-import { PluginItemAction, PluginAddAction } from "#blokkli/plugins";
+import { PluginItemAction } from "#blokkli/plugins";
 import ReusableDialog from "./ReusableDialog/index.vue";
 import LibraryDialog from "./LibraryDialog/index.vue";
 import EditReusable from "./EditReusable/index.vue";
 import { BlokkliTransition } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import defineAddAction from "#blokkli/helpers/composables/defineAddAction";
+import { useDialog } from "#blokkli/helpers/composables/useDialog";
 import { BUNDLE_FROM_LIBRARY } from "#blokkli/constants";
 const { adapter } = defineBlokkliFeature({
   id: "library",
@@ -86,18 +69,29 @@ const { adapter } = defineBlokkliFeature({
   requiredAdapterMethods: ["makeBlockReusable", "detachReusableBlock"],
   dependencies: ["add-list"]
 });
-const { selection, state, types, $t, eventBus, definitions } = useBlokkli();
-const showReusableDialog = ref(false);
+const { selection, state, types, $t, eventBus, definitions, ui } = useBlokkli();
+const showReusableDialog = useDialog("library-reusable", "center");
+async function selectNewlyAdded(cb) {
+  const uuidsBefore = state.getAllUuids();
+  await cb();
+  const uuidsAfter = state.getAllUuids();
+  const newUuid = uuidsAfter.find((uuid) => !uuidsBefore.includes(uuid));
+  if (!newUuid) {
+    return;
+  }
+  eventBus.emit("select", newUuid);
+}
 const onDetach = async () => {
   if (!adapter.detachReusableBlock || !selection.uuids.value.length) {
     return;
   }
-  await state.mutateWithLoadingState(
-    () => adapter.detachReusableBlock({
-      uuids: selection.uuids.value
-    })
+  await selectNewlyAdded(
+    () => state.mutateWithLoadingState(
+      () => adapter.detachReusableBlock({
+        uuids: selection.uuids.value
+      })
+    )
   );
-  eventBus.emit("select:end");
 };
 const placedAction = ref(null);
 const onAddLibraryItem = async (uuid) => {
@@ -140,14 +134,15 @@ async function onMakeReusable(label) {
   if (!item) {
     return;
   }
-  await state.mutateWithLoadingState(
-    () => adapter.makeBlockReusable({
-      label,
-      uuid: item.uuid
-    }),
-    $t("libraryError", "Failed to add block to library.")
+  await selectNewlyAdded(
+    () => state.mutateWithLoadingState(
+      () => adapter.makeBlockReusable({
+        label,
+        uuid: item.uuid
+      }),
+      $t("libraryError", "Failed to add block to library.")
+    )
   );
-  eventBus.emit("select:end");
 }
 const isSupportedOnEntity = computed(
   () => types.generallyAvailableBundles.find((v) => v.id === BUNDLE_FROM_LIBRARY)
@@ -174,6 +169,25 @@ function onSubmitLibraryItem() {
   eventBus.emit("reloadState");
   cancelLibraryItemEdit();
 }
+defineAddAction(() => {
+  if (!adapter.addLibraryItem || !adapter.getLibraryItems || !isSupportedOnEntity.value) {
+    return;
+  }
+  return {
+    id: "library",
+    title: $t("libraryAddFromLibrary", "Add from library"),
+    description: $t(
+      "libraryAddDescription",
+      "Add a reusable block from the block library."
+    ),
+    icon: "reusable",
+    color: "lime",
+    itemBundle: BUNDLE_FROM_LIBRARY,
+    callback: (data) => {
+      placedAction.value = data;
+    }
+  };
+});
 </script>
 
 <script>

package/dist/runtime/components/Edit/Features/MediaLibrary/Library/Item.vue

@@ -3,7 +3,7 @@
     :key="mediaId"
     class="bk-media-library-items-item"
     :class="{ 'bk-is-selected': isSelected }"
-    :data-sortli-id="'media_library_' + mediaId"
+    :data-sortli-id="mediaId"
     data-element-type="media_library"
     :data-item-bundle="targetBundles[0]"
     :data-media-id="mediaId"

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

@@ -45,20 +45,17 @@
     <div
       ref="listEl"
       class="bk-media-library-items bk-scrollbar-light"
-      :class="[{ 'bk-is-sortli': isSortli }, 'bk-is-' + listView]"
+      :class="'bk-is-' + listView"
     >
-      <Sortli v-if="isSortli" no-transition :get-drag-items="getDragItems">
+      <Sortli no-transition :get-drag-items="getDragItems" :build-item>
         <Item
           v-for="item in items"
           :key="item.mediaId"
           v-bind="item"
           v-model="selected"
+          :class="'bk-is-' + listView"
         />
       </Sortli>
-
-      <div v-else>
-        <Item v-for="item in items" :key="item.mediaId" v-bind="item" />
-      </div>
     </div>
 
     <div v-if="selected.length" class="bk-media-library-cancel">
@@ -82,10 +79,9 @@ import {
 } from "#imports";
 import { Sortli, Icon, Pagination, FormToggle } from "#blokkli/components";
 import Item from "./Item.vue";
-import { buildDraggableItem, falsy } from "#blokkli/helpers";
+import { falsy } from "#blokkli/helpers";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 defineProps({
-  isSortli: { type: Boolean, required: false },
   modelValue: { type: String, required: false }
 });
 const { adapter, storage, $t, element } = useBlokkli();
@@ -102,17 +98,17 @@ function getDragItems(activeItem) {
   const items2 = selected.value.map((id) => {
     const el = element.query(
       listElement,
-      `[data-sortli-id="media_library_${id}"]`,
+      `[data-sortli-id="${id}"]`,
       "Find media library drag item."
     );
     if (!(el instanceof HTMLElement)) {
       return null;
     }
-    const item = buildDraggableItem(el);
-    if (item?.itemType === "media_library") {
-      return item;
+    const item = buildItem(el);
+    if (!item) {
+      return null;
     }
-    return null;
+    return item;
   }).filter(falsy);
   if (!activeId) {
     return items2;
@@ -167,6 +163,23 @@ const perPage = computed(() => data.value?.perPage || 0);
 const totalPages = computed(() => {
   return Math.ceil(total.value / perPage.value);
 });
+function buildItem(element2) {
+  const id = element2.dataset.sortliId;
+  if (!id) {
+    return null;
+  }
+  const item = items.value.find((v) => v.mediaId === id);
+  if (!item) {
+    return null;
+  }
+  return {
+    itemType: "media_library",
+    mediaId: item.mediaId,
+    mediaBundle: item.mediaBundle ?? "",
+    itemBundle: item.targetBundles[0] ?? "",
+    element: () => element2
+  };
+}
 onBlokkliEvent("item:dropped", function() {
   selected.value = [];
 });

package/dist/runtime/components/Edit/Features/MediaLibrary/Library/index.vue.d.ts

@@ -1,5 +1,4 @@
 type __VLS_Props = {
-    isSortli?: boolean;
     modelValue?: string;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -14,21 +14,11 @@
   >
     <Library is-sortli />
   </PluginSidebar>
-
-  <PluginDroppableEdit
-    id="media-replace"
-    title="Replace media"
-    icon="image"
-    entity-type="media"
-    @save="onDroppableEditSave"
-  >
-    <Library v-model="selected" />
-  </PluginDroppableEdit>
 </template>
 
 <script setup>
-import { useBlokkli, defineBlokkliFeature, ref } from "#imports";
-import { PluginSidebar, PluginDroppableEdit } from "#blokkli/plugins";
+import { useBlokkli, defineBlokkliFeature } from "#imports";
+import { PluginSidebar } from "#blokkli/plugins";
 import Library from "./Library/index.vue";
 import defineDropAreas from "#blokkli/helpers/composables/defineDropAreas";
 import { falsy } from "#blokkli/helpers";
@@ -40,45 +30,11 @@ defineBlokkliFeature({
   description: "Implements a media library to easily drag and drop media like images or videos.",
   requiredAdapterMethods: ["mediaLibraryGetResults", "mediaLibraryAddBlock"]
 });
-const { $t, adapter, state, runtimeConfig, types, directive } = useBlokkli();
-const selected = ref("");
+const { $t, adapter, state, types, directive } = useBlokkli();
 const ERROR_MESSAGE = $t(
   "mediaLibraryReplaceFailed",
   "Failed to replace media."
 );
-const onDroppableEditSave = async (e) => {
-  if (!selected.value) {
-    return;
-  }
-  if ("itemType" in e.host && adapter.mediaLibraryReplaceMedia) {
-    const host = e.host;
-    await state.mutateWithLoadingState(
-      () => adapter.mediaLibraryReplaceMedia({
-        host: {
-          uuid: host.block.uuid,
-          type: runtimeConfig.itemEntityType,
-          fieldName: e.fieldName
-        },
-        mediaId: selected.value
-      }),
-      ERROR_MESSAGE
-    );
-  } else if ("type" in e.host && adapter.mediaLibraryReplaceEntityMedia) {
-    const host = e.host;
-    const type = host.type;
-    await state.mutateWithLoadingState(
-      () => adapter.mediaLibraryReplaceEntityMedia({
-        host: {
-          uuid: host.uuid,
-          type,
-          fieldName: e.fieldName
-        },
-        mediaId: selected.value
-      }),
-      ERROR_MESSAGE
-    );
-  }
-};
 defineDropAreas((dragItems) => {
   if (!adapter.mediaLibraryReplaceMedia) {
     return;

package/dist/runtime/components/Edit/Features/MultiSelect/{Overlay → Renderer}/fragment.glsl

@@ -9,6 +9,13 @@ in vec3 v_color_default;
 in vec3 v_color_active;
 in float v_rect_id;
 
+// Optimized inputs - values computed once per vertex instead of per pixel
+in vec2 v_size;
+in vec2 v_location;
+in float v_thickness;
+in float v_edge_softness;
+in float v_radius;
+
 out vec4 fragColor;
 
 uniform float u_time;
@@ -45,32 +52,11 @@ void main() {
     return;
   }
 
-  // Selectable blocks.
-  float radius_base = 2.0 * u_scale;
-  float thickness = max(min(1.0 * u_scale, 3.0), 0.5);
-  float inset = max(min(2.0 * u_scale, 1.0), 2.0) * thickness;
-
-  float u_rect_x = v_quad.x + inset;
-  float u_rect_y = v_quad.y + inset;
-  float u_rectWidth = v_quad.z - 2.0 * inset;
-  float u_rectHeight = v_quad.w - 2.0 * inset;
-
-  vec2 size = vec2(u_rectWidth, u_rectHeight);
-
-  float x = u_rect_x;
-  float y = u_rect_y;
-  vec2 offsetPosition = vec2(x + size.x / 2.0, y + size.y / 2.0);
-
-  vec2 location = vec2(offsetPosition);
-
-  float edgeSoftness = 1.0 * u_dpi;
-  float radius =
-    min(radius_base * u_dpi, min(size.x, size.y) / 2.0) + thickness * 2.0;
-
+  // Selectable blocks - using pre-computed values from vertex shader
   float distance = roundedBoxSDF(
-    location - gl_FragCoord.xy,
-    size / 2.0,
-    radius
+    v_location - gl_FragCoord.xy,
+    v_size / 2.0,
+    v_radius
   );
 
   bool is_intersecting = v_intersecting >= 0.5;
@@ -79,7 +65,8 @@ void main() {
   float mixedDistance = is_intersecting ? distance : abs(distance);
 
   float smoothedAlpha =
-    1.0 - smoothstep(-edgeSoftness, edgeSoftness, mixedDistance - thickness);
+    1.0 -
+    smoothstep(-v_edge_softness, v_edge_softness, mixedDistance - v_thickness);
 
   fragColor = vec4(
     color,