Live Demo

https://clearluv-editor.vercel.app

How to use

pnpm add @clearluv/editor

API

| Property | Description | Type | Default |------------|---------------------------------------------------|---------------------------------------------------------------------------------------------------|---------| | classNames | Semantic DOM class | { root?: string; toolbar?: string; editor?: string } | / | | styles | Semantic DOM style | { root?: React.CSSProperties; toolbar?: React.CSSProperties; editor?: React.CSSProperties } | / | | content | editor content | string | "" | | autofocus | editor focus postion or type | "start" / "end" / "all" / number / boolean / null | / | | hiddenToast | is hidden toast | boolean | false | | onUploadFile | transform upload file, callback base64/upload url | ({type: "image", data: File}) => Promise | void | | onUpdate | get editor content when editor update | ({json, html, text}: {json: JSONContent; text: string; html: string; isEmpty: boolean;}) => void; | void |

Setting Up Locally

To run the app locally, you can run the following commands:

pnpm i
pnpm run build:cmp
pnpm run dev

Tech Stack

@clearluv/editor is built on the following stack:

• React.js – Framework
• Tiptap – Text editor
• Shadcn – UI
• RsBuild – Page build framework
• Tsup – Editor build framework
• Vercel – Deployments
• TailwindCSS – Styles

License

Licensed under the AGPL license.