@blokkli/editor 2.0.0-alpha.4 → 2.0.0-alpha.40

package/dist/runtime/editor/features/clipboard/index.vue

@@ -0,0 +1,858 @@
+<template>
+  <Teleport :to="ui.mainLayoutElement.value">
+    <div class="bk-clipboard-drop-element-wrapper">
+      <DropElement
+        ref="dropElementRef"
+        :bundles="directDropBundles"
+        :items="dropItems"
+      />
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import {
+  defineBlokkliFeature,
+  ref,
+  useBlokkli,
+  onMounted,
+  onUnmounted,
+  computed,
+  useTemplateRef
+} from "#imports";
+import { falsy, getFieldKey } from "#blokkli/helpers";
+import { generateUUID } from "#blokkli/editor/helpers/uuid";
+import getVideoId from "get-video-id";
+import DropElement, {} from "./DropElement/index.vue";
+import { emitMessage } from "#blokkli/editor/events";
+import { fragmentBlockBundle, itemEntityType } from "#blokkli-build/config";
+import {
+  defineDropHandler,
+  defineItemDropdownAction,
+  defineShortcut,
+  onBlokkliEvent
+} from "#blokkli/editor/composables";
+import { buildMapBundleEvent, sanitizeHtml } from "./helpers";
+const { logger } = defineBlokkliFeature({
+  id: "clipboard",
+  label: "Clipboard",
+  icon: "bk_mdi_content_paste",
+  description: "Provides clipboard integration to copy/paste existing blocks or paste supported clipboard content like text or images.",
+  screenshot: "feature-clipboard.jpg"
+});
+const {
+  selection,
+  $t,
+  adapter,
+  state,
+  ui,
+  types,
+  keyboard,
+  blocks,
+  fields,
+  eventBus,
+  animation
+} = useBlokkli();
+const selectionClipboard = ref([]);
+const isDirectDrop = ref(false);
+const directDropBundles = ref([]);
+const dropItems = ref([]);
+const dropElementRef = useTemplateRef("dropElementRef");
+let dragCounter = 0;
+let nativeDropItem = null;
+function positionDropElement(x, y) {
+  const el = dropElementRef.value?.$el;
+  const wrapper = el?.parentElement;
+  if (wrapper && el) {
+    const w = el.offsetWidth;
+    const h = el.offsetHeight;
+    wrapper.style.left = x - w / 2 + "px";
+    wrapper.style.top = y - h / 2 + "px";
+  }
+}
+function normalizeBundles(result) {
+  if (!result) return null;
+  return Array.isArray(result) ? result : [result];
+}
+function startClipboardDrag(item, bundles, allItems) {
+  if (!adapter.clipboardMapBundle || !adapter.addBlockFromClipboardItem || state.editMode.value !== "editing" || !dropElementRef.value) {
+    return;
+  }
+  const itemBundles = bundles || [item.itemBundle];
+  if (!itemBundles.length) {
+    return;
+  }
+  const items = allItems || [item];
+  directDropBundles.value = itemBundles;
+  dropItems.value = items.map((v) => ({
+    type: v.type,
+    data: v.data,
+    fileName: "fileName" in v ? v.fileName : void 0,
+    fileSize: "fileSize" in v ? v.fileSize : void 0,
+    videoId: "videoId" in v ? v.videoId : void 0,
+    videoService: "videoService" in v ? v.videoService : void 0
+  }));
+  const coords = animation.getMouseCoords();
+  positionDropElement(coords.x, coords.y);
+  const el = dropElementRef.value.$el;
+  nativeDropItem = {
+    itemType: "native_drop",
+    itemBundles,
+    dataTransfer: null,
+    clipboardItems: allItems || [item],
+    element: () => el
+  };
+  isDirectDrop.value = true;
+  eventBus.emit("dragging:start", {
+    items: [nativeDropItem],
+    coords,
+    mode: "mouse"
+  });
+}
+function tryStartDirectDrop(e) {
+  if (!adapter.clipboardMapBundle || !adapter.addBlockFromClipboardItem || state.editMode.value !== "editing" || !dropElementRef.value) {
+    return false;
+  }
+  const mapEvent = buildMapBundleEvent(e);
+  if (!mapEvent) {
+    return false;
+  }
+  const bundles = normalizeBundles(adapter.clipboardMapBundle(mapEvent));
+  if (!bundles) {
+    return false;
+  }
+  const itemType = mapEvent.type === "plaintext" ? "text" : mapEvent.type;
+  const fileCount = mapEvent.fileCount || 1;
+  directDropBundles.value = bundles;
+  dropItems.value = Array.from({ length: fileCount }, () => ({
+    type: itemType,
+    fileName: mapEvent.fileName
+  }));
+  positionDropElement(e.clientX, e.clientY);
+  const el = dropElementRef.value.$el;
+  nativeDropItem = {
+    itemType: "native_drop",
+    itemBundles: bundles,
+    dataTransfer: null,
+    element: () => el
+  };
+  isDirectDrop.value = true;
+  eventBus.emit("dragging:start", {
+    items: [nativeDropItem],
+    coords: { x: e.clientX, y: e.clientY },
+    mode: "mouse"
+  });
+  return true;
+}
+function resetDrag() {
+  dragCounter = 0;
+  isDragFromInput = false;
+  if (isDirectDrop.value) {
+    eventBus.emit("dragging:end");
+    isDirectDrop.value = false;
+    nativeDropItem = null;
+    directDropBundles.value = [];
+    dropItems.value = [];
+  }
+}
+let isDragFromInput = false;
+function onDragStart(e) {
+  const target = e.target;
+  if (target instanceof HTMLTextAreaElement || target instanceof HTMLInputElement || target instanceof HTMLElement && target.isContentEditable) {
+    isDragFromInput = true;
+  }
+}
+function onDragEnter(e) {
+  if (isDragFromInput) {
+    return;
+  }
+  dragCounter++;
+  if (dragCounter === 1) {
+    tryStartDirectDrop(e);
+  }
+}
+function onDragLeave() {
+  if (isDragFromInput) {
+    return;
+  }
+  dragCounter--;
+  if (dragCounter <= 0) {
+    resetDrag();
+  }
+}
+function onDragOver(e) {
+  e.preventDefault();
+  if (isDirectDrop.value) {
+    eventBus.emit("dragging:move", { x: e.clientX, y: e.clientY });
+  }
+}
+function onNativeDrop(e) {
+  e.preventDefault();
+  if (isDragFromInput) {
+    isDragFromInput = false;
+    return;
+  }
+  if (isDirectDrop.value && nativeDropItem && e.dataTransfer) {
+    nativeDropItem.dataTransfer = e.dataTransfer;
+    eventBus.emit("mouse:up", {
+      type: "mouse",
+      x: e.clientX,
+      y: e.clientY,
+      distance: 100,
+      duration: 1e3
+    });
+    eventBus.emit("dragging:end");
+    dragCounter = 0;
+    isDirectDrop.value = false;
+    nativeDropItem = null;
+    directDropBundles.value = [];
+    dropItems.value = [];
+    return;
+  }
+  resetDrag();
+  if (e.dataTransfer) {
+    onDropFallback(e.dataTransfer);
+  }
+}
+const itemDropdownItems = computed(() => {
+  return [
+    {
+      id: "copy",
+      label: $t("copy", "Copy"),
+      icon: "bk_mdi_content_copy",
+      description: $t("clipboardCopyShortcutHelp", "Copy selected blocks")
+    },
+    {
+      id: "paste",
+      label: $t("paste", "Paste"),
+      enabled: !!selectionClipboard.value.length,
+      icon: "bk_mdi_content_paste",
+      description: $t(
+        "clipboardPasteDescription",
+        "Paste blocks from clipboard"
+      )
+    }
+  ];
+});
+function onSelectDropdownItem(item) {
+  if (item.id === "copy") {
+    copyCurrentSelectionToClipboard();
+  } else if (item.id === "paste" && selectionClipboard.value.length) {
+    handleSelectionPaste(selectionClipboard.value);
+  }
+}
+function readFileAsDataURL(file) {
+  return new Promise((resolve, reject) => {
+    const fr = new FileReader();
+    fr.onload = () => {
+      if (typeof fr.result === "string") {
+        resolve(fr.result);
+      } else {
+        reject(new Error("FileReader result is not a string"));
+      }
+    };
+    fr.onerror = () => reject(fr.error);
+    fr.readAsDataURL(file);
+  });
+}
+async function handleFiles(data) {
+  if (!FileReader || !adapter.clipboardMapBundle) {
+    return;
+  }
+  const files = data instanceof DataTransfer ? [...data.files] : [...data];
+  if (!files.length) {
+    return;
+  }
+  let commonBundles = null;
+  for (const file of files) {
+    const type = file.type.startsWith("image/") ? "image" : "file";
+    const fileBundles = normalizeBundles(
+      adapter.clipboardMapBundle({
+        type,
+        fileType: file.type,
+        fileSize: file.size
+      })
+    );
+    if (!fileBundles) {
+      emitPasteError(
+        $t("clipboardUnsupportedFileType", "This file type is not supported.")
+      );
+      return;
+    }
+    if (commonBundles === null) {
+      commonBundles = fileBundles;
+    } else {
+      commonBundles = commonBundles.filter((b) => fileBundles.includes(b));
+    }
+  }
+  if (!commonBundles || !commonBundles.length) {
+    emitPasteError(
+      $t("clipboardNoCommonBundle", "No common block type for these files.")
+    );
+    return;
+  }
+  let results;
+  try {
+    results = await Promise.all(files.map(readFileAsDataURL));
+  } catch {
+    return;
+  }
+  const items = [];
+  for (let i = 0; i < files.length; i++) {
+    const file = files[i];
+    const result = results[i];
+    const type = file.type.startsWith("image/") ? "image" : "file";
+    items.push({
+      type,
+      itemBundle: commonBundles[0],
+      id: generateUUID(),
+      data: result,
+      additional: file.name,
+      fileSize: file.size,
+      fileType: file.type,
+      fileName: file.name
+    });
+  }
+  startClipboardDrag(items[0], commonBundles, items);
+}
+function onDropFallback(data) {
+  if (data.files.length) {
+    handleFiles(data);
+  } else {
+    const text = data.getData("text/html") || data.getData("text/plain") || data.getData("text");
+    if (text) {
+      handlePastedText(text);
+    }
+  }
+}
+function emitPasteError(message) {
+  const prefix = $t("clipboardPasteError", "Failed to paste:");
+  emitMessage(`${prefix} ${message}`, "error");
+}
+function startCopyDrag(existingBlocks) {
+  const items = existingBlocks.map((block) => ({
+    itemType: "existing",
+    block,
+    isCopy: true
+  }));
+  const coords = animation.getMouseCoords();
+  eventBus.emit("dragging:start", {
+    items,
+    coords,
+    mode: "mouse"
+  });
+}
+const handleSelectionPaste = (pastedUuids) => {
+  if (!adapter.pasteExistingBlocks) {
+    return;
+  }
+  if (!pastedUuids.length) {
+    return;
+  }
+  const existingBlocks = pastedUuids.map((uuid) => blocks.getBlock(uuid)).filter((block2) => !!block2);
+  if (!existingBlocks.length) {
+    return;
+  }
+  if (selection.uuids.value.length !== 1) {
+    startCopyDrag(existingBlocks);
+    return;
+  }
+  const block = selection.items.value[0];
+  if (!block) {
+    startCopyDrag(existingBlocks);
+    return;
+  }
+  let targetField = null;
+  let targetFieldElement = null;
+  let targetFieldKey = null;
+  let preceedingUuid = null;
+  if (!keyboard.isPressingShift.value) {
+    const pastedBundles = existingBlocks.map((b) => b.bundle).filter((bundle) => !!bundle);
+    const pastedFragments = existingBlocks.map((b) => {
+      if (b.bundle === fragmentBlockBundle && b.fragment?.name) {
+        return b.fragment.name;
+      }
+      return null;
+    }).filter(falsy);
+    if (pastedBundles.length) {
+      const nestedFields = types.fieldConfig.forEntityTypeAndBundle(
+        itemEntityType,
+        block.bundle
+      );
+      for (const fieldConfig of nestedFields) {
+        const fieldElement = fields.find(block.uuid, fieldConfig.name);
+        if (!fieldElement) {
+          continue;
+        }
+        const allowedPastedBundles = pastedBundles.filter(
+          (bundle) => fieldElement.allowedBundles.includes(bundle)
+        );
+        let fragmentsAllowed = true;
+        if (pastedFragments.length > 0 && fieldElement.allowedFragments.length > 0) {
+          fragmentsAllowed = pastedFragments.every(
+            (fragment) => fieldElement.allowedFragments.includes(fragment)
+          );
+        }
+        if (allowedPastedBundles.length > 0 && fragmentsAllowed) {
+          const nestedFieldKey = getFieldKey(block.uuid, fieldConfig.name);
+          const currentCount = state.getFieldBlockCount(nestedFieldKey);
+          if (fieldElement.cardinality === -1 || currentCount + allowedPastedBundles.length <= fieldElement.cardinality) {
+            targetField = {
+              entityType: itemEntityType,
+              entityUuid: block.uuid,
+              name: fieldConfig.name
+            };
+            targetFieldElement = fieldElement;
+            targetFieldKey = nestedFieldKey;
+            preceedingUuid = null;
+            break;
+          }
+        }
+      }
+    }
+  }
+  if (!targetField || !targetFieldElement || !targetFieldKey) {
+    const field = state.getMutatedField(block.host.uuid, block.host.fieldName);
+    if (field) {
+      const fieldElement = fields.find(field.entityUuid, field.name);
+      if (fieldElement) {
+        targetField = {
+          entityType: field.entityType,
+          entityUuid: field.entityUuid,
+          name: field.name
+        };
+        targetFieldElement = fieldElement;
+        targetFieldKey = getFieldKey(field.entityUuid, field.name);
+        preceedingUuid = selection.uuids.value[0] ?? null;
+      }
+    }
+  }
+  if (!targetField || !targetFieldElement || !targetFieldKey) {
+    startCopyDrag(existingBlocks);
+    return;
+  }
+  const pastedBlocks = existingBlocks.filter((b) => {
+    if (!targetFieldElement.allowedBundles.includes(b.bundle)) {
+      return false;
+    }
+    if (b.bundle === fragmentBlockBundle && b.fragment?.name && targetFieldElement.allowedFragments.length > 0) {
+      return targetFieldElement.allowedFragments.includes(b.fragment.name);
+    }
+    return true;
+  });
+  if (!pastedBlocks.length) {
+    startCopyDrag(existingBlocks);
+    return;
+  }
+  const count = state.getFieldBlockCount(targetFieldKey);
+  if (targetFieldElement.cardinality !== -1 && count + pastedBlocks.length > targetFieldElement.cardinality) {
+    startCopyDrag(existingBlocks);
+    return;
+  }
+  state.mutateWithLoadingState(
+    () => adapter.pasteExistingBlocks({
+      uuids: pastedBlocks.map((v) => v.uuid),
+      host: {
+        type: targetField.entityType,
+        uuid: targetField.entityUuid,
+        fieldName: targetField.name
+      },
+      preceedingUuid
+    })
+  );
+};
+function onPaste(e) {
+  logger.log("Paste Event", e);
+  if (state.editMode.value !== "editing") {
+    return;
+  }
+  if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+    return;
+  }
+  e.stopPropagation();
+  e.preventDefault();
+  if (state.isLoading.value || selection.isDragging.value) {
+    return;
+  }
+  const clipboardData = e.clipboardData;
+  if (!clipboardData) {
+    return;
+  }
+  if (clipboardData.files.length) {
+    return handleFiles(clipboardData);
+  }
+  const pastedData = clipboardData.getData("text/html") || clipboardData.getData("text/plain") || clipboardData.getData("text");
+  if (pastedData) {
+    if (pastedData.startsWith("{")) {
+      try {
+        const data = JSON.parse(pastedData);
+        if (typeof data === "object" && data.type && data.type === "selection") {
+          const uuids = data.uuids;
+          return handleSelectionPaste(uuids);
+        }
+      } catch (_e) {
+      }
+    }
+    handlePastedText(pastedData);
+  }
+}
+const handlePastedText = (text) => {
+  if (!adapter.clipboardMapBundle) {
+    return;
+  }
+  const video = getVideoId(text);
+  if (video.id && video.service) {
+    const itemBundles = normalizeBundles(
+      adapter.clipboardMapBundle({
+        type: "video",
+        videoService: video.service,
+        videoId: video.id
+      })
+    );
+    if (!itemBundles) {
+      return;
+    }
+    startClipboardDrag(
+      {
+        type: "video",
+        id: generateUUID(),
+        itemBundle: itemBundles[0],
+        data: text,
+        videoService: video.service,
+        videoId: video.id
+      },
+      itemBundles
+    );
+    return;
+  }
+  const div = document.createElement("div");
+  div.innerHTML = text.replace(/&nbsp;|<br>/g, "");
+  sanitizeHtml(div);
+  if (div.textContent) {
+    const itemBundles = normalizeBundles(
+      adapter.clipboardMapBundle({
+        type: "plaintext",
+        text: div.innerHTML
+      })
+    );
+    if (!itemBundles) {
+      return;
+    }
+    startClipboardDrag(
+      {
+        type: "text",
+        id: generateUUID(),
+        itemBundle: itemBundles[0],
+        data: div.innerHTML
+      },
+      itemBundles
+    );
+  }
+};
+function extractBareUrl(text) {
+  const trimmed = text.trim();
+  try {
+    const url = new URL(trimmed);
+    if (url.protocol === "http:" || url.protocol === "https:") {
+      return trimmed;
+    }
+  } catch {
+  }
+  return null;
+}
+defineDropHandler("native_drop", {
+  resolveBundles({ items, field }) {
+    const item = items[0];
+    if (!adapter.addBlockFromClipboardItem) {
+      return [];
+    }
+    if (item.clipboardItems?.length) {
+      return field.allowedBundles.filter((b) => item.itemBundles.includes(b));
+    }
+    if (!item.dataTransfer) {
+      return field.allowedBundles.filter((b) => item.itemBundles.includes(b));
+    }
+    const dt = item.dataTransfer;
+    if (dt.files.length > 0) {
+      if (!adapter.clipboardMapBundle) {
+        return field.allowedBundles.filter((b) => item.itemBundles.includes(b));
+      }
+      const files = [...dt.files];
+      let possibleBundles = null;
+      for (const file of files) {
+        const type = file.type.startsWith("image/") ? "image" : "file";
+        const mapped = normalizeBundles(
+          adapter.clipboardMapBundle({
+            type,
+            fileType: file.type,
+            fileSize: file.size
+          })
+        );
+        if (!mapped) {
+          return [];
+        }
+        if (possibleBundles === null) {
+          possibleBundles = mapped;
+        } else {
+          possibleBundles = possibleBundles.filter((b) => mapped.includes(b));
+        }
+      }
+      return (possibleBundles || []).filter(
+        (b) => field.allowedBundles.includes(b)
+      );
+    }
+    const text = dt.getData("text/html") || dt.getData("text/plain") || dt.getData("text");
+    if (!text) {
+      return [];
+    }
+    if (adapter.clipboardMapBundle) {
+      const video = getVideoId(text);
+      if (video.id && video.service) {
+        const mapped2 = normalizeBundles(
+          adapter.clipboardMapBundle({
+            type: "video",
+            videoService: video.service,
+            videoId: video.id
+          })
+        );
+        if (mapped2?.length) {
+          item.clipboardItems = [
+            {
+              type: "video",
+              id: generateUUID(),
+              itemBundle: mapped2[0],
+              data: text,
+              videoService: video.service,
+              videoId: video.id
+            }
+          ];
+          return mapped2.filter((b) => field.allowedBundles.includes(b));
+        }
+      }
+      const bareUrl = extractBareUrl(text);
+      if (bareUrl) {
+        const mapped2 = normalizeBundles(
+          adapter.clipboardMapBundle({ type: "link", url: bareUrl })
+        );
+        if (mapped2?.length) {
+          item.clipboardItems = [
+            {
+              type: "text",
+              id: generateUUID(),
+              itemBundle: mapped2[0],
+              data: bareUrl
+            }
+          ];
+          return mapped2.filter((b) => field.allowedBundles.includes(b));
+        }
+      }
+      const mapped = normalizeBundles(
+        adapter.clipboardMapBundle({ type: "plaintext", text })
+      );
+      if (mapped?.length) {
+        item.clipboardItems = [
+          {
+            type: "text",
+            id: generateUUID(),
+            itemBundle: mapped[0],
+            data: text
+          }
+        ];
+        return mapped.filter((b) => field.allowedBundles.includes(b));
+      }
+    }
+    item.clipboardItems = [
+      {
+        type: "text",
+        id: generateUUID(),
+        itemBundle: item.itemBundles[0],
+        data: text
+      }
+    ];
+    return field.allowedBundles.filter((b) => item.itemBundles.includes(b));
+  },
+  async execute({ items, host, afterUuid, bundle }) {
+    if (!adapter.addBlockFromClipboardItem) {
+      return;
+    }
+    const item = items[0];
+    if (item.clipboardItems?.length) {
+      await state.mutateWithLoadingState(async () => {
+        let lastResult;
+        for (const clipItem of item.clipboardItems) {
+          lastResult = await adapter.addBlockFromClipboardItem({
+            item: clipItem,
+            blockBundle: bundle,
+            host,
+            afterUuid
+          });
+        }
+        return lastResult;
+      });
+      return;
+    }
+    if (!item.dataTransfer) {
+      return;
+    }
+    const dt = item.dataTransfer;
+    if (dt.files.length > 0) {
+      const files = [...dt.files];
+      if (adapter.clipboardMapBundle) {
+        for (const file of files) {
+          const type = file.type.startsWith("image/") ? "image" : "file";
+          const mapped = adapter.clipboardMapBundle({
+            type,
+            fileType: file.type,
+            fileSize: file.size
+          });
+          if (!mapped) {
+            emitMessage("This file type or size is not supported.", "error");
+            return;
+          }
+        }
+      }
+      let results;
+      try {
+        results = await Promise.all(files.map(readFileAsDataURL));
+      } catch {
+        return;
+      }
+      const clipboardItems = files.map((file, i) => {
+        const type = file.type.startsWith("image/") ? "image" : "file";
+        return {
+          type,
+          id: generateUUID(),
+          itemBundle: bundle,
+          data: results[i],
+          additional: file.name,
+          fileName: file.name,
+          fileSize: file.size,
+          fileType: file.type
+        };
+      });
+      await state.mutateWithLoadingState(async () => {
+        let lastResult;
+        for (const clipItem of clipboardItems) {
+          lastResult = await adapter.addBlockFromClipboardItem({
+            item: clipItem,
+            blockBundle: bundle,
+            host,
+            afterUuid
+          });
+        }
+        return lastResult;
+      });
+    } else {
+      const text = dt.getData("text/html") || dt.getData("text/plain") || dt.getData("text");
+      if (!text) {
+        return;
+      }
+      const clipboardItem = {
+        type: "text",
+        id: generateUUID(),
+        itemBundle: bundle,
+        data: text
+      };
+      await state.mutateWithLoadingState(
+        () => adapter.addBlockFromClipboardItem({
+          item: clipboardItem,
+          blockBundle: bundle,
+          host,
+          afterUuid
+        })
+      );
+    }
+  }
+});
+defineDropHandler("clipboard", {
+  async execute({ items, host, afterUuid }) {
+    const item = items[0];
+    eventBus.emit("drop:clipboardItem", {
+      id: item.clipboardId,
+      host,
+      blockBundle: item.itemBundle,
+      afterUuid
+    });
+  }
+});
+function setClipboard(text) {
+  const type = "text/plain";
+  const blob = new Blob([text], { type });
+  const data = [new ClipboardItem({ [type]: blob })];
+  try {
+    navigator.clipboard.write(data);
+  } catch (_e) {
+  }
+}
+function copyCurrentSelectionToClipboard() {
+  if (!selection.items.value.length) {
+    selectionClipboard.value = [];
+    return;
+  }
+  setClipboard(
+    JSON.stringify({ type: "selection", uuids: selection.uuids.value })
+  );
+  selectionClipboard.value = selection.uuids.value;
+}
+onBlokkliEvent("keyPressed", (e) => {
+  if (e.code !== "c" || !e.meta || ui.hasDialogOpen.value || ui.hasNestedEditorOpen.value || !ui.canvasFocused.value) {
+    return;
+  }
+  copyCurrentSelectionToClipboard();
+});
+defineShortcut([
+  {
+    code: "C",
+    label: $t("clipboardCopyShortcutHelp", "Copy selected blocks"),
+    meta: true
+  },
+  {
+    code: "V",
+    label: $t(
+      "clipboardPasteShortcutHelp",
+      "Paste text, image or copied blocks"
+    ),
+    meta: true
+  }
+]);
+defineItemDropdownAction(() => {
+  if (selection.items.value.length && state.editMode.value === "editing") {
+    return itemDropdownItems.value.map((item) => ({
+      id: "clipboard-" + item.id,
+      label: item.label,
+      icon: item.icon,
+      description: item.description,
+      enabled: item.enabled,
+      group: "clipboard",
+      weight: 100,
+      callback: () => {
+        onSelectDropdownItem(item);
+      }
+    }));
+  }
+});
+onMounted(() => {
+  document.addEventListener("paste", onPaste);
+  document.addEventListener("dragstart", onDragStart);
+  document.addEventListener("dragenter", onDragEnter);
+  document.addEventListener("dragleave", onDragLeave);
+  document.addEventListener("dragend", resetDrag);
+  document.addEventListener("dragover", onDragOver);
+  document.addEventListener("drop", onNativeDrop);
+});
+onUnmounted(() => {
+  document.removeEventListener("paste", onPaste);
+  document.removeEventListener("dragstart", onDragStart);
+  document.removeEventListener("dragenter", onDragEnter);
+  document.removeEventListener("dragleave", onDragLeave);
+  document.removeEventListener("dragend", resetDrag);
+  document.removeEventListener("dragover", onDragOver);
+  document.removeEventListener("drop", onNativeDrop);
+});
+</script>
+
+<script>
+export default {
+  name: "Clipboard"
+};
+</script>