@blokkli/editor 2.0.0-alpha.28 → 2.0.0-alpha.29

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

@@ -0,0 +1,519 @@
+import { reactive, ref, computed, onMounted } from "#imports";
+import { falsy } 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 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 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,
+    registeredBlocks: computed(() => registeredBlocks),
+    getBoundingClientRect
+  };
+}

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

@@ -0,0 +1,48 @@
+import type { DropArea } from '#blokkli/editor/types/ui';
+import type { DraggableItem } from '../types/draggable.js';
+type DropAreaProviderFunction = (items: DraggableItem[]) => DropArea[] | DropArea | undefined;
+export type DropAreaProvider = {
+    /**
+     * 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.
+     *
+     * @param fn - Function that returns drop areas based on dragged items
+     *
+     * @example
+     * ```ts
+     * dropArea.add((items) => {
+     *   // Only provide drop area for text blocks
+     *   if (items.every(item => item.bundle === 'text')) {
+     *     return {
+     *       id: 'custom-area',
+     *       label: 'Text Only Area',
+     *       accepts: (item) => item.bundle === 'text',
+     *     }
+     *   }
+     * })
+     * ```
+     */
+    add: (fn: DropAreaProviderFunction) => void;
+    /**
+     * Unregister a drop area provider function.
+     *
+     * Removes a previously registered function so it no longer provides drop areas.
+     *
+     * @param fn - The function to remove (must be the same reference used in add)
+     */
+    remove: (fn: DropAreaProviderFunction) => void;
+    /**
+     * Get all drop areas from all registered providers.
+     *
+     * Calls all registered provider functions with the dragged items,
+     * flattens the results, and filters out undefined values.
+     *
+     * @param items - The currently dragged items
+     * @returns Array of all available drop areas for these items
+     */
+    getDropAreas: (items: DraggableItem[]) => DropArea[];
+};
+export default function (): DropAreaProvider;
+export {};

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

@@ -0,0 +1,22 @@
+import { falsy } from "../../helpers/index.js";
+export default function() {
+  let functions = [];
+  const add = (fn) => {
+    functions.push(fn);
+  };
+  const remove = (fn) => {
+    functions = functions.filter((v) => v !== fn);
+  };
+  const getDropAreas = (items) => functions.flatMap((fn) => {
+    const v = fn(items);
+    if (v) {
+      return v;
+    }
+    return null;
+  }).filter(falsy);
+  return {
+    add,
+    remove,
+    getDropAreas
+  };
+}

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

@@ -0,0 +1,57 @@
+import { type ValidFeatureKey } from '#blokkli-build/features';
+import { type ComputedRef } from '#imports';
+import type { StorageProvider } from './storage.js';
+import type { AdapterMethods } from '#blokkli/editor/adapter';
+import type { FeatureDefinition } from '../types/features.js';
+export type FeaturesProvider = {
+    /**
+     * List of all registered feature definitions.
+     *
+     * Updates automatically via HMR during development.
+     */
+    features: ComputedRef<FeatureDefinition[]>;
+    /**
+     * List of currently mounted features.
+     *
+     * Features are mounted when their components are rendered in the editor.
+     * This list is used to track which features are active in the current session.
+     */
+    mountedFeatures: ComputedRef<FeatureDefinition<AdapterMethods[], ValidFeatureKey>[]>;
+    /**
+     * List of available beta features.
+     *
+     * Only includes features marked with `beta: true` in their definition.
+     * These features can be individually enabled/disabled by users.
+     */
+    betaFeatures: ComputedRef<{
+        id: ValidFeatureKey;
+        label: string;
+        description?: string;
+    }[]>;
+    /**
+     * List of beta features that are currently enabled.
+     *
+     * Derived from user settings stored in local storage.
+     * Users can toggle beta features on/off in the settings UI.
+     */
+    enabledBetaFeatures: ComputedRef<ValidFeatureKey[]>;
+    /**
+     * Mount a feature.
+     *
+     * Called when a feature component is mounted/rendered.
+     * Adds the feature to the mountedFeatures list.
+     *
+     * @param feature - The feature definition to mount
+     */
+    mount: (feature: FeatureDefinition<AdapterMethods[], ValidFeatureKey>) => void;
+    /**
+     * Unmount a feature.
+     *
+     * Called when a feature component is unmounted/destroyed.
+     * Removes the feature from the mountedFeatures list.
+     *
+     * @param id - The feature ID to unmount
+     */
+    unmount: (id: string) => void;
+};
+export default function (storage: StorageProvider): FeaturesProvider;

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

@@ -0,0 +1,53 @@
+import {
+  featureDefinitions
+} from "#blokkli-build/features";
+import { computed, ref } from "#imports";
+import { falsy } from "../../helpers/index.js";
+export default function(storage) {
+  const definitions = ref(featureDefinitions);
+  const mountedFeatures = ref([]);
+  if (import.meta.hot) {
+    import.meta.hot.accept("#blokkli-build/features", (mod) => {
+      const newDefinitions = mod;
+      definitions.value = newDefinitions?.featureDefinitions || [];
+    });
+  }
+  const settingsSettings = storage.use(
+    "feature:settings:settings",
+    {}
+  );
+  const enabledBetaFeatures = computed(() => {
+    return Object.entries(settingsSettings.value).map(([key, value]) => {
+      const [a, b] = key.split(":");
+      if (a === "beta" && b && value === true) {
+        return b;
+      }
+      return null;
+    }).filter(falsy);
+  });
+  const betaFeatures = computed(
+    () => definitions.value.map((v) => {
+      if (v.beta && v.label) {
+        return {
+          id: v.id,
+          label: v.label,
+          description: v.description
+        };
+      }
+    }).filter(falsy)
+  );
+  const unmount = (id) => {
+    mountedFeatures.value = mountedFeatures.value.filter((v) => v.id !== id);
+  };
+  const mount = (feature) => {
+    mountedFeatures.value.push(feature);
+  };
+  return {
+    features: computed(() => definitions.value),
+    mountedFeatures: computed(() => mountedFeatures.value),
+    betaFeatures,
+    enabledBetaFeatures,
+    mount,
+    unmount
+  };
+}