Typist

The mighty Tiptap-based rich-text editor that powers Doist products.

Rich text editorReact
Doist/typisttypist.doist.dev@doist/typist

README


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.



GitHub: CI Validation
npm Version
npm Bundle Size (minified)
npm Downloads (monthly)

semantic-release: Conventional Commits
Contributor Covenant
License: MIT


Installation


  1. ```sh
  2. npm install --save @doist/typist
  3. ```

Peer Dependencies


If you are using npm 7+ and the legacy-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:

  1. ```sh
  2. npm info @doist/typist peerDependencies --json \
  3.     | command sed 's/[\{\},]//g ; s/: /@/g' \
  4.     | xargs npm install --save
  5. ```

Usage


  1. ```tsx
  2. import { TypistEditor, RichTextKit } from '@doist/typist'

  4. function TypistEditorContainer({ content }) {
  5.     return (
  6.         <TypistEditor
  7.             placeholder="A full rich-text editor, be creative…"
  8.             content={content}
  9.             extensions={[RichTextKit]}
  10.         />
  11.     )
  12. }
  13. ```

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.