mirror of
https://github.com/ueberdosis/tiptap.git
synced 2025-01-18 06:03:22 +08:00
remove old react example
This commit is contained in:
parent
a01b7356d7
commit
c0fab9d685
@ -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
|
||||
|
||||
<demo name="React" />
|
||||
<demo name="Examples/Default/React" />
|
||||
|
Loading…
Reference in New Issue
Block a user