@blokkli/editor 1.0.0

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

@@ -0,0 +1,69 @@
+<template>
+  <Sortli class="bk-clipboard-list">
+    <div
+      v-for="(item, index) in items"
+      :key="index + item.data + renderKey"
+      class="bk-parent bk-sidebar-padding"
+      data-element-type="clipboard"
+      :data-sortli-id="'clipboard_' + index"
+      :data-item-bundle="item.itemBundle"
+      :data-clipboard-type="item.type"
+      :data-clipboard-id="item.id"
+      :data-clipboard-data="item.data"
+      :data-clipboard-additional="item.additional"
+    >
+      <div class="bk-clipboard-item">
+        <div class="bk bk-clipboard-item-header">
+          <div class="bk-blokkli-item-label">
+            <div class="bk-blokkli-item-label-icon">
+              <ItemIcon :bundle="item.itemBundle" />
+            </div>
+            <span>{{ getLabel(item.itemBundle) }}</span>
+          </div>
+          <button @click.prevent.stop.capture="$emit('remove', index)">
+            <Icon name="delete" />
+          </button>
+        </div>
+        <div class="bk-drop-element">
+          <div
+            v-if="item.type === 'text'"
+            class="bk-clipboard-item-inner"
+            v-html="item.data"
+          />
+          <ClipboardItemVideo v-if="item.type === 'video'" v-bind="item" />
+          <div
+            v-else-if="item.type === 'image'"
+            class="bk-clipboard-item-image"
+          >
+            <img :src="item.data" />
+          </div>
+          <ClipboardItemFile v-else-if="item.type === 'file'" v-bind="item" />
+        </div>
+      </div>
+    </div>
+  </Sortli>
+</template>
+
+<script lang="ts" setup>
+import { ref, useBlokkli } from '#imports'
+import { ItemIcon, Icon, Sortli } from '#blokkli/components'
+import type { ClipboardItem } from '#blokkli/types'
+import ClipboardItemVideo from './Item/Video.vue'
+import ClipboardItemFile from './Item/File.vue'
+
+const renderKey = ref(0)
+
+defineProps<{
+  items: ClipboardItem[]
+}>()
+
+defineEmits<{
+  (e: 'remove', index: number): void
+}>()
+
+const { types } = useBlokkli()
+
+function getLabel(bundle: string): string {
+  return types.getBlockBundleDefinition(bundle)?.label || bundle
+}
+</script>

package/dist/runtime/components/Edit/Features/Clipboard/docs.md

@@ -0,0 +1,16 @@
+## Overview
+
+The feature integrates the user's clipboard with the editor.
+
+## Existing blocks
+
+Existing blocks can be copy pasted on the same page.
+
+## New blocks
+
+When matching contents of the clipboard are pasted into the window, the feature
+will display a preview of the clipboard data in the sidebar pane. The preview
+can then be drag and dropped as a new block into the page.
+
+For this to work the adapter has to implement the
+[adapter.addBlockFromClipboardItem] method.

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

@@ -0,0 +1,485 @@
+<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="clipboard"
+    weight="-30"
+  >
+    <div class="bk-clipboard bk-control">
+      <div
+        v-if="!pastedItems.length"
+        class="bk 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"
+      />
+      <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="upload" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </PluginSidebar>
+</template>
+
+<script lang="ts" 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 } 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.',
+  settings: {
+    openSidebarOnPaste: {
+      type: 'checkbox',
+      default: true,
+      label: 'Open sidebar when pasting from clipboard',
+      group: 'behavior',
+    },
+  },
+
+  screenshot: 'feature-clipboard.jpg',
+})
+
+const { selection, $t, adapter, dom, state, ui } = useBlokkli()
+
+const plugin = ref<InstanceType<typeof PluginSidebar> | null>(null)
+
+const ALLOWED_HTML_ATTRIBUTES = ['href']
+
+const _MOCK: ClipboardItem[] = [
+  {
+    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<ClipboardItem[]>([])
+
+const onFileInput = (e: Event) => {
+  e.preventDefault()
+  if (e.target instanceof HTMLInputElement) {
+    const files = e.target.files
+    if (files) {
+      handleFiles(files)
+    }
+  }
+}
+
+function removeAllAttrs(element: Element) {
+  for (let i = element.attributes.length; i-- > 0; ) {
+    const attribute = element.attributes[i]
+    if (!ALLOWED_HTML_ATTRIBUTES.includes(attribute.name)) {
+      element.removeAttributeNode(element.attributes[i])
+    }
+  }
+}
+
+function removeAttributes(el: Element) {
+  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) {
+      removeAttributes(child)
+    }
+  }
+}
+
+const onManualPaste = (e: ClipboardEvent) => {
+  onPaste(e, true)
+}
+
+function handleFiles(data: DataTransfer | FileList) {
+  if (!FileReader) {
+    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: 'image' | 'file' = file.type.startsWith('image/')
+        ? 'image'
+        : 'file'
+
+      // Let the adapter decide which block bundle can be created from this clipboard item.
+      const itemBundle = 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: DragEvent) {
+  e.preventDefault()
+  if (e.dataTransfer?.files.length) {
+    handleFiles(e.dataTransfer)
+  }
+}
+
+function onDragOver(e: DragEvent) {
+  e.preventDefault()
+}
+
+const showClipboardSidebar = () => {
+  if (settings.value.openSidebarOnPaste) {
+    plugin?.value?.showSidebar()
+  }
+}
+
+const handleSelectionPaste = (pastedUuids: string[]) => {
+  if (!adapter.pasteExistingBlocks) {
+    return
+  }
+  // Pasting is only possible into a single field.
+  if (selection.uuids.value.length !== 1) {
+    return
+  }
+
+  if (!pastedUuids.length) {
+    return
+  }
+
+  // @TODO: Paste into nested field if possible.
+  const field = dom.getBlockField(selection.uuids.value[0])
+
+  const pastedBlocks = pastedUuids
+    .map((uuid) => dom.findBlock(uuid))
+    .filter(falsy)
+    .filter((block) => field.allowedBundles.includes(block.itemBundle))
+
+  if (!pastedBlocks.length) {
+    return
+  }
+
+  const count = state.getFieldBlockCount(field.key)
+  if (
+    field.cardinality !== -1 &&
+    count + pastedBlocks.length > field.cardinality
+  ) {
+    return
+  }
+
+  state.mutateWithLoadingState(() =>
+    adapter.pasteExistingBlocks!({
+      uuids: pastedBlocks.map((v) => v.uuid),
+      host: {
+        type: field.hostEntityType,
+        uuid: field.hostEntityUuid,
+        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()
+
+  if (state.isLoading.value) {
+    return
+  }
+
+  // Get pasted data via clipboard API
+  const clipboardData = e.clipboardData
+  if (clipboardData?.files.length) {
+    return handleFiles(clipboardData)
+  }
+  let pastedData = clipboardData?.getData('text/html')
+  if (!pastedData) {
+    pastedData = clipboardData?.getData('text')
+  }
+  if (!pastedData) {
+    return
+  }
+
+  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)
+      }
+    } catch (_e) {
+      // Noop.
+    }
+  }
+
+  handlePastedText(pastedData)
+}
+
+const handlePastedText = (text: string) => {
+  if (!adapter.clipboardMapBundle) {
+    return
+  }
+  const video = getVideoId(text)
+  if (video.id && video.service) {
+    const itemBundle = adapter.clipboardMapBundle({
+      type: 'video',
+      videoService: video.service,
+      videoId: video.id,
+    })
+    if (!itemBundle) {
+      return
+    }
+    pastedItems.value.push({
+      type: 'video',
+      id: generateUUID(),
+      itemBundle,
+      data: text,
+      videoService: video.service,
+      videoId: video.id,
+    })
+    showClipboardSidebar()
+    return
+  }
+
+  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,
+    })
+    if (!itemBundle) {
+      return
+    }
+    showClipboardSidebar()
+    pastedItems.value.push({
+      type: 'text',
+      id: generateUUID(),
+      itemBundle,
+      data: div.innerHTML,
+    })
+  }
+}
+
+function remove(index: number) {
+  pastedItems.value = pastedItems.value.filter((_v, i) => {
+    return i !== index
+  })
+}
+
+function setClipboard(text: string) {
+  const type = 'text/plain'
+  const blob = new Blob([text], { type })
+  const data = [new ClipboardItem({ [type]: blob })]
+
+  try {
+    navigator.clipboard.write(data)
+  } catch (_e) {
+    // Noop.
+  }
+}
+
+onBlokkliEvent('keyPressed', (e) => {
+  if (!selection.blocks.value.length) {
+    return
+  }
+  if (e.code !== 'c' || !e.meta) {
+    return
+  }
+  setClipboard(
+    JSON.stringify({ type: 'selection', uuids: selection.uuids.value }),
+  )
+})
+
+defineShortcut([
+  {
+    code: 'C',
+    label: $t('clipboardCopyShortcutHelp', 'Copy selected blocks'),
+    meta: true,
+  },
+  {
+    code: 'V',
+    label: $t(
+      'clipboardPasteShortcutHelp',
+      'Paste text, image or copied blocks',
+    ),
+    meta: true,
+  },
+])
+
+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: item,
+        blockBundle: data.blockBundle,
+        host: data.host,
+      }),
+    )
+
+    // Remove the pasted item.
+    pastedItems.value = pastedItems.value.filter((v) => v.id !== item.id)
+  }
+})
+
+onMounted(() => {
+  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)
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Clipboard',
+}
+</script>

package/dist/runtime/components/Edit/Features/CommandPalette/Palette/Group/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <div v-if="shouldRender" class="bk-command-palette-results-group">
+    <h2>{{ label }}</h2>
+    <div>
+      <button
+        v-for="item in mapped"
+        v-show="item.visible"
+        :key="item.id"
+        :data-command-id="item.id"
+        :data-command-visible="item.visible"
+        class="bk-command"
+        :class="{ 'bk-is-focused': focusedId === item.id }"
+        @mouseenter="$emit('focus', item.id)"
+        @click.prevent="$emit('select', item.id)"
+      >
+        <div class="bk-command-icon">
+          <Icon v-if="item.icon" :name="item.icon" />
+          <ItemIcon v-else :bundle="item.bundle" />
+        </div>
+        <Highlight :text="item.label" tag="span" :positions="item.positions" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from '#imports'
+import { Icon, ItemIcon, Highlight } from '#blokkli/components'
+import type { Command } from '#blokkli/types'
+
+const props = defineProps<{
+  label: string
+  commands: Array<Command & { _id: number }>
+  visibleIds: { id: number; positions: number[] }[] | undefined
+  focusedId: string
+}>()
+
+defineEmits<{
+  (e: 'close'): void
+  (e: 'focus' | 'select', id: string): void
+}>()
+
+const mapped = computed(() => {
+  return props.commands
+    .map((v) => {
+      const found = props.visibleIds?.find((w) => w.id === v._id)
+      return {
+        ...v,
+        visible: props.visibleIds === undefined || !!found,
+        positions: found?.positions,
+      }
+    })
+    .sort((a, b) => {
+      const indexA = props.visibleIds?.findIndex((w) => w.id === a._id) || -1
+      const indexB = props.visibleIds?.findIndex((w) => w.id === b._id) || -1
+      return indexA - indexB
+    })
+})
+
+const shouldRender = computed(() => mapped.value.some((v) => v.visible))
+</script>