From 464adb24b36f53667cd3a44a281755aac215c437 Mon Sep 17 00:00:00 2001 From: Max Date: Tue, 17 May 2022 15:04:28 +0200 Subject: [PATCH] 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 --- cypress/e2e/Table.spec.js | 12 ++---------- src/EditorFactory.js | 6 ++++-- src/extensions/RichText.js | 13 +++++++++---- src/nodes/{ => Table}/Table.js | 0 src/nodes/{ => Table}/TableCaption.js | 0 src/nodes/{ => Table}/TableCell.js | 0 src/nodes/{ => Table}/TableCellView.vue | 2 +- src/nodes/{ => Table}/TableHeadRow.js | 0 src/nodes/{ => Table}/TableHeader.js | 0 src/nodes/{ => Table}/TableHeaderView.vue | 2 +- src/nodes/{ => Table}/TableRow.js | 0 src/nodes/{ => Table}/TableView.vue | 2 +- src/nodes/{EditableTable.js => Table/index.js} | 4 +++- src/nodes/index.js | 2 ++ 14 files changed, 23 insertions(+), 20 deletions(-) rename src/nodes/{ => Table}/Table.js (100%) rename src/nodes/{ => Table}/TableCaption.js (100%) rename src/nodes/{ => Table}/TableCell.js (100%) rename src/nodes/{ => Table}/TableCellView.vue (99%) rename src/nodes/{ => Table}/TableHeadRow.js (100%) rename src/nodes/{ => Table}/TableHeader.js (100%) rename src/nodes/{ => Table}/TableHeaderView.vue (99%) rename src/nodes/{ => Table}/TableRow.js (100%) rename src/nodes/{ => Table}/TableView.vue (97%) rename src/nodes/{EditableTable.js => Table/index.js} (93%) diff --git a/cypress/e2e/Table.spec.js b/cypress/e2e/Table.spec.js index cbf38f86d..7361abf6c 100644 --- a/cypress/e2e/Table.spec.js +++ b/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, ], }) 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 similarity index 100% rename from src/nodes/Table.js rename to src/nodes/Table/Table.js diff --git a/src/nodes/TableCaption.js b/src/nodes/Table/TableCaption.js similarity index 100% rename from src/nodes/TableCaption.js rename to src/nodes/Table/TableCaption.js diff --git a/src/nodes/TableCell.js b/src/nodes/Table/TableCell.js similarity index 100% rename from src/nodes/TableCell.js rename to src/nodes/Table/TableCell.js diff --git a/src/nodes/TableCellView.vue b/src/nodes/Table/TableCellView.vue similarity index 99% rename from src/nodes/TableCellView.vue rename to 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 similarity index 100% rename from src/nodes/TableHeadRow.js rename to src/nodes/Table/TableHeadRow.js diff --git a/src/nodes/TableHeader.js b/src/nodes/Table/TableHeader.js similarity index 100% rename from src/nodes/TableHeader.js rename to src/nodes/Table/TableHeader.js diff --git a/src/nodes/TableHeaderView.vue b/src/nodes/Table/TableHeaderView.vue similarity index 99% rename from src/nodes/TableHeaderView.vue rename to 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 similarity index 100% rename from src/nodes/TableRow.js rename to src/nodes/Table/TableRow.js diff --git a/src/nodes/TableView.vue b/src/nodes/Table/TableView.vue similarity index 97% rename from src/nodes/TableView.vue rename to 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 similarity index 93% rename from src/nodes/EditableTable.js rename to 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, }