From dd34a6f567e12ae80627d10029a7822372fe9c68 Mon Sep 17 00:00:00 2001 From: Mateusz Baginski Date: Thu, 12 Sep 2024 08:22:23 +0200 Subject: [PATCH] Add basic PoC --- .../src/converters/downcast.ts | 20 ++++++++++++++++--- .../tablecolumnresizeediting.ts | 2 +- packages/ckeditor5-table/src/tableediting.ts | 2 +- packages/ckeditor5-table/theme/table.css | 8 +++++++- .../theme/ckeditor5-table/tableediting.css | 15 +++++++++++--- 5 files changed, 38 insertions(+), 9 deletions(-) diff --git a/packages/ckeditor5-table/src/converters/downcast.ts b/packages/ckeditor5-table/src/converters/downcast.ts index 33363d40ef8..f6aa14eb151 100644 --- a/packages/ckeditor5-table/src/converters/downcast.ts +++ b/packages/ckeditor5-table/src/converters/downcast.ts @@ -111,9 +111,23 @@ export function downcastCell( options: { asWidget?: boolean } = {} ): ElementCre const isHeading = tableSlot.row < headingRows || tableSlot.column < headingColumns; const cellElementName = isHeading ? 'th' : 'td'; - result = options.asWidget ? - toWidgetEditable( writer.createEditableElement( cellElementName ), writer ) : - writer.createContainerElement( cellElementName ); + const cellElement = writer.createContainerElement( cellElementName ); + + if ( options.asWidget ) { + const divElement = toWidgetEditable( + writer.createEditableElement( 'div', { class: 'ck-table-cell-content' } ), + writer + ); + + writer.insert( + writer.createPositionAt( divElement, 0 ), + writer.createSlot() + ); + + writer.insert( writer.createPositionAt( cellElement, 0 ), divElement ); + } + + result = cellElement; break; } } diff --git a/packages/ckeditor5-table/src/tablecolumnresize/tablecolumnresizeediting.ts b/packages/ckeditor5-table/src/tablecolumnresize/tablecolumnresizeediting.ts index 3bdf7f6643d..61c1a756da1 100644 --- a/packages/ckeditor5-table/src/tablecolumnresize/tablecolumnresizeediting.ts +++ b/packages/ckeditor5-table/src/tablecolumnresize/tablecolumnresizeediting.ts @@ -820,7 +820,7 @@ export default class TableColumnResizeEditing extends Plugin { const viewWriter = conversionApi.writer; viewWriter.insert( - viewWriter.createPositionAt( viewElement!, 'end' ), + viewWriter.createPositionAt( viewElement!.getChild( 0 )!, 'end' ), viewWriter.createUIElement( 'div', { class: 'ck-table-column-resizer' } ) ); }, { priority: 'lowest' } ); diff --git a/packages/ckeditor5-table/src/tableediting.ts b/packages/ckeditor5-table/src/tableediting.ts index 210b2d31977..3d021b3f9e1 100644 --- a/packages/ckeditor5-table/src/tableediting.ts +++ b/packages/ckeditor5-table/src/tableediting.ts @@ -136,7 +136,7 @@ export default class TableEditing extends Plugin { conversion.for( 'upcast' ).add( ensureParagraphInTableCell( 'td' ) ); conversion.for( 'upcast' ).add( ensureParagraphInTableCell( 'th' ) ); - conversion.for( 'editingDowncast' ).elementToElement( { + conversion.for( 'editingDowncast' ).elementToStructure( { model: 'tableCell', view: downcastCell( { asWidget: true } ) } ); diff --git a/packages/ckeditor5-table/theme/table.css b/packages/ckeditor5-table/theme/table.css index 1bcf2ceeadf..bb4b246d308 100644 --- a/packages/ckeditor5-table/theme/table.css +++ b/packages/ckeditor5-table/theme/table.css @@ -27,7 +27,6 @@ & td, & th { min-width: 2em; - padding: .4em; /* The border is inherited from .ck-editor__nested-editable styles, so theoretically it's not necessary here. However, the border is a content style, so it should use .ck-content (so it works outside the editor). @@ -82,3 +81,10 @@ when content is available outside the editor. See https://github.com/ckeditor/ck */ width: 100%; } + +.ck-editor__editable .ck-table-cell-content { + box-sizing: border-box; + min-height: 100%; + padding: .4em; + margin: -1px; +} diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-table/tableediting.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-table/tableediting.css index 983492f7805..9f3d703d3fb 100644 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-table/tableediting.css +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-table/tableediting.css @@ -16,12 +16,21 @@ * So do not use `@mixin ck-focus-ring;` here, or any other border styles. * See more: https://github.com/ckeditor/ckeditor5/issues/16979 */ - &.ck-editor__nested-editable.ck-editor__nested-editable_focused, - &.ck-editor__nested-editable:focus { - /* A very slight background to highlight the focused cell */ + &:has(.ck-editor__nested-editable.ck-editor__nested-editable_focused), + &:has(.ck-editor__nested-editable:focus) { background: var(--ck-color-selector-focused-cell-background); outline: 1px solid var(--ck-color-focus-border); outline-offset: -1px; /* progressive enhancement - no IE support */ + box-shadow: none; + + & .ck-editor__nested-editable.ck-editor__nested-editable_focused, + & .ck-editor__nested-editable:focus { + /* A very slight background to highlight the focused cell */ + background: none; + border: 0; + box-shadow: none; + } + } } }