@lexical/plain-text

​

Overview

​

Installation

npm install @lexical/plain-text

​

Registration

​

registerPlainText

function registerPlainText(editor: LexicalEditor): () => void

import { createEditor } from 'lexical';
import { registerPlainText } from '@lexical/plain-text';

const editor = createEditor();
const unregister = registerPlainText(editor);

// Later, cleanup:
unregister();

​

Extension

​

PlainTextExtension

import { createEditor } from 'lexical';
import { PlainTextExtension } from '@lexical/plain-text';

const editor = createEditor({
  extensions: [PlainTextExtension]
});

​

Supported Commands

• DELETE_CHARACTER_COMMAND - Delete character before/after cursor
• DELETE_WORD_COMMAND - Delete word before/after cursor
• DELETE_LINE_COMMAND - Delete line before/after cursor
• CONTROLLED_TEXT_INSERTION_COMMAND - Insert text programmatically
• REMOVE_TEXT_COMMAND - Remove selected text
• INSERT_LINE_BREAK_COMMAND - Insert line break
• INSERT_PARAGRAPH_COMMAND - Insert paragraph (as line break in plain text)
• KEY_ARROW_LEFT_COMMAND - Handle left arrow key
• KEY_ARROW_RIGHT_COMMAND - Handle right arrow key
• KEY_BACKSPACE_COMMAND - Handle backspace key
• KEY_DELETE_COMMAND - Handle delete key
• KEY_ENTER_COMMAND - Handle enter key
• SELECT_ALL_COMMAND - Select all text
• COPY_COMMAND - Copy selection to clipboard
• CUT_COMMAND - Cut selection to clipboard
• PASTE_COMMAND - Paste from clipboard
• DROP_COMMAND - Handle drag and drop
• DRAGSTART_COMMAND - Handle drag start

​

Behavior Differences from Rich Text

1. Enter key inserts a line break instead of creating a new paragraph
2. No block formatting - no headings, quotes, or other block elements
3. Clipboard operations preserve only plain text, stripping formatting
4. Simpler keyboard navigation without decorator or block element support

​

Usage Example

import { createEditor } from 'lexical';
import { PlainTextExtension } from '@lexical/plain-text';

const editor = createEditor({
  extensions: [PlainTextExtension],
  namespace: 'PlainTextEditor',
  onError: (error) => console.error(error)
});

editor.setRootElement(document.getElementById('editor'));

// The editor now behaves as a plain text editor
editor.update(() => {
  const root = $getRoot();
  const paragraph = $createParagraphNode();
  paragraph.append($createTextNode('Plain text content'));
  root.append(paragraph);
});