Rtl Support dynamically when user type first char

[pooooriya]

The problem I am facing
when I want to type persian like "سلام"
I Cant change direction
The solution I would like
dynamically change dir and added to classname list of that element
because when I saved my work and use dangerouslyhtml then without any side effects I show my persian language with dir="rtl"

Alternatives I have considered
nothing

Additional context
nothing and thanks for this cool package

[cadars]

See: #116

Still, if not default, it would be nice to have dir="auto" as a simple setting.

[cadars]

Following the guide for global attributes I came up with a quick and dirty extension. (For some reason lists and blockquotes only work in Firefox.)

import { Extension } from '@tiptap/core'

const AutoDir = Extension.create({
  addGlobalAttributes() {
    return [   
      {
        types: [
          'heading',
          'paragraph',
          'blockquote',
          'bulletList',
          'orderedList',
        ],
        attributes: {
          autoDir: {
            renderHTML: attributes => ({
              dir: 'auto',
            }),
            parseHTML: element => ({
              autoDir: element.dir.autoDir || 'auto',
            }),
          },
        },
      },
    ]
  },
})

[cadars]

Update: to make blockquotes and lists work, dir="auto" should only be added to parent nodes… I’m not sure how to make that happen in the extension.

Here is a test for this issue: https://codepen.io/cadars/pen/poeXMXZ?editors=1100

[cadars]

Updated to work with the parseHTML method change:

import { Extension } from '@tiptap/core'

const AutoDir = Extension.create({
  name: 'AutoDir',
  addGlobalAttributes() {
    return [   
      {
        types: [
          'heading',
          'paragraph',
          'bulletList',
          'orderedList',
          'blockquote',
        ],
        attributes: {
          autoDir: {
            renderHTML: attributes => ({
              dir: 'auto',
            }),
            parseHTML: element => element.dir || 'auto',
          },
        },
      },
    ]
  },
})

[philippkuehn]

For now, adding a custom extension is the preferred way.

[amirhhashemi]

Hey everyone. I wrote a small extension that automatically adds dir="rtl" or dir="ltr" based on the node's content. You might find it useful: https://github.com/amirhhashemi/tiptap-text-direction