Skip to main content

MarkdownExtension

Summary​

This extension transforms the ProseMirror content of your editor to markdown syntax. It also transforms markdown syntax into a ProseMirror document.

Features​

Reduced Storage​

Markdown can be used to reduce the storage needed for your documents. It takes less space than a JSON object describing the same editor content.

The following example shows a hook which can be used to automatically persist content as markdown.

import delay from 'delay';
import { useCallback, useState } from 'react';
import { useHelpers, useKeymap } from '@remirror/react';

async function saveContent(content: string) {
  // Fake API call
  await delay(1000);
}

interface UseSaveHook {
  saving: boolean;
  error: Error | undefined;
}

// Create a hook which saves the content as markdown whenever `Ctrl-s` on Mac `Cmd-s` is pressed.
function useSaveHook() {
  const helpers = useHelpers();
  const [state, setState] = useState<UseSaveHook>({ saving: false, error: undefined });

  useKeymap(
    'Mod-s',
    useCallback(() => {
      // Convert the editor content to markdown.
      const markdown = helpers.getMarkdown();

      setState({ saving: true, error: undefined });

      saveContent(markdown)
        .then(() => {
          setState({ saving: false, error: undefined });
        })
        .catch((error) => {
          setState({ saving: true, error });
        });

      return true;
    }, [helpers]),
  );

  return state;
}

Transform existing Markdown​

If you already have a lot of markdown content this can be used to transform the markdown content into a ProseMirror doc node for your editor.

  • The entire document can be set with a markdown string.
  • Insert any markdown content into the document at any insertion point.

Usage​

Installation​

This extension is installed for you when you install the main remirror package.

You can use the imports in the following way:

import { MarkdownExtension, MarkdownOptions } from 'remirror/extensions';

The extension is provided by the @remirror/extension-markdown package.

Examples​

See storybook for examples.

API​