Right-to-Left support for form elements (text field, text area, select, etc.)

[okaeiz]

Problem you would like to solve

I have just updated the Modeler to v5.23.0 and I can see a HTML View component is added and it is great for customization and font changes, especially for RTL languages like Persian and Arabic. But as declared in the official docs, the section on security and sanitation strategy, it's for information presentation purposes only. Therefore, it cannot be used for input fields.

On the other hand, the input fields (such as text fields or date-time) do not support right-to-left languages. It can be frustrating when creating forms in those languages.

Proposed solution

• It'd be great if input fields supported text direction and align.
• Preferrably the mode (RTL) can be configured globally for a form (https://github.com/camunda/camunda-modeler/issues/4306#issuecomment-2127464170)

Alternatives considered

First, I thought I could achieve this by creating input fields in HTML View element but since it is disabled due to XSS and clickjacking attacks, it doesn't seem like a good idea. Moreover, the passing of values in the workflow may be tricky in this way.

Additional context

No response

---

Depends on https://github.com/bpmn-io/form-js/issues/1185

[nikku]

As I understand your feature request is support for RTL languages, right? How would you envision such support? I'd assume it would be globally applied (per form)?

[okaeiz]

Yes. In forms, it'd be awesome if we could choose the direction for each element (maybe via the properties panel). Then the element positioning may be done using the resize option. However, I also noticed this unusual behavior for resizing elements which is discussed here as well.

[nikku]

What is the use case for maintaining RTL for each element? Do you envision forms to mix RTL and LTR language inputs?

[volodymyr-melnykc]

Related issue: https://github.com/bpmn-io/form-js/issues/1185

[okaeiz]

No. It is not necessary for the form to include input values in both English and non-English languages.

Maybe it's just better to be a preference setting for the whole form. It can be added to the form properties where we can set its unique ID.

[nikku]

It is not necessary for the form to include input values in both English and non-English languages.

This is what I thought, too. Thanks for confirming.

---

Could you create another FR for this issue:

* Also, the Jalali calendar support for date-time element is also requested.

[okaeiz]

I'd be grateful if you guys keep me informed of this issue. It's of high importance for my organization.

[nikku]

@okaeiz Consider to contribute if this is important to your organization.

[okaeiz]

I have played around with adding custom components to form-js and I managed to create an RTL text input field which has RTL labels and values. But I think the form-js repository seems forgotten and nothing is happening there exactly. Should I consider contributing to Modeler?

As you can see, I have created a Text Input RTL form component. I'm looking for a proper icon for it.

[nikku]

@okaeiz As we discussed:

• Preferrably the mode (RTL) can be configured globally for a form (https://github.com/camunda/camunda-modeler/issues/4306#issuecomment-2127464170)

Let's not require users to configure it locally, but rather inherit the value from the global form configuration, if provided. Or did you change your mind and think that this provides value to configure it for each element indivudually?

I'm not sure why you'd want a separate Text Input RTL when you could configure the text direction (LTR or RTL) for these components.

[volodymyr-melnykc]

@okaeiz Thanks a lot for working on it! The form-js repository is active, and you can contribute to it. I agree with @nikku's comments. Rather than having separate RTL components, we can extend existing ones (text field, text area, select etc.) with the direction (left or right).

[Skaiir]

@okaeiz We're currently in a large refactor on form-js which is why a lot of the other topics have taken a backseat, but it is definitely where such a feature should be contributed. I can offer some guidance on the issue you raised there as well, but generally I agree where this discussion is going.

I'll get into more detail on the form-js issue, but one single boolean config should drive this feature. No custom components needed.

[okaeiz]

@nikku @volodymyr-melnykc @Skaiir I appreciate your guidance.

Let's not require users to configure it locally, but rather inherit the value from the global form configuration, if provided. Or did you change your mind and think that this provides value to configure it for each element individually?

Absolutely not. I adhere to what we've discussed before. I was just following the official Camunda docs, the section on Custom components and its examples because I didn't fully comprehend what exact part of the form-js codebase I should head to in order to define a global RTL option for the form.

The form-js repository is active, and you can contribute to it.

Is it the form-js-editor package that I need to play around with? I am definitely ready to contribute and will be grateful if you help me find the proper spot of the codebase. Here's what I think I should do:

I need to add another section to the panel (maybe?) in addition to General and create a toggle switch which is The form is right-to-left. And then, I need to follow the instructions about the base fields' conditions that are given in this form-js issue. Do you confirm?

[volodymyr-melnykc]

@okaeiz I suggest adding the direction property for individual components rather than a form. Each component has a Layout section. The Direction property can be placed there, with the Left option as a default one and the Right as an alternative. For example, here's how it can look:

[Skaiir]

@volodymyr-melnykc Does this really make sense? I'm not sure there's a use case to have two different text directions within the same form.

@okaeiz To answer your initial question, the form-js-editor package will contain where you need to add the properties panel entry, there's tons of files ending with Entry that will show you how it works. The form-js-viewer package is where you have to add the implementation to individual components, just search component names and you'll find those.

Also, regarding what I mentioned in the other issue, forget about it, it's for external configuration only, we can handle this later ourselves when we'll need it ;)

[okaeiz]

@Skaiir @volodymyr-melnykc Thank you; I'll look into it. I think these solutions are both useful in specific cases. Global solution is simpler and reduces the risk of errors and inconsistencies since there's only one place to manage RTL settings. Individual solution is useful in case of bilingual forms and where different types of data is asked from the user.

For instance, we may ask Persian users to enter their full name and profession - which is RTL - and their company website URL - which is LTR - and it may require separate options for each form component.

Personally I prefer the global solution but it's actually up to you to decide.

[volodymyr-melnykc]

@okaeiz After having an internal discussion about it, the direction can be defined on a form level, so you can disregard my previous comment. As you proposed, you can add a new section to the form's panel (can be called 'Appearance') under the General section.

[okaeiz]

@volodymyr-melnykc @Skaiir Alright. I will be working on it soon. I'm still doubtful about the email, URLs and numbers (numbers are always written LTR). Now what do you think about this idea? I create the global direction option for the form; but still implement a direction option for Text Field (and only Text Field because that's where all the doubt is caused) in case people intend to enter number values, emails and URLs.

[okaeiz]

https://github.com/camunda/camunda-modeler/assets/100111649/4a93f4dc-7527-4cfa-803e-4b4f382a202b

@volodymyr-melnykc @Skaiir I added the global entry for the form and I'm starting to make it affect all the components. I have also added a preferred font to Persian strings. Is it okay?

[volodymyr-melnykc]

@okaeiz It looks good! How did you define a preferred font?

[okaeiz]

I used a Google valid font in the style attribute. I plan to apply it only when the direction is RTL. However, It looks decent on the non-Persian strings too.