add react demo for minimal setup

This commit is contained in:
Philipp Kühn 2021-06-25 14:58:22 +02:00
parent a0e52d9402
commit 72a33b7540
6 changed files with 45 additions and 8 deletions

View File

@ -0,0 +1,28 @@
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 './styles.scss'
export default () => {
const editor = useEditor({
extensions: [
Document,
Paragraph,
Text,
],
content: `
<p>
This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. Thats it. Its probably too much for real minimalists though.
</p>
<p>
The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
</p>
`,
})
return (
<EditorContent editor={editor} />
)
}

View File

@ -0,0 +1,6 @@
/* Basic editor styles */
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
}

View File

@ -0,0 +1,7 @@
context('/demos/Examples/Minimal/Vue', () => {
before(() => {
cy.visit('/demos/Examples/Minimal/Vue')
})
// TODO: Write tests
})

View File

@ -1,7 +0,0 @@
context('/demos/Examples/Minimal', () => {
before(() => {
cy.visit('/demos/Examples/Minimal')
})
// TODO: Write tests
})

View File

@ -1,3 +1,6 @@
# Minimal setup
<demo name="Examples/Minimal" highlight="7-9,25-27" />
<demos :items="{
Vue: 'Examples/Minimal/Vue',
React: 'Examples/Minimal/React',
}" />