add a demo and tests to the horizontal rule extension

This commit is contained in:
Hans Pagel
2020-09-10 12:55:15 +02:00
parent 860b6385ad
commit 6f898a004b
4 changed files with 105 additions and 3 deletions

View File

@@ -0,0 +1,40 @@
context('/api/extensions/horizontal-rule', () => {
beforeEach(() => {
cy.visit('/api/extensions/horizontal-rule')
cy.get('.ProseMirror').window().then(window => {
const { editor } = window
editor.setContent('<p>Example Text</p>')
})
})
describe('horizontal-rule', () => {
it('the button should add a horizontal rule', () => {
cy.get('.ProseMirror hr').should('not.exist')
cy.get('.demo__preview button:first').click({ force: true })
cy.get('.ProseMirror hr').should('exist')
})
it('the default markdown shortcut should add a horizontal rule', () => {
cy.get('.ProseMirror').window().then(window => {
const { editor } = window
editor.clearContent()
cy.get('.ProseMirror hr').should('not.exist')
cy.get('.ProseMirror').type('---', {force: true})
cy.get('.ProseMirror hr').should('exist')
})
})
it('the alternative markdown shortcut should add a horizontal rule', () => {
cy.get('.ProseMirror').window().then(window => {
const { editor } = window
editor.clearContent()
cy.get('.ProseMirror hr').should('not.exist')
cy.get('.ProseMirror').type('___ ', {force: true})
cy.get('.ProseMirror hr').should('exist')
})
})
})
})

View File

@@ -0,0 +1,54 @@
<template>
<div v-if="editor">
<button @click="editor.focus().horizontalRule()">
horizontalRule
</button>
<editor-content :editor="editor" />
</div>
</template>
<script>
import { Editor } from '@tiptap/core'
import { EditorContent } from '@tiptap/vue'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import HorizontalRule from '@tiptap/extension-horizontal-rule'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
extensions: [
Document(),
Paragraph(),
Text(),
HorizontalRule(),
],
content: `
<p>This is a paragraph.</p>
<hr>
<p>And this is another paragraph.</p>
<hr>
<p>But between those paragraphs are horizontal rules.</p>
`,
})
window.editor = this.editor
},
beforeDestroy() {
this.editor.destroy()
}
}
</script>

View File

@@ -1,7 +1,7 @@
# Blockquote
The Blockquote extension enables you to use the `<blockquote>` HTML tag in the editor. This is great you might have guessed to use quotes in the editor.
Type `> ` on the beginning of a new line and it will be magically transformed to a blockquote.
Type `> ` at the beginning of a new line and it will be magically transformed to a blockquote.
## Options
| Option | Type | Default | Description |

View File

@@ -1,5 +1,7 @@
# HorizontalRule
Enables you to use the `<hr>` HTML tag in the editor.
Use this extension to render a `<hr>` HTML tag. If you pass `<hr>` in the editors initial content, itll be rendered accordingly.
Type `---` (three dashes) or `___ ` (three underscores and a space) at the beginning of a new line and it will be magically transformed to a horizontal rule.
## Options
| Option | Type | Default | Description |
@@ -9,11 +11,17 @@ Enables you to use the `<hr>` HTML tag in the editor.
## Commands
| Command | Options | Description |
| --------------- | ------- | ------------------------- |
| horizontal_rule | — | Create a horizontal rule. |
| horizontalRule | — | Create a horizontal rule. |
## Keyboard shortcuts
*None*
## Source Code
[packages/extension-horizontal-rule/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-horizontal-rule/)
## Usage
<demo name="Extensions/HorizontalRule" highlight="3-5,17,36" />
## Usage
```markup
<template>