@tiptap/react 2.1.0-rc.8 → 2.1.0

package/dist/packages/react/src/index.d.ts

@@ -1,10 +1,11 @@
-export * from './BubbleMenu';
-export { Editor } from './Editor';
-export * from './EditorContent';
-export * from './FloatingMenu';
-export * from './NodeViewContent';
-export * from './NodeViewWrapper';
-export * from './ReactNodeViewRenderer';
-export * from './ReactRenderer';
-export * from './useEditor';
+export * from './BubbleMenu.js';
+export * from './Context.js';
+export { Editor } from './Editor.js';
+export * from './EditorContent.js';
+export * from './FloatingMenu.js';
+export * from './NodeViewContent.js';
+export * from './NodeViewWrapper.js';
+export * from './ReactNodeViewRenderer.js';
+export * from './ReactRenderer.js';
+export * from './useEditor.js';
 export * from '@tiptap/core';

package/dist/packages/react/src/useEditor.d.ts

@@ -1,4 +1,4 @@
 import { EditorOptions } from '@tiptap/core';
 import { DependencyList } from 'react';
-import { Editor } from './Editor';
+import { Editor } from './Editor.js';
 export declare const useEditor: (options?: Partial<EditorOptions>, deps?: DependencyList) => Editor | null;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/react",
   "description": "React components for tiptap",
-  "version": "2.1.0-rc.8",
+  "version": "2.1.0",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -29,14 +29,14 @@
     "dist"
   ],
   "dependencies": {
-    "@tiptap/extension-bubble-menu": "^2.1.0-rc.8",
-    "@tiptap/extension-floating-menu": "^2.1.0-rc.8"
+    "@tiptap/extension-bubble-menu": "^2.1.0",
+    "@tiptap/extension-floating-menu": "^2.1.0"
   },
   "devDependencies": {
-    "@tiptap/core": "^2.1.0-rc.8",
-    "@tiptap/pm": "^2.1.0-rc.8",
-    "@types/react": "^18.0.1",
-    "@types/react-dom": "^18.0.0",
+    "@tiptap/core": "^2.1.0",
+    "@tiptap/pm": "^2.1.0",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

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/Editor.ts

@@ -1,8 +1,8 @@
 import { Editor as CoreEditor } from '@tiptap/core'
 import React from 'react'
 
-import { EditorContentProps, EditorContentState } from './EditorContent'
-import { ReactRenderer } from './ReactRenderer'
+import { EditorContentProps, EditorContentState } from './EditorContent.js'
+import { ReactRenderer } from './ReactRenderer.js'
 
 type ContentComponent = React.Component<EditorContentProps, EditorContentState> & {
   setRenderer(id: string, renderer: ReactRenderer): void;

package/src/EditorContent.tsx

@@ -1,8 +1,8 @@
 import React, { HTMLProps } from 'react'
 import ReactDOM, { flushSync } from 'react-dom'
 
-import { Editor } from './Editor'
-import { ReactRenderer } from './ReactRenderer'
+import { Editor } from './Editor.js'
+import { ReactRenderer } from './ReactRenderer.js'
 
 const Portals: React.FC<{ renderers: Record<string, ReactRenderer> }> = ({ renderers }) => {
   return (
@@ -147,4 +147,14 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
   }
 }
 
-export const EditorContent = React.memo(PureEditorContent)
+// EditorContent should be re-created whenever the Editor instance changes
+const EditorContentWithKey = (props: EditorContentProps) => {
+  const key = React.useMemo(() => {
+    return Math.floor(Math.random() * 0xFFFFFFFF).toString()
+  }, [props.editor])
+
+  // Can't use JSX here because it conflicts with the type definition of Vue's JSX, so use createElement
+  return React.createElement(PureEditorContent, { key, ...props })
+}
+
+export const EditorContent = React.memo(EditorContentWithKey)

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/NodeViewContent.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { useReactNodeView } from './useReactNodeView'
+import { useReactNodeView } from './useReactNodeView.js'
 
 export interface NodeViewContentProps {
   [key: string]: any,

package/src/NodeViewWrapper.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { useReactNodeView } from './useReactNodeView'
+import { useReactNodeView } from './useReactNodeView.js'
 
 export interface NodeViewWrapperProps {
   [key: string]: any,

package/src/ReactNodeViewRenderer.tsx

@@ -10,9 +10,9 @@ import { Node as ProseMirrorNode } from '@tiptap/pm/model'
 import { Decoration, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'
 import React from 'react'
 
-import { Editor } from './Editor'
-import { ReactRenderer } from './ReactRenderer'
-import { ReactNodeViewContext, ReactNodeViewContextProps } from './useReactNodeView'
+import { Editor } from './Editor.js'
+import { ReactRenderer } from './ReactRenderer.js'
+import { ReactNodeViewContext, ReactNodeViewContextProps } from './useReactNodeView.js'
 
 export interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
   update:
@@ -99,6 +99,9 @@ class ReactNodeView extends NodeView<
 
     const { className = '' } = this.options
 
+    this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this)
+    this.editor.on('selectionUpdate', this.handleSelectionUpdate)
+
     this.renderer = new ReactRenderer(ReactNodeViewProvider, {
       editor: this.editor,
       props,
@@ -127,6 +130,16 @@ class ReactNodeView extends NodeView<
     return this.contentDOMElement
   }
 
+  handleSelectionUpdate() {
+    const { from, to } = this.editor.state.selection
+
+    if (from <= this.getPos() && to >= this.getPos() + this.node.nodeSize) {
+      this.selectNode()
+    } else {
+      this.deselectNode()
+    }
+  }
+
   update(node: ProseMirrorNode, decorations: DecorationWithType[]) {
     const updateProps = (props?: Record<string, any>) => {
       this.renderer.updateProps(props)
@@ -178,6 +191,7 @@ class ReactNodeView extends NodeView<
 
   destroy() {
     this.renderer.destroy()
+    this.editor.off('selectionUpdate', this.handleSelectionUpdate)
     this.contentDOMElement = null
   }
 }

package/src/ReactRenderer.tsx

@@ -1,7 +1,7 @@
 import { Editor } from '@tiptap/core'
 import React from 'react'
 
-import { Editor as ExtendedEditor } from './Editor'
+import { Editor as ExtendedEditor } from './Editor.js'
 
 function isClassComponent(Component: any) {
   return !!(

package/src/index.ts

@@ -1,10 +1,11 @@
-export * from './BubbleMenu'
-export { Editor } from './Editor'
-export * from './EditorContent'
-export * from './FloatingMenu'
-export * from './NodeViewContent'
-export * from './NodeViewWrapper'
-export * from './ReactNodeViewRenderer'
-export * from './ReactRenderer'
-export * from './useEditor'
+export * from './BubbleMenu.js'
+export * from './Context.js'
+export { Editor } from './Editor.js'
+export * from './EditorContent.js'
+export * from './FloatingMenu.js'
+export * from './NodeViewContent.js'
+export * from './NodeViewWrapper.js'
+export * from './ReactNodeViewRenderer.js'
+export * from './ReactRenderer.js'
+export * from './useEditor.js'
 export * from '@tiptap/core'

package/src/useEditor.ts

@@ -6,7 +6,7 @@ import {
   useState,
 } from 'react'
 
-import { Editor } from './Editor'
+import { Editor } from './Editor.js'
 
 function useForceUpdate() {
   const [, setValue] = useState(0)
@@ -113,10 +113,15 @@ export const useEditor = (options: Partial<EditorOptions> = {}, deps: Dependency
     })
 
     return () => {
-      instance.destroy()
       isMounted = false
     }
   }, deps)
 
+  useEffect(() => {
+    return () => {
+      editor?.destroy()
+    }
+  }, [editor])
+
   return editor
 }