[stable31] Fixes for TextDirection extension

src/css/prosemirror.scss

@@ -50,7 +50,7 @@ div.ProseMirror {
 		display: flex;
 		align-items: start;
 		// Leave space for checkbox (14px width + 2x 1px border + 6px margin-right)
-		margin-left: -24px;
+		margin-inline-start: -24px;
 
 		input[type=checkbox] {
 			display: none;
@@ -256,7 +256,7 @@ div.ProseMirror {
 
 	pre.frontmatter {
 		margin-bottom: 2em;
-		border-left: 4px solid var(--color-primary-element);
+		border-inline-start: 4px solid var(--color-primary-element);
 	}
 
 	pre.frontmatter::before {
@@ -274,17 +274,25 @@ div.ProseMirror {
 
 	li {
 		position: relative;
-		padding-left: 3px;
+		padding-inline-start: 3px;
 
 		p {
 			position: relative;
 			margin-bottom: 0.5em;
 		}
 	}
 
+    li [dir="rtl"] {
+    	text-align: right;
+    }
+
+    li [dir="ltr"] {
+    	text-align: left;
+    }
+
 	ul, ol {
-		padding-left: 10px;
-		margin-left: 10px;
+		padding-inline-start: 10px;
+		margin-inline-start: 10px;
 		margin-bottom: 1em;
 	}
 
@@ -303,11 +311,10 @@ div.ProseMirror {
 	}
 
 	blockquote {
-		padding-left: 1em;
-		border-left: 4px solid var(--color-primary-element);
+		padding-inline-start: 1em;
+		border-inline-start: 4px solid var(--color-primary-element);
 		color: var(--color-text-maxcontrast);
-		margin-left: 0;
-		margin-right: 0;
+		margin-inline: 0;
 	}
 
 	// table variables

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/extensions/TextDirection.ts

@@ -0,0 +1,175 @@
+/**
+ * SPDX-FileCopyrightText: 2023 Amir Hossein Hashemi
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Extension } from '@tiptap/core'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+
+const RTL = '\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC'
+const LTR = 'A-Za-z\u00C0-\u00D6\u00D8-\u00F6'
+	+ '\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF\u200E\u2C00-\uFB1C'
+	+ '\uFE00-\uFE6F\uFEFD-\uFFFF'
+
+/* eslint-disable no-misleading-character-class */
+const RTL_REGEX = new RegExp('^[^' + LTR + ']*[' + RTL + ']')
+const LTR_REGEX = new RegExp('^[^' + RTL + ']*[' + LTR + ']')
+
+/**
+ * @param text Text string
+ *
+ *Source: https://github.com/facebook/lexical/blob/429e3eb5b5a244026fa4776650aabe3c8e17536b/packages/lexical/src/LexicalUtils.ts#L163
+ */
+export function getTextDirection(text: string): 'ltr' | 'rtl' | null {
+	if (text.length === 0) {
+		return null
+	}
+	if (RTL_REGEX.test(text)) {
+		return 'rtl'
+	}
+	if (LTR_REGEX.test(text)) {
+		return 'ltr'
+	}
+	return null
+}
+
+const validDirections = ['ltr', 'rtl', 'auto'] as const
+
+type Direction = (typeof validDirections)[number]
+
+/**
+ * @param object Property object
+ * @param object.types List of node types to consider
+ */
+function TextDirectionPlugin({ types }: { types: string[] }) {
+	return new Plugin({
+		key: new PluginKey('textDirection'),
+		appendTransaction: (transactions, oldState, newState) => {
+			const docChanges = transactions.some(
+				(transaction) => transaction.docChanged,
+			)
+			if (!docChanges) {
+				return
+			}
+
+			let modified = false
+			const tr = newState.tr
+			tr.setMeta('addToHistory', false)
+
+			newState.doc.descendants((node, pos) => {
+				if (types.includes(node.type.name)) {
+					if (node.attrs.dir !== null && node.textContent.length > 0) {
+						return
+					}
+					const newTextDirection = getTextDirection(node.textContent)
+					if (node.attrs.dir === newTextDirection) {
+						return
+					}
+
+					const marks = tr.storedMarks || []
+					tr.setNodeAttribute(pos, 'dir', newTextDirection)
+					// `tr.setNodeAttribute` resets the stored marks so we'll restore them
+					for (const mark of marks) {
+						tr.addStoredMark(mark)
+					}
+					modified = true
+				}
+			})
+
+			return modified ? tr : null
+		},
+	})
+}
+
+declare module '@tiptap/core' {
+	interface Commands<ReturnType> {
+		textDirection: {
+			/**
+			 * Set the text direction attribute
+			 */
+			setTextDirection: (direction: Direction) => ReturnType
+			/**
+			 * Unset the text direction attribute
+			 */
+			unsetTextDirection: () => ReturnType
+		}
+	}
+}
+
+export interface TextDirectionOptions {
+	types: string[]
+	defaultDirection: Direction | null
+}
+
+export const TextDirection = Extension.create<TextDirectionOptions>({
+	name: 'textDirection',
+
+	addOptions() {
+		return {
+			types: [],
+			defaultDirection: null,
+		}
+	},
+
+	addGlobalAttributes() {
+		return [
+			{
+				types: this.options.types,
+				attributes: {
+					dir: {
+						default: null,
+						parseHTML: (element) =>
+							element.dir || this.options.defaultDirection,
+						renderHTML: (attributes) => {
+							if (attributes.dir === this.options.defaultDirection) {
+								return {}
+							}
+							return { dir: attributes.dir }
+						},
+					},
+				},
+			},
+		]
+	},
+
+	addCommands() {
+		return {
+			setTextDirection:
+				(direction: Direction) =>
+					({ commands }) => {
+						if (!validDirections.includes(direction)) {
+							return false
+						}
+
+						return this.options.types.every((type) =>
+							commands.updateAttributes(type, { dir: direction }),
+						)
+					},
+
+			unsetTextDirection:
+				() =>
+					({ commands }) => {
+						return this.options.types.every((type) =>
+							commands.resetAttributes(type, 'dir'),
+						)
+					},
+		}
+	},
+
+	addKeyboardShortcuts() {
+		return {
+			'Mod-Alt-l': () => this.editor.commands.setTextDirection('ltr'),
+			'Mod-Alt-r': () => this.editor.commands.setTextDirection('rtl'),
+		}
+	},
+
+	addProseMirrorPlugins() {
+		return [
+			TextDirectionPlugin({
+				types: this.options.types,
+			}),
+		]
+	},
+})
+
+export default TextDirection

src/nodes/Callout.vue

@@ -50,12 +50,12 @@ export default {
 <style lang="scss" scoped>
 .callout {
 	background-color: var(--callout-background, var(--color-background-hover));
-	border-left-color: var(--callout-border, var(--color-primary-element));
+	border-inline-start-color: var(--callout-border, var(--color-primary-element));
 	border-radius: var(--border-radius);
 	padding: 1em;
-	padding-left: 0.5em;
-	border-left-width: 0.3em;
-	border-left-style: solid;
+	padding-inline-start: 0.5em;
+	border-inline-start-width: 0.3em;
+	border-inline-start-style: solid;
 	position: relative;
 	margin-bottom: 0.5em;
 
@@ -68,7 +68,7 @@ export default {
 	}
 
 	.callout__content {
-		margin-left: 1em;
+		margin-inline-start: 1em;
 		&:deep(p) {
 			&:last-child {
 				margin-bottom: 0;

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>')
 	})
 })