add blockquote commands
This commit is contained in:
@@ -49,7 +49,7 @@
|
|||||||
<button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
|
<button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
|
||||||
code block
|
code block
|
||||||
</button>
|
</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
|
blockquote
|
||||||
</button>
|
</button>
|
||||||
<button @click="editor.chain().focus().horizontalRule().run()">
|
<button @click="editor.chain().focus().horizontalRule().run()">
|
||||||
|
|||||||
@@ -49,7 +49,7 @@
|
|||||||
<button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
|
<button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
|
||||||
code block
|
code block
|
||||||
</button>
|
</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
|
blockquote
|
||||||
</button>
|
</button>
|
||||||
<button @click="editor.chain().focus().horizontalRule().run()">
|
<button @click="editor.chain().focus().horizontalRule().run()">
|
||||||
|
|||||||
@@ -49,7 +49,7 @@
|
|||||||
<button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
|
<button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
|
||||||
code block
|
code block
|
||||||
</button>
|
</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
|
blockquote
|
||||||
</button>
|
</button>
|
||||||
<button @click="editor.chain().focus().horizontalRule().run()">
|
<button @click="editor.chain().focus().horizontalRule().run()">
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-if="editor">
|
<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
|
blockquote
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|||||||
16
packages/core/src/commands/lift.ts
Normal file
16
packages/core/src/commands/lift.ts
Normal 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)
|
||||||
|
}
|
||||||
@@ -4,13 +4,13 @@ import { Command } from '../types'
|
|||||||
import nodeIsActive from '../utils/nodeIsActive'
|
import nodeIsActive from '../utils/nodeIsActive'
|
||||||
import getNodeType from '../utils/getNodeType'
|
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 type = getNodeType(typeOrName, state.schema)
|
||||||
const isActive = nodeIsActive(state, type, attrs)
|
const isActive = nodeIsActive(state, type, attributes)
|
||||||
|
|
||||||
if (isActive) {
|
if (isActive) {
|
||||||
return lift(state, dispatch)
|
return lift(state, dispatch)
|
||||||
}
|
}
|
||||||
|
|
||||||
return wrapIn(type, attrs)(state, dispatch)
|
return wrapIn(type, attributes)(state, dispatch)
|
||||||
}
|
}
|
||||||
|
|||||||
16
packages/core/src/commands/wrapIn.ts
Normal file
16
packages/core/src/commands/wrapIn.ts
Normal 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)
|
||||||
|
}
|
||||||
@@ -9,6 +9,7 @@ import extendMarkRange from '../commands/extendMarkRange'
|
|||||||
import focus from '../commands/focus'
|
import focus from '../commands/focus'
|
||||||
import insertHTML from '../commands/insertHTML'
|
import insertHTML from '../commands/insertHTML'
|
||||||
import insertText from '../commands/insertText'
|
import insertText from '../commands/insertText'
|
||||||
|
import lift from '../commands/lift'
|
||||||
import liftListItem from '../commands/liftListItem'
|
import liftListItem from '../commands/liftListItem'
|
||||||
import removeMark from '../commands/removeMark'
|
import removeMark from '../commands/removeMark'
|
||||||
import removeMarks from '../commands/removeMarks'
|
import removeMarks from '../commands/removeMarks'
|
||||||
@@ -27,6 +28,7 @@ import toggleMark from '../commands/toggleMark'
|
|||||||
import toggleWrap from '../commands/toggleWrap'
|
import toggleWrap from '../commands/toggleWrap'
|
||||||
import tryCommand from '../commands/try'
|
import tryCommand from '../commands/try'
|
||||||
import updateNodeAttributes from '../commands/updateNodeAttributes'
|
import updateNodeAttributes from '../commands/updateNodeAttributes'
|
||||||
|
import wrapIn from '../commands/wrapIn'
|
||||||
import wrapInList from '../commands/wrapInList'
|
import wrapInList from '../commands/wrapInList'
|
||||||
|
|
||||||
export const Commands = Extension.create({
|
export const Commands = Extension.create({
|
||||||
@@ -72,6 +74,10 @@ export const Commands = Extension.create({
|
|||||||
* Insert a string of text at the current position.
|
* Insert a string of text at the current position.
|
||||||
*/
|
*/
|
||||||
insertText,
|
insertText,
|
||||||
|
/**
|
||||||
|
* Removes an existing wrap.
|
||||||
|
*/
|
||||||
|
lift,
|
||||||
/**
|
/**
|
||||||
* Lift the list item into a wrapping list.
|
* Lift the list item into a wrapping list.
|
||||||
*/
|
*/
|
||||||
@@ -144,6 +150,10 @@ export const Commands = Extension.create({
|
|||||||
* Update attributes of a node.
|
* Update attributes of a node.
|
||||||
*/
|
*/
|
||||||
updateNodeAttributes,
|
updateNodeAttributes,
|
||||||
|
/**
|
||||||
|
* Wraps nodes in another node.
|
||||||
|
*/
|
||||||
|
wrapIn,
|
||||||
/**
|
/**
|
||||||
* Wrap a node in a list.
|
* Wrap a node in a list.
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -34,18 +34,30 @@ const Blockquote = Node.create({
|
|||||||
|
|
||||||
addCommands() {
|
addCommands() {
|
||||||
return {
|
return {
|
||||||
|
/**
|
||||||
|
* Set a blockquote node
|
||||||
|
*/
|
||||||
|
setBlockquote: (): Command => ({ commands }) => {
|
||||||
|
return commands.wrapIn('blockquote')
|
||||||
|
},
|
||||||
/**
|
/**
|
||||||
* Toggle a blockquote node
|
* Toggle a blockquote node
|
||||||
*/
|
*/
|
||||||
blockquote: (): Command => ({ commands }) => {
|
toggleBlockquote: (): Command => ({ commands }) => {
|
||||||
return commands.toggleWrap('blockquote')
|
return commands.toggleWrap('blockquote')
|
||||||
},
|
},
|
||||||
|
/**
|
||||||
|
* Unset a blockquote node
|
||||||
|
*/
|
||||||
|
unsetBlockquote: (): Command => ({ commands }) => {
|
||||||
|
return commands.lift('blockquote')
|
||||||
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
addKeyboardShortcuts() {
|
addKeyboardShortcuts() {
|
||||||
return {
|
return {
|
||||||
'Shift-Mod-9': () => this.editor.commands.blockquote(),
|
'Shift-Mod-9': () => this.editor.commands.toggleBlockquote(),
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user