@lexical/markdown
Advanced tools
This package contains Markdown helpers and functionality for Lexical.
@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.
@lexical/markdownThis 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 trasnformersTEXT_MATCH_TRANSFORMERS - all built-in text match trasnformersTransformers 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
0.4.0 (September 3, 2022)
editor.isReadyOnly -> editor.isEditable() editor.setReadyOnly -> editor.setEditable() editor.registerReadOnlyListener -> editor.registerEditableListener() editor config { readOnly: true } -> { editable: boolean }
https://github.com/facebook/lexical/pull/2912
The "dependencies" property is now required for custom markdown Element and TextMatch Transformers. It takes an array of LexicalNode subclasses and asserts that they're available in the editor when transforms are registered.
https://github.com/facebook/lexical/pull/2910
Lexical will now track and update selection in response to DOM selectionchange events when editor.isEditable is false. This is necessary for enabling some behavior such as commenting via marks, but may cause other indirect changes such as update listeners firing when they didn't previously.
addTransform with registerNodeTransform in transforms doc (#2882) Kevin AnsfieldFAQs
This package contains Markdown helpers and functionality for Lexical.
The npm package @lexical/markdown receives a total of 459,059 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
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.