Suneditor: RTL feature: Toolbar change and enhancement

[BrianJVarley]

Related Issue: https://github.com/JiHong88/SunEditor/issues/450

Hi @JiHong88 , I'm opening a new issue here to track some feedback for RTL feature. I see a few small bugs in the toolbar icons and font.

I see _three_ things that could be addressed on RTL feature:

• Toolbar Arabic label text: It's very small, take a look at indent / outdent buttons. Maybe a different font here such as Andrei suggested could be more legible. Such as - https://www.google.com/get/noto/

• Toolbar Short Cut Text English: On the indent and outdent toolbar buttons the shortcut text is not clear, I can't read which shortcut combination that is. Is there any way you can use a different font or use more whitespace?

• Toolbar bold icon: The icon should not be flipped, currently its backwards. Can you position the bold icon normally the same as LTR? So for example..'B'

RTL User Function:
On a different note, I think there is a benefit to exposing a "User Function" for the RTL prop similar to editorInstance.enabled();. At the moment we would have to re-create the editorInstance in order to update rtl mode at runtime. But if you exposed an editorInstance.rtl.enable() editorInstance.rtl.disable() it would allow the client to update to RTL mode dynamically when browser locale is changed to Arabic language.

Is this something you have considered as an enhancement?

[JiHong88]

Hi @BrianJVarley
I'll check the font and modify the keyboard shortcut text to be more clearly visible.
A wrong icons can be easily corrected.

RTL User Function:
You can use the setOptions method

let RTL = true; // false
editorInstance.setOptions({ rtl: RTL });

[JiHong88]

I downloaded the recommended font and applied it.
But it made other languages too bold.
I will change the font more carefully.

There are only two locations where fonts are defined.
You can define and use fonts in the below class.

/* editor div */
.sun-editor {
  font-family: Helvetica Neue, sans-serif;
}
/* contents area of editor */
.sun-editor-editable {
  font-family: Helvetica Neue, sans-serif;
}

The classes below are related to tooltips.
You can change only the tooltip area to use.

/* tooltip */
.sun-editor .se-tooltip .se-tooltip-inner .se-tooltip-text {

}
/* shortcut */
.sun-editor .se-tooltip .se-tooltip-inner .se-tooltip-text .se-shortcut {

}

[JiHong88]

The 2.34.1 version has been updated.
If this issue has not been resolved, please reopen this issue.
Thank you.