add extension demos
This commit is contained in:
Philipp Kühn
15
demos/src/Extensions/TextAlign/Vue/index.html
Normal file
15
demos/src/Extensions/TextAlign/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('Extensions/TextAlign', source)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
112
demos/src/Extensions/TextAlign/Vue/index.spec.js
Normal file
112
demos/src/Extensions/TextAlign/Vue/index.spec.js
Normal file
@@ -0,0 +1,112 @@
|
||||
context('/demos/Extensions/TextAlign', () => {
|
||||
before(() => {
|
||||
cy.visit('/demos/Extensions/TextAlign')
|
||||
})
|
||||
|
||||
beforeEach(() => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor.commands.setContent('<p>Example Text</p>')
|
||||
})
|
||||
})
|
||||
|
||||
it('should parse left align text correctly (and not render)', () => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor.commands.setContent('<p style="text-align: left">Example Text</p>')
|
||||
expect(editor.getHTML()).to.eq('<p>Example Text</p>')
|
||||
})
|
||||
})
|
||||
|
||||
it('should parse center align text correctly', () => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor.commands.setContent('<p style="text-align: center">Example Text</p>')
|
||||
expect(editor.getHTML()).to.eq('<p style="text-align: center">Example Text</p>')
|
||||
})
|
||||
})
|
||||
|
||||
it('should parse right align text correctly', () => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor.commands.setContent('<p style="text-align: right">Example Text</p>')
|
||||
expect(editor.getHTML()).to.eq('<p style="text-align: right">Example Text</p>')
|
||||
})
|
||||
})
|
||||
|
||||
it('should parse left justify text correctly', () => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor.commands.setContent('<p style="text-align: justify">Example Text</p>')
|
||||
expect(editor.getHTML()).to.eq('<p style="text-align: justify">Example Text</p>')
|
||||
})
|
||||
})
|
||||
|
||||
it('aligns the text left on the 1st button', () => {
|
||||
cy.get('button:nth-child(1)')
|
||||
.click()
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.find('p')
|
||||
.should('not.have.css', 'text-align', 'left')
|
||||
})
|
||||
|
||||
it('aligns the text center on the 2nd button', () => {
|
||||
cy.get('button:nth-child(2)')
|
||||
.click()
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.find('p')
|
||||
.should('have.css', 'text-align', 'center')
|
||||
})
|
||||
|
||||
it('aligns the text right on the 3rd button', () => {
|
||||
cy.get('button:nth-child(3)')
|
||||
.click()
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.find('p')
|
||||
.should('have.css', 'text-align', 'right')
|
||||
})
|
||||
|
||||
it('aligns the text justified on the 4th button', () => {
|
||||
cy.get('button:nth-child(4)')
|
||||
.click()
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.find('p')
|
||||
.should('have.css', 'text-align', 'justify')
|
||||
})
|
||||
|
||||
it('aligns the text default on the 5th button', () => {
|
||||
cy.get('button:nth-child(5)')
|
||||
.click()
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.find('p')
|
||||
.should('not.have.css', 'text-align', 'left')
|
||||
})
|
||||
|
||||
it('aligns the text left when pressing the keyboard shortcut', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.trigger('keydown', { modKey: true, shiftKey: true, key: 'l' })
|
||||
.find('p')
|
||||
.should('not.have.css', 'text-align', 'left')
|
||||
})
|
||||
|
||||
it('aligns the text center when pressing the keyboard shortcut', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.trigger('keydown', { modKey: true, shiftKey: true, key: 'e' })
|
||||
.find('p')
|
||||
.should('have.css', 'text-align', 'center')
|
||||
})
|
||||
|
||||
it('aligns the text right when pressing the keyboard shortcut', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.trigger('keydown', { modKey: true, shiftKey: true, key: 'r' })
|
||||
.find('p')
|
||||
.should('have.css', 'text-align', 'right')
|
||||
})
|
||||
|
||||
it('aligns the text justified when pressing the keyboard shortcut', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.trigger('keydown', { modKey: true, shiftKey: true, key: 'j' })
|
||||
.find('p')
|
||||
.should('have.css', 'text-align', 'justify')
|
||||
})
|
||||
})
|
||||
64
demos/src/Extensions/TextAlign/Vue/index.vue
Normal file
64
demos/src/Extensions/TextAlign/Vue/index.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<button @click="editor.chain().focus().setTextAlign('left').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'left' }) }">
|
||||
left
|
||||
</button>
|
||||
<button @click="editor.chain().focus().setTextAlign('center').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'center' }) }">
|
||||
center
|
||||
</button>
|
||||
<button @click="editor.chain().focus().setTextAlign('right').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'right' }) }">
|
||||
right
|
||||
</button>
|
||||
<button @click="editor.chain().focus().setTextAlign('justify').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'justify' }) }">
|
||||
justify
|
||||
</button>
|
||||
<button @click="editor.chain().focus().unsetTextAlign().run()">
|
||||
set default
|
||||
</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 Heading from '@tiptap/extension-heading'
|
||||
import Text from '@tiptap/extension-text'
|
||||
import TextAlign from '@tiptap/extension-text-align'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditorContent,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
editor: null,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.editor = new Editor({
|
||||
extensions: [
|
||||
Document,
|
||||
Paragraph,
|
||||
Text,
|
||||
Heading,
|
||||
TextAlign.configure({
|
||||
types: ['heading', 'paragraph'],
|
||||
}),
|
||||
],
|
||||
content: `
|
||||
<h2>Heading</h2>
|
||||
<p style="text-align: center">first paragraph</p>
|
||||
<p style="text-align: right">second paragraph</p>
|
||||
`,
|
||||
})
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user