@lexical/markdown
Advanced tools
Package description
@lexical/markdown is a package that provides utilities for converting between Lexical editor states and Markdown. It allows you to parse Markdown into Lexical nodes and serialize Lexical nodes back into Markdown.
Parsing Markdown to Lexical Nodes
This feature allows you to convert a Markdown string into Lexical nodes, which can then be used within a Lexical editor.
const { $convertFromMarkdownString } = require('@lexical/markdown');
const markdownString = '# Hello World';
const lexicalNodes = $convertFromMarkdownString(markdownString);Serializing Lexical Nodes to Markdown
This feature allows you to convert Lexical nodes back into a Markdown string, making it easy to save or share the content in Markdown format.
const { $convertToMarkdownString } = require('@lexical/markdown');
const lexicalNodes = [/* some Lexical nodes */];
const markdownString = $convertToMarkdownString(lexicalNodes);Custom Markdown Parsing Rules
This feature allows you to define custom parsing rules for Markdown, giving you flexibility in how Markdown is interpreted and converted into Lexical nodes.
const { $convertFromMarkdownString, $createMarkdownParser } = require('@lexical/markdown');
const customRules = [/* custom parsing rules */];
const parser = $createMarkdownParser(customRules);
const markdownString = '# Custom Rule Example';
const lexicalNodes = parser.parse(markdownString);markdown-it is a Markdown parser that offers a high level of extensibility and performance. Unlike @lexical/markdown, which is tightly integrated with the Lexical editor, markdown-it is a general-purpose Markdown parser that can be used in a variety of contexts.
remark is a Markdown processor powered by plugins. It is highly extensible and can be used to parse, transform, and compile Markdown. While @lexical/markdown is focused on integration with the Lexical editor, remark provides a more general-purpose solution for working with Markdown.
showdown is a bidirectional Markdown to HTML converter written in JavaScript. It is simple to use and can be easily integrated into web projects. Unlike @lexical/markdown, which focuses on converting between Lexical nodes and Markdown, showdown is designed for converting between Markdown and HTML.
Changelog
v0.16.0 (2024-06-04)
Readme
@lexical/markdown
This package contains markdown helpers for Lexical: import, export and shortcuts.
import {
$convertFromMarkdownString,
$convertToMarkdownString,
TRANSFORMERS,
} from '@lexical/markdown';
editor.update(() => {
const markdown = $convertToMarkdownString(TRANSFORMERS);
...
});
editor.update(() => {
$convertFromMarkdownString(markdown, TRANSFORMERS);
});
It can also be used for initializing editor's state from markdown string. Here's an example with react <RichTextPlugin>
<LexicalComposer initialConfig={{
editorState: () => $convertFromMarkdownString(markdown, TRANSFORMERS)
}}>
<RichTextPlugin />
</LexicalComposer>
Can use <MarkdownShortcutPlugin> if using React
import { TRANSFORMERS } from '@lexical/markdown';
import {MarkdownShortcutPlugin} from '@lexical/react/LexicalMarkdownShortcutPlugin';
<LexicalComposer>
<MarkdownShortcutPlugin transformers={TRANSFORMERS} />
</LexicalComposer>
Or registerMarkdownShortcuts to register it manually:
import {
registerMarkdownShortcuts,
TRANSFORMERS,
} from '@lexical/markdown';
const editor = createEditor(...);
registerMarkdownShortcuts(editor, TRANSFORMERS);
Markdown functionality relies on transformers configuration. It's an array of objects that define how certain text or nodes
are processed during import, export or while typing. @lexical/markdown package provides set of built-in transformers:
// Element transformers
UNORDERED_LIST
CODE
HEADING
ORDERED_LIST
QUOTE
// Text format transformers
BOLD_ITALIC_STAR
BOLD_ITALIC_UNDERSCORE
BOLD_STAR
BOLD_UNDERSCORE
INLINE_CODE
ITALIC_STAR
ITALIC_UNDERSCORE
STRIKETHROUGH
// Text match transformers
LINK
And bundles of commonly used transformers:
TRANSFORMERS - all built-in transformersELEMENT_TRANSFORMERS - all built-in element transformersTEXT_FORMAT_TRANSFORMERS - all built-in text format transformersTEXT_MATCH_TRANSFORMERS - all built-in text match transformersTransformers are explicitly passed to markdown API allowing application-specific subset of markdown or custom transformers.
There're three types of transformers:
TextFormatType (bold, italic, underline, strikethrough, code, subscript and superscript)See MarkdownTransformers.js for transformer implementation examples
FAQs
This package contains Markdown helpers and functionality for Lexical.
The npm package @lexical/markdown receives a total of 307,726 weekly downloads. As such, @lexical/markdown popularity was classified as popular.
We found that @lexical/markdown demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The US Justice Department has penalized two consulting firms $11.3 million for failing to meet cybersecurity requirements on federally funded projects, emphasizing strict enforcement to protect sensitive government data.
Security News
ua-parser-js is set to drop the MIT license and adopt a controversial dual AGPLv3 + PRO licensing model in its upcoming v2.0 release, raising significant concerns among developers and enterprise users.
Security News
Researchers recently demonstrated that the npm Registry is vulnerable to cache poisoning combined with DoS, posing significant risks for package availability.