[!WARNING] Tiptap released a markdown extension in 3.7.0, please prefer using the official extension over this package. I don't plan to address current issues / PR.

Tiptap markdown

The markdown extension for Tiptap editor.

Installation

For Tiptap v2

npm install tiptap-markdown@^0.8

For Tiptap v3

npm install tiptap-markdown@latest

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.