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

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

@@ -67,7 +67,11 @@ export type ClipboardMapBundleEventVideo = {
     videoService: ReturnType<typeof getVideoId>['service'];
     videoId: string;
 };
-export type ClipboardMapBundleEvent = ClipboardMapBundleEventVideo | ClipboardMapBundleEventImage | ClipboardMapBundleEventFile | ClipboardMapBundleEventPlaintext;
+export type ClipboardMapBundleEventLink = {
+    type: 'link';
+    url: string;
+};
+export type ClipboardMapBundleEvent = ClipboardMapBundleEventVideo | ClipboardMapBundleEventImage | ClipboardMapBundleEventFile | ClipboardMapBundleEventPlaintext | ClipboardMapBundleEventLink;
 export interface DraggableClipboardItem {
     itemType: 'clipboard';
     element: () => HTMLElement;
@@ -75,12 +79,19 @@ export interface DraggableClipboardItem {
     additional?: string;
     clipboardId: string;
 }
+export interface DraggableNativeDropItem {
+    itemType: 'native_drop';
+    element: () => HTMLElement;
+    itemBundles: string[];
+    dataTransfer: DataTransfer | null;
+    clipboardItems?: BlokkliClipboardItem[];
+}
 declare module '#blokkli/editor/adapter' {
     interface BlokkliAdapter<T> {
         /**
          * Determine the block bundle for the given clipboard item.
          */
-        clipboardMapBundle?(e: ClipboardMapBundleEvent): string | undefined | null;
+        clipboardMapBundle?(e: ClipboardMapBundleEvent): string | string[] | undefined | null;
         /**
          * Add a clipboard item.
          */
@@ -94,6 +105,7 @@ declare module '#blokkli/editor/adapter' {
 declare module '#blokkli/editor/types/draggable' {
     interface DraggableItemTypes {
         clipboard: DraggableClipboardItem;
+        native_drop: DraggableNativeDropItem;
     }
 }
 export {};

package/dist/runtime/editor/features/debug/index.vue

@@ -14,7 +14,7 @@ const { logger } = defineBlokkliFeature({
 });
 const { debug, ui } = useBlokkli();
 onBlokkliEvent("keyPressed", (e) => {
-  if (ui.hasDialogOpen.value) {
+  if (ui.hasDialogOpen.value || ui.hasNestedEditorOpen.value) {
     return;
   }
   if (e.code === "=" && e.meta) {

package/dist/runtime/editor/features/dev-mode/index.vue

@@ -9,12 +9,55 @@
     key-code="I"
     weight="-99999"
   />
+  <Teleport :to="ui.mainLayoutElement.value">
+    <div v-if="fieldMappingValidations.length" class="bk bk-dev-mode">
+      <div class="bk-dev-mode-inner">
+        <Banner
+          id="dev-mode"
+          icon="bk_mdi_logo_dev"
+          text="Invalid definitions found!"
+          scheme="red"
+        >
+          <div class="bk-dev-mode-banner">
+            <h3>Some block components are invalid:</h3>
+            <table>
+              <thead>
+                <tr>
+                  <th>Bundle</th>
+                  <th>Error</th>
+                </tr>
+              </thead>
+
+              <tbody>
+                <tr
+                  v-for="(item, index) in fieldMappingValidations"
+                  :key="index"
+                >
+                  <td>{{ item.bundle }}</td>
+                  <td v-html="item.validation" />
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </Banner>
+      </div>
+    </div>
+  </Teleport>
 </template>
 
 <script setup>
-import { useBlokkli, defineBlokkliFeature, ref } from "#imports";
+import {
+  useBlokkli,
+  defineBlokkliFeature,
+  ref,
+  computed,
+  onMounted
+} from "#imports";
 import { PluginViewOption } from "#blokkli/editor/plugins";
+import { Banner } from "#blokkli/editor/components";
 import { addElementClasses } from "#blokkli/editor/composables";
+import { falsy } from "#blokkli/helpers";
+import { itemEntityType } from "#blokkli-build/config";
 defineBlokkliFeature({
   id: "dev-mode",
   label: "Dev Mode",
@@ -22,13 +65,54 @@ defineBlokkliFeature({
   description: "Feature enabled in development mode.",
   viewports: ["desktop"]
 });
-const { $t } = useBlokkli();
+const { $t, types, definitions, ui } = useBlokkli();
 const isEnabled = ref(false);
+const fieldMappingValidations = computed(() => {
+  return definitions.blockDefinitions.value.flatMap((definition) => {
+    if (definition.renderFor) {
+      return null;
+    }
+    const propsFieldMapping = definition.propsFieldMapping ?? {};
+    const bundle = definition.bundle;
+    const fields = new Set(
+      types.fieldConfig.forEntityTypeAndBundle(itemEntityType, bundle).map((field) => field.name)
+    );
+    const mappings = Object.entries(propsFieldMapping).map(([propName, mapping]) => {
+      if (mapping && mapping.type === "field") {
+        return {
+          propName,
+          fieldName: mapping.name
+        };
+      }
+      return null;
+    }).filter(falsy);
+    const invalidMappings = mappings.filter((mapping) => {
+      return !fields.has(mapping.fieldName);
+    }).map((mapping) => {
+      return {
+        bundle,
+        validation: `The props field mapping <code>'${mapping.propName}': '${mapping.fieldName}'</code> is invalid, because <strong>${bundle}</strong> has no field <strong>${mapping.fieldName}</strong>`
+      };
+    });
+    const missingMappings = [...fields.values()].filter((fieldName) => {
+      return !mappings.find((mapping) => mapping.fieldName === fieldName);
+    }).map((fieldName) => {
+      return {
+        bundle,
+        validation: `Missing props field mapping for field <strong>${fieldName}</strong>`
+      };
+    });
+    return [...invalidMappings, ...missingMappings];
+  }).filter(falsy);
+});
 addElementClasses(
   document.documentElement,
   "bk-hide-interaction-layers",
   isEnabled
 );
+onMounted(() => {
+  console.log(fieldMappingValidations.value);
+});
 </script>
 
 <script>

package/dist/runtime/editor/features/dragging-overlay/DragItems/index.vue

@@ -48,7 +48,7 @@ const props = defineProps({
   activeLabel: { type: String, required: false }
 });
 const MAX_WIDTH = 350;
-const MAX_HEIGHT = 150;
+const MAX_HEIGHT = 200;
 const labelEl = useTemplateRef("labelEl");
 const labelWidth = ref(0);
 const labelHeight = ref(0);
@@ -186,14 +186,23 @@ onMounted(() => {
   if (!boundRect) {
     return;
   }
+  const mouseInsideBound = isInsideRect(
+    props.startCoords.x,
+    props.startCoords.y,
+    boundRect.rect
+  );
   const bounds = getDraggingBounds(
     props.startCoords,
     boundRect.rect,
     MAX_WIDTH,
     MAX_HEIGHT
   );
-  const boundsX = props.isTouch ? 0 : bounds.x;
-  const boundsY = props.isTouch ? translateY.value : bounds.y;
+  let boundsX = props.isTouch ? 0 : bounds.x;
+  let boundsY = props.isTouch ? translateY.value : bounds.y;
+  if (!mouseInsideBound && !props.isTouch) {
+    boundsX = props.startCoords.x - bounds.width / 2;
+    boundsY = props.startCoords.y - bounds.height / 2;
+  }
   offsetX.value = props.startCoords.x - boundsX;
   offsetY.value = props.startCoords.y - boundsY;
   width.value = bounds.width;
@@ -245,14 +254,14 @@ onMounted(() => {
     const borderRadius = isTop ? theme.getDraggableStyle(item.element).radiusMin : 4;
     return {
       isTop,
-      from: ui.lowPerformanceMode.value ? to : from,
+      from: ui.lowPerformanceMode.value || !mouseInsideBound ? to : from,
       to,
       width: item.element.offsetWidth,
       height: item.element.offsetHeight,
       transformOrigin: `${originX}px ${originY}px`,
       markup,
       background: item.item.itemType === "existing" ? realBackgroundColor(item.element) : "",
-      prevVisibility: item.item.itemType === "existing" || item.item.itemType === "existing_structure" ? item.element.style.visibility : void 0,
+      prevVisibility: item.item.itemType === "existing" && !item.item.isCopy || item.item.itemType === "existing_structure" ? item.element.style.visibility : void 0,
       element: item.element,
       bundle,
       label,
@@ -261,6 +270,9 @@ onMounted(() => {
   }).filter(falsy);
   elRects.forEach((item) => {
     if (item.item.itemType === "existing" || item.item.itemType === "existing_structure") {
+      if (item.item.itemType === "existing" && item.item.isCopy) {
+        return;
+      }
       item.element.style.visibility = "hidden";
     }
   });

package/dist/runtime/editor/features/dragging-overlay/Renderer/index.vue

@@ -48,7 +48,7 @@ const {
   dom,
   ui,
   theme,
-  dropAreas,
+  dragdrop,
   eventBus,
   animation,
   state,
@@ -78,7 +78,7 @@ const cursorIsInsideClipped = () => isInsideRect(props.mouseX, props.mouseY, ui.
 );
 const active = ref(null);
 defineEmits(["drop"]);
-const areas = dropAreas.getDropAreas(props.items).reduce((acc, v) => {
+const areas = dragdrop.getDropAreas(props.items).reduce((acc, v) => {
   acc[v.id] = v;
   return acc;
 }, {});

package/dist/runtime/editor/features/dragging-overlay/index.vue

@@ -50,7 +50,8 @@ import {
 } from "#imports";
 import { renderCycle } from "#blokkli/editor/helpers/vue";
 import { BundleSelector, BlokkliTransition } from "#blokkli/editor/components";
-import { onBlokkliEvent } from "#blokkli/editor/composables";
+import { onBlokkliEvent, defineDropHandler } from "#blokkli/editor/composables";
+import { MOUSE_BUTTON } from "#blokkli/editor/helpers/dom";
 const { adapter } = defineBlokkliFeature({
   icon: "bk_mdi_drag_pan",
   id: "dragging-overlay",
@@ -69,37 +70,33 @@ const {
   blocks,
   directive,
   fields,
-  $t
+  $t,
+  dragdrop
 } = useBlokkli();
 const bundleSelectorData = ref(null);
+let bundleSelectorResolve = null;
+function showBundleSelector(bundles) {
+  return new Promise((resolve) => {
+    bundleSelectorResolve = resolve;
+    bundleSelectorData.value = {
+      bundles,
+      anchorCoordinates: getAnchorCoordinates()
+    };
+  });
+}
 function onCloseBundleSelector() {
   bundleSelectorData.value = null;
-}
-async function onSelectBundle(bundle) {
-  const data = bundleSelectorData.value;
-  if (!data) {
-    return;
+  if (bundleSelectorResolve) {
+    bundleSelectorResolve(null);
+    bundleSelectorResolve = null;
   }
-  const item = data.item;
-  if (Array.isArray(item)) {
-    await onDropMediaLibraryItem(
-      data.field,
-      item,
-      data.host,
-      data.afterUuid,
-      bundle
-    );
-  } else {
-    await state.mutateWithLoadingState(
-      () => adapter.addContentSearchItem({
-        item: item.searchItem,
-        host: data.host,
-        bundle,
-        afterUuid: data.afterUuid
-      })
-    );
+}
+function onSelectBundle(bundle) {
+  bundleSelectorData.value = null;
+  if (bundleSelectorResolve) {
+    bundleSelectorResolve(bundle);
+    bundleSelectorResolve = null;
   }
-  onCloseBundleSelector();
 }
 const dragItemsComponent = useTemplateRef("dragItemsComponent");
 const isVisible = ref(false);
@@ -117,209 +114,90 @@ const box = ref({
   height: 10
 });
 const dragItems = ref([]);
-function isSameItemType(items) {
-  return items.every((item) => item.itemType === items[0].itemType);
-}
-function filterItemType(items) {
-  if (!items.length) {
-    throw new Error("Items array is empty");
-  }
-  if (!isSameItemType(items)) {
-    throw new Error("Items of different types");
-  }
-  const itemType = items[0].itemType;
-  if (itemType === "existing" || itemType === "existing_structure" || itemType === "media_library") {
-    return { itemType, items };
-  }
-  if (items.length > 1) {
-    throw new Error(`Only a single item of type '${itemType}' is allowed.`);
-  }
-  return { itemType, item: items[0] };
-}
-const onDropNew = async (bundle, host, afterUuid) => {
-  const field = fields.find(host.uuid, host.fieldName);
-  if (!field) {
-    throw new Error(
-      `Failed to locate field with name "${host.fieldName}" on UUID "${host.uuid}"`
-    );
-  }
-  const definition = definitions.getBlockDefinition(
-    bundle,
-    field.fieldListType,
-    field.hostEntityBundle
-  );
-  const addBehaviour = definition?.editor?.addBehaviour || "form";
-  if (definition?.editor?.disableEdit || addBehaviour === "no-form" || addBehaviour.startsWith("editable:") || !adapter.formFrameBuilder) {
-    await state.mutateWithLoadingState(
-      () => adapter.addNewBlock({
-        bundle,
-        host,
-        afterUuid
-      })
-    );
-  } else {
-    eventBus.emit("add:block:new", {
-      bundle,
-      host,
-      afterUuid
-    });
-  }
-};
-const onDropExisting = async (items, host, afterUuid) => {
-  const uuids = items.map((v) => v.block.uuid);
-  await state.mutateWithLoadingState(
-    () => adapter.moveMultipleBlocks({
-      uuids,
-      afterUuid,
-      host
-    })
-  );
-  if (uuids.length >= 1 && uuids.length <= 10) {
-    for (let i = 0; i < uuids.length; i++) {
-      dom.refreshBlockRect(uuids[i]);
-    }
-  }
-  if (ui.isMobile.value && uuids.length) {
-    eventBus.emit("scrollIntoView", {
-      uuid: uuids[0],
-      center: true
-    });
-  }
-};
-const onDropReusable = async (item, host, afterUuid) => {
-  if (adapter.addLibraryItem) {
-    await state.mutateWithLoadingState(
-      () => adapter.addLibraryItem({
-        libraryItemUuid: item.libraryItemUuid,
-        host,
-        afterUuid
-      })
-    );
-  }
-};
-const onDropClipboardItem = async (item, host, afterUuid) => {
-  eventBus.emit("drop:clipboardItem", {
-    id: item.clipboardId,
-    host,
-    blockBundle: item.itemBundle,
-    afterUuid
-  });
-};
-const onDropMediaLibraryItem = async (field, items, host, afterUuid, bundle) => {
-  const allSameBundles = [...new Set(items.map((v) => v.mediaBundle)).values()].length === 1;
-  if (!allSameBundles) {
-    throw new Error(
-      "Multi select of media library items of different bundles is not supported."
-    );
-  }
-  let targetBundle = bundle;
-  if (targetBundle === null) {
-    const item = items[0];
-    const allowedBundles = field.allowedBundles;
-    const possibleBundles = allowedBundles.filter(
-      (bundle2) => item.itemBundles.includes(bundle2)
-    );
-    if (possibleBundles.length === 0) {
-      throw new Error("This search item can not be placed here.");
-    } else if (possibleBundles.length === 1) {
-      targetBundle = possibleBundles[0];
-    } else {
-      bundleSelectorData.value = {
-        bundles: possibleBundles,
-        anchorCoordinates: getAnchorCoordinates(),
-        item: items,
-        host,
-        afterUuid,
-        field
-      };
-      return;
-    }
-  }
-  if (adapter.mediaLibraryAddBlock && items.length === 1) {
-    await state.mutateWithLoadingState(
-      () => adapter.mediaLibraryAddBlock({
-        preceedingUuid: afterUuid,
-        host,
-        item: items[0],
-        targetBundle
-      })
-    );
-  } else if (adapter.mediaLibraryAddBlocks && items.length > 1) {
-    await state.mutateWithLoadingState(
-      () => adapter.mediaLibraryAddBlocks({
-        preceedingUuid: afterUuid,
-        host,
-        items,
-        targetBundle
-      })
-    );
-  }
-};
 function getAnchorCoordinates() {
   return ui.toArtboardCoords({
     x: mouseX.value,
     y: mouseY.value
   });
 }
-const onDropSearchContentItem = async (field, item, host, afterUuid) => {
-  if (!adapter.addContentSearchItem) {
-    throw new Error('Adapter does not implement "addContentSearchItem".');
-  }
-  const allowedBundles = field.allowedBundles;
-  const possibleBundles = allowedBundles.filter(
-    (bundle) => item.itemBundles.includes(bundle)
-  );
-  if (possibleBundles.length === 0) {
-    throw new Error("This search item can not be placed here.");
-  } else if (possibleBundles.length === 1) {
-    await state.mutateWithLoadingState(
-      () => adapter.addContentSearchItem({
-        item: item.searchItem,
-        host,
-        bundle: possibleBundles[0],
-        afterUuid
-      })
-    );
-  } else {
-    bundleSelectorData.value = {
-      bundles: possibleBundles,
-      anchorCoordinates: getAnchorCoordinates(),
-      field,
-      item,
-      host,
-      afterUuid
-    };
+defineDropHandler("existing", {
+  async execute({ items, host, afterUuid }) {
+    const uuids = items.map((v) => v.block.uuid);
+    const isCopy = items.some((v) => v.isCopy);
+    if (isCopy && adapter.pasteExistingBlocks) {
+      await state.mutateWithLoadingState(
+        () => adapter.pasteExistingBlocks({
+          uuids,
+          host: {
+            type: host.type,
+            uuid: host.uuid,
+            fieldName: host.fieldName
+          },
+          preceedingUuid: afterUuid
+        })
+      );
+    } else {
+      await state.mutateWithLoadingState(
+        () => adapter.moveMultipleBlocks({
+          uuids,
+          afterUuid,
+          host
+        })
+      );
+    }
+    if (uuids.length >= 1 && uuids.length <= 10) {
+      for (let i = 0; i < uuids.length; i++) {
+        dom.refreshBlockRect(uuids[i]);
+      }
+    }
+    if (ui.isMobile.value && uuids.length) {
+      eventBus.emit("scrollIntoView", {
+        uuid: uuids[0],
+        center: true
+      });
+    }
   }
-};
-const onDropAction = (action, host, field, afterUuid) => {
-  action.action.callback({
-    preceedingUuid: afterUuid,
-    host,
-    field
-  });
-};
+});
 let allUuidsBefore = [];
+let lastDropResult = null;
 const onDrop = async (e) => {
   allUuidsBefore = state.getAllUuids();
   await nextTick(async () => {
-    const afterUuid = e.preceedingUuid ?? null;
-    const host = e.host;
-    const typed = filterItemType(e.items);
-    if (typed.itemType === "existing" || typed.itemType === "existing_structure") {
-      await onDropExisting(typed.items, host, afterUuid);
-    } else if (typed.itemType === "new") {
-      await onDropNew(typed.item.itemBundle, host, afterUuid);
-    } else if (typed.itemType === "reusable") {
-      await onDropReusable(typed.item, host, afterUuid);
-    } else if (typed.itemType === "clipboard") {
-      await onDropClipboardItem(typed.item, host, afterUuid);
-    } else if (typed.itemType === "search_content") {
-      await onDropSearchContentItem(e.field, typed.item, host, afterUuid);
-    } else if (typed.itemType === "action") {
-      onDropAction(typed.item, host, e.field, afterUuid);
-    } else if (typed.itemType === "media_library") {
-      await onDropMediaLibraryItem(e.field, typed.items, host, afterUuid, null);
+    const itemType = e.items[0]?.itemType;
+    if (!itemType) {
+      return;
+    }
+    const handler = dragdrop.getDropHandler(itemType);
+    if (!handler) {
+      return;
+    }
+    const baseCtx = {
+      items: e.items,
+      field: e.field,
+      host: e.host,
+      afterUuid: e.preceedingUuid ?? null
+    };
+    let result;
+    if (handler.resolveBundles) {
+      const bundles = await handler.resolveBundles(baseCtx);
+      if (bundles.length === 0) {
+        return;
+      }
+      let bundle;
+      if (bundles.length === 1) {
+        bundle = bundles[0];
+      } else {
+        const selected = await showBundleSelector(bundles);
+        if (!selected) {
+          return;
+        }
+        bundle = selected;
+      }
+      result = await handler.execute({ ...baseCtx, bundle }) || void 0;
+    } else {
+      result = await handler.execute({ ...baseCtx, bundle: "" }) || void 0;
     }
+    lastDropResult = result ?? null;
     eventBus.emit("dragging:end");
     eventBus.emit("item:dropped");
   });
@@ -332,7 +210,9 @@ onBlokkliEvent("state:reloaded", async function() {
   }
   const allUuidsAfter = state.getAllUuids();
   const newUuid = allUuidsAfter.find((uuid) => !allUuidsBefore.includes(uuid));
+  const dropResult = lastDropResult;
   allUuidsBefore = [];
+  lastDropResult = null;
   if (!newUuid) {
     return;
   }
@@ -344,6 +224,9 @@ onBlokkliEvent("state:reloaded", async function() {
   }
   const allSelected = [...selection.uuids.value, newBlock.uuid];
   eventBus.emit("select", allSelected);
+  if (!dropResult?.focusEditable) {
+    return;
+  }
   const definition = definitions.getBlockDefinition(
     newBlock.bundle,
     newBlock.fieldListType
@@ -364,6 +247,10 @@ onBlokkliEvent("state:reloaded", async function() {
     uuid: newUuid
   });
 });
+onBlokkliEvent("dragging:move", (e) => {
+  mouseX.value = e.x;
+  mouseY.value = e.y;
+});
 onBlokkliEvent("dragging:drop", onDrop);
 function loop() {
   if (!isVisible.value) {
@@ -375,6 +262,9 @@ function loop() {
   box.value = dragItemsComponent.value.getRect();
 }
 const onMouseUp = (e) => {
+  if (e.button === MOUSE_BUTTON.AUXILIARY) {
+    return;
+  }
   e.preventDefault();
   e.stopPropagation();
   if (!ui.isMobile.value) {
@@ -422,9 +312,25 @@ onBlokkliEvent("keyPressed", (e) => {
     eventBus.emit("dragging:end");
   }
 });
-onBlokkliEvent("block:append", (e) => {
+onBlokkliEvent("block:append", async (e) => {
   allUuidsBefore = state.getAllUuids();
-  onDropNew(e.bundle, e.host, e.afterUuid);
+  const handler = dragdrop.getDropHandler("new");
+  if (handler) {
+    const result = await handler.execute({
+      items: [
+        {
+          itemType: "new",
+          itemBundle: e.bundle,
+          element: () => document.createElement("div")
+        }
+      ],
+      field: fields.find(e.host.uuid, e.host.fieldName),
+      host: e.host,
+      afterUuid: e.afterUuid,
+      bundle: e.bundle
+    });
+    lastDropResult = result ?? null;
+  }
 });
 onUnmounted(() => {
   document.removeEventListener("pointerup", onMouseUp);