fix: bring back table modification buttons

Add an `EditableTable` node that has all the buttons for changing the table.
Use it in the Editor while keeping the plain `Table` in RichtextReader.

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

13 files changed, 21 insertions, 10 deletions

diff --git a/src/EditorFactory.js b/src/EditorFactory.js
index b0b857e02..7358cfe53 100644
--- a/src/EditorFactory.js
+++ b/src/EditorFactory.js
@@ -26,7 +26,7 @@ import History from '@tiptap/extension-history'
 import Placeholder from '@tiptap/extension-placeholder'
 /* eslint-enable import/no-named-as-default */
 
-import { TrailingNode } from './nodes/index.js'
+import { TrailingNode, EditableTable } from './nodes/index.js'
 import { Editor } from '@tiptap/core'
 import { Emoji, Markdown, PlainText, RichText } from './extensions/index.js'
 import { translate as t } from '@nextcloud/l10n'
@@ -57,7 +57,9 @@ const createEditor = ({ content, onCreate, onUpdate, extensions, enableRichEditi
 	if (enableRichEditing) {
 		richEditingExtensions = [
 			Markdown,
-			RichText,
+			RichText.configure({
+				extensions: [EditableTable],
+			}),
 			Emoji.configure({
 				suggestion: {
 					items: ({ query }) => {
diff --git a/src/extensions/RichText.js b/src/extensions/RichText.js
index a4594e089..43a10be2f 100644
--- a/src/extensions/RichText.js
+++ b/src/extensions/RichText.js
@@ -33,7 +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 { Table } from './../nodes/Table/index.js'
 /* eslint-enable import/no-named-as-default */
 
 import { Strong, Italic, Strike, Link, Underline } from './../marks/index.js'
@@ -52,11 +52,12 @@ export default Extension.create({
 	addOptions() {
 		return {
 			link: {},
+			extensions: [],
 		}
 	},
 
 	addExtensions() {
-		const extensions = [
+		const defaultExtensions = [
 			Document,
 			Text,
 			Paragraph,
@@ -82,12 +83,16 @@ export default Extension.create({
 			Dropcursor,
 		]
 		if (this.options.link !== false) {
-			extensions.push(Link.configure({
+			defaultExtensions.push(Link.configure({
 				...this.options.link,
 				openOnClick: true,
 			}))
 		}
-		return extensions
+		const additionalExtensionNames = this.options.extensions.map(e => e.name)
+		return [
+			...this.options.extensions,
+			...defaultExtensions.filter(e => !additionalExtensionNames.includes(e.name)),
+		]
 	},
 
 })
diff --git a/src/nodes/Table.js b/src/nodes/Table/Table.js
index 240c03f3e..240c03f3e 100644
--- a/src/nodes/Table.js
+++ b/src/nodes/Table/Table.js
diff --git a/src/nodes/TableCaption.js b/src/nodes/Table/TableCaption.js
index e14dac195..e14dac195 100644
--- a/src/nodes/TableCaption.js
+++ b/src/nodes/Table/TableCaption.js
diff --git a/src/nodes/TableCell.js b/src/nodes/Table/TableCell.js
index 86c4fa879..86c4fa879 100644
--- a/src/nodes/TableCell.js
+++ b/src/nodes/Table/TableCell.js
diff --git a/src/nodes/TableCellView.vue b/src/nodes/Table/TableCellView.vue
index a29c06674..896a17b18 100644
--- a/src/nodes/TableCellView.vue
+++ b/src/nodes/Table/TableCellView.vue
@@ -59,7 +59,7 @@
 import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2'
 import Actions from '@nextcloud/vue/dist/Components/Actions'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import { TableAddRowBefore, TableAddRowAfter, Delete } from '../components/icons.js'
+import { TableAddRowBefore, TableAddRowAfter, Delete } from '../../components/icons.js'
 
 export default {
 	name: 'TableCellView',
diff --git a/src/nodes/TableHeadRow.js b/src/nodes/Table/TableHeadRow.js
index 18f28ecb9..18f28ecb9 100644
--- a/src/nodes/TableHeadRow.js
+++ b/src/nodes/Table/TableHeadRow.js
diff --git a/src/nodes/TableHeader.js b/src/nodes/Table/TableHeader.js
index 4040abbbc..4040abbbc 100644
--- a/src/nodes/TableHeader.js
+++ b/src/nodes/Table/TableHeader.js
diff --git a/src/nodes/TableHeaderView.vue b/src/nodes/Table/TableHeaderView.vue
index 6528a2d44..c381f28d4 100644
--- a/src/nodes/TableHeaderView.vue
+++ b/src/nodes/Table/TableHeaderView.vue
@@ -59,7 +59,7 @@
 import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2'
 import Actions from '@nextcloud/vue/dist/Components/Actions'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import { Delete, TableAddColumnBefore, TableAddColumnAfter } from '../components/icons.js'
+import { Delete, TableAddColumnBefore, TableAddColumnAfter } from '../../components/icons.js'
 
 export default {
 	name: 'TableHeaderView',
diff --git a/src/nodes/TableRow.js b/src/nodes/Table/TableRow.js
index b7343eb9a..b7343eb9a 100644
--- a/src/nodes/TableRow.js
+++ b/src/nodes/Table/TableRow.js
diff --git a/src/nodes/TableView.vue b/src/nodes/Table/TableView.vue
index 2aef3eb20..71428f2b0 100644
--- a/src/nodes/TableView.vue
+++ b/src/nodes/Table/TableView.vue
@@ -47,7 +47,7 @@
 import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2'
 import Actions from '@nextcloud/vue/dist/Components/Actions'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import { TableSettings, Delete } from '../components/icons.js'
+import { TableSettings, Delete } from '../../components/icons.js'
 
 export default {
 	name: 'TableView',
diff --git a/src/nodes/EditableTable.js b/src/nodes/Table/index.js
index 8e24b6800..3a91eea2b 100644
--- a/src/nodes/EditableTable.js
+++ b/src/nodes/Table/index.js
@@ -24,7 +24,7 @@ function extendNodeWithView(node, view) {
 	})
 }
 
-export default Table.extend({
+const EditableTable = Table.extend({
 
 	addNodeView() {
 		return VueNodeViewRenderer(TableView)
@@ -40,3 +40,5 @@ export default Table.extend({
 		]
 	},
 })
+
+export { Table, EditableTable }
diff --git a/src/nodes/index.js b/src/nodes/index.js
index ec8a8d5a1..b73f364f7 100644
--- a/src/nodes/index.js
+++ b/src/nodes/index.js
@@ -28,6 +28,7 @@ import TaskList from './TaskList.js'
 import TrailingNode from './TrailingNode.js'
 import Heading from './Heading.js'
 import Callout from './Callouts.js'
+import { EditableTable } from './Table/index.js'
 
 export {
 	Image,
@@ -38,4 +39,5 @@ export {
 	TrailingNode,
 	Heading,
 	Callout,
+	EditableTable,
 }