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

Manual backport of f5c8768 as it seems
to have been forgotten to get backported to stable31.

Signed-off-by: Jonas <[email protected]>

Author: mejo-

src/css/prosemirror.scss

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

src/extensions/RichText.js

@@ -41,6 +41,7 @@ import Table from './../nodes/Table.js'
 import TaskItem from './../nodes/TaskItem.js'
 import TaskList from './../nodes/TaskList.js'
 import Text from '@tiptap/extension-text'
+import TextDirection from './../extensions/TextDirection.ts'
 import TrailingNode from './../nodes/TrailingNode.js'
 /* eslint-enable import/no-named-as-default */
 
@@ -113,6 +114,15 @@ export default Extension.create({
 			}),
 			LinkBubble,
 			TrailingNode,
+			TextDirection.configure({
+				types: [
+					'heading',
+					'paragraph',
+					'listItem',
+					'taskItem',
+					'blockquote',
+				],
+			}),
 		]
 		const additionalExtensionNames = this.options.extensions.map(e => e.name)
 		return [

src/tests/tiptap.spec.js

@@ -16,16 +16,16 @@ const renderedHTML = (markdown) => {
 describe('TipTap', () => {
 	it('render softbreaks', () => {
 		const markdown = 'This\nis\none\nparagraph'
-		expect(renderedHTML(markdown)).toEqual(`<p>${markdown}</p>`)
+		expect(renderedHTML(markdown)).toEqual(`<p dir="ltr">${markdown}</p>`)
 	})
 
 	it('render hardbreak', () => {
 		const markdown = 'Hard line break  \nNext Paragraph'
-		expect(renderedHTML(markdown)).toEqual('<p>Hard line break<br>Next Paragraph</p>')
+		expect(renderedHTML(markdown)).toEqual('<p dir="ltr">Hard line break<br>Next Paragraph</p>')
 	})
 
 	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 dir="ltr" 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>')
 	})
 })