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

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "blokkli",
   "configKey": "blokkli",
-  "version": "2.0.0-alpha.4",
+  "version": "2.0.0-alpha.5",
   "compatibility": {
     "nuxt": "^3.15.0"
   },

package/dist/module.mjs

@@ -13,7 +13,7 @@ import { BK_VISIBLE_LANGUAGES, BK_HIDDEN_GLOBALLY } from '../dist/runtime/helper
 import fs from 'node:fs';
 import { defu, createDefu } from 'defu';
 
-const version = "2.0.0-alpha.4";
+const version = "2.0.0-alpha.5";
 
 function sortObjectKeys(obj) {
   if (Array.isArray(obj)) {
@@ -6345,6 +6345,9 @@ declare const adapter: BlokkliAdapterFactory<any>
 
 export default adapter
 `;
+  },
+  {
+    write: true
   }
 );
 

package/dist/runtime/components/BlokkliItem.vue

@@ -23,7 +23,9 @@ import {
   provide,
   useRuntimeConfig,
   inject,
-  defineAsyncComponent
+  defineAsyncComponent,
+  getCurrentInstance,
+  onMounted
 } from "#imports";
 import { getComponent } from "#blokkli/helpers/imports";
 import {
@@ -45,6 +47,7 @@ const componentProps = defineProps({
   parentType: { type: String, required: false, default: "" },
   isEditing: { type: Boolean, required: false, default: false }
 });
+const instance = componentProps.isEditing ? getCurrentInstance() : null;
 const isProxyMode = inject(INJECT_FIELD_PROXY_MODE, false);
 const fieldUsesProxy = inject(INJECT_FIELD_USES_PROXY, false);
 const isGlobalProxyMode = inject(

package/dist/runtime/components/Edit/Actions/index.vue

@@ -75,7 +75,7 @@ import {
 import { onlyUnique, findIdealRectPosition, falsy } from "#blokkli/helpers";
 import { ItemIcon, Icon } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-const { selection, $t, types, state, ui, dom, definitions } = useBlokkli();
+const { selection, $t, types, state, ui, dom, definitions, debug } = useBlokkli();
 const editingEnabled = computed(
   () => state.editMode.value === "editing" || state.editMode.value === "translating"
 );
@@ -100,6 +100,9 @@ const title = computed(() => {
   if (ui.transformLabel.value) {
     return ui.transformLabel.value;
   }
+  if (debug.isEnabled.value && selection.uuids.value.length === 1) {
+    return selection.uuids.value[0];
+  }
   if (itemBundle.value) {
     if (itemBundle.value.id === "blokkli_fragment") {
       const fragments = selection.uuids.value.map((uuid) => {

package/dist/runtime/components/Edit/BlockProxy/index.vue

@@ -34,6 +34,7 @@ import { computed, useBlokkli, ref } from "#imports";
 import { getBlokkliItemProxyComponent } from "#blokkli/helpers/editComponents";
 import { ItemIcon } from "#blokkli/components";
 import { buildAttributesForLibraryItem, falsy } from "#blokkli/helpers";
+import { useBlockRegistration } from "#blokkli/helpers/composables/useBlockRegistration";
 const props = defineProps({
   uuid: { type: String, required: true },
   bundle: { type: String, required: true },
@@ -63,7 +64,7 @@ const rootProps = computed(() => {
 const proxyBundle = computed(
   () => libraryItemProps.value?.block?.bundle || props.bundle
 );
-const { types, runtimeConfig, definitions } = useBlokkli();
+const { types, runtimeConfig, definitions, dom } = useBlokkli();
 const root = ref(null);
 const type = computed(() => types.getBlockBundleDefinition(proxyBundle.value));
 const proxyComponent = getBlokkliItemProxyComponent(proxyBundle.value);
@@ -89,4 +90,5 @@ const fieldLayout = computed(() => {
   }
   return types.fieldConfig.forEntityTypeAndBundle(runtimeConfig.itemEntityType, proxyBundle.value).map((config) => [config]);
 });
+useBlockRegistration(dom, props.uuid);
 </script>

package/dist/runtime/components/Edit/EditProvider.vue

@@ -94,6 +94,7 @@ import {
   INJECT_GLOBAL_PROXY_MODE,
   INJECT_IS_EDITING
 } from "#blokkli/helpers/symbols";
+import { useBlockRegistration } from "#blokkli/helpers/composables/useBlockRegistration";
 const props = defineProps({
   entity: { type: null, required: false, default: void 0 },
   entityType: { type: String, required: true },
@@ -184,7 +185,8 @@ provide(INJECT_EDIT_CONTEXT, {
   eventBus,
   mutatedOptions: state.mutatedOptions,
   dom,
-  definitions
+  definitions,
+  useBlockRegistration
 });
 provide(INJECT_APP, {
   adapter,

package/dist/runtime/composables/defineBlokkli.js

@@ -87,6 +87,9 @@ export function defineBlokkli(arg) {
     import.meta.hot.accept("#blokkli/helpers/runtimeHelpers", () => {
     });
   }
+  if (editContext?.useBlockRegistration && editContext.dom && bundle !== "from_library" && bundle !== "blokkli_fragment") {
+    editContext.useBlockRegistration(editContext.dom, uuid);
+  }
   return {
     uuid,
     index,

package/dist/runtime/composables/defineBlokkliFragment.js

@@ -1,4 +1,7 @@
-import { INJECT_FRAGMENT_CONTEXT } from "../helpers/symbols.js";
+import {
+  INJECT_EDIT_CONTEXT,
+  INJECT_FRAGMENT_CONTEXT
+} from "../helpers/symbols.js";
 import { inject, computed } from "#imports";
 export function defineBlokkliFragment(_config) {
   const ctx = inject(
@@ -18,5 +21,9 @@ export function defineBlokkliFragment(_config) {
       provider: computed(() => null)
     };
   }
+  const editContext = inject(INJECT_EDIT_CONTEXT, null);
+  if (editContext?.dom && editContext.useBlockRegistration) {
+    editContext.useBlockRegistration(editContext.dom, ctx.uuid);
+  }
   return ctx;
 }

package/dist/runtime/helpers/composables/useBlockRegistration.d.ts

@@ -0,0 +1,5 @@
+import type { DomProvider } from '../domProvider.js';
+/**
+ * Helper composable to handle registering the block in the DOM provider.
+ */
+export declare function useBlockRegistration(dom: DomProvider, uuid: string): void;

package/dist/runtime/helpers/composables/useBlockRegistration.js

@@ -0,0 +1,23 @@
+import {
+  getCurrentInstance,
+  onBeforeUnmount,
+  onMounted,
+  onUpdated
+} from "#imports";
+export function useBlockRegistration(dom, uuid) {
+  const instance = getCurrentInstance();
+  const key = uuid + Math.round(Math.random() * 1e10).toString() + Date.now().toString();
+  let rootElement = null;
+  function setRootElement() {
+    const newElement = instance?.proxy?.$el;
+    if (newElement && rootElement !== newElement) {
+      rootElement = newElement;
+      dom.registerBlock(key, uuid, newElement);
+    }
+  }
+  onMounted(setRootElement);
+  onUpdated(setRootElement);
+  onBeforeUnmount(() => {
+    dom.unregisterBlock(key, uuid);
+  });
+}

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

@@ -20,6 +20,8 @@ export type DomProvider = {
      */
     getDropElementMarkup(item: DraggableItem, checkSize?: boolean): string;
     findField(entityUuid: string, fieldName: string): BlokkliFieldElement | undefined;
+    registerBlock: (key: string, uuid: string, el: HTMLElement | null) => void;
+    unregisterBlock: (key: string, 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

@@ -49,7 +49,6 @@ function rectWithTime(rect, time) {
   };
 }
 export default function(ui, debug, definitions) {
-  const artboardElement = ui.artboardElement();
   const logger = debug.createLogger("DomProvider");
   const mutationsReady = ref(true);
   const intersectionReady = ref(false);
@@ -57,6 +56,7 @@ export default function(ui, debug, definitions) {
   const visibleFields = /* @__PURE__ */ new Set();
   const blockRects = {};
   const fieldRects = {};
+  const blockUuidCurrentKey = {};
   let draggableBlockCache = {};
   const resizeObserver = new ResizeObserver(function(entries) {
     for (const entry of entries) {
@@ -360,66 +360,6 @@ export default function(ui, debug, definitions) {
   }
   const dragElementUuidMap = /* @__PURE__ */ new WeakMap();
   const dragElementCache = /* @__PURE__ */ new Map();
-  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") {
-        for (const node of mutation.removedNodes) {
-          handleNodeRemoved(node);
-        }
-        for (const node of mutation.addedNodes) {
-          handleNodeAdded(node);
-        }
-      }
-    }
-  };
-  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)) {
@@ -429,9 +369,6 @@ export default function(ui, debug, definitions) {
     if (!el) {
       return;
     }
-    if (el.parentNode) {
-      mutationObserver.observe(el.parentNode, { childList: true });
-    }
     dragElementUuidMap.set(el, block.uuid);
     dragElementCache.set(block.uuid, el);
     return el;
@@ -439,6 +376,52 @@ export default function(ui, debug, definitions) {
   function isBlockVisible(uuid) {
     return visibleBlocks.has(uuid);
   }
+  function registerBlock(key, uuid, el) {
+    logger.log("registerBlock: " + uuid);
+    blockUuidCurrentKey[uuid] = key;
+    if (!el) {
+      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 = buildDraggableItem(el);
+    if (item && item.itemType === "existing") {
+      const observableElement = getElementToObserve(
+        el,
+        item.itemBundle,
+        item.hostFieldListType,
+        item.hostBundle
+      );
+      intersectionObserver.observe(observableElement);
+      resizeObserver.observe(observableElement);
+      registeredBlocks[item.uuid] = el;
+    }
+  }
+  function unregisterBlock(key, uuid) {
+    const currentKey = blockUuidCurrentKey[uuid];
+    if (currentKey && currentKey !== key) {
+      return;
+    }
+    logger.log("unregisterBlock: " + uuid);
+    const el = registeredBlocks[uuid];
+    if (el) {
+      intersectionObserver.unobserve(el);
+      resizeObserver.unobserve(el);
+      dragElementUuidMap.delete(el);
+      dragElementUuidMap.delete(el);
+    }
+    dragElementCache.delete(uuid);
+    registeredBlocks[uuid] = void 0;
+    delete blockRects[uuid];
+    visibleBlocks.delete(uuid);
+  }
   return {
     findBlock,
     getAllBlocks,
@@ -462,6 +445,8 @@ export default function(ui, debug, definitions) {
     init,
     getDragElement,
     updateVisibleRects,
-    registeredFieldTypes
+    registeredFieldTypes,
+    registerBlock,
+    unregisterBlock
   };
 }

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

@@ -936,6 +936,7 @@ export type ItemEditContext = {
     mutatedOptions: MutatedOptions;
     dom?: DomProvider;
     definitions: DefinitionProvider;
+    useBlockRegistration?: (dom: DomProvider, uuid: string) => void;
 };
 export interface BlokkliApp {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blokkli/editor",
-  "version": "2.0.0-alpha.4",
+  "version": "2.0.0-alpha.5",
   "description": "Interactive page building experience for Nuxt",
   "repository": "blokkli/editor",
   "type": "module",