fix react setup
This commit is contained in:
30
docs/src/demos/React/components/Editor.jsx
Normal file
30
docs/src/demos/React/components/Editor.jsx
Normal file
@@ -0,0 +1,30 @@
|
||||
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.json())
|
||||
})
|
||||
|
||||
setEditor(e)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<EditorContext.Provider value={editor}>
|
||||
{editorRef.current && children}
|
||||
<div ref={editorRef} />
|
||||
</EditorContext.Provider>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user