mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2024-11-24 19:59:02 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

update textalign commands

Browse Source
This commit is contained in:
Philipp Kühn 2020-11-18 12:34:06 +01:00
parent ab5e144a5f
commit 86fef8eca1
3 changed files with 20 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/src/demos/Examples/Formatting/index.vue
View File

@ -19,16 +19,16 @@
<button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
paragraph
</button>
<button @click="editor.chain().focus().textAlign('left').run()">
<button @click="editor.chain().focus().setTextAlign('left').run()">
left
</button>
<button @click="editor.chain().focus().textAlign('center').run()">
<button @click="editor.chain().focus().setTextAlign('center').run()">
center
</button>
<button @click="editor.chain().focus().textAlign('right').run()">
<button @click="editor.chain().focus().setTextAlign('right').run()">
right
</button>
<button @click="editor.chain().focus().textAlign('justify').run()">
<button @click="editor.chain().focus().setTextAlign('justify').run()">
justify
</button>
</div>

8
docs/src/demos/Extensions/TextAlign/index.vue
View File

@ -1,15 +1,15 @@
<template>
<div v-if="editor">
<button @click="editor.chain().focus().textAlign('left').run()">
<button @click="editor.chain().focus().setTextAlign('left').run()">
left
</button>
<button @click="editor.chain().focus().textAlign('center').run()">
<button @click="editor.chain().focus().setTextAlign('center').run()">
center
</button>
<button @click="editor.chain().focus().textAlign('right').run()">
<button @click="editor.chain().focus().setTextAlign('right').run()">
right
</button>
<button @click="editor.chain().focus().textAlign('justify').run()">
<button @click="editor.chain().focus().setTextAlign('justify').run()">
justify
</button>
<button @click="editor.chain().focus().resetNodeAttributes(['textAlign']).run()">

18
packages/extension-text-align/src/index.ts
View File

@ -35,15 +35,21 @@ const TextAlign = Extension.create({
addCommands() {
return {
/**
* Update the text align attribute
* Set the text align attribute
*/
textAlign: (alignment: string): Command => ({ commands }) => {
setTextAlign: (alignment: string): Command => ({ commands }) => {
if (!this.options.alignments.includes(alignment)) {
return false
}
return commands.updateNodeAttributes({ textAlign: alignment })
},
/**
* Unset the text align attribute
*/
unsetTextAlign: (): Command => ({ commands }) => {
return commands.updateNodeAttributes({ textAlign: null })
},
}
},
@ -55,10 +61,10 @@ const TextAlign = Extension.create({
Enter: () => this.editor.commands.splitBlock({
withAttributes: true,
}),
'Ctrl-Shift-l': () => this.editor.commands.textAlign('left'),
'Ctrl-Shift-e': () => this.editor.commands.textAlign('center'),
'Ctrl-Shift-r': () => this.editor.commands.textAlign('right'),
'Ctrl-Shift-j': () => this.editor.commands.textAlign('justify'),
'Ctrl-Shift-l': () => this.editor.commands.setTextAlign('left'),
'Ctrl-Shift-e': () => this.editor.commands.setTextAlign('center'),
'Ctrl-Shift-r': () => this.editor.commands.setTextAlign('right'),
'Ctrl-Shift-j': () => this.editor.commands.setTextAlign('justify'),
}
},
})