API REFERENCE · RICH TEXT PLUGINS

`@dojo-ng/rich-text-markdown`

Markdown for <dj-rich-text>: a Markdown value format and typing shortcuts.

@dojo-ng/rich-text-markdown · v0.2.1 · A plugin for <dj-rich-text>, not a custom element

npm install @dojo-ng/rich-text-markdown

Compose the markdown plugin with the default set (plus headings/lists/links for full coverage) and set format="markdown" so the value round-trips as Markdown. Typing # still makes a heading.

<dj-rich-text id="editor" label="Article" format="markdown"></dj-rich-text>
<script type="module">
  import "@dojo-ng/rich-text";
  import { defaultPlugins } from "@dojo-ng/rich-text";
  import { headingsPlugin } from "@dojo-ng/rich-text-headings";
  import { listsPlugin } from "@dojo-ng/rich-text-lists";
  import { linksPlugin } from "@dojo-ng/rich-text-links";
  import { markdownPlugin } from "@dojo-ng/rich-text-markdown";
  const el = document.getElementById("editor");
  el.plugins = [...defaultPlugins, headingsPlugin, listsPlugin, linksPlugin, markdownPlugin];
  el.value = "# Title\n\nSome **bold** text.";
</script>

Markdown value

Set format="markdown" on dj-rich-text: value then returns Markdown, and setting it parses Markdown.
Coverage follows the plugins that add content types. Pair it with rich-text-headings, rich-text-lists, and rich-text-links for headings, lists, and links. Without the headings plugin, # stays as typed.
Pasted text that looks like Markdown is not converted. Markdown comes in through value or the shortcuts.

Shortcuts

By default, typing # makes a heading, - a list, **bold** bold text, and so on, even when the value format stays HTML.

Setup

createMarkdownPlugin({ shortcuts, transformers }) turns the shortcuts off or sets your own transformers. usableTransformers(editor, transformers) shows which ones apply.
Requires the @lexical/markdown package.
Setting plugins replaces the default set, so spread ...defaultPlugins to keep bold, italic, underline, undo, and redo.

Functions

`createMarkdownPlugin`

function createMarkdownPlugin(options?: MarkdownPluginOptions): RichTextPlugin;

`usableTransformers`

function usableTransformers(editor: LexicalEditor, transformers: Transformer[]): Transformer[];

Values

`markdownPlugin`

const markdownPlugin: RichTextPlugin;

Types

`MarkdownPluginOptions`

interface MarkdownPluginOptions {
  shortcuts?: boolean;
  transformers?: Transformer[];
  prepareImport?: (markdown: string) => string;
}