From ce914528d34b414469a765a261ee30b085fd1a77 Mon Sep 17 00:00:00 2001
From: bdbch <6538827+bdbch@users.noreply.github.com>
Date: Mon, 2 Dec 2024 10:54:06 +0100
Subject: [PATCH] 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                  |  5 +++++
 .../src/Extensions/TextAlign/React/index.spec.js  | 15 +++++++++++----
 demos/src/Extensions/TextAlign/Vue/index.spec.js  | 13 ++++++++++---
 packages/extension-text-align/src/text-align.ts   |  8 ++++----
 4 files changed, 30 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/plenty-readers-sin.md

diff --git a/.changeset/plenty-readers-sin.md b/.changeset/plenty-readers-sin.md
new file mode 100644
index 00000000000..6ac0f255f06
--- /dev/null
+++ b/.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**.
diff --git a/demos/src/Extensions/TextAlign/React/index.spec.js b/demos/src/Extensions/TextAlign/React/index.spec.js
index 72cf68e100e..98891c2dfe0 100644
--- a/demos/src/Extensions/TextAlign/React/index.spec.js
+++ b/demos/src/Extensions/TextAlign/React/index.spec.js
@@ -9,13 +9,20 @@ 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 style="text-align: left">Example Text</p>')
+      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 style="text-align: left">Example Text</p>')
+    })
+  })
+
   it('should parse center align text correctly', () => {
     cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.setContent('<p style="text-align: center">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', () => {
diff --git a/demos/src/Extensions/TextAlign/Vue/index.spec.js b/demos/src/Extensions/TextAlign/Vue/index.spec.js
index 3c413f28ea9..0f6bff4f28f 100644
--- a/demos/src/Extensions/TextAlign/Vue/index.spec.js
+++ b/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', () => {
diff --git a/packages/extension-text-align/src/text-align.ts b/packages/extension-text-align/src/text-align.ts
index 6e63f2ee40b..13e475aa6ae 100644
--- a/packages/extension-text-align/src/text-align.ts
+++ b/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 {}
               }