@blokkli/editor 2.0.0-alpha.36 → 2.0.0-alpha.37

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

@@ -1,68 +1,13 @@
 <template>
-  <PluginSidebar
-    v-if="adapter.addBlockFromClipboardItem"
-    id="clipboard"
-    ref="plugin"
-    :title="$t('clipboard', 'Clipboard')"
-    :tour-text="
-  $t(
-    'clipboardTourText',
-    'Drag and drop content pasted from your clipboard into the page to create a matching block.'
-  )
-"
-    edit-only
-    icon="bk_mdi_content_paste"
-    weight="-30"
-  >
-    <div class="bk bk-clipboard bk-control">
-      <div
-        v-if="!pastedItems.length"
-        class="bk-clipboard-info bk-sidebar-padding"
-      >
-        <h4>{{ $t("clipboardEmpty", "No items in the clipboard") }}</h4>
-        <div
-          v-if="!ui.isMobile.value"
-          v-html="
-  $t(
-    'clipboardExplanation',
-    `<p>
-    Use Ctrl-V on the page to paste content. These
-    will then be displayed here.
-  </p>
-  <p>
-    Use Ctrl-F to search for existing content and paste it into
-    the clipboard.
-  </p>`
-  )
-"
-        />
-      </div>
-      <ClipboardList
-        v-if="pastedItems.length"
-        :items="pastedItems"
-        @remove="remove"
+  <Teleport :to="ui.mainLayoutElement.value">
+    <div class="bk-clipboard-drop-element-wrapper">
+      <DropElement
+        ref="dropElementRef"
+        :bundles="directDropBundles"
+        :items="dropItems"
       />
-      <div class="bk-clipboard-form bk-sidebar-padding">
-        <div class="bk-clipboard-input">
-          <input
-            type="text"
-            class="bk-form-input"
-            :placeholder="
-  $t('clipboardPastePlaceholder', 'Paste text or media here')
-"
-            @paste.stop.prevent="onManualPaste"
-            @keydown.stop
-          />
-        </div>
-        <div class="bk-clipboard-upload">
-          <input type="file" @change="onFileInput" />
-          <div class="bk-button bk-is-primary">
-            <Icon name="bk_mdi_upload" />
-          </div>
-        </div>
-      </div>
     </div>
-  </PluginSidebar>
+  </Teleport>
 </template>
 
 <script setup>
@@ -75,38 +20,200 @@ import {
   computed,
   useTemplateRef
 } from "#imports";
-import { PluginSidebar } from "#blokkli/editor/plugins";
-import ClipboardList from "./List/index.vue";
 import { falsy, getFieldKey } from "#blokkli/helpers";
 import { generateUUID } from "#blokkli/editor/helpers/uuid";
-import { Icon } from "#blokkli/editor/components";
 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";
-const { settings, logger } = defineBlokkliFeature({
+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.",
-  settings: {
-    openSidebarOnPaste: {
-      type: "checkbox",
-      default: true,
-      label: "Open sidebar when pasting",
-      description: "Automatically opens the sidebar when pasting content from the clipboard.",
-      group: "behavior"
-    }
-  },
   screenshot: "feature-clipboard.jpg"
 });
-const { selection, $t, adapter, state, ui, types, keyboard, blocks, fields } = useBlokkli();
-const plugin = useTemplateRef("plugin");
+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 [
     {
@@ -134,160 +241,125 @@ function onSelectDropdownItem(item) {
     handleSelectionPaste(selectionClipboard.value);
   }
 }
-const ALLOWED_HTML_ATTRIBUTES = ["href"];
-const _MOCK = [
-  {
-    type: "text",
-    id: generateUUID(),
-    itemBundle: "text",
-    data: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
-  },
-  {
-    type: "file",
-    id: generateUUID(),
-    itemBundle: "image",
-    data: "asdfasdf",
-    additional: "asdfasdfasdf",
-    fileName: "my-little-document.pdf",
-    fileSize: 26624,
-    fileType: "application/pdf"
-  },
-  {
-    type: "file",
-    id: generateUUID(),
-    itemBundle: "image",
-    data: "asdfasdf",
-    additional: "asdfasdfasdf",
-    fileName: "my-little-document.pdf",
-    fileSize: 36623,
-    fileType: "application/pdf"
-  },
-  {
-    type: "video",
-    id: generateUUID(),
-    itemBundle: "video",
-    data: "https://vimeo.com/53520224",
-    videoService: "vimeo",
-    videoId: "53520224"
-  },
-  {
-    type: "video",
-    id: generateUUID(),
-    itemBundle: "video",
-    data: "https://www.youtube.com/watch?v=zsvYVVRAk0c",
-    videoService: "youtube",
-    videoId: "zsvYVVRAk0c"
-  }
-];
-const pastedItems = ref([]);
-const onFileInput = (e) => {
-  e.preventDefault();
-  if (e.target instanceof HTMLInputElement) {
-    const files = e.target.files;
-    if (files) {
-      handleFiles(files);
-    }
-  }
-};
-function removeAllAttrs(element) {
-  for (let i = element.attributes.length; i-- > 0; ) {
-    const attribute = element.attributes[i];
-    if (!ALLOWED_HTML_ATTRIBUTES.includes(attribute.name)) {
-      element.removeAttributeNode(attribute);
-    }
-  }
+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);
+  });
 }
-function removeAttributes(el) {
-  if (el.tagName === "IMG" || el.tagName === "BR") {
-    el.remove();
+async function handleFiles(data) {
+  if (!FileReader || !adapter.clipboardMapBundle) {
     return;
   }
-  const children = el.children;
-  for (let i = 0; i < children.length; i++) {
-    const child = children[i];
-    removeAllAttrs(child);
-    if (child.children.length) {
-      removeAttributes(child);
-    }
-  }
-}
-const onManualPaste = (e) => {
-  onPaste(e, true);
-};
-function handleFiles(data) {
-  if (!FileReader) {
+  const files = data instanceof DataTransfer ? [...data.files] : [...data];
+  if (!files.length) {
     return;
   }
-  const files = data instanceof DataTransfer ? [...data.files] : [...data];
-  files.forEach((file) => {
-    const fr = new FileReader();
-    fr.onload = function() {
-      if (!adapter.clipboardMapBundle) {
-        return;
-      }
-      if (typeof fr.result !== "string") {
-        return;
-      }
-      const type = file.type.startsWith("image/") ? "image" : "file";
-      const itemBundle = adapter.clipboardMapBundle({
+  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 (!itemBundle) {
-        return;
-      }
-      pastedItems.value.push({
-        type,
-        itemBundle,
-        id: generateUUID(),
-        data: fr.result,
-        additional: file.name,
-        fileSize: file.size,
-        fileType: file.type,
-        fileName: file.name
-      });
-      showClipboardSidebar();
-    };
-    fr.readAsDataURL(file);
-  });
-}
-function onDrop(e) {
-  e.preventDefault();
-  if (e.dataTransfer?.files.length) {
-    handleFiles(e.dataTransfer);
+      })
+    );
+    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 onDragOver(e) {
-  e.preventDefault();
-}
-const showClipboardSidebar = () => {
-  if (settings.value.openSidebarOnPaste) {
-    plugin?.value?.showSidebar();
+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 (selection.uuids.value.length !== 1) {
-    emitPasteError(
-      $t(
-        "clipboardPasteErrorOneField",
-        "Pasting is only possible into one field at a time."
-      )
-    );
+  if (!pastedUuids.length) {
     return;
   }
-  if (!pastedUuids.length) {
+  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;
@@ -295,11 +367,10 @@ const handleSelectionPaste = (pastedUuids) => {
   let targetFieldKey = null;
   let preceedingUuid = null;
   if (!keyboard.isPressingShift.value) {
-    const pastedBundles = pastedUuids.map((uuid) => blocks.getBlock(uuid)?.bundle).filter((bundle) => !!bundle);
-    const pastedFragments = pastedUuids.map((uuid) => {
-      const block2 = blocks.getBlock(uuid);
-      if (block2?.bundle === fragmentBlockBundle && block2.fragment?.name) {
-        return block2.fragment.name;
+    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);
@@ -342,83 +413,40 @@ const handleSelectionPaste = (pastedUuids) => {
   }
   if (!targetField || !targetFieldElement || !targetFieldKey) {
     const field = state.getMutatedField(block.host.uuid, block.host.fieldName);
-    if (!field) {
-      return;
-    }
-    const fieldElement = fields.find(field.entityUuid, field.name);
-    if (!fieldElement) {
-      return;
-    }
-    targetField = {
-      entityType: field.entityType,
-      entityUuid: field.entityUuid,
-      name: field.name
-    };
-    targetFieldElement = fieldElement;
-    targetFieldKey = getFieldKey(field.entityUuid, field.name);
-    preceedingUuid = selection.uuids.value[0] ?? null;
-  }
-  const pastedBlocks = [];
-  const notAllowedBundles = [];
-  const notAllowedFragments = [];
-  for (let i = 0; i < pastedUuids.length; i++) {
-    const uuid = pastedUuids[i];
-    if (!uuid) {
-      continue;
-    }
-    const block2 = blocks.getBlock(uuid);
-    if (!block2) {
-      continue;
-    }
-    const isAllowed = targetFieldElement.allowedBundles.includes(block2.bundle);
-    if (!isAllowed) {
-      notAllowedBundles.push(block2.bundle);
-      continue;
-    }
-    if (block2.bundle === fragmentBlockBundle && block2.fragment?.name && targetFieldElement.allowedFragments.length > 0) {
-      const fragmentAllowed = targetFieldElement.allowedFragments.includes(
-        block2.fragment.name
-      );
-      if (!fragmentAllowed) {
-        notAllowedFragments.push(block2.fragment.name);
-        continue;
+    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;
       }
     }
-    pastedBlocks.push(block2);
   }
-  if (!pastedBlocks.length) {
-    if (notAllowedFragments.length) {
-      const message2 = notAllowedFragments.length === 1 ? $t(
-        "clipboardPasteErrorAllowedFragmentsSingle",
-        'Fragment "@types" is not allowed here.'
-      ) : $t(
-        "clipboardPasteErrorAllowedFragmentsMultiple",
-        "Fragments (@types) are not allowed here."
-      );
-      emitPasteError(message2.replace("@types", notAllowedFragments.join(", ")));
-      return;
+  if (!targetField || !targetFieldElement || !targetFieldKey) {
+    startCopyDrag(existingBlocks);
+    return;
+  }
+  const pastedBlocks = existingBlocks.filter((b) => {
+    if (!targetFieldElement.allowedBundles.includes(b.bundle)) {
+      return false;
     }
-    const blockTypes = notAllowedBundles.map((bundle) => {
-      return types.getBlockBundleDefinition(bundle)?.label ?? bundle;
-    });
-    const message = blockTypes.length === 1 ? $t(
-      "clipboardPasteErrorAllowedBundlesSingle",
-      'Block type "@types" is not allowed here.'
-    ) : $t(
-      "clipboardPasteErrorAllowedBundlesMultiple",
-      "Block types (@types) are not allowed here."
-    );
-    emitPasteError(message.replace("@types", blockTypes.join(", ")));
+    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) {
-    emitPasteError(
-      $t(
-        "clipboardPasteErrorCardinality",
-        "This field only allows up to @count blocks."
-      ).replace("@count", targetFieldElement.cardinality.toString())
-    );
+    startCopyDrag(existingBlocks);
     return;
   }
   state.mutateWithLoadingState(
@@ -433,23 +461,26 @@ const handleSelectionPaste = (pastedUuids) => {
     })
   );
 };
-function onPaste(e, fromInput) {
+function onPaste(e) {
   logger.log("Paste Event", e);
   if (state.editMode.value !== "editing") {
     return;
   }
-  if (!fromInput && (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)) {
+  if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
     return;
   }
   e.stopPropagation();
   e.preventDefault();
-  if (state.isLoading.value) {
+  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("{")) {
@@ -464,9 +495,6 @@ function onPaste(e, fromInput) {
     }
     handlePastedText(pastedData);
   }
-  if (clipboardData.files.length) {
-    return handleFiles(clipboardData);
-  }
 }
 const handlePastedText = (text) => {
   if (!adapter.clipboardMapBundle) {
@@ -474,50 +502,279 @@ const handlePastedText = (text) => {
   }
   const video = getVideoId(text);
   if (video.id && video.service) {
-    const itemBundle = adapter.clipboardMapBundle({
-      type: "video",
-      videoService: video.service,
-      videoId: video.id
-    });
-    if (!itemBundle) {
+    const itemBundles = normalizeBundles(
+      adapter.clipboardMapBundle({
+        type: "video",
+        videoService: video.service,
+        videoId: video.id
+      })
+    );
+    if (!itemBundles) {
       return;
     }
-    pastedItems.value.push({
-      type: "video",
-      id: generateUUID(),
-      itemBundle,
-      data: text,
-      videoService: video.service,
-      videoId: video.id
-    });
-    showClipboardSidebar();
+    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, "");
-  removeAttributes(div);
+  sanitizeHtml(div);
   if (div.textContent) {
-    const itemBundle = adapter.clipboardMapBundle({
-      type: "plaintext",
-      text: div.innerHTML
-    });
-    if (!itemBundle) {
+    const itemBundles = normalizeBundles(
+      adapter.clipboardMapBundle({
+        type: "plaintext",
+        text: div.innerHTML
+      })
+    );
+    if (!itemBundles) {
       return;
     }
-    showClipboardSidebar();
-    pastedItems.value.push({
-      type: "text",
-      id: generateUUID(),
-      itemBundle,
-      data: div.innerHTML
-    });
+    startClipboardDrag(
+      {
+        type: "text",
+        id: generateUUID(),
+        itemBundle: itemBundles[0],
+        data: div.innerHTML
+      },
+      itemBundles
+    );
   }
 };
-function remove(index) {
-  pastedItems.value = pastedItems.value.filter((_v, i) => {
-    return i !== index;
-  });
+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 });
@@ -574,32 +831,23 @@ defineItemDropdownAction(() => {
     }));
   }
 });
-onBlokkliEvent("drop:clipboardItem", async (data) => {
-  const item = pastedItems.value.find((v) => v.id === data.id);
-  if (!item) {
-    return;
-  }
-  if (adapter.addBlockFromClipboardItem) {
-    await state.mutateWithLoadingState(
-      () => adapter.addBlockFromClipboardItem({
-        afterUuid: data.afterUuid,
-        item,
-        blockBundle: data.blockBundle,
-        host: data.host
-      })
-    );
-    pastedItems.value = pastedItems.value.filter((v) => v.id !== item.id);
-  }
-});
 onMounted(() => {
   document.addEventListener("paste", onPaste);
-  document.body.addEventListener("drop", onDrop);
+  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.body.removeEventListener("drop", onDrop);
+  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>