56 lines
1.5 KiB
JavaScript
56 lines
1.5 KiB
JavaScript
import React from 'react'
|
|
import { useEditor, EditorContent } from '@tiptap/react'
|
|
import Document from '@tiptap/extension-document'
|
|
import Paragraph from '@tiptap/extension-paragraph'
|
|
import Text from '@tiptap/extension-text'
|
|
import BulletList from '@tiptap/extension-bullet-list'
|
|
import ListItem from '@tiptap/extension-list-item'
|
|
import './styles.scss'
|
|
|
|
export default () => {
|
|
const editor = useEditor({
|
|
extensions: [Document, Paragraph, Text, BulletList, ListItem],
|
|
content: `
|
|
<ul>
|
|
<li>A list item</li>
|
|
<li>And another one</li>
|
|
</ul>
|
|
`,
|
|
})
|
|
|
|
if (!editor) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
onClick={() => editor.chain().focus().toggleBulletList().run()}
|
|
className={editor.isActive('bulletList') ? 'is-active' : ''}
|
|
>
|
|
toggleBulletList
|
|
</button>
|
|
<button
|
|
onClick={() => editor.chain().focus().splitListItem('listItem').run()}
|
|
disabled={!editor.can().splitListItem('listItem')}
|
|
>
|
|
splitListItem
|
|
</button>
|
|
<button
|
|
onClick={() => editor.chain().focus().sinkListItem('listItem').run()}
|
|
disabled={!editor.can().sinkListItem('listItem')}
|
|
>
|
|
sinkListItem
|
|
</button>
|
|
<button
|
|
onClick={() => editor.chain().focus().liftListItem('listItem').run()}
|
|
disabled={!editor.can().liftListItem('listItem')}
|
|
>
|
|
liftListItem
|
|
</button>
|
|
|
|
<EditorContent editor={editor} />
|
|
</>
|
|
)
|
|
}
|