<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>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/typistPeer Dependencies
If you are using npm 7+ and thelegacy-peer-deps options is not enabled, peer dependencies should have been automatically installed for you with the command above. Otherwise, you can install them with:npm info @doist/typist peerDependencies --json \
| command sed 's/[\{\},]//g ; s/: /@/g' \
| xargs npm install --saveUsage
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