[6.x] Control Panel doesn't work with RTL languages

[tao]

Bug description

This has been previously discussed for v5 and the issue was closed. The proposed solution was to change the text direction by the user changing their language preference. I will explain more about why this is an issue for us...

Duncan: The RTL direction is determined based on the user's locale preference, rather than the current site being edited. You can read the reasoning behind that decision in the original PR. (link)

The way I expect it to work, and the solution that could solve some of our problems is that the site direction should change when I select "Arabic" in the top right of the Control Panel, as @jasonvarga mentioned in #9447

Jason: I've changed it so that it's based on the configured locale or preference. If you have configured a language that should be RTL (like Arabic or Hebrew), it will be RTL.

However I do think it's a good idea to change the direction of the fields inside the publish forms when you're editing an entry in a specific site. This behavior is consistent with how Craft CMS works, and they do a great job with localization and RTL support. See in this screenshot, everything is in English/LTR (my preferred language) except the field (I only configured one) which is RTL because the current entry is Arabic.

In Statamic v6, it would be amazing if the Control Panel could change to right-to-left text direction based on the language selected, as you can see in this screenshot:

Or even better, would be to just change the form fields according to the multisite selected:

This behaviour is similar to what I believe Jason was talking about previously:

I do think it's a good idea to change the direction of the fields inside the publish forms when you're editing an entry in a specific site. This behavior is consistent with how Craft CMS works, and they do a great job with localization and RTL support. See in this screenshot, everything is in English/LTR (my preferred language) except the field (I only configured one) which is RTL because the current entry is Arabic.

---

When I do change the locale in my preferences to a RTL language then it breaks the Control Panel and the markdown field text direction still does not change:

One issue we have is that our team works across languages, so I may be working on a Hebrew translation in the morning and Chinese in the afternoon, as we sometimes do the work of adding content to the website on behalf of our translators, as they don't have access to Statamic.

So my language preference would be English, and if I selected Arabic on the site selector, I would expect to just jump into RTL mode from there instead of constantly changing my preferences as I work. Also, as I don't understand Hebrew or Arabic, so changing the text of the entire Control Panel to Arabic using preferences makes it more difficult for me because I can't understand what to click on then and I can't navigate around the site.

So our team really needs the Control Panel to be in English according to our preferences and change direction according to the site we are currently working on. I understand that Statamic has many different users with many different use cases and it's impossible to please everyone, but this is a very frustrating experience for us and does not at all live up to the homepage promise of being the answer to your frustrating CMS problems. Unfortunately, this issue has been causing huge amounts of frustration for our entire team and many delays in getting new content and books published.

My previous working solution in v5 was to detect on the frontend when the language changed and force the direction to change a [data-site] attribute on the HTML document, and then use some custom CSS to change the text direction of the markdown and form fields. However we can no longer access these variables as the $store has changed to $pinia.

/**
 * Try detect and switch languages to RTL
 */
Statamic.booted(() => {
    const applyDirection = () => {
        const site = Statamic?.$store?.state?.publish?.base?.site; // not available anymore
        document.documentElement.setAttribute('data-site', site);
    };

    // Run initially
    applyDirection();

    // Re-run whenever the site changes
    Statamic.$watch(() => Statamic?.$store?.state?.publish?.base?.site, applyDirection);
});

/**
 * Editor text direction
 */
html[data-site="ar"] .editor,
html[data-site="fa"] .editor,
html[data-site="he"] .editor {
    direction: rtl;
    text-align: right;
}

html[data-site="ar"] .CodeMirror,
html[data-site="fa"] .CodeMirror,
html[data-site="he"] .CodeMirror {
    direction: rtl;
    text-align: right;
}

---

Another issue is that the text direction of the markdown field is forced to use left-to-right mode because it can be difficult to work with <code> in the markdown field, however we mostly publish books, interviews and speeches so we never need to deal with code in the content.

So I would really really appreciate if we could find a solution to get this working in v6 without causing any frustration for anyone.

Some possible solutions would be to provide an event we can hook into when the multisite changes, then I can replicate some of the code we had previously in v5.

Statamic.$hooks.on('multisite.changed', (resolve, reject, site) => {
    if (site === 'arabic' || site === 'hebrew') {
        // change text direction
    }
})

(or)

Statamic.$hooks.on('cp.language.changed', (resolve, reject, site) => {
    if (language === 'arabic' || language === 'hebrew') {
        // change text direction
    }
})

Otherwise if there is a solution to work with Bard in right-to-left mode then I would consider migrating over to Bard if that could solve our problems, instead of struggling with the raw markdown field.

Or, there could be a RTL / LTR switch in the user dropdown, similar to how we change between dark and light mode.

If the issue is causing lots of conflict and other developers provide different use cases or provide suggestions about why this is a bad idea, then maybe we can use a config to decide how the Control Panel switches languages, so that different users could choose how Statamic behaves.

Another important thing to consider when looking at this issue, is that there is also a problem with the collab plugin and for over two years it has not been working with multisite, and the bug can cause data to be lost or overridden by other users. One possible solution to start working on that problem would be to provide events or hooks so when the user selected a new site from the multisite switcher, the collab plugin could detect the change and act accordingly, however, I'm not sure how that situation changes with Vue 3 reactivity. But if those events were to become available to help in that case, then I could try work with that to make the control panel work for my organisation.

To summarise:

• We need a way to change the text direction based on the selected site, not user preferences
• We need to be able to change the text direction, without changing the language of the entire control panel
• We need to be able to use the markdown field to RTL mode, or use Bard to use RTL mode, or both (it is currently forced to LTR always)
• The new UI for Statamic v6 needs to be updated to work correctly in RTL mode (sidebar in wrong place)
• The CMS needs to be changed to be able to fix the bug in the collaboration plugin*

I am sorry for bugging you about this issue but our entire organisation runs on Statamic and we are really struggling to get it to work nicely, it has been almost 2 years that the collaboration plugin has been unusable with multisite, and I have had to write lots of custom code to get Statamic multisite to handle basic things, which would no longer work in v6.

We love our Statamic Multisite and we would really appreciate it if it got more love and attention, and I would appreciate anyone else using Multisite to talk about their experience and if they use it with different languages.

How to reproduce

Try multisite in Statamic v6.

Logs

Environment

Statamic
Addons: 0
Sites: 28 (English, Arabic, Bulgarian, and 25 more)
Stache Watcher: Disabled (auto)
Static Caching: Disabled
Version: 6.0.0-alpha.5 PRO

Installation

Fresh statamic/statamic site via CLI

Additional details

No response

[tao]

I've created a pull-request which adds some hooks to the localization switching process, and I can work with that to resolve this issue. The testing I've done so far seems to work well.

However, at the same place these two events are fired for localization.created or localization.selected would be where a global config check could be added, something like this:

// config/statamic/system.php

    /*
    |--------------------------------------------------------------------------
    | Enable Multi-site
    |--------------------------------------------------------------------------
    */

    'multisite_text_direction' => 'dynamic', // [dynamic, preference, etc]

Then the control panel could change direction based on different scenarios... either listening for those events in other Vue components? or updating the javascript $config so that the text directions could change?

[tao]

Thanks @jasonvarga