@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.59

package/dist/runtime/editor/plugins/Sidebar/index.vue.d.ts

@@ -200,9 +200,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         width: number;
         height: number;
     };
-    minHeight: number;
     tourText: string;
     minWidth: number;
+    minHeight: number;
     region: SidebarRegion;
     tooltipTitle: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
@@ -220,7 +220,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         shouldRender: any;
         width: any;
         height: any;
-        toggleSidebar: () => void;
+        toggleSidebar: () => Promise<void>;
         isResizing: any;
     }) => any;
 } & {
@@ -232,7 +232,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         shouldRender: any;
         width: undefined;
         height: undefined;
-        toggleSidebar: () => void;
+        toggleSidebar: () => Promise<void>;
         isResizing: boolean;
     }) => any;
 }>;

package/dist/runtime/editor/plugins/ToolbarButton/index.vue

@@ -9,6 +9,7 @@
   id ? 'bk-is-' + id : void 0,
   $attrs.class
 ]"
+      :data-test-toolbar-button="id"
       :style="{ order: weight || 0 }"
       @click.prevent.stop="onClick"
     >
@@ -55,15 +56,16 @@ const props = defineProps({
   weight: { type: [Number, String], required: false },
   noCommand: { type: Boolean, required: false }
 });
-const { debug } = useBlokkli();
+const { debug, ui } = useBlokkli();
 const logger = debug.createLogger("PluginToolbar");
 const emit = defineEmits(["click"]);
 const el = ref(null);
-function onClick() {
+async function onClick() {
   if (props.disabled) {
     return;
   }
   logger.log(`Click ${props.id}`);
+  await ui.flushPendingChanges();
   emit("click");
 }
 const tooltipPlacement = computed(() => {

package/dist/runtime/editor/plugins/ViewOption/index.vue

@@ -4,6 +4,8 @@
       v-if="!ui.isMobile.value"
       ref="button"
       class="bk-toolbar-button _bk_group/tooltip"
+      :data-test-view-option="id"
+      :data-test-active="isActive"
       :class="{ 'bk-is-inactive': !isActive }"
       :style="{ order: weight || 0 }"
       @click.prevent.stop="onClick"

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

@@ -0,0 +1,8 @@
+import { type ComputedRef } from '#imports';
+import type { ColorOption } from '../types/config.js';
+export type ConfigProvider = {
+    colorOptions: ComputedRef<ColorOption[]>;
+    getColorOption: (id: string) => ColorOption | undefined;
+    getColorHex: (id: string) => string;
+};
+export default function (): ConfigProvider;

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

@@ -0,0 +1,18 @@
+import { computed } from "#imports";
+import { colorOptions as moduleColorOptions } from "#blokkli-build/editor-config";
+export default function() {
+  const colorOptions = computed(
+    () => Object.entries(moduleColorOptions).map(([id, entry]) => ({
+      id,
+      hex: entry.hex,
+      label: entry.label
+    }))
+  );
+  function getColorOption(id) {
+    return colorOptions.value.find((c) => c.id === id);
+  }
+  function getColorHex(id) {
+    return getColorOption(id)?.hex || "#888888";
+  }
+  return { colorOptions, getColorOption, getColorHex };
+}

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

@@ -92,6 +92,14 @@ export type DirectiveProvider = {
      * @returns Array of editable fields for the block
      */
     getEditablesForBlock: (uuid: string) => EditableFieldData[];
+    /**
+     * Get all currently registered editable fields, across both the host entity
+     * and all blocks. Intended for debug/test tooling that needs to enumerate
+     * every editable on the page.
+     *
+     * @returns Array of all 'editable' type directive fields
+     */
+    getAllEditables: () => EditableFieldData[];
     /**
      * Get all droppable field elements.
      *

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

@@ -217,6 +217,11 @@ export default function(debug, ui) {
     }
     return Object.values(editables).filter(falsy);
   }
+  function getAllEditables() {
+    return [...fieldData.values()].filter(
+      (item) => item.directiveType === "editable"
+    );
+  }
   function getDroppableElements() {
     const droppableElements = [];
     for (const item of fieldData.values()) {
@@ -266,6 +271,7 @@ export default function(debug, ui) {
     getDroppableAtPoint,
     findEditable,
     getEditablesForBlock,
+    getAllEditables,
     findEditableElement,
     getDroppableElements,
     registerValueElement,

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

@@ -245,21 +245,5 @@ export type StateProvider = {
      * @returns The parent entity UUID, or null if block not found
      */
     getParentEntityUuid: (uuid: string) => string | null;
-    /**
-     * Mark block UUIDs as dirty for forced re-render.
-     *
-     * When code bypasses Vue's reactivity (e.g. direct innerHTML writes),
-     * the VDOM gets out of sync with the actual DOM.  Calling markDirty
-     * schedules a forced re-render for the given blocks after the next
-     * successful mutation.
-     */
-    markDirty: (...uuids: string[]) => void;
-    /**
-     * Force re-render all blocks marked as dirty.
-     *
-     * Call this when cancelling an operation that used setDiffHtml to restore
-     * the DOM from reactive state without going through a mutation.
-     */
-    flushDirty: () => Promise<void>;
 };
 export default function (eventBus: BlokkliEventBus, adapter: BlokkliAdapter<any>, context: ComputedRef<AdapterContext>, $t: TextProvider, providerKey: string, permissions: EditPermission[]): Promise<StateProvider>;

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

@@ -25,21 +25,6 @@ function mapPublishOptions(context) {
   };
 }
 export default async function(eventBus, adapter, context, $t, providerKey, permissions) {
-  const dirtyUuids = /* @__PURE__ */ new Set();
-  function markDirty(...uuids) {
-    for (const uuid of uuids) {
-      dirtyUuids.add(uuid);
-    }
-  }
-  async function flushDirty() {
-    if (dirtyUuids.size === 0) {
-      return;
-    }
-    const uuids = [...dirtyUuids];
-    dirtyUuids.clear();
-    await nextTick();
-    eventBus.emit("block:rerender", uuids);
-  }
   let _mappedState = null;
   const overrideHostOptions = useState("options:" + providerKey);
   const stateLoaded = ref(false);
@@ -315,7 +300,6 @@ export default async function(eventBus, adapter, context, $t, providerKey, permi
         const errorMessage2 = result.errors?.join("\n") || $t("unexpectedMutationError", "An unexpected error happened.");
         throw new Error(errorMessage2);
       }
-      await flushDirty();
       if (successMessage) {
         emitMessage(successMessage);
       }
@@ -424,8 +408,6 @@ export default async function(eventBus, adapter, context, $t, providerKey, permi
     fromLibraryUuids: readonly(fromLibraryUuids),
     permissions: computed(() => permissions),
     getFieldKeyForUuid,
-    getParentEntityUuid,
-    markDirty,
-    flushDirty
+    getParentEntityUuid
   };
 }

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

@@ -1,2 +1,9 @@
-export type TextProvider = (key: string, defaultValue?: string) => string;
+type TextOptions = {
+    /**
+     * Appends "..." to the string.
+     */
+    more?: boolean;
+};
+export type TextProvider = (key: string, defaultValue?: string, options?: TextOptions) => string;
 export default function (requestedLanguage: string): Promise<TextProvider>;
+export {};

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

@@ -7,6 +7,7 @@ import {
   forceDefaultLanguage
 } from "#blokkli-build/editor-config";
 import { TRANSLATION_LANGUAGES } from "../../../global/constants";
+import { HORIZONTAL_ELLIPSIS } from "../helpers/string/index.js";
 function isInterfaceLanguage(value) {
   return TRANSLATION_LANGUAGES.includes(value);
 }
@@ -44,7 +45,9 @@ export default async function(requestedLanguage) {
     });
   }
   await loadTranslations(translationLoaders, language);
-  return (key, defaultValue) => {
-    return currentTranslations.value[key] || defaultValue || key;
+  return (key, defaultValue, options) => {
+    const text = currentTranslations.value[key] || defaultValue || key;
+    const suffix = options?.more ? HORIZONTAL_ELLIPSIS : "";
+    return text + suffix;
   };
 }

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

@@ -2,12 +2,14 @@ import { type Ref, type ComputedRef } from '#imports';
 import type { ShallowRef } from 'vue';
 import type { StorageProvider } from './storage.js';
 import type { GlobalUiDialog, SidebarRegion } from '#blokkli/editor/types/ui';
+import { type BlokkliClipboardPayload } from '#blokkli/editor/types/clipboard';
 import type { Viewport } from '../../../global/constants/index.js';
 import type { AdapterContext } from '#blokkli/editor/adapter';
 import type { ThemeColorName } from './../../../global/types/theme.js';
 import type { ElementProvider } from './element.js';
-import type { BlokkliEventBus } from '../events/index.js';
+import { type BlokkliEventBus } from '../events/index.js';
 import type { Coord, Rectangle, Size } from '../types/geometry.js';
+import type { TextProvider } from './texts.js';
 export type UiProvider = {
     /**
      * Get the Nuxt root element (#nuxt-root).
@@ -415,6 +417,31 @@ export type UiProvider = {
      * only locks toolbar position.
      */
     isChangingOptions: Ref<boolean>;
+    /**
+     * Register a handler that persists pending, not-yet-saved changes.
+     *
+     * Some features buffer changes locally while the user is interacting (e.g.
+     * the options form defers persisting option changes while the user tries
+     * them out). Such a feature registers a flush handler here so the rest of
+     * the editor can trigger and await that persistence via
+     * {@link flushPendingChanges}.
+     *
+     * Each handler is responsible for being safe to call when nothing is pending
+     * (resolve immediately) and for de-duping concurrent calls.
+     *
+     * @returns A function that unregisters the handler.
+     */
+    registerFlushHandler: (handler: () => Promise<unknown>) => () => void;
+    /**
+     * Persist any pending changes from all registered flush handlers and resolve
+     * once they are done.
+     *
+     * Action buttons should await this before they run, so that an action which
+     * depends on persisted state (e.g. opening an edit form built from server
+     * state, or publishing) sees the latest values. Resolves immediately when no
+     * handlers are registered.
+     */
+    flushPendingChanges: () => Promise<unknown>;
     /**
      * ID of the currently active (focused) highlight, or empty string.
      *
@@ -426,5 +453,19 @@ export type UiProvider = {
      * Whether the item actions are open.
      */
     itemActionsOpen: Ref<boolean>;
+    copyTextToClipboard: (text: string | number) => void;
+    /**
+     * Write a typed blökkli clipboard payload to the system clipboard.
+     *
+     * Wraps the payload in a marker envelope so paste detection never
+     * confuses arbitrary user-pasted JSON with a blökkli payload. The
+     * `BlokkliClipboardPayload` discriminated union is augmentable by
+     * features (`#blokkli/editor/types/clipboard`), so each call site is
+     * type-checked against the registered clipboard types.
+     *
+     * Throws on `navigator.clipboard.writeText` failure so callers can
+     * surface a domain-specific error message.
+     */
+    setClipboardData: (payload: BlokkliClipboardPayload) => Promise<void>;
 };
-export default function (eventBus: BlokkliEventBus, providerElement: HTMLElement, storage: StorageProvider, context: ComputedRef<AdapterContext>, element: ElementProvider, mainLayoutElement: Readonly<ShallowRef<HTMLDivElement | null>>, visibleViewportElement: Readonly<ShallowRef<HTMLDivElement | null>>): UiProvider;
+export default function (eventBus: BlokkliEventBus, providerElement: HTMLElement, storage: StorageProvider, context: ComputedRef<AdapterContext>, element: ElementProvider, mainLayoutElement: Readonly<ShallowRef<HTMLDivElement | null>>, visibleViewportElement: Readonly<ShallowRef<HTMLDivElement | null>>, $t: TextProvider): UiProvider;

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

@@ -6,7 +6,11 @@ import {
   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
@@ -15,6 +19,7 @@ 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",
@@ -22,7 +27,7 @@ const localeMap = {
   it: "it-CH",
   en: "en-GB"
 };
-export default function(eventBus, providerElement, storage, context, element, mainLayoutElement, visibleViewportElement) {
+export default function(eventBus, providerElement, storage, context, element, mainLayoutElement, visibleViewportElement, $t) {
   let cachedRootElement = null;
   let cachedArtboardElement = null;
   const interfaceLanguage = computed(() => {
@@ -55,6 +60,16 @@ export default function(eventBus, providerElement, storage, context, element, ma
   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("");
@@ -399,6 +414,28 @@ export default function(eventBus, providerElement, storage, context, element, ma
   });
   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,
@@ -450,6 +487,8 @@ export default function(eventBus, providerElement, storage, context, element, ma
     closeDialog,
     currentDialog: readonly(currentDialog),
     requireDialogCloseConfirm,
+    registerFlushHandler,
+    flushPendingChanges,
     toArtboardCoords,
     hasNestedEditorOpen,
     setNestedEditor,
@@ -460,6 +499,8 @@ export default function(eventBus, providerElement, storage, context, element, ma
     actionsToolbarLocked,
     isChangingOptions,
     activeHighlightId,
-    itemActionsOpen
+    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;
+    }
+  };
+}