diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/nodes/TableCell.js | 7 | ||||
-rw-r--r-- | src/nodes/TableCellView.vue | 135 | ||||
-rw-r--r-- | src/nodes/TableHeaderView.vue | 11 |
3 files changed, 145 insertions, 8 deletions
diff --git a/src/nodes/TableCell.js b/src/nodes/TableCell.js index a8ce69234..a1f445420 100644 --- a/src/nodes/TableCell.js +++ b/src/nodes/TableCell.js @@ -1,4 +1,6 @@ import { TableCell } from '@tiptap/extension-table-cell' +import { VueNodeViewRenderer } from '@tiptap/vue-2' +import TableCellView from './TableCellView' export default TableCell.extend({ content: 'inline*', @@ -17,4 +19,9 @@ export default TableCell.extend({ { tag: 'table thead ~ tbody td', priority: 70 }, ] }, + + addNodeView() { + return VueNodeViewRenderer(TableCellView) + }, + }) diff --git a/src/nodes/TableCellView.vue b/src/nodes/TableCellView.vue new file mode 100644 index 000000000..1eb62a1e1 --- /dev/null +++ b/src/nodes/TableCellView.vue @@ -0,0 +1,135 @@ +<!-- + - @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 as="td"> + <div class="container"> + <NodeViewContent class="content" /> + <Actions> + <ActionButton icon="icon-add_row_before" + :close-after-click="true" + @click="addRowBefore"> + Add new row before this + </ActionButton> + <ActionButton icon="icon-add_row_after" + :close-after-click="true" + @click="addRowAfter"> + Add new row after this + </ActionButton> + <ActionButton icon="icon-delete" + :close-after-click="true" + @click="deleteRow"> + Remove this row + </ActionButton> + </Actions> + </div> + </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: 'TableCellView', + components: { + ActionButton, + Actions, + NodeViewWrapper, + NodeViewContent, + }, + props: { + editor: { + type: Object, + required: true, + }, + getPos: { + type: Function, + required: true, + }, + }, + methods: { + deleteRow() { + this.editor.chain() + .focus() + .setTextSelection(this.getPos()) + .deleteRow() + .run() + }, + addRowBefore() { + this.editor.chain() + .focus() + .setTextSelection(this.getPos()) + .addRowBefore() + .run() + }, + addRowAfter() { + this.editor.chain() + .focus() + .setTextSelection(this.getPos()) + .addRowAfter() + .run() + }, + }, +} +</script> + +<style scoped lang="scss"> +td { + position: relative; + + .container { + display: flex; + flex-wrap: wrap; + min-height: 36px; + } + + .content { + flex: 1 1 0; + margin: 0; + } + + .action-item { + position: absolute; + right: -48px; + flex: 0 1 auto; + display: none; + top: 2px; + } + + &:last-child { + .action-item { + display: block; + opacity: 50%; + } + + &:hover, &:active, &:focus, &:focus-within { + .action-item { + opacity: 100%; + } + } + } + +} + +</style> diff --git a/src/nodes/TableHeaderView.vue b/src/nodes/TableHeaderView.vue index 7d8ba0da7..e14fa2b38 100644 --- a/src/nodes/TableHeaderView.vue +++ b/src/nodes/TableHeaderView.vue @@ -97,20 +97,15 @@ export default { <style scoped lang="scss"> th { - div { - display: flex; - flex-wrap: wrap; - } - .content { - flex: 1 1 0; + float: left; margin: 0; min-height: 44px; - line-height: 44px; + padding-top: 0.75em; } .action-item { - flex: 0 1 auto; + float: right; opacity: 50%; } |