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>

cypress/e2e/Table.spec.js

@@ -1,8 +1,4 @@
-import Table from './../../src/nodes/Table'
-import TableCell from './../../src/nodes/TableCell'
-import TableHeader from './../../src/nodes/TableHeader'
-import TableRow from './../../src/nodes/TableRow'
-import TableHeadRow from './../../src/nodes/TableHeadRow'
+import { EditableTable } from './../../src/nodes/Table'
 import Markdown from './../../src/extensions/Markdown'
 import markdownit from './../../src/markdownit'
 import { createMarkdownSerializer } from './../../src/extensions/Markdown';
@@ -16,11 +12,7 @@ describe('ListItem extension integrated in the editor', () => {
 		content: '',
 		extensions: [
 			Markdown,
-			Table,
-			TableCell,
-			TableHeader,
-			TableHeadRow,
-			TableRow,
+			EditableTable,
 		],
 	})
 

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 }) => {

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)),
+		]
 	},
 
 })

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',

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',

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',

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 }

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,
 }