> ## Documentation Index
> Fetch the complete documentation index at: https://vuemail.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Event Bus

> Communicate between editor components using typed events.

## 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:`.

```ts theme={null}
import { editorEventBus } from '@vuemaildev/editor/core';
```

## Dispatching events

Fire an event with a payload:

```ts theme={null}
editorEventBus.dispatch('bubble-menu:add-link', undefined);
```

## Listening to events

Subscribe to events and clean up when done:

```vue theme={null}
<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:

```ts theme={null}
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:

```ts theme={null}
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:

```ts theme={null}
// 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:

```ts theme={null}
// 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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.