@meogic/lexical-markdown v0.11.1-mod8
@meogic/lexical-markdown
This package contains markdown helpers for Lexical: import, export and shortcuts.
Import and export
import {
$convertFromMarkdownString,
$convertToMarkdownString,
TRANSFORMERS,
} from '@meogic/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>
Shortcuts
Can use <MarkdownShortcutPlugin>
if using React
import { TRANSFORMERS } from '@meogic/lexical-markdown';
import {MarkdownShortcutPlugin} from '@meogic/lexical-react/LexicalMarkdownShortcutPlugin';
<LexicalComposer>
<MarkdownShortcutPlugin transformers={TRANSFORMERS} />
</LexicalComposer>
Or registerMarkdownShortcuts
to register it manually:
import {
registerMarkdownShortcuts,
TRANSFORMERS,
} from '@meogic/lexical-markdown';
const editor = createEditor(...);
registerMarkdownShortcuts(editor, TRANSFORMERS);
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. @meogic/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 transformers
Transformers are explicitly passed to markdown API allowing application-specific subset of markdown or custom transformers.
There're three types of transformers:
- Element transformer handles top level elements (lists, headings, quotes, tables or code blocks)
- Text format transformer applies text range formats defined in
TextFormatType
(bold, italic, underline, strikethrough, code, subscript and superscript) - Text match transformer relies on matching leaf text node content
See MarkdownTransformers.js
for transformer implementation examples
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago