@blokkli/editor 2.0.0-alpha.23 → 2.0.0-alpha.25

package/dist/runtime/helpers/providers/indicators.d.ts

@@ -0,0 +1,44 @@
+import { type Ref } from 'vue';
+import type { BlockIndicator } from '../../types/index.js';
+export type IndicatorsProvider = {
+    /**
+     * List of all active block indicators.
+     *
+     * Indicators are visual badges/icons that appear on blocks
+     * (e.g., anchor icons, schedule indicators, etc.).
+     */
+    indicators: Ref<BlockIndicator[]>;
+    /**
+     * UUID of the currently hovered block.
+     *
+     * Used to show/hide hover-specific indicators.
+     */
+    hovered: Ref<string>;
+    /**
+     * Add a block indicator.
+     *
+     * Registers a new indicator to be displayed on a block.
+     *
+     * @param indicator - The indicator configuration
+     */
+    addIndicator: (indicator: BlockIndicator) => void;
+    /**
+     * Remove a block indicator.
+     *
+     * Removes an indicator based on its ID and the block UUID.
+     * Both must match to remove the indicator.
+     *
+     * @param id - The indicator ID
+     * @param uuid - The block UUID
+     */
+    removeIndicator: (id: string, uuid: string) => void;
+    /**
+     * Set the currently hovered block.
+     *
+     * Updates the hovered state used to show hover-specific indicators.
+     *
+     * @param uuid - The block UUID, or null/undefined to clear
+     */
+    setHovered: (uuid?: string | null) => void;
+};
+export default function (): IndicatorsProvider;

package/dist/runtime/helpers/providers/keyboard.d.ts

@@ -0,0 +1,76 @@
+import { type Ref, type ComputedRef } from 'vue';
+import type { KeyboardShortcut } from '#blokkli/types';
+type RegisteredShortcut = {
+    key: string;
+    shortcut: KeyboardShortcut;
+};
+export type KeyboardProvider = {
+    /**
+     * Whether the Space key is currently pressed.
+     *
+     * Commonly used to enable panning mode in the artboard.
+     */
+    isPressingSpace: Readonly<Ref<boolean>>;
+    /**
+     * Whether Control/Meta key is currently pressed.
+     *
+     * Meta is Cmd on macOS, Ctrl on Windows/Linux.
+     * Also true when CapsLock is active.
+     */
+    isPressingControl: Readonly<Ref<boolean>>;
+    /**
+     * Whether the Shift key is currently pressed.
+     */
+    isPressingShift: Readonly<Ref<boolean>>;
+    /**
+     * Update keyboard modifier state from a mouse/pointer event.
+     *
+     * Useful for updating modifier state during drag operations where
+     * keyboard events might not fire.
+     *
+     * @param e - The mouse or pointer event
+     */
+    setShortcutStateFromEvent: (e: MouseEvent | PointerEvent) => void;
+    /**
+     * List of all registered keyboard shortcuts.
+     *
+     * Shortcuts are registered by features, buttons, and actions to enable
+     * keyboard navigation and commands.
+     */
+    shortcuts: ComputedRef<RegisteredShortcut[]>;
+    /**
+     * Register a keyboard shortcut.
+     *
+     * Adds the shortcut to the global shortcuts list for display in help UI.
+     *
+     * @param shortcut - The keyboard shortcut configuration
+     */
+    registerShortcut: (shortcut: KeyboardShortcut) => void;
+    /**
+     * Unregister a keyboard shortcut.
+     *
+     * Removes the shortcut from the global shortcuts list.
+     *
+     * @param shortcut - The keyboard shortcut to remove
+     */
+    unregisterShortcut: (shortcut: KeyboardShortcut) => void;
+    /**
+     * Lock keyboard events.
+     *
+     * Prevents keyboard shortcuts from firing. Used when text input is focused
+     * or dialogs are open to avoid unintended actions.
+     *
+     * @param id - Unique identifier for this lock
+     */
+    lockKeyboardEvents: (id: string) => void;
+    /**
+     * Unlock keyboard events.
+     *
+     * Removes a keyboard lock, re-enabling shortcuts when all locks are removed.
+     *
+     * @param id - The lock identifier to remove
+     */
+    unlockKeyboardEvents: (id: string) => void;
+};
+export default function (): KeyboardProvider;
+export {};

package/dist/runtime/helpers/{keyboardProvider.js → providers/keyboard.js}

@@ -3,7 +3,6 @@ import {
   readonly,
   onMounted,
   onBeforeUnmount,
-  watch,
   computed
 } from "vue";
 import { eventBus } from "#blokkli/helpers/eventBus";
@@ -13,7 +12,7 @@ function getControlState(e) {
   }
   return e.getModifierState("Control") || e.getModifierState("Meta");
 }
-export default function(animationProvider) {
+export default function() {
   const isPressingControl = ref(false);
   const isPressingSpace = ref(false);
   const isPressingShift = ref(false);
@@ -62,12 +61,6 @@ export default function(animationProvider) {
     document.removeEventListener("keyup", onKeyUp);
     document.removeEventListener("visibilitychange", onVisibilityChange);
   });
-  watch(isPressingSpace, () => {
-    animationProvider.requestDraw();
-  });
-  watch(isPressingControl, () => {
-    animationProvider.requestDraw();
-  });
   const getShortcutKey = (shortcut) => [!!shortcut.meta, !!shortcut.shift, shortcut.code].join("-");
   const registerShortcut = (shortcut) => {
     registeredShortcuts.value.push({ key: getShortcutKey(shortcut), shortcut });

package/dist/runtime/helpers/providers/plugin.d.ts

@@ -0,0 +1,81 @@
+import type { AddAction } from '#blokkli/types';
+import type { BlokkliIcon } from '#blokkli-build/icons';
+type PluginAddFunction<T> = () => T | T[] | undefined;
+type AddActionFunction = PluginAddFunction<AddAction>;
+export type ItemDropdownAction = {
+    id: string;
+    label: string;
+    description?: string;
+    enabled?: boolean;
+    icon?: BlokkliIcon;
+    bundle?: string;
+    weight?: number;
+    group: string;
+    callback: () => void;
+};
+type ItemDropdownActionFunction = PluginAddFunction<ItemDropdownAction>;
+export type MenuButtonPlugin = {
+    id: string;
+    title: string;
+    description: string;
+    icon?: BlokkliIcon;
+    type?: 'success' | 'danger' | 'yellow';
+    weight?: number;
+    secondary?: boolean;
+    disabled?: boolean;
+    callback: () => void;
+};
+type MenuButtonFunction = PluginAddFunction<MenuButtonPlugin>;
+type PluginFunctionMap = {
+    addAction: AddActionFunction;
+    itemDropdownAction: ItemDropdownActionFunction;
+    menuButton: MenuButtonFunction;
+};
+type PluginDataMap = {
+    addAction: AddAction;
+    itemDropdownAction: ItemDropdownAction;
+    menuButton: MenuButtonPlugin;
+};
+export type PluginProvider = {
+    /**
+     * Register a plugin provider function.
+     *
+     * The function will be called when plugins of this type are requested.
+     * It can return a single plugin, an array of plugins, or undefined.
+     *
+     * @param type - The plugin type ('addAction', 'itemDropdownAction', 'menuButton')
+     * @param fn - Function that returns plugin(s)
+     *
+     * @example
+     * ```ts
+     * plugin.add('addAction', () => ({
+     *   id: 'custom-add',
+     *   label: 'Add Custom',
+     *   bundles: ['text'],
+     *   callback: () => console.log('add'),
+     * }))
+     * ```
+     */
+    add<T extends keyof PluginFunctionMap>(type: T, fn: PluginFunctionMap[T]): void;
+    /**
+     * Unregister a plugin provider function.
+     *
+     * Removes a previously registered function so it no longer provides plugins.
+     *
+     * @param type - The plugin type
+     * @param fn - The function to remove (must be the same reference used in add)
+     */
+    remove<T extends keyof PluginFunctionMap>(type: T, fn: PluginFunctionMap[T]): void;
+    /**
+     * Get all plugins from all registered providers.
+     *
+     * Calls all registered provider functions for this type, flattens the results,
+     * and filters out undefined values.
+     *
+     * @param type - The plugin type to retrieve
+     * @returns Array of all available plugins of this type
+     */
+    get<T extends keyof PluginDataMap>(type: T): PluginDataMap[T][];
+};
+export default function (): PluginProvider;
+export {};

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

@@ -0,0 +1,64 @@
+import { ref } from "#imports";
+export default function() {
+  const addActionPlugins = ref([]);
+  const itemDropdownActionPlugins = ref([]);
+  const menuButtonPlugins = ref([]);
+  function add(type, fn) {
+    if (type === "addAction") {
+      addActionPlugins.value.push(fn);
+    } else if (type === "itemDropdownAction") {
+      itemDropdownActionPlugins.value.push(fn);
+    } else if (type === "menuButton") {
+      menuButtonPlugins.value.push(fn);
+    }
+  }
+  function remove(type, fn) {
+    if (type === "addAction") {
+      addActionPlugins.value = addActionPlugins.value.filter(
+        (v) => v !== fn
+      );
+    } else if (type === "itemDropdownAction") {
+      itemDropdownActionPlugins.value = itemDropdownActionPlugins.value.filter(
+        (v) => v !== fn
+      );
+    } else if (type === "menuButton") {
+      menuButtonPlugins.value = menuButtonPlugins.value.filter(
+        (v) => v !== fn
+      );
+    }
+  }
+  function get(type) {
+    let storage;
+    if (type === "addAction") {
+      storage = addActionPlugins.value;
+    } else if (type === "itemDropdownAction") {
+      storage = itemDropdownActionPlugins.value;
+    } else if (type === "menuButton") {
+      storage = menuButtonPlugins.value;
+    } else {
+      return [];
+    }
+    const result = [];
+    for (let i = 0; i < storage.length; i++) {
+      const callback = storage[i];
+      if (!callback) {
+        continue;
+      }
+      const callbackResult = callback();
+      if (!callbackResult) {
+        continue;
+      }
+      if (Array.isArray(callbackResult)) {
+        result.push(...callbackResult);
+      } else {
+        result.push(callbackResult);
+      }
+    }
+    return result;
+  }
+  return {
+    add,
+    remove,
+    get
+  };
+}

package/dist/runtime/helpers/{selectionProvider.d.ts → providers/selection.d.ts}

@@ -1,6 +1,6 @@
 import { type Ref, type ComputedRef } from '#imports';
 import type { DraggableItem, InteractionMode, RenderedFieldListItem } from '#blokkli/types';
-import type { BlocksProvider } from './providers/blocks.js';
+import type { BlocksProvider } from './blocks.js';
 export type SelectionProvider = {
     /**
      * The currently selected UUIDs.
@@ -66,6 +66,9 @@ export type SelectionProvider = {
      * The block bundles of the items being dragged.
      */
     dragItemsBundles: ComputedRef<string[]>;
+    /**
+     * Determine if the given block UUID is currently selected.
+     */
     isBlockSelected(uuid: string): boolean;
     /**
      * Lock selection.

package/dist/runtime/helpers/{selectionProvider.js → providers/selection.js}

@@ -1,4 +1,4 @@
-import onBlokkliEvent from "./composables/onBlokkliEvent.js";
+import onBlokkliEvent from "../composables/onBlokkliEvent.js";
 import { computed, ref } from "#imports";
 import { falsy, onlyUnique } from "#blokkli/helpers";
 export default function(blocks) {

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

@@ -0,0 +1,227 @@
+import { type Ref, type ComputedRef } from 'vue';
+import type { BlokkliAdapter, AdapterContext } from '../../adapter/index.js';
+import type { MutatedField, EditEntity, MutatedOptions, TranslationState, MappedState, MutationItem, Validation, MutateWithLoadingStateFunction, EditMode, FieldListItem, PublishOptions, EditPermission } from '#blokkli/types';
+import type { TextProvider } from './texts.js';
+export type BlokkliOwner = {
+    name: string | undefined;
+    currentUserIsOwner: boolean;
+};
+export type RenderedBlock = {
+    item: FieldListItem;
+    parentEntityType: string;
+    parentEntityBundle: string;
+    parentEntityUuid: string;
+};
+export type StateProvider = {
+    /**
+     * Information about the editing session owner.
+     *
+     * Includes owner name and whether the current user is the owner.
+     */
+    owner: Readonly<Ref<BlokkliOwner | null>>;
+    /**
+     * Refresh key that changes when state is reloaded.
+     *
+     * Use as a component key to force remounting when state updates.
+     */
+    refreshKey: Readonly<Ref<string>>;
+    /**
+     * All mutated fields in the current editing session.
+     *
+     * Each field contains its entity context, field name, and list of blocks.
+     */
+    mutatedFields: Readonly<Ref<MutatedField[]>>;
+    /**
+     * The host entity being edited.
+     *
+     * Contains label, status, and bundle information.
+     */
+    entity: Readonly<Ref<EditEntity>>;
+    /**
+     * Mutated options for all blocks and the host entity.
+     *
+     * Maps block UUIDs (or 'HOST' for host options) to their option values.
+     */
+    mutatedOptions: MutatedOptions;
+    /**
+     * Translation state for the edited entity.
+     *
+     * Includes source language, available languages, and existing translations.
+     */
+    translation: Readonly<Ref<TranslationState>>;
+    /**
+     * Publishing options and capabilities.
+     *
+     * Indicates whether publishing, scheduling, and revisions are available.
+     */
+    publishOptions: Readonly<Ref<PublishOptions>>;
+    /**
+     * History of all mutations in the editing session.
+     *
+     * Used for undo/redo functionality and tracking changes.
+     */
+    mutations: Readonly<Ref<MutationItem[]>>;
+    /**
+     * Current position in the mutation history.
+     *
+     * -1 indicates no mutations, 0+ indicates active mutation index.
+     */
+    currentMutationIndex: Readonly<Ref<number>>;
+    /**
+     * Validation violations for the current state.
+     *
+     * Contains errors and warnings about invalid field values or configurations.
+     */
+    violations: Readonly<Ref<Validation[]>>;
+    /**
+     * Execute a mutation with loading state and error handling.
+     *
+     * Shows loading indicator, handles errors, updates state, and shows messages.
+     *
+     * @param callback - Function that performs the mutation
+     * @param errorMessage - Error message to show on failure (false to suppress)
+     * @param successMessage - Optional success message to show
+     * @returns True if successful, false if failed
+     */
+    mutateWithLoadingState: MutateWithLoadingStateFunction;
+    /**
+     * Current edit mode.
+     *
+     * - 'readonly': User cannot edit (no permission or not owner)
+     * - 'editing': User can edit
+     * - 'translating': User is editing a translation
+     */
+    editMode: Readonly<Ref<EditMode>>;
+    /**
+     * The raw mutated entity data from the adapter.
+     *
+     * Contains adapter-specific entity data (e.g., Drupal entity fields).
+     */
+    mutatedEntity: Readonly<Ref<any>>;
+    /**
+     * Whether the current user can edit.
+     *
+     * True when state is loaded, user is owner, no load errors, and has edit permission.
+     */
+    canEdit: ComputedRef<boolean>;
+    /**
+     * List of permissions for the current user.
+     *
+     * Includes 'edit', 'view', and other adapter-specific permissions.
+     */
+    permissions: ComputedRef<EditPermission[]>;
+    /**
+     * Whether state has been successfully loaded.
+     *
+     * True when state loaded without errors.
+     */
+    stateAvailable: ComputedRef<boolean>;
+    /**
+     * Whether a loading operation is in progress.
+     *
+     * Automatically adds 'bk-body-loading' class to document.body when true.
+     */
+    isLoading: Readonly<Ref<boolean>>;
+    /**
+     * UUIDs of all blocks loaded from the library.
+     *
+     * Blocks with bundle 'from_library'.
+     */
+    fromLibraryUuids: Readonly<Ref<Readonly<string[]>>>;
+    /**
+     * Get the number of blocks in a field.
+     *
+     * Results are cached for performance.
+     *
+     * @param key - The field key (entityUuid:fieldName)
+     * @returns Number of blocks in the field
+     */
+    getFieldBlockCount: (key: string) => number;
+    /**
+     * Get the total count of blocks with a specific bundle.
+     *
+     * @param bundle - The block bundle
+     * @returns Total number of blocks with this bundle
+     */
+    getBlockBundleCount: (bundle: string) => number;
+    /**
+     * Get a field list item by UUID.
+     *
+     * @param uuid - The block UUID
+     * @returns The field list item, or undefined if not found
+     */
+    getFieldListItem: (uuid: string) => FieldListItem | undefined;
+    /**
+     * Get the mutated field that contains a block.
+     *
+     * @param uuid - The block UUID
+     * @returns The field containing this block, or undefined if not found
+     */
+    getFieldListForBlock: (uuid: string) => MutatedField | undefined;
+    /**
+     * Get a mutated field by entity UUID and field name.
+     *
+     * @param uuid - The entity UUID
+     * @param fieldName - The field name
+     * @returns The mutated field, or undefined if not found
+     */
+    getMutatedField: (uuid: string, fieldName: string) => MutatedField | undefined;
+    /**
+     * Get all block UUIDs, optionally filtered by bundle.
+     *
+     * @param bundle - Optional bundle to filter by
+     * @returns Array of block UUIDs
+     */
+    getAllUuids: (bundle?: string) => string[];
+    /**
+     * Get the nesting level of a block.
+     *
+     * Level 0 = block in host entity field
+     * Level 1 = block in another block's field
+     * Level 2+ = deeper nesting
+     *
+     * @param uuid - The block UUID
+     * @returns The nesting level (0+)
+     */
+    getNestingLevel: (uuid: string) => number;
+    /**
+     * Check if a block is a child (direct or nested) of another block.
+     *
+     * Recursively checks parent relationships.
+     *
+     * @param childUuid - The potential child block UUID
+     * @param parentUuid - The potential parent block UUID
+     * @returns True if childUuid is a descendant of parentUuid
+     */
+    isChildOf: (childUuid: string, parentUuid: string) => boolean;
+    /**
+     * Get the current mapped state.
+     *
+     * Throws error if called before state is available.
+     *
+     * @returns The current mapped state
+     */
+    getMappedState: () => MappedState;
+    /**
+     * Temporarily override the state.
+     *
+     * Used for previewing changes without committing them.
+     *
+     * @param state - The temporary state to use
+     */
+    setOverrideState: (state: MappedState) => void;
+    /**
+     * Clear the temporary override and restore previous state.
+     *
+     * Throws error if no override is active.
+     */
+    clearOverrideState: () => void;
+    /**
+     * Get the field key for a block UUID.
+     *
+     * @param uuid - The block UUID
+     * @returns The field key (entityUuid:fieldName), or null if not found
+     */
+    getFieldKeyForUuid: (uuid: string) => string | null;
+};
+export default function (adapter: BlokkliAdapter<any>, context: ComputedRef<AdapterContext>, $t: TextProvider, providerKey: string, permissions: EditPermission[]): Promise<StateProvider>;

package/dist/runtime/helpers/{stateProvider.js → providers/state.js}

@@ -6,12 +6,12 @@ import {
   provide
 } from "vue";
 import { refreshNuxtData, useState } from "nuxt/app";
-import { INJECT_MUTATED_FIELDS_MAP } from "./symbols.js";
-import onBlokkliEvent from "./composables/onBlokkliEvent.js";
+import { INJECT_MUTATED_FIELDS_MAP } from "../symbols.js";
+import onBlokkliEvent from "../composables/onBlokkliEvent.js";
 import { falsy, getFieldKey } from "#blokkli/helpers";
 import { eventBus, emitMessage } from "#blokkli/helpers/eventBus";
 import { nextTick } from "#imports";
-import { addElementClasses } from "./addElementClasses.js";
+import { addElementClasses } from "../composables/addElementClasses.js";
 import { BUNDLE_FROM_LIBRARY } from "#blokkli/constants";
 const HOST_OPTION_KEY = "HOST";
 function mapPublishOptions(context) {

package/dist/runtime/helpers/providers/storage.d.ts

@@ -0,0 +1,64 @@
+import { type ComputedRef, type WritableComputedRef } from '#imports';
+import type { AdapterContext, BlokkliAdapter } from '#blokkli/adapter';
+export type StorageProvider = {
+    /**
+     * Create a reactive storage value synced to localStorage.
+     *
+     * The value is automatically persisted to localStorage on change.
+     * Can optionally be synced to user settings on the server.
+     *
+     * @param key - Storage key (will be prefixed with 'blokkli:')
+     * @param defaultValue - Default value if no stored value exists
+     * @param persist - Whether to sync to server user settings (default: false)
+     * @returns Reactive writable computed ref synced to storage
+     *
+     * @example
+     * ```ts
+     * const showGrid = storage.use('showGrid', false)
+     * showGrid.value = true // Automatically saved to localStorage
+     * ```
+     */
+    use: <T>(key: string | ComputedRef<string>, defaultValue: T, persist?: boolean) => WritableComputedRef<T>;
+    /**
+     * Create a reactive storage value with entity context prefix.
+     *
+     * Same as `use()` but automatically prefixes the key with entity type and UUID.
+     * Useful for entity-specific settings (e.g., sidebar state per page).
+     *
+     * @param key - Storage key (will be prefixed with context)
+     * @param defaultValue - Default value if no stored value exists
+     * @param persist - Whether to sync to server user settings (default: false)
+     * @returns Reactive writable computed ref synced to storage
+     *
+     * @example
+     * ```ts
+     * // If context is node:abc123, key becomes 'sidebarOpen:node:abc123'
+     * const sidebarOpen = storage.useWithContextPrefix('sidebarOpen', false)
+     * ```
+     */
+    useWithContextPrefix: <T>(key: string, defaultValue: T, persist?: boolean) => WritableComputedRef<T>;
+    /**
+     * Clear all blokkli storage values.
+     *
+     * Removes all localStorage entries starting with 'blokkli:' prefix.
+     * Does not affect server user settings.
+     */
+    clearAll: () => void;
+    /**
+     * Clear a specific storage value.
+     *
+     * Removes the value from localStorage (without prefix).
+     *
+     * @param key - The storage key to clear (without 'blokkli:' prefix)
+     */
+    clear: (key: string) => void;
+};
+/**
+ * Create a reactive variable that is synced to local storage using the
+ * given key. The sync only happens client side and after the component
+ * has been mounted.
+ *
+ * This composable can be used to keep state across page navigations and
+ * even after a refresh.
+ */
+export default function (adapter: BlokkliAdapter<any>, context: ComputedRef<AdapterContext>): Promise<StorageProvider>;

package/dist/runtime/helpers/{textProvider.d.ts → providers/texts.d.ts}

@@ -1,4 +1,4 @@
 import { type ComputedRef } from 'vue';
-import type { AdapterContext } from '../adapter/index.js';
+import type { AdapterContext } from '../../adapter/index.js';
 export type TextProvider = (key: string, defaultValue?: string) => string;
 export default function (context?: ComputedRef<AdapterContext>): TextProvider;