add mark demos
This commit is contained in:
Philipp Kühn
15
demos/src/Marks/Highlight/Vue/index.html
Normal file
15
demos/src/Marks/Highlight/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('Marks/Highlight', source)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
139
demos/src/Marks/Highlight/Vue/index.spec.js
Normal file
139
demos/src/Marks/Highlight/Vue/index.spec.js
Normal file
@@ -0,0 +1,139 @@
|
||||
context('/demos/Marks/Highlight', () => {
|
||||
before(() => {
|
||||
cy.visit('/demos/Marks/Highlight')
|
||||
})
|
||||
|
||||
beforeEach(() => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor
|
||||
.chain()
|
||||
.setContent('<p>Example Text</p>')
|
||||
.selectAll()
|
||||
.run()
|
||||
})
|
||||
})
|
||||
|
||||
it('the button should highlight the selected text', () => {
|
||||
cy.get('button:first')
|
||||
.click()
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.find('mark')
|
||||
.should('contain', 'Example Text')
|
||||
})
|
||||
|
||||
it('should highlight the text in a specific color', () => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor.commands.toggleHighlight({ color: 'red' })
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.find('mark')
|
||||
.should('contain', 'Example Text')
|
||||
.should('have.attr', 'data-color', 'red')
|
||||
})
|
||||
})
|
||||
|
||||
it('should update the attributes of existing marks', () => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor
|
||||
.chain()
|
||||
.setContent('<p><mark style="background-color: blue;">Example Text</mark></p>')
|
||||
.selectAll()
|
||||
.toggleHighlight({ color: 'rgb(255, 0, 0)' })
|
||||
.run()
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.find('mark')
|
||||
.should('have.css', 'background-color', 'rgb(255, 0, 0)')
|
||||
})
|
||||
})
|
||||
|
||||
it('should remove existing marks with the same attributes', () => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor
|
||||
.chain()
|
||||
.setContent('<p><mark style="background-color: rgb(255, 0, 0);">Example Text</mark></p>')
|
||||
.selectAll()
|
||||
.toggleHighlight({ color: 'rgb(255, 0, 0)' })
|
||||
.run()
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.find('mark')
|
||||
.should('not.exist')
|
||||
})
|
||||
})
|
||||
|
||||
it('is active for mark with any attributes', () => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor
|
||||
.chain()
|
||||
.setContent('<p><mark data-color="red">Example Text</mark></p>')
|
||||
.selectAll()
|
||||
.run()
|
||||
|
||||
expect(editor.isActive('highlight')).to.eq(true)
|
||||
})
|
||||
})
|
||||
|
||||
it('is active for mark with same attributes', () => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor
|
||||
.chain()
|
||||
.setContent('<p><mark style="background-color: rgb(255, 0, 0);">Example Text</mark></p>')
|
||||
.selectAll()
|
||||
.run()
|
||||
|
||||
const isActive = editor.isActive('highlight', {
|
||||
color: 'rgb(255, 0, 0)',
|
||||
})
|
||||
|
||||
expect(isActive).to.eq(true)
|
||||
})
|
||||
})
|
||||
|
||||
it('isn’t active for mark with other attributes', () => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor
|
||||
.chain()
|
||||
.setContent('<p><mark style="background-color: rgb(255, 0, 0);">Example Text</mark></p>')
|
||||
.selectAll()
|
||||
.run()
|
||||
|
||||
const isActive = editor.isActive('highlight', {
|
||||
color: 'rgb(0, 0, 0)',
|
||||
})
|
||||
|
||||
expect(isActive).to.eq(false)
|
||||
})
|
||||
})
|
||||
|
||||
it('the button should toggle the selected text highlighted', () => {
|
||||
cy.get('button:first')
|
||||
.click()
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.type('{selectall}')
|
||||
|
||||
cy.get('button:first')
|
||||
.click()
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.find('mark')
|
||||
.should('not.exist')
|
||||
})
|
||||
|
||||
it('should highlight the selected text when the keyboard shortcut is pressed', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.trigger('keydown', { modKey: true, shiftKey: true, key: 'h' })
|
||||
.find('mark')
|
||||
.should('contain', 'Example Text')
|
||||
})
|
||||
|
||||
it('should toggle the selected text highlighted when the keyboard shortcut is pressed', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.trigger('keydown', { modKey: true, shiftKey: true, key: 'h' })
|
||||
.trigger('keydown', { modKey: true, shiftKey: true, key: 'h' })
|
||||
.find('mark')
|
||||
.should('not.exist')
|
||||
})
|
||||
})
|
||||
87
demos/src/Marks/Highlight/Vue/index.vue
Normal file
87
demos/src/Marks/Highlight/Vue/index.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<button
|
||||
@click="editor.chain().focus().toggleHighlight().run()"
|
||||
:class="{ 'is-active': editor.isActive('highlight') }"
|
||||
>
|
||||
highlight (any)
|
||||
</button>
|
||||
<button
|
||||
@click="editor.chain().focus().toggleHighlight({
|
||||
color: ''
|
||||
}).run()"
|
||||
:class="{ 'is-active': editor.isActive('highlight', {
|
||||
color: ''
|
||||
}) }"
|
||||
>
|
||||
highlight (default)
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleHighlight({ color: 'red' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: 'red' }) }">
|
||||
"red"
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleHighlight({ color: '#ffa8a8' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#ffa8a8' }) }">
|
||||
red
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleHighlight({ color: '#ffc078' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#ffc078' }) }">
|
||||
orange
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleHighlight({ color: '#8ce99a' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#8ce99a' }) }">
|
||||
green
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleHighlight({ color: '#74c0fc' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#74c0fc' }) }">
|
||||
blue
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleHighlight({ color: '#b197fc' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#b197fc' }) }">
|
||||
purple
|
||||
</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 Highlight from '@tiptap/extension-highlight'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditorContent,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
editor: null,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.editor = new Editor({
|
||||
extensions: [
|
||||
Document,
|
||||
Paragraph,
|
||||
Text,
|
||||
Highlight.configure({ multicolor: true }),
|
||||
],
|
||||
content: `
|
||||
<p>This isn’t highlighted.</s></p>
|
||||
<p><mark>But that one is.</mark></p>
|
||||
<p><mark style="background-color: red;">And this is highlighted too, but in a different color.</mark></p>
|
||||
<p><mark data-color="#ffa8a8">And this one has a data attribute.</mark></p>
|
||||
`,
|
||||
})
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
mark {
|
||||
background-color: #ffe066;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user