[Bug]: Default value of text-align doesn't set any style on the element

[kouroshezzati]

Affected Packages

extension-text-align

Version(s)

2.4.0

Bug Description

When using the Tiptap rich text editor, I encountered an issue where the text-align style is not added to the output for text elements aligned to the default alignment (right in my case). This leads to a problem when the output is displayed on a page with a global text-align: center style. The text, expected to align right, is instead centered because the necessary text-align style is missing.

This issue still exist on the demo page. that's why I checked "Yes, I've updated all my dependencies."

Steps to Reproduce

1. Set up a Tiptap editor with the default text alignment set to right.
2. Enter some text in the editor and apply the right text align formatting.
3. Save or render the editor's output on a page with a global text-align: center style.

Browser Used

Chrome

Code Example URL

No response

Expected Behavior

The editor should add a text-align style explicitly to the output for right-aligned text, even if right is the default alignment. Alternatively, a solution that ensures no unintended alignment issues when the text is displayed elsewhere.

Additional Context (Optional)

Suggested Solution
Add text-align: initial; to the CSS rules for default text alignment. This ensures that the text alignment property does not inherit global styles unintentionally.

By setting text-align: initial;, the text alignment falls back to the browser's default behavior unless explicitly overridden, providing a robust solution for scenarios with global alignment styles.

Dependency Updates

• Yes, I've updated all my dependencies.

[kouroshezzati]

Here’s an improved and polished version of the solution you provided:

---

Solution for Ensuring TextAlign Adds Left or Right Values

To allow the TextAlign extension in Tiptap to explicitly include text-align: left or text-align: right values in the output, you can set the defaultAlignment to 'initial'. While 'initial' is not officially listed as an accepted value for defaultAlignment, it works in JavaScript. However, if you're using TypeScript, this might trigger a type-checking error.

Here’s an example configuration:

TextAlign.configure({
  types: ['heading', 'paragraph'],
  defaultAlignment: 'initial', // Ensures 'left' or 'right' values are included explicitly
});

Notes:

1. Why Use 'initial':

   • The 'initial' value resets the text-align property to its default behavior, ensuring no unintended inheritance or alignment conflicts. It allows the explicit inclusion of left or right values when required.

2. TypeScript Caveat:

   • If using TypeScript, you might encounter a type error because 'initial' is not part of the defined defaultAlignment type. To address this, you can cast the value as follows:

     TextAlign.configure({
       types: ['heading', 'paragraph'],
       defaultAlignment: 'initial' as 'left' | 'right' | 'center' | 'justify',
     });

     This ensures compatibility with TypeScript's type-checking.

3. Benefits:

   • Prevents unexpected text alignment issues when the editor's output is rendered in environments with global styles.
   • Ensures consistent and predictable alignment behavior across different contexts.