{"id":16329788,"url":"https://github.com/amirhhashemi/tiptap-text-direction","last_synced_at":"2025-05-16T07:07:34.275Z","repository":{"id":151084869,"uuid":"623500810","full_name":"amirhhashemi/tiptap-text-direction","owner":"amirhhashemi","description":"Text direction extension for Tiptap","archived":false,"fork":false,"pushed_at":"2025-02-14T06:27:55.000Z","size":90,"stargazers_count":63,"open_issues_count":2,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-11T01:36:06.298Z","etag":null,"topics":["arabic","farsi","hebrew","prosemirror","right-to-left","rtl","tiptap","tiptap-editor","tiptap-v2"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/tiptap-text-direction","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/amirhhashemi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-04T13:51:06.000Z","updated_at":"2025-05-08T15:28:46.000Z","dependencies_parsed_at":"2025-02-28T16:22:04.897Z","dependency_job_id":null,"html_url":"https://github.com/amirhhashemi/tiptap-text-direction","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amirhhashemi%2Ftiptap-text-direction","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amirhhashemi%2Ftiptap-text-direction/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amirhhashemi%2Ftiptap-text-direction/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amirhhashemi%2Ftiptap-text-direction/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amirhhashemi","download_url":"https://codeload.github.com/amirhhashemi/tiptap-text-direction/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254485065,"owners_count":22078767,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["arabic","farsi","hebrew","prosemirror","right-to-left","rtl","tiptap","tiptap-editor","tiptap-v2"],"created_at":"2024-10-10T23:17:17.192Z","updated_at":"2025-05-16T07:07:34.229Z","avatar_url":"https://github.com/amirhhashemi.png","language":"TypeScript","funding_links":[],"categories":["Community extensions"],"sub_categories":[],"readme":"This extension automatically detects the direction of a configurable list of nodes and adds `dir=\"ltr\"` or `dir=\"rtl\"` to them.\n\n**Why not `dir=\"auto\"`?**\n\n`dir=\"auto\"` changes the text direction based on the element's content too, so why not use that?\n\n1. 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.\n\n2. 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\"`.\n\n## Installation\n\n```bash\n# npm\nnpm install tiptap-text-direction\n\n# yarn\nyarn add tiptap-text-direction\n\n# pnpm\npnpm install tiptap-text-direction\n```\n\n## Usage\n\nIn this example I used React but it works with any framework that Tiptap supports.\n\n```tsx\nimport { useEditor, EditorContent } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport TextDirection from \"tiptap-text-direction\";\n\nconst Tiptap = () =\u003e {\n  const editor = useEditor({\n    extensions: [\n      StarterKit,\n      TextDirection.configure({\n        types: [\"heading\", \"paragraph\"],\n      }),\n    ],\n  });\n\n  return \u003cEditorContent editor={editor} /\u003e;\n};\n```\n\nYou might also want to change the text alignment based on the `dir` attribute:\n\n```css\n.ProseMirror p[dir=\"rtl\"],\n.ProseMirror h1[dir=\"rtl\"],\n.ProseMirror h2[dir=\"rtl\"],\n.ProseMirror h3[dir=\"rtl\"],\n.ProseMirror h4[dir=\"rtl\"],\n.ProseMirror h5[dir=\"rtl\"],\n.ProseMirror h6[dir=\"rtl\"] {\n  text-align: right;\n}\n\n.ProseMirror p[dir=\"ltr\"],\n.ProseMirror h1[dir=\"ltr\"],\n.ProseMirror h2[dir=\"ltr\"],\n.ProseMirror h3[dir=\"ltr\"],\n.ProseMirror h4[dir=\"ltr\"],\n.ProseMirror h5[dir=\"ltr\"],\n.ProseMirror h6[dir=\"ltr\"] {\n  text-align: left;\n}\n```\n\n### Demo\n\nhttps://user-images.githubusercontent.com/87268103/178113964-db7e21e4-05d9-4339-9efc-84421c0b3b3f.mp4\n\n### HTML Output\n\nIn this example the `defaultDirection` is set to `rtl` (also a parent element has `dir=\"rtl\"`, in this case the `\u003chtml\u003e` tag) so the extension didn't add `dir=\"rtl\"` to RTL nodes.\n\n```html\n\u003cp dir=\"ltr\"\u003eHello\u003c/p\u003e\n\u003cp dir=\"ltr\"\u003eسلام hello\u003c/p\u003e\n\u003c!-- This was `rtl` by default but we forced it be `ltr` --\u003e\n\u003cul\u003e\n  \u003cli\u003e\n    \u003cp dir=\"ltr\"\u003ehello\u003c/p\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cp\u003eسلام\u003c/p\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cp dir=\"ltr\"\u003esghl\u003c/p\u003e\n  \u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2\u003eسلام\u003c/h2\u003e\n\u003ch2 dir=\"ltr\"\u003ehello\u003c/h2\u003e\n```\n\n## Options\n\n### types\n\nA list of nodes where the `dir` attribute should be added to.\n\nDefault: `[]`\n\n```javascript\nTextDirection.configure({\n  types: [\"heading\", \"paragraph\"],\n});\n```\n\n### defaultDirection\n\nIn case you have set the text direction in a parent element of the editor (most likely the `\u003chtml\u003e` 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.\n\nDefault: `null`\n\n```javascript\nTextDirection.configure({\n  defaultDirection: \"rtl\",\n});\n```\n\n## Commands\n\n### setTextDirection()\n\nSet the text direction of the selected nodes to the specified value.\n\n```javascript\neditor.commands.setTextDirection(\"rtl\");\n```\n\n### unsetTextDirection()\n\nUnset the text direction back to the `defaultDirection`.\n\n```javascript\neditor.commands.unsetTextDirection();\n```\n\n## Keyboard shortcuts\n\n| Command                 | Windows/Linux        | macOS               |\n| ----------------------- | -------------------- | ------------------- |\n| setTextDirection(\"ltr\") | `Ctrl` + `Alt` + `l` | `Cmd` + `Alt` + `l` |\n| setTextDirection(\"rtl\") | `Ctrl` + `Alt` + `r` | `Cmd` + `Alt` + `r` |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famirhhashemi%2Ftiptap-text-direction","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famirhhashemi%2Ftiptap-text-direction","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famirhhashemi%2Ftiptap-text-direction/lists"}