@tiptap/react 3.0.0-next.0 → 3.0.0-next.2

package/src/Context.tsx

@@ -1,12 +1,14 @@
-import React, { createContext, ReactNode, useContext } from 'react'
+import { Editor } from '@tiptap/core'
+import React, {
+  createContext, HTMLAttributes, ReactNode, useContext, useMemo,
+} from 'react'
 
-import { Editor } from './Editor.js'
 import { EditorContent } from './EditorContent.js'
 import { useEditor, UseEditorOptions } from './useEditor.js'
 
 export type EditorContextValue = {
   editor: Editor | null;
-}
+};
 
 export const EditorContext = createContext<EditorContextValue>({
   editor: null,
@@ -23,7 +25,8 @@ export type EditorProviderProps = {
   children?: ReactNode;
   slotBefore?: ReactNode;
   slotAfter?: ReactNode;
-} & UseEditorOptions
+  editorContainerProps?: HTMLAttributes<HTMLDivElement>;
+} & UseEditorOptions;
 
 /**
  * This is the provider component for the editor.
@@ -31,20 +34,25 @@ export type EditorProviderProps = {
  * with `useCurrentEditor`.
  */
 export function EditorProvider({
-  children, slotAfter, slotBefore, ...editorOptions
+  children,
+  slotAfter,
+  slotBefore,
+  editorContainerProps = {},
+  ...editorOptions
 }: EditorProviderProps) {
   const editor = useEditor(editorOptions)
+  const contextValue = useMemo(() => ({ editor }), [editor])
 
   if (!editor) {
     return null
   }
 
   return (
-    <EditorContext.Provider value={{ editor }}>
+    <EditorContext.Provider value={contextValue}>
       {slotBefore}
       <EditorConsumer>
         {({ editor: currentEditor }) => (
-          <EditorContent editor={currentEditor} />
+          <EditorContent editor={currentEditor} {...editorContainerProps} />
         )}
       </EditorConsumer>
       {children}

package/src/Editor.ts

@@ -1,14 +1,13 @@
-import { Editor as CoreEditor } from '@tiptap/core'
-import React from 'react'
+import { Editor } from '@tiptap/core'
+import { ReactPortal } from 'react'
 
-import { EditorContentProps, EditorContentState } from './EditorContent.js'
 import { ReactRenderer } from './ReactRenderer.js'
 
-type ContentComponent = React.Component<EditorContentProps, EditorContentState> & {
+export type EditorWithContentComponent = Editor & { contentComponent?: ContentComponent | null }
+export type ContentComponent = {
   setRenderer(id: string, renderer: ReactRenderer): void;
   removeRenderer(id: string): void;
-}
-
-export class Editor extends CoreEditor {
-  public contentComponent: ContentComponent | null = null
+  subscribe: (callback: () => void) => () => void;
+  getSnapshot: () => Record<string, ReactPortal>;
+  getServerSnapshot: () => Record<string, ReactPortal>;
 }

package/src/EditorContent.tsx

@@ -1,9 +1,11 @@
+import { Editor } from '@tiptap/core'
 import React, {
   ForwardedRef, forwardRef, HTMLProps, LegacyRef, MutableRefObject,
 } from 'react'
-import ReactDOM, { flushSync } from 'react-dom'
+import ReactDOM from 'react-dom'
+import { useSyncExternalStore } from 'use-sync-external-store/shim'
 
-import { Editor } from './Editor.js'
+import { ContentComponent, EditorWithContentComponent } from './Editor.js'
 import { ReactRenderer } from './ReactRenderer.js'
 
 const mergeRefs = <T extends HTMLDivElement>(
@@ -20,12 +22,23 @@ const mergeRefs = <T extends HTMLDivElement>(
   }
 }
 
-const Portals: React.FC<{ renderers: Record<string, ReactRenderer> }> = ({ renderers }) => {
+/**
+ * This component renders all of the editor's node views.
+ */
+const Portals: React.FC<{ contentComponent: ContentComponent }> = ({
+  contentComponent,
+}) => {
+  // For performance reasons, we render the node view portals on state changes only
+  const renderers = useSyncExternalStore(
+    contentComponent.subscribe,
+    contentComponent.getSnapshot,
+    contentComponent.getServerSnapshot,
+  )
+
+  // This allows us to directly render the portals without any additional wrapper
   return (
     <>
-      {Object.entries(renderers).map(([key, renderer]) => {
-        return ReactDOM.createPortal(renderer.reactElement, renderer.element, key)
-      })}
+      {Object.values(renderers)}
     </>
   )
 }
@@ -35,22 +48,67 @@ export interface EditorContentProps extends HTMLProps<HTMLDivElement> {
   innerRef?: ForwardedRef<HTMLDivElement | null>;
 }
 
-export interface EditorContentState {
-  renderers: Record<string, ReactRenderer>;
+function getInstance(): ContentComponent {
+  const subscribers = new Set<() => void>()
+  let renderers: Record<string, React.ReactPortal> = {}
+
+  return {
+    /**
+     * Subscribe to the editor instance's changes.
+     */
+    subscribe(callback: () => void) {
+      subscribers.add(callback)
+      return () => {
+        subscribers.delete(callback)
+      }
+    },
+    getSnapshot() {
+      return renderers
+    },
+    getServerSnapshot() {
+      return renderers
+    },
+    /**
+     * Adds a new NodeView Renderer to the editor.
+     */
+    setRenderer(id: string, renderer: ReactRenderer) {
+      renderers = {
+        ...renderers,
+        [id]: ReactDOM.createPortal(renderer.reactElement, renderer.element, id),
+      }
+
+      subscribers.forEach(subscriber => subscriber())
+    },
+    /**
+     * Removes a NodeView Renderer from the editor.
+     */
+    removeRenderer(id: string) {
+      const nextRenderers = { ...renderers }
+
+      delete nextRenderers[id]
+      renderers = nextRenderers
+      subscribers.forEach(subscriber => subscriber())
+    },
+  }
 }
 
-export class PureEditorContent extends React.Component<EditorContentProps, EditorContentState> {
+export class PureEditorContent extends React.Component<
+  EditorContentProps,
+  { hasContentComponentInitialized: boolean }
+> {
   editorContentRef: React.RefObject<any>
 
   initialized: boolean
 
+  unsubscribeToContentComponent?: () => void
+
   constructor(props: EditorContentProps) {
     super(props)
     this.editorContentRef = React.createRef()
     this.initialized = false
 
     this.state = {
-      renderers: {},
+      hasContentComponentInitialized: Boolean((props.editor as EditorWithContentComponent | null)?.contentComponent),
     }
   }
 
@@ -63,7 +121,7 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
   }
 
   init() {
-    const { editor } = this.props
+    const editor = this.props.editor as EditorWithContentComponent | null
 
     if (editor && !editor.isDestroyed && editor.options.element) {
       if (editor.contentComponent) {
@@ -78,7 +136,27 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
         element,
       })
 
-      editor.contentComponent = this
+      editor.contentComponent = getInstance()
+
+      // Has the content component been initialized?
+      if (!this.state.hasContentComponentInitialized) {
+        // Subscribe to the content component
+        this.unsubscribeToContentComponent = editor.contentComponent.subscribe(() => {
+          this.setState(prevState => {
+            if (!prevState.hasContentComponentInitialized) {
+              return {
+                hasContentComponentInitialized: true,
+              }
+            }
+            return prevState
+          })
+
+          // Unsubscribe to previous content component
+          if (this.unsubscribeToContentComponent) {
+            this.unsubscribeToContentComponent()
+          }
+        })
+      }
 
       editor.createNodeViews()
 
@@ -86,43 +164,8 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
     }
   }
 
-  maybeFlushSync(fn: () => void) {
-    // Avoid calling flushSync until the editor is initialized.
-    // Initialization happens during the componentDidMount or componentDidUpdate
-    // lifecycle methods, and React doesn't allow calling flushSync from inside
-    // a lifecycle method.
-    if (this.initialized) {
-      flushSync(fn)
-    } else {
-      fn()
-    }
-  }
-
-  setRenderer(id: string, renderer: ReactRenderer) {
-    this.maybeFlushSync(() => {
-      this.setState(({ renderers }) => ({
-        renderers: {
-          ...renderers,
-          [id]: renderer,
-        },
-      }))
-    })
-  }
-
-  removeRenderer(id: string) {
-    this.maybeFlushSync(() => {
-      this.setState(({ renderers }) => {
-        const nextRenderers = { ...renderers }
-
-        delete nextRenderers[id]
-
-        return { renderers: nextRenderers }
-      })
-    })
-  }
-
   componentWillUnmount() {
-    const { editor } = this.props
+    const editor = this.props.editor as EditorWithContentComponent | null
 
     if (!editor) {
       return
@@ -136,6 +179,10 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
       })
     }
 
+    if (this.unsubscribeToContentComponent) {
+      this.unsubscribeToContentComponent()
+    }
+
     editor.contentComponent = null
 
     if (!editor.options.element.firstChild) {
@@ -158,7 +205,7 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
       <>
         <div ref={mergeRefs(innerRef, this.editorContentRef)} {...rest} />
         {/* @ts-ignore */}
-        <Portals renderers={this.state.renderers} />
+        {editor?.contentComponent && <Portals contentComponent={editor.contentComponent} />}
       </>
     )
   }
@@ -168,7 +215,8 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
 const EditorContentWithKey = forwardRef<HTMLDivElement, EditorContentProps>(
   (props: Omit<EditorContentProps, 'innerRef'>, ref) => {
     const key = React.useMemo(() => {
-      return Math.floor(Math.random() * 0xFFFFFFFF).toString()
+      return Math.floor(Math.random() * 0xffffffff).toString()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.editor])
 
     // Can't use JSX here because it conflicts with the type definition of Vue's JSX, so use createElement

package/src/FloatingMenu.tsx

@@ -1,77 +1,83 @@
 import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
-import React, {
-  useEffect, useRef,
-} from 'react'
+import React, { useEffect, useRef } from 'react'
 import { createPortal } from 'react-dom'
 
 import { useCurrentEditor } from './Context.js'
 
-type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
 
-export type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element' | 'editor'> & {
+export type FloatingMenuProps = Omit<
+  Optional<FloatingMenuPluginProps, 'pluginKey'>,
+  'element' | 'editor'
+> & {
   editor: FloatingMenuPluginProps['editor'] | null;
-  className?: string,
-  children: React.ReactNode
-  options?: FloatingMenuPluginProps['options']
-}
+  options?: FloatingMenuPluginProps['options'];
+} & React.HTMLAttributes<HTMLDivElement>;
 
-export const FloatingMenu = (props: FloatingMenuProps) => {
+export const FloatingMenu = React.forwardRef<HTMLDivElement, FloatingMenuProps>(({
+  pluginKey = 'floatingMenu',
+  editor,
+  shouldShow = null,
+  options,
+  children,
+  ...restProps
+}, ref) => {
   const menuEl = useRef(document.createElement('div'))
+
+  if (typeof ref === 'function') {
+    ref(menuEl.current)
+  } else if (ref) {
+    ref.current = menuEl.current
+  }
+
   const { editor: currentEditor } = useCurrentEditor()
 
   useEffect(() => {
-    menuEl.current.style.visibility = 'hidden'
-    menuEl.current.style.position = 'absolute'
+    const floatingMenuElement = menuEl.current
+
+    floatingMenuElement.style.visibility = 'hidden'
+    floatingMenuElement.style.position = 'absolute'
 
-    if (props.editor?.isDestroyed || currentEditor?.isDestroyed) {
+    if (editor?.isDestroyed || currentEditor?.isDestroyed) {
       return
     }
 
-    const {
-      pluginKey = 'floatingMenu',
-      editor,
-      options,
-      shouldShow = null,
-    } = props
-
-    const menuEditor = editor || currentEditor
+    const attachToEditor = editor || currentEditor
 
-    if (!menuEditor) {
-      console.warn('FloatingMenu component is not rendered inside of an editor component or does not have editor prop.')
+    if (!attachToEditor) {
+      console.warn(
+        'FloatingMenu component is not rendered inside of an editor component or does not have editor prop.',
+      )
       return
     }
 
     const plugin = FloatingMenuPlugin({
+      editor: attachToEditor,
+      element: floatingMenuElement,
       pluginKey,
-      editor: menuEditor,
-      element: menuEl.current,
-      options,
       shouldShow,
+      options,
     })
 
-    menuEditor.registerPlugin(plugin)
+    attachToEditor.registerPlugin(plugin)
+
     return () => {
-      menuEditor.unregisterPlugin(pluginKey)
+      attachToEditor.unregisterPlugin(pluginKey)
       window.requestAnimationFrame(() => {
-        if (menuEl.current.parentNode) {
-          menuEl.current.parentNode.removeChild(menuEl.current)
+        if (floatingMenuElement.parentNode) {
+          floatingMenuElement.parentNode.removeChild(floatingMenuElement)
         }
       })
     }
-  }, [
-    props.editor,
-    currentEditor,
-  ])
-
-  const portal = createPortal(
-    (
-    <div className={props.className}>
-      {props.children}
-    </div>
-    ), menuEl.current,
-  )
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, currentEditor])
 
-  return (
-    <>{portal}</>
+  return createPortal(
+    <div
+      {...restProps}
+    >
+      {children}
+    </div>,
+    menuEl.current,
   )
-}
+})

package/src/NodeViewContent.tsx

@@ -12,6 +12,7 @@ export const NodeViewContent: React.FC<NodeViewContentProps> = props => {
   const { nodeViewContentRef } = useReactNodeView()
 
   return (
+    // @ts-ignore
     <Tag
       {...props}
       ref={nodeViewContentRef}

package/src/NodeViewWrapper.tsx

@@ -12,6 +12,7 @@ export const NodeViewWrapper: React.FC<NodeViewWrapperProps> = React.forwardRef(
   const Tag = props.as || 'div'
 
   return (
+    // @ts-ignore
     <Tag
       {...props}
       ref={ref}