thematters/matters-editor

Rich editor for matters.town, built on top of Tiptap/ProseMirror

Matters Editor

Installation

npm i @matters/matters-editor

Development

# dev
npm run dev

# build
npm run build

# test
npm run test

Editor

The editor core, built with TipTap & ProseMirror, using by thematters/matters-web.

import {
  EditorContent,
  articleEditorExtensions,
  useEditor,
} from '@matters/matters-editor'

const Editor = () => {
  const editor = useEditor({
    editable: true,
    placeholder: 'Write your article here...',
    content: '', // initial content
    extensions: articleEditorExtensions,
    onUpdate: async ({ editor, transaction }) => {
      const content = editor.getHTML()
      // update({ content })
    },
    // mentionSuggestion, // if you want to enable mention extension
    // extensions: [...], // provides your custom extensions
  })

  return <EditorContent editor={editor} />
}

Transformers

Transformers (using by thematters/matters-server) export below functions:

• md2html: Convert Markdown to HTML
• html2md: Convert HTML to Markdown
• sanitizeHTML: Sanitize HTML
• normalizeArticleHTML: Normalize article HTML
• normalizeCommentHTML: Normalize comment HTML

import {
  md2html,
  html2md,
  sanitizeHTML,
  normalizeArticleHTML,
  normalizeCommentHTML,
} from '@matters/matters-editor'

const html = md2html('**hello, world**')
const markdown = html2md(html)

const sanitizedHTML = sanitizeHTML('<script>alert("hello, world")</script>')
const articleHTML = normalizeArticleHTML('<p>hello, world</p>')
const comemntHTML = normalizeCommentHTML('<p>hello, world</p>')

Formats

Below formats are supported to convert between Markdown and HTML:

• Headings (<h1> to <h6>) <-> # to ######;
• Bold (<bold>) <-> **;
• Italic (<em>) <-> _;
• Strikethrough (<s>) <-> ~~;
• Underline (<u>) -> **;
• Code (<code>) <-> `code`;
• Code Block (<pre>) <-> ```;
• Blockquote (<blockquote>) <-> >;
• Line Breaks (<br>) <-> \;
• Horizontal Line (<hr>) <-> ---;
• Ordered List (<li>) <-> 1. ABC \n 2. ABC \n 3. ABC;
• Unordered List (<ul>) <-> * ABC \n * ABC \n * ABC;
• Link (<a>) <-> [example.com](https://example.com);
• Image (<img>) <-> ![alt text](https://example.com/a.jpg "title");
• Figure (<figure>) <-> Raw <figure>;

Examples

Try HTML <=> Markdowns converters in CLI:

1. Put original HTML file into ./examples/original
2. Run npm run build:examples
3. Markdown and HTML (from Markdown) are outputted to ./examples/markdown and .examples/html

Build demo:

npm run demo:transformers

Or try live demo: https://thematters.github.io/matters-editor/transfomers

Benchmark

npm run benchmark

Results are outputted to ./benchmark/results