BuhayovA / react-notion-wysiwyg

Notion-style WYSIWYG editor

This library is in active development!

Updates are released almost every day, and I hope it will soon work relatively stable and have a convenient API.

Your feedbacks is highly important to us, help make this product better.

This is my first experience in library development, so some errors or improvements might take time, but ultimately they will be addressed, as we are constantly learning! I'll also be glad to welcome contributors!

DEMO

Install

yarn add react-notion-wysiwyg

or

npm install --save react-notion-wysiwyg

Use and Setup

import { Editor } from 'react-notion-wysiwyg';

Params:

Prop	Type	Description	Default
editable(optional)	boolean	This property is used to change the editor mode from "preview" to "edit" mode.	true
mode(optional)	light or dark	This prop is used to change the editor theme palette.	light
defaultValue(optional)	JSONContent or string	The default value to use for the editor.	defaultEditorContent
onUpdate	(editor: EditorType) => void	A callback function that is called whenever the editor is updated	() => {}
onUploadImage	(file: File) => string or Promise<string>	A callback function that is called whenever the image upload	() => {}

Tech Stack

• Tiptap
• TailwindCSS
• Cal Sans

License

Licensed under the MIT license