remove old react example

This commit is contained in:
Philipp Kühn 2021-03-08 22:10:51 +01:00
parent a01b7356d7
commit c0fab9d685
3 changed files with 1 additions and 104 deletions

View File

@ -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>
)
}

View File

@ -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>
</>
)
}

View File

@ -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" />