Allow setting direction to either ltr or rtl

I'm open to the idea

Will be covered in a redo ticket.

This issue remains unresolved
and issue #3461112 is not a duplicate of this.

I recently updated to 5.0.0 and the problem is not solved.

Let's clarify the requirements:
An element in the editor can have three distinct states:

• State No. 1: an element with dir set to "rtl": <div dir="rtl">
• State No. 2: an element with dir set to "ltr": <div dir="ltr">
• State No. 3: an element with no dir attribute set:

  Currently, this module includes two buttons but does not support all three states. Only State 1 and State 3 are supported.

  The intention is that no admin configuration should be required for all three states to be available to users simultaneously. The admin should not need to configure the editor to allow toggling dir="rtl" or dir="ltr"; rather, users should always have the option to select between the three states, regardless of any admin configuration.

  (At the very least, an option should be provided in the settings to allow users to choose among the three states.)

  Proposal:
  We should have two buttons:
  1 - A button to toggle between dir="ltr" and no dir set.
  2 - A button to toggle between dir="rtl" and no dir set.

  Note: the two buttons can not be active at the same time. Only one of them or none of them can be active at a time.

I believe we can fix this issue by providing, via the JS, default direction value based on current page direction. Please see the enclosed patch.
These daye we are upgrading the Bar-Ilan University multiple department websites from CKEeditor 4 to ckeditor5
Most of our department websites needs that the bidi plugin will work on pages in both directions since usually Hebrew and English is enabled on same website.
Currently the module is not working as expected on the RTL pages because the default language is defaults to LTR.
In the enclosed patch the default direction is set dynamicly according to the current document/page direction.

Hey, I was about to create a new issue with a MR to be able to set the default direction using the editor language/locale configuration, but I saw this one opened and I thought it was better to create a new branch here since the requirements for the project I'm working on are quite similar to this issue description.

For sites using english backed but rtl languages for the frontend (in my case that's Arabic) is important to keep the ckeditor and drupal pages in english (thus, ltr direction), but to be able to set the default content direction to rtl.

When we used the ckeditor4 BiDi plugin, we were able to do this using the ckeditor4 config contentsLangDirection and passing that in a drupal hook like:

/**
 * Implements hook_editor_js_settings_alter.
 */
function module_name_editor_js_settings_alter(array &$settings) {
  foreach ($settings['editor']['formats'] as $name => $value) {
    $settings['editor']['formats'][$name]['editorSettings']['contentsLangDirection'] = 'rtl';
  }
}

If we look at the ckeditor migration docs, we can do the same for cke5 using language configs ui and content so the hook should be modified:

/**
 * Implements hook_editor_js_settings_alter.
 */
function module_name_editor_js_settings_alter(array &$settings) {
  foreach ($settings['editor']['formats'] as $name => $value) {
    $settings['editor']['formats'][$name]['editorSettings']['language'] = [
      'ui' => 'en',
      'content' => 'ar'
    ];
  }
}

But if we set the default direction/language for the content with that hook, the current implementation of this module latest version doesn't work as expected. As soon as you set a default content lang, the bidi buttons becomes unusable.

Soooo I'm adding here a MR that changes the `isDefault` method to retrieve the default value from the editor locale config. If that config is not set, it will fallback to 'ltr'.

It keeps the previous "logic" that only sets the direction attribute on those elements/paragraphs that do not have the default direction.
In this way if your site content is in arabic, only the non arabic content should have a direction attr, since those will be an exception, sort to say.

Attaching here two screen recordings testing the changes in a new D10 test site, with and without the hook.

Hi, @anairamzap , did you tried to apply my patch from #6 ✨ Allow setting direction to either ltr or rtl Active ?
I think it solves the issue since it set the default direction to current page direction.

Actually it is few weeks that this patch is active in production in many of departments websites of Bar Ilan University.
Most of these websites are multi language and multi direction (mostly Hebrew/English landuages)

My strategy was to change the isDefault function in utils.js in a way that it will take into account the value of the dir attribute.
This way it will not depend on the language but on document direction.
So in the patch I have changed ckeditor_bidi/js/ckeditor5_plugins/direction/src/utils.js
From

export function isDefault( direction ) {
  // Right now only LTR is supported so the 'ltr' value is always the default one.
  return direction === 'ltr';
}

Into

export function isDefault(direction) {
  // Get the computed direction of the root HTML element or default it to ltr.
  // We do not rely on <html>  dir attribute since in rare cases it may not exist.
  const rootHtmlDirection = window.getComputedStyle(document.documentElement).direction || 'ltr';
  return direction === rootHtmlDirection;
}

Please let me know what do you think and if it works for you.

It was fixed in release 5.1.0 by applying the #6 patch

This issue is not fixed yet. The problem still persists.
Please read the issue description:

This module should have two buttons:
One button to toggle the [dir="rtl"] attribute
And another to toggle the [dir="ltr"]

We should be able to choose the value of dir attribute, regardless the current page direction.
(The current page direction in the edit form, is not important, but the editor's opinion and will are much more important. The person who uses the editor, should always have an option to choose between rtl, ltr, and none)

(similar to what was available in Ckeditor 4)

@israelshmueli I saw and tried your patch at #3413674-6: Allow setting direction to either ltr or rtl → but that will not work as expected in projects that use different languages for the backend (drupal UI) and the frontend (content).

For example, sites using english (or any other LTR language) for Drupal UI/backend, while the content of the site is in Arabic (or any other RTL direction language). That's why in this kind of projects we keep using the hook_editor_js_settings_alter that allows us to differentiate the UI and the content languages.

As in the example I pasted in my above comment, the ui is set to english, but the content is set to arabic. Using the new config provided by cke5 https://ckeditor.com/docs/ckeditor5/latest/getting-started/setup/ui-lang...

That's why I thought it was best to use the approach in the MR #3413674-8: Allow setting direction to either ltr or rtl → , modifying the isDefault() method to get the default value from the language content settings of cke5 itself, and not from the backend html direction, that could be different from the content language.

I think this approach would make the module to behave more like it did in previous versions (for cke4). So, would you re-consider adding this approach in a release instead of the source html direction that you committed to 5.1?

Thanks,

m

OK @hejazee, I think I finally succeeded in understanding and reproducing the problem you pointed out.

I did not experience it until I manually added dir="ltr" to <p> tag while editing on the admin page that is on the English side of the website. Same behaviour exists on the RTL side of the website (Hebrew), while somehow a dir="rtl" exists in the markup even though it is not needed since the whole page direction is already RTL.

I am going to reopen this issue and will try to find how to solve it. 

Yes @anairamzap, It does make much more sense to rely on locale.contentLanguageDirection
Now that I have realized that current issue original intention is related to different problem than default direction I guess it is better to create new issue for an improved way to set the default direction.

ok, great. Thanks!

Did you tried the changes in https://git.drupalcode.org/project/ckeditor_bidi/-/merge_requests/16 ?
We are using this since a couple of months now and it seems to be OK.

Please ignore the page direction, content language, or any similar settings.
The only correct approach is to allow the editor to choose between "rtl", "ltr", or an empty value ("").

There are various scenarios where we need to explicitly set the direction to "rtl" even when the entire page is already in RTL mode.
In some cases, we may need to switch directions multiple times within a hierarchical structure.
For example, consider the following code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <p>some text</p>
  <p dir="rtl">
    یک متن به زبان فارسی با یک کلمه
    <span dir="ltr">C++</span>
  </p>
</body>
</html>