outverse/tiptap-markdown

The Markdown extension for Tiptap editor.

Tiptap markdown

The markdown extension for Tiptap editor.

Warning
Since v0.7.0, createMarkdownEditor has been dropped in favor of a more friendly Markdown Tiptap extension. See the migration guide.

Installation

npm install tiptap-markdown

Requirements

Supports all frameworks handled by Tiptap (Vue 2, Vue 3, React, see full list...)

Usage

Basic example:

import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import { Markdown } from 'tiptap-markdown';

const editor = new Editor({
    content: "# Title",
    extensions: [
        StarterKit,
        Markdown,
    ],
});
const markdownOutput = editor.storage.markdown.getMarkdown();

API

Options

Default options:

Markdown.configure({
  html: true,                  // Allow HTML input/output
  tightLists: true,            // No <p> inside <li> in markdown output
  tightListClass: 'tight',     // Add class to <ul> allowing you to remove <p> margins when tight
  bulletListMarker: '-',       // <li> prefix in markdown output
  linkify: false,              // Create links from "https://..." text
  breaks: false,               // New lines (\n) in markdown input are converted to <br>
  transformPastedText: false,  // Allow to paste markdown text in the editor
  transformCopiedText: false,  // Copied text is transformed to markdown
})

Methods

editor.commands.setContent('**test**') // setContent supports markdown format
editor.storage.markdown.getMarkdown(); // get current content as markdown

Custom extensions

See examples.
Check out prosemirror-markdown default serializer for examples of serialize config. Check out markdown-it plugins for parsing.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

The MIT License (MIT). Please see License File for more information.