@blokkli/editor 1.4.0-alpha.1 → 2.0.0-alpha.2

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

@@ -5,11 +5,11 @@
     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.',
-      )
-    "
+  $t(
+    'clipboardTourText',
+    'Drag and drop content pasted from your clipboard into the page to create a matching block.'
+  )
+"
     edit-only
     icon="clipboard"
     weight="-30"
@@ -19,22 +19,22 @@
         v-if="!pastedItems.length"
         class="bk bk-clipboard-info bk-sidebar-padding"
       >
-        <h4>{{ $t('clipboardEmpty', 'No items in the clipboard') }}</h4>
+        <h4>{{ $t("clipboardEmpty", "No items in the clipboard") }}</h4>
         <div
           v-if="!ui.isMobile.value"
           v-html="
-            $t(
-              'clipboardExplanation',
-              `<p>
+  $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>`,
-            )
-          "
+  </p>`
+  )
+"
         />
       </div>
       <ClipboardList
@@ -48,8 +48,8 @@
             type="text"
             class="bk-form-input"
             :placeholder="
-              $t('clipboardPastePlaceholder', 'Paste text or media here')
-            "
+  $t('clipboardPastePlaceholder', 'Paste text or media here')
+"
             @paste.stop.prevent="onManualPaste"
             @keydown.stop
           />
@@ -65,167 +65,142 @@
   </PluginSidebar>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   defineBlokkliFeature,
   ref,
   useBlokkli,
   onMounted,
-  onUnmounted,
-} from '#imports'
-import { PluginSidebar } from '#blokkli/plugins'
-import ClipboardList from './List/index.vue'
-import type { ClipboardItem } from '#blokkli/types'
-import { falsy, generateUUID, getFieldKey } from '#blokkli/helpers'
-import { Icon } from '#blokkli/components'
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-import defineShortcut from '#blokkli/helpers/composables/defineShortcut'
-import getVideoId from 'get-video-id'
-
+  onUnmounted
+} from "#imports";
+import { PluginSidebar } from "#blokkli/plugins";
+import ClipboardList from "./List/index.vue";
+import { falsy, generateUUID, getFieldKey } from "#blokkli/helpers";
+import { Icon } from "#blokkli/components";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import defineShortcut from "#blokkli/helpers/composables/defineShortcut";
+import getVideoId from "get-video-id";
 const { settings, logger } = defineBlokkliFeature({
-  id: 'clipboard',
-  label: 'Clipboard',
-  icon: 'clipboard',
-  description:
-    'Provides clipboard integration to copy/paste existing blocks or paste supported clipboard content like text or images.',
+  id: "clipboard",
+  label: "Clipboard",
+  icon: "clipboard",
+  description: "Provides clipboard integration to copy/paste existing blocks or paste supported clipboard content like text or images.",
   settings: {
     openSidebarOnPaste: {
-      type: 'checkbox',
+      type: "checkbox",
       default: true,
-      label: 'Open sidebar when pasting',
-      description:
-        'Automatically opens the sidebar when pasting content from the clipboard.',
-      group: 'behavior',
-    },
+      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, dom, state, ui, types } = useBlokkli()
-
-const plugin = ref<InstanceType<typeof PluginSidebar> | null>(null)
-
-const ALLOWED_HTML_ATTRIBUTES = ['href']
-
-const _MOCK: ClipboardItem[] = [
+  screenshot: "feature-clipboard.jpg"
+});
+const { selection, $t, adapter, dom, state, ui, types } = useBlokkli();
+const plugin = ref(null);
+const ALLOWED_HTML_ATTRIBUTES = ["href"];
+const _MOCK = [
   {
-    type: 'text',
+    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.',
+    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',
+    type: "file",
     id: generateUUID(),
-    itemBundle: 'image',
-    data: 'asdfasdf',
-    additional: 'asdfasdfasdf',
-    fileName: 'my-little-document.pdf',
+    itemBundle: "image",
+    data: "asdfasdf",
+    additional: "asdfasdfasdf",
+    fileName: "my-little-document.pdf",
     fileSize: 26624,
-    fileType: 'application/pdf',
+    fileType: "application/pdf"
   },
   {
-    type: 'file',
+    type: "file",
     id: generateUUID(),
-    itemBundle: 'image',
-    data: 'asdfasdf',
-    additional: 'asdfasdfasdf',
-    fileName: 'my-little-document.pdf',
+    itemBundle: "image",
+    data: "asdfasdf",
+    additional: "asdfasdfasdf",
+    fileName: "my-little-document.pdf",
     fileSize: 36623,
-    fileType: 'application/pdf',
+    fileType: "application/pdf"
   },
   {
-    type: 'video',
+    type: "video",
     id: generateUUID(),
-    itemBundle: 'video',
-    data: 'https://vimeo.com/53520224',
-    videoService: 'vimeo',
-    videoId: '53520224',
+    itemBundle: "video",
+    data: "https://vimeo.com/53520224",
+    videoService: "vimeo",
+    videoId: "53520224"
   },
   {
-    type: 'video',
+    type: "video",
     id: generateUUID(),
-    itemBundle: 'video',
-    data: 'https://www.youtube.com/watch?v=zsvYVVRAk0c',
-    videoService: 'youtube',
-    videoId: 'zsvYVVRAk0c',
-  },
-]
-
-const pastedItems = ref<ClipboardItem[]>([])
-
-const onFileInput = (e: Event) => {
-  e.preventDefault()
+    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
+    const files = e.target.files;
     if (files) {
-      handleFiles(files)
+      handleFiles(files);
     }
   }
-}
-
-function removeAllAttrs(element: Element) {
+};
+function removeAllAttrs(element) {
   for (let i = element.attributes.length; i-- > 0; ) {
-    const attribute = element.attributes[i]
+    const attribute = element.attributes[i];
     if (!ALLOWED_HTML_ATTRIBUTES.includes(attribute.name)) {
-      element.removeAttributeNode(element.attributes[i])
+      element.removeAttributeNode(attribute);
     }
   }
 }
-
-function removeAttributes(el: Element) {
-  if (el.tagName === 'IMG' || el.tagName === 'BR') {
-    el.remove()
-    return
+function removeAttributes(el) {
+  if (el.tagName === "IMG" || el.tagName === "BR") {
+    el.remove();
+    return;
   }
-  const children = el.children
+  const children = el.children;
   for (let i = 0; i < children.length; i++) {
-    const child = children[i]
-    removeAllAttrs(child)
+    const child = children[i];
+    removeAllAttrs(child);
     if (child.children.length) {
-      removeAttributes(child)
+      removeAttributes(child);
     }
   }
 }
-
-const onManualPaste = (e: ClipboardEvent) => {
-  onPaste(e, true)
-}
-
-function handleFiles(data: DataTransfer | FileList) {
+const onManualPaste = (e) => {
+  onPaste(e, true);
+};
+function handleFiles(data) {
   if (!FileReader) {
-    return
+    return;
   }
-
-  const files = data instanceof DataTransfer ? [...data.files] : [...data]
-
+  const files = data instanceof DataTransfer ? [...data.files] : [...data];
   files.forEach((file) => {
-    const fr = new FileReader()
-    fr.onload = function () {
+    const fr = new FileReader();
+    fr.onload = function() {
       if (!adapter.clipboardMapBundle) {
-        return
+        return;
       }
-
-      if (typeof fr.result !== 'string') {
-        return
+      if (typeof fr.result !== "string") {
+        return;
       }
-
-      const type: 'image' | 'file' = file.type.startsWith('image/')
-        ? 'image'
-        : 'file'
-
-      // Let the adapter decide which block bundle can be created from this clipboard item.
+      const type = file.type.startsWith("image/") ? "image" : "file";
       const itemBundle = adapter.clipboardMapBundle({
         type,
         fileType: file.type,
-        fileSize: file.size,
-      })
-
+        fileSize: file.size
+      });
       if (!itemBundle) {
-        return
+        return;
       }
-
       pastedItems.value.push({
         type,
         itemBundle,
@@ -234,272 +209,226 @@ function handleFiles(data: DataTransfer | FileList) {
         additional: file.name,
         fileSize: file.size,
         fileType: file.type,
-        fileName: file.name,
-      })
-      showClipboardSidebar()
-    }
-    fr.readAsDataURL(file)
-  })
+        fileName: file.name
+      });
+      showClipboardSidebar();
+    };
+    fr.readAsDataURL(file);
+  });
 }
-
-function onDrop(e: DragEvent) {
-  e.preventDefault()
+function onDrop(e) {
+  e.preventDefault();
   if (e.dataTransfer?.files.length) {
-    handleFiles(e.dataTransfer)
+    handleFiles(e.dataTransfer);
   }
 }
-
-function onDragOver(e: DragEvent) {
-  e.preventDefault()
+function onDragOver(e) {
+  e.preventDefault();
 }
-
 const showClipboardSidebar = () => {
   if (settings.value.openSidebarOnPaste) {
-    plugin?.value?.showSidebar()
+    plugin?.value?.showSidebar();
   }
-}
-
-const handleSelectionPaste = (pastedUuids: string[]) => {
+};
+const handleSelectionPaste = (pastedUuids) => {
   if (!adapter.pasteExistingBlocks) {
-    return
+    return;
   }
-  // Pasting is only possible into a single field.
   if (selection.uuids.value.length !== 1) {
-    return
+    return;
   }
-
   if (!pastedUuids.length) {
-    return
+    return;
   }
-
-  // @TODO: Paste into nested field if possible.
-  const block = selection.blocks.value[0]
+  const block = selection.blocks.value[0];
   if (!block) {
-    return
+    return;
   }
-  const field = state.getMutatedField(block.hostUuid, block.hostFieldName)
+  const field = state.getMutatedField(block.hostUuid, block.hostFieldName);
   if (!field) {
-    return
+    return;
   }
   const fieldConfig = types.getFieldConfig(
     field.entityType,
     block.hostBundle,
-    field.name,
-  )
-
+    field.name
+  );
   if (!fieldConfig) {
-    return
+    return;
   }
-
-  const fieldKey = getFieldKey(field.entityUuid, field.name)
-
-  const pastedBlocks = pastedUuids
-    .map((uuid) => dom.findBlock(uuid))
-    .filter(falsy)
-    .filter((block) => fieldConfig.allowedBundles.includes(block.itemBundle))
-
+  const fieldKey = getFieldKey(field.entityUuid, field.name);
+  const pastedBlocks = pastedUuids.map((uuid) => dom.findBlock(uuid)).filter(falsy).filter((block2) => fieldConfig.allowedBundles.includes(block2.itemBundle));
   if (!pastedBlocks.length) {
-    return
+    return;
   }
-
-  const count = state.getFieldBlockCount(fieldKey)
-  if (
-    fieldConfig.cardinality !== -1 &&
-    count + pastedBlocks.length > fieldConfig.cardinality
-  ) {
-    return
+  const count = state.getFieldBlockCount(fieldKey);
+  if (fieldConfig.cardinality !== -1 && count + pastedBlocks.length > fieldConfig.cardinality) {
+    return;
   }
-
-  state.mutateWithLoadingState(() =>
-    adapter.pasteExistingBlocks!({
+  state.mutateWithLoadingState(
+    () => adapter.pasteExistingBlocks({
       uuids: pastedBlocks.map((v) => v.uuid),
       host: {
         type: field.entityType,
         uuid: field.entityUuid,
-        fieldName: field.name,
+        fieldName: field.name
       },
-      preceedingUuid: selection.uuids.value[0],
-    }),
-  )
-}
-
-function onPaste(e: ClipboardEvent, fromInput?: boolean) {
-  logger.log('Paste Event', e)
-  if (state.editMode.value !== 'editing') {
-    return
-  }
-  if (
-    !fromInput &&
-    (e.target instanceof HTMLInputElement ||
-      e.target instanceof HTMLTextAreaElement)
-  ) {
-    return
-  }
-  // Stop data actually being pasted into div
-  e.stopPropagation()
-  e.preventDefault()
-
+      preceedingUuid: selection.uuids.value[0]
+    })
+  );
+};
+function onPaste(e, fromInput) {
+  logger.log("Paste Event", e);
+  if (state.editMode.value !== "editing") {
+    return;
+  }
+  if (!fromInput && (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)) {
+    return;
+  }
+  e.stopPropagation();
+  e.preventDefault();
   if (state.isLoading.value) {
-    return
+    return;
   }
-
-  // Get pasted data via clipboard API
-  const clipboardData = e.clipboardData
+  const clipboardData = e.clipboardData;
   if (clipboardData?.files.length) {
-    return handleFiles(clipboardData)
+    return handleFiles(clipboardData);
   }
-  let pastedData = clipboardData?.getData('text/html')
+  let pastedData = clipboardData?.getData("text/html");
   if (!pastedData) {
-    pastedData = clipboardData?.getData('text')
+    pastedData = clipboardData?.getData("text");
   }
   if (!pastedData) {
-    return
+    return;
   }
-
-  if (pastedData.startsWith('{')) {
+  if (pastedData.startsWith("{")) {
     try {
-      const data = JSON.parse(pastedData)
-      if (typeof data === 'object' && data.type && data.type === 'selection') {
-        const uuids: string[] = data.uuids
-        return handleSelectionPaste(uuids)
+      const data = JSON.parse(pastedData);
+      if (typeof data === "object" && data.type && data.type === "selection") {
+        const uuids = data.uuids;
+        return handleSelectionPaste(uuids);
       }
     } catch (_e) {
-      // Noop.
     }
   }
-
-  handlePastedText(pastedData)
+  handlePastedText(pastedData);
 }
-
-const handlePastedText = (text: string) => {
+const handlePastedText = (text) => {
   if (!adapter.clipboardMapBundle) {
-    return
+    return;
   }
-  const video = getVideoId(text)
+  const video = getVideoId(text);
   if (video.id && video.service) {
     const itemBundle = adapter.clipboardMapBundle({
-      type: 'video',
+      type: "video",
       videoService: video.service,
-      videoId: video.id,
-    })
+      videoId: video.id
+    });
     if (!itemBundle) {
-      return
+      return;
     }
     pastedItems.value.push({
-      type: 'video',
+      type: "video",
       id: generateUUID(),
       itemBundle,
       data: text,
       videoService: video.service,
-      videoId: video.id,
-    })
-    showClipboardSidebar()
-    return
+      videoId: video.id
+    });
+    showClipboardSidebar();
+    return;
   }
-
-  const div = document.createElement('div')
-  div.innerHTML = text.replace(/&nbsp;|<br>/g, '')
-
-  removeAttributes(div)
+  const div = document.createElement("div");
+  div.innerHTML = text.replace(/&nbsp;|<br>/g, "");
+  removeAttributes(div);
   if (div.textContent) {
     const itemBundle = adapter.clipboardMapBundle({
-      type: 'plaintext',
-      text: div.innerHTML,
-    })
+      type: "plaintext",
+      text: div.innerHTML
+    });
     if (!itemBundle) {
-      return
+      return;
     }
-    showClipboardSidebar()
+    showClipboardSidebar();
     pastedItems.value.push({
-      type: 'text',
+      type: "text",
       id: generateUUID(),
       itemBundle,
-      data: div.innerHTML,
-    })
+      data: div.innerHTML
+    });
   }
-}
-
-function remove(index: number) {
+};
+function remove(index) {
   pastedItems.value = pastedItems.value.filter((_v, i) => {
-    return i !== index
-  })
+    return i !== index;
+  });
 }
-
-function setClipboard(text: string) {
-  const type = 'text/plain'
-  const blob = new Blob([text], { type })
-  const data = [new ClipboardItem({ [type]: blob })]
-
+function setClipboard(text) {
+  const type = "text/plain";
+  const blob = new Blob([text], { type });
+  const data = [new ClipboardItem({ [type]: blob })];
   try {
-    navigator.clipboard.write(data)
+    navigator.clipboard.write(data);
   } catch (_e) {
-    // Noop.
   }
 }
-
-onBlokkliEvent('keyPressed', (e) => {
+onBlokkliEvent("keyPressed", (e) => {
   if (!selection.blocks.value.length) {
-    return
+    return;
   }
-  if (e.code !== 'c' || !e.meta) {
-    return
+  if (e.code !== "c" || !e.meta) {
+    return;
   }
   setClipboard(
-    JSON.stringify({ type: 'selection', uuids: selection.uuids.value }),
-  )
-})
-
+    JSON.stringify({ type: "selection", uuids: selection.uuids.value })
+  );
+});
 defineShortcut([
   {
-    code: 'C',
-    label: $t('clipboardCopyShortcutHelp', 'Copy selected blocks'),
-    meta: true,
+    code: "C",
+    label: $t("clipboardCopyShortcutHelp", "Copy selected blocks"),
+    meta: true
   },
   {
-    code: 'V',
+    code: "V",
     label: $t(
-      'clipboardPasteShortcutHelp',
-      'Paste text, image or copied blocks',
+      "clipboardPasteShortcutHelp",
+      "Paste text, image or copied blocks"
     ),
-    meta: true,
-  },
-])
-
-onBlokkliEvent('drop:clipboardItem', async (data) => {
-  const item = pastedItems.value.find((v) => v.id === data.id)
+    meta: true
+  }
+]);
+onBlokkliEvent("drop:clipboardItem", async (data) => {
+  const item = pastedItems.value.find((v) => v.id === data.id);
   if (!item) {
-    return
+    return;
   }
   if (adapter.addBlockFromClipboardItem) {
-    await state.mutateWithLoadingState(() =>
-      adapter.addBlockFromClipboardItem!({
+    await state.mutateWithLoadingState(
+      () => adapter.addBlockFromClipboardItem({
         afterUuid: data.afterUuid,
-        item: item,
+        item,
         blockBundle: data.blockBundle,
-        host: data.host,
-      }),
-    )
-
-    // Remove the pasted item.
-    pastedItems.value = pastedItems.value.filter((v) => v.id !== item.id)
+        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('dragover', onDragOver)
-})
-
+  document.addEventListener("paste", onPaste);
+  document.body.addEventListener("drop", onDrop);
+  document.addEventListener("dragover", onDragOver);
+});
 onUnmounted(() => {
-  document.removeEventListener('paste', onPaste)
-  document.body.removeEventListener('drop', onDrop)
-  document.removeEventListener('dragover', onDragOver)
-})
+  document.removeEventListener("paste", onPaste);
+  document.body.removeEventListener("drop", onDrop);
+  document.removeEventListener("dragover", onDragOver);
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'Clipboard',
-}
+  name: "Clipboard"
+};
 </script>