@lechihuy/gennote-react v0.0.68
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.
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago