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.

The default sanitizer has **zero** security guarantees so it's recommended that you provide your own html sanitizer here.

If you want to sanitize on the backend as well you will need to override this method.

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