mirror of
https://github.com/ueberdosis/tiptap.git
synced 2025-01-18 14:13:21 +08:00
add react demo for minimal setup
This commit is contained in:
parent
a0e52d9402
commit
72a33b7540
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
|
||||
|
||||
<demo name="Examples/Minimal" highlight="7-9,25-27" />
|
||||
<demos :items="{
|
||||
Vue: 'Examples/Minimal/Vue',
|
||||
React: 'Examples/Minimal/React',
|
||||
}" />
|
||||
|
Loading…
Reference in New Issue
Block a user