@blokkli/editor 1.3.3 → 1.4.0-alpha.0

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

@@ -1,8 +1,6 @@
-import type { ComponentInternalInstance } from 'vue';
 import { type ComputedRef } from '#imports';
 import type { DraggableExistingBlock, BlokkliFieldElement, DraggableItem, DroppableEntityField, EntityContext, Rectangle } from '#blokkli/types';
 import type { UiProvider } from './uiProvider.js';
-import type { BlockBundleWithNested, ValidFieldListTypes } from '#blokkli/generated-types';
 import type { DebugProvider } from './debugProvider.js';
 type RegisteredFieldType = {
     entityType: string;
@@ -21,8 +19,6 @@ export type DomProvider = {
      */
     getDropElementMarkup(item: DraggableItem, checkSize?: boolean): string;
     findField(entityUuid: string, fieldName: string): BlokkliFieldElement | undefined;
-    registerBlock: (uuid: string, instance: ComponentInternalInstance | null | HTMLElement, bundle: string, fieldListType: ValidFieldListTypes, parentBlockBundle?: BlockBundleWithNested) => void;
-    unregisterBlock: (uuid: string) => void;
     registerField: (entity: EntityContext, fieldName: string, instance: HTMLElement) => void;
     updateFieldElement: (entity: EntityContext, fieldName: string, element: HTMLElement) => void;
     unregisterField: (entity: EntityContext, fieldName: string) => void;

package/dist/runtime/helpers/domProvider.js

@@ -43,16 +43,6 @@ const buildFieldElement = (element) => {
     };
   }
 };
-const getVisibleBlockElement = (instance) => {
-  if (instance instanceof HTMLElement) {
-    return instance;
-  }
-  if (instance.vnode.el instanceof HTMLElement) {
-    return instance.vnode.el;
-  } else if (instance?.vnode.el instanceof Text && instance?.vnode.el.nextElementSibling instanceof HTMLElement) {
-    return instance.vnode.el.nextElementSibling;
-  }
-};
 function rectWithTime(rect, time) {
   return {
     ...rect,
@@ -60,6 +50,7 @@ function rectWithTime(rect, time) {
   };
 }
 export default function(ui, debug) {
+  const artboardElement = ui.artboardElement();
   const logger = debug.createLogger("DomProvider");
   const mutationsReady = ref(true);
   const intersectionReady = ref(false);
@@ -136,7 +127,7 @@ export default function(ui, debug) {
       }
     }
   }
-  const observer = useDelayedIntersectionObserver(intersectionCallback);
+  const intersectionObserver = useDelayedIntersectionObserver(intersectionCallback);
   const registeredBlocks = reactive({});
   const registeredFields = reactive({});
   const registeredFieldTypes = computed(() => {
@@ -162,22 +153,22 @@ export default function(ui, debug) {
   const registerField = (entity, fieldName, element) => {
     const key = `${entity.uuid}:${fieldName}`;
     registeredFields[key] = { element, entity, fieldName };
-    observer.observe(element);
+    intersectionObserver.observe(element);
   };
   const updateFieldElement = (entity, fieldName, element) => {
     const key = `${entity.uuid}:${fieldName}`;
     const existingElement = registeredFields[key]?.element;
     if (existingElement) {
-      observer.unobserve(existingElement);
+      intersectionObserver.unobserve(existingElement);
     }
     registeredFields[key] = { entity, fieldName, element };
-    observer.observe(element);
+    intersectionObserver.observe(element);
   };
   const unregisterField = (entity, fieldName) => {
     const key = `${entity.uuid}:${fieldName}`;
     const el = registeredFields[key]?.element;
     if (el) {
-      observer.unobserve(el);
+      intersectionObserver.unobserve(el);
     }
     visibleFields.delete(key);
     registeredFields[key] = void 0;
@@ -196,45 +187,6 @@ export default function(ui, debug) {
     }
     return el;
   }
-  const registerBlock = (uuid, instance, bundle, fieldListType, parentBlockBundle) => {
-    if (registeredBlocks[uuid]) {
-      console.error(
-        "Trying to register block with already existing UUID: " + uuid
-      );
-    }
-    if (!instance) {
-      console.error(
-        `Failed to get component instance of block with UUID "${uuid}"`
-      );
-      return;
-    }
-    const el = getVisibleBlockElement(instance);
-    if (!el) {
-      console.error(
-        `Failed to locate block component element for UUID "${uuid}". Make sure the block renders at least one root element that is always visible.`
-      );
-      return;
-    }
-    const observableElement = getElementToObserve(
-      el,
-      bundle,
-      fieldListType,
-      parentBlockBundle
-    );
-    observer.observe(observableElement);
-    resizeObserver.observe(observableElement);
-    registeredBlocks[uuid] = el;
-  };
-  const unregisterBlock = (uuid) => {
-    const el = registeredBlocks[uuid];
-    if (el) {
-      observer.unobserve(el);
-      resizeObserver.unobserve(el);
-    }
-    registeredBlocks[uuid] = void 0;
-    delete blockRects[uuid];
-    visibleBlocks.delete(uuid);
-  };
   const findBlock = (uuid) => {
     const cached = draggableBlockCache[uuid];
     if (cached) {
@@ -399,26 +351,72 @@ export default function(ui, debug) {
     logger.log("Refreshed all visible rects");
   });
   function init() {
-    observer.init();
+    intersectionObserver.init();
     intersectionReady.value = true;
     logger.log("IntersectionObserver initialized");
   }
   const dragElementUuidMap = /* @__PURE__ */ new WeakMap();
   const dragElementCache = /* @__PURE__ */ new Map();
-  const callback = function(mutationsList) {
+  function handleNodeAdded(node) {
+    if (!(node instanceof HTMLElement)) {
+      return;
+    }
+    if (node.dataset.uuid) {
+      const item = buildDraggableItem(node);
+      if (item && item.itemType === "existing") {
+        const observableElement = getElementToObserve(
+          node,
+          item.itemBundle,
+          item.hostFieldListType,
+          item.hostBundle
+        );
+        intersectionObserver.observe(observableElement);
+        resizeObserver.observe(observableElement);
+        registeredBlocks[item.uuid] = node;
+      }
+    } else if (node.dataset.fieldName && node.dataset.fieldKey && node.dataset.fieldCardinality) {
+      const blocks = node.querySelectorAll('[data-element-type="existing"]');
+      for (const block of blocks) {
+        handleNodeAdded(block);
+      }
+    }
+  }
+  function handleNodeRemoved(node) {
+    if (node instanceof HTMLElement && node.dataset.uuid) {
+      const uuid = node.dataset.uuid;
+      const el = registeredBlocks[uuid];
+      if (el !== node) {
+        return;
+      }
+      if (el) {
+        intersectionObserver.unobserve(el);
+        resizeObserver.unobserve(el);
+        dragElementUuidMap.delete(el);
+      }
+      dragElementUuidMap.delete(node);
+      dragElementCache.delete(uuid);
+      registeredBlocks[uuid] = void 0;
+      delete blockRects[uuid];
+      visibleBlocks.delete(uuid);
+    }
+  }
+  const mutationObserverCallback = function(mutationsList) {
     for (const mutation of mutationsList) {
       if (mutation.type === "childList") {
-        mutation.removedNodes.forEach((node) => {
-          const uuid = dragElementUuidMap.get(node);
-          dragElementUuidMap.delete(node);
-          if (uuid) {
-            dragElementCache.delete(uuid);
-          }
-        });
+        for (const node of mutation.removedNodes) {
+          handleNodeRemoved(node);
+        }
+        for (const node of mutation.addedNodes) {
+          handleNodeAdded(node);
+        }
       }
     }
   };
-  const mutationObserver = new MutationObserver(callback);
+  const mutationObserver = new MutationObserver(mutationObserverCallback);
+  mutationObserver.observe(artboardElement, {
+    subtree: true,
+    childList: true
+  });
   function getDragElement(block) {
     const cached = dragElementCache.get(block.uuid);
     if (cached && document.body.contains(cached)) {
@@ -444,8 +442,6 @@ export default function(ui, debug) {
     findClosestBlock,
     getDropElementMarkup,
     findField,
-    registerBlock,
-    unregisterBlock,
     getAllDroppableFields,
     findClosestEntityContext,
     getVisibleBlocks,

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

@@ -1018,7 +1018,7 @@ export type FeatureDefinition<Methods extends AdapterMethods[] = [], T extends s
     /**
      * The unique ID of the feature.
      */
-    id: T;
+    id: string;
     /**
      * The label of the feature.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blokkli/editor",
-  "version": "1.3.3",
+  "version": "1.4.0-alpha.0",
   "description": "Interactive page building experience for Nuxt",
   "repository": "blokkli/editor",
   "type": "module",
@@ -49,7 +49,7 @@
   "license": "MIT",
   "dependencies": {
     "@nuxt/kit": "^3.13.1",
-    "artboard-deluxe": "^0.0.1",
+    "artboard-deluxe": "^0.1.0",
     "estree-walker-ts": "^1.0.1",
     "fzf": "^0.5.2",
     "get-video-id": "^4.1.7",