@tiptap/react 2.1.0-rc.11 → 2.1.0-rc.13

package/src/BubbleMenu.tsx

@@ -1,9 +1,11 @@
 import { BubbleMenuPlugin, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
 import React, { useEffect, useState } from 'react'
 
+import { useCurrentEditor } from './Context.js'
+
 type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
 
-export type BubbleMenuProps = Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'> & {
+export type BubbleMenuProps = Omit<Optional<BubbleMenuPluginProps, 'pluginKey' | 'editor'>, 'element'> & {
   className?: string;
   children: React.ReactNode;
   updateDelay?: number;
@@ -11,13 +13,14 @@ export type BubbleMenuProps = Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>,
 
 export const BubbleMenu = (props: BubbleMenuProps) => {
   const [element, setElement] = useState<HTMLDivElement | null>(null)
+  const { editor: currentEditor } = useCurrentEditor()
 
   useEffect(() => {
     if (!element) {
       return
     }
 
-    if (props.editor.isDestroyed) {
+    if (props.editor?.isDestroyed || currentEditor?.isDestroyed) {
       return
     }
 
@@ -25,18 +28,25 @@ export const BubbleMenu = (props: BubbleMenuProps) => {
       pluginKey = 'bubbleMenu', editor, tippyOptions = {}, updateDelay, shouldShow = null,
     } = props
 
+    const menuEditor = editor || currentEditor
+
+    if (!menuEditor) {
+      console.warn('BubbleMenu component is not rendered inside of an editor component or does not have editor prop.')
+      return
+    }
+
     const plugin = BubbleMenuPlugin({
       updateDelay,
-      editor,
+      editor: menuEditor,
       element,
       pluginKey,
       shouldShow,
       tippyOptions,
     })
 
-    editor.registerPlugin(plugin)
-    return () => editor.unregisterPlugin(pluginKey)
-  }, [props.editor, element])
+    menuEditor.registerPlugin(plugin)
+    return () => menuEditor.unregisterPlugin(pluginKey)
+  }, [props.editor, currentEditor, element])
 
   return (
     <div ref={setElement} className={props.className} style={{ visibility: 'hidden' }}>

package/src/Context.tsx

@@ -0,0 +1,47 @@
+import { EditorOptions } from '@tiptap/core'
+import React, { createContext, ReactNode, useContext } from 'react'
+
+import { Editor } from './Editor.js'
+import { EditorContent } from './EditorContent.js'
+import { useEditor } from './useEditor.js'
+
+export type EditorContextValue = {
+  editor: Editor | null;
+}
+
+export const EditorContext = createContext<EditorContextValue>({
+  editor: null,
+})
+
+export const EditorConsumer = EditorContext.Consumer
+
+export const useCurrentEditor = () => useContext(EditorContext)
+
+export type EditorProviderProps = {
+  children: ReactNode;
+  slotBefore?: ReactNode;
+  slotAfter?: ReactNode;
+} & Partial<EditorOptions>
+
+export const 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>
+  )
+}

package/src/FloatingMenu.tsx

@@ -3,22 +3,25 @@ import React, {
   useEffect, useState,
 } from 'react'
 
+import { useCurrentEditor } from './Context.js'
+
 type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
 
-export type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element'> & {
+export type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey' | 'editor'>, 'element'> & {
   className?: string,
   children: React.ReactNode
 }
 
 export const FloatingMenu = (props: FloatingMenuProps) => {
   const [element, setElement] = useState<HTMLDivElement | null>(null)
+  const { editor: currentEditor } = useCurrentEditor()
 
   useEffect(() => {
     if (!element) {
       return
     }
 
-    if (props.editor.isDestroyed) {
+    if (props.editor?.isDestroyed || currentEditor?.isDestroyed) {
       return
     }
 
@@ -29,18 +32,26 @@ export const FloatingMenu = (props: FloatingMenuProps) => {
       shouldShow = null,
     } = props
 
+    const menuEditor = editor || currentEditor
+
+    if (!menuEditor) {
+      console.warn('FloatingMenu component is not rendered inside of an editor component or does not have editor prop.')
+      return
+    }
+
     const plugin = FloatingMenuPlugin({
       pluginKey,
-      editor,
+      editor: menuEditor,
       element,
       tippyOptions,
       shouldShow,
     })
 
-    editor.registerPlugin(plugin)
-    return () => editor.unregisterPlugin(pluginKey)
+    menuEditor.registerPlugin(plugin)
+    return () => menuEditor.unregisterPlugin(pluginKey)
   }, [
     props.editor,
+    currentEditor,
     element,
   ])
 

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from './BubbleMenu.js'
+export * from './Context.js'
 export { Editor } from './Editor.js'
 export * from './EditorContent.js'
 export * from './FloatingMenu.js'