mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-11-25 12:39:03 +08:00
Merge branch 'main' of github.com:ueberdosis/tiptap-next into main
This commit is contained in:
Hans Pagel
commit
72d262c9fc
48
docs/src/demos/Extensions/Blockquote/index.spec.js
Normal file
48
docs/src/demos/Extensions/Blockquote/index.spec.js
Normal file
@ -0,0 +1,48 @@
|
||||
context('/api/extensions/blockquote', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/api/extensions/blockquote')
|
||||
|
||||
cy.get('.ProseMirror').window().then(window => {
|
||||
const { editor } = window
|
||||
editor.setContent('<p>Example Text</p>')
|
||||
editor.focus().selectAll()
|
||||
})
|
||||
})
|
||||
|
||||
describe('blockquote', () => {
|
||||
it('the button should make the selected line a blockquote', () => {
|
||||
cy.get('.demo__preview button:first').click({ force: true })
|
||||
cy.get('.ProseMirror').contains('blockquote', 'Example Text')
|
||||
})
|
||||
|
||||
it('the button should toggle the blockquote', () => {
|
||||
cy.get('.demo__preview button:first').click({ force: true })
|
||||
cy.get('.ProseMirror').contains('blockquote', 'Example Text')
|
||||
cy.get('.demo__preview button:first').click({ force: true })
|
||||
cy.get('.ProseMirror blockquote').should('not.exist')
|
||||
})
|
||||
|
||||
it('the keyboard shortcut should make the selected line a blockquote', () => {
|
||||
cy.get('.ProseMirror').type('{meta}{shift}9', {force: true})
|
||||
cy.get('.ProseMirror').contains('blockquote', 'Example Text')
|
||||
})
|
||||
|
||||
it('the keyboard shortcut should toggle the blockquote', () => {
|
||||
cy.get('.ProseMirror').type('{meta}{shift}9', {force: true})
|
||||
cy.get('.ProseMirror').contains('blockquote', 'Example Text')
|
||||
cy.get('.ProseMirror').type('{meta}{shift}9', {force: true})
|
||||
cy.get('.ProseMirror blockquote').should('not.exist')
|
||||
})
|
||||
|
||||
it('should make a blockquote from markdown shortcuts', () => {
|
||||
cy.get('.ProseMirror').window().then(window => {
|
||||
const { editor } = window
|
||||
editor.clearContent()
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.type('> Quote', {force: true})
|
||||
.contains('blockquote', 'Quote')
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
53
docs/src/demos/Extensions/Blockquote/index.vue
Normal file
53
docs/src/demos/Extensions/Blockquote/index.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<button @click="editor.focus().blockquote()" :class="{ 'is-active': editor.isActive('blockquote') }">
|
||||
blockquote
|
||||
</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 Blockquote from '@tiptap/extension-blockquote'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditorContent,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
editor: null,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.editor = new Editor({
|
||||
extensions: [
|
||||
Document(),
|
||||
Paragraph(),
|
||||
Text(),
|
||||
Blockquote(),
|
||||
],
|
||||
content: `
|
||||
<blockquote>
|
||||
Life is like riding a bycicle. To keep your balance, you must keep moving.
|
||||
</blockquote>
|
||||
<p>Albert Einstein</p>
|
||||
`,
|
||||
})
|
||||
|
||||
window.editor = this.editor
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,5 +1,7 @@
|
||||
# Blockquote
|
||||
The Blockquote extension enables you to use the `<blockquote>` HTML tag 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.
|
||||
|
||||
## Options
|
||||
| Option | Type | Default | Description |
|
||||
@ -12,49 +14,11 @@ The Blockquote extension enables you to use the `<blockquote>` HTML tag in the e
|
||||
| blockquote | — | Wrap content in a blockquote. |
|
||||
|
||||
## Keyboard shortcuts
|
||||
* `Control` + `→`
|
||||
* Windows & Linux: `Control` + `Shift` + `9`
|
||||
* macOS: `Command` + `Shift` + `9`
|
||||
|
||||
## Source Code
|
||||
[packages/extension-blockquote/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-blockquote/)
|
||||
|
||||
## Usage
|
||||
```markup
|
||||
<template>
|
||||
<div>
|
||||
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
|
||||
<button type="button" :class="{ 'is-active': isActive.blockquote() }" @click="commands.blockquote">
|
||||
Blockquote
|
||||
</button>
|
||||
</editor-menu-bar>
|
||||
|
||||
<editor-content :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
|
||||
import { Blockquote } from 'tiptap-extensions'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditorMenuBar,
|
||||
EditorContent,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
editor: new Editor({
|
||||
extensions: [
|
||||
Blockquote(),
|
||||
],
|
||||
content: `
|
||||
<blockquote>
|
||||
Life is like riding a bycicle. To keep your balance, you must keep moving.
|
||||
</blockquote>
|
||||
<p>Albert Einstein</p>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
<demo name="Extensions/Blockquote" highlight="3-5,17,36" />
|
||||
|
||||
@ -115,7 +115,6 @@
|
||||
items:
|
||||
- title: Blockquote
|
||||
link: /api/extensions/blockquote
|
||||
draft: true
|
||||
- title: Bold
|
||||
link: /api/extensions/bold
|
||||
- title: BulletList
|
||||
|
||||
38
packages/extension-blockquote/index.ts
Normal file
38
packages/extension-blockquote/index.ts
Normal file
@ -0,0 +1,38 @@
|
||||
import { Node } from '@tiptap/core'
|
||||
import { textblockTypeInputRule } from 'prosemirror-inputrules'
|
||||
|
||||
declare module '@tiptap/core/src/Editor' {
|
||||
interface Editor {
|
||||
blockquote(): Editor,
|
||||
}
|
||||
}
|
||||
|
||||
export const inputRegex = /^\s*>\s$/gm
|
||||
|
||||
export default new Node()
|
||||
.name('blockquote')
|
||||
.schema(() => ({
|
||||
content: 'inline*',
|
||||
group: 'block',
|
||||
defining: true,
|
||||
draggable: false,
|
||||
parseDOM: [
|
||||
{ tag: 'blockquote' },
|
||||
],
|
||||
toDOM: () => ['blockquote', 0],
|
||||
}))
|
||||
.commands(({ editor, name }) => ({
|
||||
[name]: next => attrs => {
|
||||
editor.toggleNode(name, 'paragraph', attrs)
|
||||
next()
|
||||
},
|
||||
}))
|
||||
.keys(({ editor }) => ({
|
||||
'Shift-Mod-9': () => editor.blockquote(),
|
||||
}))
|
||||
.inputRules(({ type }) => [
|
||||
textblockTypeInputRule(inputRegex, type),
|
||||
])
|
||||
.create()
|
||||
|
||||
|
||||
17
packages/extension-blockquote/package.json
Normal file
17
packages/extension-blockquote/package.json
Normal file
@ -0,0 +1,17 @@
|
||||
{
|
||||
"name": "@tiptap/extension-blockquote",
|
||||
"version": "1.0.0",
|
||||
"source": "index.ts",
|
||||
"main": "dist/tiptap-extension-blockquote.js",
|
||||
"umd:main": "dist/tiptap-extension-blockquote.umd.js",
|
||||
"module": "dist/tiptap-extension-blockquote.mjs",
|
||||
"unpkg": "dist/tiptap-extension-blockquote.js",
|
||||
"jsdelivr": "dist/tiptap-extension-blockquote.js",
|
||||
"files": [
|
||||
"src",
|
||||
"dist"
|
||||
],
|
||||
"peerDependencies": {
|
||||
"@tiptap/core": "2.x"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user