Add dir element in <p> tag automatically

[rezaervani]

How To Reproduce

Based on article at : https://www.w3.org/International/questions/qa-html-dir

I did some experience to my humhub, add dir element in p tag on stream, it make every RTL text (arabic) automatically start from Right side, and keep LTR text start from left side

With code is looked like this :

Expected Result

The Question is :

How to make dir element automatically shown in stream (after type a status from markdown editor) ?

Thank you

[ArchBlood]

See #4875

[luke-]

Do I understand it correctly that with <p dir="auto"> everything is displayed correctly? And it's just a matter of adding the dir="auto" attribute at the e.g. P?

[rezaervani]

Do I understand it correctly that with <p dir="auto"> everything is displayed correctly?

Yes. All this time all stream text display from left, include RTL language like arabic, add dir=auto will correct it.

Based on the same article, the solution should not be done through CSS

[luke-]

Instead of adding an RTL attribute everywhere, could you not add here: https://github.com/humhub/humhub/pull/4875/files

[ArchBlood]

Instead of adding an RTL attribute everywhere, could you not add here: https://github.com/humhub/humhub/pull/4875/files

Wouldn't work on some bootstrap elements

[luke-]

But on the Richtext?

[ArchBlood]

But on the Richtext?

Adding auto would work only on text, menu icons and such will not be changed

Richtext is however changed with or without auto

[ArchBlood]

It also happens with all RTL-supported languages of course.

[ArchBlood]

The only way I could think of fixing this without changing to a newer version of Bootstrap would be by making special containers for menus and dropdown menus where it would support the RTL functions.

[rezaervani]

But on the Richtext?

I try this schema on prosemirror :

paragraph: {
    content: "inline*",
    group: "block",
    attrs: {
      dir: {default: "auto"},
    },
    parseDOM: [
      {
        tag: "p",
        getAttrs: (dom) => ({dir: dom.getAttribute("dir")}),
      },
    ],
    toDOM(node) {
      const {dir} = node.attrs;
      return ["p", {"dir": dir}, 0];
    },
  },

it will add attribute dir=auto automatically in paragraph tag

So when I type arabic, it will start from right side.

I put rough demo here : https://rezaervani.com/koding/prose.html