Alignment Feature doesn't react to predefined page styles

jswiderski commented 2 years ago

📝 Provide detailed reproduction steps (if any)

Set the following style on HTML page where editor is used .ck-editor__editable{ text-align : center !important; }
Try applying different alignment options

✔️ Expected result

Align Left should align text to the left.

❌ Actual result

Align Left leaves text in the center.

works

In CKEditor 4 we had a code which auto-adjusted itself to computedStyles as well - https://github.com/ckeditor/ckeditor4/blob/master/plugins/justify/plugin.js#L11-L32 and set the default alignment accordingly meaning if text was by default aligned to center this was the default setting and the editor applied left style to Align Left, right style to Align Right, not style to Align Center.

In CKEditor 5 inside LTR container the Align Left setting is default no matter what. This causes problems if someone set the page styles to e.g. center.

❓ Possible solution

If you have ideas, you can list them here. Otherwise, you can delete this section.

📃 Other details

Browser: Any
OS: Any
First affected CKEditor version: All
Installed CKEditor plugins: alignment

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

Reinmar commented 2 years ago

This is one of the features affected by #6231. Which, in turn, is a tough design decision to probably revisit in the future.

Reinmar commented 1 year ago

I wonder if the behavior of this feature (which option is selected as the default one) can be made easier to override if we made refresh() decorated. This method detects which value should be selected.

Right now one can perhaps achieve the same by listening to set:value and overriding the value there because we actually support this:

https://github.com/ckeditor/ckeditor5/blob/57feae1b66db8df43aeb6fc61ab0f7cfdbfb798b/packages/ckeditor5-utils/src/observablemixin.ts#L126-L133

But I have a feeling this is trickier.

editor.commands.get( 'alignment' ).on( 'set:value', ( evt, name, value, oldValue ) => { 
    if ( value == 'left' ) {  
        evt.return = ...; // ???
    }
} );

Potentially, also the execute()'s behavior would need to be customized.

Anyways, something to explore. 99% that this is possible but it may not be that quick and elegant.

ckeditor / ckeditor5