Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RTL support #882

Open
themedleb opened this issue Jun 17, 2020 · 10 comments · May be fixed by #6874
Open

RTL support #882

themedleb opened this issue Jun 17, 2020 · 10 comments · May be fixed by #6874
Assignees
Labels
1. to develop enhancement New feature or request

Comments

@themedleb
Copy link

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 themedleb added the enhancement New feature or request label Jun 17, 2020
@themedleb
Copy link
Author

themedleb commented Jun 17, 2020

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
Copy link
Member

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
Copy link
Author

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
Copy link
Author

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
Copy link
Member

Interesting pull request on tiptap ueberdosis/tiptap#2963

@amirhhashemi
Copy link

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
Copy link

sbpro86 commented Jun 13, 2023

But how to use this with NextCloud ?

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

@juliusknorr
Copy link
Member

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
Copy link
Member

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

@jancborchardt jancborchardt moved this to 🧭 Planning evaluation / ideas in 🖍 Design team Aug 19, 2024
@github-project-automation github-project-automation bot moved this to 🧭 Planning evaluation (don't pick) in 📝 Office team Aug 22, 2024
@jancborchardt jancborchardt moved this from 🧭 Planning evaluation / ideas to 🏗️ At engineering in 🖍 Design team Aug 22, 2024
@JuliaKirschenheuter JuliaKirschenheuter moved this from 🧭 Planning evaluation (don't pick) to 📄 To do (~10 entries) in 📝 Office team Oct 16, 2024
@JuliaKirschenheuter
Copy link
Contributor

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
1. to develop enhancement New feature or request
Projects
Status: 🏗️ In progress
Status: 🏗️ At engineering
Development

Successfully merging a pull request may close this issue.

7 participants