add react demo for minimal setup
This commit is contained in:
28
docs/src/demos/Examples/Minimal/React/index.jsx
Normal file
28
docs/src/demos/Examples/Minimal/React/index.jsx
Normal 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. That’s it. It’s 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} />
|
||||||
|
)
|
||||||
|
}
|
||||||
6
docs/src/demos/Examples/Minimal/React/styles.scss
Normal file
6
docs/src/demos/Examples/Minimal/React/styles.scss
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
/* Basic editor styles */
|
||||||
|
.ProseMirror {
|
||||||
|
> * + * {
|
||||||
|
margin-top: 0.75em;
|
||||||
|
}
|
||||||
|
}
|
||||||
7
docs/src/demos/Examples/Minimal/Vue/index.spec.js
Normal file
7
docs/src/demos/Examples/Minimal/Vue/index.spec.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
context('/demos/Examples/Minimal/Vue', () => {
|
||||||
|
before(() => {
|
||||||
|
cy.visit('/demos/Examples/Minimal/Vue')
|
||||||
|
})
|
||||||
|
|
||||||
|
// TODO: Write tests
|
||||||
|
})
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
context('/demos/Examples/Minimal', () => {
|
|
||||||
before(() => {
|
|
||||||
cy.visit('/demos/Examples/Minimal')
|
|
||||||
})
|
|
||||||
|
|
||||||
// TODO: Write tests
|
|
||||||
})
|
|
||||||
@@ -1,3 +1,6 @@
|
|||||||
# Minimal setup
|
# Minimal setup
|
||||||
|
|
||||||
<demo name="Examples/Minimal" highlight="7-9,25-27" />
|
<demos :items="{
|
||||||
|
Vue: 'Examples/Minimal/Vue',
|
||||||
|
React: 'Examples/Minimal/React',
|
||||||
|
}" />
|
||||||
|
|||||||
Reference in New Issue
Block a user