Fixes for TextDirection extension

package.json

@@ -96,7 +96,6 @@
     "proxy-polyfill": "^0.3.2",
     "slug": "^11.0.0",
     "tippy.js": "^6.3.7",
-    "tiptap-text-direction": "^0.3.2",
     "uuid": "^11.1.0",
     "vue": "^2.7.16",
     "vue-click-outside": "^1.1.0",

src/css/prosemirror.scss

@@ -51,7 +51,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;
@@ -262,7 +262,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 {
@@ -280,7 +280,7 @@ div.ProseMirror {
 
 	li {
 		position: relative;
-		padding-left: 3px;
+		padding-inline-start: 3px;
 
 		p {
 			position: relative;
@@ -298,8 +298,8 @@ div.ProseMirror {
 
 	ul,
 	ol {
-		padding-left: 10px;
-		margin-left: 10px;
+		padding-inline-start: 10px;
+		margin-inline-start: 10px;
 		margin-bottom: 1em;
 	}
 
@@ -318,11 +318,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

@@ -16,7 +16,6 @@ import Gapcursor from '@tiptap/extension-gapcursor'
 import HorizontalRule from '@tiptap/extension-horizontal-rule'
 import ListItem from '@tiptap/extension-list-item'
 import Text from '@tiptap/extension-text'
-import TextDirection from 'tiptap-text-direction'
 import MentionSuggestion from '../components/Suggestion/Mention/suggestions.js'
 import Heading from '../nodes/Heading.js'
 import EmojiSuggestion from './../components/Suggestion/Emoji/suggestions.js'
@@ -25,6 +24,7 @@ import LinkPicker from './../extensions/LinkPicker.js'
 import Markdown from './../extensions/Markdown.js'
 import Mention from './../extensions/Mention.js'
 import Search from './../extensions/Search.js'
+import TextDirection from './../extensions/TextDirection.ts'
 import BulletList from './../nodes/BulletList.js'
 import Callouts from './../nodes/Callouts.js'
 import CodeBlock from './../nodes/CodeBlock.js'
@@ -120,7 +120,13 @@ export default Extension.create({
 			LinkBubble,
 			TrailingNode,
 			TextDirection.configure({
-				types: ['heading', 'paragraph', 'listItem', 'orderedList'],
+				types: [
+					'heading',
+					'paragraph',
+					'listItem',
+					'taskItem',
+					'blockquote',
+				],
 			}),
 		]
 		const additionalExtensionNames = this.options.extensions.map((e) => e.name)

src/extensions/TextDirection.ts

@@ -0,0 +1,176 @@
+/**
+ * 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

@@ -51,12 +51,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;
 
@@ -69,7 +69,7 @@ export default {
 	}
 
 	.callout__content {
-		margin-left: 1em;
+		margin-inline-start: 1em;
 		&:deep(p) {
 			&:last-child {
 				margin-bottom: 0;

src/tests/tiptap.spec.js

@@ -31,7 +31,7 @@ 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 dir="ltr">item 1</p></label></li></ul>',
+			'<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>',
 		)
 	})
 })