fix: bring back Tables in RichtextReader

Table node views include @nextcloud/vue elements
that currently do not play well with vite.

Destinguish between EditableTable (with the node views)
and Table (without the node views)
and use the latter for RichtextReader.

Signed-off-by: Max <max@nextcloud.com>

6 files changed, 83 insertions, 60 deletions

diff --git a/src/extensions/RichText.js b/src/extensions/RichText.js
index 56913dd31..a4594e089 100644
--- a/src/extensions/RichText.js
+++ b/src/extensions/RichText.js
@@ -33,13 +33,7 @@ import CodeBlock from '@tiptap/extension-code-block'
 import HorizontalRule from '@tiptap/extension-horizontal-rule'
 import Dropcursor from '@tiptap/extension-dropcursor'
 import HardBreak from './HardBreak.js'
-/*
 import Table from './../nodes/Table.js'
-import TableCell from './../nodes/TableCell.js'
-import TableHeader from './../nodes/TableHeader.js'
-import TableHeadRow from './../nodes/TableHeadRow.js'
-import TableRow from './../nodes/TableRow.js'
-*/
 /* eslint-enable import/no-named-as-default */
 
 import { Strong, Italic, Strike, Link, Underline } from './../marks/index.js'
@@ -77,12 +71,7 @@ export default Extension.create({
 			HorizontalRule,
 			OrderedList,
 			ListItem,
-/*			Table,
-			TableCell,
-			TableHeader,
-			TableHeadRow,
-			TableRow,
-*/
+			Table,
 			TaskList,
 			TaskItem,
 			Callout,
diff --git a/src/nodes/EditableTable.js b/src/nodes/EditableTable.js
new file mode 100644
index 000000000..8e24b6800
--- /dev/null
+++ b/src/nodes/EditableTable.js
@@ -0,0 +1,42 @@
+import Table from './Table.js'
+import TableCaption from './TableCaption.js'
+import TableCell from './TableCell.js'
+import TableHeader from './TableHeader.js'
+import TableHeadRow from './TableHeadRow.js'
+import TableRow from './TableRow.js'
+import { VueNodeViewRenderer } from '@tiptap/vue-2'
+import TableView from './TableView.vue'
+import TableCellView from './TableCellView.vue'
+import TableHeaderView from './TableHeaderView.vue'
+
+/**
+ * Add the node view to the node.
+ * The node views include buttons to enable editing the table.
+ *
+ * @param {object} node - the node to add the view to.
+ * @param {object} view - the node view to add to the node.
+ */
+function extendNodeWithView(node, view) {
+	return node.extend({
+		addNodeView() {
+			return VueNodeViewRenderer(view)
+		},
+	})
+}
+
+export default Table.extend({
+
+	addNodeView() {
+		return VueNodeViewRenderer(TableView)
+	},
+
+	addExtensions() {
+		return [
+			TableCaption,
+			extendNodeWithView(TableCell, TableCellView),
+			extendNodeWithView(TableHeader, TableHeaderView),
+			TableHeadRow,
+			TableRow,
+		]
+	},
+})
diff --git a/src/nodes/Table.js b/src/nodes/Table.js
index d43b20332..240c03f3e 100644
--- a/src/nodes/Table.js
+++ b/src/nodes/Table.js
@@ -1,37 +1,12 @@
+import { mergeAttributes } from '@tiptap/core'
 import { Table } from '@tiptap/extension-table'
-import { Node, mergeAttributes } from '@tiptap/core'
+import TableCaption from './TableCaption.js'
+import TableCell from './TableCell.js'
+import TableHeader from './TableHeader.js'
+import TableHeadRow from './TableHeadRow.js'
+import TableRow from './TableRow.js'
 import { TextSelection } from 'prosemirror-state'
 import { isInTable, moveCellForward, selectionCell } from 'prosemirror-tables'
-import { VueNodeViewRenderer } from '@tiptap/vue-2'
-import TableView from './TableView.vue'
-
-/*
- * Markdown tables do not include captions.
- * We still need to parse them though
- * because otherwise tiptap will try to insert their text content
- * and put it in the top row of the table.
- */
-const tableCaption = Node.create({
-	name: 'tableCaption',
-	content: 'inline*',
-	addAttributes() {
-		return {}
-	},
-
-	renderHTML() {
-		return ['caption']
-	},
-
-	toMarkdown(state, node) {
-	},
-
-	parseHTML() {
-		return [
-			{ tag: 'table caption', priority: 90 },
-		]
-	},
-
-})
 
 /**
  *
@@ -89,7 +64,11 @@ export default Table.extend({
 
 	addExtensions() {
 		return [
-			tableCaption,
+			TableCaption,
+			TableCell,
+			TableHeader,
+			TableHeadRow,
+			TableRow,
 		]
 	},
 
@@ -166,8 +145,4 @@ export default Table.extend({
 		}
 	},
 
-	addNodeView() {
-		return VueNodeViewRenderer(TableView)
-	},
-
 })
diff --git a/src/nodes/TableCaption.js b/src/nodes/TableCaption.js
new file mode 100644
index 000000000..e14dac195
--- /dev/null
+++ b/src/nodes/TableCaption.js
@@ -0,0 +1,29 @@
+import { Node } from '@tiptap/core'
+
+/*
+ * Markdown tables do not include captions.
+ * We still need to parse them though
+ * because otherwise tiptap will try to insert their text content
+ * and put it in the top row of the table.
+ */
+export default Node.create({
+	name: 'tableCaption',
+	content: 'inline*',
+	addAttributes() {
+		return {}
+	},
+
+	renderHTML() {
+		return ['caption']
+	},
+
+	toMarkdown(state, node) {
+	},
+
+	parseHTML() {
+		return [
+			{ tag: 'table caption', priority: 90 },
+		]
+	},
+
+})
diff --git a/src/nodes/TableCell.js b/src/nodes/TableCell.js
index 34574b4b3..86c4fa879 100644
--- a/src/nodes/TableCell.js
+++ b/src/nodes/TableCell.js
@@ -1,6 +1,4 @@
 import { TableCell } from '@tiptap/extension-table-cell'
-import { VueNodeViewRenderer } from '@tiptap/vue-2'
-import TableCellView from './TableCellView.vue'
 
 export default TableCell.extend({
 	content: 'inline*',
@@ -20,8 +18,4 @@ export default TableCell.extend({
 		]
 	},
 
-	addNodeView() {
-		return VueNodeViewRenderer(TableCellView)
-	},
-
 })
diff --git a/src/nodes/TableHeader.js b/src/nodes/TableHeader.js
index e260dc809..4040abbbc 100644
--- a/src/nodes/TableHeader.js
+++ b/src/nodes/TableHeader.js
@@ -1,6 +1,4 @@
 import { TableHeader } from '@tiptap/extension-table-header'
-import { VueNodeViewRenderer } from '@tiptap/vue-2'
-import TableHeaderView from './TableHeaderView.vue'
 
 export default TableHeader.extend({
 	content: 'inline*',
@@ -24,8 +22,4 @@ export default TableHeader.extend({
 		]
 	},
 
-	addNodeView() {
-		return VueNodeViewRenderer(TableHeaderView)
-	},
-
 })