Typist

<div align="center"> <h1> <picture> <source media="(prefers-color-scheme: dark)" srcSet="https://github.com/Doist/typist/blob/main/.github/assets/logo-dark.png?raw=true" /> <img src="https://github.com/Doist/typist/blob/main/.github/assets/logo-light.png?raw=true" /> </picture> </h1> </div>

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.

<div align="center">

</div>

Installation

shCopy
npm install --save @doist/typist

Usage

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

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

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.