Languages and RTL

Set language for the interface and dir for the base direction of the content. Without dir, each text block gets dir="auto", so Arabic and English paragraphs each display correctly in the same document. Word and character counts segment words correctly in Arabic and CJK.

import { createEditor } from "open-wysiwyg-editor";

createEditor({ element, language: "ar", dir: "rtl", contentLang: "ar" }); // built in: en, ar

Pass languages to add or replace UI languages. Untranslated labels fall back to English. Override a few strings of an existing language with labels. The Arabic labels are exported as arabicLabels, a good starting point for another RTL language.

createEditor({
  element,
  language: "fr",
  languages: [{ code: "fr", name: "Français", dir: "ltr", labels: { bold: "Gras" /* … */ } }],
});

createEditor({ element, labels: { bold: "Strong" } }); // override a few strings

When you show saved HTML, keep the dir attributes the editor wrote and wrap it in owe-content-root. Set lang on the container for content in another language so screen readers use the right voice.

<div class="owe-content-root" lang="ar" dir="auto">
  <!-- sanitized saved HTML -->
</div>