Available Plugins

Vue-based plugins are using Lexical editor instance from <LexicalComposer> component:

<script setup>
import { LexicalComposer } from 'lexical-vue/LexicalComposer'
import { ContentEditable } from 'lexical-vue/LexicalContentEditable'
import { HistoryPlugin } from 'lexical-vue/LexicalHistoryPlugin'
import { OnChangePlugin } from 'lexical-vue/LexicalOnChangePlugin'
import { PlainTextPlugin } from 'lexical-vue/LexicalPlainTextPlugin'

const initialConfig = {
  namespace: 'MyEditor',
  theme,
  onError,
}
</script>

<template>
  <LexicalComposer :initial-config="initialConfig">
    <PlainTextPlugin>
      <template #contentEditable>
        <ContentEditable>
          <template #placeholder>
            <div>Enter some text...</div>
          </template>
        </ContentEditable>
      </template>
    </PlainTextPlugin>
    <HistoryPlugin />
    <OnChangePlugin @change="onChange" />
  </LexicalComposer>
</template>

NOTE

Note: Many plugins might require you to register the one or many Lexical nodes in order for the plugin to work. You can do this by passing a reference to the node to the nodes array in your initial editor configuration.

LexicalPlainTextPlugin

Wrapper for @lexical/plain-text that adds major features for plain text editing, including typing, deletion and copy/pasting.

<PlainTextPlugin>
  <template #contentEditable>
    <LexicalContentEditable>
      <template #placeholder>
        <div>Enter some text...</div>
      </template>
    </LexicalContentEditable>
  </template>
</PlainTextPlugin>

RichTextPlugin

Wrapper for @lexical/rich-text that adds major features for rich text editing, including typing, deletion, copy/pasting, indent/outdent and bold/italic/underline/strikethrough text formatting.

<RichTextPlugin>
  <template #contentEditable>
    <LexicalContentEditable>
      <template #placeholder>
        <div>Enter some text...</div>
      </template>
    </LexicalContentEditable>
  </template>
</RichTextPlugin>

LexicalOnChangePlugin

Plugin that emits change whenever Lexical state is updated. Using ignoreInitialChange (true by default) and ignoreSelectionChange (false by default) can give more granular control over changes that are causing the change event.

<OnChangePlugin @change="onChange" />

LexicalHistoryPlugin

Wrapper for @lexical/history that adds support for history stack management and undo / redo commands.

<HistoryPlugin />

LexicalLinkPlugin

Wrapper for @lexical/link that adds support for links, including toggleLink command support that toggles link for selected text.

<LinkPlugin />

LexicalListPlugin

Wrapper for @lexical/list that adds support for lists (ordered and unordered).

<ListPlugin />

LexicalCheckListPlugin

Wrapper for @lexical/list that adds support for check lists. Note that it requires some css to render check/uncheck marks. See PlaygroundEditorTheme.css for details.

<CheckListPlugin />

LexicalTablePlugin

Wrapper for @lexical/table that adds support for tables.

<TablePlugin />

LexicalTabIndentationPlugin

Plugin that allows tab indentation in combination with @lexical/rich-text.

<TabIndentationPlugin />

LexicalAutoLinkPlugin

Plugin will convert text into links based on passed matchers list. In example below whenever user types url-like string it will automaticaly convert it into a link node.

<script setup>
const URL_MATCHER
  = /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/

const MATCHERS = [
  (text) => {
    const match = URL_MATCHER.exec(text);
    if (match === null) {
      return null;
    }
    const fullMatch = match[0];
    return {
      index: match.index,
      length: fullMatch.length,
      text: fullMatch,
      url: fullMatch.startsWith('http') ? fullMatch : `https://${fullMatch}`,
      // attributes: { rel: 'noreferrer', target: '_blank' }, // Optional link attributes
    };
  },
];
</script>

<template>
  <AutoLinkPlugin :matchers="MATCHERS" />
</template>

LexicalClearEditorPlugin

Adds clearEditor command support to clear editor's content.

<ClearEditorPlugin />

LexicalMarkdownShortcutPlugin

Adds markdown shortcut support: headings, lists, code blocks, quotes, links and inline styles (bold, italic, strikethrough).

<MarkdownShortcutPlugin />

LexicalTableOfContentsPlugin

This plugin allows you to render a table of contents for a page from the headings from the editor. It listens to any deletions or modifications to those headings and updates the table of contents. Additionally, it's able to track any newly added headings and inserts them in the table of contents once they are created. This plugin also supports lazy loading - so you can defer adding the plugin until when the user needs it.

In order to use TableOfContentsPlugin, you need to provide a default slot. This slot gives you access to the up-to-date data of the table of contents through slot props. You can access this data through the table-of-contents prop which comes in the form of an array of arrays [[headingKey, headingTextContent, headingTag], [], [], ...] and the editor prop for the Lexical editor instance.

headingKey: Unique key that identifies the heading. headingTextContent: A string of the exact text of the heading. headingTag: A string that reads either 'h1', 'h2', or 'h3'.

<template>
  <TableOfContentsPlugin v-slot="{ tableOfContents }">
    <MyCustomTableOfContentsPlugin :tableOfContents="tableOfContents" />
  </TableOfContentsPlugin>
</template>

LexicalSelectionAlwaysOnDisplay

By default, browser text selection becomes invisible when clicking away from the editor. This plugin ensures the selection remains visible.

<SelectionAlwaysOnDisplay />