RTL support

[themedleb]

Solution: Please add dir="auto" (In the element that has the class "ProseMirror") so the text will be automatically LTR/RTL depending on the typed text.

[themedleb]

Or better add dir="auto" to every tag: p li h1 h2 ..., so every tag will be aligned based on the content it has.
That way it will be perfect!

[juliusknorr]

Ideally that would be something solved upstream in ueberdosis/tiptap#116 but I guess we can also add custom nodes for that as suggested there.

[themedleb]

Yup, this better be implemented in the core project.
Unfortunately I can't contribute directly, since this is beyond my knowledge, all I know is HTML, CSS and a little bit of Javascript/jQuery and PHP.

[themedleb]

My temporary workaround for this is to install "JSLoader" app, then go to Settings => "JavaScript loader" (Under "Administration" section) then add/paste this code:

setInterval(function addDirAutoAttribute() {
  var theID = document.getElementById("editor-container");
  if(theID){
    var theElement = document.getElementsByClassName("ProseMirror");
    for (var i=0; i < theElement.length; i++) {
      if (!theElement[i].hasAttribute("dir")) {
        theElement[i].setAttribute("dir", "auto");
      }
    }
  }
}, 1000);
window.onload = addDirAutoAttribute;

Then click "Save".

Not ideal, not efficient, ... but at least it works.

[juliusknorr]

Interesting pull request on tiptap ueberdosis/tiptap#2963

[amirhhashemi]

I wrote a extention that automatically adds dir="ltr|rtl" to nodes. It's more flexible than dir="auto". It may be helpful:

https://github.com/amirhhashemi/tiptap-text-direction

[sbpro86]

But how to use this with NextCloud ?

It a must for all text editors in email, notes, wikis etc.

[juliusknorr]

Notes, Collectives and Deck use the text editor so they would directly benefit from implementing it here. Other apps would need to be handled separately.

See also nextcloud/server#31420 for general RTL support in Nextcloud.

[juliusknorr]

Good reference on how to adapt the UI bits is nextcloud/forms#1654

[JuliaKirschenheuter]

First version https://github.com/nextcloud/text/pull/6874/files supports:

• Paragraph
• Heading
• Lists

As follow-up content inside of tables should be supported too. @hamza221 could you please look in it / check if a first PR (result) make sense in your eyes? Thank you!

[JuliaKirschenheuter]

After some testing of tiptap-text-direction extension i was able to observe following side effects for mixed language forms like Arabic-Latin. This have to be fixed by upstream library.

1. Mixed form for lists:
   

2. Mixed form for tables (then everything is right-aligned):
   

If there are no mixed forms, like Arabic-Latin, then it seems to work fine. We can create a follow-up issue to observe / fix it in future.

[amirhhashemi]

After some testing of tiptap-text-direction extension i was able to observe following side effects for mixed language forms like Arabic-Latin. This have to be fixed by upstream library.

1. Mixed form for lists:
   
2. Mixed form for tables (then everything is right-aligned):
   

If there are no mixed forms, like Arabic-Latin, then it seems to work fine. We can create a follow-up issue to observe / fix it in future.

Hi, I'm the maintainer of tiptap-text-direction. I'm guessing this issue can be fixed by changing your configuration. The way this plugin works, the direction of a node is specified based on the first character of its content. In the first example, I think your configuration is something like this:

TextDirection.configure({
    types: ['bulletList'],
}),

With this configuration, the dir attribute is only added to the parent <ul> element, and the direction is calculated based on the first character of its content (which is the first character of the first item). That's why when the first item's direction is ltr, the rest have the same direction.

You probably want something like this:

TextDirection.configure({
    types: ['listItem'],
}),

With this configuration, the direction is calculated independently for each list item. Don't forget to add the appropriate CSS styles. There is an example in the README.

I think the same thing can be done with the table too.

I'm just guessing here, I haven't looked into the code. Feel free to create an Issue if the problem persists. I try to address it as soon as I can, which is admittedly not very fast at the time.

[JuliaKirschenheuter]

Thank you @amirhhashemi a lot!

I will look into possible fix a bit later!

Could you please have a look into PR: amirhhashemi/tiptap-text-direction#19, (and make release if it is ok) because this one should fix our CI. Thanks a lot!

[amirhhashemi]

@JuliaKirschenheuter Released in v0.3.2

[JuliaKirschenheuter]

Dear @amirhhashemi,

Thanks again!

I was able to fix styles for lists, but can't find dir="ltr" or dir="rtl" for content inside a table. But i think it is ok to use it right now, would be nice to have it in future ;)

[amirhhashemi]

@JuliaKirschenheuter

I was able to fix styles for lists, but can't find dir="ltr" or dir="rtl" for content inside a table. But i think it is ok to use it right now, would be nice to have it in future ;)

Looks like you haven't configured tiptap-text-direction for tables. Here is the configuration I found in the PR:

TextDirection.configure({
    types: ['heading', 'paragraph', 'listItem', 'orderedList'],
}),

It should be something like this:

TextDirection.configure({
    types: ['heading', 'paragraph', 'listItem', 'orderedList', 'tableCell'],
}),

I just added tableCell to the types. I'm not sure what plugin you use for tables, but the idea is the same for every plugin. You just need to tell tiptap-text-direction which nodes it should add the dir attribute to.