https://github.com/amirhhashemi/tiptap-text-direction
Text direction extension for Tiptap
https://github.com/amirhhashemi/tiptap-text-direction
arabic farsi hebrew prosemirror right-to-left rtl tiptap tiptap-editor tiptap-v2
Last synced: 11 days ago
JSON representation
Text direction extension for Tiptap
- Host: GitHub
- URL: https://github.com/amirhhashemi/tiptap-text-direction
- Owner: amirhhashemi
- License: mit
- Created: 2023-04-04T13:51:06.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2025-02-14T06:27:55.000Z (2 months ago)
- Last Synced: 2025-04-02T06:02:34.289Z (18 days ago)
- Topics: arabic, farsi, hebrew, prosemirror, right-to-left, rtl, tiptap, tiptap-editor, tiptap-v2
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/tiptap-text-direction
- Size: 87.9 KB
- Stars: 57
- Watchers: 3
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-tiptap - tiptap-text-direction
- awesome-tiptap - tiptap-text-direction
README
This extension automatically detects the direction of a configurable list of nodes and adds `dir="ltr"` or `dir="rtl"` to them.
**Why not `dir="auto"`?**
`dir="auto"` changes the text direction based on the element's content too, so why not use that?
1. It doesn't give you granular control over the direction. For example, if you want to have different styles based on the direction you can't do that with `dir="auto"`. There is `:dir()` pseudo-class that can help you in this situation but it's only supported in Firefox.
2. You can't override it. `dir="auto"` uses the first character of the element to determine the direction and you can't change it unless you explicitly set the direction with `dir="ltr|rtl"`.
## Installation
```bash
# npm
npm install tiptap-text-direction
# yarn
yarn add tiptap-text-direction
# pnpm
pnpm install tiptap-text-direction
```
## Usage
In this example I used React but it works with any framework that Tiptap supports.
```tsx
import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import TextDirection from "tiptap-text-direction";
const Tiptap = () => {
const editor = useEditor({
extensions: [
StarterKit,
TextDirection.configure({
types: ["heading", "paragraph"],
}),
],
});
return ;
};
```
You might also want to change the text alignment based on the `dir` attribute:
```css
.ProseMirror p[dir="rtl"],
.ProseMirror h1[dir="rtl"],
.ProseMirror h2[dir="rtl"],
.ProseMirror h3[dir="rtl"],
.ProseMirror h4[dir="rtl"],
.ProseMirror h5[dir="rtl"],
.ProseMirror h6[dir="rtl"] {
text-align: right;
}
.ProseMirror p[dir="ltr"],
.ProseMirror h1[dir="ltr"],
.ProseMirror h2[dir="ltr"],
.ProseMirror h3[dir="ltr"],
.ProseMirror h4[dir="ltr"],
.ProseMirror h5[dir="ltr"],
.ProseMirror h6[dir="ltr"] {
text-align: left;
}
```
### Demo
https://user-images.githubusercontent.com/87268103/178113964-db7e21e4-05d9-4339-9efc-84421c0b3b3f.mp4
### HTML Output
In this example the `defaultDirection` is set to `rtl` (also a parent element has `dir="rtl"`, in this case the `` tag) so the extension didn't add `dir="rtl"` to RTL nodes.
```html
Hello
سلام hello
-
hello
-
سلام
-
sghl
سلام
hello
```
## Options
### types
A list of nodes where the `dir` attribute should be added to.
Default: `[]`
```javascript
TextDirection.configure({
types: ["heading", "paragraph"],
});
```
### defaultDirection
In case you have set the text direction in a parent element of the editor (most likely the `` element), you can set `defaultDirection` to avoid adding the `dir` attribute to elements that have the same direction as the `defaultDirection` because it's not needed. It can reduce the HTML output's size.
Default: `null`
```javascript
TextDirection.configure({
defaultDirection: "rtl",
});
```
## Commands
### setTextDirection()
Set the text direction of the selected nodes to the specified value.
```javascript
editor.commands.setTextDirection("rtl");
```
### unsetTextDirection()
Unset the text direction back to the `defaultDirection`.
```javascript
editor.commands.unsetTextDirection();
```
## Keyboard shortcuts
| Command | Windows/Linux | macOS |
| ----------------------- | -------------------- | ------------------- |
| setTextDirection("ltr") | `Ctrl` + `Alt` + `l` | `Cmd` + `Alt` + `l` |
| setTextDirection("rtl") | `Ctrl` + `Alt` + `r` | `Cmd` + `Alt` + `r` |