@binarycapsule/editor NPM

BC Editor

🚨 Breakable toy - Do not use in real projects 🚨

This library is a breakable toy. New versions will often contain breaking changes, even for non-major releases.

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

Visit the demo at editor.binarycapsule.tech.

Getting started

The Editor is available as an npm package:

npm i @binarycapsule/editor

Peer dependencies:

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

Note: this package is meant to be used inside a app already setup with the ui-capsules package.

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 = React.useRef<EditorRef>(null);

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

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