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

package/src/useEditor.ts

@@ -1,16 +1,10 @@
 import { type EditorOptions, Editor } from '@tiptap/core'
-import {
-  DependencyList,
-  MutableRefObject,
-  useDebugValue,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
+import { DependencyList, MutableRefObject, useDebugValue, useEffect, useRef, useState } from 'react'
 import { useSyncExternalStore } from 'use-sync-external-store/shim'
 
 import { useEditorState } from './useEditorState.js'
 
+// @ts-ignore
 const isDev = process.env.NODE_ENV !== 'production'
 const isSSR = typeof window === 'undefined'
 const isNext = isSSR || Boolean(typeof window !== 'undefined' && (window as any).next)
@@ -25,14 +19,14 @@ export type UseEditorOptions = Partial<EditorOptions> & {
    * If server-side rendering, set this to `false`.
    * @default true
    */
-  immediatelyRender?: boolean;
+  immediatelyRender?: boolean
   /**
    * Whether to re-render the editor on each transaction.
    * This is legacy behavior that will be removed in future versions.
    * @default false
    */
-  shouldRerenderOnTransaction?: boolean;
-};
+  shouldRerenderOnTransaction?: boolean
+}
 
 /**
  * This class handles the creation, destruction, and re-creation of the editor instance.
@@ -229,8 +223,8 @@ class EditorInstanceManager {
         this.previousDeps = deps
         return
       }
-      const depsAreEqual = this.previousDeps.length === deps.length
-        && this.previousDeps.every((dep, index) => dep === deps[index])
+      const depsAreEqual =
+        this.previousDeps.length === deps.length && this.previousDeps.every((dep, index) => dep === deps[index])
 
       if (depsAreEqual) {
         // deps exist and are equal, no need to recreate
@@ -289,8 +283,8 @@ class EditorInstanceManager {
  */
 export function useEditor(
   options: UseEditorOptions & { immediatelyRender: false },
-  deps?: DependencyList
-): Editor | null;
+  deps?: DependencyList,
+): Editor | null
 
 /**
  * This hook allows you to create an editor instance.
@@ -299,12 +293,9 @@ export function useEditor(
  * @returns The editor instance
  * @example const editor = useEditor({ extensions: [...] })
  */
-export function useEditor(options: UseEditorOptions, deps?: DependencyList): Editor;
+export function useEditor(options: UseEditorOptions, deps?: DependencyList): Editor
 
-export function useEditor(
-  options: UseEditorOptions = {},
-  deps: DependencyList = [],
-): Editor | null {
+export function useEditor(options: UseEditorOptions = {}, deps: DependencyList = []): Editor | null {
   const mostRecentOptions = useRef(options)
 
   mostRecentOptions.current = options

package/src/useEditorState.ts

@@ -1,35 +1,30 @@
 import type { Editor } from '@tiptap/core'
 import deepEqual from 'fast-deep-equal/es6/react'
-import {
-  useDebugValue, useEffect, useLayoutEffect, useState,
-} from 'react'
+import { useDebugValue, useEffect, useLayoutEffect, useState } from 'react'
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
 
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
 
 export type EditorStateSnapshot<TEditor extends Editor | null = Editor | null> = {
-  editor: TEditor;
-  transactionNumber: number;
-};
-
-export type UseEditorStateOptions<
-  TSelectorResult,
-  TEditor extends Editor | null = Editor | null,
-> = {
+  editor: TEditor
+  transactionNumber: number
+}
+
+export type UseEditorStateOptions<TSelectorResult, TEditor extends Editor | null = Editor | null> = {
   /**
    * The editor instance.
    */
-  editor: TEditor;
+  editor: TEditor
   /**
    * A selector function to determine the value to compare for re-rendering.
    */
-  selector: (context: EditorStateSnapshot<TEditor>) => TSelectorResult;
+  selector: (context: EditorStateSnapshot<TEditor>) => TSelectorResult
   /**
    * A custom equality function to determine if the editor should re-render.
    * @default `deepEqual` from `fast-deep-equal`
    */
-  equalityFn?: (a: TSelectorResult, b: TSelectorResult | null) => boolean;
-};
+  equalityFn?: (a: TSelectorResult, b: TSelectorResult | null) => boolean
+}
 
 /**
  * To synchronize the editor instance with the component state,
@@ -126,8 +121,8 @@ class EditorStateManager<TEditor extends Editor | null = Editor | null> {
  * })
  */
 export function useEditorState<TSelectorResult>(
-  options: UseEditorStateOptions<TSelectorResult, Editor>
-): TSelectorResult;
+  options: UseEditorStateOptions<TSelectorResult, Editor>,
+): TSelectorResult
 /**
  * This hook allows you to watch for changes on the editor instance.
  * It will allow you to select a part of the editor state and re-render the component when it changes.
@@ -140,8 +135,8 @@ export function useEditorState<TSelectorResult>(
  * })
  */
 export function useEditorState<TSelectorResult>(
-  options: UseEditorStateOptions<TSelectorResult, Editor | null>
-): TSelectorResult | null;
+  options: UseEditorStateOptions<TSelectorResult, Editor | null>,
+): TSelectorResult | null
 
 /**
  * This hook allows you to watch for changes on the editor instance.

package/src/useReactNodeView.ts

@@ -1,12 +1,27 @@
-import { createContext, useContext } from 'react'
+import { createContext, createElement, ReactNode, useContext } from 'react'
 
 export interface ReactNodeViewContextProps {
-  onDragStart: (event: DragEvent) => void,
-  nodeViewContentRef: (element: HTMLElement | null) => void,
+  onDragStart?: (event: DragEvent) => void
+  nodeViewContentRef?: (element: HTMLElement | null) => void
+  /**
+   * This allows you to add children into the NodeViewContent component.
+   * This is useful when statically rendering the content of a node view.
+   */
+  nodeViewContentChildren?: ReactNode
 }
 
-export const ReactNodeViewContext = createContext<Partial<ReactNodeViewContextProps>>({
-  onDragStart: undefined,
+export const ReactNodeViewContext = createContext<ReactNodeViewContextProps>({
+  onDragStart: () => {
+    // no-op
+  },
+  nodeViewContentChildren: undefined,
+  nodeViewContentRef: () => {
+    // no-op
+  },
 })
 
+export const ReactNodeViewContentProvider = ({ children, content }: { children: ReactNode; content: ReactNode }) => {
+  return createElement(ReactNodeViewContext.Provider, { value: { nodeViewContentChildren: content } }, children)
+}
+
 export const useReactNodeView = () => useContext(ReactNodeViewContext)