@blokkli/editor 1.3.4 → 1.4.0-alpha.1

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

@@ -9,7 +9,7 @@ import {
 import { cloneElementWithStyles } from "./dom/index.js";
 import onBlokkliEvent from "./composables/onBlokkliEvent.js";
 import useDelayedIntersectionObserver from "./composables/useDelayedIntersectionObserver.js";
-import { getDefinition } from "#blokkli/definitions";
+import { getDefinition } from "#blokkli-build/definitions";
 const buildFieldElement = (element) => {
   const key = element.dataset.fieldKey;
   const name = element.dataset.fieldName;
@@ -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/helpers/featuresProvider.d.ts

@@ -1,5 +1,5 @@
 import type { FeatureDefinition, AdapterMethods } from '#blokkli/types';
-import { type ValidFeatureKey } from '#blokkli-runtime/features';
+import { type ValidFeatureKey } from '#blokkli-build/features';
 import { type ComputedRef } from '#imports';
 import type { StorageProvider } from './storageProvider.js';
 export type FeaturesProvider = {

package/dist/runtime/helpers/featuresProvider.js

@@ -1,6 +1,6 @@
 import {
   featureComponents
-} from "#blokkli-runtime/features";
+} from "#blokkli-build/features";
 import { computed, ref } from "#imports";
 import { falsy } from "./index.js";
 export default function(storage) {

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

@@ -86,3 +86,4 @@ export declare function getInteractionCoordinates(e: MouseEvent | TouchEvent): C
 export declare function toShaderColor(rgba: RGB): RGB;
 export declare function generateUUID(): string;
 export declare function buildAttributesForLibraryItem(props: LibraryItemProps): Record<string, string | undefined>;
+export declare function asValidNumber(v: unknown, defaultValue: number): number;

package/dist/runtime/helpers/index.js

@@ -1,6 +1,6 @@
 import { easeOutSine } from "./easing.js";
 import { useRuntimeConfig } from "#imports";
-import { getDefinition } from "#blokkli/definitions";
+import { getDefinition } from "#blokkli-build/definitions";
 export function falsy(value) {
   return value !== null && value !== void 0;
 }
@@ -474,3 +474,9 @@ export function buildAttributesForLibraryItem(props) {
     "data-blokkli-is-reusable": "true"
   };
 }
+export function asValidNumber(v, defaultValue) {
+  if (typeof v === "number" && !Number.isNaN(v)) {
+    return v;
+  }
+  return defaultValue;
+}

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

@@ -1,7 +1,8 @@
 /**
  * This file should contain all helpers that are meant for runtime functionality, such as defineBlokkli composable or <BlokkliProvider>.
  */
-import type { FieldListItemTyped } from '#blokkli/generated-types';
+import { type RuntimeBlockOptionArray, type RuntimeBlockOptions } from '#blokkli-build/runtime-options';
+import type { FieldListItemTyped } from '#blokkli-build/generated-types';
 import type { BlockOptionDefinition } from '#blokkli/types/blokkOptions';
 import type { FieldListItem } from '#blokkli/types';
 /**
@@ -14,8 +15,28 @@ export declare function mapCheckboxTrue(v?: unknown): '1' | '0';
  *
  * Internally, all option values are stored as strings. This function maps the stored data to the runtime value.
  */
-export declare function getRuntimeOptionValue(definition: Pick<BlockOptionDefinition, 'type' | 'default'>, value: string | string[] | boolean | undefined | null | number): string | string[] | boolean | number;
+export declare function getRuntimeOptionValue(definition: Pick<BlockOptionDefinition, 'type' | 'default'> | RuntimeBlockOptionArray, value: string | string[] | boolean | undefined | null | number): string | string[] | boolean | number;
 /**
  * Determines whether an item is visible.
  */
 export declare function isVisibleByOptions(item?: FieldListItemTyped | FieldListItem, language?: string): boolean;
+/**
+ * Returns the runtime options for a block.
+ *
+ * If the provided item's bundle is 'from_library', the method will merge the
+ * options defined in the reusable block with the options defined in the
+ * from_library block.
+ */
+export declare function getRuntimeOptions<K extends keyof RuntimeBlockOptions>(item: FieldListItemTyped & {
+    bundle: K;
+}, fromLibraryOptions?: Record<string, any>): RuntimeBlockOptions[K];
+/**
+ * Get the actual block for reusable blocks.
+ *
+ * If the provided bundle is 'from_library', the method will merge the options
+ * from both the from_library block and the actual block.
+ */
+export declare function getActualBlock(item: FieldListItemTyped): FieldListItemTyped | null;
+export declare function getItemsforBundles<K extends FieldListItemTyped['bundle']>(items: FieldListItemTyped[], bundles: K[]): Extract<FieldListItemTyped, {
+    bundle: K;
+}>[];

package/dist/runtime/helpers/runtimeHelpers/index.js

@@ -1,27 +1,33 @@
+import {
+  BLOCK_OPTIONS
+} from "#blokkli-build/runtime-options";
 import {
   bundlesWithVisibleLanguage,
   bundlesWithHiddenGlobally
-} from "#blokkli/default-global-options";
+} from "#blokkli-build/default-global-options";
 import { BK_HIDDEN_GLOBALLY, BK_VISIBLE_LANGUAGES } from "../symbols.js";
 export function mapCheckboxTrue(v) {
   return v === true || v === "1" || v === 1 || v === "true" ? "1" : "0";
 }
 export function getRuntimeOptionValue(definition, value) {
-  if (definition.type === "checkbox") {
+  const type = Array.isArray(definition) ? definition[0] : definition.type;
+  const defaultValue = Array.isArray(definition) ? definition[1] : definition.default;
+  if (value === null || value === void 0) {
+    return defaultValue;
+  }
+  if (type === "checkbox") {
     return mapCheckboxTrue(value) === "1";
-  } else if (definition.type === "radios") {
+  } else if (type === "radios") {
     if (typeof value === "string") {
       return value;
     }
-    return "";
-  } else if (definition.type === "checkboxes") {
+  } else if (type === "checkboxes") {
     if (typeof value === "string") {
       return value.split(",");
     } else if (Array.isArray(value)) {
       return value;
     }
-    return [];
-  } else if (definition.type === "range" || definition.type === "number") {
+  } else if (type === "range" || type === "number") {
     if (typeof value === "number" && !Number.isNaN(value)) {
       return value;
     } else if (typeof value === "string") {
@@ -30,11 +36,18 @@ export function getRuntimeOptionValue(definition, value) {
         return parsed;
       }
     }
-  }
-  if (typeof value === "string") {
+  } else if (type === "color") {
+    if (typeof value === "string") {
+      if (value.startsWith("#")) {
+        return value;
+      } else if (value.length === 6) {
+        return `#${value}`;
+      }
+    }
+  } else if (type === "text" && typeof value === "string") {
     return value;
   }
-  return "";
+  return defaultValue;
 }
 export function isVisibleByOptions(item, language) {
   if (!item) {
@@ -56,3 +69,63 @@ export function isVisibleByOptions(item, language) {
   }
   return true;
 }
+export function getRuntimeOptions(item, fromLibraryOptions) {
+  if (item.bundle === "from_library" && "libraryItem" in item.props) {
+    const actualBlock = item.props.libraryItem?.block;
+    if (!actualBlock) {
+      throw new Error("Missing block");
+    }
+    return getRuntimeOptions(
+      actualBlock,
+      item.options
+    );
+  }
+  const availableOptions = BLOCK_OPTIONS[item.bundle] || {};
+  return Object.entries(availableOptions).reduce(
+    (acc, [key, definition]) => {
+      if (fromLibraryOptions && fromLibraryOptions[key] !== void 0 && fromLibraryOptions[key] !== null) {
+        acc[key] = getRuntimeOptionValue(
+          definition,
+          fromLibraryOptions.value[key]
+        );
+        return acc;
+      }
+      if (item.options && item.options[key] !== void 0 && item.options[key] !== null) {
+        acc[key] = getRuntimeOptionValue(definition, item.options[key]);
+        return acc;
+      }
+      acc[key] = definition[1];
+      return acc;
+    },
+    {}
+  );
+}
+export function getActualBlock(item) {
+  if (item.bundle === "from_library") {
+    const block = item.props.libraryItem?.block;
+    if (!block) {
+      return null;
+    }
+    const mergedOptions = {
+      ...item.options || {},
+      ...block.options || {}
+    };
+    return { ...block, options: mergedOptions };
+  }
+  return item;
+}
+export function getItemsforBundles(items, bundles) {
+  const filtered = [];
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    if (item.bundle === "from_library") {
+      const actual = getActualBlock(item);
+      if (actual && bundles.includes(actual.bundle)) {
+        filtered.push(actual);
+      }
+    } else if (bundles.includes(item.bundle)) {
+      filtered.push(item);
+    }
+  }
+  return filtered;
+}

package/dist/runtime/helpers/storageProvider.js

@@ -1,5 +1,5 @@
 import { computed, ref } from "vue";
-import { storageDefaults } from "#blokkli/config";
+import { storageDefaults } from "#blokkli-build/config";
 const PREFIX = "blokkli:";
 const getExisting = (key) => {
   try {

package/dist/runtime/helpers/textProvider.js

@@ -1,6 +1,6 @@
 import { computed } from "vue";
-import { translations } from "#blokkli/translations";
-import { defaultLanguage, forceDefaultLanguage } from "#blokkli/config";
+import { translations } from "#blokkli-build/translations";
+import { defaultLanguage, forceDefaultLanguage } from "#blokkli-build/config";
 export default function(context) {
   const language = computed(() => {
     if (forceDefaultLanguage) {

package/dist/runtime/helpers/themeProvider.js

@@ -1,4 +1,4 @@
-import { theme, themes } from "#blokkli/config";
+import { theme, themes } from "#blokkli-build/config";
 import { ref, onMounted, onBeforeUnmount } from "#imports";
 import { rgbaToString } from "./index.js";
 import { DragStyle } from "./DragStyle/index.js";

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

@@ -14,10 +14,10 @@ import type { BlockOptionDefinition } from './blokkOptions.js';
 import type { BlokkliAdapter, AdapterContext, MutationResponseLike } from './../adapter.js';
 import type { BroadcastProvider } from '#blokkli/helpers/broadcastProvider';
 import type { FeaturesProvider } from '#blokkli/helpers/featuresProvider';
-import type { BlokkliIcon } from '#blokkli/icons';
+import type { BlokkliIcon } from '#blokkli-build/icons';
 import type { SettingsGroup, Viewport } from '#blokkli/constants';
-import type { BlockBundleWithNested, FieldListItemTyped, GlobalOptionsKey, ValidChunkNames, ValidFieldListTypes, ValidGlobalConfigKeys } from '#blokkli/generated-types';
-import type { globalOptions } from '#blokkli/definitions';
+import type { BlockBundleWithNested, FieldListItemTyped, GlobalOptionsKey, ValidChunkNames, ValidFieldListTypes, ValidGlobalConfigKeys } from '#blokkli-build/generated-types';
+import type { globalOptions } from '#blokkli-build/definitions';
 import type { ThemeProvider } from '#blokkli/helpers/themeProvider';
 import type { CommandsProvider } from '#blokkli/helpers/commandsProvider';
 import type { TourProvider } from '#blokkli/helpers/tourProvider';
@@ -244,7 +244,7 @@ export type BlockDefinitionRenderForFieldListType = {
     fieldListType: ValidFieldListTypes;
 };
 export type BlockDefinitionRenderFor = BlockDefinitionRenderForParent | BlockDefinitionRenderForFieldList | BlockDefinitionRenderForFieldListType;
-export type BlockDefinitionInput<Options extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, GlobalOptions extends GlobalOptionsKey[] | undefined = undefined> = {
+export type BlockDefinitionInput<Options extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, GlobalOptions extends GlobalOptionsKey[] | undefined = []> = {
     /**
      * The bundle ID of the block, e.g. "text" or "section_title".
      */
@@ -279,6 +279,9 @@ export type BlockDefinitionInput<Options extends BlockDefinitionOptionsInput = B
      */
     editor?: BlokkliDefinitionInputEditor<Options, GlobalOptions>;
 };
+export type RuntimeBlockDefinitionInput = {
+    bundle: string;
+};
 export type InjectedBlokkliItem = ComputedRef<{
     index: ComputedRef<number>;
     uuid: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blokkli/editor",
-  "version": "1.3.4",
+  "version": "1.4.0-alpha.1",
   "description": "Interactive page building experience for Nuxt",
   "repository": "blokkli/editor",
   "type": "module",
@@ -81,7 +81,7 @@
     "eslint-plugin-tailwindcss": "^3.17.4",
     "gettext-parser": "^8.0.0",
     "happy-dom": "^15.7.4",
-    "nuxt": "^3.13.1",
+    "nuxt": "^3.15.4",
     "nuxt-svg-icon-sprite": "^1.0.2",
     "openai": "^4.59.0",
     "playwright-core": "^1.47.0",

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

@@ -1,2 +0,0 @@
-import type { BlockOptionDefinition } from '#blokkli/types/blokkOptions';
-export declare function optionValueToStorable(definition: BlockOptionDefinition, value: string | string[] | boolean | undefined | null | number): string;

package/dist/runtime/helpers/options.js

@@ -1,21 +0,0 @@
-export function optionValueToStorable(definition, value) {
-  if (definition.type === "checkbox") {
-    if (typeof value === "string" && (value === "1" || value === "0")) {
-      return value;
-    } else if (typeof value === "boolean") {
-      return value === true ? "1" : "0";
-    }
-    return "0";
-  } else if (definition.type === "text" || definition.type === "radios") {
-    if (typeof value === "string") {
-      return value;
-    }
-  } else if (definition.type === "checkboxes") {
-    if (Array.isArray(value)) {
-      return value.join(",");
-    } else if (typeof value === "string") {
-      return value;
-    }
-  }
-  return "";
-}