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

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/domProvider.js

@@ -219,19 +219,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 !== "new") {
+      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 +253,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 +318,9 @@ export default function(ui, debug, definitions, state, element) {
       );
     }
   }
+  onBlokkliEvent("state:reload:before", () => {
+    observedElementCache.clear();
+  });
   onBlokkliEvent("state:reloaded", () => {
     observedElementCache.clear();
     if (stateReloadTimeout) {
@@ -387,7 +393,7 @@ export default function(ui, debug, definitions, state, element) {
     logger.log("registerBlock: " + uuid);
     blockUuidCurrentKey[uuid] = key;
     doInitTimeout();
-    if (!el) {
+    if (!(el instanceof HTMLElement)) {
       logger.log("registerBlock call unregisterBlock because no element", uuid);
       unregisterBlock(key, uuid);
       return;
@@ -400,25 +406,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];

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

@@ -34,7 +34,7 @@ export function getChildrenOrientation(element) {
 export function determineCanAddChildren(field, children, uuids, currentCount, itemsToAdd, draggingBundles) {
   if (field.cardinality !== -1) {
     const childrenThatAreSelection = children.filter((child) => {
-      const uuid = child.dataset.uuid;
+      const uuid = child.dataset.bkUuid;
       if (!uuid) {
         return false;
       }

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,26 @@
 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 PluginProvider = {
     addAddAction: (fn: AddActionFunction) => void;
     removeAddAction: (fn: AddActionFunction) => void;
     getAddActions: () => AddAction[];
+    addItemDropdownAction: (fn: ItemDropdownActionFunction) => void;
+    removeItemDropdownAction: (fn: ItemDropdownActionFunction) => void;
+    getItemDropdownActions: () => ItemDropdownAction[];
 };
 export default function (): PluginProvider;
 export {};

package/dist/runtime/helpers/pluginProvider.js

@@ -1,5 +1,6 @@
 export default function() {
   let addActions = [];
+  let itemDropdownActions = [];
   function addAddAction(fn) {
     addActions.push(fn);
   }
@@ -25,9 +26,37 @@ export default function() {
     }
     return actions;
   }
+  function addItemDropdownAction(fn) {
+    itemDropdownActions.push(fn);
+  }
+  function removeItemDropdownAction(fn) {
+    itemDropdownActions = itemDropdownActions.filter((v) => v !== fn);
+  }
+  function getItemDropdownActions() {
+    const actions = [];
+    for (let i = 0; i < itemDropdownActions.length; i++) {
+      const callback = itemDropdownActions[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
+    getAddActions,
+    addItemDropdownAction,
+    removeItemDropdownAction,
+    getItemDropdownActions
   };
 }

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

@@ -6,19 +6,22 @@ type EditableFieldData = EntityContext & {
     key: string;
     fieldName: string;
     directiveType: BlokkliDirectiveType;
+    isComponent: boolean;
+    getValue?: () => string;
 };
 type DroppableFieldElementData = EditableFieldData & {
     element: HTMLElement;
 };
 export type DirectiveProvider = {
     init: () => void;
-    registerDirectiveElement: (el: HTMLElement, fieldName: string, entity: EntityContext, type: BlokkliDirectiveType) => void;
+    registerDirectiveElement: (el: HTMLElement, fieldName: string, entity: EntityContext, type: BlokkliDirectiveType, isComponent: boolean, getValue?: () => string) => 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;
+    findEditable: (fieldName: string, host: EntityContext) => EditableFieldData | undefined;
     isReady: ComputedRef<boolean>;
 };
 export default function (debug: DebugProvider, ui: UiProvider): DirectiveProvider;

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

@@ -71,13 +71,15 @@ export default function(debug, ui) {
       rootMargin: "400px 0px 400px 0px"
     }
   );
-  function registerDirectiveElement(el, fieldName, entity, directiveType) {
+  function registerDirectiveElement(el, fieldName, entity, directiveType, isComponent, getValue) {
     const key = getEditableKey(fieldName, entity, directiveType);
     const data = {
       ...entity,
       fieldName,
       directiveType,
-      key
+      key,
+      isComponent,
+      getValue
     };
     elementMap.set(el, data);
     fieldData.set(key, data);
@@ -186,6 +188,10 @@ export default function(debug, ui) {
     const key = getEditableKey(fieldName, host, "editable");
     return elements.get(key);
   }
+  function findEditable(fieldName, host) {
+    const key = getEditableKey(fieldName, host, "editable");
+    return fieldData.get(key);
+  }
   onBlokkliEvent("state:reloaded", handleRefresh);
   onBlokkliEvent("ui:resized", handleRefresh);
   onBlokkliEvent("option:finish-change", handleRefresh);
@@ -200,6 +206,7 @@ export default function(debug, ui) {
     init,
     getVisible,
     getEditableAtPoint,
+    findEditable,
     getEditablesForBlock,
     findEditableElement,
     getDroppableElements,

package/dist/runtime/helpers/stateProvider.js

@@ -99,6 +99,7 @@ export default async function(adapter, context, $t, providerKey, permissions) {
     publishOptions.value.revisionLogMessage = newPublishOptions.revisionLogMessage;
   }
   function setContext(context2, override) {
+    eventBus.emit("state:reload:before");
     if (!override) {
       _mappedState = context2 ?? null;
     }

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

@@ -1,6 +1,6 @@
 import { type Ref, type ComputedRef } from 'vue';
 import type { StorageProvider } from './storageProvider.js';
-import type { AddListOrientation, Coord, Rectangle, Size } from '#blokkli/types';
+import type { AddListOrientation, Coord, Rectangle, SidebarRegion, Size } from '#blokkli/types';
 import type { Viewport } from '#blokkli/constants';
 import type { StateProvider } from './stateProvider.js';
 import type { AdapterContext } from '#blokkli/adapter';
@@ -52,5 +52,9 @@ export type UiProvider = {
     getViewportRelativeRect: (rect: Rectangle, scale?: number, offset?: Coord) => Rectangle;
     setBannerHeight: (id: string, height: number) => void;
     removeBanner: (id: string) => void;
+    setActiveSidebar: (region: SidebarRegion, id: string) => void;
+    removeActiveSidebar: (region: SidebarRegion, id: string) => void;
+    hasSidebarLeft: ComputedRef<boolean>;
+    hasSidebarRight: ComputedRef<boolean>;
 };
 export default function (providerElement: HTMLElement, storage: StorageProvider, state: StateProvider, context: ComputedRef<AdapterContext>, element: ElementProvider): UiProvider;