Lexical

https://lexical.dev/docs/
Admin
Lexical is an extensible, performant, and accessible JavaScript web text-editor framework designed...
Tokens:265,268
Snippets:3,318
Trust Score:9.2
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install Playwright browsers

Source: https://lexical.dev/docs/testing

Required setup step to download the necessary browser binaries for E2E testing.

```bash
pnpm exec playwright install
```

--------------------------------

### Run development and testing commands

Source: https://lexical.dev/docs/api

Common pnpm commands for installing dependencies, starting the playground server, and running tests or CI checks.

```bash
# Install dependencies
pnpm install

# Start playground dev server
pnpm run start

# Run tests
pnpm run test-unit
pnpm run test-e2e-chromium

# Lint and type check
pnpm run ci-check
```

--------------------------------

### Initialize editor with DOM import extensions

Source: https://lexical.dev/docs/serialization/dom-import

This example demonstrates the minimal setup required to build an editor using extensions and import HTML content into the root node.

```typescript
import {  

  buildEditorFromExtensions,  

  getExtensionDependencyFromEditor,  

} from '@lexical/extension';  

import {  

  CoreImportExtension,  

  DOMImportExtension,  

} from '@lexical/html';  

import {$getRoot, defineExtension} from 'lexical';  

  

const editor = buildEditorFromExtensions(  

  defineExtension({  

    name: 'app',  

    dependencies: [CoreImportExtension],  

  }),  

);  

  

const dep = getExtensionDependencyFromEditor(editor, DOMImportExtension);  

editor.update(() => {  

  const dom = new DOMParser().parseFromString(  

    '<p>Hello <strong>world</strong></p>',  

    'text/html',  

  );  

  const nodes = dep.output.$generateNodesFromDOM(dom);  

  $getRoot().clear().splice(0, 0, nodes);  

});
```

--------------------------------

### Install @lexical/headless

Source: https://lexical.dev/docs/packages/lexical-headless

Install the @lexical/headless package using npm.

```bash
npm install --save @lexical/headless  

```

--------------------------------

### Perform full first-time setup

Source: https://lexical.dev/docs/maintainers-guide

Combine both --bootstrap and --setup-trust flags for the initial setup of a new monorepo.

```bash
pnpm run setup-trusted-publishing --bootstrap --setup-trust
```

--------------------------------

### Install Lexical and React Package

Source: https://lexical.dev/docs/getting-started/react

Install the necessary Lexical packages for React integration. This command installs the core lexical library and the React-specific wrapper.

```bash
npm install --save lexical @lexical/react  
```

--------------------------------

### Implement a basic Lexical React editor

Source: https://lexical.dev/docs/api

A minimal example showing the LexicalComposer setup with PlainTextPlugin and HistoryPlugin.

```javascript
import { $getRoot, $getSelection } from 'lexical';
import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';

const initialConfig = {
  namespace: 'MyEditor',
  onError: (error) => console.error(error),
};

function Editor() {
  return (
    <LexicalComposer initialConfig={initialConfig}>
      <PlainTextPlugin
        contentEditable={<ContentEditable />}
        ErrorBoundary={LexicalErrorBoundary}
      />
      <HistoryPlugin />
    </LexicalComposer>
  );
}
```

--------------------------------

### Install Lexical Table and React Packages

Source: https://lexical.dev/docs/packages/lexical-table

Install the necessary packages for Lexical tables and React integration.

```bash
npm install @lexical/table @lexical/react  

```

--------------------------------

### Install required dependencies

Source: https://lexical.dev/docs/collaboration/react

Install the minimal set of packages required for Lexical collaboration.

```bash
$ npm i -S @lexical/react @lexical/yjs lexical react react-dom y-websocket yjs
```

--------------------------------

### Lexical React App with Plugins

Source: https://lexical.dev/docs/extensions/migration

This example shows a typical setup for a Lexical React application using individual plugins like ToolbarPlugin, HistoryPlugin, and AutoFocusPlugin. It imports each plugin separately and configures them within the LexicalComposer.

```jsx
import {ContentEditable} from '@lexical/react/LexicalContentEditable';

import {AutoFocusPlugin} from '@lexical/react/LexicalAutoFocusPlugin';

import {LexicalComposer} from '@lexical/react/LexicalComposer';
import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';

import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';

import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';


import ExampleTheme from './ExampleTheme';
import ToolbarPlugin from './plugins/ToolbarPlugin';
import TreeViewPlugin from './plugins/TreeViewPlugin';


const placeholderText = 'Enter some rich text...';
const contentEditable = (
  <ContentEditable
    className="editor-input"
    aria-placeholder={placeholderText}
    placeholder={<div className="editor-placeholder">{placeholderText}</div>}
  />
);

const editorConfig = {
  namespace: 'React.js Demo',
  nodes: [],

  // Handling of errors during update
  onError(error: Error) {
    throw error;
  },

  // The editor theme
  theme: ExampleTheme,

};

export default function App() {
  return (
    <LexicalComposer initialConfig={editorConfig}>
      <div className="editor-container">
        <ToolbarPlugin />
        <div className="editor-inner">
          <RichTextPlugin
            contentEditable={contentEditable}
            ErrorBoundary={LexicalErrorBoundary}
          />
          <HistoryPlugin />
          <AutoFocusPlugin />
          <TreeViewPlugin />
        </div>
      </div>
    </LexicalComposer>
  );
}

```

--------------------------------

### Install @lexical/eslint-plugin

Source: https://lexical.dev/docs/packages/lexical-eslint-plugin

Install the ESLint plugin as a development dependency using npm.

```bash
npm install @lexical/eslint-plugin --save-dev
```

--------------------------------

### Install Lexical React dependencies

Source: https://lexical.dev/docs/api

Use npm to install the core lexical package and the official React bindings.

```bash
npm install lexical @lexical/react
```

--------------------------------

### Full Document Traversal with CaretRange

Source: https://lexical.dev/docs/concepts/traversals

Demonstrates a full depth-first traversal of a Lexical document tree using CaretRange, starting from the root and covering all child nodes. This example shows how to define the start and end points of the traversal.

```javascript
const carets = [...$getCaretRange(
  // Start with the arrow pointing towards the first child of root
  $getChildCaret($getRoot(), 'next'),
  // End when the arrow points away from root
  $getSiblingCaret($getRoot(), 'next'),
)];

expect(carets).toEqual([
  $getChildCaret(paragraphA, 'next'),   // enter Paragraph A
  $getSiblingCaret(textA1, 'next'),
  $getChildCaret(linkA2, 'next'),       // enter Link A2
  $getSiblingCaret(textA3, 'next'),
  $getSiblingCaret(linkA2, 'next'),     // leave Link A2
  $getSiblingCaret(textA4, 'next'),
  $getSiblingCaret(paragraphA, 'next'), // leave Paragraph A
  $getChildCaret(paragraphB, 'next'),   // enter Paragraph B
  $getSiblingCaret(textB1, 'next'),
  $getSiblingCaret(paragraphB, 'next'), // leave Paragraph B
  $getChildCaret(paragraphC, 'next'),   // enter Paragraph C
  $getSiblingCaret(paragraphC, 'next'), // leave Paragraph C
]);
```

--------------------------------

### getStart()

Source: https://lexical.dev/docs/api/modules/lexical_list

Retrieves the starting index of the list node.

```APIDOC
## getStart()

### Description
Returns the starting index of the list node.

### Returns
- **number** - The start index.
```

--------------------------------

### Example importJSON for HeadingNode

Source: https://lexical.dev/docs/serialization

This example demonstrates implementing `importJSON` for a `HeadingNode` using `$createHeadingNode` and `updateFromJSON` for simplified deserialization.

```typescript
static importJSON(serializedNode: SerializedHeadingNode): HeadingNode {
  return $createHeadingNode().updateFromJSON(serializedNode);
}

updateFromJSON(
  serializedNode: LexicalUpdateJSON<SerializedHeadingNode>,
): this {
  return super.updateFromJSON(serializedNode).setTag(serializedNode.tag);
}
```

--------------------------------

### Install Dragon support for iframes

Source: https://lexical.dev/docs/packages/lexical-dragon

Pass the iframe's window object to install the listener within the specific iframe context.

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

--------------------------------

### Lexical Composer with Initial Configuration

Source: https://lexical.dev/docs/react/create_plugin

Example of initializing LexicalComposer with a specific configuration, including custom nodes.

```jsx
<LexicalComposer initialConfig={initialConfig}>
  <MyLexicalPlugin>
</LexicalComposer>
```

--------------------------------

### setStart()

Source: https://lexical.dev/docs/api/modules/lexical_list

Sets the starting index for the list node.

```APIDOC
## setStart(start)

### Description
Sets the starting index of the list node.

### Parameters
- **start** (number) - Required - The start index.

### Returns
- **this** - The current node instance.
```

--------------------------------

### Run E2E tests

Source: https://lexical.dev/docs/testing

Starts the playground application and executes the E2E test suite for specific browsers.

```bash
pnpm start &

pnpm test-e2e-chromium   # or -firefox, -webkit
```

--------------------------------

### Dispatch Command from Toolbar

Source: https://lexical.dev/docs/concepts/commands

Example of triggering a list insertion command from a UI component.

```typescript
const formatBulletList = () => {  

  editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND);  

};
```

--------------------------------

### Dispatch Examples from LexicalEvents

Source: https://lexical.dev/docs/concepts/commands

Common patterns for dispatching commands using events or formatting strings.

```typescript
editor.dispatchCommand(KEY_ARROW_LEFT_COMMAND, event);  

// ...  

editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
```

--------------------------------

### Create source directory and index file

Source: https://lexical.dev/docs/maintainers-guide

Set up the source directory and create the initial entry point file.

```bash
mkdir -p packages/lexical-eslint-plugin/src
code packages/lexical-eslint-plugin/src/index.ts
```

--------------------------------

### Get Sibling Carets from a Specific Node

Source: https://lexical.dev/docs/concepts/traversals

Shows how to get sibling carets starting from a specific node. The iteration begins at the node where the 'arrow' head points.

```javascript
const carets = [...$getSiblingCaret(paragraphB, 'next')];
expect(carets).toEqual([
  $getSiblingCaret(paragraphC, 'next'),
]);

const prevCarets = [...$getSiblingCaret(paragraphB, 'previous')];
expect(prevCarets).toEqual([
  $getSiblingCaret(paragraphA, 'previous'),
]);
```

--------------------------------

### Get Child Carets from Root

Source: https://lexical.dev/docs/concepts/traversals

Illustrates how to get the first and last child carets from the root node. The traversal starts at the first child for 'next' and the last child for 'previous'.

```javascript
const carets = [...$getChildCaret($getRoot(), 'next')];

// next starts at the first child
expect(carets).toEqual([
  $getSiblingCaret(paragraphA, 'next'),
  $getSiblingCaret(paragraphB, 'next'),
  $getSiblingCaret(paragraphC, 'next'),
]);

// previous starts at the last child
const prevCarets = [...$getChildCaret($getRoot(), 'previous')];
expect(prevCarets).toEqual([
  $getSiblingCaret(paragraphC, 'previous'),
  $getSiblingCaret(paragraphB, 'previous'),
  $getSiblingCaret(paragraphA, 'previous'),
]);
```

--------------------------------

### Create unit test directory and file

Source: https://lexical.dev/docs/maintainers-guide

Set up the directory for unit tests and create the initial test file.

```bash
mkdir -p packages/lexical-eslint-plugin/src/__tests__/unit
code packages/lexical-eslint-plugin/src/__tests__/unit/LexicalEslintPlugin.test.ts
```

--------------------------------

### Initialize package.json

Source: https://lexical.dev/docs/maintainers-guide

Create the initial package.json file for the new package, specifying metadata and entry points.

```json
{
  "name": "@lexical/eslint-plugin",
  "description": "",
  "keywords": [
    "lexical",
    "editor"
  ],
  "version": "0.14.3",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/facebook/lexical.git",
    "directory": "packages/lexical-eslint-plugin"
  },
  "main": "LexicalEslintPlugin.js",
  "types": "index.d.ts",
  "bugs": {
    "url": "https://github.com/facebook/lexical/issues"
  },
  "homepage": "https://github.com/facebook/lexical#readme"
}
```

--------------------------------

### Iterating Siblings with NodeCaret

Source: https://lexical.dev/docs/concepts/traversals

Demonstrates how to iterate through all sibling nodes starting from a given NodeCaret. Note that NodeCaret itself is iterable, making this function a conceptual example.

```typescript
function *$iterSiblings<D extends CaretDirection>(
  startCaret: NodeCaret<D>
): Iterable<SiblingCaret<LexicalNode, D>> {
  // Note that we start at the adjacent caret. The start caret
  // points away from the origin node, so we do not want to
  // trick ourselves into thinking that that origin is included.
  for (
    let caret = startCaret.getAdjacentCaret();
    caret !== null;
    caret = caret.getAdjacentCaret()
  ) {
    yield caret;
  }
}
```

--------------------------------

### Integrate OnChangePlugin in React Editor

Source: https://lexical.dev/docs/getting-started/react

Integrate the custom `MyOnChangePlugin` into a React Lexical editor setup. This example shows how to use the plugin to update a React state variable with the latest editor state.

```javascript
function MyOnChangePlugin({ onChange }) {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    return editor.registerUpdateListener(({editorState}) => {
      onChange(editorState);
    });
  }, [editor, onChange]);

  return null;
}

function Editor() {
  // ...
  
  const [editorState, setEditorState] = useState();
  function onChange(editorState) {
    setEditorState(editorState);
  }
  
  return (
    <LexicalComposer initialConfig={initialConfig}>
      <RichTextPlugin 
        contentEditable={
          <ContentEditable 
            aria-placeholder={'Enter some text...'} 
            placeholder={<div>Enter some text...</div>}
          />
        }
        ErrorBoundary={LexicalErrorBoundary}
      />
      <HistoryPlugin />
      <MyCustomAutoFocusPlugin />
      <MyOnChangePlugin onChange={onChange}/>
    </LexicalComposer>
  );
}
```

--------------------------------

### $create Token Text Example

Source: https://lexical.dev/docs/api/modules/lexical

Demonstrates how to use $create to instantiate a TextNode and initialize it with specific content and mode.

```typescript
function $createTokenText(text: string): TextNode {  

  return $create(TextNode).setTextContent(text).setMode('token');  

}  
```

--------------------------------

### Configure HistoryExtension with maxDepth

Source: https://lexical.dev/docs/concepts/history

Set a finite `maxDepth` to cap the undo stack at a fixed length. This example sets the maximum depth to 100, which is a common starting point for interactive editing sessions.

```typescript
import {configExtension, defineExtension} from 'lexical';

import {HistoryExtension} from '@lexical/history';


const editorExtension = defineExtension({
  // ...
  dependencies: [
    // 100 events is a reasonable starting point — it matches the
    // ProseMirror history plugin's default depth and supports a deep
    // enough undo stack for almost any interactive editing session.
    configExtension(HistoryExtension, {maxDepth: 100}),
  ],
});

```

--------------------------------

### Run setup-trusted-publishing in check-only mode

Source: https://lexical.dev/docs/maintainers-guide

Execute the script in check-only mode to verify the status of public packages on the registry.

```bash
pnpm run setup-trusted-publishing
```

--------------------------------

### installDragonSupport()

Source: https://lexical.dev/docs/api/modules/lexical_dragon

Installs the shared window listener that handles Dragon NaturallySpeaking's web extension messages for registered editors.

```APIDOC
## installDragonSupport(targetWindow?)

### Description
Installs the shared window listener that handles Dragon NaturallySpeaking's web extension messages for every registered editor in the given window. This should be called synchronously from entrypoints that may render an editor lazily to ensure the listener is registered before the extension's own listener.

### Parameters
- **targetWindow** (Window | undefined) - Optional - The window to install the listener on. Defaults to the current window.

### Returns
- **Function** - A teardown function to remove the listener.
```

--------------------------------

### Build Editor with Basic Rich Text Extension

Source: https://lexical.dev/docs/extensions/defining-extensions

This example demonstrates building a Lexical editor with a basic rich text configuration. It sets a namespace, includes a dependency, and defines register and cleanup functions for the editor's lifecycle.

```javascript
const editor = buildEditorFromExtensions(
  defineExtension({
    name: "@example/basic-rich-text-editor",
    namespace: "basic-rich-text-editor",
    dependencies: [RichTextExtension],
    register: (editor: LexicalEditor) => {
      console.log("Editor Created");
      return () => console.log("Editor Disposed");
    },
  }),
);

```

--------------------------------

### Start WebSocket server

Source: https://lexical.dev/docs/collaboration/react

Run the WebSocket server to enable synchronization between clients, using YPERSISTENCE to save documents between restarts.

```bash
$ HOST=localhost PORT=1234 YPERSISTENCE=./yjs-wss-db npx y-websocket
```

--------------------------------

### buildEditorFromExtensions minimal configuration

Source: https://lexical.dev/docs/api/modules/lexical_extension

A minimal example of building an editor using extensions and configuration overrides without a registration hook.

```typescript
const editor = buildEditorFromExtensions(  

  RichTextExtension,  

  configExtension(EmojiExtension, { emojiBaseUrl: "/assets/emoji" }),  

);
```

--------------------------------

### HeadingRule Import Rule Example

Source: https://lexical.dev/docs/serialization/dom-import

An example of using defineImportRule with InlineSchema to import heading elements and their children.

```typescript
const HeadingRule = defineImportRule({  

  match: sel.tag('h1', 'h2', 'h3', 'h4', 'h5', 'h6'),  

  $import: (ctx, el) => {  

    const node = $createHeadingNode(el.nodeName.toLowerCase() as HeadingTagType);  

    node.splice(0, 0, ctx.$importChildren(el, {schema: InlineSchema}));  

    return [node];  

  },  

});  
```

--------------------------------

### Run update-packages script

Source: https://lexical.dev/docs/maintainers-guide

Execute the script to generate boilerplate documentation and configuration files.

```bash
pnpm run update-packages
```

--------------------------------

### Raw HTML Markdown Example

Source: https://lexical.dev/docs/packages/lexical-mdast

An example of a Markdown structure using HTML tags like details and summary.

```markdown

<details><summary>  

The *summary* line  

</summary>  

  

The **body** blocks  

</details>  



```

--------------------------------

### Initialize Editor with Initial State and Persist

Source: https://lexical.dev/docs/concepts/editor-state

Demonstrates how to load an initial editor state from a backend, initialize the editor, and then save the current editor state. Assumes helper functions `loadContent`, `createEditor`, `registerRichText`, and `saveContent` are defined.

```javascript
// Get editor initial state (e.g. loaded from backend)  

const loadContent = async () => {  

  // 'empty' editor  

  const value = '{"root":{"children":[{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';  

  

  return value;  

}
  

const initialEditorState = await loadContent();  
const editor = createEditor(...);  
registerRichText(editor, initialEditorState);  

...
  

// Handler to store content (e.g. when user submits a form)  

const onSubmit = () => {  

  await saveContent(JSON.stringify(editor.getEditorState()));  

}
```

--------------------------------

### Vanilla JS App - After Minimal Migration

Source: https://lexical.dev/docs/extensions/migration

This snippet demonstrates migrating to Lexical Builder with minimal changes, using `buildEditorFromExtensions` for editor creation while still manually registering some plugins.

```javascript
import {registerDragonSupport} from '@lexical/dragon';

import {createEmptyHistoryState, registerHistory} from '@lexical/history';

import {HeadingNode, QuoteNode, registerRichText} from '@lexical/rich-text';

import {mergeRegister} from '@lexical/utils';

import {buildEditorFromExtensions} from '@lexical/extension';
import $prepopulatedRichText from './$prepopulatedRichText';


const editorRef = document.getElementById('lexical-editor');
const stateRef = document.getElementById(
  'lexical-state',
) as HTMLTextAreaElement;

const editor = buildEditorFromExtensions({
  // Any string is suitable as long as it uniquely defines the Extension in the editor
  name: '[root]',
  namespace: 'Vanilla JS Demo (with Lexical Extension)',
  // Register nodes specific for @lexical/rich-text
  nodes: [HeadingNode, QuoteNode],
  // onError boilerplate removed
  theme: {quote: 'PlaygroundEditorTheme__quote'},
});
editor.setRootElement(editorRef);

// Registering Plugins
mergeRegister(
  registerRichText(editor),
  registerDragonSupport(editor),
  registerHistory(editor, createEmptyHistoryState(), 300),
);

editor.update($prepopulatedRichText, {tag: 'history-merge'});

```

--------------------------------

### ChildCaret getFlipped examples

Source: https://lexical.dev/docs/api/modules/lexical

Examples demonstrating the behavior of the getFlipped method, which flips the head and tail of the caret's directional arrow.

```typescript
caret.getFlipped().getFlipped().is(caret) === true;  

$getChildCaret(parent, 'next').getFlipped().is($getSiblingCaret(firstChild, 'previous')) === true;  

$getSiblingCaret(lastChild, 'next').getFlipped().is($getChildCaret(parent, 'previous')) === true;  

$getSiblingCaret(firstChild, 'next).getFlipped().is($getSiblingCaret(lastChild, 'previous')) === true;  

$getChildCaret(emptyParent, 'next').getFlipped().is($getChildCaret(emptyParent, 'previous')) === true;
```

--------------------------------

### Example of invalid inline parent structure

Source: https://lexical.dev/docs/serialization/dom-import

An example of an inline element containing block children that cannot be handled by standard schema rules.

```html
<a href="link"><h1>some text</h1><div>more text</div></a>
```

--------------------------------

### buildEditorFromExtensions with dependencies

Source: https://lexical.dev/docs/api/modules/lexical_extension

Demonstrates building an editor with a root extension that includes multiple dependencies and a registration hook.

```typescript
const editor = buildEditorFromExtensions(  

  defineExtension({  

    name: "[root]",  

    dependencies: [  

      RichTextExtension,  

      configExtension(EmojiExtension, { emojiBaseUrl: "/assets/emoji" }),  

    ],  

    register: (editor: LexicalEditor) => {  

      console.log("Editor Created");  

      return () => console.log("Editor Disposed");  

    },  

  }),  

);
```

--------------------------------

### Example exportJSON for HeadingNode

Source: https://lexical.dev/docs/serialization

This example shows how to implement `exportJSON` for a `HeadingNode`, including its specific `tag` property along with the superclass properties.

```typescript
export type SerializedHeadingNode = Spread<
  {
    tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
  },
  SerializedElementNode
>;

exportJSON(): SerializedHeadingNode {
  return {
    ...super.exportJSON(),
    tag: this.getTag(),
  };
}
```

--------------------------------

### Strict mode build error example

Source: https://lexical.dev/docs/packages/lexical-compiler

An example of the build error message generated when a definition cannot be tree-shaken due to unannotated side-effect calls.

```text
@lexical/compiler: 1 call(s) evaluated inside a definition in  

src/MdastFootnoteExtension.ts are not known to be side-effect free, so the  

definition cannot be tree-shaken:  

  1145:25 gfmFootnoteFromMarkdown(...) inside defineExtension(...)  

Make the call lazy, or declare the function side-effect free  

(@__NO_SIDE_EFFECTS__ plus the transform's `functions`/`namespaces` options)  

so that its calls are annotated too.
```

--------------------------------

### getKey()

Source: https://lexical.dev/docs/api/modules/lexical

Gets the key of the editor.

```APIDOC
## getKey()

### Description
Gets the key of the editor.

### Returns
- **string** - The editor key
```

--------------------------------

### Bootstrap new packages

Source: https://lexical.dev/docs/maintainers-guide

Authenticate and run the script with the --bootstrap flag to publish a placeholder version for new packages.

```bash
npm login --registry https://registry.npmjs.org

pnpm run setup-trusted-publishing --bootstrap
```

--------------------------------

### getDecorators()

Source: https://lexical.dev/docs/api/modules/lexical

Gets a map of all decorators in the editor.

```APIDOC
## getDecorators<T>()

### Description
Gets a map of all decorators in the editor.

### Returns
- **Record<NodeKey, T>** - A mapping of call decorator keys to their decorated content
```

--------------------------------

### getRootElement()

Source: https://lexical.dev/docs/api/modules/lexical

Gets the current root element of the editor.

```APIDOC
## getRootElement()

### Description
Gets the current root element of the editor.

### Returns
- **HTMLElement | null** - The current root element of the editor.
```

--------------------------------

### Basic Lexical Composer Setup

Source: https://lexical.dev/docs/react/create_plugin

A basic structure for initializing Lexical with a custom plugin. Ensure any new nodes are registered in initialConfig.nodes.

```jsx
<LexicalComposer>
  <MyLexicalPlugin>
</LexicalComposer>
```

--------------------------------

### Configure trusted publishing

Source: https://lexical.dev/docs/maintainers-guide

Authenticate and run the script with the --setup-trust flag to configure GitHub trust for existing packages.

```bash
npm login --registry https://registry.npmjs.org

pnpm run setup-trusted-publishing --setup-trust
```

--------------------------------

### Initialize Editor with MdastImportExtension

Source: https://lexical.dev/docs/api/modules/lexical_mdast

Demonstrates how to build an editor instance using MdastCommonMarkExtension and convert a Markdown string.

```typescript

import {$convertFromMarkdownString, MdastCommonMarkExtension}  

  from '@lexical/mdast';  

import {buildEditorFromExtensions} from '@lexical/extension';  

import {defineExtension} from 'lexical';  

  

const editor = buildEditorFromExtensions(  

  defineExtension({dependencies: [MdastCommonMarkExtension], name: '[root]'}),  

);  

editor.update(() => $convertFromMarkdownString('# Hi'));  



```

--------------------------------

### getTextContent()

Source: https://lexical.dev/docs/api/modules/lexical

Gets the plain text content of all nodes in the selection.

```APIDOC
## getTextContent()

### Description
Gets the (plain) text content of all the nodes in the selection.

### Returns
- **string** - A string representing the text content of all the nodes in the Selection.
```

--------------------------------

### getNodes()

Source: https://lexical.dev/docs/api/modules/lexical

Gets all the nodes in the Selection, utilizing caching for performance.

```APIDOC
## getNodes()

### Description
Gets all the nodes in the Selection. Uses caching to make it generally suitable for use in hot paths.

### Returns
- **LexicalNode[]** - An Array containing all the nodes in the Selection.
```

--------------------------------

### Create Lexical Editor Instance

Source: https://lexical.dev/docs/packages/lexical

Instantiate a Lexical editor with a namespace and theme configuration. This is the core editor engine.

```javascript
import {createEditor} from 'lexical';

const config = {
  namespace: 'MyEditor',
  theme: {
    ...
  },
};

const editor = createEditor(config);
```

--------------------------------

### $isAtStartOfNode

Source: https://lexical.dev/docs/api/modules/lexical_utils

Checks if the point is at the start of the node's content.

```APIDOC
## $isAtStartOfNode(point, node)

### Description
Whether the collapsed point sits at the very start of node's content — on its first descendant (or on the empty node itself) at offset 0.

### Parameters
- **point** (PointType) - Required
- **node** (ElementNode) - Required

### Returns
- **boolean**
```

--------------------------------

### Create Editor with Theme in Vanilla JS

Source: https://lexical.dev/docs/getting-started/theming

Initialize a Lexical editor with a theme object using vanilla JavaScript. Pass the theme to the createEditor function.

```javascript
import {createEditor} from 'lexical';

const editor = createEditor({
  namespace: 'MyEditor',
  theme: exampleTheme,
});
```

--------------------------------

### $createListNode(listType?, start?)

Source: https://lexical.dev/docs/api/modules/lexical_list

Creates a ListNode of a specified type.

```APIDOC
## $createListNode(listType?, start?)

### Description
Creates a ListNode of listType.

### Parameters
- **listType** (ListType) - Optional - The type of list to be created. Can be 'number', 'bullet', or 'check'. Default: 'number'.
- **start** (number) - Optional - Where an ordered list starts its count. Default: 1.

### Returns
- **ListNode** - The new ListNode.
```

--------------------------------

### Basic Lexical Editor Configuration with Plugins

Source: https://lexical.dev/docs/react/plugins

Sets up a basic Lexical editor using LexicalComposer and integrates PlainTextPlugin, HistoryPlugin, and OnChangePlugin.

```jsx
const initialConfig = {
  namespace: 'MyEditor',
  theme,
  onError,
};

<LexicalComposer initialConfig={initialConfig}>
  <PlainTextPlugin
    contentEditable={<ContentEditable />}
    placeholder={<div>Enter some text...</div>}
  />
  <HistoryPlugin />
  <OnChangePlugin onChange={onChange} />
  ...
</LexicalComposer>;
```
Tokens:
Raw