Add basic Microsoft Narrator tables PoC

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;
  }
  }

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' } );

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 } )
  } );

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;
+}

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;
+ }
+
  }
  }
 }