diff options
author | Max <max@nextcloud.com> | 2022-03-23 16:27:52 +0300 |
---|---|---|
committer | Max <max@nextcloud.com> | 2022-03-31 15:29:27 +0300 |
commit | 08a976438a88a117ebf8256ff8c3c18af7128b14 (patch) | |
tree | 066b4f75e6d05182e6b7a013a742809c743e4208 /src | |
parent | 9ebbe2e01062b36339020824b93ff67ec4b53652 (diff) |
feature: button to remove table
Hide it in table settings so it is harder to hit by accident.
Undo still works - but still - it is quite a destructive action.
Signed-off-by: Max <max@nextcloud.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/nodes/Table.js | 6 | ||||
-rw-r--r-- | src/nodes/TableView.vue | 81 |
2 files changed, 87 insertions, 0 deletions
diff --git a/src/nodes/Table.js b/src/nodes/Table.js index f2748d5f9..8a9e564bd 100644 --- a/src/nodes/Table.js +++ b/src/nodes/Table.js @@ -2,6 +2,8 @@ import { Table } from '@tiptap/extension-table' import { Node, mergeAttributes } from '@tiptap/core' import { TextSelection } from 'prosemirror-state' import { isInTable, moveCellForward, selectionCell } from 'prosemirror-tables' +import { VueNodeViewRenderer } from '@tiptap/vue-2' +import TableView from './TableView' /* * Markdown tables do not include captions. @@ -153,4 +155,8 @@ export default Table.extend({ } }, + addNodeView() { + return VueNodeViewRenderer(TableView) + }, + }) diff --git a/src/nodes/TableView.vue b/src/nodes/TableView.vue new file mode 100644 index 000000000..0bfe30d70 --- /dev/null +++ b/src/nodes/TableView.vue @@ -0,0 +1,81 @@ +<!-- + - @copyright Copyright (c) 2022 Max <max@nextcloud.com> + - + - @author Max <max@nextcloud.com> + - + - @license GNU AGPL version 3 or any later version + - + - This program is free software: you can redistribute it and/or modify + - it under the terms of the GNU Affero General Public License as + - published by the Free Software Foundation, either version 3 of the + - License, or (at your option) any later version. + - + - This program is distributed in the hope that it will be useful, + - but WITHOUT ANY WARRANTY; without even the implied warranty of + - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + - GNU Affero General Public License for more details. + - + - You should have received a copy of the GNU Affero General Public License + - along with this program. If not, see <http://www.gnu.org/licenses/>. + - + --> + +<template> + <NodeViewWrapper> + <NodeViewContent class="content" as="table" /> + <Actions :force-menu="true" + class="table-settings" + default-icon="icon-table_settings"> + <ActionButton icon="icon-delete" + :close-after-click="true" + @click="deleteNode"> + {{ t('text', 'Delete this table') }} + </ActionButton> + </Actions> + </NodeViewWrapper> +</template> + +<script> +import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2' +import Actions from '@nextcloud/vue/dist/Components/Actions' +import ActionButton from '@nextcloud/vue/dist/Components/ActionButton' + +export default { + name: 'TableView', + components: { + ActionButton, + Actions, + NodeViewWrapper, + NodeViewContent, + }, + props: { + editor: { + type: Object, + required: true, + }, + deleteNode: { + type: Function, + required: true, + }, + }, + computed: { + t: () => window.t, + }, +} +</script> + +<style scoped lang="scss"> + +table { + float: left; +} + +.table-settings { + padding-left: 3px; + opacity: .5; + + &:hover { + opacity: 1; + } +} +</style> |