@blokkli/editor 1.1.3 → 1.2.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "blokkli",
   "configKey": "blokkli",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "compatibility": {
     "nuxt": "^3.12.0"
   },

package/dist/module.mjs

@@ -7,7 +7,7 @@ import MagicString from 'magic-string';
 import { walk } from 'estree-walker-ts';
 import { BK_VISIBLE_LANGUAGES, BK_HIDDEN_GLOBALLY } from '../dist/runtime/helpers/symbols.js';
 
-const version = "1.1.3";
+const version = "1.2.0";
 
 function sortObjectKeys(obj) {
   if (Array.isArray(obj)) {
@@ -850,6 +850,10 @@ const cancel$2 = {
 	source: "Cancel",
 	translation: "Abbrechen"
 };
+const cancelSelection$2 = {
+	source: "Cancel selection",
+	translation: "Auswahl abbrechen"
+};
 const clipboard$2 = {
 	source: "Clipboard",
 	translation: "Zwischenablage"
@@ -1689,6 +1693,7 @@ const de = {
 	blockOption_bkHiddenGlobally_label: blockOption_bkHiddenGlobally_label$2,
 	blockOption_bkVisibleLanguages_label: blockOption_bkVisibleLanguages_label$2,
 	cancel: cancel$2,
+	cancelSelection: cancelSelection$2,
 	clipboard: clipboard$2,
 	clipboardCopyShortcutHelp: clipboardCopyShortcutHelp$2,
 	clipboardEmpty: clipboardEmpty$2,
@@ -2093,6 +2098,10 @@ const cancel$1 = {
 	source: "Cancel",
 	translation: "Annuler"
 };
+const cancelSelection$1 = {
+	source: "Cancel selection",
+	translation: ""
+};
 const clipboard$1 = {
 	source: "Clipboard",
 	translation: "Presse-papiers"
@@ -2932,6 +2941,7 @@ const fr = {
 	blockOption_bkHiddenGlobally_label: blockOption_bkHiddenGlobally_label$1,
 	blockOption_bkVisibleLanguages_label: blockOption_bkVisibleLanguages_label$1,
 	cancel: cancel$1,
+	cancelSelection: cancelSelection$1,
 	clipboard: clipboard$1,
 	clipboardCopyShortcutHelp: clipboardCopyShortcutHelp$1,
 	clipboardEmpty: clipboardEmpty$1,
@@ -3336,6 +3346,10 @@ const cancel = {
 	source: "Cancel",
 	translation: "Annulla"
 };
+const cancelSelection = {
+	source: "Cancel selection",
+	translation: ""
+};
 const clipboard = {
 	source: "Clipboard",
 	translation: "Appunti"
@@ -4175,6 +4189,7 @@ const it = {
 	blockOption_bkHiddenGlobally_label: blockOption_bkHiddenGlobally_label,
 	blockOption_bkVisibleLanguages_label: blockOption_bkVisibleLanguages_label,
 	cancel: cancel,
+	cancelSelection: cancelSelection,
 	clipboard: clipboard,
 	clipboardCopyShortcutHelp: clipboardCopyShortcutHelp,
 	clipboardEmpty: clipboardEmpty,

package/dist/runtime/adapter/drupal/graphql/base.graphql

@@ -700,6 +700,32 @@ mutation pbAddEntityReference(
   }
 }
 
+mutation pbAddEntityReferenceMultiple(
+  $langcode: String
+  $entityType: EntityType!
+  $entityUuid: String!
+  $references: [ParagraphsBlokkliAddEntityReferenceMultipleInput]!
+  $hostType: String!
+  $hostUuid: String!
+  $hostFieldName: String!
+  $afterUuid: String
+) {
+  state: paragraphsEditMutationState(
+    entityType: $entityType
+    entityUuid: $entityUuid
+  ) {
+    action: add_entity_reference_multiple(
+      references: $references
+      afterUuid: $afterUuid
+      hostType: $hostType
+      hostUuid: $hostUuid
+      hostFieldName: $hostFieldName
+    ) {
+      ...paragraphsBlokkliMutationResult
+    }
+  }
+}
+
 query pbConfig($entityType: String!, $entityBundle: String!) {
   clipboards: pbGetSupportedClipboards {
     ...paragraphsBlokkliSupportedClipboard

package/dist/runtime/adapter/drupal/graphqlMiddleware.js

@@ -491,6 +491,23 @@ export default defineBlokkliEditAdapter(
         afterUuid: e.preceedingUuid
       }).then(mapMutation);
     };
+    const mediaLibraryAddBlocks = (e) => {
+      return useGraphqlMutation("pbAddEntityReferenceMultiple", {
+        ...ctx.value,
+        references: e.items.map((item) => {
+          return {
+            targetId: item.mediaId,
+            targetType: "media",
+            targetBundle: item.mediaBundle,
+            paragraphBundle: item.itemBundle
+          };
+        }),
+        hostType: e.host.type,
+        hostUuid: e.host.uuid,
+        hostFieldName: e.host.fieldName,
+        afterUuid: e.preceedingUuid
+      }).then(mapMutation);
+    };
     const getContentSearchTabs = () => {
       return useGraphqlQuery("pbSearchTabs").then((v) => {
         return (v.data.tabs || []).reduce(
@@ -642,6 +659,7 @@ export default defineBlokkliEditAdapter(
       getDroppableFieldConfig,
       mediaLibraryGetResults,
       mediaLibraryAddBlock,
+      mediaLibraryAddBlocks,
       getContentSearchTabs,
       getContentSearchResults,
       addContentSearchItem,

package/dist/runtime/adapter/index.d.ts

@@ -26,6 +26,11 @@ export type MediaLibraryAddBlockEvent = {
     preceedingUuid?: string;
     item: DraggableMediaLibraryItem;
 };
+export type MediaLibraryAddBlocksEvent = {
+    host: DraggableHostData;
+    preceedingUuid?: string;
+    items: DraggableMediaLibraryItem[];
+};
 export type MediaLibraryReplaceMediaEvent = {
     /**
      * The UUID of the block on which the media was dropped.
@@ -343,6 +348,10 @@ export interface BlokkliAdapter<T> {
      * Create a new block from the given media library item.
      */
     mediaLibraryAddBlock?: (e: MediaLibraryAddBlockEvent) => Promise<MutationResponseLike<T>> | undefined;
+    /**
+     * Create new blocks from the given media library items.
+     */
+    mediaLibraryAddBlocks?: (e: MediaLibraryAddBlocksEvent) => Promise<MutationResponseLike<T>> | undefined;
     /**
      * Replace an existing media from a block with a new one.
      *

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

@@ -90,7 +90,9 @@ type FilteredItemType<T extends DraggableItem> = T extends {
   ? { itemType: 'existing'; items: T[] }
   : T extends { itemType: 'existing_structure' }
     ? { itemType: 'existing_structure'; items: T[] }
-    : { itemType: T['itemType']; item: T }
+    : T extends { itemType: 'media_library' }
+      ? { itemType: 'media_library'; items: T[] }
+      : { itemType: T['itemType']; item: T }
 
 function filterItemType<T extends DraggableItem>(
   items: T[],
@@ -105,7 +107,11 @@ function filterItemType<T extends DraggableItem>(
 
   const itemType = items[0].itemType
 
-  if (itemType === 'existing' || itemType === 'existing_structure') {
+  if (
+    itemType === 'existing' ||
+    itemType === 'existing_structure' ||
+    itemType === 'media_library'
+  ) {
     return { itemType, items } as any
   }
 
@@ -211,16 +217,24 @@ const onDropClipboardItem = async (
 }
 
 const onDropMediaLibraryItem = async (
-  item: DraggableMediaLibraryItem,
+  items: DraggableMediaLibraryItem[],
   host: DraggableHostData,
   afterUuid?: string,
 ) => {
-  if (adapter.mediaLibraryAddBlock) {
+  if (adapter.mediaLibraryAddBlock && items.length === 1) {
     await state.mutateWithLoadingState(() =>
       adapter.mediaLibraryAddBlock({
         preceedingUuid: afterUuid,
         host,
-        item,
+        item: items[0],
+      }),
+    )
+  } else if (adapter.mediaLibraryAddBlocks && items.length > 1) {
+    await state.mutateWithLoadingState(() =>
+      adapter.mediaLibraryAddBlocks({
+        preceedingUuid: afterUuid,
+        host,
+        items,
       }),
     )
   }
@@ -279,7 +293,7 @@ const onDrop = (e: DropTargetEvent) => {
     } else if (typed.itemType === 'action') {
       onDropAction(typed.item, host, e.field, afterUuid)
     } else if (typed.itemType === 'media_library') {
-      await onDropMediaLibraryItem(typed.item, host, afterUuid)
+      await onDropMediaLibraryItem(typed.items, host, afterUuid)
     }
 
     eventBus.emit('dragging:end')

package/dist/runtime/components/Edit/Features/MediaLibrary/Library/Item.vue

@@ -0,0 +1,44 @@
+<template>
+  <div
+    :key="mediaId"
+    class="bk-media-library-items-item"
+    :class="{ 'bk-is-selected': isSelected }"
+    :data-sortli-id="'media_library_' + mediaId"
+    data-element-type="media_library"
+    :data-item-bundle="targetBundles[0]"
+    :data-media-id="mediaId"
+    :data-media-bundle="mediaBundle"
+  >
+    <div class="bk-media-library-items-item-box">
+      <label @click.stop>
+        <input v-model="selected" type="checkbox" :value="mediaId" />
+      </label>
+      <div class="bk-media-library-items-item-image">
+        <img :src="thumbnail" />
+      </div>
+    </div>
+    <div class="bk-media-library-items-item-text">
+      <h3>{{ label }}</h3>
+      <p>{{ context }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { BlokkliIcon } from '#blokkli/icons'
+import { computed } from '#imports'
+
+const props = defineProps<{
+  mediaId: string
+  label: string
+  context: string
+  targetBundles: string[]
+  thumbnail?: string
+  icon?: BlokkliIcon
+  mediaBundle?: string
+}>()
+
+const selected = defineModel<string[]>()
+
+const isSelected = computed(() => selected.value?.includes(props.mediaId))
+</script>

package/dist/runtime/components/Edit/Features/MediaLibrary/Library/index.vue

@@ -50,30 +50,24 @@
       class="bk-media-library-items bk-scrollbar-light"
       :class="[{ 'bk-is-sortli': isSortli }, 'bk-is-' + listView]"
     >
-      <Component :is="isSortli ? Sortli : 'div'" no-transition>
-        <div
+      <Sortli v-if="isSortli" no-transition :get-drag-items="getDragItems">
+        <Item
           v-for="item in items"
           :key="item.mediaId"
-          class="bk-media-library-items-item"
-          :class="{ 'bk-is-selected': modelValue === item.mediaId }"
-          :data-sortli-id="'media_library_' + item.mediaId"
-          data-element-type="media_library"
-          :data-item-bundle="item.targetBundles[0]"
-          :data-media-id="item.mediaId"
-          :data-media-bundle="item.mediaBundle"
-          @click="onClick(item.mediaId)"
-        >
-          <div>
-            <div class="bk-media-library-items-item-image">
-              <img :src="item.thumbnail" />
-            </div>
-          </div>
-          <div class="bk-media-library-items-item-text">
-            <h3>{{ item.label }}</h3>
-            <p>{{ item.context }}</p>
-          </div>
-        </div>
-      </Component>
+          v-bind="item"
+          v-model="selected"
+        />
+      </Sortli>
+
+      <div v-else>
+        <Item v-for="item in items" :key="item.mediaId" v-bind="item" />
+      </div>
+    </div>
+
+    <div v-if="selected.length" class="bk-media-library-cancel">
+      <button class="bk-button bk-is-primary" @click.prevent="selected = []">
+        {{ $t('cancelSelection', 'Cancel selection') }}
+      </button>
     </div>
 
     <div class="bk-pagination">
@@ -100,20 +94,60 @@ import {
 import { Sortli, Icon } from '#blokkli/components'
 import type { MediaLibraryFilter, MediaLibraryGetResults } from './../types'
 import type { BlokkliIcon } from '#blokkli/icons'
+import Item from './Item.vue'
+import type { DraggableItem, DraggableMediaLibraryItem } from '#blokkli/types'
+import { buildDraggableItem, falsy } from '#blokkli/helpers'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
 
-const props = defineProps<{
+defineProps<{
   isSortli?: boolean
   modelValue?: string
 }>()
 
-const emit = defineEmits(['update:modelValue'])
+const { adapter, storage, $t } = useBlokkli()
+
+const selected = ref<string[]>([])
+const listEl = ref<HTMLDivElement | null>(null)
+const page = ref(0)
+const key = computed(() => Object.values(filterValues.value).join(','))
+
+function getDragItems(activeItem?: DraggableItem): DraggableItem[] | null {
+  if (!selected.value.length || !listEl.value) {
+    return null
+  }
+
+  const activeId =
+    activeItem?.itemType === 'media_library' ? activeItem.mediaId : null
+
+  const items: DraggableMediaLibraryItem[] = selected.value
+    .map((id) => {
+      const el = listEl.value?.querySelector(
+        `[data-sortli-id="media_library_${id}"]`,
+      )
+      if (!(el instanceof HTMLElement)) {
+        return null
+      }
+
+      const item = buildDraggableItem(el)
+      if (item?.itemType === 'media_library') {
+        return item
+      }
+
+      return null
+    })
+    .filter(falsy)
+
+  if (!activeId) {
+    return items
+  }
+
+  const activeIsInSelection = items.find((v) => v.mediaId === activeId)
 
-const onClick = (id: string) => {
-  if (props.isSortli) {
-    return
+  if (activeIsInSelection) {
+    return items
   }
 
-  emit('update:modelValue', id)
+  return null
 }
 
 type RenderedFilter = {
@@ -121,8 +155,6 @@ type RenderedFilter = {
   filter: MediaLibraryFilter
 }
 
-const { adapter, storage } = useBlokkli()
-
 const listView = storage.use<'horizontal' | 'grid'>(
   'mediaLibraryListView',
   'grid',
@@ -142,10 +174,6 @@ const toggleListView = () => {
 
 const filterValues = ref<Record<string, any>>({})
 
-const listEl = ref<HTMLDivElement | null>(null)
-const page = ref(0)
-const key = computed(() => Object.values(filterValues.value).join(','))
-
 watch(key, () => {
   page.value = 0
 })
@@ -182,4 +210,8 @@ const perPage = computed(() => data.value?.perPage || 0)
 const totalPages = computed(() => {
   return Math.ceil(total.value / perPage.value)
 })
+
+onBlokkliEvent('item:dropped', function () {
+  selected.value = []
+})
 </script>

package/dist/runtime/components/Edit/Sortli/index.vue

@@ -19,6 +19,10 @@ import {
 
 const { eventBus } = useBlokkli()
 
+const props = defineProps<{
+  getDragItems?: (activeItem?: DraggableItem) => DraggableItem[] | null
+}>()
+
 let pointerStartCoords: Coord | null = null
 let activeItem: DraggableItem | null = null
 
@@ -55,8 +59,9 @@ function onPointerMove(e: PointerEvent) {
   const distance = getDistance(coords, pointerStartCoords)
 
   if (distance > 7) {
+    const dragItems = props.getDragItems ? props.getDragItems(activeItem) : null
     eventBus.emit('dragging:start', {
-      items: [activeItem],
+      items: dragItems && dragItems.length ? dragItems : [activeItem],
       coords,
       mode: 'mouse',
     })