@blokkli/editor 2.0.0-alpha.1 → 2.0.0-alpha.11

package/dist/runtime/helpers/animationProvider.js

@@ -18,7 +18,7 @@ export default function(ui) {
       return;
     }
     iterator--;
-    eventBus.emit("animationFrame:before", time);
+    eventBus.emit("animationFrame:before", { time, mouseX, mouseY });
     eventBus.emit("animationFrame", {
       mouseX,
       mouseY,

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/helpers/runtimeHelpers/index.js

@@ -99,7 +99,7 @@ export function getRuntimeOptions(item, context, fromLibraryOptions) {
       if (fromLibraryOptions && fromLibraryOptions[key] !== void 0 && fromLibraryOptions[key] !== null) {
         acc[key] = getRuntimeOptionValue(
           definition,
-          fromLibraryOptions.value[key]
+          fromLibraryOptions.value?.[key]
         );
         return acc;
       }

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

@@ -283,6 +283,37 @@ export type BlockDefinitionInput<Options extends BlockDefinitionOptionsInput = B
      * Settings for the behaviour in the editor.
      */
     editor?: BlokkliDefinitionInputEditor<Options, GlobalOptions, Bundle>;
+    /**
+     * Map which component prop maps to which field name.
+     *
+     * For example, if the field is named "field_paragraphs_header" and the prop
+     * is named "headerParagraphs", you would define it as such:
+     *
+     * @example
+     * ```vue
+     * <template>
+     *   <div>
+     *     <BlokkliField :list="headerParagraphs" name="field_paragraphs_header" />
+     *   </div>
+     * <template>
+     *
+     * <script lang="ts" setup>
+     * import type { ParagraphTwoColumnsFragment } from '#graphql-operations'
+     *
+     * defineProps<{
+     *   headerParagraphs: ParagraphTwoColumnsFragment['headerParagraphs']
+     * }>()
+     *
+     * defineBlokkli({
+     *   bundle: 'section',
+     *   propsFieldMapping: {
+     *     headerParagraphs: 'field_paragraphs_header',
+     *   }
+     * })
+     * </script>
+     * ```
+     */
+    propsFieldMapping?: Bundle extends BundleKey ? Partial<Record<keyof BundleProps[Bundle], string>> : never;
 };
 export type RuntimeBlockDefinitionInput = {
     bundle: string;
@@ -870,6 +901,11 @@ export type LibraryEditItemEvent = {
     uuid: string;
     label?: string;
 };
+export type AnimationFrameBeforeEvent = {
+    time: number;
+    mouseX: number;
+    mouseY: number;
+};
 export type EventbusEvents = {
     select: string | string[];
     'select:unselect': undefined;
@@ -899,7 +935,7 @@ export type EventbusEvents = {
     'block:append': BlockAppendEvent;
     'item:doubleClick': DraggableExistingBlock;
     scrollIntoView: ScrollIntoViewEvent;
-    'animationFrame:before': number;
+    'animationFrame:before': AnimationFrameBeforeEvent;
     'canvas:draw': CanvasDrawEvent;
     'state:reloaded': undefined;
     addContentSearchItem: AddContentSearchItemEvent;
@@ -936,6 +972,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.1",
+  "version": "2.0.0-alpha.11",
   "description": "Interactive page building experience for Nuxt",
   "repository": "blokkli/editor",
   "type": "module",
@@ -70,10 +70,10 @@
     "@ckeditor/ckeditor5-build-classic": "^43.1.0",
     "@ckeditor/ckeditor5-vue": "^7.0.0",
     "@nuxt/devtools": "latest",
-    "@nuxt/eslint-config": "^0.5.7",
-    "@nuxt/kit": "^3.16.2",
+    "@nuxt/eslint-config": "^1.3.0",
+    "@nuxt/kit": "^3.17.2",
     "@nuxt/module-builder": "^1.0.1",
-    "@nuxt/schema": "^3.16.2",
+    "@nuxt/schema": "^3.17.2",
     "@nuxt/test-utils": "^3.14.2",
     "@nuxtjs/tailwindcss": "^6.12.1",
     "@tailwindcss/forms": "^0.5.9",
@@ -84,12 +84,12 @@
     "@vue/test-utils": "^2.4.6",
     "changelogen": "^0.5.5",
     "cypress": "^13.14.2",
-    "eslint": "^8.57.0",
-    "eslint-plugin-sonarjs": "^2.0.2",
-    "eslint-plugin-tailwindcss": "^3.17.4",
+    "eslint": "^9.24.0",
+    "eslint-plugin-sonarjs": "^3.0.2",
+    "eslint-plugin-tailwindcss": "^3.18.0",
     "gettext-parser": "^8.0.0",
     "happy-dom": "^15.7.4",
-    "nuxt": "^3.16.2",
+    "nuxt": "^3.17.2",
     "nuxt-graphql-middleware": "^5.0.0-alpha.18",
     "nuxt-svg-icon-sprite": "^2.0.0-alpha.1",
     "openai": "^4.59.0",
@@ -107,8 +107,5 @@
     "vite-plugin-glsl": "^1.3.0",
     "vitepress": "^1.3.4",
     "vitest": "^2.0.5"
-  },
-  "overrides": {
-    "@parcel/watcher": "~2.1.0"
   }
 }

package/dist/modules/drupal/adapter/index.d.mts

@@ -1,6 +0,0 @@
-import * as _blokkli_adapter from '#blokkli/adapter';
-import { ParagraphsBlokkliEditStateFragment } from '#graphql-operations';
-
-declare const _default: _blokkli_adapter.BlokkliAdapterFactory<ParagraphsBlokkliEditStateFragment>;
-
-export { _default as default };