From 3f8c74254a113e7f28893d2a95ccfa07b098b126 Mon Sep 17 00:00:00 2001 From: Miu Razvan Date: Mon, 14 Mar 2022 19:22:09 +0200 Subject: [PATCH 01/13] New features on table block * Add 2 new boolean options to table configuration: 'Show headers' and 'Make the table sortable' * Add text align option to table configuration --- src/blocks/Table/TableBlockEdit.jsx | 129 ++++++++++++++++++++++++++-- src/blocks/Table/TableBlockView.jsx | 98 ++++++++++++++++++--- 2 files changed, 210 insertions(+), 17 deletions(-) diff --git a/src/blocks/Table/TableBlockEdit.jsx b/src/blocks/Table/TableBlockEdit.jsx index 3b2c1e03..469bef48 100644 --- a/src/blocks/Table/TableBlockEdit.jsx +++ b/src/blocks/Table/TableBlockEdit.jsx @@ -129,6 +129,14 @@ const messages = defineMessages({ id: 'Delete col', defaultMessage: 'Delete col', }, + showHeaders: { + id: 'Show headers', + defaultMessage: 'Show headers', + }, + sortable: { + id: 'Make the table sortable', + defaultMessage: 'Make the table sortable', + }, fixed: { id: 'Fixed width table cells', defaultMessage: 'Fixed width table cells', @@ -153,6 +161,10 @@ const messages = defineMessages({ id: 'Stripe alternate rows with color', defaultMessage: 'Stripe alternate rows with color', }, + align: { + id: 'Align text', + defaultMessage: 'Align text', + }, }); /** @@ -200,6 +212,8 @@ class Edit extends Component { constructor(props) { super(props); this.state = { + headers: [], + rows: {}, selected: { row: 0, cell: 0, @@ -216,12 +230,15 @@ class Edit extends Component { this.onChangeCell = this.onChangeCell.bind(this); this.toggleCellType = this.toggleCellType.bind(this); this.toggleBool = this.toggleBool.bind(this); + this.toggleShowHeaders = this.toggleShowHeaders.bind(this); + this.toggleSortable = this.toggleSortable.bind(this); this.toggleFixed = this.toggleFixed.bind(this); this.toggleCompact = this.toggleCompact.bind(this); this.toggleBasic = this.toggleBasic.bind(this); this.toggleCelled = this.toggleCelled.bind(this); this.toggleInverted = this.toggleInverted.bind(this); this.toggleStriped = this.toggleStriped.bind(this); + this.setAlign = this.setAlign.bind(this); } /** @@ -262,6 +279,7 @@ class Edit extends Component { * @returns {undefined} */ onSelectCell(row, cell) { + console.log('HERE', row, cell); this.setState({ selected: { row, cell } }); } @@ -476,6 +494,24 @@ class Edit extends Component { }); } + /** + * Toggle fixed + * @method toggleShowHeaders + * @returns {undefined} + */ + toggleShowHeaders() { + this.toggleBool('showHeaders'); + } + + /** + * Toggle sortable + * @method toggleSortable + * @returns {undefined} + */ + toggleSortable() { + this.toggleBool('sortable'); + } + /** * Toggle fixed * @method toggleFixed @@ -530,6 +566,22 @@ class Edit extends Component { this.toggleBool('striped'); } + /** + * Set align + * @method setAlign + * @returns {undefined} + */ + setAlign(id, value) { + const table = this.props.data.table; + this.props.onChangeBlock(this.props.block, { + ...this.props.data, + table: { + ...table, + [id]: value, + }, + }); + } + componentDidUpdate(prevProps) { if (prevProps.selected && !this.props.selected) { this.setState({ selected: null }); @@ -542,6 +594,9 @@ class Edit extends Component { * @returns {string} Markup for the component. */ render() { + const headers = this.props.data.table.rows[0]?.cells; + const rows = this.props.data.table.rows.filter((_, index) => index > 0); + return ( // TODO: use slate-table instead of table, but first copy the CSS styles // to the new name @@ -642,17 +697,47 @@ class Edit extends Component { striped={this.props.data.table.striped} className="slate-table-block" > + {this.props.data.table.showHeaders ? ( + + + {headers.map((cell, cellIndex) => ( + + + + ))} + + + ) : ( + '' + )} - {map(this.props.data.table.rows, (row, rowIndex) => ( + {map(rows, (row, rowIndex) => ( {map(row.cells, (cell, cellIndex) => ( + this.toggleShowHeaders()} + /> + this.toggleSortable()} + /> + - + {/* @@ -752,7 +867,7 @@ class Edit extends Component { } onChange={this.toggleCellType} /> - + */} )} diff --git a/src/blocks/Table/TableBlockView.jsx b/src/blocks/Table/TableBlockView.jsx index 8d344a8a..9fe2cccd 100644 --- a/src/blocks/Table/TableBlockView.jsx +++ b/src/blocks/Table/TableBlockView.jsx @@ -3,11 +3,14 @@ * @module volto-slate/blocks/Table/View */ -import React from 'react'; +import React, { useState, useMemo } from 'react'; import PropTypes from 'prop-types'; import { Table } from 'semantic-ui-react'; import { map } from 'lodash'; -import { serializeNodes } from 'volto-slate/editor/render'; +import { + serializeNodes, + serializeNodesToText, +} from 'volto-slate/editor/render'; import { Node } from 'slate'; // TODO: loading LESS files with `volto-slate/...` paths does not work currently @@ -20,6 +23,53 @@ import '../../editor/plugins/Table/less/public.less'; * @param {object} data The table data to render as a table. */ const View = ({ data }) => { + const [state, setState] = useState({ + column: null, + direction: null, + }); + + const headers = useMemo(() => { + return data.table.rows[0]?.cells; + }, [data.table.rows]); + + const rows = useMemo(() => { + const items = {}; + data.table.rows.forEach((row, index) => { + if (index > 0) { + items[row.key] = []; + row.cells.forEach((cell, cellIndex) => { + items[row.key][cellIndex] = { + ...cell, + value: + cell.value && Node.string({ children: cell.value }).length > 0 + ? serializeNodes(cell.value) + : '\u00A0', + valueText: + cell.value && Node.string({ children: cell.value }).length > 0 + ? serializeNodesToText(cell.value) + : '\u00A0', + }; + }); + } + }); + return items; + }, [data.table.rows]); + + const sortedRows = useMemo(() => { + if (state.column === null) return Object.keys(rows); + return Object.keys(rows).sort((a, b) => { + const a_text = rows[a][state.column].valueText; + const b_text = rows[b][state.column].valueText; + if (state.direction === 'ascending' ? a_text < b_text : a_text > b_text) { + return -1; + } + if (state.direction === 'ascending' ? a_text > b_text : a_text < b_text) { + return 1; + } + return 0; + }); + }, [state, rows]); + return ( <> {data && data.table && ( @@ -30,22 +80,50 @@ const View = ({ data }) => { celled={data.table.celled} inverted={data.table.inverted} striped={data.table.striped} + sortable={data.table.sortable} className="slate-table-block" > - - {map(data.table.rows, (row) => ( - - {map(row.cells, (cell) => ( - + + {headers.map((cell, index) => ( + { + if (!data.table.sortable) return; + setState({ + column: index, + direction: + state.column !== index + ? 'ascending' + : state.direction === 'ascending' + ? 'descending' + : 'ascending', + }); + }} > {cell.value && Node.string({ children: cell.value }).length > 0 ? serializeNodes(cell.value) : '\u00A0'} - - {/* TODO: above use blockHasValue from the Slate Volto addon block's metadata */} + + ))} + + + ) : ( + '' + )} + + {map(sortedRows, (row) => ( + + {map(rows[row], (cell) => ( + + {cell.value} ))} From 1ae7ccba6847289db44162cc3e0a9e77e19f77e5 Mon Sep 17 00:00:00 2001 From: Miu Razvan Date: Mon, 14 Mar 2022 19:39:10 +0200 Subject: [PATCH 02/13] Clean up --- src/blocks/Table/TableBlockEdit.jsx | 44 ++++++++++++++--------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/src/blocks/Table/TableBlockEdit.jsx b/src/blocks/Table/TableBlockEdit.jsx index 469bef48..3cbca9da 100644 --- a/src/blocks/Table/TableBlockEdit.jsx +++ b/src/blocks/Table/TableBlockEdit.jsx @@ -137,6 +137,10 @@ const messages = defineMessages({ id: 'Make the table sortable', defaultMessage: 'Make the table sortable', }, + sortableDescription: { + id: 'Visible only in view mode', + defaultMessage: 'Visible only in view mode', + }, fixed: { id: 'Fixed width table cells', defaultMessage: 'Fixed width table cells', @@ -165,6 +169,18 @@ const messages = defineMessages({ id: 'Align text', defaultMessage: 'Align text', }, + left: { + id: 'Left', + defaultMessage: 'Left', + }, + center: { + id: 'Center', + defaultMessage: 'Center', + }, + right: { + id: 'Right', + defaultMessage: 'Right', + }, }); /** @@ -279,7 +295,6 @@ class Edit extends Component { * @returns {undefined} */ onSelectCell(row, cell) { - console.log('HERE', row, cell); this.setState({ selected: { row, cell } }); } @@ -788,7 +803,9 @@ class Edit extends Component { - {/* - - - - - */} )} From 34c4cc034ea9b2b4e04cd767024aade9ee46656e Mon Sep 17 00:00:00 2001 From: Miu Razvan Date: Mon, 14 Mar 2022 19:48:24 +0200 Subject: [PATCH 03/13] Update tests --- src/blocks/Table/TableBlockView.test.js | 1 + src/blocks/Table/__snapshots__/TableBlockView.test.js.snap | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/blocks/Table/TableBlockView.test.js b/src/blocks/Table/TableBlockView.test.js index 35ec8cf0..b9d0e859 100644 --- a/src/blocks/Table/TableBlockView.test.js +++ b/src/blocks/Table/TableBlockView.test.js @@ -39,6 +39,7 @@ test('renders a view table component', () => { ], }, ], + showHeaders: true, }, }} />, diff --git a/src/blocks/Table/__snapshots__/TableBlockView.test.js.snap b/src/blocks/Table/__snapshots__/TableBlockView.test.js.snap index da67f3dc..42916f96 100644 --- a/src/blocks/Table/__snapshots__/TableBlockView.test.js.snap +++ b/src/blocks/Table/__snapshots__/TableBlockView.test.js.snap @@ -4,7 +4,7 @@ exports[`renders a view table component 1`] = ` - - +
`; From 488948e0e9f99f831118ecd0aaa8696830b061b9 Mon Sep 17 00:00:00 2001 From: Miu Razvan Date: Mon, 14 Mar 2022 20:03:25 +0200 Subject: [PATCH 04/13] Add 'Vertical align' option --- src/blocks/Table/TableBlockEdit.jsx | 88 ++++++++++++++----- src/blocks/Table/TableBlockView.jsx | 6 +- .../__snapshots__/TableBlockView.test.js.snap | 10 ++- 3 files changed, 75 insertions(+), 29 deletions(-) diff --git a/src/blocks/Table/TableBlockEdit.jsx b/src/blocks/Table/TableBlockEdit.jsx index 3cbca9da..b7fb9c69 100644 --- a/src/blocks/Table/TableBlockEdit.jsx +++ b/src/blocks/Table/TableBlockEdit.jsx @@ -165,10 +165,14 @@ const messages = defineMessages({ id: 'Stripe alternate rows with color', defaultMessage: 'Stripe alternate rows with color', }, - align: { + textAlign: { id: 'Align text', defaultMessage: 'Align text', }, + verticalAlign: { + id: 'Vertical align', + defaultMessage: 'Vertical align', + }, left: { id: 'Left', defaultMessage: 'Left', @@ -181,6 +185,18 @@ const messages = defineMessages({ id: 'Right', defaultMessage: 'Right', }, + bottom: { + id: 'Bottom', + defaultMessage: 'Bottom', + }, + middle: { + id: 'Middle', + defaultMessage: 'Middle', + }, + top: { + id: 'Top', + defaultMessage: 'Top', + }, }); /** @@ -236,6 +252,7 @@ class Edit extends Component { }, isClient: false, }; + this.onChange = this.onChange.bind(this); this.onSelectCell = this.onSelectCell.bind(this); this.onInsertRowBefore = this.onInsertRowBefore.bind(this); this.onInsertRowAfter = this.onInsertRowAfter.bind(this); @@ -254,7 +271,6 @@ class Edit extends Component { this.toggleCelled = this.toggleCelled.bind(this); this.toggleInverted = this.toggleInverted.bind(this); this.toggleStriped = this.toggleStriped.bind(this); - this.setAlign = this.setAlign.bind(this); } /** @@ -287,6 +303,24 @@ class Edit extends Component { } } + /** + * On change + * @method onChange + * @param {string} id Id of modified property. + * @param {any} value New value of modified property. + * @returns {undefined} + */ + onChange(id, value) { + const table = this.props.data.table; + this.props.onChangeBlock(this.props.block, { + ...this.props.data, + table: { + ...table, + [id]: value, + }, + }); + } + /** * Select cell handler * @method onSelectCell @@ -581,22 +615,6 @@ class Edit extends Component { this.toggleBool('striped'); } - /** - * Set align - * @method setAlign - * @returns {undefined} - */ - setAlign(id, value) { - const table = this.props.data.table; - this.props.onChangeBlock(this.props.block, { - ...this.props.data, - table: { - ...table, - [id]: value, - }, - }); - } - componentDidUpdate(prevProps) { if (prevProps.selected && !this.props.selected) { this.setState({ selected: null }); @@ -716,7 +734,11 @@ class Edit extends Component { {headers.map((cell, cellIndex) => ( - + ( + diff --git a/src/blocks/Table/TableBlockView.jsx b/src/blocks/Table/TableBlockView.jsx index 9fe2cccd..d47cbbb1 100644 --- a/src/blocks/Table/TableBlockView.jsx +++ b/src/blocks/Table/TableBlockView.jsx @@ -85,11 +85,12 @@ const View = ({ data }) => { > {data.table.showHeaders ? ( - + {headers.map((cell, index) => ( { if (!data.table.sortable) return; @@ -121,7 +122,8 @@ const View = ({ data }) => { {map(rows[row], (cell) => ( {cell.value} diff --git a/src/blocks/Table/__snapshots__/TableBlockView.test.js.snap b/src/blocks/Table/__snapshots__/TableBlockView.test.js.snap index 42916f96..4f24bc75 100644 --- a/src/blocks/Table/__snapshots__/TableBlockView.test.js.snap +++ b/src/blocks/Table/__snapshots__/TableBlockView.test.js.snap @@ -10,14 +10,18 @@ exports[`renders a view table component 1`] = ` -

My header

- + + `; From 477e1d60fc5e9625dcd6205f87c5b10d376d69f4 Mon Sep 17 00:00:00 2001 From: Miu Razvan Date: Mon, 14 Mar 2022 20:08:57 +0200 Subject: [PATCH 05/13] Update tests --- src/blocks/Table/__snapshots__/TableBlockView.test.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/blocks/Table/__snapshots__/TableBlockView.test.js.snap b/src/blocks/Table/__snapshots__/TableBlockView.test.js.snap index 4f24bc75..6f61859d 100644 --- a/src/blocks/Table/__snapshots__/TableBlockView.test.js.snap +++ b/src/blocks/Table/__snapshots__/TableBlockView.test.js.snap @@ -11,7 +11,7 @@ exports[`renders a view table component 1`] = ` className="" >

From 4710235d3b32e8a61b9cc70d24148316db58e6ae Mon Sep 17 00:00:00 2001 From: Alin Voinea Date: Tue, 15 Mar 2022 11:12:46 +0200 Subject: [PATCH 06/13] [JENKINS] - Fix tests to work with Volto 15 --- jest-addon.config.js | 1 + src/blocks/Table/__snapshots__/TableBlockEdit.test.js.snap | 1 + 2 files changed, 2 insertions(+) diff --git a/jest-addon.config.js b/jest-addon.config.js index 7c154993..1e5c80c9 100644 --- a/jest-addon.config.js +++ b/jest-addon.config.js @@ -9,6 +9,7 @@ module.exports = { '@plone/volto/babel': '/node_modules/@plone/volto/babel', '@plone/volto/(.*)$': '/node_modules/@plone/volto/src/$1', '@package/(.*)$': '/src/$1', + '@root/(.*)$': '/src/$1', '@plone/volto-quanta/(.*)$': '/src/addons/volto-quanta/src/$1', '@eeacms/(.*?)/(.*)$': '/src/addons/$1/src/$2', 'volto-slate/(.*)$': '/src/addons/volto-slate/src/$1', diff --git a/src/blocks/Table/__snapshots__/TableBlockEdit.test.js.snap b/src/blocks/Table/__snapshots__/TableBlockEdit.test.js.snap index 7fac60e7..c8d76a16 100644 --- a/src/blocks/Table/__snapshots__/TableBlockEdit.test.js.snap +++ b/src/blocks/Table/__snapshots__/TableBlockEdit.test.js.snap @@ -7,6 +7,7 @@ exports[`renders an edit table block component 1`] = ` + From 34e5a201a4a2f32a0bbeebc6876a6506acdf3d47 Mon Sep 17 00:00:00 2001 From: Alin Voinea Date: Tue, 15 Mar 2022 11:21:16 +0200 Subject: [PATCH 07/13] Bump version to 5.4.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index bd65cf60..17a5c5e8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "volto-slate", - "version": "5.3.5", + "version": "5.4.0", "description": "Slate.js integration with Volto", "main": "src/index.js", "author": "European Environment Agency: IDM2 A-Team", From f0fc924930ef0495db891e900d982a1d285e48c8 Mon Sep 17 00:00:00 2001 From: Miu Razvan Date: Tue, 15 Mar 2022 12:30:38 +0200 Subject: [PATCH 08/13] set showHeaders as true by default --- src/blocks/Table/TableBlockEdit.jsx | 6 ++++-- src/blocks/Table/TableBlockView.jsx | 3 ++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/blocks/Table/TableBlockEdit.jsx b/src/blocks/Table/TableBlockEdit.jsx index b7fb9c69..b24e4cef 100644 --- a/src/blocks/Table/TableBlockEdit.jsx +++ b/src/blocks/Table/TableBlockEdit.jsx @@ -64,6 +64,7 @@ const emptyRow = (cells) => ({ * relevance only in the context in which it is used. */ const initialTable = { + showHeaders: true, fixed: true, compact: false, basic: false, @@ -627,8 +628,9 @@ class Edit extends Component { * @returns {string} Markup for the component. */ render() { - const headers = this.props.data.table.rows[0]?.cells; - const rows = this.props.data.table.rows.filter((_, index) => index > 0); + const headers = this.props.data.table?.rows?.[0]?.cells || []; + const rows = + this.props.data.table?.rows?.filter((_, index) => index > 0) || []; return ( // TODO: use slate-table instead of table, but first copy the CSS styles diff --git a/src/blocks/Table/TableBlockView.jsx b/src/blocks/Table/TableBlockView.jsx index d47cbbb1..ed73e6f8 100644 --- a/src/blocks/Table/TableBlockView.jsx +++ b/src/blocks/Table/TableBlockView.jsx @@ -29,11 +29,12 @@ const View = ({ data }) => { }); const headers = useMemo(() => { - return data.table.rows[0]?.cells; + return data.table.rows?.[0]?.cells; }, [data.table.rows]); const rows = useMemo(() => { const items = {}; + if (!data.table.rows) return {}; data.table.rows.forEach((row, index) => { if (index > 0) { items[row.key] = []; From 2fb5837946289778f6444d7971848871ee12be81 Mon Sep 17 00:00:00 2001 From: Miu Razvan Date: Tue, 15 Mar 2022 15:35:11 +0200 Subject: [PATCH 09/13] Replace showHeaders with hideHeaders --- src/blocks/Table/TableBlockEdit.jsx | 26 ++++++++++++------------- src/blocks/Table/TableBlockView.jsx | 2 +- src/blocks/Table/TableBlockView.test.js | 2 +- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/blocks/Table/TableBlockEdit.jsx b/src/blocks/Table/TableBlockEdit.jsx index b24e4cef..1e4df802 100644 --- a/src/blocks/Table/TableBlockEdit.jsx +++ b/src/blocks/Table/TableBlockEdit.jsx @@ -64,7 +64,7 @@ const emptyRow = (cells) => ({ * relevance only in the context in which it is used. */ const initialTable = { - showHeaders: true, + hideHeaders: false, fixed: true, compact: false, basic: false, @@ -130,9 +130,9 @@ const messages = defineMessages({ id: 'Delete col', defaultMessage: 'Delete col', }, - showHeaders: { - id: 'Show headers', - defaultMessage: 'Show headers', + hideHeaders: { + id: 'Hide headers', + defaultMessage: 'Hide headers', }, sortable: { id: 'Make the table sortable', @@ -264,7 +264,7 @@ class Edit extends Component { this.onChangeCell = this.onChangeCell.bind(this); this.toggleCellType = this.toggleCellType.bind(this); this.toggleBool = this.toggleBool.bind(this); - this.toggleShowHeaders = this.toggleShowHeaders.bind(this); + this.toggleHideHeaders = this.toggleHideHeaders.bind(this); this.toggleSortable = this.toggleSortable.bind(this); this.toggleFixed = this.toggleFixed.bind(this); this.toggleCompact = this.toggleCompact.bind(this); @@ -546,11 +546,11 @@ class Edit extends Component { /** * Toggle fixed - * @method toggleShowHeaders + * @method toggleHideHeaders * @returns {undefined} */ - toggleShowHeaders() { - this.toggleBool('showHeaders'); + toggleHideHeaders() { + this.toggleBool('hideHeaders'); } /** @@ -732,7 +732,7 @@ class Edit extends Component { striped={this.props.data.table.striped} className="slate-table-block" > - {this.props.data.table.showHeaders ? ( + {!this.props.data.table.hideHeaders ? ( {headers.map((cell, cellIndex) => ( @@ -819,13 +819,13 @@ class Edit extends Component { this.toggleShowHeaders()} + onChange={() => this.toggleHideHeaders()} /> { sortable={data.table.sortable} className="slate-table-block" > - {data.table.showHeaders ? ( + {!data.table.hideHeaders ? ( {headers.map((cell, index) => ( diff --git a/src/blocks/Table/TableBlockView.test.js b/src/blocks/Table/TableBlockView.test.js index b9d0e859..e3280877 100644 --- a/src/blocks/Table/TableBlockView.test.js +++ b/src/blocks/Table/TableBlockView.test.js @@ -39,7 +39,7 @@ test('renders a view table component', () => { ], }, ], - showHeaders: true, + hideHeaders: false, }, }} />, From 8669ad61dcc1b334c28ac80e16b6528522a4c0f1 Mon Sep 17 00:00:00 2001 From: Miu Razvan Date: Tue, 15 Mar 2022 17:33:16 +0200 Subject: [PATCH 10/13] use align widget --- src/blocks/Table/TableBlockEdit.jsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/blocks/Table/TableBlockEdit.jsx b/src/blocks/Table/TableBlockEdit.jsx index 1e4df802..fdf1d886 100644 --- a/src/blocks/Table/TableBlockEdit.jsx +++ b/src/blocks/Table/TableBlockEdit.jsx @@ -886,11 +886,7 @@ class Edit extends Component { Date: Tue, 15 Mar 2022 17:42:01 +0200 Subject: [PATCH 11/13] Update tests --- .../Table/__snapshots__/TableBlockEdit.test.js.snap | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/blocks/Table/__snapshots__/TableBlockEdit.test.js.snap b/src/blocks/Table/__snapshots__/TableBlockEdit.test.js.snap index c8d76a16..dd490441 100644 --- a/src/blocks/Table/__snapshots__/TableBlockEdit.test.js.snap +++ b/src/blocks/Table/__snapshots__/TableBlockEdit.test.js.snap @@ -7,7 +7,13 @@ exports[`renders an edit table block component 1`] = `
- + + + From c49ec72f28ca6c646cced77684d17a98e53217b9 Mon Sep 17 00:00:00 2001 From: Miu Razvan Date: Tue, 15 Mar 2022 19:29:10 +0200 Subject: [PATCH 12/13] fix(table style): change display to inline-block for headers content --- src/editor/plugins/Table/less/public.less | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/editor/plugins/Table/less/public.less b/src/editor/plugins/Table/less/public.less index 6ac5faee..95fb80e2 100644 --- a/src/editor/plugins/Table/less/public.less +++ b/src/editor/plugins/Table/less/public.less @@ -19,3 +19,9 @@ table.slate-table { border-bottom: 0.15rem solid @brown; } } + +table.slate-table-block.sortable { + tr th > * { + display: inline-block; + } +} From 1d17a22473ebd09523c76eb9f207e2fd3ae29bd0 Mon Sep 17 00:00:00 2001 From: Miu Razvan Date: Tue, 15 Mar 2022 19:39:13 +0200 Subject: [PATCH 13/13] Add comment to public.less --- src/editor/plugins/Table/less/public.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/editor/plugins/Table/less/public.less b/src/editor/plugins/Table/less/public.less index 95fb80e2..6cc70090 100644 --- a/src/editor/plugins/Table/less/public.less +++ b/src/editor/plugins/Table/less/public.less @@ -22,6 +22,8 @@ table.slate-table { table.slate-table-block.sortable { tr th > * { + // Header will contain both the slate and an icon when sorted + // so this will keep them on the same line. display: inline-block; } }