@blokkli/editor 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/modules/drupal/{adapter/index.mjs → runtime/adapter/index.js}

@@ -1,12 +1,81 @@
-import { defineBlokkliEditAdapter } from '#blokkli/adapter';
-import { falsy } from '#blokkli/helpers';
-import { availableFeaturesAtBuild } from '#blokkli-build/features';
-import { operationSources } from '#nuxt-graphql-middleware/sources';
-import { computed, useGraphqlQuery, useRoute, useRouter, useGraphqlMutation } from '#imports';
-import { ParagraphsBlokkliRemoteVideoProvider } from '#graphql-operations';
-
-const index = defineBlokkliEditAdapter(
+import { defineBlokkliEditAdapter } from "#blokkli/adapter";
+import { falsy } from "#blokkli/helpers";
+import { availableFeaturesAtBuild } from "#blokkli-build/features";
+import { operationSources } from "#nuxt-graphql-middleware/sources";
+import {
+  useGraphqlQuery,
+  useGraphqlMutation,
+  computed,
+  useRoute,
+  useRouter
+} from "#imports";
+import { ParagraphsBlokkliRemoteVideoProvider } from "#graphql-operations";
+function mapPublishOptions(publishOptions) {
+  return {
+    canPublish: !!publishOptions.canPublish,
+    isRevisionable: !!publishOptions.isRevisionable,
+    hasRevisionLogMessage: !!publishOptions.hasRevisionLogMessage,
+    lastChanged: publishOptions.lastChanged ?? null,
+    canSchedule: !!publishOptions.canSchedule,
+    publishOn: publishOptions.publishOn ?? null,
+    revisionLogMessage: publishOptions.revisionLogMessage ?? null
+  };
+}
+function mapPluginConfigInputs(inputs) {
+  return inputs.map((input) => {
+    if (input.__typename === "ParagraphsBlokkliConfigInputText") {
+      return {
+        type: "text",
+        name: input.name,
+        label: input.label,
+        description: input.description,
+        required: input.required,
+        defaultValue: input.defaultValueText,
+        minLength: input.minLength,
+        maxLength: input.maxLength,
+        placeholder: input.placeholder,
+        pattern: input.pattern,
+        multiline: input.multiline,
+        rows: input.rows
+      };
+    } else if (input.__typename === "ParagraphsBlokkliConfigInputCheckbox") {
+      return {
+        type: "checkbox",
+        name: input.name,
+        label: input.label,
+        description: input.description,
+        required: input.required,
+        defaultValue: input.defaultValueCheckbox ?? false,
+        checkboxLabel: input.checkboxLabel
+      };
+    } else if (input.__typename === "ParagraphsBlokkliConfigInputOptions") {
+      return {
+        type: "options",
+        name: input.name,
+        label: input.label,
+        description: input.description,
+        required: input.required,
+        defaultValue: input.defaultValueOptions ?? "",
+        variant: input.variant,
+        options: input.options
+      };
+    } else if (input.__typename === "ParagraphsBlokkliConfigInputSeed") {
+      return {
+        type: "seed",
+        name: input.name,
+        label: input.label,
+        description: input.description,
+        required: input.required
+      };
+    }
+    return null;
+  }).filter(falsy);
+}
+export default defineBlokkliEditAdapter(
   async (providedContext) => {
+    if (import.meta.dev) {
+      console.log("initialise Drupal bl\xF6kkli adapter");
+    }
     const availableFeatureIds = new Set(availableFeaturesAtBuild);
     const availableGraphqlOperations = new Set(Object.keys(operationSources));
     function hasQuery(name) {
@@ -31,7 +100,7 @@ const index = defineBlokkliEditAdapter(
         clipboard: v.data.clipboards || [],
         availableFeatures: v.data.features,
         allTypes: (v.data.allTypes.items || []).filter(
-          (v2) => v2 && "icon" in v2
+          (v2) => v2 && "id" in v2
         ),
         fieldConfig: v.data.fieldConfig || [],
         editableFieldConfig: v.data.editableFieldConfig || [],
@@ -47,6 +116,14 @@ const index = defineBlokkliEditAdapter(
         )
       };
     });
+    const entityConfig = await useGraphqlQuery("pbEntityConfig", {
+      entityType: providedContext.value.entityType,
+      entityUuid: providedContext.value.entityUuid
+    }).then((v) => {
+      return {
+        linkPath: v.data.config?.linkPath ?? ""
+      };
+    });
     const loadState = async () => {
       const state = await useGraphqlQuery("pbEditState", {
         ...ctx.value
@@ -70,6 +147,10 @@ const index = defineBlokkliEditAdapter(
       const fields = state?.mutatedState?.fields || [];
       const violations = state.mutatedState?.violations || [];
       const entity = state.entity;
+      if (!state.publishOptions) {
+        throw new Error("Missing publish options.");
+      }
+      const publishOptions = mapPublishOptions(state.publishOptions);
       const mutatedOptions = state.mutatedState?.mutatedOptions || {};
       Object.keys(mutatedOptions).forEach((uuid) => {
         mutatedOptions[uuid] = mutatedOptions[uuid]?.paragraphs_blokkli_data || {};
@@ -96,6 +177,7 @@ const index = defineBlokkliEditAdapter(
           return null;
         }).filter(falsy)
       };
+      const mutatedHostOptions = state.mutatedState?.hostOptions || {};
       return {
         currentIndex,
         mutations,
@@ -104,8 +186,11 @@ const index = defineBlokkliEditAdapter(
         mutatedState: {
           fields,
           violations,
-          mutatedOptions
+          mutatedOptions,
+          // PHP and its arrays...
+          mutatedHostOptions: Array.isArray(mutatedHostOptions) ? {} : mutatedHostOptions
         },
+        publishOptions,
         entity,
         mutatedEntity: state.mutatedEntity,
         translationState
@@ -121,7 +206,7 @@ const index = defineBlokkliEditAdapter(
     }).then(mapMutation);
     const moveBlock = (e) => useGraphqlMutation("pbMoveParagraph", {
       ...ctx.value,
-      uuid: e.item.uuid,
+      uuid: e.item.block.uuid,
       hostType: e.host.type,
       hostUuid: e.host.uuid,
       hostFieldName: e.host.fieldName,
@@ -228,6 +313,9 @@ const index = defineBlokkliEditAdapter(
     const getLastChanged = () => $fetch(
       `/paragraphs_blokkli/${ctx.value.entityType}/${ctx.value.entityUuid}/last_changed`
     ).then((v) => v.changed);
+    const buildAnchorLink = (id, _uuid) => {
+      return `${entityConfig.linkPath}#${id}`;
+    };
     const adapter = {
       addNewBlock,
       buildEditableFrameUrl,
@@ -243,7 +331,8 @@ const index = defineBlokkliEditAdapter(
       loadStateAtIndex,
       mapState,
       moveBlock,
-      moveMultipleBlocks
+      moveMultipleBlocks,
+      buildAnchorLink
     };
     if (hasQuery("pbPublishOptions")) {
       adapter.getPublishOptions = () => useGraphqlQuery("pbPublishOptions", ctx.value).then((v) => {
@@ -251,7 +340,7 @@ const index = defineBlokkliEditAdapter(
         if (!options) {
           throw new Error("Failed to load publish options.");
         }
-        return options;
+        return mapPublishOptions(options);
       });
     }
     if (hasQuery("pbGetImportSourceEntities")) {
@@ -281,6 +370,12 @@ const index = defineBlokkliEditAdapter(
     if (hasMutation("pbTakeOwnership")) {
       adapter.takeOwnership = () => useGraphqlMutation("pbTakeOwnership", ctx.value).then(mapMutation);
     }
+    if (hasMutation("pbUpdateHostOptions")) {
+      adapter.updateHostOptions = (items) => useGraphqlMutation("pbUpdateHostOptions", {
+        ...ctx.value,
+        items
+      }).then(mapMutation);
+    }
     if (hasMutation("pbSetHistoryIndex")) {
       adapter.setHistoryIndex = (index) => useGraphqlMutation("pbSetHistoryIndex", {
         ...ctx.value,
@@ -299,7 +394,6 @@ const index = defineBlokkliEditAdapter(
         entityType: options.hostEntityType.toUpperCase(),
         entityUuid: options.hostEntityUuid,
         createNewState: !options.closeAfterPublish,
-        // @ts-expect-error Might not exist.
         publishIfUnpublished: options.publishIfUnpublished,
         revisionLogMessage: options.revisionLogMessage
       }).then(mapMutation);
@@ -433,13 +527,13 @@ const index = defineBlokkliEditAdapter(
         ...ctx.value,
         blockUuids,
         body
-      }).then((v) => mapComments(v.data.state?.action || []));
+      }).then((v) => mapComments(v.data.action || []));
     }
     if (hasMutation("pbResolveComment")) {
       adapter.resolveComment = (uuid) => useGraphqlMutation("pbResolveComment", {
         ...ctx.value,
         uuid
-      }).then((v) => mapComments(v.data.state?.action || []));
+      }).then((v) => mapComments(v.data.action || []));
     }
     if (hasQuery("pbLibraryItems")) {
       adapter.getLibraryItems = (data) => {
@@ -482,10 +576,26 @@ const index = defineBlokkliEditAdapter(
           return {
             id: plugin.id,
             label: plugin.label,
+            description: plugin.description,
             bundles: plugin.bundles,
             targetBundles: plugin.targetBundles,
             min: plugin.min,
-            max: plugin.max
+            max: plugin.max,
+            configInputs: mapPluginConfigInputs(plugin.configInputs),
+            preview: plugin.allowPreview
+          };
+        })
+      );
+    }
+    if (hasQuery("pbGetHostTransformPlugins")) {
+      adapter.getHostTransformPlugins = () => useGraphqlQuery("pbGetHostTransformPlugins", ctx.value).then((v) => v.data.paragraphsBlokkliGetHostTransformPlugins || []).then(
+        (plugins) => plugins.map((plugin) => {
+          return {
+            id: plugin.id,
+            label: plugin.label,
+            description: plugin.description,
+            configInputs: mapPluginConfigInputs(plugin.configInputs),
+            preview: plugin.allowPreview
           };
         })
       );
@@ -495,6 +605,22 @@ const index = defineBlokkliEditAdapter(
         ...ctx.value,
         ...e
       }).then(mapMutation);
+      adapter.previewTransformPlugin = (e) => useGraphqlMutation("pbApplyTransformPlugin", {
+        ...ctx.value,
+        ...e,
+        preview: true
+      }).then(mapMutation);
+    }
+    if (hasMutation("pbApplyHostTransformPlugin")) {
+      adapter.applyHostTransformPlugin = (e) => useGraphqlMutation("pbApplyHostTransformPlugin", {
+        ...ctx.value,
+        ...e
+      }).then(mapMutation);
+      adapter.previewHostTransformPlugin = (e) => useGraphqlMutation("pbApplyHostTransformPlugin", {
+        ...ctx.value,
+        ...e,
+        preview: true
+      }).then(mapMutation);
     }
     const buildFormUrl = (parts, langcode) => {
       const prefix = config.urlPrefixes[langcode];
@@ -659,7 +785,7 @@ const index = defineBlokkliEditAdapter(
         }).then(mapMutation);
       };
     }
-    if (availableFeatureIds.has("comments")) {
+    if (availableFeatureIds.has("clipboard")) {
       adapter.clipboardMapBundle = (e) => {
         if (e.type === "video") {
           return config.clipboard.find((v) => {
@@ -755,8 +881,28 @@ const index = defineBlokkliEditAdapter(
         });
       };
     }
+    if (hasMutation("pbUnschedule")) {
+      adapter.unscheduleEditState = (options) => useGraphqlMutation("pbUnschedule", {
+        entityType: options.hostEntityType.toUpperCase(),
+        entityUuid: options.hostEntityUuid
+      }).then(mapMutation);
+    }
+    if (hasMutation("pbSchedule")) {
+      adapter.scheduleEditState = (options) => useGraphqlMutation("pbSchedule", {
+        entityType: options.hostEntityType.toUpperCase(),
+        entityUuid: options.hostEntityUuid,
+        date: options.date,
+        revisionLogMessage: options.revisionLogMessage
+      }).then(mapMutation);
+    }
+    if (hasMutation("pbSetParagraphSchedule")) {
+      adapter.setBlockScheduleDate = (blocks) => useGraphqlMutation("pbSetParagraphSchedule", {
+        entityType: ctx.value.entityType,
+        entityUuid: ctx.value.entityUuid,
+        langcode: ctx.value.langcode,
+        items: blocks
+      }).then(mapMutation);
+    }
     return adapter;
   }
 );
-
-export { index as default };

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

@@ -1,7 +1,8 @@
 import type { ComputedRef } from 'vue';
-import type { CommentItem, ConversionItem, MappedState, ImportItem, LibraryItem, BlockBundleDefinition, EntityTranslation, SearchContentItem, AddClipboardItemEvent, AddNewBlockEvent, AddReusableItemEvent, ImportFromExistingEvent, MakeReusableEvent, MoveMultipleBlocksEvent, MoveBlockEvent, UpdateBlockOptionEvent, AddContentSearchItemEvent, TransformPlugin, EditBlockEvent, PasteExistingBlocksEvent, UpdateFieldValueEvent, AssistantResult, DraggableHostData, DetachReusableBlockEvent, FieldConfig, EditableFieldConfig, DraggableMediaLibraryItem, DroppableFieldConfig, PublishOptions, GetEditStatesItem } from './../types/index.js';
+import type { CommentItem, ConversionItem, MappedState, ImportItem, LibraryItem, BlockBundleDefinition, EntityTranslation, SearchContentItem, AddClipboardItemEvent, AddNewBlockEvent, AddReusableItemEvent, ImportFromExistingEvent, MakeReusableEvent, MoveMultipleBlocksEvent, MoveBlockEvent, UpdateBlockOptionEvent, AddContentSearchItemEvent, TransformPlugin, EditBlockEvent, PasteExistingBlocksEvent, UpdateFieldValueEvent, AssistantResult, DraggableHostData, DetachReusableBlockEvent, FieldConfig, EditableFieldConfig, DraggableMediaLibraryItem, DroppableFieldConfig, PublishOptions, GetEditStatesItem, UpdateHostOptionEvent, HostTransformPlugin, PluginConfigInputItem } from './../types/index.js';
 import type getVideoId from 'get-video-id';
 import type { GetMediaLibraryFunction } from './../components/Edit/Features/MediaLibrary/types.js';
+import type { Analyzer } from '#blokkli/analyzer/types';
 export type { GetMediaLibraryFunction };
 export interface MutationResponseLike<T> {
     success: boolean;
@@ -11,6 +12,11 @@ export interface MutationResponseLike<T> {
 type AdapterApplyTransformPlugin = {
     pluginId: string;
     uuids: string[];
+    config?: PluginConfigInputItem[];
+};
+type AdapterApplyHostTransformPlugin = {
+    pluginId: string;
+    config?: PluginConfigInputItem[];
 };
 export type UpdateEntityFieldValueEvent = {
     fieldName: string;
@@ -155,6 +161,51 @@ export type BlokkliAdapterPublishOptions = {
      */
     revisionLogMessage?: string;
 };
+export type BlokkliAdapterScheduleOptions = {
+    /**
+     * The host entity type.
+     */
+    hostEntityType: string;
+    /**
+     * The host entity UUID.
+     */
+    hostEntityUuid: string;
+    /**
+     * The revision log message.
+     */
+    revisionLogMessage?: string;
+    /**
+     * The date and time when the edit state should be published.
+     */
+    date: string;
+};
+export type BlokkliAdapterSetBlockScheduleOptions = {
+    /**
+     * The UUID of the block.
+     */
+    uuid: string;
+    /**
+     * The schedule type.
+     */
+    type: 'publish' | 'unpublish';
+    /**
+     * The date. If empty, remove the schedule date.
+     */
+    date?: string;
+};
+export type BlokkliAdapterUnscheduleBlockOptions = {
+    uuid: string;
+};
+export type BlokkliAdapterUnscheduleOptions = {
+    /**
+     * The host entity type.
+     */
+    hostEntityType: string;
+    /**
+     * The host entity UUID.
+     */
+    hostEntityUuid: string;
+};
 export interface BlokkliAdapter<T> {
     /**
      * Load the state.
@@ -203,10 +254,38 @@ export interface BlokkliAdapter<T> {
      * Get all possible transform plugins.
      */
     getTransformPlugins?: () => Promise<TransformPlugin[]>;
+    /**
+     * Get all possible host transform plugins.
+     */
+    getHostTransformPlugins?: () => Promise<HostTransformPlugin[]>;
     /**
      * Apply a transform plugin.
      */
     applyTransformPlugin?: (e: AdapterApplyTransformPlugin) => Promise<MutationResponseLike<T>>;
+    /**
+     * Preview the output of a transform plugin.
+     *
+     * The transform plugin is expected to apply its transform without actually
+     * persisting it and not creating any side effects.
+     *
+     * It must produce the same result when called for the "final"
+     * transformation that is added to the edit state.
+     */
+    previewTransformPlugin?: (e: AdapterApplyTransformPlugin) => Promise<MutationResponseLike<T>>;
+    /**
+     * Apply a host transform plugin.
+     */
+    applyHostTransformPlugin?: (e: AdapterApplyHostTransformPlugin) => Promise<MutationResponseLike<T>>;
+    /**
+     * Preview the output of a host transform plugin.
+     *
+     * The transform plugin is expected to apply its transform without actually
+     * persisting it and not creating any side effects.
+     *
+     * It must produce the same result when called for the "final"
+     * transformation that is added to the edit state.
+     */
+    previewHostTransformPlugin?: (e: AdapterApplyHostTransformPlugin) => Promise<MutationResponseLike<T>>;
     /**
      * Add a new block.
      */
@@ -215,6 +294,10 @@ export interface BlokkliAdapter<T> {
      * Update multiple options.
      */
     updateOptions?: (options: UpdateBlockOptionEvent[]) => Promise<MutationResponseLike<T>>;
+    /**
+     * Update multiple host options.
+     */
+    updateHostOptions?: (options: UpdateHostOptionEvent[]) => Promise<MutationResponseLike<T>>;
     /**
      * Determine the block bundle for the given clipboard item.
      */
@@ -270,6 +353,18 @@ export interface BlokkliAdapter<T> {
      * Publish all changes.
      */
     publish?: (options: BlokkliAdapterPublishOptions) => Promise<MutationResponseLike<T | undefined | null>>;
+    /**
+     * Schedule an edit state.
+     */
+    scheduleEditState?: (options: BlokkliAdapterScheduleOptions) => Promise<MutationResponseLike<T | undefined | null>>;
+    /**
+     * Unschedule an already scheduled edit state.
+     */
+    unscheduleEditState?: (options: BlokkliAdapterUnscheduleOptions) => Promise<MutationResponseLike<T | undefined | null>>;
+    /**
+     * Schedule a block.
+     */
+    setBlockScheduleDate?: (blocks: BlokkliAdapterSetBlockScheduleOptions[]) => Promise<MutationResponseLike<T | undefined | null>>;
     /**
      * Set a specific history index.
      */
@@ -400,6 +495,21 @@ export interface BlokkliAdapter<T> {
      * Add a fragment block.
      */
     fragmentsAddBlock?: (e: AdapterFragmentsAddBlock) => Promise<MutationResponseLike<T>> | undefined;
+    /**
+     * Build the link that is copied to the clipboard when clicking on an "anchor link" indicator.
+     */
+    buildAnchorLink?: (id: string, uuid: string) => string;
+    getAnalyzers?: () => Analyzer | Analyzer[] | Promise<Analyzer> | Promise<Analyzer[]>;
+    userSettings?: {
+        /**
+         * Load user settings.
+         */
+        load: () => Promise<string | Record<string, any>>;
+        /**
+         * Persist user settings.
+         */
+        persist: (settings: string) => Promise<undefined>;
+    };
 }
 export type BlokkliAdapterFactory<T> = (ctx: ComputedRef<AdapterContext>) => Promise<BlokkliAdapter<T>> | BlokkliAdapter<T>;
 export type AdapterMethods = keyof BlokkliAdapter<any>;

package/dist/runtime/blokkliPlugins/AddAction/index.vue

@@ -17,7 +17,14 @@
 </template>
 
 <script setup>
-import { computed, useBlokkli, nextTick, ref } from "#imports";
+import {
+  computed,
+  useBlokkli,
+  nextTick,
+  ref,
+  onMounted,
+  onBeforeUnmount
+} from "#imports";
 import { AddListItem } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import defineTourItem from "#blokkli/helpers/composables/defineTourItem";
@@ -33,7 +40,7 @@ const props = defineProps({
 });
 const item = ref(null);
 const emit = defineEmits(["placed"]);
-const { ui, state, features } = useBlokkli();
+const { ui, state, features, plugins } = useBlokkli();
 const addListAvailable = computed(
   () => !!features.mountedFeatures.value.find((v) => v.id === "add-list")
 );
@@ -47,7 +54,7 @@ onBlokkliEvent("add-list:change", () => {
   });
 });
 onBlokkliEvent("action:placed", (e) => {
-  if (e.action.actionType !== props.type) {
+  if (e.id !== props.type) {
     return;
   }
   emit("placed", e);
@@ -63,6 +70,23 @@ defineTourItem(() => {
     element: () => item.value?.getElement()
   };
 });
+function addActionFunction() {
+  return {
+    id: props.type,
+    icon: props.icon,
+    color: props.color,
+    itemBundle: props.itemBundle,
+    title: props.title,
+    description: props.description,
+    enabled: !props.disabled
+  };
+}
+onMounted(() => {
+  plugins.addAddAction(addActionFunction);
+});
+onBeforeUnmount(() => {
+  plugins.removeAddAction(addActionFunction);
+});
 </script>
 
 <script>

package/dist/runtime/blokkliPlugins/BlockIndicator/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <Teleport to="#bk-indicators-left">
+    <div
+      ref="el"
+      class="bk-indicator-item"
+      @click.prevent="$emit('click')"
+      @mouseenter="onMouseEnter"
+      @mouseleave="onMouseLeave"
+    >
+      <slot>
+        <div class="bk-indicator-item-inner">
+          <div v-if="label">{{ label }}</div>
+          <div v-if="icon">
+            <Icon :name="icon" />
+          </div>
+        </div>
+      </slot>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import {
+  useBlokkli,
+  onMounted,
+  useTemplateRef,
+  onBeforeUnmount
+} from "#imports";
+import { Icon } from "#blokkli/components";
+const props = defineProps({
+  id: { type: String, required: true },
+  uuid: { type: String, required: true },
+  label: { type: String, required: false },
+  position: { type: String, required: false },
+  icon: { type: null, required: false }
+});
+defineEmits(["click"]);
+const { indicators } = useBlokkli();
+const el = useTemplateRef("el");
+function onMouseEnter() {
+  indicators.setHovered(props.uuid);
+}
+function onMouseLeave() {
+  indicators.setHovered();
+}
+onMounted(() => {
+  if (el.value) {
+    indicators.addIndicator({
+      id: props.id,
+      uuid: props.uuid,
+      position: props.position ?? "left",
+      element: el.value
+    });
+  }
+});
+onBeforeUnmount(() => {
+  indicators.removeIndicator(props.id, props.uuid);
+});
+</script>
+
+<script>
+export default {
+  name: "PluginBlockIndicator"
+};
+</script>

package/dist/runtime/blokkliPlugins/BlockIndicator/index.vue.d.ts

@@ -0,0 +1,26 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    id: string;
+    uuid: string;
+    label?: string;
+    position?: "left" | "right";
+    icon?: BlokkliIcon;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<{
+    id: string;
+    uuid: string;
+    label?: string;
+    position?: "left" | "right";
+    icon?: BlokkliIcon;
+}> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/blokkliPlugins/ContextMenu/Menu/index.vue

@@ -40,10 +40,16 @@ const innerStyle = computed(() => {
   };
 });
 onBlokkliEvent("keyPressed", (e) => {
+  if (ui.hasDialogOpen.value) {
+    return;
+  }
   if (e.code === "Escape") {
     emit("close");
   }
 });
+onBlokkliEvent("window:clickAway", () => {
+  emit("close");
+});
 watch(selection.uuids, () => emit("close"));
 const onClick = (index) => {
   const item = props.menu[index];

package/dist/runtime/blokkliPlugins/ContextMenu/index.vue

@@ -2,7 +2,7 @@
   <Component :is="tag" @contextmenu.stop.prevent="onContextMenu">
     <slot />
     <Teleport to="body">
-      <Transition name="bk-context-menu">
+      <BlokkliTransition name="context-menu">
         <ContextMenuMenu
           v-if="isVisible"
           :menu="menu"
@@ -10,7 +10,7 @@
           :y="y"
           @close="ui.openContextMenu.value = ''"
         />
-      </Transition>
+      </BlokkliTransition>
     </Teleport>
   </Component>
 </template>
@@ -18,6 +18,7 @@
 <script setup>
 import { ref, computed, useBlokkli } from "#imports";
 import ContextMenuMenu from "./Menu/index.vue";
+import { BlokkliTransition } from "#blokkli/components";
 const props = defineProps({
   id: { type: String, required: true },
   menu: { type: Array, required: true },