Strange behavior of the defaultAlignment setting in the TextAlign extension

DarthPleurotus commented 1 year ago

What’s the bug you are facing?

First off thank you to the development team and community for this great tool. So far it has been just what I needed and I am hopeful that it will be a long-term solution for me!

With the TextAlign extension enabled, I have a Tiptap editor element for which element.style.textAlign == "". However, it inherits a textAlign value, which can be accessed through window.getComputedStyle(element).textAlign. On loading, the Tiptap editor uses the inherited textAlign value rather than the default value assigned through the extension using the defaultAlignment setting.

Then, the editor allows you to change the text alignment as expected, unless you try to change it to the value set in defaultAlignment. In that case, it changes the alignment to the inherited/computed value.

Which browser was this experienced in? Are any special extensions installed?

Using Firefox 107.0 (latest)
In addition to Tiptap, I am using the following tools for development:
- Svelte 3.49.0
- Vite 3.1.0
- Typescript 4.6.4
No special extensions, just StarterKit and TextAlign

How can we reproduce the bug on our side?

The issue seems to also occur when I try using the TextAlign extension in a simple webapp made with React, so as far as I can tell it will occur as long as you install the TextAlign extension. Then, you set defaultAlignment using TextAlign.configure() so that it does not match whatever the editor element's inherited/computed textAlign value is.

Can you provide a CodeSandbox?

https://codesandbox.io/s/wild-morning-cbyyyh?file=/src/App.js

(Not built with Svelte, but the issue persists)

What did you expect to happen?

I expect that when the Tiptap editor first loads, each node's alignment would match the value configured for defaultAlignment (regardless of any properties inherited by the editor element). Then, each node's alignment could be changed using buttons, keyboard shortcuts, etc.

Anything to add? (optional)

Please don't hesitate to let me know if anything I've said is unclear and I'll be happy to update the post to clarify.

Did you update your dependencies?

[X] Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

[ ] Yes, I’m a sponsor. 💖

JosephASullivan commented 1 year ago

For what it's worth, deleting a few lines from the TextAlign extension (text-align.ts) seems to fix the issue (see below). I don't see how removing these lines would cause any problems, so I'll go ahead and submit a pull request. If anyone sees a reason that would be an issue, we'll find another solution.

addGlobalAttributes() { // text-align.ts Line 35
     return [
       {
         types: this.options.types,
         attributes: {
           textAlign: {
             default: this.options.defaultAlignment,
             parseHTML: element => element.style.textAlign || this.options.defaultAlignment,
             renderHTML: attributes => {
-              if (attributes.textAlign === this.options.defaultAlignment) {
-                return {}
-              }
-
               return { style: `text-align: ${attributes.textAlign}` }
             },
           },
         },
       },
     ]
   },

github-actions[bot] commented 1 year ago

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days

ueberdosis / tiptap