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

react-notion-wysiwyg's Issues

Editor overriding root CSS styles of webpage

Describe the bug
The notion editor is overriding my CSS styles.
When I visit a page on my website which has the Editor component, all my custom CSS styles are overriden.

To Reproduce
Steps to reproduce the behavior:

1. Import Editor component in either read or write mode
2. On that same page (and also by going to other pages afterwards) the styles for elements like H1s H2s and other HTML elements like buttons, etc.
3. All those elements will have their styles overridden. Its a lot of !important to add, too many to be viable.

Expected behavior
The Editor component should not override any styles. The styling should be scoped to a more specific CSS id/class.

Possible Solution

Scope the styles to a container id/class like "#notion-editor"

Screenshots
Description is self-explanatory.

Additional context
none

Your Environment

• Next.js: 14.2.5
• React: 18
• react-notion-wysiwyg 0.1.13
• Browser: chrome
• Version: latest
• Operating System: MacOS Sequoia:
• Other relevant information: