BC Editor

BC Editor is a Prosemirror based text editor with markdown shortcuts and serialization. It is highly inspired by:

• Rich Markdown Editor (the editor that powers Outline)

• The editor inside the Linear app

Features

It contains common blocks like:

1. Bullet and ordered lists

2. Blockquotes

3. Todo lists

4. Code blocks

It contains also several marks, like;

• bold

• italics

• strikethrough

• links

Getting started

The Editor is available as an npm package:

$ npm i @binarycapsule/editor

Peer dependencies:

$ npm i react react-dom @binarycapsule/ui-capsules

Usage

As a minimal implementation, pass a ref to the Editor. The editor's value can be accessed through it:

export const App = () => {
  const editorRef = useRef<EditorRef>(null);

  return (
    <div>
      <button
        onClick={() => {
          // Read the value from the ref
          console.log(editorRef.current?.value);
        }}
      >
        Save
      </button>

      <Editor ref={editorRef} />
    </div>
  );
};

Check the source of this page for a more complete example.