[stable30] Further TextDirection improvements

src/extensions/Keymap.js

@@ -11,7 +11,13 @@ const Keymap = Extension.create({
 	name: 'customkeymap',
 
 	addKeyboardShortcuts() {
-		return this.options
+		return {
+			/**
+			 * <Backspace>
+			 * Allows to undo input rules after they got automatically applied
+			 */
+			Backspace: () => this.editor.commands.undoInputRule(),
+		}
 	},
 
 	addProseMirrorPlugins() {

src/extensions/RichText.js

@@ -118,11 +118,15 @@ export default Extension.create({
 			TrailingNode,
 			TextDirection.configure({
 				types: [
+					'blockquote',
+					'callout',
+					'detailsSummary',
 					'heading',
-					'paragraph',
 					'listItem',
+					'paragraph',
+					'tableCell',
+					'tableHeader',
 					'taskItem',
-					'blockquote',
 				],
 			}),
 		]

src/extensions/TextDirection.ts

@@ -3,8 +3,13 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { Extension } from '@tiptap/core'
-import { Plugin, PluginKey } from '@tiptap/pm/state'
+import {
+	Extension,
+	combineTransactionSteps,
+	findChildrenInRange,
+	getChangedRanges,
+} from '@tiptap/core'
+import { Plugin, PluginKey, Transaction } from '@tiptap/pm/state'
 
 const RTL = '\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC'
 const LTR = 'A-Za-z\u00C0-\u00D6\u00D8-\u00F6'
@@ -53,11 +58,21 @@ function TextDirectionPlugin({ types }: { types: string[] }) {
 			}
 
 			let modified = false
-			const tr = newState.tr
+			const { tr } = newState
+			const transform = combineTransactionSteps(
+				oldState.doc,
+				transactions as Transaction[],
+			)
+			const changes = getChangedRanges(transform)
+
 			tr.setMeta('addToHistory', false)
 
-			newState.doc.descendants((node, pos) => {
-				if (types.includes(node.type.name)) {
+			changes.forEach(({ newRange }) => {
+				const nodes = findChildrenInRange(newState.doc, newRange, (node) =>
+					types.includes(node.type.name),
+				)
+
+				nodes.forEach(({ node, pos }) => {
 					if (node.attrs.dir !== null && node.textContent.length > 0) {
 						return
 					}
@@ -73,7 +88,7 @@ function TextDirectionPlugin({ types }: { types: string[] }) {
 						tr.addStoredMark(mark)
 					}
 					modified = true
-				}
+				})
 			})
 
 			return modified ? tr : null

src/nodes/Callout.vue

@@ -6,6 +6,7 @@
 	<NodeViewWrapper data-text-el="callout"
 		class="callout"
 		:class="`callout--${type}`"
+		:dir="dir"
 		as="div">
 		<component :is="icon" class="callout__icon" />
 		<NodeViewContent class="callout__content" />
@@ -41,7 +42,10 @@ export default {
 			return ICONS_MAP[this.type] || Info
 		},
 		type() {
-			return this.node?.attrs?.type || 'info'
+			return this.node.attrs.type || 'info'
+		},
+		dir() {
+			return this.node.attrs.dir || ''
 		},
 	},
 }

src/nodes/Table/TableCellView.vue

@@ -4,7 +4,10 @@
 -->
 
 <template>
-	<NodeViewWrapper data-text-el="table-cell" as="td" :style="textAlign">
+	<NodeViewWrapper data-text-el="table-cell"
+		as="td"
+		:dir="dir"
+		:style="textAlign">
 		<div class="container">
 			<NodeViewContent class="content" />
 			<NcActions v-if="isEditable"
@@ -74,6 +77,9 @@ export default {
 		textAlign() {
 			return { 'text-align': this.node.attrs.textAlign }
 		},
+		dir() {
+			return this.node.attrs.dir || ''
+		},
 	},
 	beforeMount() {
 		this.isEditable = this.editor.isEditable

src/nodes/Table/TableHeaderView.vue

@@ -4,7 +4,10 @@
 -->
 
 <template>
-	<NodeViewWrapper data-text-el="table-header" as="th" :style="textAlign">
+	<NodeViewWrapper data-text-el="table-header"
+		as="th"
+		:dir="dir"
+		:style="textAlign">
 		<div>
 			<NodeViewContent class="content" />
 			<NcActions v-if="isEditable"
@@ -123,6 +126,9 @@ export default {
 		textAlign() {
 			return { 'text-align': this.node.attrs.textAlign }
 		},
+		dir() {
+			return this.node.attrs.dir || ''
+		},
 	},
 	beforeMount() {
 		this.isEditable = this.editor.isEditable

src/tests/fixtures/tables/handbook/handbook.html

@@ -12,12 +12,12 @@
 <td style="width: 20%; height: 29px;">a</td>
 <td style="width: 20%; height: 29px;">b</td>
 <td style="width: 20%; height: 29px;">c</td>
-<td style="width: 20%; height: 29px;">d</td>
+<td style="width: 20%; height: 29px;">ب</td>
 </tr>
 <tr style="height: 29px;">
 <td style="width: 20%; height: 29px;"><strong>Number</strong></td>
 <td style="width: 20%; height: 29px;">1</td>
-<td style="width: 20%; height: 29px;">2</td>
+<td style="width: 20%; height: 29px;">٢</td>
 <td style="width: 20%; height: 29px;">3</td>
 <td style="width: 20%; height: 29px;">4</td>
 </tr>

src/tests/fixtures/tables/handbook/handbook.out.html

@@ -1,28 +1,28 @@
 <div class="table-wrapper" style="overflow-x: auto;">
 <table>
 <tr>
-<th colspan="1" rowspan="1"><strong>Heading 0</strong></th>
-<th colspan="1" rowspan="1"><strong>Heading 1</strong></th>
-<th colspan="1" rowspan="1"><strong>Heading 2</strong></th>
-<th colspan="1" rowspan="1"><strong>Heading 3</strong></th>
-<th colspan="1" rowspan="1"><strong>Heading 4</strong></th>
+<th dir="ltr" colspan="1" rowspan="1"><strong>Heading 0</strong></th>
+<th dir="ltr" colspan="1" rowspan="1"><strong>Heading 1</strong></th>
+<th dir="ltr" colspan="1" rowspan="1"><strong>Heading 2</strong></th>
+<th dir="ltr" colspan="1" rowspan="1"><strong>Heading 3</strong></th>
+<th dir="ltr" colspan="1" rowspan="1"><strong>Heading 4</strong></th>
 </tr>
 <tr>
-<td colspan="1" rowspan="1"><strong>Letter</strong></td>
-<td colspan="1" rowspan="1">a</td>
-<td colspan="1" rowspan="1">b</td>
-<td colspan="1" rowspan="1">c</td>
-<td colspan="1" rowspan="1">d</td>
+<td dir="ltr" colspan="1" rowspan="1"><strong>Letter</strong></td>
+<td dir="ltr" colspan="1" rowspan="1">a</td>
+<td dir="ltr" colspan="1" rowspan="1">b</td>
+<td dir="ltr" colspan="1" rowspan="1">c</td>
+<td dir="rtl" colspan="1" rowspan="1">ب</td>
 </tr>
 <tr>
-<td colspan="1" rowspan="1"><strong>Number</strong></td>
+<td dir="ltr" colspan="1" rowspan="1"><strong>Number</strong></td>
 <td colspan="1" rowspan="1">1</td>
-<td colspan="1" rowspan="1">2</td>
+<td dir="rtl" colspan="1" rowspan="1">٢</td>
 <td colspan="1" rowspan="1">3</td>
 <td colspan="1" rowspan="1">4</td>
 </tr>
 <tr>
-<td colspan="1" rowspan="1"><strong>Square</strong></td>
+<td dir="ltr" colspan="1" rowspan="1"><strong>Square</strong></td>
 <td colspan="1" rowspan="1">1</td>
 <td colspan="1" rowspan="1">4</td>
 <td colspan="1" rowspan="1">9</td>

src/tests/nodes/Table.spec.js

@@ -29,16 +29,21 @@ describe('Table', () => {
 		expectDocument(tiptap.state.doc,
 			table(
 				thead(
-					th({ textAlign: 'center' }, 'heading'),
-					th({ textAlign: 'right' }, 'heading 2'),
-					th('heading 3')
+					th({ dir: 'ltr', textAlign: 'center' }, 'heading'),
+					th({ dir: 'ltr', textAlign: 'right' }, 'heading 2'),
+					th({ dir: 'ltr' }, 'heading 3'),
 				),
 				tr(
-					td({ textAlign: 'center' }, 'center'),
-					td({ textAlign: 'right' }, 'right'),
-					td('left cell ', br({ syntax: 'html' }), 'with line break')
-				)
-			)
+					td({ dir: 'ltr', textAlign: 'center' }, 'center'),
+					td({ dir: 'ltr', textAlign: 'right' }, 'right'),
+					td(
+						{ dir: 'ltr' },
+						'left cell ',
+						br({ syntax: 'html' }),
+						'with line break',
+					),
+				),
+			),
 		)
 	})
 
@@ -48,16 +53,21 @@ describe('Table', () => {
 		expectDocument(tiptap.state.doc,
 			table(
 				thead(
-					th({ textAlign: 'center' }, 'heading'),
-					th({ textAlign: 'right' }, 'heading 2'),
-					th('heading 3')
+					th({ dir: 'ltr', textAlign: 'center' }, 'heading'),
+					th({ dir: 'ltr', textAlign: 'right' }, 'heading 2'),
+					th({ dir: 'ltr' }, 'heading 3'),
 				),
 				tr(
-					td({ textAlign: 'center' }, 'center'),
-					td({ textAlign: 'right' }, 'right'),
-					td('left cell ', br({ syntax: '  ' }), 'with line break')
-				)
-			)
+					td({ dir: 'ltr', textAlign: 'center' }, 'center'),
+					td({ dir: 'ltr', textAlign: 'right' }, 'right'),
+					td(
+						{ dir: 'ltr' },
+						'left cell ',
+						br({ syntax: '  ' }),
+						'with line break',
+					),
+				),
+			),
 		)
 	})