0.3.1 • Published 9 months ago

@matters/matters-editor v0.3.1

Weekly downloads
72
License
MIT
Repository
github
Last release
9 months ago

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

0.3.1

9 months ago

0.3.0

11 months ago

0.3.0-alpha.2

11 months ago

0.3.0-alpha.3

11 months ago

0.3.0-alpha.4

11 months ago

0.3.0-alpha.0

11 months ago

0.3.0-alpha.1

11 months ago

0.3.1-alpha.0

11 months ago

0.2.5-alpha.1

1 year ago

0.2.5-alpha.0

1 year ago

0.2.5-alpha.5

1 year ago

0.2.5-alpha.4

1 year ago

0.2.5-alpha.3

1 year ago

0.2.5-alpha.2

1 year ago

0.2.5-alpha.9

1 year ago

0.2.5-alpha.8

1 year ago

0.2.5-alpha.7

1 year ago

0.2.5-alpha.6

1 year ago

0.2.3

1 year ago

0.2.4

1 year ago

0.2.3-alpha.4

1 year ago

0.2.3-alpha.3

1 year ago

0.2.3-alpha.2

1 year ago

0.2.3-alpha.1

1 year ago

0.2.3-alpha.0

1 year ago

0.2.2-alpha.1

2 years ago

0.2.1-alpha.0

2 years ago

0.2.1-alpha.1

2 years ago

0.2.1

2 years ago

0.2.2

2 years ago

0.2.0-alpha.56

2 years ago

0.2.0

2 years ago

0.2.0-alpha.49

2 years ago

0.2.0-alpha.48

2 years ago

0.2.0-alpha.47

2 years ago

0.2.0-alpha.46

2 years ago

0.2.0-alpha.45

2 years ago

0.2.0-alpha.44

2 years ago

0.2.0-alpha.43

2 years ago

0.2.0-alpha.42

2 years ago

0.2.0-alpha.41

2 years ago

0.2.0-alpha.40

2 years ago

0.2.0-alpha.55

2 years ago

0.2.0-alpha.54

2 years ago

0.2.0-alpha.53

2 years ago

0.2.0-alpha.52

2 years ago

0.2.0-alpha.51

2 years ago

0.2.0-alpha.50

2 years ago

0.1.29-alpha.0

2 years ago

0.1.28

2 years ago

0.2.0-alpha.39

2 years ago

0.2.0-alpha.38

2 years ago

0.2.0-alpha.37

2 years ago

0.2.0-alpha.36

2 years ago

0.2.0-alpha.35

2 years ago

0.2.0-alpha.34

2 years ago

0.2.0-alpha.33

2 years ago

0.2.0-alpha.32

2 years ago

0.2.0-alpha.19

2 years ago

0.2.0-alpha.18

2 years ago

0.2.0-alpha.17

2 years ago

0.2.0-alpha.16

2 years ago

0.2.0-alpha.15

2 years ago

0.2.0-alpha.14

2 years ago

0.2.0-alpha.12

2 years ago

0.2.0-alpha.11

2 years ago

0.2.0-alpha.10

2 years ago

0.2.0-alpha.29

2 years ago

0.2.0-alpha.28

2 years ago

0.2.0-alpha.27

2 years ago

0.2.0-alpha.26

2 years ago

0.2.0-alpha.25

2 years ago

0.2.0-alpha.24

2 years ago

0.2.0-alpha.23

2 years ago

0.2.0-alpha.22

2 years ago

0.2.0-alpha.8

2 years ago

0.2.0-alpha.21

2 years ago

0.2.0-alpha.7

2 years ago

0.2.0-alpha.20

2 years ago

0.2.0-alpha.9

2 years ago

0.2.0-alpha.2

2 years ago

0.2.0-alpha.1

2 years ago

0.2.0-alpha.4

2 years ago

0.2.0-alpha.3

2 years ago

0.2.0-alpha.6

2 years ago

0.2.0-alpha.5

2 years ago

0.2.0-alpha.31

2 years ago

0.2.0-alpha.30

2 years ago

0.1.27-alpha.0

3 years ago

0.1.27-alpha.3

2 years ago

0.1.27-alpha.1

3 years ago

0.1.27-alpha.2

2 years ago

0.1.25

4 years ago

0.1.26

4 years ago

0.1.23

4 years ago

0.1.24

4 years ago

0.1.22

4 years ago

0.1.21

4 years ago

0.1.20

4 years ago

0.1.19

4 years ago

0.1.18

4 years ago

0.1.17

5 years ago

0.1.16

5 years ago

0.1.15

5 years ago

0.1.14

5 years ago

0.1.13

5 years ago

0.1.12

5 years ago

0.1.11

5 years ago

0.1.10

5 years ago

0.1.9

5 years ago

0.1.8

6 years ago

0.1.7

6 years ago

0.1.6

6 years ago

0.1.5

6 years ago

0.1.4

6 years ago

0.1.3

6 years ago

0.1.2

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

7 years ago

1.0.0

7 years ago