@blokkli/editor 2.0.0-alpha.4 → 2.0.0-alpha.41

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

@@ -0,0 +1,26 @@
+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;
+    /** Apply pre-built diff HTML (with <ins>/<del> tags) to the DOM element. */
+    setDiffHtml(html: 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,135 @@
+import { useBlokkli } from "#imports";
+import { itemEntityType } from "#blokkli-build/config";
+const NOOP_OVERRIDE = {
+  element: null,
+  originalValue: "",
+  fieldType: "plain",
+  setValue() {
+  },
+  setDiffHtml() {
+  },
+  restore() {
+  }
+};
+export function useEditableFieldOverride(fieldName, host) {
+  const { eventBus, state, types, definitions, directive, fieldValue } = 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, propMapping]) => propMapping?.name === fieldName && propMapping.type === "editable"
+    )?.[0] ?? null;
+  }
+  const providerDefinition = definitions.getProviderDefinition(
+    host.type,
+    host.bundle
+  );
+  let matchingProp = null;
+  if (host.type === itemEntityType) {
+    const defintion = definitions.getBlockDefinition(host.bundle, "default");
+    if (defintion?.propsFieldMapping) {
+      matchingProp = findMatchingProp(defintion.propsFieldMapping);
+    }
+  } 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;
+  const readResult = fieldValue.readFieldValue(fieldName, host);
+  const originalValue = readResult?.value ?? "";
+  const originalMutatedProp = usesMutatedProps && matchingProp ? state.mutatedItemProps[mutatedItemPropsKey]?.[matchingProp] : void 0;
+  function setValue(value) {
+    element.removeAttribute("data-bk-diff-active");
+    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 setDiffHtml(html) {
+    element.setAttribute("data-bk-diff-active", "");
+    element.innerHTML = html;
+    state.markDirty(host.uuid);
+  }
+  function restore() {
+    const wasDiffActive = element.hasAttribute("data-bk-diff-active");
+    element.removeAttribute("data-bk-diff-active");
+    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 (wasDiffActive) {
+        if (isMarkup) {
+          element.innerHTML = originalValue;
+        } else {
+          element.textContent = originalValue;
+        }
+      }
+    }
+    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,
+    setDiffHtml,
+    restore
+  };
+}

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

@@ -0,0 +1,52 @@
+import { type Ref } from '#imports';
+type FocusableElement = HTMLInputElement | HTMLSelectElement | HTMLButtonElement | HTMLTextAreaElement;
+export type UseFocusTrapOptions = {
+    /**
+     * The container element to trap focus within.
+     */
+    container: Ref<HTMLElement | undefined | null>;
+    /**
+     * Whether to auto-focus the first focusable element on mount.
+     *
+     * @default true
+     */
+    autoFocus?: boolean;
+    /**
+     * Element selector for focusable elements.
+     *
+     * @default 'input,select,button,textarea'
+     */
+    selector?: string;
+    /**
+     * Debug label for element queries.
+     */
+    debugLabel?: string;
+};
+/**
+ * Creates a focus trap within a container element.
+ *
+ * Handles Tab/Shift+Tab keyboard navigation to cycle through focusable elements,
+ * and optionally auto-focuses the first element on mount.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useFocusTrap } from '#blokkli/helpers'
+ *
+ * const containerEl = useTemplateRef('container')
+ * const { onKeyDown } = useFocusTrap({ container: containerEl })
+ * </script>
+ *
+ * <template>
+ *   <div ref="container" @keydown.stop="onKeyDown">
+ *     <input type="text" />
+ *     <button>Submit</button>
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare function useFocusTrap(options: UseFocusTrapOptions): {
+    onKeyDown: (e: KeyboardEvent) => void;
+    getFocusableElements: () => FocusableElement[];
+};
+export {};

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

@@ -0,0 +1,59 @@
+import { useBlokkli, onMounted } from "#imports";
+import { modulo } from "#blokkli/editor/helpers/math";
+export function useFocusTrap(options) {
+  const { element } = useBlokkli();
+  const {
+    container,
+    autoFocus = true,
+    selector = "input,select,button,textarea",
+    debugLabel = "useFocusTrap"
+  } = options;
+  const getFocusableElements = () => {
+    if (!container.value) {
+      return [];
+    }
+    return element.queryAll(container.value, selector, debugLabel);
+  };
+  const onKeyDown = (e) => {
+    if (!container.value || e.code !== "Tab") {
+      return;
+    }
+    const prev = e.shiftKey;
+    const focusableElements = getFocusableElements().filter((el) => {
+      if (el.tabIndex === -1) {
+        return false;
+      }
+      const style = window.getComputedStyle(el);
+      if (style.pointerEvents === "none") {
+        return false;
+      } else if (style.display === "none") {
+        return false;
+      }
+      return !el.disabled;
+    });
+    const activeIndex = Math.max(
+      focusableElements.findIndex((el) => document.activeElement === el),
+      0
+    );
+    const delta = prev ? -1 : 1;
+    const indexToFocus = modulo(activeIndex + delta, focusableElements.length);
+    const elementToFocus = focusableElements[indexToFocus];
+    if (elementToFocus) {
+      elementToFocus.focus();
+      e.preventDefault();
+    }
+  };
+  if (autoFocus) {
+    onMounted(() => {
+      const focusableElements = getFocusableElements();
+      const bestMatch = focusableElements.find((el) => !(el instanceof HTMLButtonElement)) || focusableElements[0];
+      if (bestMatch) {
+        bestMatch.focus();
+      }
+    });
+  }
+  return {
+    onKeyDown,
+    getFocusableElements
+  };
+}

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

@@ -0,0 +1,16 @@
+import type { LogMessage } from '#blokkli/editor/providers/debug';
+type BlokkliGlobalWindowObject = {
+    messages: LogMessage[];
+};
+export declare function useGlobalBlokkliObject(): {
+    init: () => void;
+    pushMessage: (message: LogMessage) => void;
+    getMessages: () => LogMessage[];
+    cleanup: () => void;
+};
+declare global {
+    interface Window {
+        __BLOKKLI__?: BlokkliGlobalWindowObject;
+    }
+}
+export {};

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

@@ -0,0 +1,36 @@
+export function useGlobalBlokkliObject() {
+  function init() {
+    if (typeof window !== "undefined") {
+      if (!window.__BLOKKLI__) {
+        window.__BLOKKLI__ = {
+          messages: []
+        };
+      }
+    }
+  }
+  function pushMessage(message) {
+    if (typeof window !== "undefined" && window.__BLOKKLI__) {
+      window.__BLOKKLI__.messages.push(message);
+      if (window.__BLOKKLI__.messages.length > 1e3) {
+        window.__BLOKKLI__.messages = window.__BLOKKLI__.messages.slice(-1e3);
+      }
+    }
+  }
+  function getMessages() {
+    if (typeof window !== "undefined" && window.__BLOKKLI__) {
+      return window.__BLOKKLI__.messages;
+    }
+    return [];
+  }
+  function cleanup() {
+    if (typeof window !== "undefined") {
+      delete window.__BLOKKLI__;
+    }
+  }
+  return {
+    init,
+    pushMessage,
+    getMessages,
+    cleanup
+  };
+}

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

@@ -0,0 +1,4 @@
+/**
+ * Caches the result of the given callback for the duration of the current state.
+ */
+export declare function useStateBasedCache<T>(cb: () => T): () => T;

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

@@ -0,0 +1,13 @@
+import { onBlokkliEvent } from "./onBlokkliEvent.js";
+export function useStateBasedCache(cb) {
+  let cached = null;
+  onBlokkliEvent("state:reloaded", () => {
+    cached = null;
+  });
+  return () => {
+    if (!cached) {
+      cached = cb();
+    }
+    return cached;
+  };
+}

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

@@ -0,0 +1,24 @@
+import type { ComputedRef, ShallowRef } from 'vue';
+import type { Coord } from '../types/geometry.js';
+export type PlacementVertical = 'top' | 'bottom' | 'center' | 'auto';
+export type PlacementHorizontal = 'left' | 'center' | 'right';
+type UseStickyToolbarOptions = {
+    getPlacementY?: () => PlacementVertical;
+    getPlacementX?: () => PlacementHorizontal;
+    shouldUpdate?: () => boolean;
+    getWidth?: () => number;
+    getHeight?: () => number;
+    getMargin?: () => number;
+    getAnchorElement?: () => HTMLElement | null;
+    getAnchorCoordinates?: () => Coord | null;
+    getCaretWidth?: () => number;
+    allowHorizontalOverflow?: boolean;
+};
+type UseStickyToolbar = {
+    shouldRender: ComputedRef<boolean>;
+    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;
+export {};

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

@@ -0,0 +1,250 @@
+import { onBlokkliEvent } from "./onBlokkliEvent.js";
+import { computed, ref, useBlokkli } from "#imports";
+import { falsy } from "../../helpers/index.js";
+import { findIdealRectPosition } from "#blokkli/editor/helpers/geometry";
+const limitPlacedRect = (rect, padding) => {
+  return {
+    width: rect.width,
+    height: rect.height,
+    x: Math.min(
+      Math.max(rect.x, padding.x),
+      padding.x + padding.width - rect.width
+    ),
+    y: Math.min(
+      Math.max(padding.y, rect.y),
+      padding.height + padding.y - rect.height
+    )
+  };
+};
+export function useStickyToolbar(el, options) {
+  const { ui, selection, dom } = useBlokkli();
+  const shouldRender = ref(false);
+  const actualPlacementY = ref("bottom");
+  const actualPlacementX = ref("center");
+  const caretXPosition = ref(0);
+  function getMargin() {
+    if (options && options.getMargin) {
+      return options.getMargin();
+    }
+    return 15;
+  }
+  function getCaretWidth() {
+    if (options && options.getCaretWidth) {
+      return options.getCaretWidth();
+    }
+    return 0;
+  }
+  let anchorRect = null;
+  function getCoords(width, height, placementY, placementX, offset, scale) {
+    let minX = 0;
+    let maxX = 0;
+    let minY = 0;
+    let maxY = 0;
+    let hasRects = false;
+    const anchorElement = options && options.getAnchorElement ? options.getAnchorElement() : null;
+    const anchorCoordinates = options && options.getAnchorCoordinates ? options.getAnchorCoordinates() : null;
+    if (anchorCoordinates) {
+      const rectX = (anchorCoordinates.x + offset.x / scale) * scale;
+      const rectY = (anchorCoordinates.y + offset.y / scale) * scale;
+      minX = rectX;
+      maxX = rectX + 1;
+      minY = rectY;
+      maxY = rectY + 1;
+      hasRects = true;
+    } else if (anchorElement) {
+      anchorRect ||= ui.getAbsoluteElementRect(
+        anchorElement.getBoundingClientRect(),
+        scale,
+        offset
+      );
+      const rectX = (anchorRect.x + offset.x / scale) * scale;
+      const rectY = (anchorRect.y + offset.y / scale) * scale;
+      const rectRight = rectX + anchorRect.width * scale;
+      const rectBottom = rectY + anchorRect.height * scale;
+      minX = rectX;
+      maxX = rectRight;
+      minY = rectY;
+      maxY = rectBottom;
+      hasRects = true;
+    } else {
+      const rects = selection.uuids.value.map((uuid) => dom.getBlockRect(uuid)).filter(falsy).filter((rect) => rect.height || rect.width);
+      hasRects = !!rects.length;
+      if (hasRects) {
+        for (let i = 0; i < rects.length; i++) {
+          const { x: x2, y: y2, height: height2, width: rectWidth } = rects[i];
+          const rectX = (x2 + offset.x / scale) * scale;
+          const rectY = (y2 + offset.y / scale) * scale;
+          const rectRight = rectX + rectWidth * scale;
+          const rectBottom = rectY + height2 * scale;
+          if (i === 0 || rectX < minX) {
+            minX = rectX;
+          }
+          if (i === 0 || rectRight > maxX) {
+            maxX = rectRight;
+          }
+          if (i === 0 || rectY < minY) {
+            minY = rectY;
+          }
+          if (i === 0 || rectBottom > maxY) {
+            maxY = rectBottom;
+          }
+        }
+      } else {
+        if (!selection.hasHostSelected.value) {
+          return;
+        }
+        minX = offset.x;
+        maxX = minX + ui.artboardSize.value.width;
+        minY = offset.y;
+        maxY = minY + ui.artboardSize.value.height;
+      }
+    }
+    const padding = ui.visibleViewportPadded.value;
+    const xSubtract = hasRects ? 5 * Math.min(scale, 1) : 0;
+    const margin = getMargin() * Math.min(scale, 1);
+    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) {
+        actualPlacementY2 = "bottom";
+      } else if (spaceAbove >= requiredSpace) {
+        actualPlacementY2 = "top";
+      } else {
+        actualPlacementY2 = spaceAbove > spaceBelow ? "top" : "bottom";
+      }
+    }
+    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;
+    }
+    const shouldAllowOverflow = options?.allowHorizontalOverflow && width > padding.width;
+    let idealPosition;
+    if (shouldAllowOverflow) {
+      const limitedY = Math.min(
+        Math.max(padding.y, y),
+        padding.height + padding.y - height
+      );
+      idealPosition = { x, y: limitedY };
+    } else {
+      const rect = limitPlacedRect(
+        {
+          x,
+          y,
+          width,
+          height
+        },
+        padding
+      );
+      const position = findIdealRectPosition(
+        ui.viewportBlockingRects.value,
+        rect,
+        padding
+      );
+      if (!position) {
+        return void 0;
+      }
+      idealPosition = position;
+    }
+    const caretWidth = getCaretWidth();
+    const caretHalfWidth = caretWidth / 2;
+    const minCaretX = caretHalfWidth;
+    const maxCaretX = width - caretHalfWidth;
+    const caretX = Math.max(
+      minCaretX,
+      Math.min(centerX - idealPosition.x, maxCaretX)
+    );
+    return {
+      ...idealPosition,
+      actualPlacementY: actualPlacementY2,
+      actualPlacementX: placementX,
+      caretX
+    };
+  }
+  function getWidth() {
+    if (options && options.getWidth) {
+      return options.getWidth();
+    }
+    if (el.value) {
+      return el.value.clientWidth;
+    }
+    return null;
+  }
+  function getHeight() {
+    if (options && options.getHeight) {
+      return options.getHeight();
+    }
+    if (el.value) {
+      return el.value.clientHeight;
+    }
+    return null;
+  }
+  function getPlacementVertical() {
+    if (options && options.getPlacementY) {
+      return options.getPlacementY();
+    }
+    return "top";
+  }
+  function getPlacementHorizontal() {
+    if (options && options.getPlacementX) {
+      return options.getPlacementX();
+    }
+    return "left";
+  }
+  onBlokkliEvent("canvas:draw", (ctx) => {
+    if (!el.value) {
+      return;
+    }
+    if (ui.isMobile.value) {
+      el.value.style.transform = "";
+      shouldRender.value = true;
+      return;
+    }
+    if (options && options.shouldUpdate && !options.shouldUpdate()) {
+      return;
+    }
+    const width = getWidth();
+    const height = getHeight();
+    if (width === null || height === null) {
+      return;
+    }
+    const placementY = getPlacementVertical();
+    const placementX = getPlacementHorizontal();
+    const coords = getCoords(
+      width,
+      height,
+      placementY,
+      placementX,
+      ctx.artboardOffset,
+      ctx.artboardScale
+    );
+    if (!coords) {
+      shouldRender.value = false;
+      return;
+    }
+    el.value.style.transform = `translate3d(${coords.x}px, ${coords.y}px, 0)`;
+    actualPlacementY.value = coords.actualPlacementY;
+    actualPlacementX.value = coords.actualPlacementX;
+    caretXPosition.value = coords.caretX;
+    shouldRender.value = true;
+  });
+  return {
+    shouldRender: computed(() => shouldRender.value),
+    placementY: computed(() => actualPlacementY.value),
+    placementX: computed(() => actualPlacementX.value),
+    caretX: computed(() => caretXPosition.value)
+  };
+}

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

@@ -0,0 +1,18 @@
+import type { RGB } from './../../../global/types/theme.js';
+interface TransitionOptions {
+    /**
+     * Duration in milliseconds.
+     */
+    duration?: number;
+    /**
+     * The easing method. Defaults to "ease out quad".
+     */
+    easing?: (t: number) => number;
+}
+/**
+ * Creates a computed property from the given callback and transitions between values.
+ *
+ * Returns a method that, when called, will return the current transitioned value.
+ */
+export declare function useTransitionedValue<T extends RGB | number>(valueCallback: () => T, options?: TransitionOptions): () => T;
+export {};

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

@@ -0,0 +1,57 @@
+import { computed, watch } from "vue";
+import { easeOutQuad } from "../helpers/easing/index.js";
+function isRGB(value) {
+  return Array.isArray(value) && value.length === 3;
+}
+function lerp(start, end, t) {
+  return start + (end - start) * t;
+}
+function interpolateColor(from, to, t) {
+  return [
+    lerp(from[0], to[0], t),
+    lerp(from[1], to[1], t),
+    lerp(from[2], to[2], t)
+  ];
+}
+function interpolateValue(from, to, t) {
+  if (isRGB(from) && isRGB(to)) {
+    return interpolateColor(from, to, t);
+  } else if (typeof from === "number" && typeof to === "number") {
+    return lerp(from, to, t);
+  }
+  return to;
+}
+function cloneValue(value) {
+  if (isRGB(value)) {
+    return [...value];
+  }
+  return value;
+}
+export function useTransitionedValue(valueCallback, options = {}) {
+  const { duration = 300, easing = easeOutQuad } = options;
+  const value = computed(valueCallback);
+  const initial = value.value;
+  let current = cloneValue(initial);
+  let target = cloneValue(initial);
+  let from = cloneValue(initial);
+  let startTime = null;
+  watch(value, (newValue) => {
+    from = cloneValue(current);
+    target = cloneValue(newValue);
+    startTime = Date.now();
+  });
+  return function getCurrentValue() {
+    if (startTime !== null) {
+      const elapsed = Date.now() - startTime;
+      const rawProgress = Math.min(elapsed / duration, 1);
+      if (rawProgress >= 1) {
+        current = cloneValue(target);
+        startTime = null;
+      } else {
+        const easedProgress = easing(rawProgress);
+        current = interpolateValue(from, target, easedProgress);
+      }
+    }
+    return current;
+  };
+}