React context implementation for Tiptap

[bdbch]

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 components
• useCurrentEditor(): Is used to get the current wrapping editor

so instead of doing

const MyEditor = () => {
  const editor = useEditor({
    extensions: [...],
    content: `...`,
  })

  if (!editor) {
    return null
  }

  return (
    <>
      <EditorContent editor={editor} />
      <MyFloatingMenu editor={editor} />
      <MyBubbleMenu editor={editor} />
    </>
  )
}

you can now do

const MyEditor = () => {
  return (
    <EditorProvider extensions={[...]} content={`...`}>
      <MyFloatingMenu />
      <MyBubbleMenu />
    </EditorProvider>
  )
}

How did you accomplish your changes

1. Created a Context, hooks and a wrapping provider component
2. Added some functionality to the FloatingMenu and BubbleMenu to consume the provider if no editor is provided via props

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

• The changes are not breaking the editor
• Added tests where possible
• Followed the guidelines
• Fixed linting issues

[netlify]

✅ Deploy Preview for tiptap-embed ready!

Name	Link
🔨 Latest commit	9201067
🔍 Latest deploy log	https://app.netlify.com/sites/tiptap-embed/deploys/64ad2ed65cc17f0008fc8613
😎 Deploy Preview	https://deploy-preview-4192--tiptap-embed.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[romellem]

What purpose is the <EditorConsumer> serving in the <EditorProvider>? That component already has the editor instance - it came from the useEditor() call, and in fact we are already passing it to the EditorContext.Provider.

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!

[bdbch]

You can pass in the editor instance from useEditor like this, yes. The consumer is only used to avoid prop drilling with the editor prop deeper in the component tree. (Similar how you can get the editor down the component tree via const { editor } = useCurrentEditor.