@blokkli/editor 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/runtime/helpers/dropTargets/index.d.ts

@@ -0,0 +1,6 @@
+import type { BlokkliFieldElement } from '#blokkli/types';
+export type Orientation = 'horizontal' | 'vertical';
+export declare const MIN_GAP = 20;
+export declare function getGapSize(orientation: Orientation, element: HTMLElement): number;
+export declare function getChildrenOrientation(element: HTMLElement): Orientation;
+export declare function determineCanAddChildren(field: BlokkliFieldElement, children: HTMLElement[], uuids: string[], currentCount: number, itemsToAdd: number, draggingBundles?: string[]): boolean;

package/dist/runtime/helpers/dropTargets/index.js

@@ -0,0 +1,49 @@
+export const MIN_GAP = 20;
+export function getGapSize(orientation, element) {
+  const computedStyle = window.getComputedStyle(element);
+  if (computedStyle.display.includes("grid") || computedStyle.display.includes("flex")) {
+    const gap = orientation === "vertical" ? computedStyle.columnGap || computedStyle.gridColumnGap : computedStyle.rowGap || computedStyle.gridRowGap;
+    if (gap) {
+      const gapParts = gap.split(" ");
+      const gapValue = gapParts[0];
+      if (gapValue?.endsWith("px")) {
+        return Number.parseFloat(gapValue);
+      }
+    }
+  }
+  return MIN_GAP;
+}
+export function getChildrenOrientation(element) {
+  const computedStyle = window.getComputedStyle(element);
+  if (computedStyle.display.includes("flex")) {
+    if (computedStyle.flexDirection === "row" || computedStyle.flexDirection === "row-reverse") {
+      return "horizontal";
+    } else {
+      return "vertical";
+    }
+  }
+  if (computedStyle.display.includes("grid")) {
+    if (computedStyle.gridTemplateColumns.split(" ").length > 1) {
+      return "horizontal";
+    } else {
+      return "vertical";
+    }
+  }
+  return "vertical";
+}
+export function determineCanAddChildren(field, children, uuids, currentCount, itemsToAdd, draggingBundles) {
+  if (field.cardinality !== -1) {
+    const childrenThatAreSelection = children.filter((child) => {
+      const uuid = child.dataset.uuid;
+      if (!uuid) {
+        return false;
+      }
+      return uuids.includes(uuid);
+    }).length;
+    const countAfter = currentCount - childrenThatAreSelection + itemsToAdd;
+    if (countAfter > field.cardinality) {
+      return false;
+    }
+  }
+  return !draggingBundles?.length || draggingBundles.every((bundle) => field.allowedBundles.includes(bundle));
+}

package/dist/runtime/helpers/eventBus.d.ts

@@ -1,3 +1,3 @@
 import type { EventbusEvents } from '#blokkli/types';
 export declare const eventBus: import("mitt").Emitter<EventbusEvents>;
-export declare const emitMessage: (message: string, type?: "success" | "error", additional?: string | Error | unknown) => void;
+export declare const emitMessage: (message: string, type?: "success" | "error", additional?: string | Error | unknown, replace?: boolean) => void;

package/dist/runtime/helpers/eventBus.js

@@ -1,5 +1,5 @@
 import mitt from "mitt";
 export const eventBus = mitt();
-export const emitMessage = (message, type = "success", additional) => {
-  eventBus.emit("message", { type, message, additional });
+export const emitMessage = (message, type = "success", additional, replace) => {
+  eventBus.emit("message", { type, message, additional, replace });
 };

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

@@ -1,4 +1,4 @@
-import type { DraggableItem, Rectangle, DroppableEntityField, DraggableExistingBlock, EntityContext, Coord, LibraryItemProps } from '#blokkli/types';
+import type { DraggableItem, Rectangle, Coord, LibraryItemProps, Size } from '#blokkli/types';
 import type { RGB } from '#blokkli/types/theme';
 /**
  * Type check for falsy values.
@@ -11,7 +11,6 @@ export declare function falsy<T>(value: T): value is NonNullable<T>;
  * Maps a HTML element that is draggable to a draggable item data object.
  */
 export declare function buildDraggableItem(element: Element | EventTarget): DraggableItem | undefined;
-export declare function findElement(uuid: string): HTMLElement | undefined;
 export declare function onlyUnique(value: string, index: number, self: Array<string>): boolean;
 /**
  * Convert a date to a relative time string, such as
@@ -39,6 +38,15 @@ export declare function distanceToRectangle(x: number, y: number, rect: Rectangl
  * Return the distance from the given coordinates to the center of the rectangle.
  */
 export declare function distanceToClosestRectangleEdge(x: number, y: number, rect: Rectangle): number;
+/**
+ * Subtracts a rectangle from a viewport and returns the remaining area as rectangles.
+ * The viewport is assumed to have x=0 and y=0.
+ *
+ * @param viewport - The size of the viewport to subtract from
+ * @param rect - The rectangle to subtract
+ * @returns An array of 0 to 4 rectangles representing the area outside of rect
+ */
+export declare function subtractRectFromViewport(viewport: Size, rect: Rectangle): Rectangle[];
 export declare function getDistance(a: Coord, b: Coord): number;
 export declare const parseColorString: (color: string) => RGB | undefined;
 /**
@@ -68,18 +76,6 @@ export declare function findIdealRectPosition(blockingRects: Rectangle[], rectTo
     x: number;
     y: number;
 };
-export declare const findClosestBlock: (el: Element | EventTarget) => DraggableExistingBlock | undefined;
-/**
- * Find the closest entity context from a BlokkliProvider.
- */
-export declare const findClosestEntityContext: (el: HTMLElement) => EntityContext | undefined;
-export declare const findParentContext: (el: HTMLElement) => EntityContext | DraggableExistingBlock | undefined;
-/**
- * Maps a HTMLElement to a DroppableEntityField.
- */
-export declare const mapDroppableField: (el: Element) => DroppableEntityField;
-export declare const originatesFromEditable: (e: MouseEvent | TouchEvent) => HTMLElement | undefined;
-export declare const getOriginatingDroppableElement: (e: MouseEvent | TouchEvent) => HTMLElement | undefined;
 export declare const originatesFromTextInput: (e: Event) => boolean;
 export declare function getFieldKey(uuid: string, fieldName: string): string;
 export declare function getInteractionCoordinates(e: MouseEvent | TouchEvent): Coord;

package/dist/runtime/helpers/index.js

@@ -1,5 +1,4 @@
 import { easeOutSine } from "./easing.js";
-import { useRuntimeConfig } from "#imports";
 export function falsy(value) {
   return value !== null && value !== void 0;
 }
@@ -7,44 +6,8 @@ export function buildDraggableItem(element) {
   if (!(element instanceof HTMLElement)) {
     return;
   }
-  const itemEntityType = useRuntimeConfig().public.blokkli.itemEntityType;
   const dataset = element.dataset;
-  if (dataset.elementType === "existing") {
-    const uuid = dataset.uuid;
-    const itemBundle = dataset.itemBundle;
-    const entityType = dataset.entityType;
-    const hostType = dataset.hostType;
-    const hostUuid = dataset.hostUuid;
-    const hostBundle = dataset.hostBundle;
-    const hostFieldName = dataset.hostFieldName;
-    const reusableBundle = dataset.reusableBundle;
-    const hostFieldListType = dataset.hostFieldListType;
-    const libraryItemUuid = dataset.bkLibraryItemUuid;
-    const isNew = dataset.isNew === "true";
-    const parentBlockBundle = hostType === itemEntityType ? hostBundle : void 0;
-    if (uuid && hostType && hostUuid && hostFieldName && itemBundle && hostBundle && entityType && hostFieldListType) {
-      const libraryLabel = dataset.bkLibraryLabel;
-      const editTitle = libraryLabel || "";
-      return {
-        itemType: "existing",
-        element: () => document.querySelector(`[data-uuid="${uuid}"]`),
-        itemBundle,
-        entityType,
-        isNested: hostType === itemEntityType,
-        uuid,
-        hostType,
-        hostBundle,
-        hostUuid,
-        hostFieldName,
-        hostFieldListType,
-        reusableBundle,
-        libraryItemUuid,
-        editTitle: editTitle || void 0,
-        isNew,
-        parentBlockBundle
-      };
-    }
-  } else if (dataset.elementType === "new") {
+  if (dataset.elementType === "new") {
     const itemBundle = dataset.itemBundle;
     if (itemBundle) {
       return {
@@ -111,14 +74,6 @@ export function buildDraggableItem(element) {
     }
   }
 }
-export function findElement(uuid) {
-  const el = document.querySelector(
-    `[data-uuid="${uuid}"]:not(.bk-sortli-leave-from)`
-  );
-  if (el instanceof HTMLElement) {
-    return el;
-  }
-}
 export function onlyUnique(value, index, self) {
   return self.indexOf(value) === index;
 }
@@ -234,6 +189,63 @@ export function distanceToClosestRectangleEdge(x, y, rect) {
   const dy = Math.max(minY - y, 0, y - maxY);
   return Math.sqrt(dx * dx + dy * dy);
 }
+export function subtractRectFromViewport(viewport, rect) {
+  const viewportLeft = 0;
+  const viewportTop = 0;
+  const viewportRight = viewport.width;
+  const viewportBottom = viewport.height;
+  const intersectLeft = Math.max(viewportLeft, rect.x);
+  const intersectTop = Math.max(viewportTop, rect.y);
+  const intersectRight = Math.min(viewportRight, rect.x + rect.width);
+  const intersectBottom = Math.min(viewportBottom, rect.y + rect.height);
+  if (intersectLeft >= intersectRight || intersectTop >= intersectBottom) {
+    return [
+      {
+        x: 0,
+        y: 0,
+        width: viewport.width,
+        height: viewport.height
+      }
+    ];
+  }
+  if (intersectLeft <= viewportLeft && intersectTop <= viewportTop && intersectRight >= viewportRight && intersectBottom >= viewportBottom) {
+    return [];
+  }
+  const result = [];
+  if (intersectTop > viewportTop) {
+    result.push({
+      x: viewportLeft,
+      y: viewportTop,
+      width: viewport.width,
+      height: intersectTop - viewportTop
+    });
+  }
+  if (intersectBottom < viewportBottom) {
+    result.push({
+      x: viewportLeft,
+      y: intersectBottom,
+      width: viewport.width,
+      height: viewportBottom - intersectBottom
+    });
+  }
+  if (intersectLeft > viewportLeft) {
+    result.push({
+      x: viewportLeft,
+      y: intersectTop,
+      width: intersectLeft - viewportLeft,
+      height: intersectBottom - intersectTop
+    });
+  }
+  if (intersectRight < viewportRight) {
+    result.push({
+      x: intersectRight,
+      y: intersectTop,
+      width: viewportRight - intersectRight,
+      height: intersectBottom - intersectTop
+    });
+  }
+  return result;
+}
 export function getDistance(a, b) {
   const dx = a.x - b.x;
   const dy = a.y - b.y;
@@ -349,81 +361,6 @@ export function findIdealRectPosition(blockingRects, rectToPlace, viewport, maxO
     )
   };
 }
-export const findClosestBlock = (el) => {
-  if (!(el instanceof Element)) {
-    return;
-  }
-  const closest = el.closest('[data-element-type="existing"]');
-  if (!closest) {
-    return;
-  }
-  const item = buildDraggableItem(closest);
-  if (item?.itemType !== "existing") {
-    return;
-  }
-  return item;
-};
-export const findClosestEntityContext = (el) => {
-  const provider = el.closest('[data-blokkli-provider-active="true"]');
-  if (!(provider instanceof HTMLElement)) {
-    return;
-  }
-  const uuid = provider.dataset.providerUuid;
-  const type = provider.dataset.providerEntityType;
-  const bundle = provider.dataset.providerEntityBundle;
-  if (uuid && type && bundle) {
-    return {
-      uuid,
-      type,
-      bundle
-    };
-  }
-};
-export const findParentContext = (el) => {
-  const block = findClosestBlock(el);
-  if (block) {
-    return block;
-  }
-  return findClosestEntityContext(el);
-};
-export const mapDroppableField = (el) => {
-  if (!(el instanceof HTMLElement)) {
-    throw new TypeError(
-      `v-blokkli-droppable directive is only allowed on elements of type HTMLElement.`
-    );
-  }
-  const fieldName = el.dataset.blokkliDroppableField;
-  if (!fieldName) {
-    throw new Error(`Missing field name in v-blokkli-droppable directive.`);
-  }
-  const host = findParentContext(el);
-  if (!host) {
-    throw new Error(
-      `Failed to locate parent context for v-blokkli-droppable field with name "${fieldName}". Make sure the element is always rendered inside a block component or inside a <BlokkliProvider>.`
-    );
-  }
-  return {
-    element: el,
-    host,
-    fieldName
-  };
-};
-export const originatesFromEditable = (e) => {
-  if (e.target instanceof HTMLElement) {
-    const el = e.target.closest("[data-blokkli-editable-field]");
-    if (el instanceof HTMLElement) {
-      return el;
-    }
-  }
-};
-export const getOriginatingDroppableElement = (e) => {
-  if (e.target instanceof HTMLElement) {
-    const el = e.target.closest("[data-blokkli-droppable-field]");
-    if (el instanceof HTMLElement) {
-      return el;
-    }
-  }
-};
 export const originatesFromTextInput = (e) => e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement;
 export function getFieldKey(uuid, fieldName) {
   return uuid + ":" + fieldName;

package/dist/runtime/helpers/indicatorsProvider.d.ts

@@ -0,0 +1,10 @@
+import { type Ref } from 'vue';
+import type { BlockIndicator } from '../types/index.js';
+export type IndicatorsProvider = {
+    indicators: Ref<BlockIndicator[]>;
+    hovered: Ref<string>;
+    addIndicator: (indicator: BlockIndicator) => void;
+    removeIndicator: (id: string, uuid: string) => void;
+    setHovered: (uuid?: string | null) => void;
+};
+export default function (): IndicatorsProvider;

package/dist/runtime/helpers/indicatorsProvider.js

@@ -0,0 +1,23 @@
+import { ref } from "vue";
+export default function() {
+  const indicators = ref([]);
+  const hovered = ref("");
+  function addIndicator(indicator) {
+    indicators.value.push(indicator);
+  }
+  function removeIndicator(id, uuid) {
+    indicators.value = indicators.value.filter(
+      (v) => v.id !== id || v.uuid !== uuid
+    );
+  }
+  function setHovered(uuid) {
+    hovered.value = uuid ?? "";
+  }
+  return {
+    indicators,
+    hovered,
+    addIndicator,
+    removeIndicator,
+    setHovered
+  };
+}

package/dist/runtime/helpers/keyboardProvider.d.ts

@@ -13,6 +13,8 @@ export type KeyboardProvider = {
     shortcuts: ComputedRef<RegisteredShortcut[]>;
     registerShortcut: (shortcut: KeyboardShortcut) => void;
     unregisterShortcut: (shortcut: KeyboardShortcut) => void;
+    lockKeyboardEvents: (id: string) => void;
+    unlockKeyboardEvents: (id: string) => void;
 };
 export default function (animationProvider: AnimationProvider): KeyboardProvider;
 export {};

package/dist/runtime/helpers/keyboardProvider.js

@@ -18,6 +18,8 @@ export default function(animationProvider) {
   const isPressingSpace = ref(false);
   const isPressingShift = ref(false);
   const registeredShortcuts = ref([]);
+  const keyboardLocks = ref([]);
+  const keyboardLocked = computed(() => !!keyboardLocks.value.length);
   const onKeyUp = (e) => {
     isPressingControl.value = e.getModifierState("Control") || e.getModifierState("Meta");
     isPressingShift.value = e.getModifierState("Shift");
@@ -29,6 +31,9 @@ export default function(animationProvider) {
     }
   };
   const onKeyDown = (e) => {
+    if (keyboardLocked.value) {
+      return;
+    }
     isPressingControl.value = getControlState(e);
     isPressingShift.value = e.getModifierState("Shift");
     if (!isPressingSpace.value) {
@@ -78,6 +83,15 @@ export default function(animationProvider) {
     isPressingControl.value = getControlState(e);
     isPressingShift.value = !!e.shiftKey;
   }
+  function lockKeyboardEvents(id) {
+    if (keyboardLocks.value.includes(id)) {
+      return;
+    }
+    keyboardLocks.value.push(id);
+  }
+  function unlockKeyboardEvents(id) {
+    keyboardLocks.value = keyboardLocks.value.filter((v) => v !== id);
+  }
   return {
     isPressingSpace: readonly(isPressingSpace),
     isPressingControl: readonly(isPressingControl),
@@ -85,6 +99,8 @@ export default function(animationProvider) {
     shortcuts,
     registerShortcut,
     unregisterShortcut,
-    setShortcutStateFromEvent
+    setShortcutStateFromEvent,
+    lockKeyboardEvents,
+    unlockKeyboardEvents
   };
 }

package/dist/runtime/helpers/pluginProvider.d.ts

@@ -0,0 +1,10 @@
+import type { AddAction } from '#blokkli/types';
+type PluginAddFunction<T> = () => T | T[] | undefined;
+type AddActionFunction = PluginAddFunction<AddAction>;
+export type PluginProvider = {
+    addAddAction: (fn: AddActionFunction) => void;
+    removeAddAction: (fn: AddActionFunction) => void;
+    getAddActions: () => AddAction[];
+};
+export default function (): PluginProvider;
+export {};

package/dist/runtime/helpers/pluginProvider.js

@@ -0,0 +1,33 @@
+export default function() {
+  let addActions = [];
+  function addAddAction(fn) {
+    addActions.push(fn);
+  }
+  function removeAddAction(fn) {
+    addActions = addActions.filter((v) => v !== fn);
+  }
+  function getAddActions() {
+    const actions = [];
+    for (let i = 0; i < addActions.length; i++) {
+      const callback = addActions[i];
+      if (!callback) {
+        continue;
+      }
+      const result = callback();
+      if (!result) {
+        continue;
+      }
+      if (Array.isArray(result)) {
+        actions.push(...result);
+      } else {
+        actions.push(result);
+      }
+    }
+    return actions;
+  }
+  return {
+    addAddAction,
+    removeAddAction,
+    getAddActions
+  };
+}

package/dist/runtime/helpers/providers/blocks.d.ts

@@ -0,0 +1,10 @@
+import type { RenderedFieldListItem } from '#blokkli/types';
+import type { DomProvider } from '../domProvider.js';
+import type { StateProvider } from '../stateProvider.js';
+import type { AdapterContext } from '#blokkli/adapter';
+import type { ComputedRef } from 'vue';
+export type BlocksProvider = {
+    getBlock: (uuid: string) => RenderedFieldListItem | undefined;
+    getAllBlocks: () => RenderedFieldListItem[];
+};
+export default function (state: StateProvider, dom: DomProvider, context: ComputedRef<AdapterContext>): BlocksProvider;

package/dist/runtime/helpers/providers/blocks.js

@@ -0,0 +1,91 @@
+import { itemEntityType } from "#blokkli-build/config";
+import onBlokkliEvent from "../composables/onBlokkliEvent.js";
+export default function(state, dom, context) {
+  const renderedFieldListItemCache = /* @__PURE__ */ new Map();
+  function getParentBlockBundle(field) {
+    if (field.entityType !== itemEntityType) {
+      return null;
+    }
+    const block = state.getFieldListItem(field.entityUuid);
+    if (!block) {
+      return null;
+    }
+    return block.bundle;
+  }
+  function getLibraryData(item) {
+    if (item.bundle === "from_library" && item.props.libraryItem) {
+      const uuid = item.props.libraryItem.uuid;
+      const bundle = item.props.libraryItem.block?.bundle;
+      if (uuid && bundle) {
+        return {
+          label: item.props.libraryItem.label ?? "",
+          libraryItemUuid: uuid,
+          reusableBundle: bundle
+        };
+      }
+    }
+    return null;
+  }
+  function getBlock(uuid) {
+    const cached = renderedFieldListItemCache.get(uuid);
+    if (cached) {
+      return cached;
+    }
+    const item = state.getFieldListItem(uuid);
+    if (!item) {
+      return;
+    }
+    if (!item.editContext) {
+      throw new Error("Missing editContext on block with UUID: " + item.uuid);
+    }
+    const fieldList = state.getFieldListForBlock(item.uuid);
+    if (!fieldList) {
+      return;
+    }
+    const field = dom.getRegisteredField(fieldList.entityUuid, fieldList.name);
+    const parentBlockBundle = getParentBlockBundle(fieldList);
+    const renderedItem = {
+      uuid: item.uuid,
+      bundle: item.bundle,
+      isNew: item.editContext.isNew,
+      isPublished: item.editContext.isPublished,
+      publishOn: item.editContext.publishOn,
+      unpublishOn: item.editContext.unpublishOn,
+      isNested: fieldList.entityType === itemEntityType,
+      fieldListType: field?.fieldListType ?? "default",
+      library: getLibraryData(item),
+      parentBlockBundle,
+      host: {
+        type: fieldList.entityType,
+        uuid: fieldList.entityUuid,
+        fieldName: fieldList.name,
+        bundle: parentBlockBundle ?? context.value.entityBundle
+      }
+    };
+    renderedFieldListItemCache.set(item.uuid, renderedItem);
+    return renderedItem;
+  }
+  function getAllBlocks() {
+    const blocks = [];
+    const uuids = state.getAllUuids();
+    for (let i = 0; i < uuids.length; i++) {
+      const uuid = uuids[i];
+      if (!uuid) {
+        continue;
+      }
+      const block = getBlock(uuid);
+      if (!block) {
+        continue;
+      }
+      blocks.push(block);
+    }
+    return blocks;
+  }
+  onBlokkliEvent("state:reloaded", () => {
+    renderedFieldListItemCache.clear();
+  });
+  return {
+    getBlock,
+    getAllBlocks
+  };
+}

package/dist/runtime/helpers/providers/directive.d.ts

@@ -0,0 +1,25 @@
+import type { BlokkliDirectiveType, EntityContext, Rectangle } from '#blokkli/types';
+import type { UiProvider } from './../uiProvider.js';
+import { type ComputedRef } from '#imports';
+import type { DebugProvider } from '../debugProvider.js';
+type EditableFieldData = EntityContext & {
+    key: string;
+    fieldName: string;
+    directiveType: BlokkliDirectiveType;
+};
+type DroppableFieldElementData = EditableFieldData & {
+    element: HTMLElement;
+};
+export type DirectiveProvider = {
+    init: () => void;
+    registerDirectiveElement: (el: HTMLElement, fieldName: string, entity: EntityContext, type: BlokkliDirectiveType) => void;
+    unregisterDirectiveElement: (el: HTMLElement, fieldName: string, entity: EntityContext, type: BlokkliDirectiveType) => void;
+    getVisible: (directiveType: BlokkliDirectiveType) => Rectangle[];
+    getEditableAtPoint: (x: number, y: number) => EditableFieldData | undefined;
+    getEditablesForBlock: (uuid: string) => EditableFieldData[];
+    getDroppableElements: () => DroppableFieldElementData[];
+    findEditableElement: (fieldName: string, host: EntityContext) => HTMLElement | undefined;
+    isReady: ComputedRef<boolean>;
+};
+export default function (debug: DebugProvider, ui: UiProvider): DirectiveProvider;
+export {};