Typist is the mighty Tiptap-based rich-text editor React component that powers Doist products, which can also be used for displaying content in a read-only fashion. Typist also supports a plain-text mode, and comes with HTML/Markdown serializers.

Note

This project is not attempting to be an all-purpose rich-text editor. Whilst everyone is welcome to fork or use this package in their own products, development decisions are centered around Doist product requirements.

Installation

npm install --save @doist/typist

Usage

import { TypistEditor, RichTextKit } from '@doist/typist'

function TypistEditorContainer({ content }) {
    return (
        <TypistEditor
            placeholder="A full rich-text editor, be creative…"
            content={content}
            extensions={[RichTextKit]}
        />
    )
}

Note

content, extensions, and placeholder are initialization-only: they're read when the editor first mounts, and later changes to these props are ignored. See the Component Lifecycle documentation for how to handle runtime changes.

If you're looking for additional documentation, in-depth examples, or a live demo, please check out our Storybook.

Resources

A curated list of open-source rich-text editors powered by Tiptap that we can draw inspiration from:

• GitLab's content editor:
  https://gitlab.com/gitlab-org/gitlab/-/tree/master/app/assets/javascripts/content_editor

Contributing

If you're interested in contributing code and/or documentation, please read our contributing guide.

License

The use of this source code is governed by an MIT-style license that can be found in the LICENSE file.