refactoring

packages/react/src/EditorContent.jsx

@@ -1,37 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react'
-import ReactDOM from 'react-dom'
-import { Editor } from './Editor'
-
-// export const EditorContent = ({ editor }) => {
-//   const editorContentRef = useRef(null)
-
-//   useEffect(() => {
-//     if (editor && editor.options.element) {
-//       console.log('set editorContent element')
-
-//       const element = editorContentRef.current
-
-//       element.appendChild(editor.options.element.firstChild)
-
-//       editor.setOptions({
-//         element,
-//       })
-
-//       console.log({instance: this})
-
-//       // TODO: why setTimeout?
-//       setTimeout(() => {
-//         editor.createNodeViews()
-//       }, 0)
-//     }
-//   })
-
-//   return (
-//     <div ref={editorContentRef} />
-//   )
-// }
-
-
+import React from 'react'
 
 export class PureEditorContent extends React.Component {
   constructor(props) {
@@ -72,5 +39,4 @@ export class PureEditorContent extends React.Component {
   }
 }
 
-
 export const EditorContent = React.memo(PureEditorContent);

packages/react/src/ReactNodeViewRenderer.ts

@@ -7,7 +7,6 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import { Editor } from './Editor'
 import { ReactRenderer } from './ReactRenderer'
-import test from './test'
 
 interface ReactNodeViewRendererOptions {
   stopEvent: ((event: Event) => boolean) | null,

packages/react/src/components/Editor.jsx

@@ -1,34 +0,0 @@
-import React, {
-  useState, useRef, useEffect, createContext, useContext,
-} from 'react'
-import { Editor as Tiptap } from '@tiptap/core'
-
-export const EditorContext = createContext({})
-
-export const useEditor = () => useContext(EditorContext)
-
-export const Editor = ({
-  value, onChange, children, ...props
-}) => {
-  const [editor, setEditor] = useState(null)
-  const editorRef = useRef(null)
-
-  useEffect(() => {
-    const e = new Tiptap({
-      element: editorRef.current,
-      content: value,
-      ...props,
-    }).on('transaction', () => {
-      onChange(e.getJSON())
-    })
-
-    setEditor(e)
-  }, [])
-
-  return (
-    <EditorContext.Provider value={editor}>
-      {editorRef.current && children}
-      <div ref={editorRef} />
-    </EditorContext.Provider>
-  )
-}

packages/react/src/index.ts

@@ -2,6 +2,6 @@
 export * from '@tiptap/core'
 export { Editor } from './Editor'
 export * from './useEditor'
-export * from './ReactRenderer'
-export * from './ReactNodeViewRenderer'
+// export * from './ReactRenderer'
+// export * from './ReactNodeViewRenderer'
 export * from './EditorContent'

packages/react/src/test.jsx

@@ -1,7 +0,0 @@
-import React from 'react'
-
-export default () => {
-  return (
-    <div className="jooo" data-node-view-wrapper></div>
-  )
-}

packages/react/src/useEditor.ts

@@ -1,6 +1,5 @@
-// @ts-nocheck
-
 import { useState, useEffect } from 'react'
+import { EditorOptions } from '@tiptap/core'
 import { Editor } from './Editor'
 
 function useForceUpdate() {
@@ -9,8 +8,8 @@ function useForceUpdate() {
   return () => setValue(value => value + 1)
 }
 
-export const useEditor = (options = {}) => {
-  const [editor, setEditor] = useState(null)
+export const useEditor = (options: Partial<EditorOptions> = {}) => {
+  const [editor, setEditor] = useState<Editor | null>(null)
   const forceUpdate = useForceUpdate()
 
   useEffect(() => {
@@ -18,9 +17,7 @@ export const useEditor = (options = {}) => {
 
     setEditor(instance)
 
-    instance.on('transaction', () => {
-      forceUpdate()
-    })
+    instance.on('transaction', forceUpdate)
 
     return () => {
       instance.destroy()