remove old react example
This commit is contained in:
@@ -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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,69 +0,0 @@
|
|||||||
import React, { useState } from 'react'
|
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
|
||||||
import { useEditor, Editor } from '@tiptap/react'
|
|
||||||
|
|
||||||
// Menu bar example component
|
|
||||||
// useEditor only works for child components of <Editor />
|
|
||||||
const MenuBar = () => {
|
|
||||||
const editor = useEditor()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<button onClick={() => editor.chain().focus().unsetAllMarks().run()}>
|
|
||||||
Clear formatting
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className={`${editor.isActive('bold') ? 'is-active' : ''}`}
|
|
||||||
onClick={() => editor.chain().focus().toggleBold().run()}
|
|
||||||
>
|
|
||||||
Bold
|
|
||||||
</button>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default () => {
|
|
||||||
const [value, setValue] = useState({
|
|
||||||
type: 'doc',
|
|
||||||
content: [
|
|
||||||
{
|
|
||||||
type: 'paragraph',
|
|
||||||
content: [
|
|
||||||
{
|
|
||||||
type: 'text',
|
|
||||||
text: 'rendered in ',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'text',
|
|
||||||
marks: [
|
|
||||||
{
|
|
||||||
type: 'bold',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
text: 'react',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'text',
|
|
||||||
text: '!',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
})
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<p>
|
|
||||||
<button onClick={() => alert(JSON.stringify(value))}>Alert state</button>
|
|
||||||
</p>
|
|
||||||
<hr style={{ margin: '0.85rem 0' }} />
|
|
||||||
<Editor
|
|
||||||
value={value}
|
|
||||||
onChange={setValue}
|
|
||||||
extensions={defaultExtensions()}
|
|
||||||
>
|
|
||||||
<MenuBar />
|
|
||||||
</Editor>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -7,4 +7,4 @@ The following guide describes how to integrate tiptap with your [React](https://
|
|||||||
|
|
||||||
TODO
|
TODO
|
||||||
|
|
||||||
<demo name="React" />
|
<demo name="Examples/Default/React" />
|
||||||
|
|||||||
Reference in New Issue
Block a user