text icon indicating copy to clipboard operation
text copied to clipboard

RTL support

Open themedleb opened this issue 4 years ago • 9 comments

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 avatar Jun 17 '20 06:06 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!

themedleb avatar Jun 17 '20 07:06 themedleb

Ideally that would be something solved upstream in https://github.com/scrumpy/tiptap/issues/116 but I guess we can also add custom nodes for that as suggested there.

juliusknorr avatar Jun 17 '20 14:06 juliusknorr

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 avatar Jun 18 '20 00:06 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.

themedleb avatar Jun 18 '20 19:06 themedleb

Interesting pull request on tiptap https://github.com/ueberdosis/tiptap/pull/2963

juliusknorr avatar Jul 09 '22 09:07 juliusknorr

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

amirhhashemi avatar Apr 12 '23 05:04 amirhhashemi

But how to use this with NextCloud ?

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

selimb86 avatar Jun 13 '23 19:06 selimb86

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 https://github.com/nextcloud/server/issues/31420 for general RTL support in Nextcloud.

juliusknorr avatar Jun 13 '23 20:06 juliusknorr

Good reference on how to adapt the UI bits is https://github.com/nextcloud/forms/pull/1654

juliusknorr avatar Oct 12 '23 10:10 juliusknorr