@tiptap/react 2.6.5 → 2.7.0-pre.0

package/src/ReactRenderer.tsx

@@ -57,14 +57,6 @@ export interface ReactRendererOptions {
    * @example 'foo bar'
    */
   className?: string,
-
-  /**
-   * The attributes of the element.
-   * @type {Record<string, string>}
-   * @default {}
-   * @example { 'data-foo': 'bar' }
-   */
-  attrs?: Record<string, string>,
 }
 
 type ComponentType<R, P> =
@@ -83,7 +75,7 @@ type ComponentType<R, P> =
  *   as: 'span',
  * })
 */
-export class ReactRenderer<R = unknown, P = unknown> {
+export class ReactRenderer<R = unknown, P extends Record<string, any> = {}> {
   id: string
 
   editor: Editor
@@ -92,23 +84,25 @@ export class ReactRenderer<R = unknown, P = unknown> {
 
   element: Element
 
-  props: Record<string, any>
+  props: P
 
   reactElement: React.ReactNode
 
   ref: R | null = null
 
+  /**
+   * Immediately creates element and renders the provided React component.
+   */
   constructor(component: ComponentType<R, P>, {
     editor,
     props = {},
     as = 'div',
     className = '',
-    attrs,
   }: ReactRendererOptions) {
     this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()
     this.component = component
     this.editor = editor as EditorWithContentComponent
-    this.props = props
+    this.props = props as P
     this.element = document.createElement(as)
     this.element.classList.add('react-renderer')
 
@@ -116,12 +110,6 @@ export class ReactRenderer<R = unknown, P = unknown> {
       this.element.classList.add(...className.split(' '))
     }
 
-    if (attrs) {
-      Object.keys(attrs).forEach(key => {
-        this.element.setAttribute(key, attrs[key])
-      })
-    }
-
     if (this.editor.isInitialized) {
       // On first render, we need to flush the render synchronously
       // Renders afterwards can be async, but this fixes a cursor positioning issue
@@ -133,12 +121,16 @@ export class ReactRenderer<R = unknown, P = unknown> {
     }
   }
 
+  /**
+   * Render the React component.
+   */
   render(): void {
     const Component = this.component
     const props = this.props
     const editor = this.editor as EditorWithContentComponent
 
     if (isClassComponent(Component) || isForwardRefComponent(Component)) {
+      // @ts-ignore This is a hack to make the ref work
       props.ref = (ref: R) => {
         this.ref = ref
       }
@@ -149,6 +141,9 @@ export class ReactRenderer<R = unknown, P = unknown> {
     editor?.contentComponent?.setRenderer(this.id, this)
   }
 
+  /**
+   * Re-renders the React component with new props.
+   */
   updateProps(props: Record<string, any> = {}): void {
     this.props = {
       ...this.props,
@@ -158,9 +153,21 @@ export class ReactRenderer<R = unknown, P = unknown> {
     this.render()
   }
 
+  /**
+   * Destroy the React component.
+   */
   destroy(): void {
     const editor = this.editor as EditorWithContentComponent
 
     editor?.contentComponent?.removeRenderer(this.id)
   }
+
+  /**
+   * Update the attributes of the element that holds the React component.
+   */
+  updateAttributes(attributes: Record<string, string>): void {
+    Object.keys(attributes).forEach(key => {
+      this.element.setAttribute(key, attributes[key])
+    })
+  }
 }

package/src/useEditor.ts

@@ -149,6 +149,8 @@ class EditorInstanceManager {
       onTransaction: (...args) => this.options.current.onTransaction?.(...args),
       onUpdate: (...args) => this.options.current.onUpdate?.(...args),
       onContentError: (...args) => this.options.current.onContentError?.(...args),
+      onDrop: (...args) => this.options.current.onDrop?.(...args),
+      onPaste: (...args) => this.options.current.onPaste?.(...args),
     }
     const editor = new Editor(optionsToApply)
 

package/src/useEditorState.ts

@@ -1,4 +1,5 @@
 import type { Editor } from '@tiptap/core'
+import deepEqual from 'fast-deep-equal/es6/react'
 import { useDebugValue, useEffect, useState } from 'react'
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
 
@@ -6,6 +7,7 @@ export type EditorStateSnapshot<TEditor extends Editor | null = Editor | null> =
   editor: TEditor;
   transactionNumber: number;
 };
+
 export type UseEditorStateOptions<
   TSelectorResult,
   TEditor extends Editor | null = Editor | null,
@@ -20,7 +22,7 @@ export type UseEditorStateOptions<
   selector: (context: EditorStateSnapshot<TEditor>) => TSelectorResult;
   /**
    * A custom equality function to determine if the editor should re-render.
-   * @default `(a, b) => a === b`
+   * @default `deepEqual` from `fast-deep-equal`
    */
   equalityFn?: (a: TSelectorResult, b: TSelectorResult | null) => boolean;
 };
@@ -108,30 +110,63 @@ class EditorStateManager<TEditor extends Editor | null = Editor | null> {
   }
 }
 
+/**
+ * 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.
+ * @example
+ * ```tsx
+ * const editor = useEditor({...options})
+ * const { currentSelection } = useEditorState({
+ *  editor,
+ *  selector: snapshot => ({ currentSelection: snapshot.editor.state.selection }),
+ * })
+ */
 export function useEditorState<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.
+ * @example
+ * ```tsx
+ * const editor = useEditor({...options})
+ * const { currentSelection } = useEditorState({
+ *  editor,
+ *  selector: snapshot => ({ currentSelection: snapshot.editor.state.selection }),
+ * })
+ */
 export function useEditorState<TSelectorResult>(
   options: UseEditorStateOptions<TSelectorResult, Editor | null>
 ): TSelectorResult | null;
 
+/**
+ * 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.
+ * @example
+ * ```tsx
+ * const editor = useEditor({...options})
+ * const { currentSelection } = useEditorState({
+ *  editor,
+ *  selector: snapshot => ({ currentSelection: snapshot.editor.state.selection }),
+ * })
+ */
 export function useEditorState<TSelectorResult>(
   options: UseEditorStateOptions<TSelectorResult, Editor> | UseEditorStateOptions<TSelectorResult, Editor | null>,
 ): TSelectorResult | null {
-  const [editorInstance] = useState(() => new EditorStateManager(options.editor))
+  const [editorStateManager] = useState(() => new EditorStateManager(options.editor))
 
   // Using the `useSyncExternalStore` hook to sync the editor instance with the component state
   const selectedState = useSyncExternalStoreWithSelector(
-    editorInstance.subscribe,
-    editorInstance.getSnapshot,
-    editorInstance.getServerSnapshot,
+    editorStateManager.subscribe,
+    editorStateManager.getSnapshot,
+    editorStateManager.getServerSnapshot,
     options.selector as UseEditorStateOptions<TSelectorResult, Editor | null>['selector'],
-    options.equalityFn,
+    options.equalityFn ?? deepEqual,
   )
 
   useEffect(() => {
-    return editorInstance.watch(options.editor)
-  }, [options.editor, editorInstance])
+    return editorStateManager.watch(options.editor)
+  }, [options.editor, editorStateManager])
 
   useDebugValue(selectedState)