@lexical/markdown

What is @lexical/markdown?

@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.

What are @lexical/markdown's main functionalities?

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);

Other packages similar to @lexical/markdown

markdown-it

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

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

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.

README

@lexical/markdown

This package contains markdown helpers and functionality for Lexical.

The package focuses on markdown conversion.

The package has 3 main functions:

1. It imports a string and converts into Lexical and then converts markup within the imported nodes. See convertFromPlainTextUtils.js
2. It exports Lexical to a plain text with markup. See convertToPlainTextUtils.js
3. It autoformats newly typed text by converting the markdown + some trigger to the appropriate stylized text. See autoFormatUtils.js

Changelog

0.2.4 (April 21, 2022)

• Add subscript/superscript elements to TextNode (#1903)
• Do not reconcile selection during readOnly (#1900)
• Add embed block to playground (#1895)
• Fix list outdent & indent bug (#1883)
• Excalidraw fixes (#1871)
• Updates to type definitions for Flow and TS
• Updates to documentation