feat(text-align): add toggle command (#6101)

* feat(text-align): add toggle command

* docs: changeset

* Update .changeset/spotty-cobras-shake.md

---------

Co-authored-by: bdbch <6538827+bdbch@users.noreply.github.com>

.changeset/spotty-cobras-shake.md

@@ -0,0 +1,5 @@
+---
+"@tiptap/extension-text-align": major
+---
+
+Added new `toggleTextAlign` command to TextAlign extension to make toggling text alignments easier to handle

demos/src/Extensions/TextAlign/React/index.jsx

@@ -61,6 +61,12 @@ export default () => {
           <button onClick={() => editor.chain().focus().unsetTextAlign().run()}>
             Unset text align
           </button>
+          <button
+            onClick={() => editor.chain().focus().toggleTextAlign('right').run()}
+            className={editor.isActive({ textAlign: 'right' }) ? 'is-active' : ''}
+          >
+            Toggle Right
+          </button>
           <button
             onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
             className={editor.isActive({ level: 1 }) ? 'is-active' : ''}

demos/src/Extensions/TextAlign/React/index.spec.js

@@ -89,6 +89,14 @@ context('/src/Extensions/TextAlign/React/', () => {
     cy.get('.tiptap').find('p').should('not.have.css', 'text-align', 'left')
   })
 
+  it('toggle the text to right on the 6rd button', () => {
+    cy.get('button:nth-child(6)').click()
+    cy.get('.tiptap').find('p').should('not.have.css', 'text-align', 'right')
+
+    cy.get('button:nth-child(6)').click()
+    cy.get('.tiptap').find('p').should('not.have.css', 'text-align', 'left')
+  })
+
   it('aligns the text left when pressing the keyboard shortcut', () => {
     cy.get('.tiptap')
       .trigger('keydown', { modKey: true, shiftKey: true, key: 'l' })

demos/src/Extensions/TextAlign/Vue/index.spec.js

@@ -104,6 +104,22 @@ context('/src/Extensions/TextAlign/Vue/', () => {
       .should('not.have.css', 'text-align', 'left')
   })
 
+  it('toggle the text to right on the 6rd button', () => {
+    cy.get('button:nth-child(6)')
+      .click()
+
+    cy.get('.tiptap')
+      .find('p')
+      .should('have.css', 'text-align', 'right')
+
+    cy.get('button:nth-child(6)')
+      .click()
+
+    cy.get('.tiptap')
+      .find('p')
+      .should('have.css', 'text-align', 'left')
+  })
+
   it('aligns the text left when pressing the keyboard shortcut', () => {
     cy.get('.tiptap')
       .trigger('keydown', { modKey: true, shiftKey: true, key: 'l' })

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

@@ -17,6 +17,9 @@
         <button @click="editor.chain().focus().unsetTextAlign().run()">
           Unset text align
         </button>
+        <button @click="editor.chain().focus().toggleTextAlign('right').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'right' }) }">
+          Toggle Right
+        </button>
       </div>
     </div>
     <editor-content :editor="editor" />

packages/extension-text-align/src/text-align.ts

@@ -37,6 +37,12 @@ declare module '@tiptap/core' {
        * @example editor.commands.unsetTextAlign()
        */
       unsetTextAlign: () => ReturnType,
+      /**
+       * Toggle the text align attribute
+       * @param alignment The alignment
+       * @example editor.commands.toggleTextAlign('right')
+       */
+      toggleTextAlign: (alignment: string) => ReturnType,
     }
   }
 }
@@ -98,6 +104,17 @@ export const TextAlign = Extension.create<TextAlignOptions>({
           .map(type => commands.resetAttributes(type, 'textAlign'))
           .every(response => response)
       },
+
+      toggleTextAlign: alignment => ({ editor, commands }) => {
+        if (!this.options.alignments.includes(alignment)) {
+          return false
+        }
+
+        if (editor.isActive({ textAlign: alignment })) {
+          return commands.unsetTextAlign()
+        }
+        return commands.setTextAlign(alignment)
+      },
     }
   },