fix(TextDirection): Regard table cell, details summary and callouts

Fixes styling for details and callouts with RTL script.

Signed-off-by: Jonas <jonas@freesources.org>

Author: mejo-

src/extensions/RichText.js

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

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/DetailsView.vue

@@ -87,7 +87,7 @@ div.details {
 
 	.details-container {
 		width: 100%;
-		margin-right: 12px;
+		margin-inline-end: 12px;
 	}
 
 	:deep(summary) {

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"
@@ -124,6 +127,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><strong>Heading 0</strong></th>
-<th><strong>Heading 1</strong></th>
-<th><strong>Heading 2</strong></th>
-<th><strong>Heading 3</strong></th>
-<th><strong>Heading 4</strong></th>
+<th dir="ltr"><strong>Heading 0</strong></th>
+<th dir="ltr"><strong>Heading 1</strong></th>
+<th dir="ltr"><strong>Heading 2</strong></th>
+<th dir="ltr"><strong>Heading 3</strong></th>
+<th dir="ltr"><strong>Heading 4</strong></th>
 </tr>
 <tr>
-<td><strong>Letter</strong></td>
-<td>a</td>
-<td>b</td>
-<td>c</td>
-<td>d</td>
+<td dir="ltr"><strong>Letter</strong></td>
+<td dir="ltr">a</td>
+<td dir="ltr">b</td>
+<td dir="ltr">c</td>
+<td dir="rtl">ب</td>
 </tr>
 <tr>
-<td><strong>Number</strong></td>
+<td dir="ltr"><strong>Number</strong></td>
 <td>1</td>
-<td>2</td>
+<td dir="rtl">٢</td>
 <td>3</td>
 <td>4</td>
 </tr>
 <tr>
-<td><strong>Square</strong></td>
+<td dir="ltr"><strong>Square</strong></td>
 <td>1</td>
 <td>4</td>
 <td>9</td>

src/tests/nodes/Table.spec.js

@@ -31,14 +31,19 @@ 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',
+					),
 				),
 			),
 		)
@@ -50,14 +55,19 @@ 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',
+					),
 				),
 			),
 		)