add textAlign command

docs/src/demos/Extensions/TextAlign/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div v-if="editor">
-    <button @click="editor.chain().focus().setNodeAttributes({ textAlign: 'left' }).run()">
+    <button @click="editor.chain().focus().textAlign('left').run()">
       left
     </button>
-    <button @click="editor.chain().focus().setNodeAttributes({ textAlign: 'center' }).run()">
+    <button @click="editor.chain().focus().textAlign('center').run()">
       center
     </button>
-    <button @click="editor.chain().focus().setNodeAttributes({ textAlign: 'right' }).run()">
+    <button @click="editor.chain().focus().textAlign('right').run()">
       right
     </button>
     <editor-content :editor="editor" />

packages/extension-text-align/index.ts

@@ -1,12 +1,14 @@
-import { createExtension } from '@tiptap/core'
+import { Command, createExtension } from '@tiptap/core'
 
 type TextAlignOptions = {
   types: string[],
+  alignments: string[],
 }
 
 const TextAlign = createExtension({
   defaultOptions: <TextAlignOptions>{
     types: ['heading', 'paragraph'],
+    alignments: ['left', 'center', 'right'],
   },
 
   addGlobalAttributes() {
@@ -24,6 +26,18 @@ const TextAlign = createExtension({
       },
     ]
   },
+
+  addCommands() {
+    return {
+      textAlign: (alignment: string): Command => ({ commands }) => {
+        if (!this.options.alignments.includes(alignment)) {
+          return false
+        }
+
+        return commands.setNodeAttributes({ textAlign: alignment })
+      },
+    }
+  },
 })
 
 export default TextAlign