Merge branch 'main' of https://github.com/ueberdosis/tiptap-next into main

packages/react/README.md

@@ -0,0 +1,14 @@
+# @tiptap/react
+[![Version](https://img.shields.io/npm/v/@tiptap/react.svg?label=version)](https://www.npmjs.com/package/@tiptap/react)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/react.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
+[![License](https://img.shields.io/npm/l/@tiptap/react.svg)](https://www.npmjs.com/package/@tiptap/react)
+[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
+
+## Introduction
+tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
+
+## Offical Documentation
+Documentation can be found on the [tiptap website](https://tiptap.dev).
+
+## License
+tiptap is open-sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap-next/blob/main/LICENSE.md).

packages/react/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@tiptap/react",
+  "description": "React components for tiptap",
+  "version": "2.0.0-alpha.1",
+  "homepage": "https://tiptap.dev",
+  "keywords": [
+    "tiptap",
+    "tiptap react components"
+  ],
+  "license": "MIT",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/ueberdosis"
+  },
+  "main": "dist/tiptap-react.cjs.js",
+  "umd": "dist/tiptap-react.umd.js",
+  "module": "dist/tiptap-react.esm.js",
+  "unpkg": "dist/tiptap-react.bundle.umd.min.js",
+  "types": "dist/packages/react/src/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "peerDependencies": {
+    "@tiptap/core": "^2.0.0-alpha.6",
+    "react": "^17.0.1"
+  },
+  "dependencies": {
+    "prosemirror-view": "^1.17.6"
+  }
+}

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'