Table cell/row/column selection – stage I

[Reinmar]

We started to work on the table selection feature. Since it is a bigger task that will be delivered over multiple releases we split the task to the following sub-tickets:

MVP (Stage I)

• Allow selection to be set on object elements #6154: Allow selection to be set on object elements
• Validate table selection POC approach. #6113: Validate table selection POC approach
• Copy selected table fragment (base) #6118: Copy selected table fragment (base)
• Cut / delete on selected table fragment #6119: Cut / delete on selected table fragment
• Table selection does not cooporate with typing #6284: Table selection does not cooporate with typing
• Multiple cell selection does not get along with enter #6301: Multiple cell selection does not get along with enter
• Align table properties UI to multi-range selection #6150: Align table properties UI to multi-range selection
• Table mouse selection UI/UX #6114: Table mouse selection UI/UX
• Table MouseSelectionHandler should reset its #isSelecting flag on mouseup #6353: Table MouseSelectionHandler should reset its #isSelecting flag on mouseup
• Review behavior of existing features on multi-range selections in tables #6116: Review behavior of existing features on multi-range selections in tables
• Table selection handling: Insert column, row commands #6125: Table selection handling: Insert column, row commands
• Table selection handling: Remove row, column commands #6126: Table selection handling: Remove row, column commands
• Table selection handling: Set heading rows, column commands #6127: Table selection handling: Set heading rows, column commands
• Table selection handling: Split cell #6128: Table selection handling: Split cell
• Test whether all table features are still functional if the table selection does not work #6151: Test whether all table features are still functional if the table selection does not work
• Ensure that multi-range selections are handled in deleteContent(), insertContent() and modifySelection() #6328: Handle multi-range selection in deleteContent(), insertContent() and modifySelection()
• Table Shift+Click selection UX #6330: Table Shift+Click selection UX
• Enable table selection as core table feature #6343: Enable table selection as core table feature
• Selecting a table cell (or cells) through a model does not render a nice table selection #6346: Selecting a table cell (or cells) through a model does not render a nice table selection
• It should be possible to make selection of a single cell. #6347: It should be possible to make selection of a single cell.
• Multiple cell selection should not fail when mouse is over a widget #6348: Multiple cell selection should not fail when mouse is over a widget

Stage II

Tracked here: #6285.

Stage III (optional features)

Tracked here: #6297.

---

Right now, as defined in https://github.com/ckeditor/ckeditor5-table/issues/3 we support only "a custom table selection". This means that it's possible to place the selection inside table cells, but you cannot select an entire table cell and, most importantly, more than one cell at a time. Which means that you cannot select rows and columns.

CKEditor 4 implements a custom cell/row/col selection (you check it live e.g. on https://ckeditor.com/ckeditor-4/#document). It works incomparably better than the native selection which in all browsers (without maybe Firefox) is just useless.

What we need is something very similar to what CKEditor 4 offers.

[jodator]

Some POC of fake selection in tables with current post fixers, table model (with block content), etc:

The above POC is implemented as custom class wchich tracks selection on table in three different modes:

1. block
2. column
3. row

I have some UI/UX questions (cc @oleq, @dkonopka) on how we're going to implement this.
In https://github.com/ckeditor/ckeditor5-table/issues/1#issuecomment-392034926 @oleq defined how merge cell option should behave. But do we fancy another modes besides "block" mode? I've implemented "row"/"column" modes as it was simple addition to the "block" mode. Also I've seen this on other text-edtiors (like LibreOffice):

ps.: Side note - right now I don't have strong opinion/idea how to translate this fake selection to commands as such selection is not possible in the model due to selection post-fixer. Right now I'm leaning towards TableSelection plugin which might be used by the TableToolbar to determine which buttons/options render since with multple cell selection some options may be changed, like:

• Remove row -> Remove rows
• Insert row below -> Insert 3 rows below (ie when 3 rows are already selected)

[oleq]

The merge cells button should be a simple button that merges selected cells, nothing more.

As for the column/block selection feature, I think we can live without it (ATM). Let's talk about it and find out if it makes sense for us in the follow-up issue, OK?

[deepak-khopade-isdr]

When would this feature be available for tables?

[harshinim]

Do we know when this feature would be available? I have a requirement where users want to paste to part of the table from excel.

[jodator]

The branches with a preview were updated to i/3202 in ckeditor5-table and ckeditor5-engine repos. Old branches (t/63) were removed.

[jodator]

Would be nice to have this handled by the inspector: ckeditor/ckeditor5-inspector#68.

[Reinmar]

Done :) It can be tested in the nightly docs: https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/features/table.html