@blokkli/editor 1.0.0

package/dist/runtime/helpers/index.js

@@ -0,0 +1,467 @@
+import { easeOutSine } from "./easing.js";
+import { useRuntimeConfig } from "#imports";
+import { getDefinition } from "#blokkli/definitions";
+export function falsy(value) {
+  return value !== null && value !== void 0;
+}
+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 reusableUuid = dataset.reusableUuid;
+    const isNew = dataset.isNew === "true";
+    const parentBlockBundle = hostType === itemEntityType ? hostBundle : void 0;
+    if (uuid && hostType && hostUuid && hostFieldName && itemBundle && hostBundle && entityType && hostFieldListType) {
+      const definition = getDefinition(
+        itemBundle,
+        hostFieldListType,
+        parentBlockBundle
+      );
+      const libraryLabel = dataset.bkLibraryLabel;
+      const editTitle = libraryLabel || (definition?.editor?.editTitle ? definition?.editor.editTitle(element) : void 0);
+      return {
+        itemType: "existing",
+        element: () => document.querySelector(`[data-uuid="${uuid}"]`),
+        itemBundle,
+        entityType,
+        isNested: hostType === itemEntityType,
+        uuid,
+        hostType,
+        hostBundle,
+        hostUuid,
+        hostFieldName,
+        hostFieldListType,
+        reusableBundle,
+        reusableUuid,
+        editTitle: editTitle || void 0,
+        isNew,
+        parentBlockBundle
+      };
+    }
+  } else if (dataset.elementType === "new") {
+    const itemBundle = dataset.itemBundle;
+    if (itemBundle) {
+      return {
+        itemType: "new",
+        element: () => document.querySelector(
+          `[data-sortli-id="${itemBundle}"]`
+        ),
+        itemBundle
+      };
+    }
+  } else if (dataset.elementType === "action") {
+    const actionType = dataset.actionType;
+    const itemBundle = dataset.itemBundle;
+    if (actionType) {
+      return {
+        itemType: "action",
+        actionType,
+        itemBundle,
+        element: () => document.querySelector(
+          `[data-element-type="action"][data-sortli-id="${actionType}"]`
+        )
+      };
+    }
+  } else if (dataset.elementType === "clipboard") {
+    const additional = dataset.clipboardAdditional;
+    const itemBundle = dataset.itemBundle;
+    const clipboardId = dataset.clipboardId;
+    const id = dataset.sortliId;
+    if (itemBundle && clipboardId) {
+      return {
+        itemType: "clipboard",
+        element: () => document.querySelector(`[data-sortli-id="${id}"]`),
+        itemBundle,
+        additional,
+        clipboardId
+      };
+    }
+  } else if (dataset.elementType === "media_library") {
+    const mediaId = dataset.mediaId;
+    const itemBundle = dataset.itemBundle;
+    const mediaBundle = dataset.mediaBundle;
+    if (mediaId && itemBundle && mediaBundle) {
+      return {
+        itemType: "media_library",
+        mediaId,
+        itemBundle,
+        mediaBundle,
+        element: () => document.querySelector(
+          `[data-element-type="media_library"][data-media-id="${mediaId}"]`
+        )
+      };
+    }
+  } else if (dataset.elementType === "search_content") {
+    const searchItemData = dataset.searchItem;
+    const id = dataset.sortliId;
+    if (searchItemData && id) {
+      const searchItem = JSON.parse(searchItemData);
+      return {
+        itemType: "search_content",
+        element: () => document.querySelector(`[data-sortli-id="${id}"]`),
+        itemBundle: searchItem.targetBundles[0],
+        searchItem
+      };
+    }
+  }
+}
+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;
+}
+export function getRelativeTimeString(date, lang = navigator.language) {
+  const timeMs = typeof date === "number" ? date : date.getTime();
+  const deltaSeconds = Math.round((timeMs - Date.now()) / 1e3);
+  const cutoffs = [
+    60,
+    3600,
+    86400,
+    86400 * 7,
+    86400 * 30,
+    86400 * 365,
+    Infinity
+  ];
+  const units = [
+    "second",
+    "minute",
+    "hour",
+    "day",
+    "week",
+    "month",
+    "year"
+  ];
+  const unitIndex = cutoffs.findIndex(
+    (cutoff) => cutoff > Math.abs(deltaSeconds)
+  );
+  const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1;
+  const rtf = new Intl.RelativeTimeFormat(lang, { numeric: "auto" });
+  return rtf.format(Math.floor(deltaSeconds / divisor), units[unitIndex]);
+}
+export function modulo(n, m) {
+  return (n % m + m) % m;
+}
+export function getBounds(rects) {
+  if (!rects.length) {
+    return;
+  }
+  const firstRect = rects[0];
+  let minX = firstRect.x;
+  let minY = firstRect.y;
+  let maxX = minX + firstRect.width;
+  let maxY = minY + firstRect.height;
+  for (const rect of rects.slice(1)) {
+    minX = Math.min(minX, rect.x);
+    minY = Math.min(minY, rect.y);
+    maxX = Math.max(maxX, rect.x + rect.width);
+    maxY = Math.max(maxY, rect.y + rect.height);
+  }
+  return {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY
+  };
+}
+export function intersects(a, b) {
+  return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
+}
+export function isInsideRect(x, y, rect) {
+  return x > rect.x && x < rect.x + rect.width && y > rect.y && y < rect.y + rect.height;
+}
+export function calculateIntersection(rectA, rectB) {
+  if (!intersects(rectA, rectB)) {
+    return 0;
+  }
+  const xOverlap = Math.max(
+    0,
+    Math.min(rectA.x + rectA.width, rectB.x + rectB.width) - Math.max(rectA.x, rectB.x)
+  );
+  const yOverlap = Math.max(
+    0,
+    Math.min(rectA.y + rectA.height, rectB.y + rectB.height) - Math.max(rectA.y, rectB.y)
+  );
+  const intersectionArea = xOverlap * yOverlap;
+  const rectAArea = rectA.width * rectA.height;
+  return intersectionArea / rectAArea;
+}
+export function findClosestRectangle(x, y, rects) {
+  let closestRect = rects[0];
+  let minDistance = distanceToClosestRectangleEdge(x, y, rects[0]);
+  for (let i = 1; i < rects.length; i++) {
+    const rect = rects[i];
+    const distance = distanceToClosestRectangleEdge(x, y, rect);
+    if (distance < minDistance) {
+      closestRect = rect;
+      minDistance = distance;
+    }
+  }
+  return closestRect;
+}
+export function distanceToRectangle(x, y, rect) {
+  const minX = rect.x;
+  const minY = rect.y;
+  const maxX = rect.x + rect.width;
+  const maxY = rect.y + rect.height;
+  const dx = Math.max(minX - x, 0, x - maxX);
+  const dy = Math.max(minY - y, 0, y - maxY);
+  return Math.sqrt(dx * dx + dy * dy);
+}
+export function distanceToClosestRectangleEdge(x, y, rect) {
+  if (isInsideRect(x, y, rect)) {
+    return 0;
+  }
+  const minX = rect.x;
+  const minY = rect.y;
+  const maxX = rect.x + rect.width;
+  const maxY = rect.y + rect.height;
+  const dx = Math.max(minX - x, 0, x - maxX);
+  const dy = Math.max(minY - y, 0, y - maxY);
+  return Math.sqrt(dx * dx + dy * dy);
+}
+export function getDistance(a, b) {
+  const dx = a.x - b.x;
+  const dy = a.y - b.y;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+export const parseColorString = (color) => {
+  const rgbaRegex = /^rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(?:,\s*(0|1|0?\.\d+))?\)$/;
+  const match = color.match(rgbaRegex);
+  if (!match) {
+    return;
+  }
+  const r = Number.parseInt(match[1]);
+  const g = Number.parseInt(match[2]);
+  const b = Number.parseInt(match[3]);
+  const a = match[4] !== void 0 ? Number.parseFloat(match[4]) : 1;
+  if ([r, g, b, a].some((val) => Number.isNaN(val))) {
+    throw new Error("Invalid color values");
+  }
+  if (r < 0 || r > 255 || g < 0 || g > 255 || b < 0 || b > 255) {
+    return;
+  }
+  return [r, g, b];
+};
+export const realBackgroundColor = (el) => {
+  const transparent = "rgba(0, 0, 0, 0)";
+  if (!el) return transparent;
+  const bg = getComputedStyle(el).backgroundColor;
+  if (bg === transparent || bg === "transparent") {
+    return realBackgroundColor(el.parentElement);
+  }
+  return bg;
+};
+export const lerp = (s, e, t) => s * (1 - t) + e * t;
+export const calculateCenterPosition = (blockingRects, viewport, widthToPlace) => {
+  const viewportCenterX = (viewport.x + viewport.width) / 2;
+  const blockingThreshold = viewport.width / 7;
+  const x = blockingRects.reduce((acc, rect) => {
+    if (rect.x < viewportCenterX && viewportCenterX - rect.x > blockingThreshold && rect.x + rect.width > acc) {
+      return rect.x + rect.width;
+    }
+    return acc;
+  }, viewport.x);
+  const width = blockingRects.reduce((acc, rect) => {
+    if (rect.x > viewportCenterX && rect.x - viewportCenterX > blockingThreshold && rect.x < acc) {
+      return rect.x;
+    }
+    return acc;
+  }, viewport.width + viewport.x);
+  return (x + width) / 2 - widthToPlace / 2;
+};
+export function getContrastRatio(color1, color2) {
+  const luminance1 = getLuminance(color1);
+  const luminance2 = getLuminance(color2);
+  const lighter = Math.max(luminance1, luminance2);
+  const darker = Math.min(luminance1, luminance2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function getLuminance(color) {
+  const [r, g, b] = color.map((val) => {
+    val /= 255;
+    return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+export function findHighestContrastColor(colors, backgroundColor = [255, 255, 255]) {
+  let maxContrast = 0;
+  let maxContrastColor = colors[0];
+  for (const color of colors) {
+    const contrast = getContrastRatio(color, backgroundColor);
+    if (contrast > maxContrast) {
+      maxContrast = contrast;
+      maxContrastColor = color;
+    }
+  }
+  return maxContrastColor;
+}
+export const rgbaToString = (color, alpha = 1) => `rgba(${[...color, alpha].join(", ")})`;
+export const getNumericStyleValue = (str, fallback = 0) => {
+  const v = str.replace("px", "");
+  const num = Number.parseFloat(v);
+  if (Number.isNaN(num) || num === 0) {
+    return fallback;
+  }
+  return num;
+};
+export function findIdealRectPosition(blockingRects, rectToPlace, viewport, maxOverlap = 60) {
+  let targetX = rectToPlace.x;
+  for (const blockingRect of blockingRects) {
+    if (intersects(rectToPlace, blockingRect)) {
+      const a = Math.abs(rectToPlace.y + rectToPlace.height - blockingRect.y);
+      const b = Math.abs(blockingRect.y + blockingRect.height - rectToPlace.y);
+      const verticalOverlap = Math.min(a, b);
+      const smoothingFactor = easeOutSine(
+        Math.min(verticalOverlap, maxOverlap) / maxOverlap
+      );
+      if (rectToPlace.x + rectToPlace.width / 2 > blockingRect.x + blockingRect.width / 2) {
+        targetX = blockingRect.x + blockingRect.width;
+      } else {
+        targetX = blockingRect.x - rectToPlace.width;
+      }
+      targetX = rectToPlace.x + smoothingFactor * (targetX - rectToPlace.x);
+      break;
+    }
+  }
+  return {
+    x: Math.min(
+      Math.max(targetX, viewport.x),
+      viewport.x + viewport.width - rectToPlace.width
+    ),
+    y: Math.min(
+      Math.max(viewport.y, rectToPlace.y),
+      viewport.height + viewport.y - rectToPlace.height
+    )
+  };
+}
+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;
+}
+export function getInteractionCoordinates(e) {
+  if ("touches" in e) {
+    const touch = e.touches[0] || e.changedTouches[0];
+    return {
+      x: touch.clientX,
+      y: touch.clientY
+    };
+  }
+  return {
+    x: e.clientX,
+    y: e.clientY
+  };
+}
+export function toShaderColor(rgba) {
+  return rgba.map((v) => v / 255);
+}
+export function generateUUID() {
+  try {
+    return crypto.randomUUID();
+  } catch {
+  }
+  let d = (/* @__PURE__ */ new Date()).getTime(), d2 = typeof performance !== "undefined" && performance.now && performance.now() * 1e3 || 0;
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    let r = Math.random() * 16;
+    if (d > 0) {
+      r = (d + r) % 16 | 0;
+      d = Math.floor(d / 16);
+    } else {
+      r = (d2 + r) % 16 | 0;
+      d2 = Math.floor(d2 / 16);
+    }
+    return (c == "x" ? r : r & 7 | 8).toString(16);
+  });
+}

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

@@ -0,0 +1,17 @@
+import { type Ref, type ComputedRef } from 'vue';
+import type { AnimationProvider } from './animationProvider.js';
+import type { KeyboardShortcut } from '#blokkli/types';
+type RegisteredShortcut = {
+    key: string;
+    shortcut: KeyboardShortcut;
+};
+export type KeyboardProvider = {
+    isPressingSpace: Readonly<Ref<boolean>>;
+    isPressingControl: Readonly<Ref<boolean>>;
+    isPressingShift: Readonly<Ref<boolean>>;
+    shortcuts: ComputedRef<RegisteredShortcut[]>;
+    registerShortcut: (shortcut: KeyboardShortcut) => void;
+    unregisterShortcut: (shortcut: KeyboardShortcut) => void;
+};
+export default function (animationProvider: AnimationProvider): KeyboardProvider;
+export {};

package/dist/runtime/helpers/keyboardProvider.js

@@ -0,0 +1,79 @@
+import {
+  ref,
+  readonly,
+  onMounted,
+  onBeforeUnmount,
+  watch,
+  computed
+} from "vue";
+import { eventBus } from "#blokkli/helpers/eventBus";
+export default function(animationProvider) {
+  const isPressingControl = ref(false);
+  const isPressingSpace = ref(false);
+  const isPressingShift = ref(false);
+  const registeredShortcuts = ref([]);
+  const onKeyUp = (e) => {
+    isPressingControl.value = e.getModifierState("Control") || e.getModifierState("Meta");
+    isPressingShift.value = e.getModifierState("Shift");
+    if (e.code === "Space") {
+      isPressingSpace.value = false;
+    }
+    if (e.code === "Control" || e.key === "CapsLock") {
+      isPressingControl.value = false;
+    }
+  };
+  const onKeyDown = (e) => {
+    isPressingControl.value = e.getModifierState("Control") || e.getModifierState("Meta") || e.code === "CapsLock";
+    isPressingShift.value = e.getModifierState("Shift");
+    if (!isPressingSpace.value) {
+      eventBus.emit("keyPressed", {
+        code: e.key,
+        shift: e.shiftKey,
+        meta: e.ctrlKey || e.metaKey || isPressingControl.value,
+        originalEvent: e
+      });
+    }
+    if (e.code === "Space") {
+      isPressingSpace.value = true;
+    }
+  };
+  const onVisibilityChange = () => {
+    isPressingControl.value = false;
+    isPressingSpace.value = false;
+  };
+  onMounted(() => {
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("keyup", onKeyUp);
+    document.addEventListener("visibilitychange", onVisibilityChange);
+  });
+  onBeforeUnmount(() => {
+    document.removeEventListener("keydown", onKeyDown);
+    document.removeEventListener("keyup", onKeyUp);
+    document.removeEventListener("visibilitychange", onVisibilityChange);
+  });
+  watch(isPressingSpace, () => {
+    animationProvider.requestDraw();
+  });
+  watch(isPressingControl, () => {
+    animationProvider.requestDraw();
+  });
+  const getShortcutKey = (shortcut) => [!!shortcut.meta, !!shortcut.shift, shortcut.code].join("-");
+  const registerShortcut = (shortcut) => {
+    registeredShortcuts.value.push({ key: getShortcutKey(shortcut), shortcut });
+  };
+  const unregisterShortcut = (shortcut) => {
+    const key = getShortcutKey(shortcut);
+    registeredShortcuts.value = registeredShortcuts.value.filter(
+      (v) => v.key !== key
+    );
+  };
+  const shortcuts = computed(() => registeredShortcuts.value);
+  return {
+    isPressingSpace: readonly(isPressingSpace),
+    isPressingControl: readonly(isPressingControl),
+    isPressingShift: readonly(isPressingShift),
+    shortcuts,
+    registerShortcut,
+    unregisterShortcut
+  };
+}

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

@@ -0,0 +1,2 @@
+import type { BlockOptionDefinition } from '#blokkli/types/blokkOptions';
+export declare function optionValueToStorable(definition: BlockOptionDefinition, value: string | string[] | boolean | undefined | null | number): string;

package/dist/runtime/helpers/options.js

@@ -0,0 +1,21 @@
+export function optionValueToStorable(definition, value) {
+  if (definition.type === "checkbox") {
+    if (typeof value === "string" && (value === "1" || value === "0")) {
+      return value;
+    } else if (typeof value === "boolean") {
+      return value === true ? "1" : "0";
+    }
+    return "0";
+  } else if (definition.type === "text" || definition.type === "radios") {
+    if (typeof value === "string") {
+      return value;
+    }
+  } else if (definition.type === "checkboxes") {
+    if (Array.isArray(value)) {
+      return value.join(",");
+    } else if (typeof value === "string") {
+      return value;
+    }
+  }
+  return "";
+}

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

@@ -0,0 +1,10 @@
+/**
+ * This file should contain all helpers that are meant for runtime functionality, such as defineBlokkli composable or <BlokkliProvider>.
+ */
+import type { BlockOptionDefinition } from '#blokkli/types/blokkOptions';
+/**
+ * Get the runtime value for an option.
+ *
+ * Internally, all option values are stored as strings. This function maps the stored data to the runtime value.
+ */
+export declare function getRuntimeOptionValue(definition: Pick<BlockOptionDefinition, 'type' | 'default'>, value: string | string[] | boolean | undefined | null | number): string | string[] | boolean | number;

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

@@ -0,0 +1,35 @@
+export function getRuntimeOptionValue(definition, value) {
+  if (definition.type === "checkbox") {
+    if (typeof value === "string") {
+      return value === "1" || value === "true";
+    } else if (typeof value === "boolean") {
+      return value;
+    }
+    return false;
+  } else if (definition.type === "radios") {
+    if (typeof value === "string") {
+      return value;
+    }
+    return "";
+  } else if (definition.type === "checkboxes") {
+    if (typeof value === "string") {
+      return value.split(",");
+    } else if (Array.isArray(value)) {
+      return value;
+    }
+    return [];
+  } else if (definition.type === "range" || definition.type === "number") {
+    if (typeof value === "number" && !Number.isNaN(value)) {
+      return value;
+    } else if (typeof value === "string") {
+      const parsed = Number.parseFloat(value);
+      if (!Number.isNaN(parsed)) {
+        return parsed;
+      }
+    }
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  return "";
+}

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

@@ -0,0 +1,62 @@
+import type { DomProvider } from './domProvider.js';
+import { type Ref, type ComputedRef } from '#imports';
+import type { DraggableExistingBlock, DraggableItem, InteractionMode } from '#blokkli/types';
+export type SelectionProvider = {
+    /**
+     * The currently selected UUIDs.
+     */
+    uuids: Readonly<Ref<string[]>>;
+    /**
+     * The currently selected UUIDs as a map.
+     */
+    uuidsMap: ComputedRef<Record<string, boolean>>;
+    /**
+     * The currently selected blocks.
+     */
+    blocks: ComputedRef<DraggableExistingBlock[]>;
+    /**
+     * The active field key.
+     */
+    activeFieldKey: Readonly<Ref<string>>;
+    /**
+     * Whether the user is currently dragging a block.
+     */
+    isDragging: ComputedRef<boolean>;
+    /**
+     * Whether the user is currently dragging at least one existing block.
+     */
+    isDraggingExisting: ComputedRef<boolean>;
+    /**
+     * Whether the user is currently dragging a block.
+     */
+    draggingMode: Readonly<Ref<InteractionMode | null>>;
+    /**
+     * Whether the user is currently dragging a block.
+     */
+    interactionMode: Readonly<Ref<InteractionMode | null>>;
+    /**
+     * Whether the user is currently in multi select mode.
+     */
+    isMultiSelecting: Ref<boolean>;
+    /**
+     * Update the active field key.
+     */
+    setActiveFieldKey: (key: string) => void;
+    /**
+     * Whether an editable field is currently being edited.
+     */
+    editableActive: Ref<boolean>;
+    /**
+     * Whether the user is currently changing block options.
+     */
+    isChangingOptions: Ref<boolean>;
+    /**
+     * The items that are currently being dragged.
+     */
+    dragItems: Ref<DraggableItem[]>;
+    /**
+     * The block bundles of the items being dragged.
+     */
+    dragItemsBundles: ComputedRef<string[]>;
+};
+export default function (dom: DomProvider): SelectionProvider;