[Bug] RTL character causes text direction issue

[Algorithm5838]

---

Describe the bug
When an RTL (Right-to-Left) character is introduced in the text, the entire text becomes RTL, even in paragraphs that do not have an RTL character. This issue occurs when the text is not in editing mode.

Expected behavior
Each paragraph should follow the direction of its first character. If the first character is LTR (Left-to-Right), the whole paragraph should be LTR. If the first character is RTL, the whole paragraph should be RTL.

Screenshots

This is how the first question should look:

Deployment

• Docker
• Vercel
• Server

Desktop (please complete the following information):

• OS: [macOS]
• Browser [Chrome and Firefox]
• Version [Latest]

Smartphone (please complete the following information):

• OS: [Android]
• Browser [Chrome and Firefox]
• Version [Latest]

[leadscloud]

这不是算是bug吧，应该是正常的行为。
阿语是从右往左看的，在中东一些国家他们的网页都是从右往左布局的，对我们来说，看起来非常难受。

所以有阿语一般都会自动从右往左书写。在css中通过 direction可以控制。

style={{
        fontSize: `${props.fontSize ?? 14}px`,
        direction: /[\u0600-\u06FF]/.test(props.content) ? "rtl" : "ltr",
      }}

direction: /[\u0600-\u06FF]/.test(props.content) ? "rtl" : "ltr", 判断如果有阿语，就自动切换为rtl布局。

所以这是正常行为。如果非要从左往右，修改app\components\markdown.tsx中的代码。

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

This is not a bug, it should be normal behavior.
Arabic is read from right to left. In some countries in the Middle East, their web pages are laid out from right to left. For us, it looks very uncomfortable.

Therefore, Arabic is generally written automatically from right to left. It can be controlled by direction in css.

style={{
        fontSize: `${props. fontSize ?? 14}px`,
        direction: /[\u0600-\u06FF]/.test(props.content) ? "rtl" : "ltr",
      }}

direction: /[\u0600-\u06FF]/.test(props.content) ? "rtl" : "ltr", judges that if there is Arabic language, it will automatically switch to rtl layout.

So this is normal behavior. If you must go from left to right, modify the code in app\components\markdown.tsx.

[Algorithm5838]

Hey leadscloud,

Thanks for your response! I really appreciate you explaining the right-to-left behavior in relation to the Arabic language. Since I'm an Arabic speaker, I wanted to suggest a couple of solutions to fix the garbled text issue:

One acceptable solution could be to force a left-to-right (LTR) layout for all paragraphs, regardless of whether there are RTL characters or not.

A better solution, which I've seen implemented in Google Keep, is to check the first letter of each paragraph. If it's an LTR character, the paragraph should be displayed in LTR, and if it's an RTL character, the paragraph should be displayed in RTL. This way, each paragraph follows its natural direction and provides a better user experience.

An example from Google Keep:

I know I'm not a developer, but I think these suggestions could really improve the readability.

Thanks for considering these ideas!

[Algorithm5838]

I just wanted to drop a quick thank you note to express my gratitude for your assistance. I just used ChatGPT and followed your hints to write some code, and guess what? It worked like a charm! I'm really thrilled with the outcome, especially with the second solution I suggested.

I also want to give a shoutout to Yidadaa for developing such an amazing UI.

Here is a screenshot after the new edits:

And another screenshot of the edited code:

Here is the code, it might need some edits, but I believe you have a better understanding of implementation, so I'll leave it to your expertise:

const paragraphs = props.content.split("\n");

    <>
      {paragraphs.map((paragraph, index) => (
        <p
          key={index}
          style={{
            direction: /\p{Script=Latin}/u.test(paragraph.trim().charAt(0))
              ? "ltr"
              : "rtl",
          }}
        >
          {paragraph}
        </p>
      ))}
    </>

I'm not entirely sure about the code that ChatGPT removed.

[Algorithm5838]

Sorry, big mistake for non-Latin or Arabic scripts.
Here is the correct one:

    <>
      {paragraphs.map((paragraph, index) => (
        <p
          key={index}
          style={{
            direction: /\p{Script=Arabic}/u.test(paragraph.trim().charAt(0))
              ? "rtl"
              : "ltr",
          }}
        >
          {paragraph}
        </p>
      ))}
    </>

Also, it would be awesome if it used a loop to check for the next character if the first one or its neighbor are not letters.

[leadscloud]

这看起来是个简单的问题，处理起来可能是比较复杂的，需要考虑的情况很多，比如希伯来语(he)，阿拉伯语(ar)

阿拉伯语、希伯来语、波斯语、乌尔都语、克什米尔语、普什图语、维吾尔语、索拉尼库尔德语、旁遮普语和信德语是现代最广泛使用的 RTL 书写系统
https://en.wikipedia.org/wiki/Right-to-left_script

如果全部处理需要一个单独的库比如react-intl 来判断语言，对于混合内容 又需要特别处理，也许可以在界面上方有一个提示按钮，让用户选择LTR还是RTL。

当然，最简单的判断就是当前的写法，

content contains arabric

direction: /[\u0600-\u06FF]/.test(props.content) ? "rtl" : "ltr",

content start with arabric

direction: /^[\u0600-\u06FF]/.test(props.content) ? "rtl" : "ltr",

这是一个比较小众的需求，有需求的可以直接修改以上代码。

今天学到一个新知识： /\p{Script=Arabic}/u是阿语的正则匹配，是一种 Unicode 正则表达式属性，用于匹配所有阿拉伯语字符

[Yidadaa]

Just use dir="auto".

remarkjs/react-markdown#197 (comment)

[Yidadaa]

Fixed:

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Fixed: