chore(table): use upstream table cell align attribute

Cell alignment support was added upstream in
ueberdosis/tiptap#7610

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

Author: mejo-

src/nodes/Table/Table.js

@@ -101,8 +101,8 @@ export default Table.extend({
 								for (let i = 0; i < lastRow.childCount; i++) {
 									tr.setNodeAttribute(
 										pos,
-										'textAlign',
-										lastRow.child(i).attrs.textAlign,
+										'align',
+										lastRow.child(i).attrs.align,
 									)
 									pos += newRow.child(i).nodeSize
 								}
@@ -129,8 +129,8 @@ export default Table.extend({
 								for (let i = 0; i < lastRow.childCount; i++) {
 									tr.setNodeAttribute(
 										pos,
-										'textAlign',
-										lastRow.child(i).attrs.textAlign,
+										'align',
+										lastRow.child(i).attrs.align,
 									)
 									pos += newRow.child(i).nodeSize
 								}

src/nodes/Table/TableCell.js

@@ -31,25 +31,6 @@ export default TableCell.extend({
 		]
 	},
 
-	addAttributes() {
-		return {
-			...this.parent?.(),
-			textAlign: {
-				rendered: true,
-				default: null,
-				renderHTML: (attributes) => {
-					if (!attributes.textAlign) {
-						return {}
-					}
-					return {
-						style: `text-align: ${attributes.textAlign}`,
-					}
-				},
-				parseHTML: (element) => element.style.textAlign || null,
-			},
-		}
-	},
-
 	renderHTML({ HTMLAttributes }) {
 		const attributes = mergeAttributes(
 			this.options.HTMLAttributes,

src/nodes/Table/TableCellView.vue

@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<NodeViewWrapper data-text-el="table-cell" as="td" :dir="dir" :style="textAlign">
+	<NodeViewWrapper data-text-el="table-cell" as="td" :dir="dir" :style="align">
 		<div class="container">
 			<NodeViewContent class="content" />
 			<NcActions v-if="isEditable" data-text-table-actions="row" size="small">
@@ -78,8 +78,8 @@ export default {
 		}
 	},
 	computed: {
-		textAlign() {
-			return { 'text-align': this.node.attrs.textAlign }
+		align() {
+			return { 'text-align': this.node.attrs.align }
 		},
 		dir() {
 			return this.node.attrs.dir || ''

src/nodes/Table/TableHeader.js

@@ -37,23 +37,4 @@ export default TableHeader.extend({
 		}
 		return ['th', attributes, 0]
 	},
-
-	addAttributes() {
-		return {
-			...this.parent?.(),
-			textAlign: {
-				rendered: true,
-				default: null,
-				renderHTML: (attributes) => {
-					if (!attributes.textAlign) {
-						return {}
-					}
-					return {
-						style: `text-align: ${attributes.textAlign}`,
-					}
-				},
-				parseHTML: (element) => element.style.textAlign || null,
-			},
-		}
-	},
 })

src/nodes/Table/TableHeaderView.vue

@@ -4,11 +4,7 @@
 -->
 
 <template>
-	<NodeViewWrapper
-		data-text-el="table-header"
-		as="th"
-		:dir="dir"
-		:style="textAlign">
+	<NodeViewWrapper data-text-el="table-header" as="th" :dir="dir" :style="align">
 		<div>
 			<NodeViewContent class="content" />
 			<NcActions
@@ -23,8 +19,8 @@
 						:aria-label="t('text', 'Left align column')"
 						type="radio"
 						value="left"
-						:model-value="node.attrs.textAlign"
-						@click="alignLeft">
+						:model-value="node.attrs.align"
+						@click="setAlignLeft">
 						<template #icon>
 							<AlignHorizontalLeft />
 						</template>
@@ -34,8 +30,8 @@
 						:aria-label="t('text', 'Center align column')"
 						type="radio"
 						value="center"
-						:model-value="node.attrs.textAlign"
-						@click="alignCenter">
+						:model-value="node.attrs.align"
+						@click="setAlignCenter">
 						<template #icon>
 							<AlignHorizontalCenter />
 						</template>
@@ -45,8 +41,8 @@
 						:aria-label="t('text', 'Right align column')"
 						type="radio"
 						value="right"
-						:model-value="node.attrs.textAlign"
-						@click="alignRight">
+						:model-value="node.attrs.align"
+						@click="setAlignRight">
 						<template #icon>
 							<AlignHorizontalRight />
 						</template>
@@ -134,8 +130,8 @@ export default {
 		}
 	},
 	computed: {
-		textAlign() {
-			return { 'text-align': this.node.attrs.textAlign }
+		align() {
+			return { 'text-align': this.node.attrs.align }
 		},
 		dir() {
 			return this.node.attrs.dir || ''
@@ -148,24 +144,24 @@ export default {
 		})
 	},
 	methods: {
-		alignCenter() {
-			this.align('center')
+		setAlignCenter() {
+			this.setAlign('center')
 		},
-		alignLeft() {
-			this.align('left')
+		setAlignLeft() {
+			this.setAlign('left')
 		},
-		alignRight() {
-			this.align('right')
+		setAlignRight() {
+			this.setAlign('right')
 		},
-		align(textAlign) {
+		setAlign(align) {
 			this.editor
 				.chain()
 				.focus()
 				.setTextSelection(this.getPos())
-				.setCellAttribute('textAlign', textAlign)
+				.setCellAttribute('align', align)
 				.run()
 			while (this.editor.commands.goToNextRow()) {
-				this.editor.commands.setCellAttribute('textAlign', textAlign)
+				this.editor.commands.setCellAttribute('align', align)
 			}
 			// Set focus back to first row
 			this.editor.chain().setTextSelection(this.getPos()).focus().run()

src/nodes/Table/markdown.ts

@@ -198,7 +198,7 @@ function tableToMarkdown(state: MarkdownSerializerState, node: Node) {
 			row.length = Math.max(row.length, lines.length)
 			const lineLength = Math.max(...lines.map((line) => line.length))
 			columnWidths[cellIdx] = Math.max(columnWidths[cellIdx], lineLength)
-			const align = node.attrs?.textAlign ?? ''
+			const align = node.attrs?.align ?? ''
 			row.cells.push({ md, lines, nodeTypes, align })
 		})
 	})

src/tests/nodes/Table.spec.js

@@ -114,19 +114,13 @@ describe('Table extension', () => {
 			editor.state.doc,
 			table(
 				thead(
-					th({ dir: 'ltr', textAlign: 'center' }, 'heading'),
-					th({ dir: 'ltr', textAlign: 'right' }, 'heading 2'),
+					th({ dir: 'ltr', align: 'center' }, 'heading'),
+					th({ dir: 'ltr', align: 'right' }, 'heading 2'),
 					th({ dir: 'ltr' }, 'heading 3'),
 				),
 				tr(
-					td(
-						{ dir: 'ltr', textAlign: 'center' },
-						p({ dir: 'ltr' }, 'center'),
-					),
-					td(
-						{ dir: 'ltr', textAlign: 'right' },
-						p({ dir: 'ltr' }, 'right'),
-					),
+					td({ dir: 'ltr', align: 'center' }, p({ dir: 'ltr' }, 'center')),
+					td({ dir: 'ltr', align: 'right' }, p({ dir: 'ltr' }, 'right')),
 					td(
 						{ dir: 'ltr' },
 						p(
@@ -148,19 +142,13 @@ describe('Table extension', () => {
 			editor.state.doc,
 			table(
 				thead(
-					th({ dir: 'ltr', textAlign: 'center' }, 'heading'),
-					th({ dir: 'ltr', textAlign: 'right' }, 'heading 2'),
+					th({ dir: 'ltr', align: 'center' }, 'heading'),
+					th({ dir: 'ltr', align: 'right' }, 'heading 2'),
 					th({ dir: 'ltr' }, 'heading 3'),
 				),
 				tr(
-					td(
-						{ dir: 'ltr', textAlign: 'center' },
-						p({ dir: 'ltr' }, 'center'),
-					),
-					td(
-						{ dir: 'ltr', textAlign: 'right' },
-						p({ dir: 'ltr' }, 'right'),
-					),
+					td({ dir: 'ltr', align: 'center' }, p({ dir: 'ltr' }, 'center')),
+					td({ dir: 'ltr', align: 'right' }, p({ dir: 'ltr' }, 'right')),
 					td(
 						{ dir: 'ltr' },
 						p(