@blokkli/editor 2.0.0-alpha.2 → 2.0.0-alpha.21

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

@@ -0,0 +1,208 @@
+import { falsy } from "#blokkli/helpers";
+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(debug, ui) {
+  const logger = debug.createLogger("DirectiveProvider");
+  let initTimeout = null;
+  const isInitalizing = ref(true);
+  let stateReloadTimeout = null;
+  const elementMap = /* @__PURE__ */ new WeakMap();
+  const elements = /* @__PURE__ */ new Map();
+  const fieldData = /* @__PURE__ */ new Map();
+  const rects = {};
+  const visible = /* @__PURE__ */ new Set();
+  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) => {
+      if (key.startsWith(directiveType)) {
+        return rects[key];
+      }
+    }).filter(falsy);
+  }
+  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 = elementMap.get(entry.target);
+        if (!data) {
+          continue;
+        }
+        const key = getEditableKey(data.fieldName, data, data.directiveType);
+        const domRect = entry.target.getBoundingClientRect();
+        rects[key] ||= {
+          width: 0,
+          height: 0,
+          x: 0,
+          y: 0,
+          key
+        };
+        const newRect = ui.getAbsoluteElementRect(domRect, scale, offset);
+        rects[key].width = newRect.width;
+        rects[key].height = newRect.height;
+        rects[key].x = newRect.x;
+        rects[key].y = newRect.y;
+        if (entry.isIntersecting) {
+          visible.add(key);
+        } else {
+          visible.delete(key);
+        }
+      }
+    }
+  }
+  const intersectionObserver = useDelayedIntersectionObserver(
+    intersectionCallback,
+    {
+      rootMargin: "400px 0px 400px 0px"
+    }
+  );
+  function registerDirectiveElement(el, fieldName, entity, directiveType) {
+    const key = getEditableKey(fieldName, entity, directiveType);
+    const data = {
+      ...entity,
+      fieldName,
+      directiveType,
+      key
+    };
+    elementMap.set(el, data);
+    fieldData.set(key, data);
+    intersectionObserver.observe(el);
+    elements.set(key, el);
+    if (directiveType === "editable" && entity.type === itemEntityType) {
+      editablesByUuid[entity.uuid] ||= {};
+      editablesByUuid[entity.uuid][fieldName] = data;
+    }
+    logger.log("Registered directive element", data);
+    doInitTimeout();
+  }
+  function unregisterDirectiveElement(el, fieldName, entity, directiveType) {
+    const key = getEditableKey(fieldName, entity, directiveType);
+    logger.log("Unregistered directive element", key);
+    intersectionObserver.unobserve(el);
+    elementMap.delete(el);
+    fieldData.delete(key);
+    delete rects[key];
+    visible.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();
+  }
+  function getEditableAtPoint(x, y) {
+    const scale = ui.artboardScale.value;
+    const offset = ui.artboardOffset.value;
+    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 fieldData.get(key);
+      }
+    }
+    return void 0;
+  }
+  function updateRects() {
+    const scale = ui.artboardScale.value;
+    const offset = ui.artboardOffset.value;
+    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 = elements.get(key);
+      if (!el) continue;
+      const domRect = el.getBoundingClientRect();
+      const newRect = ui.getAbsoluteElementRect(domRect, scale, offset);
+      if (rects[key]) {
+        rects[key].width = newRect.width;
+        rects[key].height = newRect.height;
+        rects[key].x = newRect.x;
+        rects[key].y = newRect.y;
+      } else {
+        rects[key] = {
+          width: newRect.width,
+          height: newRect.height,
+          x: newRect.x,
+          y: newRect.y,
+          key
+        };
+      }
+    }
+  }
+  function handleRefresh() {
+    if (stateReloadTimeout) {
+      window.clearTimeout(stateReloadTimeout);
+    }
+    if (visible.size < 150) {
+      updateRects();
+    }
+    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);
+  onBeforeUnmount(() => {
+    if (stateReloadTimeout) {
+      window.clearTimeout(stateReloadTimeout);
+    }
+  });
+  return {
+    registerDirectiveElement,
+    unregisterDirectiveElement,
+    init,
+    getVisible,
+    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/renderCycle.d.ts

@@ -0,0 +1 @@
+export declare function renderCycle(): Promise<void>;

package/dist/runtime/helpers/renderCycle.js

@@ -0,0 +1,10 @@
+import { nextTick } from "#imports";
+export function renderCycle() {
+  return new Promise((resolve) => {
+    nextTick(() => {
+      window.requestAnimationFrame(() => {
+        resolve();
+      });
+    });
+  });
+}

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

@@ -6,6 +6,7 @@ import {
   bundlesWithHiddenGlobally
 } from "#blokkli-build/default-global-options";
 import { BK_HIDDEN_GLOBALLY, BK_VISIBLE_LANGUAGES } from "../symbols.js";
+import { BUNDLE_FROM_LIBRARY } from "#blokkli/constants";
 export function mapCheckboxTrue(v) {
   return v === true || v === "1" || v === 1 || v === "true" ? "1" : "0";
 }
@@ -82,16 +83,18 @@ export function isVisibleByOptions(item, language) {
   return true;
 }
 export function getRuntimeOptions(item, context, fromLibraryOptions) {
-  if (item.bundle === "from_library" && "libraryItem" in item.props) {
-    const actualBlock = item.props.libraryItem?.block;
-    if (!actualBlock) {
-      throw new Error("Missing block");
+  if (item.bundle === BUNDLE_FROM_LIBRARY) {
+    if ("props" in item && item.props && "libraryItem" in item.props) {
+      const actualBlock = item.props.libraryItem?.block;
+      if (actualBlock) {
+        return getRuntimeOptions(
+          actualBlock,
+          context,
+          item.options
+        );
+      }
     }
-    return getRuntimeOptions(
-      actualBlock,
-      context,
-      item.options
-    );
+    throw new Error("Missing block");
   }
   const availableOptions = OPTIONS["block:" + item.bundle] || {};
   return Object.entries(availableOptions).reduce(
@@ -99,7 +102,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;
       }
@@ -114,7 +117,7 @@ export function getRuntimeOptions(item, context, fromLibraryOptions) {
   );
 }
 export function getActualBlock(item) {
-  if (item.bundle === "from_library") {
+  if (item.bundle === BUNDLE_FROM_LIBRARY) {
     const block = item.props.libraryItem?.block;
     if (!block) {
       return null;
@@ -131,7 +134,7 @@ export function getItemsforBundles(items, bundles) {
   const filtered = [];
   for (let i = 0; i < items.length; i++) {
     const item = items[i];
-    if (item.bundle === "from_library") {
+    if (item.bundle === BUNDLE_FROM_LIBRARY) {
       const actual = getActualBlock(item);
       if (actual && bundles.includes(actual.bundle)) {
         filtered.push(actual);

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

@@ -1,23 +1,35 @@
-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.
      */
     uuids: Readonly<Ref<string[]>>;
+    /**
+     * Whether the host is currently selected.
+     */
+    hasHostSelected: ComputedRef<boolean>;
+    /**
+     * 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.
      */
@@ -38,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.
      */
@@ -59,5 +67,13 @@ export type SelectionProvider = {
      */
     dragItemsBundles: ComputedRef<string[]>;
     isBlockSelected(uuid: string): boolean;
+    /**
+     * Lock selection.
+     */
+    lockSelection: (key: string) => void;
+    /**
+     * Unlock selection.
+     */
+    unlockSelection: (key: string) => void;
 };
-export default function (dom: DomProvider): SelectionProvider;
+export default function (blocks: BlocksProvider): SelectionProvider;

package/dist/runtime/helpers/selectionProvider.js

@@ -1,88 +1,83 @@
 import onBlokkliEvent from "./composables/onBlokkliEvent.js";
 import { computed, ref } from "#imports";
-import {
-  findElement,
-  buildDraggableItem,
-  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 activeFieldKey = ref("");
+  const hasHostSelected = ref(false);
   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)
+    () => dragItems.value.map((v) => {
+      if (v.itemType === "existing") {
+        return v.block.bundle;
+      } else if ("itemBundle" in v) {
+        return v.itemBundle;
+      }
+    }).filter(falsy)
   );
   const uuidsSet = computed(() => new Set(selectedUuids.value));
   const isDragging = computed(() => !!draggingMode.value);
-  const blocks = computed(
-    () => selectedUuids.value.map((uuid) => {
-      return dom.findBlock(uuid);
-    }).filter(falsy)
-  );
-  function selectItems(uuids) {
-    unselectItems();
-    const items = uuids.map((uuid) => {
-      const element = findElement(uuid);
-      if (element) {
-        const item = buildDraggableItem(element);
-        if (item && item.itemType === "existing") {
-          return item;
-        }
-      }
-    }).filter(falsy);
-    selectedUuids.value = items.map((v) => v.uuid);
+  function updateSelectedUuids(uuids, force) {
+    if (selectionIsLocked.value && !force) {
+      return;
+    }
+    selectedUuids.value = uuids;
   }
   function unselectItems() {
-    activeFieldKey.value = "";
     if (selectedUuids.value.length === 0) {
       return;
     }
-    selectedUuids.value = [];
+    updateSelectedUuids([]);
   }
-  function onSelect(v) {
+  function onSelect(v, force) {
     if (typeof v === "string") {
-      selectItems([v]);
+      updateSelectedUuids([v], force);
     } else {
-      selectItems(v.filter(onlyUnique));
+      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);
+  });
   onBlokkliEvent("select:start", (e) => {
-    selectedUuids.value = (e.uuids || []).filter(onlyUnique);
+    updateSelectedUuids((e.uuids || []).filter(onlyUnique));
     isMultiSelecting.value = true;
     interactionMode.value = e.mode;
-    activeFieldKey.value = "";
   });
   onBlokkliEvent("select:toggle", (uuid) => {
     if (selectedUuids.value.includes(uuid)) {
-      selectedUuids.value = selectedUuids.value.filter((v) => v !== uuid);
+      updateSelectedUuids(selectedUuids.value.filter((v) => v !== uuid));
     } else {
       selectedUuids.value.push(uuid);
     }
@@ -92,36 +87,31 @@ export default function(dom) {
     if (!uuids || uuids.length === 0 && selectedUuids.value.length === 0) {
       return;
     }
-    selectItems(uuids);
-  });
-  onBlokkliEvent("select:previous", () => selectInList(true));
-  onBlokkliEvent("select:next", selectInList);
-  onBlokkliEvent("setActiveFieldKey", setActiveFieldKey);
-  onBlokkliEvent("state:reloaded", () => {
-    selectedUuids.value = selectedUuids.value.filter((uuid) => {
-      return !!dom.findBlock(uuid);
-    });
+    updateSelectedUuids(uuids);
   });
   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) {
-      selectItems(blocks2.map((v) => v.uuid));
+      updateSelectedUuids(blocks2.map((v) => v.block.uuid));
     }
   });
   onBlokkliEvent("dragging:end", () => {
     draggingMode.value = null;
   });
   onBlokkliEvent("select:unselect", () => {
-    selectedUuids.value = [];
+    updateSelectedUuids([]);
+  });
+  onBlokkliEvent("select:host", () => {
+    hasHostSelected.value = true;
+  });
+  onBlokkliEvent("select:host:unselect", () => {
+    hasHostSelected.value = false;
   });
   onBlokkliEvent("window:clickAway", () => {
     unselectItems();
-    activeFieldKey.value = "";
     if (document.activeElement instanceof HTMLElement) {
       document.activeElement.blur();
     }
@@ -131,16 +121,25 @@ export default function(dom) {
       (v) => v.itemType === "existing" || v.itemType === "existing_structure"
     );
   });
+  const hasAnythingSelected = computed(() => {
+    return hasHostSelected.value || !!selectedUuids.value.length;
+  });
   function isBlockSelected(uuid) {
     return uuidsSet.value.has(uuid);
   }
+  function lockSelection(key) {
+    selectionLocks.value.push(key);
+  }
+  function unlockSelection(key) {
+    selectionLocks.value = selectionLocks.value.filter((v) => v !== key);
+  }
   return {
     uuids: selectedUuids,
-    blocks,
-    activeFieldKey,
+    bundles,
+    items: selectedRenderedItems,
+    item,
     isDragging,
     isDraggingExisting,
-    setActiveFieldKey,
     editableActive,
     isChangingOptions,
     isMultiSelecting,
@@ -149,6 +148,12 @@ export default function(dom) {
     dragItems,
     uuidsSet,
     dragItemsBundles,
-    isBlockSelected
+    isBlockSelected,
+    hasHostSelected: computed(() => {
+      return hasHostSelected.value && !selectedUuids.value.length;
+    }),
+    hasAnythingSelected,
+    lockSelection,
+    unlockSelection
   };
 }