Ckeditor5: Table cell/row/column selection – stage I

Created on 18 Jun 2018 · 7Comments · Source: ckeditor/ckeditor5

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)

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

Stage II

Tracked here: https://github.com/ckeditor/ckeditor5/issues/6285.

Stage III (optional features)

Tracked here: https://github.com/ckeditor/ckeditor5/issues/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.

Epic table feature

Source

Reinmar

All 7 comments

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

peek 2018-08-02 16-05

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

block
column
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):

peek 2018-08-02 16-24

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)

jodator on 2 Aug 2018

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?