@blokkli/editor 2.0.0-alpha.31 → 2.0.0-alpha.33

package/dist/runtime/editor/composables/onElementResize.js

@@ -0,0 +1,37 @@
+import { watch, onUnmounted } from "#imports";
+export function onElementResize(el, cb) {
+  let observer = null;
+  function disconnect() {
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+  }
+  watch(
+    el,
+    (element) => {
+      disconnect();
+      if (!element) {
+        return;
+      }
+      observer = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (!entry) {
+          return;
+        }
+        const boxSize = entry.borderBoxSize[0];
+        if (!boxSize) {
+          return;
+        }
+        console.log("CB");
+        cb({
+          width: boxSize.inlineSize,
+          height: boxSize.blockSize
+        });
+      });
+      observer.observe(element);
+    },
+    { immediate: true }
+  );
+  onUnmounted(disconnect);
+}

package/dist/runtime/editor/composables/useEditableFieldOverride.d.ts

@@ -0,0 +1,24 @@
+import type { EntityContext } from '#blokkli/types';
+export type EditableFieldOverride = {
+    /** The resolved DOM element, or null if not found. */
+    element: HTMLElement | null;
+    /** The original value captured when the override was created. */
+    originalValue: string;
+    /** The field type (plain or markup). */
+    fieldType: 'plain' | 'markup';
+    /** Apply a value — updates live preview via the correct strategy. */
+    setValue(value: string): void;
+    /** Restore the original value (shorthand for setValue(originalValue)). */
+    restore(): void;
+};
+/**
+ * Create an override for an editable field.
+ *
+ * Resolves the element and determines the correct update strategy
+ * (direct DOM, mutatedItemProps, or component event), captures the
+ * original value, and returns methods to set/restore the field value.
+ *
+ * If the field element is not found or the field type is unsupported
+ * (e.g. 'table'), returns a no-op override with empty values.
+ */
+export declare function useEditableFieldOverride(fieldName: string, host: EntityContext): EditableFieldOverride;

package/dist/runtime/editor/composables/useEditableFieldOverride.js

@@ -0,0 +1,130 @@
+import { useBlokkli } from "#imports";
+import { FIELD_MAPPING } from "#blokkli-build/runtime-options";
+import { itemEntityType } from "#blokkli-build/config";
+const NOOP_OVERRIDE = {
+  element: null,
+  originalValue: "",
+  fieldType: "plain",
+  setValue() {
+  },
+  restore() {
+  }
+};
+export function useEditableFieldOverride(fieldName, host) {
+  const { eventBus, state, types, definitions, directive } = useBlokkli();
+  const el = directive.findEditableElement(fieldName, host);
+  if (!el) {
+    return NOOP_OVERRIDE;
+  }
+  const element = el;
+  const editableData = directive.findEditable(fieldName, host);
+  const cfg = types.editableFieldConfig.forName(
+    host.type,
+    host.bundle,
+    fieldName
+  );
+  if (!cfg || cfg.type === "table") {
+    return NOOP_OVERRIDE;
+  }
+  const config = cfg;
+  const fieldType = config.type === "frame" || config.type === "markup" ? "markup" : "plain";
+  const isMarkup = config.type !== "plain";
+  const isComponent = !!editableData?.isComponent;
+  function findMatchingProp(mapping) {
+    return Object.entries(mapping).find(
+      ([_prop, field]) => field === fieldName
+    )?.[0] ?? null;
+  }
+  const providerDefinition = definitions.getProviderDefinition(
+    host.type,
+    host.bundle
+  );
+  let matchingProp = null;
+  if (host.type === itemEntityType) {
+    const mapping = FIELD_MAPPING[host.bundle];
+    if (mapping) {
+      matchingProp = findMatchingProp(mapping);
+    }
+  } else if (providerDefinition) {
+    const mapping = providerDefinition.propsFieldMapping;
+    if (mapping) {
+      matchingProp = findMatchingProp(mapping);
+    }
+  }
+  const mutatedItemPropsKey = providerDefinition ? "HOST" : host.uuid;
+  const usesMutatedProps = !!matchingProp;
+  const usesDirectDom = !isComponent && !matchingProp;
+  let originalValue;
+  if (isComponent) {
+    originalValue = editableData?.getValue ? editableData.getValue() : "";
+  } else if (usesMutatedProps && matchingProp) {
+    if (providerDefinition) {
+      originalValue = state.mutatedEntity.value[matchingProp] || "";
+    } else {
+      originalValue = state.getFieldListItem(host.uuid)?.props?.[matchingProp] ?? "";
+    }
+  } else if (isMarkup) {
+    originalValue = element.innerHTML;
+  } else {
+    originalValue = element.textContent || "";
+  }
+  const originalMutatedProp = usesMutatedProps && matchingProp ? state.mutatedItemProps[mutatedItemPropsKey]?.[matchingProp] : void 0;
+  function setValue(value) {
+    if (usesMutatedProps && matchingProp) {
+      if (!state.mutatedItemProps[mutatedItemPropsKey]) {
+        state.mutatedItemProps[mutatedItemPropsKey] = {};
+      }
+      state.mutatedItemProps[mutatedItemPropsKey][matchingProp] = value;
+    }
+    if (usesDirectDom) {
+      if (config.type === "plain") {
+        element.textContent = value;
+      } else {
+        element.innerHTML = value;
+      }
+    }
+    if (isComponent) {
+      eventBus.emit("editable:update", {
+        name: fieldName,
+        entityUuid: host.uuid,
+        value
+      });
+    }
+  }
+  function restore() {
+    if (usesMutatedProps && matchingProp) {
+      const propsObj = state.mutatedItemProps[mutatedItemPropsKey];
+      if (propsObj) {
+        if (originalMutatedProp === void 0) {
+          Reflect.deleteProperty(propsObj, matchingProp);
+          if (Object.keys(propsObj).length === 0) {
+            state.mutatedItemProps[mutatedItemPropsKey] = void 0;
+          }
+        } else {
+          propsObj[matchingProp] = originalMutatedProp;
+        }
+      }
+    }
+    if (usesDirectDom) {
+      if (isMarkup) {
+        element.innerHTML = originalValue;
+      } else {
+        element.textContent = originalValue;
+      }
+    }
+    if (isComponent) {
+      eventBus.emit("editable:update", {
+        name: fieldName,
+        entityUuid: host.uuid,
+        value: originalValue
+      });
+    }
+  }
+  return {
+    element,
+    originalValue,
+    fieldType,
+    setValue,
+    restore
+  };
+}

package/dist/runtime/editor/composables/useStickyToolbar.d.ts

@@ -1,7 +1,7 @@
 import type { ComputedRef, ShallowRef } from 'vue';
 import type { Coord } from '../types/geometry.js';
-export type PlacementVertical = 'top' | 'bottom' | 'auto';
-type PlacementHorizontal = 'left' | 'center';
+export type PlacementVertical = 'top' | 'bottom' | 'center' | 'auto';
+export type PlacementHorizontal = 'left' | 'center' | 'right';
 type UseStickyToolbarOptions = {
     getPlacementY?: () => PlacementVertical;
     getPlacementX?: () => PlacementHorizontal;
@@ -16,7 +16,8 @@ type UseStickyToolbarOptions = {
 };
 type UseStickyToolbar = {
     shouldRender: ComputedRef<boolean>;
-    placementY: ComputedRef<'top' | 'bottom'>;
+    placementY: ComputedRef<'top' | 'bottom' | 'center'>;
+    placementX: ComputedRef<'left' | 'center' | 'right'>;
     caretX: ComputedRef<number>;
 };
 export declare function useStickyToolbar(el: Readonly<ShallowRef<HTMLElement | null>>, options?: UseStickyToolbarOptions): UseStickyToolbar;

package/dist/runtime/editor/composables/useStickyToolbar.js

@@ -19,7 +19,8 @@ const limitPlacedRect = (rect, padding) => {
 export function useStickyToolbar(el, options) {
   const { ui, selection, dom } = useBlokkli();
   const shouldRender = ref(false);
-  const actualPlacement = ref("bottom");
+  const actualPlacementY = ref("bottom");
+  const actualPlacementX = ref("center");
   const caretXPosition = ref(0);
   function getMargin() {
     if (options && options.getMargin) {
@@ -101,24 +102,32 @@ export function useStickyToolbar(el, options) {
     const padding = ui.visibleViewportPadded.value;
     const xSubtract = hasRects ? 5 * Math.min(scale, 1) : 0;
     const margin = getMargin() * Math.min(scale, 1);
-    let actualPlacementY = placementY === "auto" ? "bottom" : placementY;
+    const centerX = (minX + maxX) / 2;
+    const centerY = (minY + maxY) / 2;
+    let actualPlacementY2 = placementY === "center" ? "center" : placementY === "auto" ? "bottom" : placementY;
     if (placementY === "auto") {
       const spaceAbove = minY - padding.y;
       const spaceBelow = padding.y + padding.height - maxY;
       const requiredSpace = height + margin;
       if (spaceBelow >= requiredSpace) {
-        actualPlacementY = "bottom";
+        actualPlacementY2 = "bottom";
       } else if (spaceAbove >= requiredSpace) {
-        actualPlacementY = "top";
+        actualPlacementY2 = "top";
       } else {
-        actualPlacementY = spaceAbove > spaceBelow ? "top" : "bottom";
+        actualPlacementY2 = spaceAbove > spaceBelow ? "top" : "bottom";
       }
     }
-    const y = actualPlacementY === "top" ? minY - height - margin : maxY + margin;
-    const centerX = (minX + maxX) / 2;
+    let y;
+    if (placementY === "center") {
+      y = centerY - height / 2;
+    } else {
+      y = actualPlacementY2 === "top" ? minY - height - margin : maxY + margin;
+    }
     let x;
     if (placementX === "center") {
       x = centerX - width / 2;
+    } else if (placementX === "right") {
+      x = maxX + margin;
     } else {
       x = minX - xSubtract;
     }
@@ -158,7 +167,12 @@ export function useStickyToolbar(el, options) {
       minCaretX,
       Math.min(centerX - idealPosition.x, maxCaretX)
     );
-    return { ...idealPosition, actualPlacementY, caretX };
+    return {
+      ...idealPosition,
+      actualPlacementY: actualPlacementY2,
+      actualPlacementX: placementX,
+      caretX
+    };
   }
   function getWidth() {
     if (options && options.getWidth) {
@@ -222,13 +236,15 @@ export function useStickyToolbar(el, options) {
       return;
     }
     el.value.style.transform = `translate3d(${coords.x}px, ${coords.y}px, 0)`;
-    actualPlacement.value = coords.actualPlacementY;
+    actualPlacementY.value = coords.actualPlacementY;
+    actualPlacementX.value = coords.actualPlacementX;
     caretXPosition.value = coords.caretX;
     shouldRender.value = true;
   });
   return {
     shouldRender: computed(() => shouldRender.value),
-    placementY: computed(() => actualPlacement.value),
+    placementY: computed(() => actualPlacementY.value),
+    placementX: computed(() => actualPlacementX.value),
     caretX: computed(() => caretXPosition.value)
   };
 }