Problem/Motivation

CKEditor 5 in Drupal 10.2.x doesn't add the class "text-align-left" when the text is left align. It causes issues in RTL pages, where all the text is automatically positioned to the right, and the content editors cannot align it left.

Steps to reproduce

1. Enable the text alignment button in admin/config/content/formats
2. In any new or existing content, add some text and click the "align left" option in the WYSIWYG toolbar
3. Click the source button (in Full HTML profile) to check the injected classes
4. Save the content and inspect the element in the page

Proposed resolution

See the work around in #9

CommentFileSizeAuthor
#3 simplytest.png489.09 KBbruno.bicudo
#3 simplytest.png489.09 KBbruno.bicudo
#3 simplytest.mp41.84 MBbruno.bicudo
evidence_4.png8.67 KBbruno.bicudo
evidence_3.png6.01 KBbruno.bicudo
evidence_2.png19.23 KBbruno.bicudo
evidence_1.png17.43 KBbruno.bicudo

Comments

bruno.bicudo created an issue. See original summary.

larowlan’s picture

larowlan
Location 🇦🇺🏝.au GMT+10
commented
Status: Active » Postponed (maintainer needs more info)

Can you reproduce this in a fresh install?

bruno.bicudo’s picture

bruno.bicudo
Primary language Portuguese, Brazil
Location Bragança Paulista - São Paulo
commented
StatusFileSize
new simplytest.mp41.84 MB
new simplytest.png489.09 KB
new simplytest.png489.09 KB

@larowlan I recorded this evidence from simplytest.me with a "Drupal Core" 10.2.1 sandbox.

simplytest.me

If you need it, I can also take an evidence from a local fresh environment.

Thanks! :)

larowlan’s picture

larowlan
Location 🇦🇺🏝.au GMT+10
commented
Status: Postponed (maintainer needs more info) » Active

Thanks

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Title: CKEditor 5 "left" alignment doesn't inject "text-align-left" class to elements » [10.2] CKEditor 5 "left" alignment doesn't inject "text-align-left" class to elements
Status: Active » Postponed (maintainer needs more info)
Issue tags: +Regression

So you're saying this used to work correctly in 10.0 and 10.1? 🤔

Version: 10.2.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

vitaliych’s picture

vitaliych commented

This is happens and to the drupal 10.1.6

alexander tallqvist’s picture

alexander tallqvist commented
Status: Postponed (maintainer needs more info) » Active

We're experiencing exactly the same issue with a site running Drupal 10.3.9. All the "text-align-*" classes get properly set except for the "text-align-left" one.

oumaimaneffati’s picture

oumaimaneffati commented

For anyone experiencing the issue where text-align-left is never output (because CKEditor 5 considers "left" the default and does not store it in the model), here is a workaround.

You can implement this as a custom CKEditor 5 plugin. It overrides the alignment command to ensure that "left" is explicitly written to the model, allowing the downcast to output the correct class.

init() {
    const editor = this.editor;
    const classMap = {
      left: 'text-align-left',
      center: 'text-align-center',
      right: 'text-align-right',
      justify: 'text-align-justify',
    };

    editor.once('ready', () => {
      const command = editor.commands.get('alignment');

      if (command) {
        this.listenTo(command, 'execute', (evt, data) => {
          const value = Array.isArray(data) ? data[0]?.value : data?.value;
          const selection = editor.model.document.selection;
          if (value === 'left') {
            editor.model.change(writer => {
              for (const block of selection.getSelectedBlocks()) {
                writer.setAttribute('alignment', 'left', block);
              }
            });
            evt.stop();
          }
        });
      }
    });

    editor.conversion.for('downcast').attributeToAttribute({
      model: 'alignment',
      view: (modelValue) => {
        const cls = classMap[modelValue];
        return cls ? { key: 'class', value: cls } : null;
      },
      converterPriority: 'high',
    });
}
dlamas’s picture

dlamas commented

I'm experiencing the same issue in a Drupal 10.4.9 project but the custom plugin proposed by oumaimaneffati works perfectly fine.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.

quietone’s picture

quietone commented
Issue summary: View changes
Status: Active » Closed (won't fix)

The problem is reported on Drupal 10, and on unsupported versions of Drupal 10. Drupal 10 is also in maintenance mode and there are limited allowed changes for a maintenance minor release. This change is not eligible for commit.

A work around is has been posted by @oumaimaneffati, which i have added to the issue summary to help people find it.

But since, this won't be fixed on Drupal 10, I am closing this issue

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.