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

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

@@ -3,11 +3,11 @@
     id="media_library"
     :title="$t('mediaLibrary', 'Media Library')"
     :tour-text="
-      $t(
-        'mediaLibraryTourText',
-        'Search for media like images and drag and drop them into the page.',
-      )
-    "
+  $t(
+    'mediaLibraryTourText',
+    'Search for media like images and drag and drop them into the page.'
+  )
+"
     edit-only
     icon="image"
     weight="-100"
@@ -26,157 +26,124 @@
   </PluginDroppableEdit>
 </template>
 
-<script lang="ts" setup>
-import { useBlokkli, defineBlokkliFeature, ref } from '#imports'
-import { PluginSidebar, PluginDroppableEdit } from '#blokkli/plugins'
-import Library from './Library/index.vue'
-import defineDropAreas from '#blokkli/helpers/composables/defineDropAreas'
-import { falsy } from '#blokkli/helpers'
-import type {
-  DraggableHostData,
-  DropArea,
-  DroppableEntityField,
-} from '#blokkli/types'
-
+<script setup>
+import { useBlokkli, defineBlokkliFeature, ref } from "#imports";
+import { PluginSidebar, PluginDroppableEdit } from "#blokkli/plugins";
+import Library from "./Library/index.vue";
+import defineDropAreas from "#blokkli/helpers/composables/defineDropAreas";
+import { falsy } from "#blokkli/helpers";
 defineBlokkliFeature({
-  id: 'media-library',
-  icon: 'image',
-  label: 'Media Library',
-  description:
-    'Implements a media library to easily drag and drop media like images or videos.',
-  requiredAdapterMethods: ['mediaLibraryGetResults', 'mediaLibraryAddBlock'],
-})
-
-const { $t, dom, adapter, state, runtimeConfig, types } = useBlokkli()
-
-const selected = ref('')
-
+  id: "media-library",
+  icon: "image",
+  label: "Media Library",
+  description: "Implements a media library to easily drag and drop media like images or videos.",
+  requiredAdapterMethods: ["mediaLibraryGetResults", "mediaLibraryAddBlock"]
+});
+const { $t, dom, adapter, state, runtimeConfig, types } = useBlokkli();
+const selected = ref("");
 const ERROR_MESSAGE = $t(
-  'mediaLibraryReplaceFailed',
-  'Failed to replace media.',
-)
-
-const onDroppableEditSave = async (e: DroppableEntityField) => {
+  "mediaLibraryReplaceFailed",
+  "Failed to replace media."
+);
+const onDroppableEditSave = async (e) => {
   if (!selected.value) {
-    return
+    return;
   }
-  if ('itemBundle' in e.host && adapter.mediaLibraryReplaceMedia) {
+  if ("itemBundle" in e.host && adapter.mediaLibraryReplaceMedia) {
     await state.mutateWithLoadingState(
-      () =>
-        adapter.mediaLibraryReplaceMedia!({
-          host: {
-            uuid: e.host.uuid,
-            type: runtimeConfig.itemEntityType,
-            fieldName: e.fieldName,
-          },
-          mediaId: selected.value,
-        }),
-      ERROR_MESSAGE,
-    )
-  } else if ('type' in e.host && adapter.mediaLibraryReplaceEntityMedia) {
-    const type = e.host.type
+      () => adapter.mediaLibraryReplaceMedia({
+        host: {
+          uuid: e.host.uuid,
+          type: runtimeConfig.itemEntityType,
+          fieldName: e.fieldName
+        },
+        mediaId: selected.value
+      }),
+      ERROR_MESSAGE
+    );
+  } else if ("type" in e.host && adapter.mediaLibraryReplaceEntityMedia) {
+    const type = e.host.type;
     await state.mutateWithLoadingState(
-      () =>
-        adapter.mediaLibraryReplaceEntityMedia!({
-          host: {
-            uuid: e.host.uuid,
-            type,
-            fieldName: e.fieldName,
-          },
-          mediaId: selected.value,
-        }),
-      ERROR_MESSAGE,
-    )
+      () => adapter.mediaLibraryReplaceEntityMedia({
+        host: {
+          uuid: e.host.uuid,
+          type,
+          fieldName: e.fieldName
+        },
+        mediaId: selected.value
+      }),
+      ERROR_MESSAGE
+    );
   }
-}
-
+};
 defineDropAreas((dragItems) => {
-  // Not supported by adapter.
   if (!adapter.mediaLibraryReplaceMedia) {
-    return
+    return;
   }
-
-  // Only a single item is supported.
   if (dragItems.length !== 1) {
-    return
+    return;
   }
-
-  const item = dragItems[0]
-
-  // Not a media library item.
-  if (item.itemType !== 'media_library') {
-    return
+  const item = dragItems[0];
+  if (item.itemType !== "media_library") {
+    return;
   }
-
-  // Generate a drop area for every matching droppable field.
-  return dom
-    .getAllDroppableFields()
-    .map<DropArea | undefined>((field: DroppableEntityField) => {
-      const config = types.getDroppableFieldConfig(field.fieldName, field.host)
-      // @TODO: This should be provided by the adapter on the item.
-      if (config.allowedEntityType !== 'media') {
-        return
-      }
-
-      if (!config.allowedBundles.includes(item.mediaBundle)) {
-        return
-      }
-      const isBlock = 'itemBundle' in field.host
-      const draggableHost: DraggableHostData = {
-        uuid: field.host.uuid,
-        type:
-          'itemBundle' in field.host
-            ? runtimeConfig.itemEntityType
-            : field.host.type,
-        fieldName: field.fieldName,
-      }
-      const label = $t('mediaLibraryReplaceMedia', 'Replace @field').replace(
-        '@field',
-        config.label,
-      )
-
-      if (adapter.mediaLibraryReplaceMedia && isBlock) {
-        return {
-          id: `replace-media:${field.host.uuid}:${field.fieldName}`,
-          label,
-          element: field.element,
-          icon: 'swap-horizontal',
-          onDrop: () => {
-            return state.mutateWithLoadingState(
-              () =>
-                adapter.mediaLibraryReplaceMedia!({
-                  host: draggableHost,
-                  mediaId: item.mediaId,
-                }),
-              ERROR_MESSAGE,
-            )
-          },
+  return dom.getAllDroppableFields().map((field) => {
+    const config = types.getDroppableFieldConfig(field.fieldName, field.host);
+    if (config.allowedEntityType !== "media") {
+      return;
+    }
+    if (!config.allowedBundles.includes(item.mediaBundle)) {
+      return;
+    }
+    const isBlock = "itemBundle" in field.host;
+    const draggableHost = {
+      uuid: field.host.uuid,
+      type: "itemBundle" in field.host ? runtimeConfig.itemEntityType : field.host.type,
+      fieldName: field.fieldName
+    };
+    const label = $t("mediaLibraryReplaceMedia", "Replace @field").replace(
+      "@field",
+      config.label
+    );
+    if (adapter.mediaLibraryReplaceMedia && isBlock) {
+      return {
+        id: `replace-media:${field.host.uuid}:${field.fieldName}`,
+        label,
+        element: field.element,
+        icon: "swap-horizontal",
+        onDrop: () => {
+          return state.mutateWithLoadingState(
+            () => adapter.mediaLibraryReplaceMedia({
+              host: draggableHost,
+              mediaId: item.mediaId
+            }),
+            ERROR_MESSAGE
+          );
         }
-      } else if (adapter.mediaLibraryReplaceEntityMedia && !isBlock) {
-        return {
-          id: `replace-entity-media:${field.host.uuid}:${field.fieldName}`,
-          label,
-          element: field.element,
-          icon: 'swap-horizontal',
-          onDrop: () => {
-            return state.mutateWithLoadingState(
-              () =>
-                adapter.mediaLibraryReplaceEntityMedia!({
-                  host: draggableHost,
-                  mediaId: item.mediaId,
-                }),
-              ERROR_MESSAGE,
-            )
-          },
+      };
+    } else if (adapter.mediaLibraryReplaceEntityMedia && !isBlock) {
+      return {
+        id: `replace-entity-media:${field.host.uuid}:${field.fieldName}`,
+        label,
+        element: field.element,
+        icon: "swap-horizontal",
+        onDrop: () => {
+          return state.mutateWithLoadingState(
+            () => adapter.mediaLibraryReplaceEntityMedia({
+              host: draggableHost,
+              mediaId: item.mediaId
+            }),
+            ERROR_MESSAGE
+          );
         }
-      }
-    })
-    .filter(falsy)
-})
+      };
+    }
+  }).filter(falsy);
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'MediaLibrary',
-}
+  name: "MediaLibrary"
+};
 </script>

package/dist/runtime/components/Edit/Features/MediaLibrary/index.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/Features/MediaLibrary/types.d.ts

@@ -1,4 +1,4 @@
-import type { BlokkliIcon } from '#blokkli/icons';
+import type { BlokkliIcon } from '#blokkli-build/icons';
 export type MediaLibraryFilterCheckbox = {
     label: string;
     type: 'checkbox';