add node demos
This commit is contained in:
Philipp Kühn
15
demos/src/Nodes/Heading/Vue/index.html
Normal file
15
demos/src/Nodes/Heading/Vue/index.html
Normal file
@@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module">
|
||||
import setup from '../../../../setup/vue.ts'
|
||||
import source from '@source'
|
||||
setup('Nodes/Heading', source)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
142
demos/src/Nodes/Heading/Vue/index.spec.js
Normal file
142
demos/src/Nodes/Heading/Vue/index.spec.js
Normal file
@@ -0,0 +1,142 @@
|
||||
context('/demos/Nodes/Heading', () => {
|
||||
before(() => {
|
||||
cy.visit('/demos/Nodes/Heading')
|
||||
})
|
||||
|
||||
beforeEach(() => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor.commands.setContent('<p>Example Text</p>')
|
||||
cy.get('.ProseMirror').type('{selectall}')
|
||||
})
|
||||
})
|
||||
|
||||
const headings = [
|
||||
'<h1>Example Text</h1>',
|
||||
'<h2>Example Text</h2>',
|
||||
'<h3>Example Text</h3>',
|
||||
]
|
||||
|
||||
headings.forEach(html => {
|
||||
it(`should parse headings correctly (${html})`, () => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor.commands.setContent(html)
|
||||
expect(editor.getHTML()).to.eq(html)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
it('should omit disabled heading levels', () => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor.commands.setContent('<h4>Example Text</h4>')
|
||||
expect(editor.getHTML()).to.eq('<p>Example Text</p>')
|
||||
})
|
||||
})
|
||||
|
||||
it('the button should make the selected line a h1', () => {
|
||||
cy.get('.ProseMirror h1')
|
||||
.should('not.exist')
|
||||
|
||||
cy.get('button:nth-child(1)')
|
||||
.click()
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.find('h1')
|
||||
.should('contain', 'Example Text')
|
||||
})
|
||||
|
||||
it('the button should make the selected line a h2', () => {
|
||||
cy.get('.ProseMirror h2')
|
||||
.should('not.exist')
|
||||
|
||||
cy.get('button:nth-child(2)')
|
||||
.click()
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.find('h2')
|
||||
.should('contain', 'Example Text')
|
||||
})
|
||||
|
||||
it('the button should make the selected line a h3', () => {
|
||||
cy.get('.ProseMirror h3')
|
||||
.should('not.exist')
|
||||
|
||||
cy.get('button:nth-child(3)')
|
||||
.click()
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.find('h3')
|
||||
.should('contain', 'Example Text')
|
||||
})
|
||||
|
||||
it('the button should toggle the heading', () => {
|
||||
cy.get('.ProseMirror h1')
|
||||
.should('not.exist')
|
||||
|
||||
cy.get('button:nth-child(1)')
|
||||
.click()
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.find('h1')
|
||||
.should('contain', 'Example Text')
|
||||
|
||||
cy.get('button:nth-child(1)')
|
||||
.click()
|
||||
|
||||
cy.get('.ProseMirror h1')
|
||||
.should('not.exist')
|
||||
})
|
||||
|
||||
it('should make the paragraph a h1 keyboard shortcut is pressed', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.trigger('keydown', { modKey: true, altKey: true, key: '1' })
|
||||
.find('h1')
|
||||
.should('contain', 'Example Text')
|
||||
})
|
||||
|
||||
it('should make the paragraph a h2 keyboard shortcut is pressed', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.trigger('keydown', { modKey: true, altKey: true, key: '2' })
|
||||
.find('h2')
|
||||
.should('contain', 'Example Text')
|
||||
})
|
||||
|
||||
it('should make the paragraph a h3 keyboard shortcut is pressed', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.trigger('keydown', { modKey: true, altKey: true, key: '3' })
|
||||
.find('h3')
|
||||
.should('contain', 'Example Text')
|
||||
})
|
||||
|
||||
it('should make a h1 from the default markdown shortcut', () => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor.commands.clearContent()
|
||||
})
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.type('# Headline')
|
||||
.find('h1')
|
||||
.should('contain', 'Headline')
|
||||
})
|
||||
|
||||
it('should make a h2 from the default markdown shortcut', () => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor.commands.clearContent()
|
||||
})
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.type('## Headline')
|
||||
.find('h2')
|
||||
.should('contain', 'Headline')
|
||||
})
|
||||
|
||||
it('should make a h3 from the default markdown shortcut', () => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor.commands.clearContent()
|
||||
})
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.type('### Headline')
|
||||
.find('h3')
|
||||
.should('contain', 'Headline')
|
||||
})
|
||||
})
|
||||
58
demos/src/Nodes/Heading/Vue/index.vue
Normal file
58
demos/src/Nodes/Heading/Vue/index.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
|
||||
h1
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
|
||||
h2
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
|
||||
h3
|
||||
</button>
|
||||
|
||||
<editor-content :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Editor, EditorContent } from '@tiptap/vue-3'
|
||||
import Document from '@tiptap/extension-document'
|
||||
import Paragraph from '@tiptap/extension-paragraph'
|
||||
import Text from '@tiptap/extension-text'
|
||||
import Heading from '@tiptap/extension-heading'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditorContent,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
editor: null,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.editor = new Editor({
|
||||
extensions: [
|
||||
Document,
|
||||
Paragraph,
|
||||
Text,
|
||||
Heading.configure({
|
||||
levels: [1, 2, 3],
|
||||
}),
|
||||
],
|
||||
content: `
|
||||
<h1>This is a 1st level heading</h1>
|
||||
<h2>This is a 2nd level heading</h2>
|
||||
<h3>This is a 3rd level heading</h3>
|
||||
<h4>This 4th level heading will be converted to a paragraph, because levels are configured to be only 1, 2 or 3.</h4>
|
||||
`,
|
||||
})
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user