@tiptap/react 3.0.0-next.3 → 3.0.0-next.5

package/dist/menus/index.js

@@ -0,0 +1,104 @@
+// src/menus/BubbleMenu.tsx
+import { BubbleMenuPlugin } from "@tiptap/extension-bubble-menu";
+import { useCurrentEditor } from "@tiptap/react";
+import React, { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { jsx } from "react/jsx-runtime";
+var BubbleMenu = React.forwardRef(
+  ({ pluginKey = "bubbleMenu", editor, updateDelay, resizeDelay, 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(() => {
+      const bubbleMenuElement = menuEl.current;
+      bubbleMenuElement.style.visibility = "hidden";
+      bubbleMenuElement.style.position = "absolute";
+      if ((editor == null ? void 0 : editor.isDestroyed) || (currentEditor == null ? void 0 : currentEditor.isDestroyed)) {
+        return;
+      }
+      const attachToEditor = editor || currentEditor;
+      if (!attachToEditor) {
+        console.warn("BubbleMenu component is not rendered inside of an editor component or does not have editor prop.");
+        return;
+      }
+      const plugin = BubbleMenuPlugin({
+        updateDelay,
+        resizeDelay,
+        editor: attachToEditor,
+        element: bubbleMenuElement,
+        pluginKey,
+        shouldShow,
+        options
+      });
+      attachToEditor.registerPlugin(plugin);
+      return () => {
+        attachToEditor.unregisterPlugin(pluginKey);
+        window.requestAnimationFrame(() => {
+          if (bubbleMenuElement.parentNode) {
+            bubbleMenuElement.parentNode.removeChild(bubbleMenuElement);
+          }
+        });
+      };
+    }, [editor, currentEditor]);
+    return createPortal(/* @__PURE__ */ jsx("div", { ...restProps, children }), menuEl.current);
+  }
+);
+
+// src/menus/FloatingMenu.tsx
+import { FloatingMenuPlugin } from "@tiptap/extension-floating-menu";
+import { useCurrentEditor as useCurrentEditor2 } from "@tiptap/react";
+import React2, { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var FloatingMenu = React2.forwardRef(
+  ({ pluginKey = "floatingMenu", editor, shouldShow = null, options, children, ...restProps }, ref) => {
+    const menuEl = useRef2(document.createElement("div"));
+    if (typeof ref === "function") {
+      ref(menuEl.current);
+    } else if (ref) {
+      ref.current = menuEl.current;
+    }
+    const { editor: currentEditor } = useCurrentEditor2();
+    useEffect2(() => {
+      const floatingMenuElement = menuEl.current;
+      floatingMenuElement.style.visibility = "hidden";
+      floatingMenuElement.style.position = "absolute";
+      if ((editor == null ? void 0 : editor.isDestroyed) || (currentEditor == null ? void 0 : currentEditor.isDestroyed)) {
+        return;
+      }
+      const attachToEditor = editor || currentEditor;
+      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,
+        shouldShow,
+        options
+      });
+      attachToEditor.registerPlugin(plugin);
+      return () => {
+        attachToEditor.unregisterPlugin(pluginKey);
+        window.requestAnimationFrame(() => {
+          if (floatingMenuElement.parentNode) {
+            floatingMenuElement.parentNode.removeChild(floatingMenuElement);
+          }
+        });
+      };
+    }, [editor, currentEditor]);
+    return createPortal2(/* @__PURE__ */ jsx2("div", { ...restProps, children }), menuEl.current);
+  }
+);
+export {
+  BubbleMenu,
+  FloatingMenu
+};
+//# sourceMappingURL=index.js.map

package/dist/menus/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/menus/BubbleMenu.tsx","../../src/menus/FloatingMenu.tsx"],"sourcesContent":["import { type BubbleMenuPluginProps, BubbleMenuPlugin } from '@tiptap/extension-bubble-menu'\nimport { useCurrentEditor } from '@tiptap/react'\nimport React, { useEffect, useRef } from 'react'\nimport { createPortal } from 'react-dom'\n\ntype Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>\n\nexport type BubbleMenuProps = Optional<Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'>, 'editor'> &\n  React.HTMLAttributes<HTMLDivElement>\n\nexport const BubbleMenu = React.forwardRef<HTMLDivElement, BubbleMenuProps>(\n  (\n    { pluginKey = 'bubbleMenu', editor, updateDelay, resizeDelay, shouldShow = null, options, children, ...restProps },\n    ref,\n  ) => {\n    const menuEl = useRef(document.createElement('div'))\n\n    if (typeof ref === 'function') {\n      ref(menuEl.current)\n    } else if (ref) {\n      ref.current = menuEl.current\n    }\n\n    const { editor: currentEditor } = useCurrentEditor()\n\n    useEffect(() => {\n      const bubbleMenuElement = menuEl.current\n\n      bubbleMenuElement.style.visibility = 'hidden'\n      bubbleMenuElement.style.position = 'absolute'\n\n      if (editor?.isDestroyed || (currentEditor as any)?.isDestroyed) {\n        return\n      }\n\n      const attachToEditor = editor || currentEditor\n\n      if (!attachToEditor) {\n        console.warn('BubbleMenu component is not rendered inside of an editor component or does not have editor prop.')\n        return\n      }\n\n      const plugin = BubbleMenuPlugin({\n        updateDelay,\n        resizeDelay,\n        editor: attachToEditor,\n        element: bubbleMenuElement,\n        pluginKey,\n        shouldShow,\n        options,\n      })\n\n      attachToEditor.registerPlugin(plugin)\n\n      return () => {\n        attachToEditor.unregisterPlugin(pluginKey)\n        window.requestAnimationFrame(() => {\n          if (bubbleMenuElement.parentNode) {\n            bubbleMenuElement.parentNode.removeChild(bubbleMenuElement)\n          }\n        })\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [editor, currentEditor])\n\n    return createPortal(<div {...restProps}>{children}</div>, menuEl.current)\n  },\n)\n","import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'\nimport { useCurrentEditor } from '@tiptap/react'\nimport React, { useEffect, useRef } from 'react'\nimport { createPortal } from 'react-dom'\n\ntype Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>\n\nexport type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element' | 'editor'> & {\n  editor: FloatingMenuPluginProps['editor'] | null\n  options?: FloatingMenuPluginProps['options']\n} & React.HTMLAttributes<HTMLDivElement>\n\nexport const FloatingMenu = React.forwardRef<HTMLDivElement, FloatingMenuProps>(\n  ({ pluginKey = 'floatingMenu', editor, shouldShow = null, options, children, ...restProps }, ref) => {\n    const menuEl = useRef(document.createElement('div'))\n\n    if (typeof ref === 'function') {\n      ref(menuEl.current)\n    } else if (ref) {\n      ref.current = menuEl.current\n    }\n\n    const { editor: currentEditor } = useCurrentEditor()\n\n    useEffect(() => {\n      const floatingMenuElement = menuEl.current\n\n      floatingMenuElement.style.visibility = 'hidden'\n      floatingMenuElement.style.position = 'absolute'\n\n      if (editor?.isDestroyed || (currentEditor as any)?.isDestroyed) {\n        return\n      }\n\n      const attachToEditor = editor || currentEditor\n\n      if (!attachToEditor) {\n        console.warn(\n          'FloatingMenu component is not rendered inside of an editor component or does not have editor prop.',\n        )\n        return\n      }\n\n      const plugin = FloatingMenuPlugin({\n        editor: attachToEditor,\n        element: floatingMenuElement,\n        pluginKey,\n        shouldShow,\n        options,\n      })\n\n      attachToEditor.registerPlugin(plugin)\n\n      return () => {\n        attachToEditor.unregisterPlugin(pluginKey)\n        window.requestAnimationFrame(() => {\n          if (floatingMenuElement.parentNode) {\n            floatingMenuElement.parentNode.removeChild(floatingMenuElement)\n          }\n        })\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [editor, currentEditor])\n\n    return createPortal(<div {...restProps}>{children}</div>, menuEl.current)\n  },\n)\n"],"mappings":"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","names":["useCurrentEditor","React","useEffect","useRef","createPortal","jsx"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/react",
   "description": "React components for tiptap",
-  "version": "3.0.0-next.3",
+  "version": "3.0.0-next.5",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -14,9 +14,20 @@
   },
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": {
+        "import": "./dist/index.d.ts",
+        "require": "./dist/index.d.cts"
+      },
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
+    },
+    "./menus": {
+      "types": {
+        "import": "./dist/menus/index.d.ts",
+        "require": "./dist/menus/index.d.cts"
+      },
+      "import": "./dist/menus/index.js",
+      "require": "./dist/menus/index.cjs"
     }
   },
   "main": "dist/index.cjs",
@@ -28,23 +39,25 @@
     "dist"
   ],
   "dependencies": {
-    "@tiptap/extension-bubble-menu": "^3.0.0-next.3",
-    "@tiptap/extension-floating-menu": "^3.0.0-next.3",
     "@types/use-sync-external-store": "^0.0.6",
-    "fast-deep-equal": "^3",
-    "use-sync-external-store": "^1"
+    "fast-deep-equal": "^3.1.3",
+    "use-sync-external-store": "^1.4.0"
   },
   "devDependencies": {
-    "@tiptap/core": "^3.0.0-next.3",
-    "@tiptap/pm": "^3.0.0-next.3",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "@tiptap/core": "^3.0.0-next.5",
+    "@tiptap/pm": "^3.0.0-next.5",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "optionalDependencies": {
+    "@tiptap/extension-bubble-menu": "^3.0.0-next.5",
+    "@tiptap/extension-floating-menu": "^3.0.0-next.5"
   },
   "peerDependencies": {
-    "@tiptap/core": "^3.0.0-next.1",
-    "@tiptap/pm": "^3.0.0-next.1",
+    "@tiptap/core": "^3.0.0-next.4",
+    "@tiptap/pm": "^3.0.0-next.4",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
@@ -55,6 +68,7 @@
   },
   "sideEffects": false,
   "scripts": {
-    "build": "tsup"
+    "build": "tsup",
+    "lint": "prettier ./src/ --check && eslint --cache --quiet --no-error-on-unmatched-pattern ./src/"
   }
-}
+}

package/src/Context.tsx

@@ -1,14 +1,12 @@
 import { Editor } from '@tiptap/core'
-import React, {
-  createContext, HTMLAttributes, ReactNode, useContext, useMemo,
-} from 'react'
+import React, { createContext, HTMLAttributes, ReactNode, useContext, useMemo } from 'react'
 
 import { EditorContent } from './EditorContent.js'
 import { useEditor, UseEditorOptions } from './useEditor.js'
 
 export type EditorContextValue = {
-  editor: Editor | null;
-};
+  editor: Editor | null
+}
 
 export const EditorContext = createContext<EditorContextValue>({
   editor: null,
@@ -22,11 +20,11 @@ export const EditorConsumer = EditorContext.Consumer
 export const useCurrentEditor = () => useContext(EditorContext)
 
 export type EditorProviderProps = {
-  children?: ReactNode;
-  slotBefore?: ReactNode;
-  slotAfter?: ReactNode;
-  editorContainerProps?: HTMLAttributes<HTMLDivElement>;
-} & UseEditorOptions;
+  children?: ReactNode
+  slotBefore?: ReactNode
+  slotAfter?: ReactNode
+  editorContainerProps?: HTMLAttributes<HTMLDivElement>
+} & UseEditorOptions
 
 /**
  * This is the provider component for the editor.
@@ -51,9 +49,7 @@ export function EditorProvider({
     <EditorContext.Provider value={contextValue}>
       {slotBefore}
       <EditorConsumer>
-        {({ editor: currentEditor }) => (
-          <EditorContent editor={currentEditor} {...editorContainerProps} />
-        )}
+        {({ editor: currentEditor }) => <EditorContent editor={currentEditor} {...editorContainerProps} />}
       </EditorConsumer>
       {children}
       {slotAfter}

package/src/Editor.ts

@@ -5,9 +5,9 @@ import { ReactRenderer } from './ReactRenderer.js'
 
 export type EditorWithContentComponent = Editor & { contentComponent?: ContentComponent | null }
 export type ContentComponent = {
-  setRenderer(id: string, renderer: ReactRenderer): void;
-  removeRenderer(id: string): void;
-  subscribe: (callback: () => void) => () => void;
-  getSnapshot: () => Record<string, ReactPortal>;
-  getServerSnapshot: () => Record<string, ReactPortal>;
+  setRenderer(id: string, renderer: ReactRenderer): void
+  removeRenderer(id: string): void
+  subscribe: (callback: () => void) => () => void
+  getSnapshot: () => Record<string, ReactPortal>
+  getServerSnapshot: () => Record<string, ReactPortal>
 }

package/src/EditorContent.tsx

@@ -1,22 +1,18 @@
 import { Editor } from '@tiptap/core'
-import React, {
-  ForwardedRef, forwardRef, HTMLProps, LegacyRef, MutableRefObject,
-} from 'react'
+import React, { ForwardedRef, forwardRef, HTMLProps, LegacyRef, MutableRefObject } from 'react'
 import ReactDOM from 'react-dom'
 import { useSyncExternalStore } from 'use-sync-external-store/shim'
 
 import { ContentComponent, EditorWithContentComponent } from './Editor.js'
 import { ReactRenderer } from './ReactRenderer.js'
 
-const mergeRefs = <T extends HTMLDivElement>(
-  ...refs: Array<MutableRefObject<T> | LegacyRef<T> | undefined>
-) => {
+const mergeRefs = <T extends HTMLDivElement>(...refs: Array<MutableRefObject<T> | LegacyRef<T> | undefined>) => {
   return (node: T) => {
     refs.forEach(ref => {
       if (typeof ref === 'function') {
         ref(node)
       } else if (ref) {
-        (ref as MutableRefObject<T | null>).current = node
+        ;(ref as MutableRefObject<T | null>).current = node
       }
     })
   }
@@ -25,9 +21,7 @@ const mergeRefs = <T extends HTMLDivElement>(
 /**
  * This component renders all of the editor's node views.
  */
-const Portals: React.FC<{ contentComponent: ContentComponent }> = ({
-  contentComponent,
-}) => {
+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,
@@ -36,16 +30,12 @@ const Portals: React.FC<{ contentComponent: ContentComponent }> = ({
   )
 
   // This allows us to directly render the portals without any additional wrapper
-  return (
-    <>
-      {Object.values(renderers)}
-    </>
-  )
+  return <>{Object.values(renderers)}</>
 }
 
 export interface EditorContentProps extends HTMLProps<HTMLDivElement> {
-  editor: Editor | null;
-  innerRef?: ForwardedRef<HTMLDivElement | null>;
+  editor: Editor | null
+  innerRef?: ForwardedRef<HTMLDivElement | null>
 }
 
 function getInstance(): ContentComponent {
@@ -185,10 +175,11 @@ export class PureEditorContent extends React.Component<
 
     editor.contentComponent = null
 
-    if (!editor.options.element.firstChild) {
+    if (!editor.options.element?.firstChild) {
       return
     }
 
+    // TODO using the new editor.mount method might allow us to remove this
     const newElement = document.createElement('div')
 
     newElement.append(...editor.options.element.childNodes)
@@ -216,7 +207,7 @@ const EditorContentWithKey = forwardRef<HTMLDivElement, EditorContentProps>(
   (props: Omit<EditorContentProps, 'innerRef'>, ref) => {
     const key = React.useMemo(() => {
       return Math.floor(Math.random() * 0xffffffff).toString()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+      // 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/NodeViewContent.tsx

@@ -1,15 +1,16 @@
-import React from 'react'
+import React, { ComponentProps } from 'react'
 
 import { useReactNodeView } from './useReactNodeView.js'
 
-export interface NodeViewContentProps {
-  [key: string]: any,
-  as?: React.ElementType,
-}
+export type NodeViewContentProps<T extends keyof React.JSX.IntrinsicElements = 'div'> = {
+  as?: NoInfer<T>
+} & ComponentProps<T>
 
-export const NodeViewContent: React.FC<NodeViewContentProps> = props => {
-  const Tag = props.as || 'div'
-  const { nodeViewContentRef } = useReactNodeView()
+export function NodeViewContent<T extends keyof React.JSX.IntrinsicElements = 'div'>({
+  as: Tag = 'div' as T,
+  ...props
+}: NodeViewContentProps<T>) {
+  const { nodeViewContentRef, nodeViewContentChildren } = useReactNodeView()
 
   return (
     // @ts-ignore
@@ -21,6 +22,8 @@ export const NodeViewContent: React.FC<NodeViewContentProps> = props => {
         whiteSpace: 'pre-wrap',
         ...props.style,
       }}
-    />
+    >
+      {nodeViewContentChildren}
+    </Tag>
   )
 }

package/src/NodeViewWrapper.tsx

@@ -3,8 +3,8 @@ import React from 'react'
 import { useReactNodeView } from './useReactNodeView.js'
 
 export interface NodeViewWrapperProps {
-  [key: string]: any,
-  as?: React.ElementType,
+  [key: string]: any
+  as?: React.ElementType
 }
 
 export const NodeViewWrapper: React.FC<NodeViewWrapperProps> = React.forwardRef((props, ref) => {

package/src/ReactMarkViewRenderer.tsx

@@ -0,0 +1,108 @@
+/* eslint-disable @typescript-eslint/no-shadow */
+import { MarkView, MarkViewProps, MarkViewRenderer, MarkViewRendererOptions } from '@tiptap/core'
+import React from 'react'
+
+// import { flushSync } from 'react-dom'
+import { ReactRenderer } from './ReactRenderer.js'
+
+export interface MarkViewContextProps {
+  markViewContentRef: (element: HTMLElement | null) => void
+}
+export const ReactMarkViewContext = React.createContext<MarkViewContextProps>({
+  markViewContentRef: () => {
+    // do nothing
+  },
+})
+
+export type MarkViewContentProps<T extends keyof React.JSX.IntrinsicElements = 'span'> = {
+  as?: NoInfer<T>
+} & React.ComponentProps<T>
+
+export const MarkViewContent: React.FC<MarkViewContentProps> = props => {
+  const Tag = props.as || 'span'
+  const { markViewContentRef } = React.useContext(ReactMarkViewContext)
+
+  return (
+    // @ts-ignore
+    <Tag {...props} ref={markViewContentRef} data-mark-view-content="" />
+  )
+}
+
+export interface ReactMarkViewRendererOptions extends MarkViewRendererOptions {
+  /**
+   * The tag name of the element wrapping the React component.
+   */
+  as?: string
+  className?: string
+  attrs?: { [key: string]: string }
+}
+
+export class ReactMarkView extends MarkView<React.ComponentType<MarkViewProps>, ReactMarkViewRendererOptions> {
+  renderer: ReactRenderer
+  contentDOMElement: HTMLElement | null
+  didMountContentDomElement = false
+
+  constructor(
+    component: React.ComponentType<MarkViewProps>,
+    props: MarkViewProps,
+    options?: Partial<ReactMarkViewRendererOptions>,
+  ) {
+    super(component, props, options)
+
+    const { as = 'span', attrs, className = '' } = options || {}
+    const componentProps = props satisfies MarkViewProps
+
+    this.contentDOMElement = document.createElement('span')
+
+    const markViewContentRef: MarkViewContextProps['markViewContentRef'] = el => {
+      if (el && this.contentDOMElement && el.firstChild !== this.contentDOMElement) {
+        el.appendChild(this.contentDOMElement)
+        this.didMountContentDomElement = true
+      }
+    }
+    const context: MarkViewContextProps = {
+      markViewContentRef,
+    }
+
+    // For performance reasons, we memoize the provider component
+    // And all of the things it requires are declared outside of the component, so it doesn't need to re-render
+    const ReactMarkViewProvider: React.FunctionComponent<MarkViewProps> = React.memo(componentProps => {
+      return (
+        <ReactMarkViewContext.Provider value={context}>
+          {React.createElement(component, componentProps)}
+        </ReactMarkViewContext.Provider>
+      )
+    })
+
+    ReactMarkViewProvider.displayName = 'ReactNodeView'
+
+    this.renderer = new ReactRenderer(ReactMarkViewProvider, {
+      editor: props.editor,
+      props: componentProps,
+      as,
+      className: `mark-${props.mark.type.name} ${className}`.trim(),
+    })
+
+    if (attrs) {
+      this.renderer.updateAttributes(attrs)
+    }
+  }
+
+  get dom() {
+    return this.renderer.element as HTMLElement
+  }
+
+  get contentDOM() {
+    if (!this.didMountContentDomElement) {
+      return null
+    }
+    return this.contentDOMElement as HTMLElement
+  }
+}
+
+export function ReactMarkViewRenderer(
+  component: React.ComponentType<MarkViewProps>,
+  options: Partial<ReactMarkViewRendererOptions> = {},
+): MarkViewRenderer {
+  return props => new ReactMarkView(component, props, options)
+}

package/src/ReactNodeViewRenderer.tsx

@@ -22,23 +22,23 @@ export interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
    */
   update:
     | ((props: {
-        oldNode: ProseMirrorNode;
-        oldDecorations: readonly Decoration[];
-        oldInnerDecorations: DecorationSource;
-        newNode: ProseMirrorNode;
-        newDecorations: readonly Decoration[];
-        innerDecorations: DecorationSource;
-        updateProps: () => void;
+        oldNode: ProseMirrorNode
+        oldDecorations: readonly Decoration[]
+        oldInnerDecorations: DecorationSource
+        newNode: ProseMirrorNode
+        newDecorations: readonly Decoration[]
+        innerDecorations: DecorationSource
+        updateProps: () => void
       }) => boolean)
-    | null;
+    | null
   /**
    * The tag name of the element wrapping the React component.
    */
-  as?: string;
+  as?: string
   /**
    * The class name of the element wrapping the React component.
    */
-  className?: string;
+  className?: string
   /**
    * Attributes that should be applied to the element wrapping the React component.
    * If this is a function, it will be called each time the node view is updated.
@@ -46,10 +46,7 @@ export interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
    */
   attrs?:
     | Record<string, string>
-    | ((props: {
-        node: ProseMirrorNode;
-        HTMLAttributes: Record<string, any>;
-      }) => Record<string, string>);
+    | ((props: { node: ProseMirrorNode; HTMLAttributes: Record<string, any> }) => Record<string, string>)
 }
 
 export class ReactNodeView<
@@ -104,15 +101,13 @@ export class ReactNodeView<
     const Component = this.component
     // For performance reasons, we memoize the provider component
     // And all of the things it requires are declared outside of the component, so it doesn't need to re-render
-    const ReactNodeViewProvider: React.FunctionComponent<NodeViewProps> = React.memo(
-      componentProps => {
-        return (
-          <ReactNodeViewContext.Provider value={context}>
-            {React.createElement(Component, componentProps)}
-          </ReactNodeViewContext.Provider>
-        )
-      },
-    )
+    const ReactNodeViewProvider: React.FunctionComponent<NodeViewProps> = React.memo(componentProps => {
+      return (
+        <ReactNodeViewContext.Provider value={context}>
+          {React.createElement(Component, componentProps)}
+        </ReactNodeViewContext.Provider>
+      )
+    })
 
     ReactNodeViewProvider.displayName = 'ReactNodeView'
 
@@ -141,7 +136,6 @@ export class ReactNodeView<
     const { className = '' } = this.options
 
     this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this)
-    this.editor.on('selectionUpdate', this.handleSelectionUpdate)
 
     this.renderer = new ReactRenderer(ReactNodeViewProvider, {
       editor: this.editor,
@@ -150,6 +144,7 @@ export class ReactNodeView<
       className: `node-${this.node.type.name} ${className}`.trim(),
     })
 
+    this.editor.on('selectionUpdate', this.handleSelectionUpdate)
     this.updateElementAttributes()
   }
 
@@ -159,8 +154,8 @@ export class ReactNodeView<
    */
   get dom() {
     if (
-      this.renderer.element.firstElementChild
-      && !this.renderer.element.firstElementChild?.hasAttribute('data-node-view-wrapper')
+      this.renderer.element.firstElementChild &&
+      !this.renderer.element.firstElementChild?.hasAttribute('data-node-view-wrapper')
     ) {
       throw Error('Please use the NodeViewWrapper component for your node view.')
     }
@@ -211,11 +206,7 @@ export class ReactNodeView<
    * On update, update the React component.
    * To prevent unnecessary updates, the `update` option can be used.
    */
-  update(
-    node: Node,
-    decorations: readonly Decoration[],
-    innerDecorations: DecorationSource,
-  ): boolean {
+  update(node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource): boolean {
     const rerenderComponent = (props?: Record<string, any>) => {
       this.renderer.updateProps(props)
       if (typeof this.options.attrs === 'function') {
@@ -247,11 +238,7 @@ export class ReactNodeView<
       })
     }
 
-    if (
-      node === this.node
-      && this.decorations === decorations
-      && this.innerDecorations === innerDecorations
-    ) {
+    if (node === this.node && this.decorations === decorations && this.innerDecorations === innerDecorations) {
       return true
     }