feat(editor): support direction and text align in toolbar

[bahmannejati]

Adding direction & text-align buttons to the editor toolbar

Users can select a specific paragraph or any groups of Nodes and set writing direction & text alignment using 5 buttons added to the toolbar

Issue

Currently despite the RTL documents being supported user cannot change the direction or text-align of paragraphs or other Nodes, so when the document starts with LTR characters, the whole document will be forced to be written in LTR:

Features

1. Now users can set direction & text alignment regardless of the current detected direction (first character of the document)
2. Almost all nodes support this feature
3. By clicking on the direction button, text alignment will be set automatically, but users can change text alignment afterward
4. The current direction or text-align button will be active while making a selection in the editor, currently detection is done by checking the $from node, we can improve it later

Backward compatibility

Old documents will work without any issues.

Supported nodes

Direction & text alignment only applies to nodes, not marks.
Almost all nodes that need to be aligned or set direction, are supported, including:

• Attachment
• Blockquote <quote>
• BulletList <ul>
• CheckboxItem
• CheckboxList
• Heading <h1...h6>
• ListItem <li>
• Notice
• OrderedList <ol>
• Paragraph <p>
• Table <table>
• TableCell <td>
• TableHeadCell <th>
• TableRow <tr>

Side fixes

1. Added a hidden scrollbar to the toolbar in mobile view, and also in the comments editor

Mobile toolbar:

Comment editor toolbar:

It's better to use a thin visible scrollbar, later we can update it

2. Prop .rtl has been removed from the shared/editor/components/Styles.ts file, used border-inline-start|end, margin-inline-start|end, padding-inline-start|end, inset-inline-start|end & border-start|end-start|end-radius to change properties dynamically, these CSS properties are supported in browsers listed in outline project, except Safari For IOS 12.2-12.5 (0.260%), its up to outline team whether to support or not this browser

Technical notes

1. Two icons have been added, outline-icons doesn't have any icon for "RTL" or "LTR"
2. Added a prop to the SelectionToolbar component called isCommentEditor, to restrict formatting buttons like text alignments, note that the direction button is visible in the comment editor, so if the user changes the direction, the alignment will be automatically applied according to the selected direction
3. A command was added named setAttrOnSelection, which can set attributes like direction & text-align for the whole selection, it will set the attribute to the target value, for nodes between $from and $end, and also check the parent of $from and applies to it too if all its children have been selected

Future checklist

1. Support markdown serializing, so saved documents in the database as markdown, will contain direction & text-align attributes
2. Support direction & text-align in the history view, and also after restoring an old document from history (needs previous item to be checked)
3. Preserve the current writing direction & text-align and apply it after Enter is pressed (currently the direction detected by the first character is used as the default direction)
4. Detect direction & text-align while importing documents from Google doc or other editors
5. Add translation for other languages

[CLAassistant]

All committers have signed the CLA.

[request-info]

Hey there! It looks like you didn't provide much information here. Please consider adding more details about the issue / pr or it will be automatically closed. Thanks for helping us maintain the project!

[tommoor]

Hi @bahmannejati thanks for your suggestion. We won't be able to merge a PR as it stands for a number of reasons.

• It adds many controls to the (already crowded) toolbar, particularly ones that would be used by a minority of users. A scrollbar inside the toolbar is not acceptable :)
• Currently all data stored in the editor must be serializable to Markdown to ensure accurate reproduction on shared pages and exports.
• This feature has never been requested up until now. Every feature is a maintenance burden for our tiny team, it's important we only add things to the codebase that are extensively used especially for things outside the expertise of the team like RTL.

One improvement that would potentially be mergable would be to have the LTR/RTL detection remain automatic, but on a paragraph-by-paragraph basis. This could be achieved without any additional controls or data storage and provide the 90% solution with a tiny amount of code change.

[bahmannejati]

Hi @tommoor, thank you for your response,

Auto-direction detection is not practical, setting direction & text-align manually is the solution that editors like Google Docs use.

Many Persian companies can use Outline for their technical documentation instead of Confluence (as you probably know, Attlasian is going to stop support for server products in 2024), still, they must be able to write in RTL & LTR simultaneously.

I have a suggestion:

1. We can hide these 5 buttons default, so we have no scrollbar or more crowded toolbar.
2. Provide a switch in app settings, so users can turn on manual RTL tools if needed.
3. Change the default value for attributes dir & textAlign from null to undefined, so no additional data is saved for LTR users. (this needs a small fix for an API, I know the solution)
4. Serialize dir & textAlign attributes into markdown like ### Title {dir=ltr, textAlign=right}, we ensure that these additional characters are only presented when the user sets direction or textAlign manually, so LTR users do not have these characters in their serialized data.
5. In our team in Mabna, we can handle the maintenance of this feature

[bahmannejati]

Hi @tommoor,
Do you have any comments on this thread?

We can start doing tasks listed in the above thread, but first, we need to know if it's mergeable or not