npmpackage.info

Gathering detailed insights and metrics for @meogic/lexical

Other packages similar to @meogic/lexical

@meogic/lexical-selection

0.11.1-mod8

This package contains utilities and helpers for handling Lexical selection.

@meogic/lexical-utils

0.11.1-mod8

This package contains misc utilities for Lexical.

@meogic/lexical-list

0.11.1-mod8

This package provides the list feature for Lexical.

@meogic/lexical-table

0.11.1-mod8

This package provides the Table feature for Lexical.

Gathering detailed insights and metrics for @meogic/lexical

@meogic/lexical - 0.11.1-mod8 | npmpackage.info

@meogic/lexical

Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.

0.11.1-mod8

21,592

MIT

TypeScript

565.52 kB

5.8

Installations

npm install @meogic/lexical

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

16.15.1

NPM Version

9.4.1 Score

77.6

Supply Chain

98.7

Quality

75.4

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

28

Total

4,542

Closed

674

Merged

3,840

Issues

Open

496

Total

2,520

Closed

2,024

Releases

v0.33.1

Updated on Jul 10, 2025

v0.33.0

Updated on Jul 04, 2025

v0.32.1

Updated on Jun 04, 2025

v0.32.0

Updated on Jun 03, 2025

v0.31.2

Updated on May 20, 2025

v0.31.1

Updated on May 11, 2025

View All 75 releases

Languages

TypeScript

JavaScript

CSS

MDX

HTML

Swift

Shell

Svelte

Astro

TypeScript (70.14%)

JavaScript (27.22%)

CSS (1.93%)

MDX (0.43%)

HTML (0.1%)

Swift (0.07%)

Shell (0.05%)

Svelte (0.04%)

Astro (0.03%)

Developer

facebook

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

21,592 Stars

4,428 Commits

1,931 Forks

128 Watchers

26 Branches

556 Contributors

Updated on Jul 16, 2025

Maintainers

View All 556 Contributors

Package Meta Information

Latest Version

0.11.1-mod8

Package Id

@meogic/lexical@0.11.1-mod8

Unpacked Size

565.52 kB

Size

131.06 kB

File Count

NPM Version

9.4.1

Node Version

16.15.1

Published on

Jul 22, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

No dependencies detected.

`lexical`

Lexical is an extensible JavaScript web text-editor framework with an emphasis on reliability, accessibility, and performance. Lexical aims to provide a best-in-class developer experience, so you can easily prototype and build features with confidence. Combined with a highly extensible architecture, Lexical allows developers to create unique text editing experiences that scale in size and functionality.

The core of Lexical is a dependency-free text editor engine that allows for powerful, simple and complex, editor implementations to be built on top. Lexical's engine provides three main parts:

editor instances that each attach to a single content editable element.
a set of editor states that represent the current and pending states of the editor at any given time.
a DOM reconciler that takes a set of editor states, diffs the changes, and updates the DOM according to their state.

By design, the core of Lexical tries to be as minimal as possible. Lexical doesn't directly concern itself with things that monolithic editors tend to do – such as UI components, toolbars or rich-text features and markdown. Instead the logic for those features can be included via a plugin interface and used as and when they're needed. This ensures great extensibility and keeps code-sizes to a minimal – ensuring apps only pay the cost for what they actually import.

For React apps, Lexical has tight integration with React 18+ via the optional @meogic/lexical-react package. This package provides production-ready utility functions, helpers and React hooks that make it seemless to create text editors within React.

Usage

The lexical package contains only the core Lexical engine and nodes. This package is intended to be used in conjunction with packages that wire Lexical up to applications, such as @meogic/lexical-react.

Working with Lexical

This section covers how to use Lexical, independently of any framework or library. For those intending to use Lexical in their React applications, it's advisable to check out the source-code for the hooks that are shipped in @meogic/lexical-react.

Creating an editor and using it

When you work with Lexical, you normally work with a single editor instance. An editor instance can be thought of as the one responsible for wiring up an EditorState with the DOM. The editor is also the place where you can register custom nodes, add listeners, and transforms.

An editor instance can be created from the lexical package and accepts an optional configuration object that allows for theming and other options:

1import {createEditor} from '@meogic/lexical';
2
3const config = {
4  namespace: 'MyEditor',
5  theme: {
6    ...
7  },
8};
9
10const editor = createEditor(config);

Once you have an editor instance, when ready, you can associate the editor instance with a content editable <div> element in your document:

1const contentEditableElement = document.getElementById('editor');
2
3editor.setRootElement(contentEditableElement);

If you want to clear the editor instance from the element, you can pass null. Alternatively, you can switch to another element if need be, just pass an alternative element reference to setRootElement().

Understanding the Editor State

With Lexical, the source of truth is not the DOM, but rather an underlying state model that Lexical maintains and associates with an editor instance. You can get the latest editor state from an editor by calling editor.getEditorState().

Editor states have two phases:

During an update they can be thought of as "mutable". See "Updating an editor" below to mutate an editor state.
After an update, the editor state is then locked and deemed immutable from there one. This editor state can therefore be thought of as a "snapshot".

Editor states contain two core things:

The editor node tree (starting from the root node).
The editor selection (which can be null).

Editor states are serializable to JSON, and the editor instance provides a useful method to deserialize stringified editor states.

1const stringifiedEditorState = JSON.stringify(editor.getEditorState().toJSON());
2
3const newEditorState = editor.parseEditorState(stringifiedEditorState);

Updating an editor

There are a few ways to update an editor instance:

Trigger an update with editor.update()
Setting the editor state via editor.setEditorState()
Applying a change as part of an existing update via editor.registerNodeTransform()
Using a command listener with editor.registerCommand(EXAMPLE_COMMAND, () => {...}, priority)

The most common way to update the editor is to use editor.update(). Calling this function requires a function to be passed in that will provide access to mutate the underlying editor state. When starting a fresh update, the current editor state is cloned and used as the starting point. From a technical perspective, this means that Lexical leverages a technique called double-buffering during updates. There's an editor state to represent what is current on the screen, and another work-in-progress editor state that represents future changes.

Creating an update is typically an async process that allows Lexical to batch multiple updates together in a single update – improving performance. When Lexical is ready to commit the update to the DOM, the underlying mutations and changes in the update will form a new immutable editor state. Calling editor.getEditorState() will then return the latest editor state based on the changes from the update.

Here's an example of how you can update an editor instance:

1import {$getRoot, $getSelection} from '@meogic/lexical';
2import {$createParagraphNode} from 'lexical/PargraphNode';
3
4// Inside the `editor.update` you can use special $ prefixed helper functions.
5// These functions cannot be used outside the closure, and will error if you try.
6// (If you're familiar with React, you can imagine these to be a bit like using a hook
7// outside of a React function component).
8editor.update(() => {
9  // Get the RootNode from the EditorState
10  const root = $getRoot();
11
12  // Get the selection from the EditorState
13  const selection = $getSelection();
14
15  // Create a new ParagraphNode
16  const paragraphNode = $createParagraphNode();
17
18  // Create a new TextNode
19  const textNode = $createTextNode('Hello world');
20
21  // Append the text node to the paragraph
22  paragraphNode.append(textNode);
23
24  // Finally, append the paragraph to the root
25  root.append(paragraphNode);
26});

If you want to know when the editor updates so you can react to the changes, you can add an update listener to the editor, as shown below:

1editor.registerUpdateListener(({editorState}) => {
2  // The latest EditorState can be found as `editorState`.
3  // To read the contents of the EditorState, use the following API:
4
5  editorState.read(() => {
6    // Just like editor.update(), .read() expects a closure where you can use
7    // the $ prefixed helper functions.
8  });
9});

No vulnerabilities found.

10

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

9

Security-Policy

Determines if the project has published a security policy.

5

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 5

Details

Info: Possibly incomplete results: error parsing shell code: a command can only contain words and redirects; encountered (: scripts/npm/postversion.js:0
Warn: third-party GitHubAction not pinned by hash: .github/workflows/after-approval.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/facebook/lexical/after-approval.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/call-core-tests.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/facebook/lexical/call-core-tests.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/call-core-tests.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/facebook/lexical/call-core-tests.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/call-core-tests.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/facebook/lexical/call-core-tests.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/call-core-tests.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/facebook/lexical/call-core-tests.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/call-e2e-test.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/facebook/lexical/call-e2e-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/call-e2e-test.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/facebook/lexical/call-e2e-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/call-e2e-test.yml:50: update your workflow using https://app.stepsecurity.io/secureworkflow/facebook/lexical/call-e2e-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/call-e2e-test.yml:58: update your workflow using https://app.stepsecurity.io/secureworkflow/facebook/lexical/call-e2e-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/call-e2e-test.yml:67: update your workflow using https://app.stepsecurity.io/secureworkflow/facebook/lexical/call-e2e-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/call-increment-version.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/facebook/lexical/call-increment-version.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/call-increment-version.yml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/facebook/lexical/call-increment-version.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/call-increment-version.yml:48: update your workflow using https://app.stepsecurity.io/secureworkflow/facebook/lexical/call-increment-version.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/call-integration-tests.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/facebook/lexical/call-integration-tests.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/call-integration-tests.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/facebook/lexical/call-integration-tests.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/call-npm-publish.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/facebook/lexical/call-npm-publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/call-npm-publish.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/facebook/lexical/call-npm-publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/devtools-extension-publish.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/facebook/lexical/devtools-extension-publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/devtools-extension-publish.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/facebook/lexical/devtools-extension-publish.yml/main?enable=pin
Info: 0 out of 17 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 2 third-party GitHubAction dependencies pinned
Info: 7 out of 7 npmCommand dependencies pinned

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

5.8

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More