ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 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
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') }"> <button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
paragraph paragraph
</button> </button>
<button @click="editor.chain().focus().textAlign('left').run()"> <button @click="editor.chain().focus().setTextAlign('left').run()">
left left
</button> </button>
<button @click="editor.chain().focus().textAlign('center').run()"> <button @click="editor.chain().focus().setTextAlign('center').run()">
center center
</button> </button>
<button @click="editor.chain().focus().textAlign('right').run()"> <button @click="editor.chain().focus().setTextAlign('right').run()">
right right
</button> </button>
<button @click="editor.chain().focus().textAlign('justify').run()"> <button @click="editor.chain().focus().setTextAlign('justify').run()">
justify justify
</button> </button>
</div> </div>

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

@@ -1,15 +1,15 @@
<template> <template>
<div v-if="editor"> <div v-if="editor">
<button @click="editor.chain().focus().textAlign('left').run()"> <button @click="editor.chain().focus().setTextAlign('left').run()">
left left
</button> </button>
<button @click="editor.chain().focus().textAlign('center').run()"> <button @click="editor.chain().focus().setTextAlign('center').run()">
center center
</button> </button>
<button @click="editor.chain().focus().textAlign('right').run()"> <button @click="editor.chain().focus().setTextAlign('right').run()">
right right
</button> </button>
<button @click="editor.chain().focus().textAlign('justify').run()"> <button @click="editor.chain().focus().setTextAlign('justify').run()">
justify justify
</button> </button>
<button @click="editor.chain().focus().resetNodeAttributes(['textAlign']).run()"> <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() { addCommands() {
return { 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)) { if (!this.options.alignments.includes(alignment)) {
return false return false
} }
return commands.updateNodeAttributes({ textAlign: alignment }) 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({ Enter: () => this.editor.commands.splitBlock({
withAttributes: true, withAttributes: true,
}), }),
'Ctrl-Shift-l': () => this.editor.commands.textAlign('left'), 'Ctrl-Shift-l': () => this.editor.commands.setTextAlign('left'),
'Ctrl-Shift-e': () => this.editor.commands.textAlign('center'), 'Ctrl-Shift-e': () => this.editor.commands.setTextAlign('center'),
'Ctrl-Shift-r': () => this.editor.commands.textAlign('right'), 'Ctrl-Shift-r': () => this.editor.commands.setTextAlign('right'),
'Ctrl-Shift-j': () => this.editor.commands.textAlign('justify'), 'Ctrl-Shift-j': () => this.editor.commands.setTextAlign('justify'),
} }
}, },
}) })