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

package/dist/runtime/components/Edit/Features/Hover/{Overlay → Renderer}/index.vue

@@ -6,16 +6,16 @@
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import defineRenderer from "#blokkli/helpers/composables/defineRenderer";
 import { useBlokkli, computed, ref, watch } from "#imports";
-import { setBuffersAndAttributes, drawBufferInfo, setUniforms } from "twgl.js";
+import {
+  setBuffersAndAttributes,
+  drawBufferInfo,
+  setUniforms
+} from "twgl.js";
 import vs from "./vertex.glsl?raw";
 import fs from "./fragment.glsl?raw";
 import { RectangleBufferCollector } from "#blokkli/helpers/webgl";
 import { toShaderColor, isInsideRect } from "#blokkli/helpers";
-const props = defineProps({
-  gl: { type: null, required: true }
-});
 const { animation, theme, dom, selection, state, ui, directive, blocks } = useBlokkli();
-const programInfo = animation.registerProgram("hover", props.gl, [vs, fs]);
 const MAX_RECTS = 11;
 function getDeepestUuid(uuids) {
   if (uuids.length === 0) {
@@ -48,22 +48,13 @@ let previousEditableFieldRect = null;
 const isHoveringEditableField = ref(false);
 const isHoveringSelectedBlock = ref(false);
 class HoverRectangleBufferCollector extends RectangleBufferCollector {
+  getBufferInfo(gl) {
+    if (!this.bufferInfo) {
+      this.bufferInfo = this.createBufferInfo(gl);
+    }
+    return this.bufferInfo;
+  }
 }
-const collector = new HoverRectangleBufferCollector(props.gl);
-for (let i = 0; i < MAX_RECTS; i++) {
-  collector.addRectangle(
-    {
-      id: `hover-rect-${i}`,
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-      radius: [0, 0, 0, 0]
-    },
-    0
-  );
-}
-const bufferInfo = collector.createBufferInfo();
 function resetHoverState() {
   previousHoveredUuids = [];
   previousDeepestUuid = null;
@@ -201,11 +192,11 @@ function updateHoverState(mouseX, mouseY, offset, scale, artboardSize) {
 }
 const uniforms = computed(() => {
   return {
-    u_color_mono: toShaderColor(theme.mono.value[300]),
-    u_color_accent: toShaderColor(theme.accent.value[600]),
-    u_color_teal: toShaderColor(theme.teal.value.normal),
-    u_color_white: toShaderColor([255, 255, 255]),
-    u_color_lime: toShaderColor(theme.lime.value.normal)
+    u_color_mono: theme.mono.value[300],
+    u_color_accent: theme.accent.value[600],
+    u_color_teal: theme.teal.value.normal,
+    u_color_white: [255, 255, 255],
+    u_color_lime: theme.lime.value.normal
   };
 });
 onBlokkliEvent("state:reloaded", () => {
@@ -214,9 +205,26 @@ onBlokkliEvent("state:reloaded", () => {
 onBlokkliEvent("ui:resized", () => {
   resetHoverState();
 });
-defineRenderer("hover-overlay", {
+const { collector } = defineRenderer("hover-overlay", {
   zIndex: 200,
-  enabled: () => !selection.isChangingOptions.value,
+  collector: () => {
+    const c = new HoverRectangleBufferCollector();
+    for (let i = 0; i < MAX_RECTS; i++) {
+      c.addRectangle(
+        {
+          id: `hover-rect-${i}`,
+          x: 0,
+          y: 0,
+          width: 100,
+          height: 100,
+          radius: [0, 0, 0, 0]
+        },
+        0
+      );
+    }
+    return c;
+  },
+  program: () => ({ shaders: [vs, fs] }),
   cursor: () => {
     if (isHoveringEditableField.value && state.editMode.value !== "readonly") {
       return "text";
@@ -226,10 +234,8 @@ defineRenderer("hover-overlay", {
     }
     return null;
   },
-  render: (ctx) => {
-    if (!bufferInfo) {
-      return;
-    }
+  render: (ctx, gl, program) => {
+    const bufferInfo = collector.getBufferInfo(gl);
     if (!ui.openTooltip.value) {
       updateHoverState(
         ctx.mouseX,
@@ -239,17 +245,198 @@ defineRenderer("hover-overlay", {
         ctx.artboardSize
       );
     }
-    props.gl.useProgram(programInfo.program);
-    setUniforms(programInfo, uniforms.value);
-    setUniforms(programInfo, {
+    gl.useProgram(program.program);
+    setUniforms(program, {
+      u_color_mono: toShaderColor(uniforms.value.u_color_mono),
+      u_color_accent: toShaderColor(uniforms.value.u_color_accent),
+      u_color_teal: toShaderColor(uniforms.value.u_color_teal),
+      u_color_white: toShaderColor(uniforms.value.u_color_white),
+      u_color_lime: toShaderColor(uniforms.value.u_color_lime),
       u_hover_positions: hoverState.positions,
       u_hover_radii: hoverState.radii,
       u_hover_types: hoverState.types,
-      u_hover_visible: hoverState.visible
+      u_hover_visible: hoverState.visible,
+      u_opacity: ctx.changeOptionsTransition
     });
-    animation.setSharedUniforms(props.gl, programInfo);
-    setBuffersAndAttributes(props.gl, programInfo, bufferInfo);
-    drawBufferInfo(props.gl, bufferInfo, props.gl.TRIANGLES);
+    animation.setSharedUniforms(gl, program);
+    setBuffersAndAttributes(gl, program, bufferInfo);
+    drawBufferInfo(gl, bufferInfo, gl.TRIANGLES);
+  },
+  renderFallback: (ctx, ctx2d) => {
+    if (!ui.openTooltip.value) {
+      updateHoverState(
+        ctx.mouseX,
+        ctx.mouseY,
+        ctx.artboardOffset,
+        ctx.artboardScale,
+        ctx.artboardSize
+      );
+    }
+    const rgbToCss = (rgb) => {
+      return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
+    };
+    const rgbaToCss = (rgb, alpha) => {
+      return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha})`;
+    };
+    const colors = uniforms.value;
+    const borderThickness = 1.5 * ctx.dpi;
+    const dashLength = 7 * ctx.dpi;
+    ctx2d.globalAlpha = ctx.changeOptionsTransition;
+    for (let i = 0; i < MAX_RECTS; i++) {
+      if (hoverState.visible[i] !== 1) {
+        continue;
+      }
+      const x = hoverState.positions[i * 4 + 0];
+      const y = hoverState.positions[i * 4 + 1];
+      const width = hoverState.positions[i * 4 + 2];
+      const height = hoverState.positions[i * 4 + 3];
+      const radiusTopLeft = hoverState.radii[i * 4 + 0];
+      const radiusTopRight = hoverState.radii[i * 4 + 1];
+      const radiusBottomRight = hoverState.radii[i * 4 + 2];
+      const radiusBottomLeft = hoverState.radii[i * 4 + 3];
+      const viewportX = (x * ctx.artboardScale + ctx.artboardOffset.x) * ctx.dpi;
+      const viewportY = (y * ctx.artboardScale + ctx.artboardOffset.y) * ctx.dpi;
+      const viewportWidth = width * ctx.artboardScale * ctx.dpi;
+      const viewportHeight = height * ctx.artboardScale * ctx.dpi;
+      const type = hoverState.types[i];
+      if (type === 2) {
+        ctx2d.fillStyle = rgbaToCss(colors.u_color_teal, 0.2);
+        const maxRadius = Math.min(viewportWidth, viewportHeight) / 2;
+        const rtl = Math.min(
+          radiusTopLeft * ctx.artboardScale * ctx.dpi,
+          maxRadius
+        );
+        const rtr = Math.min(
+          radiusTopRight * ctx.artboardScale * ctx.dpi,
+          maxRadius
+        );
+        const rbr = Math.min(
+          radiusBottomRight * ctx.artboardScale * ctx.dpi,
+          maxRadius
+        );
+        const rbl = Math.min(
+          radiusBottomLeft * ctx.artboardScale * ctx.dpi,
+          maxRadius
+        );
+        ctx2d.beginPath();
+        ctx2d.moveTo(viewportX + rtl, viewportY);
+        ctx2d.lineTo(viewportX + viewportWidth - rtr, viewportY);
+        if (rtr > 0) {
+          ctx2d.arcTo(
+            viewportX + viewportWidth,
+            viewportY,
+            viewportX + viewportWidth,
+            viewportY + rtr,
+            rtr
+          );
+        }
+        ctx2d.lineTo(
+          viewportX + viewportWidth,
+          viewportY + viewportHeight - rbr
+        );
+        if (rbr > 0) {
+          ctx2d.arcTo(
+            viewportX + viewportWidth,
+            viewportY + viewportHeight,
+            viewportX + viewportWidth - rbr,
+            viewportY + viewportHeight,
+            rbr
+          );
+        }
+        ctx2d.lineTo(viewportX + rbl, viewportY + viewportHeight);
+        if (rbl > 0) {
+          ctx2d.arcTo(
+            viewportX,
+            viewportY + viewportHeight,
+            viewportX,
+            viewportY + viewportHeight - rbl,
+            rbl
+          );
+        }
+        ctx2d.lineTo(viewportX, viewportY + rtl);
+        if (rtl > 0) {
+          ctx2d.arcTo(viewportX, viewportY, viewportX + rtl, viewportY, rtl);
+        }
+        ctx2d.closePath();
+        ctx2d.fill();
+        ctx2d.strokeStyle = rgbToCss(colors.u_color_teal);
+        ctx2d.lineWidth = borderThickness;
+        ctx2d.setLineDash([]);
+        ctx2d.stroke();
+      } else {
+        let strokeColor = colors.u_color_mono;
+        if (type === 4) {
+          strokeColor = colors.u_color_lime;
+        } else if (type === 3) {
+          strokeColor = colors.u_color_white;
+        } else if (type === 1) {
+          strokeColor = colors.u_color_accent;
+        }
+        ctx2d.strokeStyle = rgbToCss(strokeColor);
+        ctx2d.lineWidth = borderThickness;
+        ctx2d.setLineDash([dashLength, dashLength]);
+        const maxRadius = Math.min(viewportWidth, viewportHeight) / 2;
+        const rtl = Math.min(
+          radiusTopLeft * ctx.artboardScale * ctx.dpi,
+          maxRadius
+        );
+        const rtr = Math.min(
+          radiusTopRight * ctx.artboardScale * ctx.dpi,
+          maxRadius
+        );
+        const rbr = Math.min(
+          radiusBottomRight * ctx.artboardScale * ctx.dpi,
+          maxRadius
+        );
+        const rbl = Math.min(
+          radiusBottomLeft * ctx.artboardScale * ctx.dpi,
+          maxRadius
+        );
+        ctx2d.beginPath();
+        ctx2d.moveTo(viewportX + rtl, viewportY);
+        ctx2d.lineTo(viewportX + viewportWidth - rtr, viewportY);
+        if (rtr > 0) {
+          ctx2d.arcTo(
+            viewportX + viewportWidth,
+            viewportY,
+            viewportX + viewportWidth,
+            viewportY + rtr,
+            rtr
+          );
+        }
+        ctx2d.lineTo(
+          viewportX + viewportWidth,
+          viewportY + viewportHeight - rbr
+        );
+        if (rbr > 0) {
+          ctx2d.arcTo(
+            viewportX + viewportWidth,
+            viewportY + viewportHeight,
+            viewportX + viewportWidth - rbr,
+            viewportY + viewportHeight,
+            rbr
+          );
+        }
+        ctx2d.lineTo(viewportX + rbl, viewportY + viewportHeight);
+        if (rbl > 0) {
+          ctx2d.arcTo(
+            viewportX,
+            viewportY + viewportHeight,
+            viewportX,
+            viewportY + viewportHeight - rbl,
+            rbl
+          );
+        }
+        ctx2d.lineTo(viewportX, viewportY + rtl);
+        if (rtl > 0) {
+          ctx2d.arcTo(viewportX, viewportY, viewportX + rtl, viewportY, rtl);
+        }
+        ctx2d.closePath();
+        ctx2d.stroke();
+      }
+      ctx2d.setLineDash([]);
+    }
+    ctx2d.globalAlpha = 1;
   }
 });
 </script>

package/dist/runtime/components/Edit/Features/Hover/Renderer/index.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/Features/Hover/{Overlay → Renderer}/vertex.glsl

@@ -1,12 +1,14 @@
+#version 300 es
+
 precision highp float;
 
 // [x, y] position.
-attribute vec2 a_position;
+in vec2 a_position;
 // The [x,y,width, height] of the quad the vertex belongs to.
-attribute vec4 a_quad;
-attribute float a_rect_id;
-attribute float a_rect_type;
-attribute vec4 a_rect_radius;
+in vec4 a_quad;
+in float a_rect_id;
+in float a_rect_type;
+in vec4 a_rect_radius;
 
 // The global scaling applied to all quads.
 uniform float u_scale;
@@ -23,13 +25,27 @@ uniform vec4 u_hover_radii[11]; // topLeft, topRight, bottomRight, bottomLeft
 uniform float u_hover_types[11]; // 0=mono, 1=accent, 2=teal fill
 uniform float u_hover_visible[11]; // 0=hidden, 1=visible
 
+// Color uniforms
+uniform vec3 u_color_mono;
+uniform vec3 u_color_accent;
+uniform vec3 u_color_teal;
+uniform vec3 u_color_white;
+uniform vec3 u_color_lime;
+
 // The transformed quad for the fragment shader.
-varying vec4 v_quad;
-varying vec4 v_rect_radius;
-varying vec2 v_rect_size;
-varying vec2 v_rect_center;
-varying float v_rect_type;
-varying vec2 v_quad_artboard_pos;
+out vec4 v_quad;
+out vec4 v_rect_radius;
+out vec2 v_rect_size;
+out vec2 v_rect_center;
+out float v_rect_type;
+out vec2 v_quad_artboard_pos;
+// Optimized varyings to reduce fragment shader calculations
+out vec4 v_corner_radii;
+out float v_border_thickness;
+out vec2 v_half_size;
+out vec3 v_color;
+out float v_dash_cycle;
+out vec2 v_rect_size_artboard;
 
 void main() {
   int rectIndex = int(a_rect_id);
@@ -114,4 +130,26 @@ void main() {
   v_rect_type = hoverType;
   // Pass the original artboard-space quad position for stable dash pattern
   v_quad_artboard_pos = vec2(hoverPos.x, hoverPos.y);
+
+  // Calculate optimized values once per vertex instead of per fragment
+  // Corner radii clamped to max radius
+  v_corner_radii = min(v_rect_radius, min(v_rect_size.x, v_rect_size.y) / 2.0);
+
+  v_border_thickness = 1.5 * u_dpi;
+  v_half_size = v_rect_size / 2.0;
+  v_dash_cycle = 14.0 - u_scale * 1.0;
+  v_rect_size_artboard = vec2(hoverPos.z, hoverPos.w);
+
+  // Select color based on type: 0 = mono, 1 = accent, 2 = teal, 3 = white (inverted), 4 = lime (library)
+  if (hoverType > 3.5) {
+    v_color = u_color_lime;
+  } else if (hoverType > 2.5) {
+    v_color = u_color_white;
+  } else if (hoverType > 1.5) {
+    v_color = u_color_teal;
+  } else if (hoverType > 0.5) {
+    v_color = u_color_accent;
+  } else {
+    v_color = u_color_mono;
+  }
 }

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

@@ -1,20 +1,23 @@
 <template>
-  <Overlay v-if="isVisible && gl && animation.webglEnabled.value" :gl="gl" />
+  <ErrorBoundary v-model="isLocked" :label="$t('feature_hover_label', 'Hover')">
+    <Renderer v-if="isVisible" :key="animation.renderKey.value" />
+  </ErrorBoundary>
 </template>
 
 <script setup>
-import Overlay from "./Overlay/index.vue";
-import { computed, useBlokkli, defineBlokkliFeature } from "#imports";
+import Renderer from "./Renderer/index.vue";
+import { computed, useBlokkli, defineBlokkliFeature, ref } from "#imports";
+import { ErrorBoundary } from "#blokkli/components";
 defineBlokkliFeature({
   id: "hover",
   icon: "selection",
   label: "Hover",
   description: "Renders a border around blocks that are currently being hovered."
 });
-const { selection, ui, animation, dom } = useBlokkli();
-const gl = animation.gl();
+const { selection, ui, dom, animation, $t } = useBlokkli();
+const isLocked = ref(false);
 const isVisible = computed(
-  () => dom.isReady.value && !selection.isMultiSelecting.value && !selection.editableActive.value && !selection.isDragging.value && !ui.hasTransformOverlayOpen.value && !ui.hasDialogOpen.value && !ui.isAnimating.value
+  () => !isLocked.value && dom.isReady.value && !selection.isMultiSelecting.value && !selection.editableActive.value && !selection.isDragging.value && !ui.hasTransformOverlayOpen.value && !ui.hasDialogOpen.value && !ui.isAnimating.value
 );
 </script>
 

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

@@ -88,16 +88,27 @@ const { adapter } = defineBlokkliFeature({
 });
 const { selection, state, types, $t, eventBus, definitions } = useBlokkli();
 const showReusableDialog = ref(false);
+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 +151,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)

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;