diff options
author | Max <max@nextcloud.com> | 2022-03-16 12:49:18 +0300 |
---|---|---|
committer | Max <max@nextcloud.com> | 2022-03-31 15:29:22 +0300 |
commit | 230dba77c564cdafb5c0a32c4b5c000d605ef1c3 (patch) | |
tree | b1da2f2e529a449c329b89b39a2d8f90c742f94c | |
parent | 15480e0d41d0f5300e215ec7be75e240d1160491 (diff) |
fix: table layout to match prosemirror expectations
Signed-off-by: Max <max@nextcloud.com>
-rw-r--r-- | css/prosemirror.scss | 7 | ||||
-rw-r--r-- | src/EditorFactory.js | 6 | ||||
-rw-r--r-- | src/nodes/Table.js | 6 | ||||
-rw-r--r-- | src/nodes/TableHeadRow.js | 6 | ||||
-rw-r--r-- | src/tests/fixtures/tables/basic.out.html | 10 | ||||
-rw-r--r-- | src/tests/fixtures/tables/handbook.out.html | 4 | ||||
-rw-r--r-- | src/tests/tables.spec.js | 2 |
7 files changed, 23 insertions, 18 deletions
diff --git a/css/prosemirror.scss b/css/prosemirror.scss index b5680aee1..fd57b776b 100644 --- a/css/prosemirror.scss +++ b/css/prosemirror.scss @@ -267,14 +267,11 @@ div.ProseMirror { vertical-align: top; max-width: 100%; } - thead tr { - background-color: var(--color-background-darker); - th { + th { font-weight: bold; border-color: var(--color-border-dark); - } } - tbody tr { + tr { background-color: var(--color-main-background); &:hover, &:active, &:focus { background-color: var(--color-background-dark); diff --git a/src/EditorFactory.js b/src/EditorFactory.js index ec681c489..164a8a310 100644 --- a/src/EditorFactory.js +++ b/src/EditorFactory.js @@ -33,10 +33,9 @@ import CodeBlock from '@tiptap/extension-code-block' import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight' import HorizontalRule from '@tiptap/extension-horizontal-rule' import Table from './nodes/Table' -import TableBody from './nodes/TableBody' import TableCell from './nodes/TableCell' -import TableHead from './nodes/TableHead' import TableHeader from './nodes/TableHeader' +import TableHeadRow from './nodes/TableHeadRow' import TableRow from './nodes/TableRow' /* eslint-enable import/no-named-as-default */ @@ -95,10 +94,9 @@ const createEditor = ({ content, onCreate, onUpdate, extensions, enableRichEditi OrderedList, ListItem, Table, - TableBody, TableCell, - TableHead, TableHeader, + TableHeadRow, TableRow, TaskList, TaskItem, diff --git a/src/nodes/Table.js b/src/nodes/Table.js index d3bec5aa1..5c064939e 100644 --- a/src/nodes/Table.js +++ b/src/nodes/Table.js @@ -48,13 +48,11 @@ function createTable(schema, rowsCount, colsCount, cellContent) { for (let index = 1; index < rowsCount; index += 1) { rows.push(schema.nodes.tableRow.createChecked(null, cells)) } - const head = schema.nodes.tableHead.createChecked(null, headRow) - const body = schema.nodes.tableBody.createChecked(null, rows) - return schema.nodes.table.createChecked(null, [head, body]) + return schema.nodes.table.createChecked(null, [headRow, ...rows]) } export default Table.extend({ - content: 'tableCaption? tableHead tableBody', + content: 'tableCaption? tableHeadRow tableRow*', addExtensions() { return [ diff --git a/src/nodes/TableHeadRow.js b/src/nodes/TableHeadRow.js index f37e5530e..8845ae462 100644 --- a/src/nodes/TableHeadRow.js +++ b/src/nodes/TableHeadRow.js @@ -25,6 +25,12 @@ export default Node.create({ state.write('|') state.renderInline(node) state.ensureNewLine() + state.write('|') + node.forEach(cell => { + state.write(state.repeat('-', cell.textContent.length + 2)) + state.write('|') + }) + state.ensureNewLine() }, }) diff --git a/src/tests/fixtures/tables/basic.out.html b/src/tests/fixtures/tables/basic.out.html new file mode 100644 index 000000000..c0b517180 --- /dev/null +++ b/src/tests/fixtures/tables/basic.out.html @@ -0,0 +1,10 @@ +<table> +<tr> +<th>heading</th> +<th>other heading</th> +</tr> +<tr> +<td>cell</td> +<td>other cell</td> +</tr> +</table> diff --git a/src/tests/fixtures/tables/handbook.out.html b/src/tests/fixtures/tables/handbook.out.html index ad2d26a4a..4d8afad4f 100644 --- a/src/tests/fixtures/tables/handbook.out.html +++ b/src/tests/fixtures/tables/handbook.out.html @@ -1,5 +1,4 @@ <table> -<thead> <tr> <th><strong>Heading 0</strong></th> <th><strong>Heading 1</strong></th> @@ -7,8 +6,6 @@ <th><strong>Heading 3</strong></th> <th><strong>Heading 4</strong></th> </tr> -</thead> -<tbody> <tr> <td><strong>Letter</strong></td> <td>a</td> @@ -30,5 +27,4 @@ <td>9</td> <td>16</td> </tr> -</tbody> </table> diff --git a/src/tests/tables.spec.js b/src/tests/tables.spec.js index 3ff44f1c8..2183e1744 100644 --- a/src/tests/tables.spec.js +++ b/src/tests/tables.spec.js @@ -2,7 +2,7 @@ import { createEditor } from './../EditorFactory' import { createMarkdownSerializer } from './../extensions/Markdown' import markdownit from './../markdownit' import input from './fixtures/table.md' -import output from './fixtures/table.html' +import output from './fixtures/tables/basic.out.html' import otherStructure from './fixtures/tableWithOtherStructure.html' import handbook from './fixtures/tables/handbook.html' import handbookOut from './fixtures/tables/handbook.out.html' |