fix(files): add tiptap-text-direction extension to support RTL

Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>

[skip ci]

Author: JuliaKirschenheuter

package.json

@@ -61,6 +61,7 @@
     "@tiptap/extension-collaboration-cursor": "^2.9.1",
     "@tiptap/extension-document": "^2.9.1",
     "@tiptap/extension-dropcursor": "^2.9.1",
+    "tiptap-text-direction": "^0.3.2",
     "@tiptap/extension-gapcursor": "^2.9.1",
     "@tiptap/extension-hard-break": "^2.9.1",
     "@tiptap/extension-heading": "^2.9.1",

src/css/prosemirror.scss

@@ -284,6 +284,14 @@ div.ProseMirror {
 		}
 	}
 
+	li [dir="rtl"] {
+		text-align: right;
+	}
+
+	li [dir="ltr"] {
+		text-align: left;
+	}
+
 	ul, ol {
 		padding-left: 10px;
 		margin-left: 10px;

src/extensions/RichText.js

@@ -41,6 +41,7 @@ import TaskItem from './../nodes/TaskItem.js'
 import TaskList from './../nodes/TaskList.js'
 import Text from '@tiptap/extension-text'
 import TrailingNode from './../nodes/TrailingNode.js'
+import TextDirection from 'tiptap-text-direction'
 /* eslint-enable import/no-named-as-default */
 
 import { Strong, Italic, Strike, Link, Underline } from './../marks/index.js'
@@ -115,6 +116,9 @@ export default Extension.create({
 				})
 				: null,
 			TrailingNode,
+			TextDirection.configure({
+				types: ['heading', 'paragraph', 'listItem', 'orderedList'],
+			}),
 		]
 		const additionalExtensionNames = this.options.extensions.map(e => e.name)
 		return [

src/tests/tiptap.spec.js

@@ -28,6 +28,6 @@ describe('TipTap', () => {
 
 	it('render taskList', () => {
 		const markdown = '* [ ] item 1\n'
-		expect(renderedHTML(markdown)).toEqual('<ul class="contains-task-list"><li data-checked="false" class="task-list-item checkbox-item"><input type="checkbox" class="" contenteditable="false"><label><p>item 1</p></label></li></ul>')
+		expect(renderedHTML(markdown)).toEqual('<ul class="contains-task-list"><li data-checked="false" class="task-list-item checkbox-item"><input type="checkbox" class="" contenteditable="false"><label><p dir="ltr">item 1</p></label></li></ul>')
 	})
 })