@blokkli/editor 2.0.0-alpha.17 → 2.0.0-alpha.19

package/dist/runtime/helpers/providers/blocks.js

@@ -0,0 +1,91 @@
+import { itemEntityType } from "#blokkli-build/config";
+import onBlokkliEvent from "../composables/onBlokkliEvent.js";
+export default function(state, dom, context) {
+  const renderedFieldListItemCache = /* @__PURE__ */ new Map();
+  function getParentBlockBundle(field) {
+    if (field.entityType !== itemEntityType) {
+      return null;
+    }
+    const block = state.getFieldListItem(field.entityUuid);
+    if (!block) {
+      return null;
+    }
+    return block.bundle;
+  }
+  function getLibraryData(item) {
+    if (item.bundle === "from_library" && item.props.libraryItem) {
+      const uuid = item.props.libraryItem.uuid;
+      const bundle = item.props.libraryItem.block?.bundle;
+      if (uuid && bundle) {
+        return {
+          label: item.props.libraryItem.label ?? "",
+          libraryItemUuid: uuid,
+          reusableBundle: bundle
+        };
+      }
+    }
+    return null;
+  }
+  function getBlock(uuid) {
+    const cached = renderedFieldListItemCache.get(uuid);
+    if (cached) {
+      return cached;
+    }
+    const item = state.getFieldListItem(uuid);
+    if (!item) {
+      return;
+    }
+    if (!item.editContext) {
+      throw new Error("Missing editContext on block with UUID: " + item.uuid);
+    }
+    const fieldList = state.getFieldListForBlock(item.uuid);
+    if (!fieldList) {
+      return;
+    }
+    const field = dom.getRegisteredField(fieldList.entityUuid, fieldList.name);
+    const parentBlockBundle = getParentBlockBundle(fieldList);
+    const renderedItem = {
+      uuid: item.uuid,
+      bundle: item.bundle,
+      isNew: item.editContext.isNew,
+      isPublished: item.editContext.isPublished,
+      publishOn: item.editContext.publishOn,
+      unpublishOn: item.editContext.unpublishOn,
+      isNested: fieldList.entityType === itemEntityType,
+      fieldListType: field?.fieldListType ?? "default",
+      library: getLibraryData(item),
+      parentBlockBundle,
+      host: {
+        type: fieldList.entityType,
+        uuid: fieldList.entityUuid,
+        fieldName: fieldList.name,
+        bundle: parentBlockBundle ?? context.value.entityBundle
+      }
+    };
+    renderedFieldListItemCache.set(item.uuid, renderedItem);
+    return renderedItem;
+  }
+  function getAllBlocks() {
+    const blocks = [];
+    const uuids = state.getAllUuids();
+    for (let i = 0; i < uuids.length; i++) {
+      const uuid = uuids[i];
+      if (!uuid) {
+        continue;
+      }
+      const block = getBlock(uuid);
+      if (!block) {
+        continue;
+      }
+      blocks.push(block);
+    }
+    return blocks;
+  }
+  onBlokkliEvent("state:reloaded", () => {
+    renderedFieldListItemCache.clear();
+  });
+  return {
+    getBlock,
+    getAllBlocks
+  };
+}

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

@@ -0,0 +1,24 @@
+import type { BlokkliDirectiveType, EntityContext, Rectangle } from '#blokkli/types';
+import type { UiProvider } from './../uiProvider.js';
+import { type ComputedRef } from '#imports';
+type EditableFieldData = EntityContext & {
+    key: string;
+    fieldName: string;
+    directiveType: BlokkliDirectiveType;
+};
+type DroppableFieldElementData = EditableFieldData & {
+    element: HTMLElement;
+};
+export type DirectiveProvider = {
+    init: () => void;
+    registerDirectiveElement: (el: HTMLElement, fieldName: string, entity: EntityContext, type: BlokkliDirectiveType) => void;
+    unregisterDirectiveElement: (el: HTMLElement, fieldName: string, entity: EntityContext, type: BlokkliDirectiveType) => void;
+    getVisible: (directiveType: BlokkliDirectiveType) => Rectangle[];
+    getEditableAtPoint: (x: number, y: number) => EditableFieldData | undefined;
+    getEditablesForBlock: (uuid: string) => EditableFieldData[];
+    getDroppableElements: () => DroppableFieldElementData[];
+    findEditableElement: (fieldName: string, host: EntityContext) => HTMLElement | undefined;
+    isReady: ComputedRef<boolean>;
+};
+export default function (ui: UiProvider): DirectiveProvider;
+export {};

package/dist/runtime/helpers/{editableProvider.js → providers/directive.js}

@@ -1,32 +1,48 @@
 import { falsy } from "#blokkli/helpers";
-import useDelayedIntersectionObserver from "./composables/useDelayedIntersectionObserver.js";
-import { onBeforeUnmount } from "#imports";
-import onBlokkliEvent from "./composables/onBlokkliEvent.js";
+import useDelayedIntersectionObserver from "./../composables/useDelayedIntersectionObserver.js";
+import { computed, onBeforeUnmount, ref } from "#imports";
+import onBlokkliEvent from "./../composables/onBlokkliEvent.js";
+import { itemEntityType } from "#blokkli-build/config";
 export default function(ui) {
+  let initTimeout = null;
+  const isInitalizing = ref(true);
   let stateReloadTimeout = null;
-  const editableFieldElementMap = /* @__PURE__ */ new WeakMap();
-  const editableFieldElements = /* @__PURE__ */ new Map();
-  const editableFieldData = /* @__PURE__ */ new Map();
+  const elementMap = /* @__PURE__ */ new WeakMap();
+  const elements = /* @__PURE__ */ new Map();
+  const fieldData = /* @__PURE__ */ new Map();
   const rects = {};
   const visible = /* @__PURE__ */ new Set();
-  function getVisible() {
+  const editablesByUuid = {};
+  function doInitTimeout() {
+    if (initTimeout) {
+      window.clearTimeout(initTimeout);
+    }
+    if (isInitalizing.value) {
+      initTimeout = window.setTimeout(() => {
+        isInitalizing.value = false;
+      }, 500);
+    }
+  }
+  function getVisible(directiveType) {
     return [...visible.keys()].map((key) => {
-      return rects[key];
+      if (key.startsWith(directiveType)) {
+        return rects[key];
+      }
     }).filter(falsy);
   }
-  function getEditableKey(fieldName, entity) {
-    return `${entity.type}:${entity.uuid}:${fieldName}`;
+  function getEditableKey(fieldName, entity, directiveType) {
+    return `${directiveType}:${entity.type}:${entity.uuid}:${fieldName}`;
   }
   function intersectionCallback(entries) {
     const scale = ui.artboardScale.value;
     const offset = ui.artboardOffset.value;
     for (const entry of entries) {
       if (entry.target instanceof HTMLElement) {
-        const data = editableFieldElementMap.get(entry.target);
+        const data = elementMap.get(entry.target);
         if (!data) {
           continue;
         }
-        const key = getEditableKey(data.fieldName, data);
+        const key = getEditableKey(data.fieldName, data, data.directiveType);
         const domRect = entry.target.getBoundingClientRect();
         rects[key] ||= {
           width: 0,
@@ -54,25 +70,37 @@ export default function(ui) {
       rootMargin: "400px 0px 400px 0px"
     }
   );
-  function registerEditableField(el, fieldName, entity) {
-    const key = getEditableKey(fieldName, entity);
+  function registerDirectiveElement(el, fieldName, entity, directiveType) {
+    const key = getEditableKey(fieldName, entity, directiveType);
     const data = {
       ...entity,
-      fieldName
+      fieldName,
+      directiveType,
+      key
     };
-    editableFieldElementMap.set(el, data);
-    editableFieldData.set(key, data);
+    elementMap.set(el, data);
+    fieldData.set(key, data);
     intersectionObserver.observe(el);
-    editableFieldElements.set(key, el);
+    elements.set(key, el);
+    if (directiveType === "editable" && entity.type === itemEntityType) {
+      editablesByUuid[entity.uuid] ||= {};
+      editablesByUuid[entity.uuid][fieldName] = data;
+    }
+    doInitTimeout();
   }
-  function unregisterEditableField(el, fieldName, entity) {
-    const key = getEditableKey(fieldName, entity);
+  function unregisterDirectiveElement(el, fieldName, entity, directiveType) {
+    const key = getEditableKey(fieldName, entity, directiveType);
     intersectionObserver.unobserve(el);
-    editableFieldElementMap.delete(el);
-    editableFieldData.delete(key);
+    elementMap.delete(el);
+    fieldData.delete(key);
     delete rects[key];
     visible.delete(key);
-    editableFieldElements.delete(key);
+    elements.delete(key);
+    if (directiveType === "editable" && entity.type === itemEntityType) {
+      if (editablesByUuid[entity.uuid]) {
+        editablesByUuid[entity.uuid][fieldName] = void 0;
+      }
+    }
   }
   function init() {
     intersectionObserver.init();
@@ -83,10 +111,11 @@ export default function(ui) {
     const artboardX = x / scale - offset.x / scale;
     const artboardY = y / scale - offset.y / scale;
     for (const key of visible) {
+      if (!key.startsWith("editable:")) continue;
       const rect = rects[key];
       if (!rect) continue;
       if (artboardX >= rect.x && artboardX <= rect.x + rect.width && artboardY >= rect.y && artboardY <= rect.y + rect.height) {
-        return editableFieldData.get(key);
+        return fieldData.get(key);
       }
     }
     return void 0;
@@ -94,10 +123,10 @@ export default function(ui) {
   function updateRects() {
     const scale = ui.artboardScale.value;
     const offset = ui.artboardOffset.value;
-    const keysToUpdate = editableFieldElements.size < 150 ? Array.from(editableFieldElements.keys()) : Array.from(visible);
+    const keysToUpdate = elements.size < 150 ? Array.from(elements.keys()) : Array.from(visible);
     for (let i = 0; i < keysToUpdate.length; i++) {
       const key = keysToUpdate[i];
-      const el = editableFieldElements.get(key);
+      const el = elements.get(key);
       if (!el) continue;
       const domRect = el.getBoundingClientRect();
       const newRect = ui.getAbsoluteElementRect(domRect, scale, offset);
@@ -126,6 +155,34 @@ export default function(ui) {
     }
     stateReloadTimeout = window.setTimeout(updateRects, 300);
   }
+  function getEditablesForBlock(uuid) {
+    const editables = editablesByUuid[uuid];
+    if (!editables) {
+      return [];
+    }
+    return Object.values(editables).filter(falsy);
+  }
+  function getDroppableElements() {
+    const droppableElements = [];
+    for (const item of fieldData.values()) {
+      if (item.directiveType !== "droppable") {
+        continue;
+      }
+      const element = elements.get(item.key);
+      if (!element) {
+        continue;
+      }
+      droppableElements.push({
+        ...item,
+        element
+      });
+    }
+    return droppableElements;
+  }
+  function findEditableElement(fieldName, host) {
+    const key = getEditableKey(fieldName, host, "editable");
+    return elements.get(key);
+  }
   onBlokkliEvent("state:reloaded", handleRefresh);
   onBlokkliEvent("ui:resized", handleRefresh);
   onBlokkliEvent("option:finish-change", handleRefresh);
@@ -135,10 +192,14 @@ export default function(ui) {
     }
   });
   return {
-    registerEditableField,
-    unregisterEditableField,
+    registerDirectiveElement,
+    unregisterDirectiveElement,
     init,
     getVisible,
-    getEditableAtPoint
+    getEditableAtPoint,
+    getEditablesForBlock,
+    findEditableElement,
+    getDroppableElements,
+    isReady: computed(() => !isInitalizing.value)
   };
 }

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

@@ -0,0 +1,6 @@
+import type { DebugProvider } from '../debugProvider.js';
+export type ElementProvider = {
+    queryAll: <T = HTMLElement>(target: HTMLElement | Document, query: string, reason: string, map?: (v: HTMLElement) => T | null | undefined) => T[];
+    query: <T = HTMLElement>(target: HTMLElement | Document, query: string, reason: string, map?: (v: HTMLElement) => T | null | undefined) => T | null;
+};
+export default function (debug: DebugProvider): ElementProvider;

package/dist/runtime/helpers/providers/element.js

@@ -0,0 +1,35 @@
+export default function(debug) {
+  const logger = debug.createLogger("ElementProvider");
+  function queryAll(target, query2, reason, map) {
+    const results = [];
+    logger.log(`querySelectorAll - "${query2}" - ${reason}`);
+    for (const element of target.querySelectorAll(query2)) {
+      if (element instanceof HTMLElement) {
+        if (map) {
+          const result = map(element);
+          if (result) {
+            results.push(result);
+          }
+        } else {
+          results.push(element);
+        }
+      }
+    }
+    return results;
+  }
+  function query(target, query2, reason, map) {
+    logger.log(`querySelector - "${query2}" - ${reason}`);
+    const match = target.querySelector(query2);
+    if (!(match instanceof HTMLElement)) {
+      return null;
+    }
+    if (map) {
+      return map(match) ?? null;
+    }
+    return match;
+  }
+  return {
+    query,
+    queryAll
+  };
+}

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

@@ -0,0 +1,8 @@
+import type { BlokkliFieldElement } from '#blokkli/types';
+import type { DomProvider } from '../domProvider.js';
+import type { StateProvider } from '../stateProvider.js';
+import type { BlockDefinitionProvider } from '../typesProvider.js';
+export type FieldsProvider = {
+    find: (uuid: string, fieldName: string) => BlokkliFieldElement | undefined;
+};
+export default function (state: StateProvider, dom: DomProvider, types: BlockDefinitionProvider): FieldsProvider;

package/dist/runtime/helpers/providers/fields.js

@@ -0,0 +1,47 @@
+import onBlokkliEvent from "../composables/onBlokkliEvent.js";
+export default function(state, dom, types) {
+  const fieldCache = /* @__PURE__ */ new Map();
+  function find(uuid, fieldName) {
+    const key = uuid + ":" + fieldName;
+    const cached = fieldCache.get(key);
+    if (cached) {
+      return cached;
+    }
+    const registeredField = dom.getRegisteredField(uuid, fieldName);
+    if (!registeredField) {
+      return;
+    }
+    const definition = types.getFieldConfig(
+      registeredField.entity.type,
+      registeredField.entity.bundle,
+      registeredField.fieldName
+    );
+    if (!definition) {
+      return;
+    }
+    const fieldElement = {
+      key,
+      name: registeredField.fieldName,
+      label: definition.label,
+      isNested: registeredField.isNested,
+      nestingLevel: registeredField.nestingLevel,
+      fieldListType: registeredField.fieldListType,
+      hostEntityType: registeredField.entity.type,
+      hostEntityBundle: registeredField.entity.bundle,
+      hostEntityUuid: registeredField.entity.uuid,
+      allowedBundles: definition.allowedBundles,
+      allowedFragments: registeredField.allowedFragments,
+      cardinality: definition.cardinality,
+      element: registeredField.element,
+      dropAlignment: registeredField.dropAlignment
+    };
+    fieldCache.set(key, fieldElement);
+    return fieldElement;
+  }
+  onBlokkliEvent("state:reloaded", () => {
+    fieldCache.clear();
+  });
+  return {
+    find
+  };
+}

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

@@ -1,6 +1,6 @@
-import type { DomProvider } from './domProvider.js';
 import { type Ref, type ComputedRef } from '#imports';
-import type { DraggableExistingBlock, DraggableItem, InteractionMode } from '#blokkli/types';
+import type { DraggableItem, InteractionMode, RenderedFieldListItem } from '#blokkli/types';
+import type { BlocksProvider } from './providers/blocks.js';
 export type SelectionProvider = {
     /**
      * The currently selected UUIDs.
@@ -14,18 +14,22 @@ export type SelectionProvider = {
      * Whether anything is selected.
      */
     hasAnythingSelected: ComputedRef<boolean>;
+    /**
+     * The selected bundles.
+     */
+    bundles: ComputedRef<string[]>;
     /**
      * The currently selected UUIDs as a Set.
      */
     uuidsSet: ComputedRef<Set<string>>;
     /**
-     * The currently selected blocks.
+     * The currently selected field list items.
      */
-    blocks: ComputedRef<DraggableExistingBlock[]>;
+    items: ComputedRef<RenderedFieldListItem[]>;
     /**
-     * The active field key.
+     * The currently selected field list item, if only a single item is selected.
      */
-    activeFieldKey: Readonly<Ref<string>>;
+    item: ComputedRef<RenderedFieldListItem | null>;
     /**
      * Whether the user is currently dragging a block.
      */
@@ -46,10 +50,6 @@ export type SelectionProvider = {
      * Whether the user is currently in multi select mode.
      */
     isMultiSelecting: Ref<boolean>;
-    /**
-     * Update the active field key.
-     */
-    setActiveFieldKey: (key: string) => void;
     /**
      * Whether an editable field is currently being edited.
      */
@@ -76,4 +76,4 @@ export type SelectionProvider = {
      */
     unlockSelection: (key: string) => void;
 };
-export default function (dom: DomProvider): SelectionProvider;
+export default function (blocks: BlocksProvider): SelectionProvider;

package/dist/runtime/helpers/selectionProvider.js

@@ -1,32 +1,52 @@
 import onBlokkliEvent from "./composables/onBlokkliEvent.js";
 import { computed, ref } from "#imports";
-import { falsy, modulo, onlyUnique } from "#blokkli/helpers";
-import { eventBus } from "#blokkli/helpers/eventBus";
-export default function(dom) {
+import { falsy, onlyUnique } from "#blokkli/helpers";
+export default function(blocks) {
   const selectedUuids = ref([]);
   const hasHostSelected = ref(false);
-  const activeFieldKey = ref("");
   const draggingMode = ref(null);
   const editableActive = ref(false);
   const isChangingOptions = ref(false);
   const isMultiSelecting = ref(false);
   const interactionMode = ref("mouse");
   const selectionLocks = ref([]);
+  const selectedRenderedItems = computed(() => {
+    const items = [];
+    for (let i = 0; i < selectedUuids.value.length; i++) {
+      const uuid = selectedUuids.value[i];
+      if (!uuid) {
+        continue;
+      }
+      const item2 = blocks.getBlock(uuid);
+      if (!item2) {
+        continue;
+      }
+      items.push(item2);
+    }
+    return items;
+  });
+  const item = computed(() => {
+    if (selectedRenderedItems.value.length === 1) {
+      return selectedRenderedItems.value[0] ?? null;
+    }
+    return null;
+  });
+  const bundles = computed(() => {
+    return selectedRenderedItems.value.map((v) => v.bundle).filter(onlyUnique);
+  });
   const selectionIsLocked = computed(() => !!selectionLocks.value.length);
   const dragItems = ref([]);
   const dragItemsBundles = computed(
-    () => dragItems.value.map((v) => v.itemBundle).filter(falsy)
-  );
-  const uuidsSet = computed(() => new Set(selectedUuids.value));
-  const isDragging = computed(() => !!draggingMode.value);
-  const blocks = computed(
-    () => selectedUuids.value.map((uuid) => {
-      if (dom.registeredBlockUuids.value.includes(uuid)) {
-        return dom.findBlock(uuid);
+    () => dragItems.value.map((v) => {
+      if (v.itemType === "existing") {
+        return v.block.bundle;
+      } else if ("itemBundle" in v) {
+        return v.itemBundle;
       }
-      return null;
     }).filter(falsy)
   );
+  const uuidsSet = computed(() => new Set(selectedUuids.value));
+  const isDragging = computed(() => !!draggingMode.value);
   function updateSelectedUuids(uuids, force) {
     if (selectionIsLocked.value && !force) {
       return;
@@ -34,7 +54,6 @@ export default function(dom) {
     selectedUuids.value = uuids;
   }
   function unselectItems() {
-    activeFieldKey.value = "";
     if (selectedUuids.value.length === 0) {
       return;
     }
@@ -47,25 +66,6 @@ export default function(dom) {
       updateSelectedUuids(v.filter(onlyUnique), force);
     }
   }
-  const selectInList = (prev) => {
-    const items = dom.getAllBlocks();
-    if (!items.length) {
-      return;
-    }
-    const currentIndex = blocks.value[0] ? items.findIndex((v) => v.uuid === blocks.value[0].uuid) : -1;
-    const targetIndex = modulo(
-      prev ? currentIndex - 1 : currentIndex + 1,
-      items.length
-    );
-    const targetItem = items[targetIndex];
-    if (!targetItem) {
-      return;
-    }
-    onSelect(targetItem.uuid);
-    dom.refreshBlockRect(targetItem.uuid);
-    eventBus.emit("scrollIntoView", { uuid: targetItem.uuid });
-  };
-  const setActiveFieldKey = (key) => activeFieldKey.value = key;
   onBlokkliEvent("select", onSelect);
   onBlokkliEvent("select:force", (arg) => {
     onSelect(arg, true);
@@ -74,7 +74,6 @@ export default function(dom) {
     updateSelectedUuids((e.uuids || []).filter(onlyUnique));
     isMultiSelecting.value = true;
     interactionMode.value = e.mode;
-    activeFieldKey.value = "";
   });
   onBlokkliEvent("select:toggle", (uuid) => {
     if (selectedUuids.value.includes(uuid)) {
@@ -90,18 +89,13 @@ export default function(dom) {
     }
     updateSelectedUuids(uuids);
   });
-  onBlokkliEvent("select:previous", () => selectInList(true));
-  onBlokkliEvent("select:next", selectInList);
-  onBlokkliEvent("setActiveFieldKey", setActiveFieldKey);
   onBlokkliEvent("dragging:start", (e) => {
     draggingMode.value = e.mode;
     isMultiSelecting.value = false;
     dragItems.value = e.items;
-    const blocks2 = e.items.filter(
-      (v) => v.itemType === "existing"
-    );
+    const blocks2 = e.items.filter((v) => v.itemType === "existing");
     if (blocks2.length) {
-      updateSelectedUuids(blocks2.map((v) => v.uuid));
+      updateSelectedUuids(blocks2.map((v) => v.block.uuid));
     }
   });
   onBlokkliEvent("dragging:end", () => {
@@ -118,7 +112,6 @@ export default function(dom) {
   });
   onBlokkliEvent("window:clickAway", () => {
     unselectItems();
-    activeFieldKey.value = "";
     if (document.activeElement instanceof HTMLElement) {
       document.activeElement.blur();
     }
@@ -142,11 +135,11 @@ export default function(dom) {
   }
   return {
     uuids: selectedUuids,
-    blocks,
-    activeFieldKey,
+    bundles,
+    items: selectedRenderedItems,
+    item,
     isDragging,
     isDraggingExisting,
-    setActiveFieldKey,
     editableActive,
     isChangingOptions,
     isMultiSelecting,

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

@@ -42,5 +42,6 @@ export type StateProvider = {
     getMappedState: () => MappedState;
     setOverrideState: (state: MappedState) => void;
     clearOverrideState: () => void;
+    getFieldKeyForUuid: (uuid: string) => string | null;
 };
 export default function (adapter: BlokkliAdapter<any>, context: ComputedRef<AdapterContext>, $t: TextProvider, providerKey: string, permissions: EditPermission[]): Promise<StateProvider>;