@terrible-lexical/markdown

0.12.14 • Public • Published

@terrible-lexical/markdown

This package contains markdown helpers for Lexical: import, export and shortcuts.

Import and export

import {
  $convertFromMarkdownString,
  $convertToMarkdownString,
  TRANSFORMERS,
} from '@terrible-lexical/markdown/src';

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 '@terrible-lexical/markdown/src';
import {MarkdownShortcutPlugin} from '@terrible-lexical/react/src/LexicalMarkdownShortcutPlugin';

<LexicalComposer>
  <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
</LexicalComposer>

Or registerMarkdownShortcuts to register it manually:

import {
  registerMarkdownShortcuts,
  TRANSFORMERS,
} from '@terrible-lexical/markdown/src';

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. @terrible-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 transformers
  • ELEMENT_TRANSFORMERS - all built-in element transformers
  • TEXT_FORMAT_TRANSFORMERS - all built-in text format transformers
  • TEXT_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

Package Sidebar

Install

npm i @terrible-lexical/markdown

Weekly Downloads

2

Version

0.12.14

License

MIT

Unpacked Size

69.4 kB

Total Files

11

Last publish

Collaborators

  • ivanterrible