Skip to main content

extension-markdown

package @remirror/extension-markdown

class MarkdownExtension

This extension adds support for markdown editors using remirror.

TODO - when presets are removed automatically include all the supported extensions.

This extension adds the following to the ManagerStore.

  • getMarkdown() - extract the markdown representation from the editor.

Future features

  • [ ] Add markdown specific commands which add the markdown syntax to the text content.

Signature:

export declare class MarkdownExtension extends PlainExtension<MarkdownOptions> 

Extends: PlainExtension<MarkdownOptions>

(Some inherited members may not be shown because they are not represented in the documentation.)

property name

Signature:

get name(): "markdown";

method createPlugin

Signature:

createPlugin(): CreateExtensionPlugin;

Returns:

CreateExtensionPlugin

method getMarkdown

Get the markdown content from the current document.

Signature:

getMarkdown(state?: EditorState): Helper<string>;

Parameters:

ParameterTypeDescription
stateEditorState(Optional) the state provided to the getMarkdown method.

Returns:

Helper<string>

method insertMarkdown

Insert a markdown string as a ProseMirror Node.

commands.insertMarkdown('# Heading\nAnd content');
// => <h1 id="heading">Heading</h1><p>And content</p>

The content will be inlined by default if not a block node.

commands.insertMarkdown('**is bold.**')
// => <strong>is bold.</strong>

To always wrap the content in a block you can pass the following option.

commands.insertMarkdown('**is bold.**', { alwaysWrapInBlock: true });
// => <p><strong>is bold.</strong></p>

Signature:

insertMarkdown(markdown: string, options?: InsertNodeOptions & {
alwaysWrapInBlock?: boolean;
}): CommandFunction;

Parameters:

ParameterTypeDescription
markdownstring
optionsInsertNodeOptions & { alwaysWrapInBlock?: boolean; }(Optional)

Returns:

CommandFunction

method onCreate

Add the markdown string handler and getMarkdown state helper method.

Signature:

onCreate(): void;

Returns:

void

interface MarkdownOptions

Signature:

export interface MarkdownOptions 

property activeNodes

The parent nodes (or tags) where the markdown extension shortcuts are active.

Signature:

activeNodes?: string[];

property copyAsMarkdown

Set this to true to copy the values from the text editor as markdown. This means that when pasting into a plain text editor (vscode) for example, the markdown will be preserved.

Signature:

copyAsMarkdown?: boolean;

property htmlSanitizer

Provide a sanitizer to prevent XSS attacks. Remirror does not provide any sanitization by default.

Signature:

htmlSanitizer?: Static<(html: string) => string>;

property htmlToMarkdown

Converts the provided html to a markdown string.

By default this uses

Signature:

htmlToMarkdown?: Static<(html: string) => string>;

property markdownToHtml

Takes a markdown string and outputs html. It is up to you to make sure the markdown is sanitized during this function call by providing the sanitizeHtml method.

Signature:

markdownToHtml?: Static<(markdown: string, sanitizer?: (html: string) => string) => string>;