feat(extensions): add text-direction extension

[amirhhashemi]

I published it as a separate package. Check it out if you want this feature: https://github.com/amirhhashemi/tiptap-text-direction

This plugin automatically adds dir="ltr" or dir="rtl" to a specified list of nodes based on their content. Forcing a direction is also possible through the setTextDirection command. The direction detection logic comes from lexical.

Why?

Why not? tiptap is one of the most popular rich text editors and it has been adopted for very large-scale applications. IMO it should have first-class support for RTL content. This plugin may not solve all of the issues with supporting both RTL and LTR content but definitely makes it easier.

Demo

2022-07-09.20-44-39.mp4

Example configuration:

  TextDirection.configure({
    types: [
      "paragraph",
      "heading",
      "blockquote",
      "listItem",
    ],
  }),

editor.getHTML() result:

<p dir="ltr">Hello</p>
<p dir="ltr">سلام fsdlfksjodfiwer hello</p>
<ul>
    <li dir="ltr">
        <p dir="ltr">hello</p>
    </li>
    <li dir="rtl">
        <p dir="rtl">سلام</p>
    </li>
    <li dir="ltr">
        <p dir="ltr">sghl</p>
    </li>
</ul>
<h2 dir="rtl">سلام</h2>
<h2 dir="ltr">hello</h2>

The dir attribute must be rendered instead of being a decorator (like text-align extention) because it's not just an in-editor thing. displaying and especially styling RTL content could be different than LTR content so dir must be in the HTML output to clarify the direction for both browsers and developers.

Why not dir="auto"?

Mainly for more control. With dir="auto" we can't change the direction later and also styling would be harder (if RTL and LTR content have different styles).
"Where to add dir=" auto"" is another challenging question. if we add it to an element that wraps the editor, the direction of the whole document would be determined by the first node. We can add it to each node but, again, we don't have any control over the direction.

Why not a custom paragraph node?

headings and other text nodes also need it

Related issues

#116
#1621

[netlify]

❌ Deploy Preview for tiptap-embed failed.

Name	Link
🔨 Latest commit	3cf1786
🔍 Latest deploy log	https://app.netlify.com/sites/tiptap-embed/deploys/62c54a163e5e60000840363f

[amirhhashemi]

Sorry, I messed up my previous PR. I accidentally removed my fork, and all of my PRs got closed

[amirhhashemi]

Notice I've disabled this rule here. I'm not sure about its impact on other plugins/collaborative editing.

[amirhhashemi]

Hmm, maybe "ignore" is a better name for that. The idea is that some apps are designed for a specific language, let's say Arabic, so it's not necessary to add dir="rtl" to every node because that's the default direction that is set in the html tag.

[amirhhashemi]

@bdbch should I publish this as my own library as you discussed in #2973 ?

[bdbch]

@ahhshm feel free to make it your own package for now and post it to the discussions board! :) We'll discuss when we'll merge it.