diff options
author | Max <max@nextcloud.com> | 2022-05-12 21:25:19 +0300 |
---|---|---|
committer | Max <max@nextcloud.com> | 2022-06-07 20:42:01 +0300 |
commit | 544348bf290c20250ef7b74ecdd7e7a17d4fbce8 (patch) | |
tree | f471d23b2d07f3a1ba8cd8923ce72d4dea3c0294 | |
parent | 85e693aae1456ea4d6e6d12feadc12f57e4215d5 (diff) |
fix: bring back Tables in RichtextReader
Table node views include @nextcloud/vue elements
that currently do not play well with vite.
Destinguish between EditableTable (with the node views)
and Table (without the node views)
and use the latter for RichtextReader.
Signed-off-by: Max <max@nextcloud.com>
-rw-r--r-- | index.html | 3 | ||||
-rw-r--r-- | src/extensions/RichText.js | 13 | ||||
-rw-r--r-- | src/nodes/EditableTable.js | 42 | ||||
-rw-r--r-- | src/nodes/Table.js | 47 | ||||
-rw-r--r-- | src/nodes/TableCaption.js | 29 | ||||
-rw-r--r-- | src/nodes/TableCell.js | 6 | ||||
-rw-r--r-- | src/nodes/TableHeader.js | 6 |
7 files changed, 86 insertions, 60 deletions
diff --git a/index.html b/index.html index 7a43f2c62..368c94d3f 100644 --- a/index.html +++ b/index.html @@ -18,6 +18,9 @@ content: '**Hello There**', } }, + provide: { + currentDirectory: '/' + }, render: (h) => h('div', [ h(RichtextReader, { props: { content: app.content } diff --git a/src/extensions/RichText.js b/src/extensions/RichText.js index 56913dd31..a4594e089 100644 --- a/src/extensions/RichText.js +++ b/src/extensions/RichText.js @@ -33,13 +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 TableCell from './../nodes/TableCell.js' -import TableHeader from './../nodes/TableHeader.js' -import TableHeadRow from './../nodes/TableHeadRow.js' -import TableRow from './../nodes/TableRow.js' -*/ /* eslint-enable import/no-named-as-default */ import { Strong, Italic, Strike, Link, Underline } from './../marks/index.js' @@ -77,12 +71,7 @@ export default Extension.create({ HorizontalRule, OrderedList, ListItem, -/* Table, - TableCell, - TableHeader, - TableHeadRow, - TableRow, -*/ + Table, TaskList, TaskItem, Callout, diff --git a/src/nodes/EditableTable.js b/src/nodes/EditableTable.js new file mode 100644 index 000000000..8e24b6800 --- /dev/null +++ b/src/nodes/EditableTable.js @@ -0,0 +1,42 @@ +import Table from './Table.js' +import TableCaption from './TableCaption.js' +import TableCell from './TableCell.js' +import TableHeader from './TableHeader.js' +import TableHeadRow from './TableHeadRow.js' +import TableRow from './TableRow.js' +import { VueNodeViewRenderer } from '@tiptap/vue-2' +import TableView from './TableView.vue' +import TableCellView from './TableCellView.vue' +import TableHeaderView from './TableHeaderView.vue' + +/** + * Add the node view to the node. + * The node views include buttons to enable editing the table. + * + * @param {object} node - the node to add the view to. + * @param {object} view - the node view to add to the node. + */ +function extendNodeWithView(node, view) { + return node.extend({ + addNodeView() { + return VueNodeViewRenderer(view) + }, + }) +} + +export default Table.extend({ + + addNodeView() { + return VueNodeViewRenderer(TableView) + }, + + addExtensions() { + return [ + TableCaption, + extendNodeWithView(TableCell, TableCellView), + extendNodeWithView(TableHeader, TableHeaderView), + TableHeadRow, + TableRow, + ] + }, +}) diff --git a/src/nodes/Table.js b/src/nodes/Table.js index d43b20332..240c03f3e 100644 --- a/src/nodes/Table.js +++ b/src/nodes/Table.js @@ -1,37 +1,12 @@ +import { mergeAttributes } from '@tiptap/core' import { Table } from '@tiptap/extension-table' -import { Node, mergeAttributes } from '@tiptap/core' +import TableCaption from './TableCaption.js' +import TableCell from './TableCell.js' +import TableHeader from './TableHeader.js' +import TableHeadRow from './TableHeadRow.js' +import TableRow from './TableRow.js' import { TextSelection } from 'prosemirror-state' import { isInTable, moveCellForward, selectionCell } from 'prosemirror-tables' -import { VueNodeViewRenderer } from '@tiptap/vue-2' -import TableView from './TableView.vue' - -/* - * Markdown tables do not include captions. - * We still need to parse them though - * because otherwise tiptap will try to insert their text content - * and put it in the top row of the table. - */ -const tableCaption = Node.create({ - name: 'tableCaption', - content: 'inline*', - addAttributes() { - return {} - }, - - renderHTML() { - return ['caption'] - }, - - toMarkdown(state, node) { - }, - - parseHTML() { - return [ - { tag: 'table caption', priority: 90 }, - ] - }, - -}) /** * @@ -89,7 +64,11 @@ export default Table.extend({ addExtensions() { return [ - tableCaption, + TableCaption, + TableCell, + TableHeader, + TableHeadRow, + TableRow, ] }, @@ -166,8 +145,4 @@ export default Table.extend({ } }, - addNodeView() { - return VueNodeViewRenderer(TableView) - }, - }) diff --git a/src/nodes/TableCaption.js b/src/nodes/TableCaption.js new file mode 100644 index 000000000..e14dac195 --- /dev/null +++ b/src/nodes/TableCaption.js @@ -0,0 +1,29 @@ +import { Node } from '@tiptap/core' + +/* + * Markdown tables do not include captions. + * We still need to parse them though + * because otherwise tiptap will try to insert their text content + * and put it in the top row of the table. + */ +export default Node.create({ + name: 'tableCaption', + content: 'inline*', + addAttributes() { + return {} + }, + + renderHTML() { + return ['caption'] + }, + + toMarkdown(state, node) { + }, + + parseHTML() { + return [ + { tag: 'table caption', priority: 90 }, + ] + }, + +}) diff --git a/src/nodes/TableCell.js b/src/nodes/TableCell.js index 34574b4b3..86c4fa879 100644 --- a/src/nodes/TableCell.js +++ b/src/nodes/TableCell.js @@ -1,6 +1,4 @@ import { TableCell } from '@tiptap/extension-table-cell' -import { VueNodeViewRenderer } from '@tiptap/vue-2' -import TableCellView from './TableCellView.vue' export default TableCell.extend({ content: 'inline*', @@ -20,8 +18,4 @@ export default TableCell.extend({ ] }, - addNodeView() { - return VueNodeViewRenderer(TableCellView) - }, - }) diff --git a/src/nodes/TableHeader.js b/src/nodes/TableHeader.js index e260dc809..4040abbbc 100644 --- a/src/nodes/TableHeader.js +++ b/src/nodes/TableHeader.js @@ -1,6 +1,4 @@ import { TableHeader } from '@tiptap/extension-table-header' -import { VueNodeViewRenderer } from '@tiptap/vue-2' -import TableHeaderView from './TableHeaderView.vue' export default TableHeader.extend({ content: 'inline*', @@ -24,8 +22,4 @@ export default TableHeader.extend({ ] }, - addNodeView() { - return VueNodeViewRenderer(TableHeaderView) - }, - }) |