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

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

@@ -0,0 +1,97 @@
+<template>
+  <div class="bk bk-clipboard-drop-element">
+    <div class="bk-clipboard-drop-element-header">
+      <div v-if="bundles.length === 1" class="bk-blokkli-item-label-icon">
+        <ItemIconBox :bundle="bundles[0]" :icon is-small />
+      </div>
+      <span>{{ label }}</span>
+    </div>
+    <div v-if="items.length" class="bk-clipboard-drop-element-preview">
+      <div
+        v-for="(item, i) in items"
+        :key="i"
+        class="bk-clipboard-drop-element-item"
+      >
+        <div
+          v-if="item.type === 'text' && item.data"
+          class="bk-clipboard-drop-element-text"
+          v-html="item.data"
+        />
+        <template v-else-if="item.type === 'video' && item.videoId">
+          <ClipboardItemVideo
+            :data="item.data || ''"
+            :video-service="item.videoService"
+            :video-id="item.videoId"
+          />
+        </template>
+        <template v-else>
+          <img v-if="item.type === 'image' && item.data" :src="item.data" />
+          <div v-else class="bk-clipboard-drop-element-file-icon">
+            <Icon :name="getItemIcon(item.type)" />
+          </div>
+          <p v-if="item.fileName" class="bk-clipboard-drop-element-item-label">
+            {{ item.fileName }}
+          </p>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useBlokkli, computed } from "#imports";
+import { Icon, ItemIconBox } from "#blokkli/editor/components";
+import ClipboardItemVideo from "./Video.vue";
+const props = defineProps({
+  bundles: { type: Array, required: true },
+  items: { type: Array, required: true }
+});
+const { types, $t } = useBlokkli();
+const itemType = computed(() => {
+  return props.items[0]?.type || "file";
+});
+function getItemIcon(type) {
+  switch (type) {
+    case "image":
+      return "bk_mdi_image";
+    case "video":
+      return "bk_mdi_video_camera_back";
+    case "file":
+      return "bk_mdi_attach_file";
+    case "text":
+      return "bk_mdi_title";
+    default:
+      return "bk_mdi_upload";
+  }
+}
+const label = computed(() => {
+  let base = null;
+  if (props.bundles.length === 1 && props.bundles[0]) {
+    base = types.getBlockBundleDefinition(props.bundles[0])?.label || props.bundles[0];
+  } else {
+    switch (itemType.value) {
+      case "image":
+        base = $t("clipboardTypeImage", "Image");
+        break;
+      case "video":
+        base = $t("clipboardTypeVideo", "Video");
+        break;
+      case "file":
+        base = $t("clipboardTypeFile", "File");
+        break;
+      case "text":
+        base = $t("clipboardTypeText", "Text");
+        break;
+    }
+  }
+  if (!base) {
+    return null;
+  }
+  const suffix = props.bundles.length > 1 ? "..." : "";
+  if (props.items.length > 1) {
+    return `${props.items.length} x ${base}${suffix}`;
+  }
+  return base + suffix;
+});
+const icon = computed(() => getItemIcon(itemType.value));
+</script>

package/dist/runtime/editor/features/clipboard/DropElement/index.vue.d.ts

@@ -0,0 +1,16 @@
+export type DropElementItemType = 'image' | 'video' | 'file' | 'text';
+export type DropElementItem = {
+    type: DropElementItemType;
+    data?: string;
+    fileName?: string;
+    fileSize?: number;
+    videoId?: string;
+    videoService?: string;
+};
+type __VLS_Props = {
+    bundles: string[];
+    items: DropElementItem[];
+};
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/clipboard/helpers.d.ts

@@ -0,0 +1,15 @@
+import type { ClipboardMapBundleEvent } from './types.js';
+export type NativeDragMapResult = ClipboardMapBundleEvent & {
+    fileName?: string;
+    fileCount?: number;
+};
+/**
+ * Recursively remove all attributes (except allowed ones) from an element
+ * and its children. Removes IMG and BR elements entirely.
+ */
+export declare function sanitizeHtml(el: Element): void;
+/**
+ * Build a ClipboardMapBundleEvent from the drag event's dataTransfer items.
+ * Returns null if we can't determine a suitable mapping event.
+ */
+export declare function buildMapBundleEvent(e: DragEvent): NativeDragMapResult | null;

package/dist/runtime/editor/features/clipboard/helpers.js

@@ -0,0 +1,62 @@
+const ALLOWED_HTML_ATTRIBUTES = ["href"];
+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);
+    }
+  }
+}
+export function sanitizeHtml(el) {
+  if (el.tagName === "IMG" || el.tagName === "BR") {
+    el.remove();
+    return;
+  }
+  const children = el.children;
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+    removeAllAttrs(child);
+    if (child.children.length) {
+      sanitizeHtml(child);
+    }
+  }
+}
+export function buildMapBundleEvent(e) {
+  const dt = e.dataTransfer;
+  if (!dt || !dt.items || dt.items.length === 0) {
+    return null;
+  }
+  let fileCount = 0;
+  let fileItem = null;
+  for (let i = 0; i < dt.items.length; i++) {
+    const item = dt.items[i];
+    if (item?.kind === "file") {
+      fileCount++;
+      fileItem = item;
+    }
+  }
+  if (fileItem) {
+    const file = fileItem.getAsFile();
+    const fileSize = file?.size || 0;
+    if (fileItem.type.startsWith("image/")) {
+      return {
+        type: "image",
+        fileType: fileItem.type,
+        fileSize,
+        fileName: file?.name,
+        fileCount
+      };
+    }
+    return {
+      type: "file",
+      fileType: fileItem.type,
+      fileSize,
+      fileName: file?.name,
+      fileCount
+    };
+  }
+  if (dt.items.length > 0 && dt.items[0]?.kind === "string") {
+    return { type: "plaintext", text: "" };
+  }
+  return null;
+}