Enable the HTML / MD editor on text fields within the profile editor

[jamesrwelch]

We made a simplification in the first iteration of the bulk editor, to not try any fancy editing inside the boxes - in particular not using the Jodit / MD editor within the grid. For space / rendering issues, I think having an HTML editor on each text box might be un-workable, but maybe there's a way to pop-up an HTML / MD editor on request?

[jamesrwelch]

Or, like Excel, have the currently-edited value in a box at the top, where there could be a rich-text editor present.

[pjmonks]

Following the UI standards of Excel may be the best option. The Ag Grid component may be able to use a custom cell editor to embed our own controls into the editing cell, but it will not look very nice and could be complex to handle the event interactions such as mouse clicks.

Having one mdm-content-editor embedded on the page might be more feasible. This would mean:

1. Clicking on a certain cell type e.g. text, would copy the cell value into the one content editor.
2. Any changes made to the content editor would be bound back to the cell contents.
3. The content editor is disabled or hidden for other cell types e.g. numbers, enumerations, dates, etc

Finding a suitable position for the content editor on the page would have to be determined or experimented with:

1. Editor top, spreadsheet bottom - user would know there is a content editor, but would push down the spreadsheet content
2. Spreadsheet top, editor bottom - user might miss that there is a content editor and have to scroll down to find it
3. Side-by-side - Editor might become more compact, especially if they have toolbars

Another idea could be to hold the content editor in a dialog, but this would less "inline" than the rest of the spreadsheet.

[pjmonks]

As part of UI experimentation, here is one example of how editing large amounts of text in cells could be achieved (though not definitive):

Using a custom Ag Grid cell editor, I've been able to embed our Markdown editor into a cell editor popup just to see what it looks like.

Pros:

1. Editing the text is in the same region as the cell in question - obvious what text is actively being edited
2. Responds well to the rest of the grid, and was simple to integrate

Cons:

1. Narrow region to edit the text. The popup display width can be made wider using CSS width. How well would it look with paragraphs of text though?
2. The Markdown (and eventually the HTML) editor should ideally be cut down a bit with features to not appear overloaded/crowded. For example, remove the editor toolbars (or significantly reduce their options), remove preview panes etc. This might be OK given the use case, it does not seem as likely that a user would want to do extensive text editing in a spreadsheet view whilst editing other elements.

I will also experiment with the Excel-like single text editor field as explained in the issue description though to provide a comparison.

[pjmonks]

Another experiment, this time focusing on what was originally requested in this issue: an Excel-style singular editor which is populated once a cell is clicked:

Currently only for the Markdown editor, but how this works is:

1. Click on a cell that is for a text profile field - other column types hides the editor
2. The full text editor appears above the spreadsheet, with the contents populated with the selected cell value
3. Enter text in the editor then click "Update" to put back into the cell. AgGrid has a flash cells feature which will colour the updated cell briefly - makes it easier to see what was updated
4. If you edit text in the editor but do not click "Update", or click on a different cell, this acts as a "cancel" action, the current changes are not updated back to the cell.

Pros

1. The full text editor could be used here providing all Markdown/HTML editing actions
2. The cell flashing on updates is a useful UX cue

Cons

1. It takes up a lot of space, and the spreadsheet position adjusts a lot when showing/hiding the editor
2. It's not very obvious which is the current cell being edited, as focus is lost once you start typing. There may be ways around this, using a custom cell renderer.
3. You have to manually click "Update" to ensure your changes are pushed back to the cells. This could become a keyboard shortcut (e.g. Ctrl + Enter) but could also be the cause of some accidental edit losses.

[pjmonks]

One final UX experiment uses Ag Grid overlays to work around the editing experience:

The overlay is actually designed for a loading prompt, but has been hijacked slightly to instead show and manage an editor and cell update. It works by:

1. Tracking which profile field text cell was clicked
2. Trigger the loading overlay, which display our custom overlay component - in this case the Markdown editor
3. The selected cell contents are passed via parameters to the overlay, so the current value is the start of the editing process
4. While the loading overlay is visible, you cannot click on other cells - you must manually click the "Close" button inside the overlay. This then updates the cell with the editor value.

Pros

1. The overlay exists within the spreadsheet space, so the size of the text editor should be large enough to include a full editing suite if required
2. Showing the overlay disables the background cells, so there can be no accidental clicking away from the current editor.
3. All elements remain in the viewport of the spreadsheet where the user is working.

Cons

1. It's not very obvious which is the current cell being edited. Maybe a custom cell renderer can help.
2. Although technically possible, the loading overlay isn't really designed for this kind of job. It seems fine for this use case, but would cause conflicts if an actual loading overlay were needed too.
3. You have to manually click "Close" to ensure your changes are pushed back to the cells. This could become a keyboard shortcut (e.g. Ctrl + Enter) but may feel a bit annoying.

[pjmonks]

I have pushed commits to branch feature/gh-585 which can allow you to test these ideas yourself. To switch text edit styles, update the bulk-edit-editor.component.ts file with one of the following modes allowed:

/** TESTING ONLY! For experimenting with text editing features */
textEditStyle: 'cell-editor' | 'excel-like' | 'grid-overlay' = 'excel-like';