@blokkli/editor 2.0.0-alpha.16 → 2.0.0-alpha.17

package/dist/runtime/helpers/editableProvider.d.ts

@@ -0,0 +1,14 @@
+import type { EntityContext, Rectangle } from '#blokkli/types';
+import type { UiProvider } from './uiProvider.js';
+type EditableFieldData = EntityContext & {
+    fieldName: string;
+};
+export type EditableProvider = {
+    init: () => void;
+    registerEditableField: (el: HTMLElement, fieldName: string, entity: EntityContext) => void;
+    unregisterEditableField: (el: HTMLElement, fieldName: string, entity: EntityContext) => void;
+    getVisible: () => Rectangle[];
+    getEditableAtPoint: (x: number, y: number) => EditableFieldData | undefined;
+};
+export default function (ui: UiProvider): EditableProvider;
+export {};

package/dist/runtime/helpers/editableProvider.js

@@ -0,0 +1,144 @@
+import { falsy } from "#blokkli/helpers";
+import useDelayedIntersectionObserver from "./composables/useDelayedIntersectionObserver.js";
+import { onBeforeUnmount } from "#imports";
+import onBlokkliEvent from "./composables/onBlokkliEvent.js";
+export default function(ui) {
+  let stateReloadTimeout = null;
+  const editableFieldElementMap = /* @__PURE__ */ new WeakMap();
+  const editableFieldElements = /* @__PURE__ */ new Map();
+  const editableFieldData = /* @__PURE__ */ new Map();
+  const rects = {};
+  const visible = /* @__PURE__ */ new Set();
+  function getVisible() {
+    return [...visible.keys()].map((key) => {
+      return rects[key];
+    }).filter(falsy);
+  }
+  function getEditableKey(fieldName, entity) {
+    return `${entity.type}:${entity.uuid}:${fieldName}`;
+  }
+  function intersectionCallback(entries) {
+    const scale = ui.artboardScale.value;
+    const offset = ui.artboardOffset.value;
+    for (const entry of entries) {
+      if (entry.target instanceof HTMLElement) {
+        const data = editableFieldElementMap.get(entry.target);
+        if (!data) {
+          continue;
+        }
+        const key = getEditableKey(data.fieldName, data);
+        const domRect = entry.target.getBoundingClientRect();
+        rects[key] ||= {
+          width: 0,
+          height: 0,
+          x: 0,
+          y: 0,
+          key
+        };
+        const newRect = ui.getAbsoluteElementRect(domRect, scale, offset);
+        rects[key].width = newRect.width;
+        rects[key].height = newRect.height;
+        rects[key].x = newRect.x;
+        rects[key].y = newRect.y;
+        if (entry.isIntersecting) {
+          visible.add(key);
+        } else {
+          visible.delete(key);
+        }
+      }
+    }
+  }
+  const intersectionObserver = useDelayedIntersectionObserver(
+    intersectionCallback,
+    {
+      rootMargin: "400px 0px 400px 0px"
+    }
+  );
+  function registerEditableField(el, fieldName, entity) {
+    const key = getEditableKey(fieldName, entity);
+    const data = {
+      ...entity,
+      fieldName
+    };
+    editableFieldElementMap.set(el, data);
+    editableFieldData.set(key, data);
+    intersectionObserver.observe(el);
+    editableFieldElements.set(key, el);
+  }
+  function unregisterEditableField(el, fieldName, entity) {
+    const key = getEditableKey(fieldName, entity);
+    intersectionObserver.unobserve(el);
+    editableFieldElementMap.delete(el);
+    editableFieldData.delete(key);
+    delete rects[key];
+    visible.delete(key);
+    editableFieldElements.delete(key);
+  }
+  function init() {
+    intersectionObserver.init();
+  }
+  function getEditableAtPoint(x, y) {
+    const scale = ui.artboardScale.value;
+    const offset = ui.artboardOffset.value;
+    const artboardX = x / scale - offset.x / scale;
+    const artboardY = y / scale - offset.y / scale;
+    for (const key of visible) {
+      const rect = rects[key];
+      if (!rect) continue;
+      if (artboardX >= rect.x && artboardX <= rect.x + rect.width && artboardY >= rect.y && artboardY <= rect.y + rect.height) {
+        return editableFieldData.get(key);
+      }
+    }
+    return void 0;
+  }
+  function updateRects() {
+    const scale = ui.artboardScale.value;
+    const offset = ui.artboardOffset.value;
+    const keysToUpdate = editableFieldElements.size < 150 ? Array.from(editableFieldElements.keys()) : Array.from(visible);
+    for (let i = 0; i < keysToUpdate.length; i++) {
+      const key = keysToUpdate[i];
+      const el = editableFieldElements.get(key);
+      if (!el) continue;
+      const domRect = el.getBoundingClientRect();
+      const newRect = ui.getAbsoluteElementRect(domRect, scale, offset);
+      if (rects[key]) {
+        rects[key].width = newRect.width;
+        rects[key].height = newRect.height;
+        rects[key].x = newRect.x;
+        rects[key].y = newRect.y;
+      } else {
+        rects[key] = {
+          width: newRect.width,
+          height: newRect.height,
+          x: newRect.x,
+          y: newRect.y,
+          key
+        };
+      }
+    }
+  }
+  function handleRefresh() {
+    if (stateReloadTimeout) {
+      window.clearTimeout(stateReloadTimeout);
+    }
+    if (visible.size < 150) {
+      updateRects();
+    }
+    stateReloadTimeout = window.setTimeout(updateRects, 300);
+  }
+  onBlokkliEvent("state:reloaded", handleRefresh);
+  onBlokkliEvent("ui:resized", handleRefresh);
+  onBlokkliEvent("option:finish-change", handleRefresh);
+  onBeforeUnmount(() => {
+    if (stateReloadTimeout) {
+      window.clearTimeout(stateReloadTimeout);
+    }
+  });
+  return {
+    registerEditableField,
+    unregisterEditableField,
+    init,
+    getVisible,
+    getEditableAtPoint
+  };
+}

package/dist/runtime/helpers/stateProvider.d.ts

@@ -1,6 +1,6 @@
 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 } from '#blokkli/types';
+import type { MutatedField, EditEntity, MutatedOptions, TranslationState, MappedState, MutationItem, Validation, MutateWithLoadingStateFunction, EditMode, FieldListItem, PublishOptions, EditPermission } from '#blokkli/types';
 import type { TextProvider } from './textProvider.js';
 export type BlokkliOwner = {
     name: string | undefined;
@@ -27,16 +27,20 @@ export type StateProvider = {
     editMode: Readonly<Ref<EditMode>>;
     mutatedEntity: Readonly<Ref<any>>;
     canEdit: ComputedRef<boolean>;
+    permissions: ComputedRef<EditPermission[]>;
     stateAvailable: ComputedRef<boolean>;
     isLoading: Readonly<Ref<boolean>>;
+    fromLibraryUuids: Readonly<Ref<Readonly<string[]>>>;
     getFieldBlockCount: (key: string) => number;
     getBlockBundleCount: (bundle: string) => number;
     getFieldListItem: (uuid: string) => FieldListItem | undefined;
     getFieldListForBlock: (uuid: string) => MutatedField | undefined;
     getMutatedField: (uuid: string, fieldName: string) => MutatedField | undefined;
     getAllUuids: (bundle?: string) => string[];
+    getNestingLevel: (uuid: string) => number;
+    isChildOf: (childUuid: string, parentUuid: string) => boolean;
     getMappedState: () => MappedState;
     setOverrideState: (state: MappedState) => void;
     clearOverrideState: () => void;
 };
-export default function (adapter: BlokkliAdapter<any>, context: ComputedRef<AdapterContext>, $t: TextProvider, providerKey: string): Promise<StateProvider>;
+export default function (adapter: BlokkliAdapter<any>, context: ComputedRef<AdapterContext>, $t: TextProvider, providerKey: string, permissions: EditPermission[]): Promise<StateProvider>;

package/dist/runtime/helpers/stateProvider.js

@@ -12,6 +12,7 @@ import { falsy, getFieldKey } from "#blokkli/helpers";
 import { eventBus, emitMessage } from "#blokkli/helpers/eventBus";
 import { nextTick } from "#imports";
 import { addElementClasses } from "./addElementClasses.js";
+import { BUNDLE_FROM_LIBRARY } from "#blokkli/constants";
 const HOST_OPTION_KEY = "HOST";
 function mapPublishOptions(context) {
   return {
@@ -24,7 +25,7 @@ function mapPublishOptions(context) {
     revisionLogMessage: context?.publishOptions?.revisionLogMessage ?? null
   };
 }
-export default async function(adapter, context, $t, providerKey) {
+export default async function(adapter, context, $t, providerKey, permissions) {
   let _mappedState = null;
   const overrideHostOptions = useState("options:" + providerKey);
   const stateLoaded = ref(false);
@@ -58,6 +59,8 @@ export default async function(adapter, context, $t, providerKey) {
   const blockBundleCount = ref({});
   const fieldListItemMap = /* @__PURE__ */ new Map();
   let bundleToUuids = {};
+  const fromLibraryUuids = ref([]);
+  const nestingLevelMap = /* @__PURE__ */ new Map();
   function getFieldListItem(uuid) {
     const fieldKey = fieldListItemMap.get(uuid);
     if (!fieldKey) {
@@ -141,8 +144,10 @@ export default async function(adapter, context, $t, providerKey) {
     const visitedFieldKeys = [];
     const newBlockBundleCount = {};
     fieldListItemMap.clear();
+    nestingLevelMap.clear();
     fieldBlockCount = {};
     bundleToUuids = {};
+    const fromLibrary = [];
     for (let i = 0; i < newMutatedFields.length; i++) {
       const field = newMutatedFields[i];
       const key = getFieldKey(field.entityUuid, field.name);
@@ -162,6 +167,16 @@ export default async function(adapter, context, $t, providerKey) {
           bundleToUuids[item.bundle] = [];
         }
         bundleToUuids[item.bundle].push(item.uuid);
+        if (item.bundle === BUNDLE_FROM_LIBRARY) {
+          fromLibrary.push(item.uuid);
+        }
+      }
+    }
+    for (let i = 0; i < newMutatedFields.length; i++) {
+      const field = newMutatedFields[i];
+      for (let j = 0; j < field.list.length; j++) {
+        const item = field.list[j];
+        calculateNestingLevel(item.uuid);
       }
     }
     blockBundleCount.value = newBlockBundleCount;
@@ -172,6 +187,7 @@ export default async function(adapter, context, $t, providerKey) {
         mutatedFieldsMap[key] = void 0;
       }
     }
+    fromLibraryUuids.value = fromLibrary;
     eventBus.emit("updateMutatedFields", { fields: newMutatedFields });
     nextTick(() => {
       refreshKey.value = Date.now().toString();
@@ -205,6 +221,49 @@ export default async function(adapter, context, $t, providerKey) {
     }
     return bundleToUuids[bundle] ?? [];
   }
+  function calculateNestingLevel(uuid) {
+    const cached = nestingLevelMap.get(uuid);
+    if (cached !== void 0) {
+      return cached;
+    }
+    const fieldKey = fieldListItemMap.get(uuid);
+    if (!fieldKey) {
+      nestingLevelMap.set(uuid, 0);
+      return 0;
+    }
+    const field = mutatedFieldsMap[fieldKey];
+    if (!field) {
+      nestingLevelMap.set(uuid, 0);
+      return 0;
+    }
+    const parentEntityUuid = field.entityUuid;
+    const parentFieldKey = fieldListItemMap.get(parentEntityUuid);
+    if (!parentFieldKey) {
+      nestingLevelMap.set(uuid, 0);
+      return 0;
+    }
+    const parentLevel = calculateNestingLevel(parentEntityUuid);
+    const level = parentLevel + 1;
+    nestingLevelMap.set(uuid, level);
+    return level;
+  }
+  function getNestingLevel(uuid) {
+    return nestingLevelMap.get(uuid) ?? 0;
+  }
+  function isChildOf(childUuid, parentUuid) {
+    const fieldKey = fieldListItemMap.get(childUuid);
+    if (!fieldKey) {
+      return false;
+    }
+    const field = mutatedFieldsMap[fieldKey];
+    if (!field) {
+      return false;
+    }
+    if (field.entityUuid === parentUuid) {
+      return true;
+    }
+    return isChildOf(field.entityUuid, parentUuid);
+  }
   addElementClasses(document.body, "bk-body-loading", isLoading);
   const mutateWithLoadingState = async (callback, errorMessage, successMessage) => {
     if (!callback) {
@@ -254,7 +313,7 @@ export default async function(adapter, context, $t, providerKey) {
     }
   }
   const canEdit = computed(
-    () => stateLoaded.value && !!owner.value?.currentUserIsOwner && !stateLoadError.value
+    () => stateLoaded.value && !!owner.value?.currentUserIsOwner && !stateLoadError.value && permissions.includes("edit")
   );
   const isTranslation = computed(
     () => context.value.language !== translation.value.sourceLanguage && translation.value.isTranslatable
@@ -322,7 +381,11 @@ export default async function(adapter, context, $t, providerKey) {
     getMutatedField,
     getFieldListForBlock,
     getAllUuids,
+    getNestingLevel,
+    isChildOf,
     setOverrideState,
-    clearOverrideState
+    clearOverrideState,
+    fromLibraryUuids: readonly(fromLibraryUuids),
+    permissions: computed(() => permissions)
   };
 }

package/dist/runtime/helpers/storageProvider.d.ts

@@ -1,7 +1,8 @@
 import { type ComputedRef, type WritableComputedRef } from '#imports';
-import type { BlokkliAdapter } from '#blokkli/adapter';
+import type { AdapterContext, BlokkliAdapter } from '#blokkli/adapter';
 export type StorageProvider = {
     use: <T>(key: string | ComputedRef<string>, defaultValue: T, persist?: boolean) => WritableComputedRef<T>;
+    useWithContextPrefix: <T>(key: string, defaultValue: T, persist?: boolean) => WritableComputedRef<T>;
     clearAll: () => void;
     clear: (key: string) => void;
 };
@@ -13,4 +14,4 @@ export type StorageProvider = {
  * This composable can be used to keep state across page navigations and
  * even after a refresh.
  */
-export default function (adapter: BlokkliAdapter<any>): Promise<StorageProvider>;
+export default function (adapter: BlokkliAdapter<any>, context: ComputedRef<AdapterContext>): Promise<StorageProvider>;

package/dist/runtime/helpers/storageProvider.js

@@ -15,7 +15,7 @@ const getExisting = (key) => {
   } catch {
   }
 };
-export default async function(adapter) {
+export default async function(adapter, context) {
   const values = ref({});
   const defaults = ref({});
   let timeout = null;
@@ -97,6 +97,10 @@ export default async function(adapter) {
       }
     });
   };
+  const useWithContextPrefix = (key, providedDefaultValue, persist) => {
+    const fullKey = key + ":" + context.value.entityType + ":" + context.value.entityUuid;
+    return use(fullKey, providedDefaultValue, persist);
+  };
   const clearAll = () => {
     values.value = {};
     Object.keys(window.localStorage).forEach((key) => {
@@ -110,5 +114,5 @@ export default async function(adapter) {
     values.value[storageKey] = void 0;
     window.localStorage.removeItem(storageKey);
   };
-  return { use, clearAll, clear };
+  return { use, useWithContextPrefix, clearAll, clear };
 }

package/dist/runtime/helpers/symbols.d.ts

@@ -6,6 +6,7 @@ export declare const INJECT_NESTING_LEVEL: unique symbol;
 export declare const INJECT_IS_PREVIEW: unique symbol;
 export declare const INJECT_IS_IN_REUSABLE: unique symbol;
 export declare const INJECT_REUSABLE_OPTIONS: unique symbol;
+export declare const INJECT_REUSABLE_UUID: unique symbol;
 export declare const INJECT_FIELD_LIST_TYPE: unique symbol;
 export declare const INJECT_FIELD_LIST_BLOCKS: unique symbol;
 export declare const INJECT_FIELD_PROXY_MODE: unique symbol;

package/dist/runtime/helpers/symbols.js

@@ -6,6 +6,7 @@ export const INJECT_NESTING_LEVEL = Symbol("blokkli_nesting_level");
 export const INJECT_IS_PREVIEW = Symbol("blokkli_is_preview");
 export const INJECT_IS_IN_REUSABLE = Symbol("blokkli_is_in_reusable");
 export const INJECT_REUSABLE_OPTIONS = Symbol("blokkli_from_library_options");
+export const INJECT_REUSABLE_UUID = Symbol("blokkli_from_library_uuid");
 export const INJECT_FIELD_LIST_TYPE = Symbol("blokkli_field_list_type");
 export const INJECT_FIELD_LIST_BLOCKS = Symbol("blokkli_field_list_blocks");
 export const INJECT_FIELD_PROXY_MODE = Symbol("blokkli_field_proxy_mode");

package/dist/runtime/helpers/uiProvider.d.ts

@@ -4,6 +4,7 @@ import type { AddListOrientation, Coord, Rectangle, Size } from '#blokkli/types'
 import type { Viewport } from '#blokkli/constants';
 import type { StateProvider } from './stateProvider.js';
 import type { AdapterContext } from '#blokkli/adapter';
+import type { ThemeColorName } from '#blokkli/types/theme';
 export type UiProvider = {
     rootElement: () => HTMLElement;
     artboardElement: () => HTMLElement;
@@ -19,7 +20,11 @@ export type UiProvider = {
     isAnalyzing: Ref<boolean>;
     isProxyMode: Ref<boolean>;
     hasDialogOpen: Ref<boolean>;
-    hasAddTooltipOpen: Ref<boolean>;
+    hasTooltipOpen: ComputedRef<boolean>;
+    openTooltip: Ref<string>;
+    selectionColor: ComputedRef<ThemeColorName | null>;
+    setSelectionColor: (id: string, color: ThemeColorName) => void;
+    removeSelectionColor: (id: string) => void;
     hasTransformOverlayOpen: Ref<boolean>;
     isTransforming: ComputedRef<boolean>;
     setTransform: (label?: string | null | undefined) => void;
@@ -44,5 +49,7 @@ export type UiProvider = {
     formatDate: (date: string | Date, options?: Intl.DateTimeFormatOptions) => string;
     getAbsoluteElementRect: (v: HTMLElement | Rectangle, scale?: number, offset?: Coord) => Rectangle;
     getViewportRelativeRect: (rect: Rectangle, scale?: number, offset?: Coord) => Rectangle;
+    setBannerHeight: (id: string, height: number) => void;
+    removeBanner: (id: string) => void;
 };
 export default function (storage: StorageProvider, state: StateProvider, context: ComputedRef<AdapterContext>): UiProvider;

package/dist/runtime/helpers/uiProvider.js

@@ -29,12 +29,19 @@ export default function(storage, state, context) {
   const isProxyMode = ref(false);
   const menuIsOpen = ref(false);
   const hasDialogOpen = ref(false);
-  const hasAddTooltipOpen = ref(false);
+  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 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(
@@ -175,6 +182,11 @@ export default function(storage, state, context) {
         height -= 70;
       }
     }
+    const bannerHeights = Object.values(banners.value).filter(Boolean);
+    bannerHeights.forEach((bannerHeight) => {
+      height -= bannerHeight;
+    });
+    height -= bannerHeights.length * 10;
     return height;
   });
   const blockingPaddingX = computed(() => 15);
@@ -279,6 +291,20 @@ export default function(storage, state, context) {
     resizeObserver.unobserve(artboard);
     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;
+  });
   return {
     menu: {
       isOpen: menuIsOpen,
@@ -318,6 +344,12 @@ export default function(storage, state, context) {
     formatDate,
     hasDialogOpen,
     hasTransformOverlayOpen,
-    hasAddTooltipOpen
+    hasTooltipOpen,
+    openTooltip,
+    selectionColor,
+    setSelectionColor,
+    removeSelectionColor,
+    setBannerHeight,
+    removeBanner
   };
 }

package/dist/runtime/plugins/blokkliEditable.js

@@ -1,17 +1,88 @@
+import {
+  INJECT_APP,
+  INJECT_ENTITY_CONTEXT,
+  INJECT_IS_IN_REUSABLE
+} from "#blokkli/helpers/symbols";
 import { defineNuxtPlugin } from "#imports";
+function getInjection(vnode, symbol) {
+  return vnode.ctx?.provides?.[symbol];
+}
+function getBlokkliApp(vnode) {
+  return getInjection(vnode, INJECT_APP);
+}
+function getEntityContext(vnode) {
+  return getInjection(vnode, INJECT_ENTITY_CONTEXT);
+}
+function isInReusable(vnode) {
+  return !!getInjection(vnode, INJECT_IS_IN_REUSABLE);
+}
+function getFieldName(binding) {
+  const fieldName = binding.value?.name || binding.arg;
+  if (fieldName && typeof fieldName === "string") {
+    return fieldName;
+  }
+}
+function isEditing() {
+  if (import.meta.client) {
+    return window.location.search.includes("blokkliEditing");
+  }
+  return false;
+}
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.directive("blokkli-editable", {
-    created(el, binding) {
+    created(el, binding, vnode) {
       if (import.meta.client) {
-        if (!window.location.search.includes("blokkliEditing")) {
+        if (!isEditing()) {
           return;
         }
-        const fieldName = binding.value?.name || binding.arg;
+        if (isInReusable(vnode)) {
+          return;
+        }
+        const fieldName = getFieldName(binding);
         if (!fieldName) {
           return;
         }
         el.dataset.blokkliEditableField = fieldName;
       }
+    },
+    mounted(el, binding, vnode) {
+      if (!isEditing()) {
+        return;
+      }
+      if (isInReusable(vnode)) {
+        return;
+      }
+      const app = getBlokkliApp(vnode);
+      if (!app) {
+        return;
+      }
+      const entity = getEntityContext(vnode);
+      if (!entity) {
+        return;
+      }
+      const fieldName = getFieldName(binding);
+      if (!fieldName) {
+        return;
+      }
+      app.editable.registerEditableField(el, fieldName, entity);
+    },
+    beforeUnmount(el, binding, vnode) {
+      if (!isEditing()) {
+        return;
+      }
+      const app = getBlokkliApp(vnode);
+      if (!app) {
+        return;
+      }
+      const entity = getEntityContext(vnode);
+      if (!entity) {
+        return;
+      }
+      const fieldName = getFieldName(binding);
+      if (!fieldName) {
+        return;
+      }
+      app.editable.unregisterEditableField(el, fieldName, entity);
     }
   });
   nuxtApp.vueApp.directive("blokkli-droppable", {

package/dist/runtime/types/index.d.ts

@@ -8,6 +8,7 @@ import type { KeyboardProvider } from '../helpers/keyboardProvider.js';
 import type { UiProvider } from '../helpers/uiProvider.js';
 import type { AnimationProvider } from '../helpers/animationProvider.js';
 import type { StateProvider } from '../helpers/stateProvider.js';
+import type { EditableProvider } from '../helpers/editableProvider.js';
 import type { TextProvider } from '../helpers/textProvider.js';
 import type { PluginProvider } from '../helpers/pluginProvider.js';
 import type { eventBus } from './../helpers/eventBus.js';
@@ -381,6 +382,7 @@ export type BlokkliProviderEntityContext = {
     bundle: string;
     language?: string;
 };
+export type EditPermission = 'view' | 'edit' | 'review';
 export type EditEntity = {
     label?: string;
     status?: boolean;
@@ -569,7 +571,7 @@ export interface BlockBundleDefinition {
     allowReusable?: boolean;
     isTranslatable?: boolean;
 }
-export type EditMode = 'readonly' | 'editing' | 'translating';
+export type EditMode = 'readonly' | 'editing' | 'translating' | 'review';
 export type MutatedOptions = {
     [uuid: string]: {
         [key: string]: string;
@@ -848,11 +850,15 @@ export type Coord = {
 };
 export type Rectangle = Size & Coord;
 export type CanvasDrawEvent = {
+    gl: WebGLRenderingContext;
     mouseX: number;
     mouseY: number;
+    mouseArtboard: Coord;
     artboardOffset: Coord;
     artboardScale: number;
+    artboardSize: Size;
     time: number;
+    selectedUuids: string[];
 };
 export type MakeReusableEvent = {
     label: string;
@@ -1043,10 +1049,15 @@ export type EventbusEvents = {
     'item:doubleClick': DraggableExistingBlock;
     scrollIntoView: ScrollIntoViewEvent;
     'animationFrame:before': AnimationFrameBeforeEvent;
+    'animationFrame:after': undefined;
     'canvas:draw': CanvasDrawEvent;
     'state:reloaded': undefined;
     addContentSearchItem: AddContentSearchItemEvent;
     'option:update': UpdateBlockOptionEvent;
+    /**
+     * Emitted after finishing changing options.
+     */
+    'option:finish-change': undefined;
     'plugin:mount': PluginMountEvent;
     'plugin:unmount': PluginUnmountEvent;
     'editable:focus': EditableFieldFocusEvent;
@@ -1129,6 +1140,7 @@ export interface BlokkliApp {
     debug: DebugProvider;
     indicators: IndicatorsProvider;
     plugins: PluginProvider;
+    editable: EditableProvider;
 }
 export type PasteExistingBlocksEvent = {
     uuids: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blokkli/editor",
-  "version": "2.0.0-alpha.16",
+  "version": "2.0.0-alpha.17",
   "description": "Interactive page building experience for Nuxt",
   "repository": "blokkli/editor",
   "type": "module",