@blokkli/editor 2.0.0-alpha.16 → 2.0.0-alpha.18

package/dist/runtime/helpers/domProvider.js

@@ -1,54 +1,20 @@
 import { reactive, ref, computed } from "#imports";
 import {
   findClosestBlock,
-  buildDraggableItem,
   falsy,
-  mapDroppableField,
   findClosestEntityContext
 } from "#blokkli/helpers";
 import { cloneElementWithStyles } from "./dom/index.js";
 import onBlokkliEvent from "./composables/onBlokkliEvent.js";
 import useDelayedIntersectionObserver from "./composables/useDelayedIntersectionObserver.js";
-const buildFieldElement = (element) => {
-  const key = element.dataset.fieldKey;
-  const name = element.dataset.fieldName;
-  const label = element.dataset.fieldLabel;
-  const isNested = element.dataset.fieldIsNested === "true";
-  const nestingLevel = Number.parseInt(element.dataset.bkNestingLevel || "0");
-  const fieldListType = element.dataset.fieldListType;
-  const hostEntityType = element.dataset.hostEntityType;
-  const hostEntityBundle = element.dataset.hostEntityBundle;
-  const hostEntityUuid = element.dataset.hostEntityUuid;
-  const dropAlignment = element.dataset.fieldDropAlignment;
-  const cardinality = Number.parseInt(element.dataset.fieldCardinality || "-1");
-  const allowedBundles = (element.dataset.fieldAllowedBundles || "").split(",").filter(Boolean);
-  const allowedFragments = (element.dataset.allowedFragments || "").split(",").filter(Boolean);
-  if (key && name && label && hostEntityType && hostEntityUuid && hostEntityBundle && fieldListType) {
-    return {
-      key,
-      name,
-      label,
-      isNested,
-      nestingLevel,
-      hostEntityType,
-      hostEntityUuid,
-      hostEntityBundle,
-      cardinality: Number.isNaN(cardinality) ? -1 : cardinality,
-      allowedBundles,
-      allowedFragments,
-      fieldListType,
-      element,
-      dropAlignment: dropAlignment === "vertical" || dropAlignment === "horizontal" ? dropAlignment : void 0
-    };
-  }
-};
+import { itemEntityType } from "#blokkli-build/config";
 function rectWithTime(rect, time) {
   return {
     ...rect,
     time: time || performance.now()
   };
 }
-export default function(ui, debug, definitions) {
+export default function(ui, debug, definitions, state, element) {
   const logger = debug.createLogger("DomProvider");
   const mutationsReady = ref(true);
   const intersectionReady = ref(false);
@@ -59,13 +25,13 @@ export default function(ui, debug, definitions) {
   const blockRects = {};
   const fieldRects = {};
   const blockUuidCurrentKey = {};
-  let draggableBlockCache = {};
+  const observedElements = {};
   let initTimeout = null;
   const isInitalizing = ref(true);
   const observedElementCache = /* @__PURE__ */ new Map();
   const registeredBlockUuids = computed(() => {
-    return Object.entries(registeredBlocks).map(([uuid, element]) => {
-      if (element) {
+    return Object.entries(registeredBlocks).map(([uuid, element2]) => {
+      if (element2) {
         return uuid;
       }
       return null;
@@ -80,6 +46,9 @@ export default function(ui, debug, definitions) {
       if (!uuid) {
         return;
       }
+      if (!registeredBlocks[uuid]) {
+        continue;
+      }
       const currentRect = blockRects[uuid];
       const now = performance.now();
       if (!currentRect) {
@@ -118,6 +87,9 @@ export default function(ui, debug, definitions) {
           }
           fieldRects[fieldKey] = ui.getAbsoluteElementRect(rect, scale, offset);
         } else if (uuid) {
+          if (!registeredBlocks[uuid]) {
+            continue;
+          }
           const newRect = ui.getAbsoluteElementRect(rect, scale, offset);
           const currentRect = blockRects[uuid];
           if (currentRect) {
@@ -165,19 +137,30 @@ export default function(ui, debug, definitions) {
     }
     return uniqueFieldTypes;
   });
-  const registerField = (entity, fieldName, element) => {
+  const registerField = (entity, fieldName, element2, data) => {
     const key = `${entity.uuid}:${fieldName}`;
-    registeredFields[key] = { element, entity, fieldName };
-    intersectionObserver.observe(element);
+    registeredFields[key] = {
+      element: element2,
+      entity,
+      fieldName,
+      ...data
+    };
+    intersectionObserver.observe(element2);
+    doInitTimeout();
   };
-  const updateFieldElement = (entity, fieldName, element) => {
+  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 };
-    intersectionObserver.observe(element);
+    registeredFields[key] = {
+      entity,
+      fieldName,
+      element: element2,
+      ...data
+    };
+    intersectionObserver.observe(element2);
   };
   const unregisterField = (entity, fieldName) => {
     const key = `${entity.uuid}:${fieldName}`;
@@ -188,6 +171,10 @@ export default function(ui, debug, definitions) {
     visibleFields.delete(key);
     registeredFields[key] = void 0;
   };
+  const getRegisteredField = (uuid, fieldName) => {
+    const key = `${uuid}:${fieldName}`;
+    return registeredFields[key];
+  };
   function getElementToObserve(uuid, el, bundle, fieldListType, parentBlockBundle) {
     if (el.classList.contains("bk-block-proxy")) {
       return el;
@@ -213,40 +200,26 @@ export default function(ui, debug, definitions) {
     observedElementCache.set(key, el);
     return el;
   }
-  const findBlock = (uuid) => {
-    const cached = draggableBlockCache[uuid];
-    if (cached) {
-      return cached;
-    }
-    const el = registeredBlocks[uuid];
-    if (!el) {
-      return;
-    }
-    const item = buildDraggableItem(el);
-    if (item?.itemType === "existing") {
-      draggableBlockCache[uuid] = item;
-      return item;
-    }
-  };
-  const getAllBlocks = () => {
-    return [
-      ...document.querySelectorAll(
-        '[data-blokkli-provider-active="true"] [data-uuid]'
-      )
-    ].map((v) => {
-      const item = buildDraggableItem(v);
-      if (item?.itemType === "existing") {
-        return item;
-      }
-    }).filter(falsy);
-  };
   const getDropElementMarkup = (item, checkSize) => {
-    const el = item.itemType === "existing" ? getDragElement(item) : item.element();
+    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 "";
     }
-    const dropElement = el.querySelector(".bk-drop-element") || el;
-    const childCount = dropElement.querySelectorAll("*").length;
+    const dropElement = element.query(el, ".bk-drop-element", "Find drop element for markup.") || el;
+    const childCount = element.queryAll(
+      dropElement,
+      "*",
+      "Get child count for drop element markup."
+    ).length;
     if (checkSize && childCount > 80) {
       return "";
     }
@@ -255,32 +228,8 @@ export default function(ui, debug, definitions) {
       ""
     );
   };
-  const findField = (uuid, fieldName) => {
-    const el = document.querySelector(
-      `[data-field-name="${fieldName}"][data-host-entity-uuid="${uuid}"]`
-    );
-    if (!(el instanceof HTMLElement)) {
-      return;
-    }
-    return buildFieldElement(el);
-  };
-  const getAllDroppableFields = () => [...document.querySelectorAll("[data-blokkli-droppable-field]")].filter((el) => {
-    return !el.closest('[data-bk-in-proxy="true"]');
-  }).map(mapDroppableField);
   const getVisibleBlocks = () => Array.from(visibleBlocks);
   const getVisibleFields = () => Array.from(visibleFields);
-  const getActiveProviderElement = () => {
-    const el = document.querySelector('[data-blokkli-provider-active="true"]');
-    if (!el) {
-      throw new Error("Failed to find active <BlokkliProvider> element.");
-    }
-    if (!(el instanceof HTMLElement)) {
-      throw new TypeError(
-        "The root element of the active <BlokkliProvider> is not an HTMLElement."
-      );
-    }
-    return el;
-  };
   function getBlockRects() {
     return blockRects;
   }
@@ -322,9 +271,7 @@ export default function(ui, debug, definitions) {
     );
   }
   function refreshFieldRect(key) {
-    const el = document.querySelector(
-      `.bk-draggable-list-container[data-field-key="${key}"]`
-    );
+    const el = registeredFields[key]?.element;
     if (!(el instanceof HTMLElement)) {
       return;
     }
@@ -365,7 +312,6 @@ export default function(ui, debug, definitions) {
   }
   onBlokkliEvent("state:reloaded", () => {
     observedElementCache.clear();
-    draggableBlockCache = {};
     if (stateReloadTimeout) {
       window.clearTimeout(stateReloadTimeout);
     }
@@ -375,11 +321,13 @@ export default function(ui, debug, definitions) {
     }
     stateReloadTimeout = window.setTimeout(updateVisibleRects, 300);
   });
-  onBlokkliEvent("ui:resized", function() {
+  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;
@@ -388,16 +336,20 @@ export default function(ui, debug, definitions) {
   const dragElementUuidMap = /* @__PURE__ */ new WeakMap();
   const dragElementCache = /* @__PURE__ */ new Map();
   function getDragElement(block) {
-    const el = block.element();
+    const item = "itemType" in block ? block.block : block;
+    if (!item) {
+      return;
+    }
+    const el = registeredBlocks[item.uuid];
     if (!el) {
-      return void 0;
+      return;
     }
     return getElementToObserve(
-      block.uuid,
+      item.uuid,
       el,
-      block.itemBundle,
-      block.hostFieldListType,
-      block.hostBundle
+      item.bundle,
+      item.fieldListType,
+      item.parentBlockBundle
     );
   }
   function isBlockVisible(uuid) {
@@ -415,9 +367,7 @@ export default function(ui, debug, definitions) {
       }
     }
   }
-  function registerBlock(key, uuid, el) {
-    logger.log("registerBlock: " + uuid);
-    blockUuidCurrentKey[uuid] = key;
+  function doInitTimeout() {
     if (initTimeout) {
       window.clearTimeout(initTimeout);
     }
@@ -427,6 +377,11 @@ export default function(ui, debug, definitions) {
         refreshAllBlockRects();
       }, 500);
     }
+  }
+  function registerBlock(key, uuid, el) {
+    logger.log("registerBlock: " + uuid);
+    blockUuidCurrentKey[uuid] = key;
+    doInitTimeout();
     if (!el) {
       logger.log("registerBlock call unregisterBlock because no element", uuid);
       unregisterBlock(key, uuid);
@@ -439,18 +394,24 @@ export default function(ui, debug, definitions) {
       );
       unregisterBlock(key, uuid);
     }
-    const item = buildDraggableItem(el);
-    if (item && item.itemType === "existing") {
-      const observableElement = getElementToObserve(
-        item.uuid,
-        el,
-        item.itemBundle,
-        item.hostFieldListType,
-        item.hostBundle
-      );
-      intersectionObserver.observe(observableElement);
-      resizeObserver.observe(observableElement);
-      registeredBlocks[item.uuid] = el;
+    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
+        );
+        registeredBlocks[uuid] = el;
+        observedElements[uuid] = observableElement;
+        intersectionObserver.observe(observableElement);
+        resizeObserver.observe(observableElement);
+      }
     }
   }
   function unregisterBlock(key, uuid) {
@@ -460,30 +421,100 @@ export default function(ui, debug, definitions) {
     }
     logger.log("unregisterBlock: " + uuid);
     const el = registeredBlocks[uuid];
+    const observedElement = observedElements[uuid];
+    if (observedElement) {
+      intersectionObserver.unobserve(observedElement);
+      resizeObserver.unobserve(observedElement);
+      delete observedElements[uuid];
+    }
     if (el) {
-      intersectionObserver.unobserve(el);
-      resizeObserver.unobserve(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
+      }
+    };
+  }
   return {
-    findBlock,
-    getAllBlocks,
     findClosestBlock,
     getDropElementMarkup,
-    findField,
-    getAllDroppableFields,
     findClosestEntityContext,
     getVisibleBlocks,
     getVisibleFields,
     registerField,
     unregisterField,
     updateFieldElement,
-    getActiveProviderElement,
     getBlockRects,
     getBlockRect,
     getFieldRect,
@@ -498,6 +529,9 @@ export default function(ui, debug, definitions) {
     registeredFieldTypes,
     registerBlock,
     unregisterBlock,
-    registeredBlockUuids
+    registeredBlockUuids,
+    getDebugData,
+    getRegisteredField,
+    registeredBlocks: computed(() => registeredBlocks)
   };
 }

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

@@ -1,4 +1,4 @@
-import type { DraggableItem, Rectangle, DroppableEntityField, DraggableExistingBlock, EntityContext, Coord, LibraryItemProps, Size } from '#blokkli/types';
+import type { DraggableItem, Rectangle, DraggableExistingBlock, EntityContext, Coord, LibraryItemProps, Size } from '#blokkli/types';
 import type { RGB } from '#blokkli/types/theme';
 /**
  * Type check for falsy values.
@@ -11,7 +11,6 @@ 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 findElement(uuid: string): HTMLElement | undefined;
 export declare function onlyUnique(value: string, index: number, self: Array<string>): boolean;
 /**
  * Convert a date to a relative time string, such as
@@ -83,12 +82,6 @@ export declare const findClosestBlock: (el: Element | EventTarget) => DraggableE
  */
 export declare const findClosestEntityContext: (el: HTMLElement) => EntityContext | undefined;
 export declare const findParentContext: (el: HTMLElement) => EntityContext | DraggableExistingBlock | undefined;
-/**
- * Maps a HTMLElement to a DroppableEntityField.
- */
-export declare const mapDroppableField: (el: Element) => DroppableEntityField;
-export declare const originatesFromEditable: (e: MouseEvent | TouchEvent) => HTMLElement | undefined;
-export declare const getOriginatingDroppableElement: (e: MouseEvent | TouchEvent) => HTMLElement | undefined;
 export declare const originatesFromTextInput: (e: Event) => boolean;
 export declare function getFieldKey(uuid: string, fieldName: string): string;
 export declare function getInteractionCoordinates(e: MouseEvent | TouchEvent): Coord;

package/dist/runtime/helpers/index.js

@@ -1,5 +1,4 @@
 import { easeOutSine } from "./easing.js";
-import { useRuntimeConfig } from "#imports";
 export function falsy(value) {
   return value !== null && value !== void 0;
 }
@@ -7,44 +6,8 @@ export function buildDraggableItem(element) {
   if (!(element instanceof HTMLElement)) {
     return;
   }
-  const itemEntityType = useRuntimeConfig().public.blokkli.itemEntityType;
   const dataset = element.dataset;
-  if (dataset.elementType === "existing") {
-    const uuid = dataset.uuid;
-    const itemBundle = dataset.itemBundle;
-    const entityType = dataset.entityType;
-    const hostType = dataset.hostType;
-    const hostUuid = dataset.hostUuid;
-    const hostBundle = dataset.hostBundle;
-    const hostFieldName = dataset.hostFieldName;
-    const reusableBundle = dataset.reusableBundle;
-    const hostFieldListType = dataset.hostFieldListType;
-    const libraryItemUuid = dataset.bkLibraryItemUuid;
-    const isNew = dataset.isNew === "true";
-    const parentBlockBundle = hostType === itemEntityType ? hostBundle : void 0;
-    if (uuid && hostType && hostUuid && hostFieldName && itemBundle && hostBundle && entityType && hostFieldListType) {
-      const libraryLabel = dataset.bkLibraryLabel;
-      const editTitle = libraryLabel || "";
-      return {
-        itemType: "existing",
-        element: () => document.querySelector(`[data-uuid="${uuid}"]`),
-        itemBundle,
-        entityType,
-        isNested: hostType === itemEntityType,
-        uuid,
-        hostType,
-        hostBundle,
-        hostUuid,
-        hostFieldName,
-        hostFieldListType,
-        reusableBundle,
-        libraryItemUuid,
-        editTitle: editTitle || void 0,
-        isNew,
-        parentBlockBundle
-      };
-    }
-  } else if (dataset.elementType === "new") {
+  if (dataset.elementType === "new") {
     const itemBundle = dataset.itemBundle;
     if (itemBundle) {
       return {
@@ -111,14 +74,6 @@ export function buildDraggableItem(element) {
     }
   }
 }
-export function findElement(uuid) {
-  const el = document.querySelector(
-    `[data-uuid="${uuid}"]:not(.bk-sortli-leave-from)`
-  );
-  if (el instanceof HTMLElement) {
-    return el;
-  }
-}
 export function onlyUnique(value, index, self) {
   return self.indexOf(value) === index;
 }
@@ -443,44 +398,6 @@ export const findParentContext = (el) => {
   }
   return findClosestEntityContext(el);
 };
-export const mapDroppableField = (el) => {
-  if (!(el instanceof HTMLElement)) {
-    throw new TypeError(
-      `v-blokkli-droppable directive is only allowed on elements of type HTMLElement.`
-    );
-  }
-  const fieldName = el.dataset.blokkliDroppableField;
-  if (!fieldName) {
-    throw new Error(`Missing field name in v-blokkli-droppable directive.`);
-  }
-  const host = findParentContext(el);
-  if (!host) {
-    throw new Error(
-      `Failed to locate parent context for v-blokkli-droppable field with name "${fieldName}". Make sure the element is always rendered inside a block component or inside a <BlokkliProvider>.`
-    );
-  }
-  return {
-    element: el,
-    host,
-    fieldName
-  };
-};
-export const originatesFromEditable = (e) => {
-  if (e.target instanceof HTMLElement) {
-    const el = e.target.closest("[data-blokkli-editable-field]");
-    if (el instanceof HTMLElement) {
-      return el;
-    }
-  }
-};
-export const getOriginatingDroppableElement = (e) => {
-  if (e.target instanceof HTMLElement) {
-    const el = e.target.closest("[data-blokkli-droppable-field]");
-    if (el instanceof HTMLElement) {
-      return el;
-    }
-  }
-};
 export const originatesFromTextInput = (e) => e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement;
 export function getFieldKey(uuid, fieldName) {
   return uuid + ":" + fieldName;

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

@@ -0,0 +1,10 @@
+import type { RenderedFieldListItem } from '#blokkli/types';
+import type { DomProvider } from '../domProvider.js';
+import type { StateProvider } from '../stateProvider.js';
+import type { AdapterContext } from '#blokkli/adapter';
+import type { ComputedRef } from 'vue';
+export type BlocksProvider = {
+    getBlock: (uuid: string) => RenderedFieldListItem | undefined;
+    getAllBlocks: () => RenderedFieldListItem[];
+};
+export default function (state: StateProvider, dom: DomProvider, context: ComputedRef<AdapterContext>): BlocksProvider;