nextcloud / text

📑 Collaborative document editing using Markdown
GNU Affero General Public License v3.0
556 stars 92 forks source link

RTL support #882

Open themedleb opened 4 years ago

themedleb commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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.

themedleb commented 4 years ago

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 commented 4 years ago

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 commented 2 years ago

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

amirhhashemi commented 1 year ago

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

selimb86 commented 1 year ago

But how to use this with NextCloud ?

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

juliusknorr commented 1 year ago

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 commented 1 year ago

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