Sometimes when we write content in a language where text is written and read from right to left like Arabic, the editor does not detect that and always display text in ltr. which is inconvenient for content creators who write content in their mother language.
I thought it would be super cool if DatoCMS can automatically detect the direction and sets the attribute to either rtl or ltr only in the text editor like most of social media platforms does like facebook, twitter, linkedin and whatsapp:
<structured-text-editor dir="auto" />
<div id="structured-text-editor">Hello, مرحبا!</div>
const myElement = document.getElementById('structured-text-editor'); const content = myElement.textContent; const isRTL = /[\u0600-\u06FF]/.test(content); // test if content contains Arabic characters myElement.dir = isRTL ? 'rtl' : 'ltr'; // set dir attribute based on content