Gennote is a free block-style editor based on Tiptap.

Installation

Gennote is styled editor with TailwindCSS, so you should install it to sync with the editor.

To install Gennote for React, you can run it:

npm i @lechihuy/gennote-react

Usage

This is a demo that use Gennote editor in a Next.js project.

import React from 'react'
import '@gennote/react/dist/styles/gennote.css'
import { Gennote, useGennote, Image } from '@lechihuy/gennote-react'

export default function Home() {
  let content = '<p>Hello world</p>'

  const editor = useGennote({
    content,
    extensions: {
      image: Image.configure({
        upload: {
          config: (file: File) => ({
            url: 'https://api.imgbb.com/1/upload',
            method: 'POST',
            params: { key: '********' },
            headers: { 'Content-Type': 'multipart/form-data' },
            data: { image: file }
          }),
          imageUrlResolver: (res) => res.data.data.image.url
        }
      })
    }
  })

  if (!editor) return null

  return (
    <div className="p-5 dark:bg-zinc-900 dark:prose-invert max-w-full min-h-screen">
      <Gennote editor={editor} />
    </div>
  )
}

Demo

You can try the editor here.