# @lexical/dragon

> This package contains compatibility with Dragon NaturallySpeaking accessibility tools.

Latest version **0.51.0** (published 2026-09-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install @lexical/dragon
pnpm add @lexical/dragon
yarn add @lexical/dragon
bun add @lexical/dragon
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; popular repo.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.51.0 |
| Published | 2026-09-17 |
| First published | 2022-04-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 29.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 23876 |
| Maintainers | fantactuka, zurfyx, acywatson, ipavlov001, trueadm, etrepum |
| Keywords | lexical, editor, rich-text, dragon, accessibility |

## Links

- npm: https://www.npmjs.com/package/@lexical/dragon
- Repository: https://github.com/facebook/lexical
- npm.io page: https://npm.io/package/@lexical/dragon

## Dependencies (2)

- [lexical](https://npm.io/package/lexical.md) 0.51.0
- [@lexical/extension](https://npm.io/package/@lexical/extension.md) 0.51.0

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 0.51.0 (latest) — 2026-09-17
- 0.51.1-nightly.20260925.0 (nightly) — 2026-09-25
- 0.45.1-dev.0 (dev) — 2026-05-30
- 0.6.1-next.0 (next) — 2022-11-04
- 0.51.1-nightly.20260924.0 — 2026-09-24
- 0.51.1-nightly.20260923.0 — 2026-09-23
- 0.51.1-nightly.20260922.0 — 2026-09-22
- 0.51.1-nightly.20260921.0 — 2026-09-21
- 0.51.1-nightly.20260918.0 — 2026-09-18
- 0.50.1-nightly.20260917.0 — 2026-09-17
- 0.50.1-nightly.20260916.0 — 2026-09-16
- 0.50.1-nightly.20260915.0 — 2026-09-15
- 0.50.1-nightly.20260914.0 — 2026-09-14
- 0.50.1-nightly.20260911.0 — 2026-09-11
- 0.50.1-nightly.20260910.0 — 2026-09-10
- … 674 more at https://npm.io/package/@lexical/dragon/versions

## README

# `@lexical/dragon`

[![See API Documentation](https://lexical.dev/img/see-api-documentation.svg)](https://lexical.dev/docs/api/modules/lexical_dragon)

This package adds compatibility with Dragon NaturallySpeaking, a speech
recognition tool whose web extension drives editable fields through window
messages. The handler applies those edits through Lexical APIs and stops the
messages from reaching the extension's own handler, which would otherwise
edit the DOM directly behind Lexical's back.

Editors register automatically through `DragonExtension` (a dependency of
`@lexical/rich-text` and `@lexical/plain-text` extensions) or by calling
`registerDragonSupport(editor)`.

## Registering early

Browsers invoke a window's message listeners in registration order, and the
Dragon extension's content script registers its listener at `document_end`
of the initial page load. Editors that mount later (after a navigation in a
single page app, in a dialog, in any lazily rendered view) register their
handler after the extension's, too late to block it, and edits end up
applied twice.

To win that race, call `installDragonSupport()` synchronously from every
entrypoint that may render an editor lazily, so the shared listener is
registered before the extension's:

```js
import {installDragonSupport} from '@lexical/dragon';

installDragonSupport();
```

It returns a teardown function; the listener is removed once every teardown
(including the ones from `registerDragonSupport`) has been called.

For editors mounted inside iframes, pass the iframe's window so the
listener is installed against the right one. State is kept per window,
so multiple frames can coexist:

```js
installDragonSupport(iframe.contentWindow);
```

---
_Source: https://npm.io/package/@lexical/dragon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._