@tiptap/react 3.0.0 → 3.0.1

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 type { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'\nimport { FloatingMenuPlugin } 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",
+  "version": "3.0.1",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -14,39 +14,52 @@
   },
   "exports": {
     ".": {
-      "types": "./dist/packages/react/src/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",
   "module": "dist/index.js",
-  "umd": "dist/index.umd.js",
-  "types": "dist/packages/react/src/index.d.ts",
+  "types": "dist/index.d.ts",
   "type": "module",
   "files": [
     "src",
     "dist"
   ],
   "dependencies": {
-    "@tiptap/extension-bubble-menu": "^3.0.0",
-    "@tiptap/extension-floating-menu": "^3.0.0",
-    "use-sync-external-store": "^1.2.2",
-    "@types/use-sync-external-store": "^0.0.6"
+    "@types/use-sync-external-store": "^0.0.6",
+    "fast-deep-equal": "^3.1.3",
+    "use-sync-external-store": "^1.4.0"
   },
   "devDependencies": {
-    "@tiptap/core": "^3.0.0",
-    "@tiptap/pm": "^3.0.0",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@tiptap/core": "^3.0.1",
+    "@tiptap/pm": "^3.0.1"
+  },
+  "optionalDependencies": {
+    "@tiptap/extension-bubble-menu": "^3.0.1",
+    "@tiptap/extension-floating-menu": "^3.0.1"
   },
   "peerDependencies": {
-    "@tiptap/core": "^3.0.0",
-    "@tiptap/pm": "^3.0.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "@tiptap/core": "^3.0.1",
+    "@tiptap/pm": "^3.0.1"
   },
   "repository": {
     "type": "git",
@@ -55,7 +68,7 @@
   },
   "sideEffects": false,
   "scripts": {
-    "clean": "rm -rf dist",
-    "build": "npm run clean && rollup -c"
+    "build": "tsup",
+    "lint": "prettier ./src/ --check && eslint --cache --quiet --no-error-on-unmatched-pattern ./src/"
   }
-}
+}

package/src/Context.tsx

@@ -1,11 +1,13 @@
-import React, { createContext, ReactNode, useContext } from 'react'
+import type { Editor } from '@tiptap/core'
+import type { HTMLAttributes, ReactNode } from 'react'
+import React, { createContext, useContext, useMemo } from 'react'
 
-import { Editor } from './Editor.js'
 import { EditorContent } from './EditorContent.js'
-import { useEditor, UseEditorOptions } from './useEditor.js'
+import type { UseEditorOptions } from './useEditor.js'
+import { useEditor } from './useEditor.js'
 
 export type EditorContextValue = {
-  editor: Editor | null;
+  editor: Editor | null
 }
 
 export const EditorContext = createContext<EditorContextValue>({
@@ -20,9 +22,10 @@ export const EditorConsumer = EditorContext.Consumer
 export const useCurrentEditor = () => useContext(EditorContext)
 
 export type EditorProviderProps = {
-  children?: ReactNode;
-  slotBefore?: ReactNode;
-  slotAfter?: ReactNode;
+  children?: ReactNode
+  slotBefore?: ReactNode
+  slotAfter?: ReactNode
+  editorContainerProps?: HTMLAttributes<HTMLDivElement>
 } & UseEditorOptions
 
 /**
@@ -31,21 +34,24 @@ 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} />
-        )}
+        {({ editor: currentEditor }) => <EditorContent editor={currentEditor} {...editorContainerProps} />}
       </EditorConsumer>
       {children}
       {slotAfter}

package/src/Editor.ts

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

package/src/EditorContent.tsx

@@ -1,56 +1,105 @@
-import React, {
-  ForwardedRef, forwardRef, HTMLProps, LegacyRef, MutableRefObject,
-} from 'react'
-import ReactDOM, { flushSync } from 'react-dom'
+import type { Editor } from '@tiptap/core'
+import type { ForwardedRef, HTMLProps, LegacyRef, MutableRefObject } from 'react'
+import React, { forwardRef } from 'react'
+import ReactDOM from 'react-dom'
+import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js'
 
-import { Editor } from './Editor.js'
-import { ReactRenderer } from './ReactRenderer.js'
+import type { ContentComponent, EditorWithContentComponent } from './Editor.js'
+import type { 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
       }
     })
   }
 }
 
-const Portals: React.FC<{ renderers: Record<string, ReactRenderer> }> = ({ renderers }) => {
-  return (
-    <>
-      {Object.entries(renderers).map(([key, renderer]) => {
-        return ReactDOM.createPortal(renderer.reactElement, renderer.element, key)
-      })}
-    </>
+/**
+ * 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.values(renderers)}</>
 }
 
 export interface EditorContentProps extends HTMLProps<HTMLDivElement> {
-  editor: Editor | null;
-  innerRef?: ForwardedRef<HTMLDivElement | null>;
+  editor: Editor | null
+  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 +112,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 +127,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 +155,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,12 +170,17 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
       })
     }
 
+    if (this.unsubscribeToContentComponent) {
+      this.unsubscribeToContentComponent()
+    }
+
     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)
@@ -158,7 +197,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 +207,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/NodeViewContent.tsx

@@ -1,17 +1,20 @@
+import type { ComponentProps } from 'react'
 import React 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
     <Tag
       {...props}
       ref={nodeViewContentRef}
@@ -20,6 +23,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) => {
@@ -12,6 +12,7 @@ export const NodeViewWrapper: React.FC<NodeViewWrapperProps> = React.forwardRef(
   const Tag = props.as || 'div'
 
   return (
+    // @ts-ignore
     <Tag
       {...props}
       ref={ref}