# @matters/matters-editor

> Editor for matters.news

Latest version **0.3.3** (published 2026-07-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @matters/matters-editor
pnpm add @matters/matters-editor
yarn add @matters/matters-editor
bun add @matters/matters-editor
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.3.3 |
| Published | 2026-07-02 |
| First published | 2018-11-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18.19 <25.0.0 |
| Dependencies | 45 |
| Unpacked size | 8.2 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 31 |
| Author | https://github.com/thematters |
| Maintainers | guoliu11, devformatters, matters_npm, mashbean-matters |

## Links

- npm: https://www.npmjs.com/package/@matters/matters-editor
- Repository: https://github.com/thematters/matters-editor
- Issues: https://github.com/thematters/matters-editor/issues
- npm.io page: https://npm.io/package/@matters/matters-editor

## Dependencies (45)

- [unified](https://npm.io/package/unified.md) ^11.0.5
- [zeed-dom](https://npm.io/package/zeed-dom.md) ^0.13.3
- [linkifyjs](https://npm.io/package/linkifyjs.md) ^4.1.3
- [validator](https://npm.io/package/validator.md) ^13.12.0
- [@tiptap/pm](https://npm.io/package/@tiptap/pm.md) 2.8.0
- [rehype-raw](https://npm.io/package/rehype-raw.md) ^7.0.0
- [@tiptap/core](https://npm.io/package/@tiptap/core.md) 2.8.0
- [rehype-parse](https://npm.io/package/rehype-parse.md) ^9.0.0
- [remark-parse](https://npm.io/package/remark-parse.md) ^11.0.0
- [@tiptap/react](https://npm.io/package/@tiptap/react.md) 2.8.0
- [rehype-format](https://npm.io/package/rehype-format.md) ^5.0.0
- [rehype-remark](https://npm.io/package/rehype-remark.md) ^10.0.0
- [remark-breaks](https://npm.io/package/remark-breaks.md) ^4.0.0
- [remark-rehype](https://npm.io/package/remark-rehype.md) ^11.1.0
- [rehype-rewrite](https://npm.io/package/rehype-rewrite.md) ^4.0.2
- [rehype-sanitize](https://npm.io/package/rehype-sanitize.md) ^6.0.0
- [rehype-stringify](https://npm.io/package/rehype-stringify.md) ^10.0.0
- [remark-directive](https://npm.io/package/remark-directive.md) ^3.0.0
- [remark-stringify](https://npm.io/package/remark-stringify.md) ^11.0.0
- [hast-util-to-html](https://npm.io/package/hast-util-to-html.md) ^9.0.1
- [@tiptap/suggestion](https://npm.io/package/@tiptap/suggestion.md) 2.8.0
- [rehype-external-links](https://npm.io/package/rehype-external-links.md) ^3.0.0
- [@tiptap/extension-text](https://npm.io/package/@tiptap/extension-text.md) 2.8.0
- [remark-directive-rehype](https://npm.io/package/remark-directive-rehype.md) ^0.4.2
- [@tiptap/extension-strike](https://npm.io/package/@tiptap/extension-strike.md) 2.8.0
- [@tiptap/extension-heading](https://npm.io/package/@tiptap/extension-heading.md) 2.8.0
- [@tiptap/extension-history](https://npm.io/package/@tiptap/extension-history.md) 2.8.0
- [@tiptap/extension-document](https://npm.io/package/@tiptap/extension-document.md) 2.8.0
- [@tiptap/extension-gapcursor](https://npm.io/package/@tiptap/extension-gapcursor.md) 2.8.0
- [@tiptap/extension-list-item](https://npm.io/package/@tiptap/extension-list-item.md) 2.8.0
- [@tiptap/extension-paragraph](https://npm.io/package/@tiptap/extension-paragraph.md) 2.8.0
- [@tiptap/extension-blockquote](https://npm.io/package/@tiptap/extension-blockquote.md) 2.8.0
- [@tiptap/extension-code-block](https://npm.io/package/@tiptap/extension-code-block.md) 2.8.0
- [@tiptap/extension-dropcursor](https://npm.io/package/@tiptap/extension-dropcursor.md) ^2.8.0
- [@tiptap/extension-hard-break](https://npm.io/package/@tiptap/extension-hard-break.md) 2.8.0
- [@tiptap/extension-text-style](https://npm.io/package/@tiptap/extension-text-style.md) ^2.8.0
- [mdast-util-gfm-strikethrough](https://npm.io/package/mdast-util-gfm-strikethrough.md) ^2.0.0
- [@tiptap/extension-bubble-menu](https://npm.io/package/@tiptap/extension-bubble-menu.md) ^2.8.0
- [@tiptap/extension-bullet-list](https://npm.io/package/@tiptap/extension-bullet-list.md) 2.8.0
- [@tiptap/extension-placeholder](https://npm.io/package/@tiptap/extension-placeholder.md) 2.8.0
- [@tiptap/extension-ordered-list](https://npm.io/package/@tiptap/extension-ordered-list.md) 2.8.0
- [@tiptap/extension-floating-menu](https://npm.io/package/@tiptap/extension-floating-menu.md) ^2.8.0
- [@tiptap/extension-horizontal-rule](https://npm.io/package/@tiptap/extension-horizontal-rule.md) 2.8.0
- [micromark-util-combine-extensions](https://npm.io/package/micromark-util-combine-extensions.md) ^2.0.0
- [micromark-extension-gfm-strikethrough](https://npm.io/package/micromark-extension-gfm-strikethrough.md) ^2.1.0

## Recent versions

- 0.3.3 (latest) — 2026-07-02
- 0.3.1 — 2024-10-13
- 0.3.1-alpha.0 — 2024-08-21
- 0.3.0 — 2024-08-08
- 0.3.0-alpha.4 — 2024-08-08
- 0.3.0-alpha.3 — 2024-08-04
- 0.3.0-alpha.2 — 2024-08-04
- 0.3.0-alpha.1 — 2024-08-04
- 0.3.0-alpha.0 — 2024-08-01
- 0.2.5-alpha.9 — 2024-07-08
- 0.2.5-alpha.8 — 2024-06-18
- 0.2.5-alpha.7 — 2024-06-14
- 0.2.5-alpha.6 — 2024-06-14
- 0.2.5-alpha.5 — 2024-06-14
- 0.2.5-alpha.4 — 2024-06-09
- … 109 more at https://npm.io/package/@matters/matters-editor/versions

## README

# Matters Editor

## Installation

```bash
npm i @matters/matters-editor
```

## Development

```bash
# dev
npm run dev

# build
npm run build

# test
npm run test
```

## Editor

The editor core, built with [TipTap](https://tiptap.dev) & [ProseMirror](https://prosemirror.net/), using by [thematters/matters-web](https://github.com/thematters/matters-web).

```tsx
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](https://github.com/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

```ts
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:

```bash
npm run demo:transformers
```

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

### Benchmark

```bash
npm run benchmark
```

Results are outputted to `./benchmark/results`

---
_Source: https://npm.io/package/@matters/matters-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._