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
|
||||
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 |
|
||||
|
||||
@@ -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 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
|
||||
| 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>
|
||||
|
||||
Reference in New Issue
Block a user