add a demo and tests to the horizontal rule extension
This commit is contained in:
40
docs/src/demos/Extensions/HorizontalRule/index.spec.js
Normal file
40
docs/src/demos/Extensions/HorizontalRule/index.spec.js
Normal 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')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
54
docs/src/demos/Extensions/HorizontalRule/index.vue
Normal file
54
docs/src/demos/Extensions/HorizontalRule/index.vue
Normal 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>
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
# Blockquote
|
# 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.
|
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
|
## Options
|
||||||
| Option | Type | Default | Description |
|
| Option | Type | Default | Description |
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
# HorizontalRule
|
# 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 editor’s initial content, it’ll 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
|
## Options
|
||||||
| Option | Type | Default | Description |
|
| Option | Type | Default | Description |
|
||||||
@@ -9,11 +11,17 @@ Enables you to use the `<hr>` HTML tag in the editor.
|
|||||||
## Commands
|
## Commands
|
||||||
| Command | Options | Description |
|
| Command | Options | Description |
|
||||||
| --------------- | ------- | ------------------------- |
|
| --------------- | ------- | ------------------------- |
|
||||||
| horizontal_rule | — | Create a horizontal rule. |
|
| horizontalRule | — | Create a horizontal rule. |
|
||||||
|
|
||||||
## Keyboard shortcuts
|
## Keyboard shortcuts
|
||||||
*None*
|
*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
|
## Usage
|
||||||
```markup
|
```markup
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
Reference in New Issue
Block a user