@tiptap/react 2.0.0-beta.20 → 2.0.0-beta.201

package/src/ReactRenderer.tsx

@@ -1,6 +1,8 @@
+import { Editor } from '@tiptap/core'
 import React from 'react'
-import { AnyObject } from '@tiptap/core'
-import { Editor } from './Editor'
+import { flushSync } from 'react-dom'
+
+import { Editor as ExtendedEditor } from './Editor'
 
 function isClassComponent(Component: any) {
   return !!(
@@ -10,34 +12,57 @@ function isClassComponent(Component: any) {
   )
 }
 
+function isForwardRefComponent(Component: any) {
+  return !!(
+    typeof Component === 'object'
+    && Component.$$typeof?.toString() === 'Symbol(react.forward_ref)'
+  )
+}
+
 export interface ReactRendererOptions {
   editor: Editor,
-  props?: AnyObject,
+  props?: Record<string, any>,
   as?: string,
+  className?: string,
 }
 
-export class ReactRenderer {
+type ComponentType<R, P> =
+  React.ComponentClass<P> |
+  React.FunctionComponent<P> |
+  React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<R>>;
+
+export class ReactRenderer<R = unknown, P = unknown> {
   id: string
 
-  editor: Editor
+  editor: ExtendedEditor
 
   component: any
 
   element: Element
 
-  props: AnyObject
+  props: Record<string, any>
 
   reactElement: React.ReactNode
 
-  ref: React.Component | null = null
+  ref: R | null = null
 
-  constructor(component: React.Component | React.FunctionComponent, { editor, props = {}, as = 'div' }: ReactRendererOptions) {
+  constructor(component: ComponentType<R, P>, {
+    editor,
+    props = {},
+    as = 'div',
+    className = '',
+  }: ReactRendererOptions) {
     this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()
     this.component = component
-    this.editor = editor
+    this.editor = editor as ExtendedEditor
     this.props = props
     this.element = document.createElement(as)
     this.element.classList.add('react-renderer')
+
+    if (className) {
+      this.element.classList.add(...className.split(' '))
+    }
+
     this.render()
   }
 
@@ -45,25 +70,29 @@ export class ReactRenderer {
     const Component = this.component
     const props = this.props
 
-    if (isClassComponent(Component)) {
-      props.ref = (ref: React.Component) => {
+    if (isClassComponent(Component) || isForwardRefComponent(Component)) {
+      props.ref = (ref: R) => {
         this.ref = ref
       }
     }
 
     this.reactElement = <Component {...props } />
 
-    if (this.editor?.contentComponent) {
-      this.editor.contentComponent.setState({
-        renderers: this.editor.contentComponent.state.renderers.set(
-          this.id,
-          this,
-        ),
+    queueMicrotask(() => {
+      flushSync(() => {
+        if (this.editor?.contentComponent) {
+          this.editor.contentComponent.setState({
+            renderers: this.editor.contentComponent.state.renderers.set(
+              this.id,
+              this,
+            ),
+          })
+        }
       })
-    }
+    })
   }
 
-  updateProps(props: AnyObject = {}): void {
+  updateProps(props: Record<string, any> = {}): void {
     this.props = {
       ...this.props,
       ...props,
@@ -73,14 +102,18 @@ export class ReactRenderer {
   }
 
   destroy(): void {
-    if (this.editor?.contentComponent) {
-      const { renderers } = this.editor.contentComponent.state
+    queueMicrotask(() => {
+      flushSync(() => {
+        if (this.editor?.contentComponent) {
+          const { renderers } = this.editor.contentComponent.state
 
-      renderers.delete(this.id)
+          renderers.delete(this.id)
 
-      this.editor.contentComponent.setState({
-        renderers,
+          this.editor.contentComponent.setState({
+            renderers,
+          })
+        }
       })
-    }
+    })
   }
 }

package/src/index.ts

@@ -1,10 +1,10 @@
-export * from '@tiptap/core'
 export * from './BubbleMenu'
 export { Editor } from './Editor'
-export * from './FloatingMenu'
-export * from './useEditor'
-export * from './ReactRenderer'
-export * from './ReactNodeViewRenderer'
 export * from './EditorContent'
-export * from './NodeViewWrapper'
+export * from './FloatingMenu'
 export * from './NodeViewContent'
+export * from './NodeViewWrapper'
+export * from './ReactNodeViewRenderer'
+export * from './ReactRenderer'
+export * from './useEditor'
+export * from '@tiptap/core'

package/src/useEditor.ts

@@ -1,5 +1,6 @@
-import { useState, useEffect } from 'react'
 import { EditorOptions } from '@tiptap/core'
+import { DependencyList, useEffect, useState } from 'react'
+
 import { Editor } from './Editor'
 
 function useForceUpdate() {
@@ -8,21 +9,32 @@ function useForceUpdate() {
   return () => setValue(value => value + 1)
 }
 
-export const useEditor = (options: Partial<EditorOptions> = {}) => {
+export const useEditor = (options: Partial<EditorOptions> = {}, deps: DependencyList = []) => {
   const [editor, setEditor] = useState<Editor | null>(null)
   const forceUpdate = useForceUpdate()
 
   useEffect(() => {
+    let isMounted = true
+
     const instance = new Editor(options)
 
     setEditor(instance)
 
-    instance.on('transaction', forceUpdate)
+    instance.on('transaction', () => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          if (isMounted) {
+            forceUpdate()
+          }
+        })
+      })
+    })
 
     return () => {
       instance.destroy()
+      isMounted = false
     }
-  }, [])
+  }, deps)
 
   return editor
 }

package/src/useReactNodeView.ts

@@ -2,6 +2,7 @@ import { createContext, useContext } from 'react'
 
 export interface ReactNodeViewContextProps {
   onDragStart: (event: DragEvent) => void,
+  nodeViewContentRef: (element: HTMLElement | null) => void,
 }
 
 export const ReactNodeViewContext = createContext<Partial<ReactNodeViewContextProps>>({

package/CHANGELOG.md

@@ -1,178 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [2.0.0-beta.20](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-beta.19...@tiptap/react@2.0.0-beta.20) (2021-04-15)
-
-**Note:** Version bump only for package @tiptap/react
-
-
-
-
-
-# [2.0.0-beta.19](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-beta.18...@tiptap/react@2.0.0-beta.19) (2021-04-11)
-
-
-### Bug Fixes
-
-* fix using react node views with insertContent ([ea0992f](https://github.com/ueberdosis/tiptap-next/commit/ea0992f66e9942c590e75c0ab2f5705640764f4d))
-
-
-
-
-
-# [2.0.0-beta.18](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-beta.17...@tiptap/react@2.0.0-beta.18) (2021-04-08)
-
-**Note:** Version bump only for package @tiptap/react
-
-
-
-
-
-# [2.0.0-beta.17](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-beta.16...@tiptap/react@2.0.0-beta.17) (2021-04-08)
-
-
-### Bug Fixes
-
-* improve node view error message ([536663f](https://github.com/ueberdosis/tiptap-next/commit/536663f816039df6e3d8de23989f343d78e5d08e))
-* make `as` prop optional ([f8dec5f](https://github.com/ueberdosis/tiptap-next/commit/f8dec5f905baf5692dd257b3dddec3de2bcad1a1))
-
-
-
-
-
-# [2.0.0-beta.16](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-beta.15...@tiptap/react@2.0.0-beta.16) (2021-04-07)
-
-**Note:** Version bump only for package @tiptap/react
-
-
-
-
-
-# [2.0.0-beta.15](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-beta.14...@tiptap/react@2.0.0-beta.15) (2021-04-07)
-
-**Note:** Version bump only for package @tiptap/react
-
-
-
-
-
-# [2.0.0-beta.14](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-beta.13...@tiptap/react@2.0.0-beta.14) (2021-04-04)
-
-
-### Features
-
-* render wrapper element for inline node views as span, fix [#242](https://github.com/ueberdosis/tiptap-next/issues/242) ([bdb5d72](https://github.com/ueberdosis/tiptap-next/commit/bdb5d724956c0c757e29be38fb2c9dd85d8fd36b))
-
-
-
-
-
-# [2.0.0-beta.13](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-beta.12...@tiptap/react@2.0.0-beta.13) (2021-04-01)
-
-**Note:** Version bump only for package @tiptap/react
-
-
-
-
-
-# [2.0.0-beta.12](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-beta.11...@tiptap/react@2.0.0-beta.12) (2021-04-01)
-
-**Note:** Version bump only for package @tiptap/react
-
-
-
-
-
-# [2.0.0-beta.11](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-beta.10...@tiptap/react@2.0.0-beta.11) (2021-04-01)
-
-**Note:** Version bump only for package @tiptap/react
-
-
-
-
-
-# [2.0.0-beta.10](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-beta.9...@tiptap/react@2.0.0-beta.10) (2021-04-01)
-
-**Note:** Version bump only for package @tiptap/react
-
-
-
-
-
-# [2.0.0-beta.9](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-beta.8...@tiptap/react@2.0.0-beta.9) (2021-03-31)
-
-**Note:** Version bump only for package @tiptap/react
-
-
-
-
-
-# [2.0.0-beta.8](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-beta.7...@tiptap/react@2.0.0-beta.8) (2021-03-31)
-
-**Note:** Version bump only for package @tiptap/react
-
-
-
-
-
-# [2.0.0-beta.7](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-beta.6...@tiptap/react@2.0.0-beta.7) (2021-03-31)
-
-**Note:** Version bump only for package @tiptap/react
-
-
-
-
-
-# [2.0.0-beta.6](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-beta.5...@tiptap/react@2.0.0-beta.6) (2021-03-28)
-
-**Note:** Version bump only for package @tiptap/react
-
-
-
-
-
-# [2.0.0-beta.5](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-beta.4...@tiptap/react@2.0.0-beta.5) (2021-03-24)
-
-**Note:** Version bump only for package @tiptap/react
-
-
-
-
-
-# [2.0.0-beta.4](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-beta.3...@tiptap/react@2.0.0-beta.4) (2021-03-18)
-
-**Note:** Version bump only for package @tiptap/react
-
-
-
-
-
-# [2.0.0-beta.3](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-beta.2...@tiptap/react@2.0.0-beta.3) (2021-03-16)
-
-**Note:** Version bump only for package @tiptap/react
-
-
-
-
-
-# [2.0.0-beta.2](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-beta.1...@tiptap/react@2.0.0-beta.2) (2021-03-09)
-
-**Note:** Version bump only for package @tiptap/react
-
-
-
-
-
-# [2.0.0-beta.1](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-alpha.2...@tiptap/react@2.0.0-beta.1) (2021-03-05)
-
-**Note:** Version bump only for package @tiptap/react
-
-
-
-
-
-# 2.0.0-alpha.2 (2021-02-26)
-
-**Note:** Version bump only for package @tiptap/react

package/LICENSE.md

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2020, überdosis GbR
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.