@blokkli/editor 2.0.0-alpha.17 → 2.0.0-alpha.18

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

@@ -3,6 +3,7 @@
     id="duplicate"
     :title="$t('duplicate', 'Duplicate')"
     :disabled="!canDuplicate"
+    edit-only
     meta
     key-code="D"
     multiple
@@ -31,22 +32,19 @@ function onClick(items) {
   );
 }
 const canDuplicate = computed(() => {
-  if (state.editMode.value !== "editing") {
-    return false;
-  }
   const blocksByField = {};
   const fieldsByKey = {};
-  const selectedCount = selection.blocks.value.length;
+  const selectedCount = selection.items.value.length;
   for (let i = 0; i < selectedCount; i++) {
-    const block = selection.blocks.value[i];
-    const field = state.getMutatedField(block.hostUuid, block.hostFieldName);
+    const block = selection.items.value[i];
+    const field = state.getMutatedField(block.host.uuid, block.host.fieldName);
     if (!field) {
       continue;
     }
     const fieldKey = getFieldKey(field.entityUuid, field.name);
     const fieldConfig = types.getFieldConfig(
       field.entityType,
-      block.hostBundle,
+      block.host.bundle,
       field.name
     );
     if (!fieldConfig) {
@@ -77,7 +75,7 @@ const canDuplicate = computed(() => {
     if (field.cardinality !== -1 && count + blocks.length > field.cardinality) {
       return false;
     }
-    const bundles = blocks.map((v) => v.itemBundle);
+    const bundles = blocks.map((v) => v.bundle);
     if (!field.allowedBundles.length || bundles.some((bundle) => !field.allowedBundles.includes(bundle))) {
       return false;
     }

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

@@ -1,7 +1,7 @@
 <template>
   <PluginItemAction
-    v-if="isEditing"
     id="edit"
+    edit-only
     :title="$t('edit', 'Edit...')"
     :disabled="!canEdit"
     meta
@@ -24,27 +24,21 @@ defineBlokkliFeature({
   requiredAdapterMethods: ["formFrameBuilder"]
 });
 const { eventBus, selection, state, $t, adapter, definitions } = useBlokkli();
-const block = computed(() => {
-  if (selection.blocks.value.length !== 1) {
-    return null;
-  }
-  return selection.blocks.value[0];
-});
-const isEditing = computed(() => state.editMode.value === "editing");
 const canEdit = computed(() => {
-  if (!block.value) {
+  const item = selection.item.value;
+  if (!item) {
     return false;
   }
   const definition = definitions.getBlockDefinition(
-    block.value.itemBundle,
-    block.value.hostFieldListType,
-    block.value.parentBlockBundle
+    item.bundle,
+    item.fieldListType,
+    item.parentBlockBundle
   );
   if (definition?.editor?.disableEdit) {
     return false;
   }
-  if (block.value.libraryItemUuid) {
-    return !!adapter.getLibraryItemEditUrl && (state.editMode.value === "editing" || state.editMode.value === "translating") && !block.value.isNew;
+  if (item.library?.libraryItemUuid) {
+    return !!adapter.getLibraryItemEditUrl && (state.editMode.value === "editing" || state.editMode.value === "translating") && !item.isNew;
   }
   return state.editMode.value === "editing";
 });
@@ -56,22 +50,22 @@ function onClick(items) {
     return;
   }
   const item = items[0];
-  if (item.libraryItemUuid && adapter.getLibraryItemEditUrl) {
-    const url = adapter.getLibraryItemEditUrl(item.libraryItemUuid);
+  if (item.library?.libraryItemUuid && adapter.getLibraryItemEditUrl) {
+    const url = adapter.getLibraryItemEditUrl(item.library.libraryItemUuid);
     eventBus.emit("library:edit-item", {
       url,
-      label: item.editTitle,
-      uuid: item.libraryItemUuid
+      label: item.library.label,
+      uuid: item.library.libraryItemUuid
     });
     return;
   }
   eventBus.emit("item:edit", {
     uuid: item.uuid,
-    bundle: item.itemBundle
+    bundle: item.bundle
   });
 }
-onBlokkliEvent("item:doubleClick", function(block2) {
-  onClick([block2]);
+onBlokkliEvent("item:doubleClick", function(block) {
+  onClick([block]);
 });
 </script>
 

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

@@ -24,6 +24,7 @@ import { ref, computed, useBlokkli, defineBlokkliFeature } from "#imports";
 import { FormOverlay, BlokkliTransition } from "#blokkli/components";
 import FormFrame from "./Frame/index.vue";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { itemEntityType } from "#blokkli-build/config";
 const { adapter } = defineBlokkliFeature({
   id: "edit-form",
   icon: "form",
@@ -31,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 } = useBlokkli();
+const { types, state, context, $t, dom, definitions, blocks } = useBlokkli();
 const form = ref(null);
 const formUrl = computed(() => {
   if (form.value) {
@@ -99,13 +100,13 @@ onBlokkliEvent("item:edit", (e) => {
   if (!state.canEdit.value) {
     return;
   }
-  const block = dom.findBlock(e.uuid);
+  const block = blocks.getBlock(e.uuid);
   if (!block) {
     return;
   }
   const definition = definitions.getBlockDefinition(
     e.bundle,
-    block.hostFieldListType,
+    block.fieldListType,
     block.parentBlockBundle
   );
   if (definition?.editor?.disableEdit) {
@@ -156,12 +157,12 @@ onBlokkliEvent("add:block:new", (e) => {
   if (!state.canEdit.value) {
     return;
   }
-  const field = dom.findField(e.host.uuid, e.host.fieldName);
-  if (field) {
+  const field = dom.getRegisteredField(e.host.uuid, e.host.fieldName);
+  if (field?.entity.type === itemEntityType) {
     const definition = definitions.getBlockDefinition(
       e.bundle,
       field.fieldListType,
-      field.hostEntityBundle
+      field.entity.bundle
     );
     if (definition?.editor?.disableEdit) {
       return;

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

@@ -18,7 +18,8 @@ import {
   onBeforeUnmount,
   useTemplateRef
 } from "#imports";
-const { adapter, ui } = useBlokkli();
+import { itemEntityType } from "#blokkli-build/config";
+const { adapter, ui, element } = useBlokkli();
 const PROPAGATE_WHEEL = false;
 const rootElement = ui.rootElement();
 const props = defineProps({
@@ -40,7 +41,11 @@ function onIframeLoad() {
   let ckEditor = null;
   iframe.value.contentDocument.addEventListener("wheel", (e) => {
     if (!ckEditor) {
-      const el = iframeDoc.querySelector(".ck-editor__editable");
+      const el = element.query(
+        iframeDoc.documentElement,
+        ".ck-editor__editable",
+        "Find CKEditor in editable iframe."
+      );
       if (el) {
         ckEditor = el;
       }
@@ -80,7 +85,7 @@ function onIframeLoad() {
 }
 const height = ref(props.initialHeight);
 const url = computed(() => {
-  if ("itemBundle" in props.host) {
+  if (props.host.type === itemEntityType) {
     return adapter.buildEditableFrameUrl({
       uuid: props.host.uuid,
       fieldName: props.fieldName

package/dist/runtime/components/Edit/Features/EditableField/Overlay/Frame/index.vue.d.ts

@@ -1,9 +1,9 @@
-import type { DraggableExistingBlock, EditableFieldType, EntityContext } from '#blokkli/types';
+import type { EditableFieldType, EntityContext } from '#blokkli/types';
 type __VLS_Props = {
     modelValue: string;
     type: EditableFieldType;
     fieldName: string;
-    host: DraggableExistingBlock | EntityContext;
+    host: EntityContext;
     initialHeight: number;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

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

@@ -71,7 +71,16 @@ import InputPlaintext from "./Plaintext/index.vue";
 import InputContenteditable from "./Contenteditable/index.vue";
 import InputFrame from "./Frame/index.vue";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-const { eventBus, selection, state, adapter, $t, types } = useBlokkli();
+import { itemEntityType } from "#blokkli-build/config";
+const {
+  eventBus,
+  selection,
+  state,
+  adapter,
+  $t,
+  types,
+  element: elementProvider
+} = useBlokkli();
 const props = defineProps({
   fieldName: { type: String, required: true },
   host: { type: Object, required: true },
@@ -102,12 +111,7 @@ const inputStyle = ref({});
 const form = ref(null);
 const input = ref(null);
 const hasChanged = computed(() => modelValue.value !== originalText.value);
-const itemBundle = computed(() => {
-  if ("itemBundle" in props.host) {
-    return props.host.itemBundle;
-  }
-  return void 0;
-});
+const itemBundle = computed(() => props.host.bundle);
 const maxlength = computed(() => props.config.maxLength);
 const required = computed(() => !!props.config.required);
 const title = computed(() => {
@@ -138,7 +142,7 @@ const close = async () => {
   }
   const el = getElement();
   if (shouldSave.value && modelValue.value !== originalText.value) {
-    if ("itemBundle" in props.host) {
+    if (props.host.type === itemEntityType) {
       await state.mutateWithLoadingState(
         () => adapter.updateFieldValue({
           uuid: props.host.uuid,
@@ -187,17 +191,30 @@ const focusInput = (el) => {
   if (!el) {
     return;
   }
-  const textarea = el.querySelector("textarea");
+  const queryEl = el instanceof Document ? el.documentElement : el;
+  const textarea = elementProvider.query(
+    queryEl,
+    "textarea",
+    "Focus editable field textarea"
+  );
   if (textarea) {
     textarea.focus();
     return;
   }
-  const editable = el.querySelector("[contenteditable]");
-  if (editable instanceof HTMLElement) {
+  const editable = elementProvider.query(
+    queryEl,
+    "[contenteditable]",
+    "Focus editable field contenteditable"
+  );
+  if (editable) {
     editable.focus();
     return;
   }
-  const iframe = el.querySelector("iframe");
+  const iframe = elementProvider.query(
+    queryEl,
+    "iframe",
+    "Find iframe in editable field"
+  );
   if (iframe?.contentDocument) {
     focusInput(iframe.contentDocument);
   }

package/dist/runtime/components/Edit/Features/EditableField/Overlay/index.vue.d.ts

@@ -1,7 +1,7 @@
-import type { DraggableExistingBlock, EntityContext, EditableFieldConfig } from '#blokkli/types';
+import type { EntityContext, EditableFieldConfig } from '#blokkli/types';
 type __VLS_Props = {
     fieldName: string;
-    host: DraggableExistingBlock | EntityContext;
+    host: EntityContext;
     element: HTMLElement;
     config: EditableFieldConfig;
     isComponent?: boolean;

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

@@ -1,7 +1,12 @@
 <template>
   <Teleport to="body">
     <BlokkliTransition name="caret-tooltip" :enabled="hasTransition">
-      <Overlay v-if="editable" v-bind="editable" :key="key" @close="close" />
+      <Overlay
+        v-if="selectedEditable"
+        v-bind="selectedEditable"
+        :key="key"
+        @close="close"
+      />
     </BlokkliTransition>
   </Teleport>
 </template>
@@ -19,6 +24,7 @@ import { BlokkliTransition } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import defineCommands from "#blokkli/helpers/composables/defineCommands";
 import { falsy } from "#blokkli/helpers";
+import { itemEntityType } from "#blokkli-build/config";
 defineBlokkliFeature({
   id: "editable-field",
   icon: "textbox",
@@ -26,41 +32,47 @@ defineBlokkliFeature({
   requiredAdapterMethods: ["updateFieldValue", "getEditableFieldConfig"],
   description: "Implements a form overlay to edit a single field of a block."
 });
-const { selection, adapter, types, $t, dom, runtimeConfig, state } = useBlokkli();
-const editable = ref(null);
+const { selection, adapter, types, $t, state, directive, blocks, context } = useBlokkli();
+const selectedEditable = ref(null);
 const hasTransition = ref(false);
 const key = computed(() => {
-  if (!editable.value) {
+  if (!selectedEditable.value) {
     return "";
   }
-  return editable.value.host.uuid + editable.value.fieldName;
+  return selectedEditable.value.host.uuid + selectedEditable.value.fieldName;
 });
 const getHost = (uuid) => {
   if (uuid) {
-    const block = dom.findBlock(uuid);
+    const block = blocks.getBlock(uuid);
     if (block) {
-      return block;
+      return {
+        type: itemEntityType,
+        bundle: block.bundle,
+        uuid: block.uuid
+      };
     }
   }
-  return dom.findClosestEntityContext(dom.getActiveProviderElement());
+  return {
+    type: context.value.entityType,
+    bundle: context.value.entityBundle,
+    uuid: context.value.entityUuid
+  };
 };
 const buildEditable = (fieldName, uuid) => {
   const host = getHost(uuid);
   if (!host) {
     return;
   }
-  const hostEntityType = "type" in host ? host.type : runtimeConfig.itemEntityType;
-  const hostEntityBundle = "bundle" in host ? host.bundle : host.itemBundle;
-  if (hostEntityBundle === "from_library") {
+  if (host.bundle === "from_library") {
     return;
   }
   const config = types.editableFieldConfig.forName(
-    hostEntityType,
-    hostEntityBundle,
+    host.type,
+    host.bundle,
     fieldName
   );
   if (!config) {
-    let message = `Failed to load editable field config for field "${fieldName}" on entity type "${hostEntityType}" of bundle "${hostEntityBundle}"`;
+    let message = `Failed to load editable field config for field "${fieldName}" on entity type "${host.type}" of bundle "${host.bundle}"`;
     if (uuid) {
       message += ` with uuid "${uuid}"`;
     }
@@ -69,10 +81,7 @@ const buildEditable = (fieldName, uuid) => {
   if (config.type === "frame" && !adapter.buildEditableFrameUrl) {
     return;
   }
-  const hostElement = "itemBundle" in host ? host.element() : dom.getActiveProviderElement();
-  const element = hostElement.querySelector(
-    `[data-blokkli-editable-field="${fieldName}"]`
-  );
+  const element = directive.findEditableElement(fieldName, host);
   if (!(element instanceof HTMLElement)) {
     return;
   }
@@ -89,30 +98,19 @@ onBlokkliEvent("editable:focus", (e) => {
   if (!state.canEdit.value) {
     return;
   }
-  hasTransition.value = !editable.value;
-  editable.value = buildEditable(e.fieldName, e.uuid) || null;
-  if (editable.value) {
+  hasTransition.value = !selectedEditable.value;
+  selectedEditable.value = buildEditable(e.fieldName, e.uuid) || null;
+  if (selectedEditable.value) {
     selection.editableActive.value = true;
   }
 });
 defineCommands(() => {
-  const editables = selection.blocks.value.flatMap((v) => {
-    return [...v.element().querySelectorAll("[data-blokkli-editable-field]")].map((el) => {
-      if (!(el instanceof HTMLElement)) {
-        return;
-      }
-      const block = el.closest("[data-uuid]");
-      if (!(block instanceof HTMLElement)) {
-        return;
-      }
-      if (block.dataset.uuid !== v.uuid) {
-        return;
-      }
-      const name = el.dataset.blokkliEditableField;
-      if (!name) {
-        return;
-      }
-      return buildEditable(name, block.dataset.uuid);
+  if (selection.items.value.length > 5) {
+    return [];
+  }
+  const editables = selection.items.value.flatMap((item) => {
+    return directive.getEditablesForBlock(item.uuid).map((v) => {
+      return buildEditable(v.fieldName, item.uuid);
     }).filter(falsy);
   });
   return editables.map((v) => {
@@ -126,7 +124,7 @@ defineCommands(() => {
       icon: "textbox",
       disabled: false,
       callback: () => {
-        editable.value = v;
+        selectedEditable.value = v;
       }
     };
   });
@@ -134,16 +132,16 @@ defineCommands(() => {
 watch(selection.editableActive, (isActive) => {
   if (!isActive) {
     hasTransition.value = true;
-    editable.value = null;
+    selectedEditable.value = null;
   }
 });
-watch(editable, (v) => {
+watch(selectedEditable, (v) => {
   if (!v && selection.editableActive.value) {
     selection.editableActive.value = false;
   }
 });
 const close = () => {
-  editable.value = null;
+  selectedEditable.value = null;
   selection.editableActive.value = false;
 };
 </script>

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

@@ -37,14 +37,16 @@
         <ul class="bk-library-dialog-list">
           <li
             v-for="(item, index) in fragments"
+            v-show="visible === null || visible.includes(item.name)"
+            ref="itemElements"
             :key="item.name"
             :class="{
   'bk-is-selected': selectedItem === item.name
 }"
+            :data-bk-fragment-name="item.name"
             @click="selectedItem = item.name"
           >
             <FragmentItem
-              v-show="visible === null || visible.includes(item.name)"
               :name="item.name"
               :label="item.label"
               :description="item.description"
@@ -65,7 +67,7 @@
 <script setup>
 import { FormOverlay } from "#blokkli/components";
 import { falsy } from "#blokkli/helpers";
-import { ref, useBlokkli, computed, watch } from "#imports";
+import { ref, useBlokkli, computed, watch, useTemplateRef } from "#imports";
 import FragmentItem from "./Item/index.vue";
 const props = defineProps({
   field: { type: Object, required: true }
@@ -73,7 +75,7 @@ const props = defineProps({
 const { $t, definitions } = useBlokkli();
 const emit = defineEmits(["close", "submit"]);
 const searchText = ref("");
-const listEl = ref(null);
+const itemElements = useTemplateRef("itemElements");
 const selectedItem = ref("");
 const allowedInField = computed(() => props.field.allowedFragments || []);
 const fragments = computed(
@@ -91,15 +93,15 @@ const onClose = () => {
 };
 const elements = ref([]);
 const buildElements = () => {
-  if (!listEl.value) {
+  if (!itemElements.value) {
     return;
   }
-  elements.value = [...listEl.value.querySelectorAll(".bk-library-list-item")].map((el) => {
+  elements.value = itemElements.value.map((el) => {
     if (el instanceof HTMLElement) {
-      const uuid = el.dataset.libraryItemUuid;
-      if (uuid) {
+      const name = el.dataset.bkFragmentName;
+      if (name) {
         return {
-          uuid,
+          name,
           text: el.textContent?.toLowerCase() || ""
         };
       }
@@ -115,6 +117,6 @@ const visible = computed(() => {
   if (!searchText.value || !elements.value.length) {
     return null;
   }
-  return elements.value.filter((v) => v.text.includes(searchText.value.toLowerCase())).map((v) => v.uuid);
+  return elements.value.filter((v) => v.text.includes(searchText.value.toLowerCase())).map((v) => v.name);
 });
 </script>

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

@@ -45,9 +45,9 @@ const { adapter } = defineBlokkliFeature({
 });
 const { state, $t, types, selection, dom } = useBlokkli();
 const isEnabled = computed(() => {
-  if (selection.blocks.value.length === 1) {
-    const block = selection.blocks.value[0];
-    const field = dom.findField(block.hostUuid, block.hostFieldName);
+  const item = selection.item.value;
+  if (item) {
+    const field = dom.getRegisteredField(item.host.uuid, item.host.fieldName);
     return !!field?.allowedFragments.length;
   }
   return true;

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

@@ -14,9 +14,8 @@ import { toShaderColor, isInsideRect } from "#blokkli/helpers";
 const props = defineProps({
   gl: { type: null, required: true }
 });
-const { animation, theme, dom, selection, state, ui, editable } = useBlokkli();
+const { animation, theme, dom, selection, state, ui, directive, blocks } = useBlokkli();
 const programInfo = animation.registerProgram("hover", props.gl, [vs, fs]);
-const DEBUG = false;
 const MAX_RECTS = 11;
 function getDeepestUuid(uuids) {
   if (uuids.length === 0) {
@@ -90,18 +89,14 @@ function updateHoverState(mouseX, mouseY, offset, scale, artboardSize) {
   };
   const isOutsideArtboard = mouseX < artboardRect.x || mouseX > artboardRect.x + artboardRect.width || mouseY < artboardRect.y || mouseY > artboardRect.y + artboardRect.height;
   if (isOutsideArtboard) {
-    if (DEBUG || previousHoveredUuids.length > 0 || previousEditableFieldRect !== null) {
-      hoverState.visible.fill(0);
-      isHoveringEditableField.value = false;
-      isHoveringSelectedBlock.value = false;
-      if (!DEBUG) {
-        previousHoveredUuids = [];
-        previousDeepestUuid = null;
-        previousEditableFieldRect = null;
-      }
-      return true;
-    }
-    return false;
+    const needsUpdate = previousHoveredUuids.length > 0 || previousEditableFieldRect !== null || isHoveringEditableField.value || isHoveringSelectedBlock.value;
+    hoverState.visible.fill(0);
+    isHoveringEditableField.value = false;
+    isHoveringSelectedBlock.value = false;
+    previousHoveredUuids = [];
+    previousDeepestUuid = null;
+    previousEditableFieldRect = null;
+    return needsUpdate;
   }
   const artboardMouseX = mouseX / scale - offset.x / scale;
   const artboardMouseY = mouseY / scale - offset.y / scale;
@@ -132,7 +127,7 @@ function updateHoverState(mouseX, mouseY, offset, scale, artboardSize) {
     (uuid, i) => uuid !== previousHoveredUuids[i]
   ) || deepestUuid !== previousDeepestUuid;
   let hoveredEditableFieldRect = null;
-  const editableRects = editable.getVisible();
+  const editableRects = directive.getVisible("editable");
   for (let i = 0; i < editableRects.length; i++) {
     const editableRect = editableRects[i];
     if (isInsideRect(artboardMouseX, artboardMouseY, editableRect)) {
@@ -140,7 +135,7 @@ function updateHoverState(mouseX, mouseY, offset, scale, artboardSize) {
       break;
     }
   }
-  if (!hoveredChanged && !DEBUG) {
+  if (!hoveredChanged) {
     const editableFieldChanged = hoveredEditableFieldRect === null !== (previousEditableFieldRect === null) || hoveredEditableFieldRect && previousEditableFieldRect && (hoveredEditableFieldRect.x !== previousEditableFieldRect.x || hoveredEditableFieldRect.y !== previousEditableFieldRect.y || hoveredEditableFieldRect.width !== previousEditableFieldRect.width || hoveredEditableFieldRect.height !== previousEditableFieldRect.height);
     if (!editableFieldChanged) {
       return false;
@@ -158,7 +153,7 @@ function updateHoverState(mouseX, mouseY, offset, scale, artboardSize) {
   }
   for (const [level, uuid] of nestingMap) {
     const rect = dom.getBlockRect(uuid);
-    const block = dom.findBlock(uuid);
+    const block = blocks.getBlock(uuid);
     if (!rect || !block) continue;
     const el = dom.getDragElement(block);
     if (!el) continue;
@@ -197,15 +192,11 @@ function updateHoverState(mouseX, mouseY, offset, scale, artboardSize) {
     hoverState.types[10] = 2;
     hoverState.visible[10] = 1;
   }
-  if (!DEBUG) {
-    previousHoveredUuids = unselectedHoveredUuids;
-    previousDeepestUuid = deepestUuid;
-    previousEditableFieldRect = hoveredEditableFieldRect;
-  }
+  previousHoveredUuids = unselectedHoveredUuids;
+  previousDeepestUuid = deepestUuid;
+  previousEditableFieldRect = hoveredEditableFieldRect;
   isHoveringEditableField.value = hoveredEditableFieldRect !== null;
-  isHoveringSelectedBlock.value = hoveredUuids.some(
-    (uuid) => selectedUuids.includes(uuid)
-  );
+  isHoveringSelectedBlock.value = deepestUuid !== null && selectedUuids.includes(deepestUuid);
   return true;
 }
 const uniforms = computed(() => {

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

@@ -46,16 +46,15 @@ const props = defineProps({
   uuid: { type: String, required: true },
   label: { type: String, required: false }
 });
+const { $t, element } = useBlokkli();
 const DURATION = 530;
 const emit = defineEmits(["submit", "close"]);
 function getOriginatingElement() {
-  const el = document.querySelector(
-    `[data-bk-library-item-uuid="${props.uuid}"]`
+  return element.query(
+    document.documentElement,
+    `[data-bk-library-item-uuid="${props.uuid}"]`,
+    "Get originating library item element"
   );
-  if (el instanceof HTMLElement) {
-    return el;
-  }
-  return null;
 }
 function onEnter(el, done) {
   if (el instanceof HTMLElement) {
@@ -125,7 +124,6 @@ function onAfterLeave(el) {
     emit("close");
   }
 }
-const { $t } = useBlokkli();
 const iframe = ref(null);
 const isLoaded = ref(false);
 const isLoading = ref(true);