@blokkli/editor 2.0.0-alpha.4 → 2.0.0-alpha.41

package/dist/runtime/editor/providers/dom.js

@@ -0,0 +1,540 @@
+import { reactive, ref, computed, onMounted } from "#imports";
+import { falsy, onlyUnique } from "#blokkli/helpers";
+import { cloneElementWithStyles } from "../helpers/dom/index.js";
+import {
+  onBlokkliEvent,
+  useDelayedIntersectionObserver
+} from "#blokkli/editor/composables";
+function rectWithTime(rect, time) {
+  return {
+    ...rect,
+    time: time || performance.now()
+  };
+}
+export default function(ui, debug, state, element) {
+  const logger = debug.createLogger("DomProvider");
+  const mutationsReady = ref(true);
+  const intersectionReady = ref(false);
+  const registeredBlocks = reactive({});
+  const registeredFields = reactive({});
+  const visibleBlocks = /* @__PURE__ */ new Set();
+  const visibleFields = /* @__PURE__ */ new Set();
+  const fieldElementToFieldKey = /* @__PURE__ */ new WeakMap();
+  const blockElementToUuid = /* @__PURE__ */ new WeakMap();
+  const blockRects = {};
+  const fieldRects = {};
+  const blockUuidCurrentKey = {};
+  let initTimeout = null;
+  const isInitalizing = ref(true);
+  let settleTimeout = null;
+  const settleKey = ref(0);
+  const generallyAvailableFragments = computed(() => {
+    return Object.values(registeredFields).flatMap((field) => {
+      if (field && field.allowedFragments.length) {
+        return field.allowedFragments;
+      }
+      return null;
+    }).filter(falsy).filter(onlyUnique);
+  });
+  const observedElements = {};
+  function getBoundingClientRect(element2) {
+    logger.log("getBoundingClientRect", element2);
+    return element2.getBoundingClientRect();
+  }
+  const registeredBlockUuids = computed(() => {
+    return Object.entries(registeredBlocks).map(([uuid, element2]) => {
+      if (element2) {
+        return uuid;
+      }
+      return null;
+    }).filter(falsy);
+  });
+  const resizeObserver = new ResizeObserver(function(entries) {
+    for (const entry of entries) {
+      if (!(entry.target instanceof HTMLElement)) {
+        return;
+      }
+      const uuid = blockElementToUuid.get(entry.target);
+      if (!uuid) {
+        return;
+      }
+      if (!registeredBlocks[uuid]) {
+        continue;
+      }
+      const currentRect = blockRects[uuid];
+      const now = performance.now();
+      if (!currentRect) {
+        blockRects[uuid] = rectWithTime(
+          {
+            x: entry.contentRect.x,
+            y: entry.contentRect.y,
+            width: entry.borderBoxSize[0].inlineSize,
+            height: entry.borderBoxSize[0].blockSize
+          },
+          now
+        );
+        return;
+      }
+      if (currentRect.time > now) {
+        return;
+      }
+      blockRects[uuid].width = entry.borderBoxSize[0].inlineSize;
+      blockRects[uuid].height = entry.borderBoxSize[0].blockSize;
+      blockRects[uuid].time = now;
+    }
+  });
+  function intersectionCallback(entries) {
+    const scale = ui.artboardScale.value;
+    const offset = ui.artboardOffset.value;
+    for (const entry of entries) {
+      if (!(entry.target instanceof HTMLElement)) {
+        continue;
+      }
+      const fieldKey = fieldElementToFieldKey.get(entry.target);
+      const rect = entry.target.getBoundingClientRect();
+      if (fieldKey) {
+        if (entry.isIntersecting) {
+          visibleFields.add(fieldKey);
+        } else {
+          visibleFields.delete(fieldKey);
+        }
+        fieldRects[fieldKey] = ui.getAbsoluteElementRect(rect, scale, offset);
+        continue;
+      }
+      const uuid = blockElementToUuid.get(entry.target);
+      if (!uuid) {
+        continue;
+      }
+      if (!registeredBlocks[uuid]) {
+        continue;
+      }
+      const newRect = ui.getAbsoluteElementRect(rect, scale, offset);
+      const currentRect = blockRects[uuid];
+      if (currentRect) {
+        if (currentRect.time > entry.time) {
+          blockRects[uuid].x = newRect.x;
+          blockRects[uuid].y = newRect.y;
+        } else {
+          blockRects[uuid] = rectWithTime(newRect, entry.time);
+        }
+      } else {
+        blockRects[uuid] = rectWithTime(newRect, entry.time);
+      }
+      if (entry.isIntersecting) {
+        visibleBlocks.add(uuid);
+      } else {
+        visibleBlocks.delete(uuid);
+      }
+    }
+  }
+  const intersectionObserver = useDelayedIntersectionObserver(
+    intersectionCallback,
+    {
+      rootMargin: "400px 0px 400px 0px"
+    }
+  );
+  const registeredFieldTypes = computed(() => {
+    const fields = Object.values(registeredFields);
+    const found = /* @__PURE__ */ new Set();
+    const uniqueFieldTypes = [];
+    for (let i = 0; i < fields.length; i++) {
+      const field = fields[i];
+      if (field) {
+        const key = `${field.entity.type}:${field.entity.bundle}:${field.fieldName}`;
+        if (!found.has(key)) {
+          uniqueFieldTypes.push({
+            entityType: field.entity.type,
+            entityBundle: field.entity.bundle,
+            fieldName: field.fieldName
+          });
+          found.add(key);
+        }
+      }
+    }
+    return uniqueFieldTypes;
+  });
+  const registerField = (entity, fieldName, element2, data) => {
+    const key = `${entity.uuid}:${fieldName}`;
+    registeredFields[key] = {
+      element: element2,
+      entity,
+      fieldName,
+      ...data
+    };
+    intersectionObserver.observe(element2);
+    fieldElementToFieldKey.set(element2, key);
+    doInitTimeout();
+    doSettleTimeout();
+  };
+  const updateFieldElement = (entity, fieldName, element2, data) => {
+    const key = `${entity.uuid}:${fieldName}`;
+    const existingElement = registeredFields[key]?.element;
+    if (existingElement) {
+      intersectionObserver.unobserve(existingElement);
+    }
+    registeredFields[key] = {
+      entity,
+      fieldName,
+      element: element2,
+      ...data
+    };
+    fieldElementToFieldKey.set(element2, key);
+    intersectionObserver.observe(element2);
+  };
+  const unregisterField = (entity, fieldName) => {
+    const key = `${entity.uuid}:${fieldName}`;
+    const el = registeredFields[key]?.element;
+    if (el) {
+      intersectionObserver.unobserve(el);
+      fieldElementToFieldKey.delete(el);
+    }
+    visibleFields.delete(key);
+    registeredFields[key] = void 0;
+    doSettleTimeout();
+  };
+  const getRegisteredField = (uuid, fieldName) => {
+    const key = `${uuid}:${fieldName}`;
+    return registeredFields[key];
+  };
+  const getFieldsAllowingFragment = (fragmentName) => {
+    const results = [];
+    for (const field of Object.values(registeredFields)) {
+      if (field && field.allowedFragments.includes(
+        fragmentName
+      )) {
+        results.push(field);
+      }
+    }
+    return results;
+  };
+  const getDropElementMarkup = (item, checkSize) => {
+    const getElement = () => {
+      if ("itemType" in item) {
+        if (item.itemType === "existing") {
+          return getDragElement(item);
+        }
+        return item.element();
+      }
+      return getDragElement(item);
+    };
+    const el = getElement();
+    if (!el) {
+      return "";
+    }
+    if ("itemType" in item && item.itemType !== "existing_structure") {
+      return el.outerHTML;
+    }
+    const childCount = element.queryAll(
+      el,
+      "*",
+      "Get child count for drop element markup."
+    ).length;
+    if (checkSize && childCount > 80) {
+      return "";
+    }
+    return cloneElementWithStyles(el, true).replace(/\sdata-\w+="[^"]*"/g, "");
+  };
+  const getVisibleBlocks = () => Array.from(visibleBlocks);
+  const getVisibleFields = () => Array.from(visibleFields);
+  function getBlockRects() {
+    return blockRects;
+  }
+  function getBlockRect(uuid, refresh) {
+    if (refresh) {
+      refreshBlockRect(uuid);
+    }
+    return blockRects[uuid];
+  }
+  function getFieldRect(key) {
+    return fieldRects[key];
+  }
+  function refreshBlockRect(uuid, providedOffset, providedScale) {
+    const offset = providedOffset ?? ui.artboardOffset.value;
+    const scale = providedScale ?? ui.artboardScale.value;
+    const el = registeredBlocks[uuid];
+    if (!el) {
+      return;
+    }
+    const item = state.getFieldListItem(uuid);
+    if (!item) {
+      return;
+    }
+    const fieldList = state.getFieldListForBlock(item.uuid);
+    if (!fieldList) {
+      return;
+    }
+    blockRects[uuid] = rectWithTime(
+      ui.getAbsoluteElementRect(el.getBoundingClientRect(), scale, offset)
+    );
+  }
+  function refreshFieldRect(key) {
+    const el = registeredFields[key]?.element;
+    if (!(el instanceof HTMLElement)) {
+      return;
+    }
+    fieldRects[key] = ui.getAbsoluteElementRect(el.getBoundingClientRect());
+  }
+  let stateReloadTimeout = null;
+  function getUuidsToUpdateRectsFor() {
+    const allUuids = Object.keys(registeredBlocks);
+    if (allUuids.length < 150) {
+      return allUuids;
+    }
+    return getVisibleBlocks();
+  }
+  function updateVisibleRects() {
+    logger.log("Update visible rects");
+    const toUpdate = getUuidsToUpdateRectsFor();
+    const offset = ui.artboardOffset.value;
+    const scale = ui.artboardScale.value;
+    for (let i = 0; i < toUpdate.length; i++) {
+      const uuid = toUpdate[i];
+      if (uuid) {
+        refreshBlockRect(uuid, offset, scale);
+      }
+    }
+    const visibleFieldKeys = getVisibleFields();
+    for (let i = 0; i < visibleFieldKeys.length; i++) {
+      const key = visibleFieldKeys[i];
+      const field = registeredFields[key];
+      if (!field) {
+        continue;
+      }
+      fieldRects[key] = ui.getAbsoluteElementRect(
+        field.element.getBoundingClientRect(),
+        scale,
+        offset
+      );
+    }
+  }
+  onBlokkliEvent("state:reloaded", () => {
+    if (stateReloadTimeout) {
+      window.clearTimeout(stateReloadTimeout);
+    }
+    const allUuids = Object.keys(registeredBlocks);
+    if (allUuids.length < 150) {
+      updateVisibleRects();
+    }
+    stateReloadTimeout = window.setTimeout(updateVisibleRects, 300);
+    doSettleTimeout();
+  });
+  function forceRefresh() {
+    updateVisibleRects();
+    getVisibleFields().forEach(refreshFieldRect);
+    logger.log("Refreshed all visible rects");
+  }
+  onBlokkliEvent("option:finish-change", forceRefresh);
+  onBlokkliEvent("ui:resized", forceRefresh);
+  function init() {
+    intersectionObserver.init();
+    intersectionReady.value = true;
+    logger.log("IntersectionObserver initialized");
+  }
+  const dragElementUuidMap = /* @__PURE__ */ new WeakMap();
+  const dragElementCache = /* @__PURE__ */ new Map();
+  function getDragElement(block) {
+    const item = "itemType" in block ? block.block : block;
+    if (!item) {
+      return;
+    }
+    return registeredBlocks[item.uuid];
+  }
+  function isBlockVisible(uuid) {
+    return visibleBlocks.has(uuid);
+  }
+  function refreshAllBlockRects() {
+    const uuids = Object.keys(blockRects);
+    if (uuids.length < 200) {
+      for (let i = 0; i < uuids.length; i++) {
+        const uuid = uuids[i];
+        if (!uuid) {
+          continue;
+        }
+        refreshBlockRect(uuid);
+      }
+    }
+  }
+  function doInitTimeout() {
+    if (initTimeout) {
+      window.clearTimeout(initTimeout);
+    }
+    if (isInitalizing.value) {
+      initTimeout = window.setTimeout(() => {
+        isInitalizing.value = false;
+        refreshAllBlockRects();
+      }, 500);
+    }
+  }
+  function doSettleTimeout() {
+    if (settleTimeout) {
+      window.clearTimeout(settleTimeout);
+    }
+    settleTimeout = window.setTimeout(() => {
+      settleKey.value++;
+    }, 50);
+  }
+  function registerBlock(key, uuid, el) {
+    logger.log("registerBlock: " + uuid);
+    blockUuidCurrentKey[uuid] = key;
+    doInitTimeout();
+    doSettleTimeout();
+    if (!(el instanceof HTMLElement)) {
+      logger.log("registerBlock call unregisterBlock because no element", uuid);
+      unregisterBlock(key, uuid);
+      return;
+    }
+    if (registeredBlocks[uuid]) {
+      logger.log(
+        "registerBlock call unregisterBlock because already registered",
+        uuid
+      );
+      unregisterBlock(key, uuid);
+    }
+    const item = state.getFieldListItem(uuid);
+    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
+      );
+    }
+    blockElementToUuid.set(el, uuid);
+    registeredBlocks[uuid] = el;
+    observedElements[uuid] = el;
+    intersectionObserver.observe(el);
+    resizeObserver.observe(el);
+  }
+  function unregisterBlock(key, uuid) {
+    const currentKey = blockUuidCurrentKey[uuid];
+    if (currentKey && currentKey !== key) {
+      return;
+    }
+    doSettleTimeout();
+    logger.log("unregisterBlock: " + uuid);
+    const el = registeredBlocks[uuid];
+    const observedElement = observedElements[uuid];
+    if (observedElement) {
+      intersectionObserver.unobserve(observedElement);
+      resizeObserver.unobserve(observedElement);
+      observedElements[uuid] = void 0;
+      blockElementToUuid.delete(observedElement);
+    }
+    if (el) {
+      dragElementUuidMap.delete(el);
+    }
+    dragElementCache.delete(uuid);
+    registeredBlocks[uuid] = void 0;
+    blockRects[uuid] = void 0;
+    blockUuidCurrentKey[uuid] = void 0;
+    visibleBlocks.delete(uuid);
+  }
+  function getDebugData() {
+    const allUuids = /* @__PURE__ */ new Set([
+      ...Object.keys(registeredBlocks),
+      ...Object.keys(blockRects),
+      ...Object.keys(observedElements),
+      ...Object.keys(blockUuidCurrentKey)
+    ]);
+    const blocksInfo = Array.from(allUuids).map((uuid) => {
+      const el = registeredBlocks[uuid];
+      return {
+        uuid,
+        hasElement: !!el,
+        hasObservedElement: !!observedElements[uuid],
+        hasRect: !!blockRects[uuid],
+        hasCurrentKey: !!blockUuidCurrentKey[uuid],
+        isVisible: visibleBlocks.has(uuid),
+        elementInfo: el ? {
+          tagName: el.tagName,
+          bundle: el.dataset.itemBundle,
+          hostBundle: el.dataset.hostBundle,
+          fieldListType: el.dataset.hostFieldListType
+        } : void 0
+      };
+    });
+    const fieldsInfo = Object.entries(registeredFields).filter(([, field]) => !!field).map(([key, field]) => ({
+      key,
+      isVisible: visibleFields.has(key),
+      hasRect: !!fieldRects[key],
+      entityType: field.entity.type,
+      entityBundle: field.entity.bundle,
+      fieldName: field.fieldName
+    }));
+    const registeredUuids = new Set(
+      Object.entries(registeredBlocks).filter(([, el]) => !!el).map(([uuid]) => uuid)
+    );
+    const rectsWithoutRegistration = Object.keys(blockRects).filter(
+      (uuid) => !registeredUuids.has(uuid)
+    );
+    const observedElementsWithoutRegistration = Object.keys(
+      observedElements
+    ).filter((uuid) => !registeredUuids.has(uuid));
+    const keysWithoutRegistration = Object.keys(blockUuidCurrentKey).filter(
+      (uuid) => !registeredUuids.has(uuid)
+    );
+    return {
+      registeredBlocks: blocksInfo,
+      fields: fieldsInfo,
+      summary: {
+        totalRegisteredBlocks: Object.keys(registeredBlocks).length,
+        totalBlocksWithElements: Object.values(registeredBlocks).filter(
+          (el) => !!el
+        ).length,
+        totalObservedElements: Object.keys(observedElements).length,
+        totalBlockRects: Object.keys(blockRects).length,
+        totalVisibleBlocks: visibleBlocks.size,
+        totalRegisteredFields: Object.values(registeredFields).filter(
+          (f) => !!f
+        ).length,
+        totalVisibleFields: visibleFields.size,
+        totalFieldRects: Object.keys(fieldRects).length,
+        isInitializing: isInitalizing.value,
+        isReady: mutationsReady.value && intersectionReady.value && !isInitalizing.value
+      },
+      orphanedData: {
+        rectsWithoutRegistration,
+        observedElementsWithoutRegistration,
+        keysWithoutRegistration
+      }
+    };
+  }
+  onMounted(() => {
+    doInitTimeout();
+  });
+  return {
+    getDropElementMarkup,
+    getVisibleBlocks,
+    getVisibleFields,
+    registerField,
+    unregisterField,
+    updateFieldElement,
+    getBlockRects,
+    getBlockRect,
+    getFieldRect,
+    refreshBlockRect,
+    isBlockVisible,
+    isReady: computed(
+      () => mutationsReady.value && intersectionReady.value && !isInitalizing.value
+    ),
+    settleKey: computed(() => settleKey.value),
+    init,
+    getDragElement,
+    updateVisibleRects,
+    registeredFieldTypes,
+    registerBlock,
+    unregisterBlock,
+    registeredBlockUuids,
+    getDebugData,
+    getRegisteredField,
+    getFieldsAllowingFragment,
+    registeredBlocks: computed(() => registeredBlocks),
+    getBoundingClientRect,
+    generallyAvailableFragments
+  };
+}

package/dist/runtime/editor/providers/dragdrop.d.ts

@@ -0,0 +1,55 @@
+import type { DraggableItemTypes, DraggableItem } from '../types/draggable.js';
+import type { BlokkliFieldElement, BlokkliItemHost } from '#blokkli/editor/types/field';
+import type { DropArea } from '#blokkli/editor/types/ui';
+type MaybePromise<T> = T | Promise<T>;
+export type DropResolveContext<K extends keyof DraggableItemTypes> = {
+    items: DraggableItemTypes[K][];
+    field: BlokkliFieldElement;
+    host: BlokkliItemHost;
+    afterUuid: string | null;
+};
+export type DropExecuteContext<K extends keyof DraggableItemTypes> = DropResolveContext<K> & {
+    bundle: string;
+};
+export type DropExecuteResult = {
+    /** If true, the dispatcher will focus the editable field after the block is added. */
+    focusEditable?: boolean;
+};
+export type DropHandler<K extends keyof DraggableItemTypes> = {
+    /**
+     * Optional. Called at drop time to refine which bundles are applicable.
+     * Can read DataTransfer, detect content types, re-map via clipboardMapBundle, etc.
+     * Returns the refined list of possible bundles.
+     * If omitted, the overlay calls execute() directly without bundle resolution.
+     */
+    resolveBundles?: (ctx: DropResolveContext<K>) => string[] | Promise<string[]>;
+    /**
+     * Called to perform the actual mutation.
+     * If resolveBundles was provided, `ctx.bundle` is the resolved bundle
+     * (either the single result or the user's BundleSelector pick).
+     */
+    execute: (ctx: DropExecuteContext<K>) => MaybePromise<DropExecuteResult | void>;
+};
+type DropAreaProviderFunction = (items: DraggableItem[]) => DropArea[] | DropArea | undefined;
+export type DragDropProvider = {
+    registerDropHandler: <K extends keyof DraggableItemTypes>(itemType: K, handler: DropHandler<K>) => void;
+    unregisterDropHandler: <K extends keyof DraggableItemTypes>(itemType: K, handler: DropHandler<K>) => void;
+    getDropHandler: <K extends keyof DraggableItemTypes>(itemType: K) => DropHandler<K> | undefined;
+    /**
+     * Register a drop area provider function.
+     *
+     * The function will be called when drop areas are requested during drag operations.
+     * It receives the currently dragged items and can return drop areas where those items can be dropped.
+     */
+    addDropArea: (fn: DropAreaProviderFunction) => void;
+    /**
+     * Unregister a drop area provider function.
+     */
+    removeDropArea: (fn: DropAreaProviderFunction) => void;
+    /**
+     * Get all drop areas from all registered providers.
+     */
+    getDropAreas: (items: DraggableItem[]) => DropArea[];
+};
+export default function (): DragDropProvider;
+export {};

package/dist/runtime/editor/providers/dragdrop.js

@@ -0,0 +1,37 @@
+import { falsy } from "../../helpers/index.js";
+export default function() {
+  const handlers = /* @__PURE__ */ new Map();
+  let dropAreaFunctions = [];
+  const registerDropHandler = (itemType, handler) => {
+    handlers.set(itemType, handler);
+  };
+  const unregisterDropHandler = (itemType, handler) => {
+    if (handlers.get(itemType) === handler) {
+      handlers.delete(itemType);
+    }
+  };
+  const getDropHandler = (itemType) => {
+    return handlers.get(itemType);
+  };
+  const addDropArea = (fn) => {
+    dropAreaFunctions.push(fn);
+  };
+  const removeDropArea = (fn) => {
+    dropAreaFunctions = dropAreaFunctions.filter((v) => v !== fn);
+  };
+  const getDropAreas = (items) => dropAreaFunctions.flatMap((fn) => {
+    const v = fn(items);
+    if (v) {
+      return v;
+    }
+    return null;
+  }).filter(falsy);
+  return {
+    registerDropHandler,
+    unregisterDropHandler,
+    getDropHandler,
+    addDropArea,
+    removeDropArea,
+    getDropAreas
+  };
+}

package/dist/runtime/editor/providers/element.d.ts

@@ -0,0 +1,63 @@
+import type { DebugProvider } from './debug.js';
+export type ElementProvider = {
+    /**
+     * Query all matching elements with debug logging.
+     *
+     * Wrapper around `querySelectorAll` that:
+     * - Logs the query and reason to debug console
+     * - Filters out non-HTMLElement results
+     * - Optionally maps/transforms results
+     * - Filters out null/undefined mapped results
+     *
+     * @param target - Element or document to query within
+     * @param query - CSS selector string
+     * @param reason - Human-readable reason for the query (for debugging)
+     * @param map - Optional function to transform each matched element
+     * @returns Array of matched (and optionally transformed) elements
+     *
+     * @example
+     * ```ts
+     * // Get all buttons
+     * const buttons = element.queryAll(document, 'button', 'Get all buttons')
+     *
+     * // Get all buttons with data attributes
+     * const buttonData = element.queryAll(
+     *   document,
+     *   'button[data-action]',
+     *   'Get action buttons',
+     *   (el) => el.dataset.action
+     * )
+     * ```
+     */
+    queryAll: <T = HTMLElement>(target: HTMLElement | Document, query: string, reason: string, map?: (v: HTMLElement) => T | null | undefined) => T[];
+    /**
+     * Query the first matching element with debug logging.
+     *
+     * Wrapper around `querySelector` that:
+     * - Logs the query and reason to debug console
+     * - Returns null if no match or match is not HTMLElement
+     * - Optionally maps/transforms the result
+     *
+     * @param target - Element or document to query within
+     * @param query - CSS selector string
+     * @param reason - Human-readable reason for the query (for debugging)
+     * @param map - Optional function to transform the matched element
+     * @returns The first matched (and optionally transformed) element, or null
+     *
+     * @example
+     * ```ts
+     * // Get first button
+     * const button = element.query(document, 'button', 'Get first button')
+     *
+     * // Get button action
+     * const action = element.query(
+     *   document,
+     *   'button[data-action]',
+     *   'Get action button',
+     *   (el) => el.dataset.action
+     * )
+     * ```
+     */
+    query: <T = HTMLElement>(target: HTMLElement | Document, query: string, reason: string, map?: (v: HTMLElement) => T | null | undefined) => T | null;
+};
+export default function (debug: DebugProvider): ElementProvider;