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

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

@@ -1,517 +0,0 @@
-import { reactive, ref, computed, onMounted } from "#imports";
-import { falsy } from "#blokkli/helpers";
-import { cloneElementWithStyles } from "../dom/index.js";
-import onBlokkliEvent from "../composables/onBlokkliEvent.js";
-import useDelayedIntersectionObserver from "../composables/useDelayedIntersectionObserver.js";
-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);
-      delete observedElements[uuid];
-      blockElementToUuid.delete(observedElement);
-    }
-    if (el) {
-      dragElementUuidMap.delete(el);
-    }
-    dragElementCache.delete(uuid);
-    registeredBlocks[uuid] = void 0;
-    delete blockRects[uuid];
-    delete blockUuidCurrentKey[uuid];
-    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/helpers/providers/dropArea.d.ts

@@ -1,47 +0,0 @@
-import type { DraggableItem, DropArea } from '#blokkli/types';
-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/helpers/providers/dropArea.js

@@ -1,22 +0,0 @@
-import { falsy } from "../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/helpers/providers/features.d.ts

@@ -1,56 +0,0 @@
-import type { FeatureDefinition, AdapterMethods } from '#blokkli/types';
-import { type ValidFeatureKey } from '#blokkli-build/features';
-import { type ComputedRef } from '#imports';
-import type { StorageProvider } from './storage.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/helpers/providers/features.js

@@ -1,53 +0,0 @@
-import {
-  featureDefinitions
-} from "#blokkli-build/features";
-import { computed, ref } from "#imports";
-import { falsy } from "../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
-  };
-}