@revenexx/editor 0.1.0

package/dist/runtime/editor/providers/ui.js

@@ -0,0 +1,506 @@
+import {
+  onMounted,
+  onBeforeUnmount,
+  ref,
+  computed,
+  watch,
+  readonly
+} from "#imports";
+import {
+  CLIPBOARD_ENVELOPE_FLAG
+} from "#blokkli/editor/types/clipboard";
+import { falsy } from "../../helpers/index.js";
+import { truncate } from "../helpers/string/index.js";
+import {
+  addElementClasses,
+  defineElementStyle
+} from "#blokkli/editor/composables";
+import {
+  defaultLanguage,
+  forceDefaultLanguage
+} from "#blokkli-build/editor-config";
+import { emitMessage } from "../events/index.js";
+const CLASS_PROXY_MODE = "bk-is-proxy-mode";
+const localeMap = {
+  de: "de-CH",
+  fr: "fr-CH",
+  it: "it-CH",
+  en: "en-GB"
+};
+export default function(eventBus, providerElement, storage, context, element, mainLayoutElement, visibleViewportElement, $t) {
+  let cachedRootElement = null;
+  let cachedArtboardElement = null;
+  const interfaceLanguage = computed(() => {
+    return forceDefaultLanguage ? defaultLanguage : context.value.language;
+  });
+  const locale = computed(() => {
+    const lang = interfaceLanguage.value;
+    return localeMap[lang] || lang;
+  });
+  const nestedEditorKey = ref("");
+  const hasNestedEditorOpen = computed(() => !!nestedEditorKey.value);
+  function setNestedEditor(key) {
+    nestedEditorKey.value = key ?? "";
+  }
+  const viewportWidth = ref(window.innerWidth);
+  const viewportHeight = ref(window.innerHeight);
+  const visibleViewportWidth = ref(0);
+  const visibleViewportHeight = ref(0);
+  const visibleViewportX = ref(0);
+  const visibleViewportY = ref(0);
+  const canvasFocused = ref(false);
+  const itemActionsOpen = ref(false);
+  function setCanvasFocused(isFocused) {
+    canvasFocused.value = isFocused;
+  }
+  function setIsApproving(value) {
+    isApproving.value = value;
+  }
+  const isProxyMode = ref(false);
+  const isApproving = ref(false);
+  const actionsToolbarLocked = ref(false);
+  const isChangingOptions = ref(false);
+  const flushHandlers = /* @__PURE__ */ new Set();
+  function registerFlushHandler(handler) {
+    flushHandlers.add(handler);
+    return () => {
+      flushHandlers.delete(handler);
+    };
+  }
+  function flushPendingChanges() {
+    return Promise.all([...flushHandlers].map((handler) => handler()));
+  }
+  const activeHighlightId = ref("");
+  const currentDialog = ref(null);
+  const openTooltip = ref("");
+  const hasTransformOverlayOpen = ref(false);
+  const isAnimating = ref(false);
+  const isAnalyzing = ref(false);
+  const transformLabel = ref("");
+  const openContextMenu = ref("");
+  const banners = ref({});
+  function openDialog(dialog) {
+    currentDialog.value = dialog;
+  }
+  function requireDialogCloseConfirm() {
+    if (currentDialog.value) {
+      currentDialog.value.confirmClose = true;
+    }
+  }
+  function closeDialog(id) {
+    if (!id || currentDialog.value?.id === id) {
+      currentDialog.value = null;
+    }
+  }
+  const hasDialogOpen = computed(() => currentDialog.value !== null);
+  function setBannerHeight(id, height) {
+    banners.value[id] = height;
+  }
+  function removeBanner(id) {
+    banners.value[id] = 0;
+  }
+  const selectionTopLeft = ref({ x: 0, y: 0 });
+  const baseSettings = storage.use("feature:settings:settings", {});
+  const lowPerformanceMode = computed(
+    () => baseSettings.value.lowPerformanceMode
+  );
+  const useAnimations = computed(
+    () => baseSettings.value.useAnimations !== false
+  );
+  const viewportBlockingRectsMap = ref(
+    {}
+  );
+  const isTransforming = computed(() => !!transformLabel.value);
+  const artboardSize = ref({
+    width: 1,
+    height: 1
+  });
+  const artboardOffset = ref({
+    x: 0,
+    y: 0
+  });
+  const artboardScale = ref(1);
+  const resizeElementMap = /* @__PURE__ */ new WeakMap();
+  let visibleViewportResizeTimeout = null;
+  function updateVisibleViewport() {
+    if (!visibleViewportElement.value) {
+      return;
+    }
+    const rect = visibleViewportElement.value.getBoundingClientRect();
+    visibleViewportWidth.value = rect.width;
+    visibleViewportHeight.value = rect.height;
+    visibleViewportX.value = rect.x;
+    visibleViewportY.value = rect.y;
+  }
+  const resizeObserver = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      const size = entry.contentBoxSize[0];
+      if (!size) {
+        return;
+      }
+      const key = resizeElementMap.get(entry.target);
+      if (!key) {
+        return;
+      }
+      if (key === "artboard") {
+        artboardSize.value.width = size.inlineSize;
+        artboardSize.value.height = size.blockSize;
+      } else if (key === "visible-viewport") {
+        visibleViewportWidth.value = size.inlineSize;
+        visibleViewportHeight.value = size.blockSize;
+        if (visibleViewportResizeTimeout) {
+          window.clearTimeout(visibleViewportResizeTimeout);
+        }
+        visibleViewportResizeTimeout = window.setTimeout(() => {
+          updateVisibleViewport();
+        }, 50);
+      }
+    }
+  });
+  const setViewportBlockingRectangle = (key, rect) => {
+    if (!rect) {
+      viewportBlockingRectsMap.value[key] = void 0;
+      return;
+    }
+    viewportBlockingRectsMap.value[key] = rect;
+  };
+  const artboardElement = () => {
+    if (cachedArtboardElement) {
+      return cachedArtboardElement;
+    }
+    const el = element.query(
+      document.documentElement,
+      ".bk-main-canvas",
+      "Get main canvas."
+    );
+    if (!el || !(el instanceof HTMLElement)) {
+      throw new Error("Failed to locate artboard element.");
+    }
+    cachedArtboardElement = el;
+    return el;
+  };
+  const rootElement = () => {
+    if (cachedRootElement) {
+      return cachedRootElement;
+    }
+    const el = element.query(
+      document.documentElement,
+      "#nuxt-root",
+      "Get Nuxt root element."
+    );
+    if (!el || !(el instanceof HTMLElement)) {
+      throw new Error("Failed to locate root Nuxt element.");
+    }
+    cachedRootElement = el;
+    return el;
+  };
+  const appViewport = computed(() => {
+    if (viewportWidth.value < 1024) {
+      return "mobile";
+    }
+    return "desktop";
+  });
+  const isMobile = computed(() => appViewport.value === "mobile");
+  const isDesktop = computed(() => appViewport.value === "desktop");
+  let resizeTimeout = null;
+  const onResize = () => {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(() => {
+      viewportWidth.value = window.innerWidth;
+      viewportHeight.value = window.innerHeight;
+      eventBus.emit("ui:resized");
+    }, 400);
+  };
+  const activeSidebarsLeft = ref([]);
+  const activeSidebarsRight = ref([]);
+  const activeSidebarsRightBottom = ref([]);
+  function setActiveSidebar(region, id) {
+    if (region === "left") {
+      if (activeSidebarsLeft.value.includes(id)) {
+        return;
+      }
+      activeSidebarsLeft.value.push(id);
+    } else if (region === "right-bottom") {
+      if (activeSidebarsRightBottom.value.includes(id)) {
+        return;
+      }
+      activeSidebarsRightBottom.value.push(id);
+    } else {
+      if (activeSidebarsRight.value.includes(id)) {
+        return;
+      }
+      activeSidebarsRight.value.push(id);
+    }
+  }
+  function removeActiveSidebar(region, id) {
+    if (region === "left") {
+      activeSidebarsLeft.value = activeSidebarsLeft.value.filter(
+        (v) => v !== id
+      );
+    } else if (region === "right-bottom") {
+      activeSidebarsRightBottom.value = activeSidebarsRightBottom.value.filter(
+        (v) => v !== id
+      );
+    } else {
+      activeSidebarsRight.value = activeSidebarsRight.value.filter(
+        (v) => v !== id
+      );
+    }
+  }
+  const hasSidebarLeft = computed(() => {
+    return !!activeSidebarsLeft.value.length;
+  });
+  const hasSidebarRight = computed(() => {
+    return !!activeSidebarsRight.value.length;
+  });
+  const hasSidebarRightBottom = computed(() => {
+    return !!activeSidebarsRightBottom.value.length;
+  });
+  const blockingPaddingX = computed(() => 15);
+  const blockingPaddingY = computed(() => 50);
+  const viewportPadding = computed(() => 10);
+  const scrollbarWidth = computed(() => 16);
+  const viewportBlockingRects = computed(() => {
+    return Object.values(viewportBlockingRectsMap.value).map((rect) => {
+      if (!rect) {
+        return;
+      }
+      return {
+        x: rect.x - blockingPaddingX.value,
+        y: rect.y - blockingPaddingY.value,
+        width: rect.width + blockingPaddingX.value * 2,
+        height: rect.height + blockingPaddingY.value * 2
+      };
+    }).filter(falsy);
+  });
+  const visibleViewport = computed(() => {
+    return {
+      x: visibleViewportX.value,
+      y: visibleViewportY.value,
+      width: visibleViewportWidth.value,
+      height: visibleViewportHeight.value
+    };
+  });
+  const visibleViewportPadded = computed(() => {
+    const p = viewportPadding.value;
+    return {
+      x: visibleViewportX.value + p,
+      y: visibleViewportY.value + p,
+      width: visibleViewportWidth.value - 2 * p,
+      height: visibleViewportHeight.value - 2 * p
+    };
+  });
+  const viewport = computed(() => {
+    return {
+      width: viewportWidth.value,
+      height: viewportHeight.value
+    };
+  });
+  function getAbsoluteElementRect(v, providedScale, providedOffset) {
+    const rect = v instanceof HTMLElement ? v.getBoundingClientRect() : v;
+    const scale = providedScale || artboardScale.value;
+    const offset = providedOffset || artboardOffset.value;
+    return {
+      x: rect.x / scale - offset.x / scale,
+      y: rect.y / scale - offset.y / scale,
+      // Force at least a size of 24.
+      width: Math.max(rect.width / scale, 24),
+      height: Math.max(rect.height / scale, 24)
+    };
+  }
+  function toArtboardCoords(coords, providedScale, providedOffset) {
+    const scale = providedScale || artboardScale.value;
+    const offset = providedOffset || artboardOffset.value;
+    return {
+      x: coords.x / scale - offset.x / scale,
+      y: coords.y / scale - offset.y / scale
+    };
+  }
+  function getViewportRelativeRect(rect) {
+    const scale = artboardScale.value;
+    const offset = artboardOffset.value;
+    return {
+      x: rect.x * scale + offset.x,
+      y: rect.y * scale + offset.y,
+      width: rect.width * scale,
+      height: rect.height * scale
+    };
+  }
+  function setTransform(label) {
+    transformLabel.value = label || "";
+  }
+  function formatDate(date, options) {
+    const dateObj = typeof date === "string" ? new Date(date) : date;
+    const defaultOptions = {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit"
+    };
+    return dateObj.toLocaleString(locale.value, options || defaultOptions);
+  }
+  function formatNumber(value, options) {
+    return value.toLocaleString(locale.value, options);
+  }
+  function formatPrice(value) {
+    return value.toLocaleString(locale.value, {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 4
+    });
+  }
+  addElementClasses(document.documentElement, "bk-is-animating", isAnimating);
+  addElementClasses(
+    document.documentElement,
+    "bk-has-sidebar-left",
+    hasSidebarLeft
+  );
+  addElementClasses(
+    document.documentElement,
+    "bk-has-sidebar-right",
+    hasSidebarRight
+  );
+  addElementClasses(
+    document.documentElement,
+    "bk-has-sidebar-right-bottom",
+    hasSidebarRightBottom
+  );
+  addElementClasses(document.documentElement, ["bk-html-root"]);
+  addElementClasses(document.body, "bk-body");
+  addElementClasses(document.documentElement, CLASS_PROXY_MODE, isProxyMode);
+  addElementClasses(document.documentElement, "bk-is-analyzing", isAnalyzing);
+  function observeElement(element2, key) {
+    resizeElementMap.set(element2, key);
+    resizeObserver.observe(element2);
+  }
+  watch(
+    visibleViewportElement,
+    (el) => {
+      if (el) {
+        observeElement(el, "visible-viewport");
+      }
+    },
+    {
+      immediate: true
+    }
+  );
+  onMounted(() => {
+    viewportWidth.value = window.innerWidth;
+    viewportHeight.value = window.innerHeight;
+    window.addEventListener("resize", onResize);
+    const artboard = artboardElement();
+    observeElement(artboard, "artboard");
+  });
+  onBeforeUnmount(() => {
+    window.removeEventListener("resize", onResize);
+    clearTimeout(resizeTimeout);
+    resizeObserver.disconnect();
+  });
+  const hasTooltipOpen = computed(() => !!openTooltip.value);
+  const selectionColors = ref([]);
+  function setSelectionColor(id, color) {
+    selectionColors.value = [
+      ...selectionColors.value.filter((v) => v.id !== id),
+      { id, color }
+    ];
+  }
+  function removeSelectionColor(id) {
+    selectionColors.value = selectionColors.value.filter((v) => v.id !== id);
+  }
+  const selectionColor = computed(() => {
+    return selectionColors.value[selectionColors.value.length - 1]?.color ?? null;
+  });
+  defineElementStyle("--bk-viewport-padding", viewportPadding);
+  defineElementStyle("--bk-scrollbar-width", scrollbarWidth);
+  function copyTextToClipboard(input) {
+    const text = input.toString();
+    navigator.clipboard.writeText(text);
+    const message = $t(
+      "copiedToClipboardMessage",
+      '"@text" has been copied to your clipboard'
+    ).replace("@text", truncate(text, 50));
+    emitMessage(message, "success", void 0, true);
+  }
+  async function setClipboardData(payload) {
+    const ctx = context.value;
+    const envelope = {
+      [CLIPBOARD_ENVELOPE_FLAG]: true,
+      meta: {
+        hostUuid: ctx.entityUuid,
+        hostEntityType: ctx.entityType,
+        hostBundle: ctx.entityBundle
+      },
+      data: payload
+    };
+    await navigator.clipboard.writeText(JSON.stringify(envelope));
+  }
+  return {
+    artboardElement,
+    rootElement,
+    providerElement,
+    isMobile,
+    isDesktop,
+    isAnimating,
+    isAnalyzing,
+    isTransforming,
+    setTransform,
+    transformLabel: computed(() => transformLabel.value),
+    useAnimations,
+    visibleViewport,
+    visibleViewportPadded,
+    setViewportBlockingRectangle,
+    viewportBlockingRects,
+    appViewport,
+    openContextMenu,
+    viewport,
+    artboardSize: computed(() => artboardSize.value),
+    isProxyMode,
+    artboardScale,
+    artboardOffset,
+    selectionTopLeft,
+    lowPerformanceMode,
+    getAbsoluteElementRect,
+    getViewportRelativeRect,
+    interfaceLanguage,
+    locale,
+    formatDate,
+    formatNumber,
+    formatPrice,
+    hasDialogOpen,
+    hasTransformOverlayOpen,
+    hasTooltipOpen,
+    openTooltip,
+    selectionColor,
+    setSelectionColor,
+    removeSelectionColor,
+    setBannerHeight,
+    removeBanner,
+    setActiveSidebar,
+    removeActiveSidebar,
+    hasSidebarLeft,
+    hasSidebarRight,
+    hasSidebarRightBottom,
+    mainLayoutElement,
+    openDialog,
+    closeDialog,
+    currentDialog: readonly(currentDialog),
+    requireDialogCloseConfirm,
+    registerFlushHandler,
+    flushPendingChanges,
+    toArtboardCoords,
+    hasNestedEditorOpen,
+    setNestedEditor,
+    setCanvasFocused,
+    canvasFocused: readonly(canvasFocused),
+    isApproving: readonly(isApproving),
+    setIsApproving,
+    actionsToolbarLocked,
+    isChangingOptions,
+    activeHighlightId,
+    itemActionsOpen,
+    copyTextToClipboard,
+    setClipboardData
+  };
+}

package/dist/runtime/editor/providers/user.d.ts

@@ -0,0 +1,20 @@
+import type { BlokkliAdapter } from '#blokkli/editor/adapter';
+import type { BlokkliUser } from '../types/user.js';
+export type UserProvider = {
+    /**
+     * The user currently editing.
+     */
+    current: BlokkliUser;
+    /**
+     * Whether the given user id matches the current user.
+     */
+    isCurrent: (id: string) => boolean;
+    /**
+     * Load the list of users available in the editor (e.g. for @-mentions).
+     * The first call invokes the adapter; subsequent calls return the cached
+     * result. Adapters that don't implement getBlokkliUsers yield an empty
+     * list. The cache is a plain (non-reactive) variable.
+     */
+    loadUsers: () => Promise<BlokkliUser[]>;
+};
+export default function (adapter: BlokkliAdapter<any>): Promise<UserProvider>;

package/dist/runtime/editor/providers/user.js

@@ -0,0 +1,14 @@
+export default async function(adapter) {
+  const current = await adapter.getCurrentUser();
+  let usersPromise = null;
+  return {
+    current,
+    isCurrent: (id) => id === current.id,
+    loadUsers: () => {
+      if (!usersPromise) {
+        usersPromise = adapter.getBlokkliUsers ? adapter.getBlokkliUsers() : Promise.resolve([]);
+      }
+      return usersPromise;
+    }
+  };
+}

package/dist/runtime/editor/providers/workspaces.d.ts

@@ -0,0 +1,93 @@
+import { type Ref, type ComputedRef } from '#imports';
+import type { AdapterContext, FullBlokkliAdapter } from '#blokkli/editor/adapter';
+import type { StateProvider } from './state.js';
+export type HostEntitySearchResultLabelMap = {
+    label: string;
+    bundles: Record<string, string>;
+};
+export type HostEntitySearchResultItem = {
+    /**
+     * The ID of the host entity.
+     */
+    id: string;
+    /**
+     * The UUID of the host entity.
+     */
+    uuid: string;
+    /**
+     * The entity type of the host entity.
+     */
+    entityType: string;
+    /**
+     * The entity bundle of the host entity.
+     */
+    bundle: string;
+    /**
+     * The label of the host entity.
+     */
+    label: string;
+    /**
+     * The url to start editing.
+     */
+    url: string;
+    /**
+     * If an edit state exists: The time when the edit state was last changed.
+     */
+    lastChanged: string | null;
+    /**
+     * If an edit state exists: The ID of the owner of the edit state.
+     */
+    uid: string | null;
+    /**
+     * Optional additional context used for searching (e.g. SKU, internal ID).
+     *
+     * Not displayed in the UI, but included in the fzf search.
+     */
+    context?: string;
+};
+export type HostEntitySearchResult = {
+    items: HostEntitySearchResultItem[];
+    /**
+     * A map with keys that are entity types.
+     */
+    labelMap: HostEntitySearchResultLabelMap;
+};
+export type WorkspacesProvider = {
+    /**
+     * Whether the host entities have been fetched.
+     */
+    isLoaded: Readonly<Ref<boolean>>;
+    /**
+     * Whether the host entities are currently being fetched.
+     */
+    isLoading: Readonly<Ref<boolean>>;
+    /**
+     * Loaded items minus the current entity, in workspace default sort order:
+     * entries with edit states first → current user as owner → most-recent →
+     * alphabetic by label.
+     */
+    defaultSorted: ComputedRef<HostEntitySearchResultItem[]>;
+    /**
+     * Load the host entities. Idempotent — concurrent calls share the same
+     * in-flight promise, and resolved data is reused on subsequent calls.
+     */
+    ensureLoaded: () => Promise<void>;
+    /**
+     * Run a fuzzy search over loaded items. Resolves to fzf-ordered results
+     * (excluding the current entity). An empty/whitespace query resolves to [].
+     */
+    search: (query: string) => Promise<HostEntitySearchResultItem[]>;
+    /**
+     * Translated label for a bundle key, falling back to the key itself.
+     */
+    getBundleLabel: (bundle: string) => string;
+};
+declare module '#blokkli/editor/adapter' {
+    interface BlokkliAdapter<T> {
+        /**
+         * Search for host entities.
+         */
+        getHostEntities?: () => Promise<HostEntitySearchResult>;
+    }
+}
+export default function workspacesProvider(adapter: FullBlokkliAdapter<any>, context: ComputedRef<AdapterContext>, state: StateProvider): WorkspacesProvider;

package/dist/runtime/editor/providers/workspaces.js

@@ -0,0 +1,76 @@
+import { ref, computed } from "#imports";
+import { loadFzf } from "#blokkli/editor/libraries/fzf";
+export default function workspacesProvider(adapter, context, state) {
+  const items = ref([]);
+  const labelMap = ref(null);
+  const isLoaded = ref(false);
+  const isLoading = ref(false);
+  let loadPromise = null;
+  let fzf = null;
+  function ensureLoaded() {
+    if (isLoaded.value) {
+      return Promise.resolve();
+    }
+    if (loadPromise) {
+      return loadPromise;
+    }
+    isLoading.value = true;
+    loadPromise = adapter.getHostEntities().then((result) => {
+      items.value = result.items;
+      labelMap.value = result.labelMap;
+      isLoaded.value = true;
+    }).finally(() => {
+      isLoading.value = false;
+    });
+    return loadPromise;
+  }
+  const ownerId = computed(() => state.owner.value?.id);
+  const currentEntityUuid = computed(() => context.value.entityUuid);
+  const defaultSorted = computed(() => {
+    return items.value.filter((v) => v.uuid !== currentEntityUuid.value).sort((a, b) => {
+      const aHasState = a.lastChanged !== null ? 0 : 1;
+      const bHasState = b.lastChanged !== null ? 0 : 1;
+      if (aHasState !== bHasState) return aHasState - bHasState;
+      const aIsOwner = a.uid && a.uid === ownerId.value ? 0 : 1;
+      const bIsOwner = b.uid && b.uid === ownerId.value ? 0 : 1;
+      if (aIsOwner !== bIsOwner) return aIsOwner - bIsOwner;
+      if (a.lastChanged && b.lastChanged) {
+        return new Date(b.lastChanged).getTime() - new Date(a.lastChanged).getTime();
+      }
+      if (a.lastChanged) return -1;
+      if (b.lastChanged) return 1;
+      return a.label.localeCompare(b.label);
+    });
+  });
+  async function getFzf() {
+    if (!fzf) {
+      const { AsyncFzf, asyncExtendedMatch } = await loadFzf();
+      fzf = new AsyncFzf(items.value, {
+        selector: (item) => item.context ? item.label + " " + item.context : item.label,
+        match: asyncExtendedMatch
+      });
+    }
+    return fzf;
+  }
+  async function search(query) {
+    const trimmed = query.trim();
+    if (!trimmed) {
+      return [];
+    }
+    await ensureLoaded();
+    const instance = await getFzf();
+    const results = await instance.find(trimmed);
+    return results.map((r) => r.item).filter((v) => v.uuid !== currentEntityUuid.value);
+  }
+  function getBundleLabel(bundle) {
+    return labelMap.value?.bundles[bundle] ?? bundle;
+  }
+  return {
+    isLoaded,
+    isLoading,
+    defaultSorted,
+    ensureLoaded,
+    search,
+    getBundleLabel
+  };
+}