-
-
Notifications
You must be signed in to change notification settings - Fork 2.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
React context implementation for Tiptap #4192
Conversation
✅ Deploy Preview for tiptap-embed ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
* feat(react): add react context implementation * chore(docs): updated react docs & demos for new context * chore(docs): added slot docs * chore(docs): fix typo * chore(react): use correct editor package * fix typo in react installation docs * update react typings to latest version * fix types --------- Co-authored-by: bdbch <dominik@bdbch.com>
What purpose is the That seems unnecessary? That is, can we go from this export function EditorProvider({
children, slotAfter, slotBefore, ...editorOptions
}: EditorProviderProps) {
const editor = useEditor(editorOptions)
if (!editor) {
return null
}
return (
<EditorContext.Provider value={{ editor }}>
{slotBefore}
<EditorConsumer>
{({ editor: currentEditor }) => (
<EditorContent editor={currentEditor} />
)}
</EditorConsumer>
{children}
{slotAfter}
</EditorContext.Provider>
)
} To this? export function EditorProvider({
children, slotAfter, slotBefore, ...editorOptions
}: EditorProviderProps) {
const editor = useEditor(editorOptions)
if (!editor) {
return null
}
return (
<EditorContext.Provider value={{ editor }}>
{slotBefore}
{/* Instead use `editor` directly */}
<EditorContent editor={editor} />
{children}
{slotAfter}
</EditorContext.Provider>
)
} Unless there is something I'm missing. Thanks! |
You can pass in the editor instance from |
Please describe your changes
This PR adds few new features to the React package - mainly:
<EditorProvider />
: This now creates a react context and the editor instance and passes it through to child componentsuseCurrentEditor()
: Is used to get the current wrapping editorso instead of doing
you can now do
How did you accomplish your changes
How have you tested your changes
I tried the default demo and a demo with custom node views and both worked fine.
How can we verify your changes
Check out the deployment preview - if you can't find a difference then everything should be fine.
Checklist