feat: text direction extension

demos/src/Extensions/TextDirection/React/index.jsx

@@ -0,0 +1,51 @@
+import './styles.scss'
+
+import Document from '@tiptap/extension-document'
+import Heading from '@tiptap/extension-heading'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import TextDirection from '@tiptap/extension-text-direction'
+import { EditorContent, useEditor } from '@tiptap/react'
+import React from 'react'
+
+export default () => {
+  const editor = useEditor({
+    extensions: [
+      Document,
+      Paragraph,
+      Text,
+      Heading,
+      TextDirection.configure({
+        types: ['heading', 'paragraph'],
+      }),
+    ],
+    content: `
+        <h2 dir="ltr">Heading</h2>
+        <h2 dir="rtl">عنوان</h2>
+        <p id="ltr-text" dir="ltr">first paragraph</p>
+        <p id="rtl-text" dir="rtl">پاراگراف دوم</p>
+      `,
+  })
+
+  if (!editor) {
+    return null
+  }
+
+  return (
+    <div>
+      <button
+        onClick={() => editor.chain().focus().setTextDirection('ltr').run()}
+        className={editor.isActive({ dir: 'ltr' }) ? 'is-active' : ''}
+      >
+        ltr
+      </button>
+      <button
+        onClick={() => editor.chain().focus().setTextDirection('rtl').run()}
+        className={editor.isActive({ dir: 'rtl' }) ? 'is-active' : ''}
+      >
+        rtl
+      </button>
+      <EditorContent editor={editor} />
+    </div>
+  )
+}

demos/src/Extensions/TextDirection/React/index.spec.js

@@ -0,0 +1,51 @@
+context('/src/Extensions/TextDirection/React/', () => {
+  before(() => {
+    cy.visit('/src/Extensions/TextDirection/React/')
+  })
+
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.setContent('<p>LTR Example Text</p>\n<p>متن راست به چپ</p>')
+    })
+  })
+
+  it('should parse RTL text correctly', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.setContent('<p dir="rtl">متن راست به چپ</p>')
+      expect(editor.getHTML()).to.eq('<p dir="rtl">متن راست به چپ</p>')
+    })
+  })
+
+  it('should parse LTR text correctly', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.setContent('<p dir="ltr">LTR Example Text</p>')
+      expect(editor.getHTML()).to.eq('<p dir="ltr">LTR Example Text</p>')
+    })
+  })
+
+  it('should remove the dir attribute if node is empty', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.setContent('<p dir="ltr"></p>')
+      expect(editor.getHTML()).to.eq('<p></p>')
+    })
+  })
+
+  it('shouldn\'t change the dir attribute if it already has one', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.setContent('<p dir="rtl">LTR Example Text</p>')
+      expect(editor.getHTML()).to.eq('<p dir="rtl">LTR Example Text</p>')
+    })
+  })
+
+  it('should set the text direction to ltr on the 1st button', () => {
+    cy.get('button:nth-child(1)').click()
+
+    cy.get('.ProseMirror').find('#rtl-text').invoke('attr', 'dir').should('eq', 'ltr')
+  })
+
+  it('should set the text direction to rtl on the 2st button', () => {
+    cy.get('button:nth-child(2)').click()
+
+    cy.get('.ProseMirror').find('#ltr-text').invoke('attr', 'dir').should('eq', 'rtl')
+  })
+})

demos/src/Extensions/TextDirection/React/styles.scss

@@ -0,0 +1,7 @@
+.ProseMirror li[dir="rtl"] {
+  text-align: right;
+}
+
+.ProseMirror li[dir="ltr"] {
+  text-align: left;
+}

docs/api/extensions/text-direction.md

@@ -0,0 +1,77 @@
+---
+description: Left, right, center, whatever! Align the text however you like.
+icon: align-left
+---
+
+# TextDirection
+
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-text-direction.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-text-direction)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-text-direction.svg)](https://npmcharts.com/compare/@tiptap/extension-text-direction?minimal=true)
+
+This plugin automatically adds the `dir` attribute to a specified list of nodes. The direction is automatically detected based on the node's content.
+
+## Installation
+
+```bash
+npm install @tiptap/extension-text-direction
+```
+
+## Settings
+
+### types
+
+A list of nodes where the `dir` attribute should be added to. Usually something like `['heading', 'paragraph']`.
+
+Default: `[]`
+
+```js
+TextDirection.configure({
+  types: ["heading", "paragraph"],
+});
+```
+
+### directions
+
+A list of available options for the 'dir' attribute.
+
+Default: `['ltr', 'rtl']`
+
+```js
+TextDirection.configure({
+  directions: ["ltr", "rtl"],
+});
+```
+
+### defaultDirection
+
+The default direction.
+
+:::warning
+If you specify a defaultDirection, the `dir` attribute will be excluded in nodes that have the same direction as the defaultDirection.
+:::
+
+Default: `null`
+
+```js
+TextDirection.configure({
+  defaultDirection: "rtl",
+});
+```
+
+## Commands
+
+### setTextDirection()
+
+Set the text direction to the specified value.
+
+```js
+editor.commands.setTextDirection("rtl");
+```
+
+## Source code
+
+[packages/extension-text-direction/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text-direction/)
+
+## Usage
+
+https://embed.tiptap.dev/preview/Extensions/TextDirection