add blockquote commands

This commit is contained in:
Philipp Kühn
2020-11-18 11:54:18 +01:00
parent 3f624845e8
commit 012beb286c
9 changed files with 63 additions and 9 deletions

View File

@@ -49,7 +49,7 @@
<button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
</button>
<button @click="editor.chain().focus().blockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
blockquote
</button>
<button @click="editor.chain().focus().horizontalRule().run()">

View File

@@ -49,7 +49,7 @@
<button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
</button>
<button @click="editor.chain().focus().blockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
blockquote
</button>
<button @click="editor.chain().focus().horizontalRule().run()">

View File

@@ -49,7 +49,7 @@
<button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
</button>
<button @click="editor.chain().focus().blockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
blockquote
</button>
<button @click="editor.chain().focus().horizontalRule().run()">

View File

@@ -1,6 +1,6 @@
<template>
<div v-if="editor">
<button @click="editor.chain().focus().blockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
blockquote
</button>

View File

@@ -0,0 +1,16 @@
import { lift } from 'prosemirror-commands'
import { NodeType } from 'prosemirror-model'
import { Command } from '../types'
import nodeIsActive from '../utils/nodeIsActive'
import getNodeType from '../utils/getNodeType'
export default (typeOrName: string | NodeType, attributes = {}): Command => ({ state, dispatch }) => {
const type = getNodeType(typeOrName, state.schema)
const isActive = nodeIsActive(state, type, attributes)
if (!isActive) {
return false
}
return lift(state, dispatch)
}

View File

@@ -4,13 +4,13 @@ import { Command } from '../types'
import nodeIsActive from '../utils/nodeIsActive'
import getNodeType from '../utils/getNodeType'
export default (typeOrName: string | NodeType, attrs = {}): Command => ({ state, dispatch }) => {
export default (typeOrName: string | NodeType, attributes = {}): Command => ({ state, dispatch }) => {
const type = getNodeType(typeOrName, state.schema)
const isActive = nodeIsActive(state, type, attrs)
const isActive = nodeIsActive(state, type, attributes)
if (isActive) {
return lift(state, dispatch)
}
return wrapIn(type, attrs)(state, dispatch)
return wrapIn(type, attributes)(state, dispatch)
}

View File

@@ -0,0 +1,16 @@
import { wrapIn } from 'prosemirror-commands'
import { NodeType } from 'prosemirror-model'
import { Command } from '../types'
import nodeIsActive from '../utils/nodeIsActive'
import getNodeType from '../utils/getNodeType'
export default (typeOrName: string | NodeType, attributes = {}): Command => ({ state, dispatch }) => {
const type = getNodeType(typeOrName, state.schema)
const isActive = nodeIsActive(state, type, attributes)
if (isActive) {
return false
}
return wrapIn(type, attributes)(state, dispatch)
}

View File

@@ -9,6 +9,7 @@ import extendMarkRange from '../commands/extendMarkRange'
import focus from '../commands/focus'
import insertHTML from '../commands/insertHTML'
import insertText from '../commands/insertText'
import lift from '../commands/lift'
import liftListItem from '../commands/liftListItem'
import removeMark from '../commands/removeMark'
import removeMarks from '../commands/removeMarks'
@@ -27,6 +28,7 @@ import toggleMark from '../commands/toggleMark'
import toggleWrap from '../commands/toggleWrap'
import tryCommand from '../commands/try'
import updateNodeAttributes from '../commands/updateNodeAttributes'
import wrapIn from '../commands/wrapIn'
import wrapInList from '../commands/wrapInList'
export const Commands = Extension.create({
@@ -72,6 +74,10 @@ export const Commands = Extension.create({
* Insert a string of text at the current position.
*/
insertText,
/**
* Removes an existing wrap.
*/
lift,
/**
* Lift the list item into a wrapping list.
*/
@@ -144,6 +150,10 @@ export const Commands = Extension.create({
* Update attributes of a node.
*/
updateNodeAttributes,
/**
* Wraps nodes in another node.
*/
wrapIn,
/**
* Wrap a node in a list.
*/

View File

@@ -34,18 +34,30 @@ const Blockquote = Node.create({
addCommands() {
return {
/**
* Set a blockquote node
*/
setBlockquote: (): Command => ({ commands }) => {
return commands.wrapIn('blockquote')
},
/**
* Toggle a blockquote node
*/
blockquote: (): Command => ({ commands }) => {
toggleBlockquote: (): Command => ({ commands }) => {
return commands.toggleWrap('blockquote')
},
/**
* Unset a blockquote node
*/
unsetBlockquote: (): Command => ({ commands }) => {
return commands.lift('blockquote')
},
}
},
addKeyboardShortcuts() {
return {
'Shift-Mod-9': () => this.editor.commands.blockquote(),
'Shift-Mod-9': () => this.editor.commands.toggleBlockquote(),
}
},