Force add text align styles when a defaultAlignment is set (#5891)

* fix: make TextAlign defaultAlignment setting work as expected

* allow defaultAlignment to be nullable, dont add text align if defaultAlignment is null

* added changeset

* remove default alignment from demo

* refactor text-align logic

* adjust tests to expect the new behavior

* adjust vue tests to expect the new behavior

---------

Co-authored-by: Joe <joe@Joes-MBP.lan>

.changeset/plenty-readers-sin.md

@@ -0,0 +1,5 @@
+---
+"@tiptap/extension-text-align": patch
+---
+
+Fixed an issue that caused defaultAlignment options not being added as text-styles to elements. defaultAlignment is now nullable to **disable the enforced text-align styles**.

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

@@ -9,10 +9,17 @@ context('/src/Extensions/TextAlign/React/', () => {
     })
   })
 
-  it('should parse left align text correctly (and not render)', () => {
+  it('should parse a null alignment correctly', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.setContent('<p>Example Text</p>')
+      expect(editor.getHTML()).to.eq('<p>Example Text</p>')
+    })
+  })
+
+  it('should parse left align text correctly', () => {
     cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.setContent('<p style="text-align: left">Example Text</p>')
-      expect(editor.getHTML()).to.eq('<p>Example Text</p>')
+      expect(editor.getHTML()).to.eq('<p style="text-align: left">Example Text</p>')
     })
   })
 
@@ -55,7 +62,7 @@ context('/src/Extensions/TextAlign/React/', () => {
   it('aligns the text left on the 1st button', () => {
     cy.get('button:nth-child(1)').click()
 
-    cy.get('.tiptap').find('p').should('not.have.css', 'text-align', 'left')
+    cy.get('.tiptap').find('p').should('have.css', 'text-align', 'left')
   })
 
   it('aligns the text center on the 2nd button', () => {
@@ -86,7 +93,7 @@ context('/src/Extensions/TextAlign/React/', () => {
     cy.get('.tiptap')
       .trigger('keydown', { modKey: true, shiftKey: true, key: 'l' })
       .find('p')
-      .should('not.have.css', 'text-align', 'left')
+      .should('have.css', 'text-align', 'left')
   })
 
   it('aligns the text center when pressing the keyboard shortcut', () => {

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

@@ -9,10 +9,17 @@ context('/src/Extensions/TextAlign/Vue/', () => {
     })
   })
 
+  it('should parse a null alignment correctly', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.setContent('<p>Example Text</p>')
+      expect(editor.getHTML()).to.eq('<p>Example Text</p>')
+    })
+  })
+
   it('should parse left align text correctly (and not render)', () => {
     cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.setContent('<p style="text-align: left">Example Text</p>')
-      expect(editor.getHTML()).to.eq('<p>Example Text</p>')
+      expect(editor.getHTML()).to.eq('<p style="text-align: left">Example Text</p>')
     })
   })
 
@@ -58,7 +65,7 @@ context('/src/Extensions/TextAlign/Vue/', () => {
 
     cy.get('.tiptap')
       .find('p')
-      .should('not.have.css', 'text-align', 'left')
+      .should('have.css', 'text-align', 'left')
   })
 
   it('aligns the text center on the 2nd button', () => {
@@ -101,7 +108,7 @@ context('/src/Extensions/TextAlign/Vue/', () => {
     cy.get('.tiptap')
       .trigger('keydown', { modKey: true, shiftKey: true, key: 'l' })
       .find('p')
-      .should('not.have.css', 'text-align', 'left')
+      .should('have.css', 'text-align', 'left')
   })
 
   it('aligns the text center when pressing the keyboard shortcut', () => {

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

@@ -20,7 +20,7 @@ export interface TextAlignOptions {
    * @default 'left'
    * @example 'center'
    */
-  defaultAlignment: string,
+  defaultAlignment: string | null,
 }
 
 declare module '@tiptap/core' {
@@ -52,7 +52,7 @@ export const TextAlign = Extension.create<TextAlignOptions>({
     return {
       types: [],
       alignments: ['left', 'center', 'right', 'justify'],
-      defaultAlignment: 'left',
+      defaultAlignment: null,
     }
   },
 
@@ -64,12 +64,12 @@ export const TextAlign = Extension.create<TextAlignOptions>({
           textAlign: {
             default: this.options.defaultAlignment,
             parseHTML: element => {
-              const alignment = element.style.textAlign || this.options.defaultAlignment
+              const alignment = element.style.textAlign
 
               return this.options.alignments.includes(alignment) ? alignment : this.options.defaultAlignment
             },
             renderHTML: attributes => {
-              if (attributes.textAlign === this.options.defaultAlignment) {
+              if (!attributes.textAlign) {
                 return {}
               }