Event Bus

Overview

The editor provides a typed event bus for communication between components. It’s a singleton instance built on the browser’s native CustomEvent API with events prefixed as @vuemaildev/editor:.

import { editorEventBus } from '@vuemaildev/editor/core';

Dispatching events

Fire an event with a payload:

editorEventBus.dispatch('bubble-menu:add-link', undefined);

Listening to events

Subscribe to events and clean up when done:

<script setup lang="ts">
import { editorEventBus } from '@vuemaildev/editor/core';
import { onBeforeUnmount, onMounted } from 'vue';

let subscription: { unsubscribe: () => void } | undefined;

onMounted(() => {
  subscription = editorEventBus.on('bubble-menu:add-link', () => {
    console.log('Link addition triggered');
  });
});

onBeforeUnmount(() => {
  subscription?.unsubscribe();
});
</script>

The on method returns an object with an unsubscribe function. Always unsubscribe when the component unmounts to avoid memory leaks. The useEditorEvent composable does both for you, listening while the component is mounted:

import { useEditorEvent } from '@vuemaildev/editor/core';

useEditorEvent('bubble-menu:add-link', () => {
  console.log('Link addition triggered');
});

Built-in events

Event	Payload	Description
`bubble-menu:add-link`	`undefined`	Triggered when the “add link” action is initiated from the bubble menu

Adding custom events

Use TypeScript module augmentation to register custom events with full type safety:

declare module '@vuemaildev/editor/core' {
  interface EditorEventMap {
    'my-feature:custom-event': { data: string };
    'my-feature:another-event': { count: number };
  }
}

Then dispatch and listen with full type checking:

// TypeScript knows the payload type
editorEventBus.dispatch('my-feature:custom-event', { data: 'hello' });

editorEventBus.on('my-feature:custom-event', (payload) => {
  // payload is typed as { data: string }
  console.log(payload.data);
});

Event targets

By default, events are dispatched on window. You can scope events to a specific DOM element using the target option:

// Dispatch on a specific element
const container = document.getElementById('my-editor');
editorEventBus.dispatch('bubble-menu:add-link', undefined, {
  target: container,
});

// Listen on a specific element
editorEventBus.on('bubble-menu:add-link', handler, {
  target: container,
});

This is useful when you have multiple editor instances on the same page and want events to stay scoped to their respective editors.

Overview

Features

Advanced

API Reference

Overview

Dispatching events

Listening to events

Built-in events

Adding custom events

Event targets

​Overview

​Dispatching events

​Listening to events

​Built-in events

​Adding custom events

​Event targets

Overview

Dispatching events

Listening to events

Built-in events

Adding custom events

Event targets