move React components to a package, translate default editor example to React

packages/react/src/ReactNodeViewRenderer.ts

@@ -0,0 +1 @@
+export default class ReactNodeViewRenderer {}

packages/react/src/ReactRenderer.ts

@@ -0,0 +1 @@
+export default class ReactRenderer {}

packages/react/src/components/Editor.jsx

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,7 @@
+// @ts-nocheck
+export * from '@tiptap/core'
+export { default as ReactRenderer } from './ReactRenderer'
+export { default as ReactNodeViewRenderer } from './ReactNodeViewRenderer'
+export {
+  Editor, EditorContext, useEditor,
+} from './components/Editor'