@blokkli/editor 2.0.0-alpha.22 → 2.0.0-alpha.24

package/dist/runtime/helpers/composables/useDialog.js

@@ -0,0 +1,16 @@
+import { computed, useBlokkli } from "#imports";
+export function useDialog(id, alignment) {
+  const { ui } = useBlokkli();
+  return computed({
+    get() {
+      return ui.currentDialog.value?.id === id;
+    },
+    set(isOpen) {
+      if (isOpen) {
+        ui.openDialog({ id, alignment });
+      } else {
+        ui.closeDialog(id);
+      }
+    }
+  });
+}

package/dist/runtime/helpers/composables/useGlobalBlokkliObject.d.ts

@@ -0,0 +1,16 @@
+import type { LogMessage } from '../debugProvider.js';
+type BlokkliGlobalWindowObject = {
+    messages: LogMessage[];
+};
+export declare function useGlobalBlokkliObject(): {
+    init: () => void;
+    pushMessage: (message: LogMessage) => void;
+    getMessages: () => LogMessage[];
+    cleanup: () => void;
+};
+declare global {
+    interface Window {
+        __BLOKKLI__?: BlokkliGlobalWindowObject;
+    }
+}
+export {};

package/dist/runtime/helpers/composables/useGlobalBlokkliObject.js

@@ -0,0 +1,36 @@
+export function useGlobalBlokkliObject() {
+  function init() {
+    if (typeof window !== "undefined") {
+      if (!window.__BLOKKLI__) {
+        window.__BLOKKLI__ = {
+          messages: []
+        };
+      }
+    }
+  }
+  function pushMessage(message) {
+    if (typeof window !== "undefined" && window.__BLOKKLI__) {
+      window.__BLOKKLI__.messages.push(message);
+      if (window.__BLOKKLI__.messages.length > 1e3) {
+        window.__BLOKKLI__.messages = window.__BLOKKLI__.messages.slice(-1e3);
+      }
+    }
+  }
+  function getMessages() {
+    if (typeof window !== "undefined" && window.__BLOKKLI__) {
+      return window.__BLOKKLI__.messages;
+    }
+    return [];
+  }
+  function cleanup() {
+    if (typeof window !== "undefined") {
+      delete window.__BLOKKLI__;
+    }
+  }
+  return {
+    init,
+    pushMessage,
+    getMessages,
+    cleanup
+  };
+}

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

@@ -1,8 +1,15 @@
 import type { StorageProvider } from './storageProvider.js';
 import { type ComputedRef } from '#imports';
 export type DebugLogger = {
-    log: (...v: any) => void;
-    error: (...v: any) => void;
+    log: (message: string, ...v: any) => void;
+    error: (message: string, ...v: any) => void;
+};
+export type LogMessage = {
+    type: 'log' | 'error' | 'event';
+    name: string;
+    date: string;
+    message: string;
+    context?: string;
 };
 type RegisteredDebugOverlay = {
     id: string;
@@ -12,12 +19,15 @@ type RegisteredDebugOverlay = {
 export type DebugProvider = {
     isEnabled: ComputedRef<boolean>;
     toggle: () => void;
-    log: (...v: any) => void;
     createLogger: (name: string) => DebugLogger;
     registerOverlay: (id: string, label: string) => void;
     unregisterOverlay: (id: string) => void;
     overlays: ComputedRef<RegisteredDebugOverlay[]>;
     toggleOverlay: (id: string) => void;
+    registeredLoggers: ComputedRef<string[]>;
+    enabledLoggers: ComputedRef<string[]>;
+    toggleLogger: (name: string) => void;
+    getMessages: () => LogMessage[];
 };
 export default function (storage: StorageProvider): DebugProvider;
 export {};

package/dist/runtime/helpers/debugProvider.js

@@ -1,31 +1,83 @@
-import { computed, ref } from "#imports";
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  ref
+} from "#imports";
+import { eventBus } from "./eventBus.js";
+import { useGlobalBlokkliObject } from "./composables/useGlobalBlokkliObject.js";
 export default function(storage) {
   const showDebug = storage.use("showDebug", false);
   const visible = storage.use("visibleDebugOverlays", []);
+  const enabledLoggers = storage.use("enabledDebugLoggers", []);
   const registeredOverlays = ref([]);
+  const registeredLoggers = ref([]);
+  const globalBlokkli = useGlobalBlokkliObject();
+  globalBlokkli.init();
   const isEnabled = computed(() => showDebug.value);
   function toggle() {
     showDebug.value = !showDebug.value;
   }
-  function log(...v) {
-    if (!showDebug.value) {
+  function argToString(arg) {
+    if (arg === null) return "null";
+    if (arg === void 0) return "undefined";
+    if (typeof arg === "string") return arg;
+    if (typeof arg === "number") return String(arg);
+    if (typeof arg === "boolean") return String(arg);
+    if (arg instanceof Error) return arg.stack || arg.message;
+    try {
+      return JSON.stringify(arg, null, 2);
+    } catch {
+      return String(arg);
+    }
+  }
+  const onEvent = (name, data) => {
+    if (name === "animationFrame" || name === "animationFrame:before" || name === "animationFrame:after" || name === "canvas:draw" || name === "updateMutatedFields") {
       return;
     }
-    console.log(v);
+    globalBlokkli.pushMessage({
+      type: "event",
+      name: String(name),
+      date: (/* @__PURE__ */ new Date()).toISOString(),
+      message: data !== void 0 && data !== null ? argToString(data) : ""
+    });
+  };
+  function shouldLog(name) {
+    if (!showDebug.value) {
+      return false;
+    }
+    if (enabledLoggers.value.length === 0) {
+      return true;
+    }
+    return enabledLoggers.value.includes(name);
   }
   function createLogger(name) {
+    if (!registeredLoggers.value.includes(name)) {
+      registeredLoggers.value.push(name);
+    }
+    function pushMessage(type, message, context) {
+      globalBlokkli.pushMessage({
+        type,
+        name,
+        date: (/* @__PURE__ */ new Date()).toISOString(),
+        message,
+        context: context.map(argToString).join(" ")
+      });
+    }
     return {
-      log(...v) {
-        if (!showDebug.value) {
+      log(message, ...v) {
+        pushMessage("log", message, v);
+        if (!shouldLog(name)) {
           return;
         }
-        console.log(`[${name}]: `, ...v);
+        console.log(`[${name}]: ${message}`, ...v);
       },
-      error(...v) {
-        if (!showDebug.value) {
+      error(message, ...v) {
+        pushMessage("error", message, v);
+        if (!shouldLog(name)) {
           return;
         }
-        console.error(`[${name}]: `, ...v);
+        console.error(`[${name}]: ${message}`, ...v);
       }
     };
   }
@@ -52,14 +104,30 @@ export default function(storage) {
       visible.value = [...visible.value, id];
     }
   }
+  function toggleLogger(name) {
+    if (enabledLoggers.value.includes(name)) {
+      enabledLoggers.value = enabledLoggers.value.filter((v) => v !== name);
+    } else {
+      enabledLoggers.value = [...enabledLoggers.value, name];
+    }
+  }
+  onMounted(() => {
+    eventBus.on("*", onEvent);
+  });
+  onBeforeUnmount(() => {
+    eventBus.off("*", onEvent);
+  });
   return {
     isEnabled,
     toggle,
-    log,
     createLogger,
     registerOverlay,
     unregisterOverlay,
     overlays,
-    toggleOverlay
+    toggleOverlay,
+    registeredLoggers: computed(() => registeredLoggers.value),
+    enabledLoggers: computed(() => enabledLoggers.value),
+    toggleLogger,
+    getMessages: globalBlokkli.getMessages
   };
 }

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

@@ -0,0 +1,2 @@
+import { type ComputedRef } from '#imports';
+export declare function defineElementStyle(property: string, providedValue: ComputedRef<string | number> | (() => string | number), providedElement?: HTMLElement): void;

package/dist/runtime/helpers/defineElementStyle.js

@@ -0,0 +1,33 @@
+import {
+  onBeforeUnmount,
+  watch,
+  computed,
+  unref
+} from "#imports";
+export function defineElementStyle(property, providedValue, providedElement) {
+  const element = providedElement ?? document.documentElement;
+  const value = computed(() => {
+    if (typeof providedValue === "function") {
+      return providedValue();
+    }
+    return unref(providedValue);
+  });
+  const originalValue = element.style.getPropertyValue(property);
+  watch(
+    value,
+    function(newValue) {
+      const styleValue = typeof newValue === "number" ? newValue + "px" : newValue;
+      element.style.setProperty(property, styleValue);
+    },
+    {
+      immediate: true
+    }
+  );
+  onBeforeUnmount(() => {
+    if (originalValue) {
+      element.style.setProperty(property, originalValue);
+    } else {
+      element.style.removeProperty(property);
+    }
+  });
+}

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

@@ -14,6 +14,7 @@ type MeasuredBlockRect = Rectangle & {
     time: number;
 };
 export type DomProvider = {
+    getBoundingClientRect: (element: HTMLElement) => DOMRect;
     /**
      * Return the droppable markup for a draggable item.
      */

package/dist/runtime/helpers/domProvider.js

@@ -27,6 +27,10 @@ export default function(ui, debug, definitions, state, element) {
   let initTimeout = null;
   const isInitalizing = ref(true);
   const observedElementCache = /* @__PURE__ */ new Map();
+  function getBoundingClientRect(element2) {
+    logger.log("getBoundingClientRect", element2);
+    return element2.getBoundingClientRect();
+  }
   const registeredBlockUuids = computed(() => {
     return Object.entries(registeredBlocks).map(([uuid, element2]) => {
       if (element2) {
@@ -219,19 +223,18 @@ export default function(ui, debug, definitions, state, element) {
     if (!el) {
       return "";
     }
-    const dropElement = element.query(el, ".bk-drop-element", "Find drop element for markup.") || el;
+    if ("itemType" in item && item.itemType !== "existing_structure") {
+      return el.outerHTML;
+    }
     const childCount = element.queryAll(
-      dropElement,
+      el,
       "*",
       "Get child count for drop element markup."
     ).length;
     if (checkSize && childCount > 80) {
       return "";
     }
-    return cloneElementWithStyles(dropElement, true).replace(
-      /\sdata-\w+="[^"]*"/g,
-      ""
-    );
+    return cloneElementWithStyles(el, true).replace(/\sdata-\w+="[^"]*"/g, "");
   };
   const getVisibleBlocks = () => Array.from(visibleBlocks);
   const getVisibleFields = () => Array.from(visibleFields);
@@ -254,18 +257,22 @@ export default function(ui, debug, definitions, state, element) {
     if (!el) {
       return;
     }
-    const bundle = el.dataset.itemBundle;
-    const hostBundle = el.dataset.hostBundle;
-    const hostFieldListType = el.dataset.hostFieldListType;
-    if (!bundle || !hostFieldListType) {
+    const item = state.getFieldListItem(uuid);
+    if (!item) {
+      return;
+    }
+    const fieldList = state.getFieldListForBlock(item.uuid);
+    if (!fieldList) {
       return;
     }
+    const fieldListType = getRegisteredField(fieldList.entityUuid, fieldList.name)?.fieldListType ?? "default";
+    const parentBundle = fieldList.entityType === itemEntityType ? state.getFieldListItem(fieldList.entityUuid)?.bundle ?? null : null;
     const observableElement = getElementToObserve(
       uuid,
       el,
-      bundle,
-      hostFieldListType,
-      hostBundle
+      item.bundle,
+      fieldListType,
+      parentBundle
     );
     blockRects[uuid] = rectWithTime(
       ui.getAbsoluteElementRect(
@@ -315,6 +322,9 @@ export default function(ui, debug, definitions, state, element) {
       );
     }
   }
+  onBlokkliEvent("state:reload:before", () => {
+    observedElementCache.clear();
+  });
   onBlokkliEvent("state:reloaded", () => {
     observedElementCache.clear();
     if (stateReloadTimeout) {
@@ -400,25 +410,33 @@ export default function(ui, debug, definitions, state, element) {
       unregisterBlock(key, uuid);
     }
     const item = state.getFieldListItem(uuid);
-    if (item) {
-      const fieldList = state.getFieldListForBlock(item.uuid);
-      if (fieldList) {
-        const fieldListType = getRegisteredField(fieldList.entityUuid, fieldList.name)?.fieldListType ?? "default";
-        const parentBundle = fieldList.entityType === itemEntityType ? state.getFieldListItem(fieldList.entityUuid)?.bundle ?? null : null;
-        const observableElement = getElementToObserve(
-          item.uuid,
-          el,
-          item.bundle,
-          fieldListType,
-          parentBundle
-        );
-        blockElementToUuid.set(observableElement, uuid);
-        registeredBlocks[uuid] = el;
-        observedElements[uuid] = observableElement;
-        intersectionObserver.observe(observableElement);
-        resizeObserver.observe(observableElement);
-      }
+    if (!item) {
+      return logger.error(
+        "Failed to register block due to missing field list item.",
+        uuid
+      );
+    }
+    const fieldList = state.getFieldListForBlock(item.uuid);
+    if (!fieldList) {
+      return logger.error(
+        "Failed to register block due to missing field list.",
+        uuid
+      );
     }
+    const fieldListType = getRegisteredField(fieldList.entityUuid, fieldList.name)?.fieldListType ?? "default";
+    const parentBundle = fieldList.entityType === itemEntityType ? state.getFieldListItem(fieldList.entityUuid)?.bundle ?? null : null;
+    const observableElement = getElementToObserve(
+      item.uuid,
+      el,
+      item.bundle,
+      fieldListType,
+      parentBundle
+    );
+    blockElementToUuid.set(observableElement, uuid);
+    registeredBlocks[uuid] = el;
+    observedElements[uuid] = observableElement;
+    intersectionObserver.observe(observableElement);
+    resizeObserver.observe(observableElement);
   }
   function unregisterBlock(key, uuid) {
     const currentKey = blockUuidCurrentKey[uuid];
@@ -537,6 +555,7 @@ export default function(ui, debug, definitions, state, element) {
     registeredBlockUuids,
     getDebugData,
     getRegisteredField,
-    registeredBlocks: computed(() => registeredBlocks)
+    registeredBlocks: computed(() => registeredBlocks),
+    getBoundingClientRect
   };
 }

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

@@ -3,4 +3,4 @@ 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;
+export declare function determineCanAddChildren(field: BlokkliFieldElement, children: HTMLElement[], uuids: string[], currentCount: number, itemsToAdd: number, draggingBundles?: string[], draggingFragments?: string[]): boolean;

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

@@ -2,7 +2,7 @@ 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;
+    const gap = orientation === "vertical" ? computedStyle.rowGap || computedStyle.gridRowGap : computedStyle.columnGap || computedStyle.gridColumnGap;
     if (gap) {
       const gapParts = gap.split(" ");
       const gapValue = gapParts[0];
@@ -31,10 +31,10 @@ export function getChildrenOrientation(element) {
   }
   return "vertical";
 }
-export function determineCanAddChildren(field, children, uuids, currentCount, itemsToAdd, draggingBundles) {
+export function determineCanAddChildren(field, children, uuids, currentCount, itemsToAdd, draggingBundles, draggingFragments) {
   if (field.cardinality !== -1) {
     const childrenThatAreSelection = children.filter((child) => {
-      const uuid = child.dataset.uuid;
+      const uuid = child.dataset.bkUuid;
       if (!uuid) {
         return false;
       }
@@ -45,5 +45,19 @@ export function determineCanAddChildren(field, children, uuids, currentCount, it
       return false;
     }
   }
-  return !draggingBundles?.length || draggingBundles.every((bundle) => field.allowedBundles.includes(bundle));
+  if (!draggingBundles?.length) {
+    return true;
+  }
+  const bundlesAllowed = draggingBundles.every(
+    (bundle) => field.allowedBundles.includes(bundle)
+  );
+  if (!bundlesAllowed) {
+    return false;
+  }
+  if (draggingFragments?.length && field.allowedFragments.length > 0) {
+    return draggingFragments.every(
+      (fragment) => field.allowedFragments.includes(fragment)
+    );
+  }
+  return true;
 }

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, replace?: boolean) => void;
+export declare const emitMessage: (message: string, type?: "success" | "error" | "warning", additional?: string | Error | unknown, replace?: boolean) => void;

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

@@ -1,4 +1,4 @@
-import type { DraggableItem, Rectangle, Coord, LibraryItemProps, Size } from '#blokkli/types';
+import type { Rectangle, Coord, Size } from '#blokkli/types';
 import type { RGB } from '#blokkli/types/theme';
 /**
  * Type check for falsy values.
@@ -7,10 +7,6 @@ import type { RGB } from '#blokkli/types/theme';
  * items.filter(falsy)
  */
 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 onlyUnique(value: string, index: number, self: Array<string>): boolean;
 /**
  * Convert a date to a relative time string, such as
@@ -81,5 +77,4 @@ export declare function getFieldKey(uuid: string, fieldName: string): string;
 export declare function getInteractionCoordinates(e: MouseEvent | TouchEvent): Coord;
 export declare function toShaderColor(rgba: RGB): RGB;
 export declare function generateUUID(): string;
-export declare function buildAttributesForLibraryItem(props: LibraryItemProps): Record<string, string | undefined>;
 export declare function asValidNumber(v: unknown, defaultValue: number): number;

package/dist/runtime/helpers/index.js

@@ -2,78 +2,6 @@ import { easeOutSine } from "./easing.js";
 export function falsy(value) {
   return value !== null && value !== void 0;
 }
-export function buildDraggableItem(element) {
-  if (!(element instanceof HTMLElement)) {
-    return;
-  }
-  const dataset = element.dataset;
-  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 onlyUnique(value, index, self) {
   return self.indexOf(value) === index;
 }
@@ -399,15 +327,6 @@ export function generateUUID() {
     return (c == "x" ? r : r & 7 | 8).toString(16);
   });
 }
-export function buildAttributesForLibraryItem(props) {
-  return {
-    "data-reusable-bundle": props.block?.bundle,
-    "data-reusable-uuid": props.block?.uuid,
-    "data-bk-library-label": props.label,
-    "data-bk-library-item-uuid": props.uuid,
-    "data-blokkli-is-reusable": "true"
-  };
-}
 export function asValidNumber(v, defaultValue) {
   if (typeof v === "number" && !Number.isNaN(v)) {
     return v;

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

@@ -1,10 +1,45 @@
 import type { AddAction } from '#blokkli/types';
+import type { BlokkliIcon } from '#blokkli-build/icons';
 type PluginAddFunction<T> = () => T | T[] | undefined;
 type AddActionFunction = PluginAddFunction<AddAction>;
+export type ItemDropdownAction = {
+    id: string;
+    label: string;
+    description?: string;
+    enabled?: boolean;
+    icon?: BlokkliIcon;
+    bundle?: string;
+    weight?: number;
+    group: string;
+    callback: () => void;
+};
+type ItemDropdownActionFunction = PluginAddFunction<ItemDropdownAction>;
+export type MenuButtonPlugin = {
+    id: string;
+    title: string;
+    description: string;
+    icon?: BlokkliIcon;
+    type?: 'success' | 'danger' | 'yellow';
+    weight?: number;
+    secondary?: boolean;
+    disabled?: boolean;
+    callback: () => void;
+};
+type MenuButtonFunction = PluginAddFunction<MenuButtonPlugin>;
+type PluginFunctionMap = {
+    addAction: AddActionFunction;
+    itemDropdownAction: ItemDropdownActionFunction;
+    menuButton: MenuButtonFunction;
+};
+type PluginDataMap = {
+    addAction: AddAction;
+    itemDropdownAction: ItemDropdownAction;
+    menuButton: MenuButtonPlugin;
+};
 export type PluginProvider = {
-    addAddAction: (fn: AddActionFunction) => void;
-    removeAddAction: (fn: AddActionFunction) => void;
-    getAddActions: () => AddAction[];
+    add<T extends keyof PluginFunctionMap>(type: T, fn: PluginFunctionMap[T]): void;
+    remove<T extends keyof PluginFunctionMap>(type: T, fn: PluginFunctionMap[T]): void;
+    get<T extends keyof PluginDataMap>(type: T): PluginDataMap[T][];
 };
 export default function (): PluginProvider;
 export {};