quilljs-markdown

You can install the library using npm or include it directly in your HTML via a CDN link.

NPM:

npm i quilljs-markdown

CDN:

<script src="https://cdn.jsdelivr.net/npm/quilljs-markdown@latest/dist/quilljs-markdown.js"></script>

Alternatively, you can manually instantiate QuillMarkdown by passing an existing Quill editor instance and an options object. This approach is useful if you want to control exactly when markdown support is enabled or disabled.

import Quill from 'quill'
import QuillMarkdown from 'quilljs-markdown'
import 'quilljs-markdown/dist/quilljs-markdown-common-style.css'

const editor = new Quill('#editor', { theme: 'snow' })
const markdownOptions = {
  ignoreTags: ['pre'],
  tags: {
    bold: { pattern: /^\|\s/g }
  }
}

const quillMarkdown = new QuillMarkdown(editor, markdownOptions)

The Header tag uses a regular expression to detect Markdown heading syntax.

Default Pattern: /^(#){1,6}\s/g

Behavior:

1. It matches between 1 and 6 # characters followed by a space.
2. The heading level is determined by the length of the match (number of # symbols).
3. Upon matching, it uses quillJS.formatLine to apply the header format and quillJS.deleteText to remove the Markdown symbols, leaving only the text.
4. It maps the number of # symbols to Quill header sizes: # becomes h1, ## becomes h2, up to ###### which becomes h6.

To remove event listeners and disable markdown support, call the .destroy() method on your QuillMarkdown instance. To re-enable support, you must create a new instance of QuillMarkdown.

const quillMarkdown = new QuillMarkdown(editor, markdownOptions)
// markdown is enabled

quillMarkdown.destroy()
// markdown is now disabled

The library provides paste support and shortcut support for the following Markdown patterns:

When instantiating the Codeblock class, you can pass an options object to customize its behavior:

• pattern: A regular expression used to identify code blocks. By default, it uses /^(```).*/g (matching triple backticks).
• ignoreTags: An array of tag names to be excluded from the activeTags list, preventing the tag from triggering if these tags are present.

You can import the QuillMarkdown module directly into your project. If you are working in a browser environment, the library also attaches itself to the window.QuillMarkdown global object for convenience.

import QuillMarkdown from './src/app.js';

The Header class is a plugin component for quilljs-markdown that enables Markdown-style heading syntax (e.g., # , ## ) to be converted into Quill header formats.

When a user types a pattern matching the header regex, the plugin identifies the heading level based on the number of # characters and applies the corresponding Quill format (e.g., h1 through h6).

Configuration

• options.ignoreTags: An array of tag names to ignore. If 'header' is included in this list, the header transformation will not trigger.
• options.pattern: A custom regular expression to define what constitutes a header. By default, it uses /^(#){1,6}\s/g.

// Example conceptual usage within the quilljs-markdown ecosystem
const headerTag = new Header(quillJS, {
  ignoreTags: [], // Do not ignore headers
  // pattern is defaulted to /^(#){1,6}\s/g
});

The TagsOperators class is the central registry for managing markdown tag operators within the Quill editor. When instantiated, it automatically categorizes operators into two groups: supportInlineTags (for inline formatting) and supportfullTextTags (for full-text/block-level formatting).

To use it, pass an instance of quillJS and an optional options object containing a tags configuration.

Supported inline tags include:

• Header
• Blockquote
• Bold
• Codeblock
• InlineCode
• Strikethrough
• Italics
• Link

import TagsOperators from './src/tags/index.js';

// Assuming quillJS is an initialized Quill instance
const options = { tags: {} };
const tagsOperators = new TagsOperators(quillJS, options);