[Bug]: Alignment Styles Not Overridden or Unchanged for Pasted Content using React

Renjith-SB commented 3 weeks ago

Affected Packages

extension-text-align

Version(s)

1.32.2

Bug Description

Alignment Styles Not Overridden or Unchanged for Pasted Content using React Description When pasting content that contains alignment styles (e.g., text-align: center;), attempting to change the alignment afterward using the extended TextAlign plugin with the setTextAlign command does not override the existing alignment style or has no effect on the pasted content. This affects the user experience when modifying the alignment of formatted text.

Steps to Reproduce

Copy content with an alignment style (a paragraph aligned to the center).
Paste the content into the Tiptap editor.
Use the setTextAlign command to change the alignment of the pasted content (e.g., left, right, justify).
Observe whether the alignment changes or if the existing style is overridden.

Actual Behavior

The pasted content retains its original alignment, and the new alignment is not applied.
In some cases, no visible changes occur when trying to change the alignment.

Code Example Below is an example of how the TextAlign plugin is extended and the setTextAlign command is used:


import { TextAlign } from '@tiptap/extension-text-align';

const CustomTextAlign = TextAlign.extend({
  addCommands() {
    return {
      setTextAlign: alignment => ({ commands }) => {
        const resetAndUpdate = this.options.types.every(type => 
          (commands.resetAttributes(type, 'style') || commands.resetAttributes(type, 'textAlign')) &&
          commands.updateAttributes(type, { textAlign: alignment })
        );
        return resetAndUpdate;
      }
    };
  }
});

In this implementation:

The TextAlign plugin is extended to reset either the style or textAlign attributes before applying the new alignment.
However, the issue persists when aligning pasted content that already has alignment styles.

Environment:

Editor Version: Tiptap 1.32.2
Browser: Include browser name and version (chrome latest version).
Operating System: Specify the OS and version (Linux, Windows, macOS).

Browser Used

Chrome

Code Example URL

No response

Expected Behavior

The alignment of the pasted content should be overridden by the new alignment selected by the user via the setTextAlign command.

Additional Context (Optional)

This issue occurs consistently when content with inline or block-level styles is pasted into the editor. Users expect the setTextAlign command to override any existing alignment styles.

Dependency Updates

[X] Yes, I've updated all my dependencies.

GSKarthik369 commented 3 weeks ago

Facing similar issue. Any solution on this will be great.

guarmo commented 1 week ago

The version you're using is deprecated, I would recommend updating to the latest Tiptap version.

Renjith-SB commented 2 days ago

The version you're using is deprecated, I would recommend updating to the latest Tiptap version.

Thank you for your response. I tried switching to the new version, but it’s not working.

Here is the pasted content:

text-align: justify; margin: 0px 0px 15px; padding: 0px; text-align: justify; color: rgb(0, 0, 0); font-family: "Open Sans", Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;

As you can see, it has multiple text-align styles. The setTextAlign command only affects the first text-align style.

ueberdosis / tiptap