Editor: Keep text selection between Visual and Text modes

[biskobe]

Summary

This proposal aims to improve the Editor experience by keeping the text selection when switching between Visual and Text modes.

A GIF is worth a thousand words

What is this?

The editor has no functionality to save the selection in one mode and transfer it to the other. This patch adds a basic functionality that does that.

What is currently supported:

• Cursor position is preserved
• Selection range is preserved
• Clicking inside an HTML tag in Text mode selects the whole tag. This prevents breaking of the element when switching to Visual mode
• Selecting an object (e.g. Image) in Visual mode should select the whole HTML tag in Text mode.
• The view is automatically scrolled to the selected position when switching between modes. This makes it easier to find where the current selection is, without having to manually scroll to find it.
• Support for some shortcodes, i.e. [caption]

To test

1. Apply patch
2. Open the editor
3. Add content, click around, select things
4. Switch between modes
5. Try adding embeds
6. Try adding shortcodes

Look for JS errors in the console, weird behavior, etc.

Feedback

Please, add any feedback as a comment here or as a comment on the development PR, linked below.

Current status

The patch is still in development, as it requires some code polishing.

Current development is happening on GitHub, under this PR: ​https://github.com/bisko/wordpress-develop/pull/1

Once I finish up polishing, I will add the patch as an attachment here.

[biskobe]

Attached the patch for the change.

The code is ready for more general testing.

I have two bigger things left on my Todo list for it:

• Test if there will be any conflict between this patch and CodeMirror for syntax highlighting
• Decide if the scrolling should be kept as is:
  • Fast animated scroll for Visual mode
  • Instant scroll for Text mode

There is a possibility of bugs arising from the code and how the selection is tracked, but things should be pretty minor in terms of fixing them.

I'd love more eyes on this, so we can clear out hidden bugs.

cc @azaozz

[pento]

So, I didn't realise that CodeMirror wasn't enabled for post editing, we don't need to worry about that. :-)

I've been playing around with it a bit, I haven't run into any issues. I'm going to commit it, and bugs that crop up can be addressed in a new ticket.

[pento]

In 41630:

Post Editor: Keep text selection between Visual and Text modes

When switching between post editor modes, the current cursor position and selection is now preserved. This allows authors to switch modes without losing the context of where they were in the document.

Props biskobe.
Fixes #41962.

[afercia]

@pento I was going to comment but you beat me :) Not sure how this can be merged since it doesn't meet the coding and documentation standards. It needs several adjustments.

​https://make.wordpress.org/core/handbook/best-practices/coding-standards/javascript/
​https://make.wordpress.org/core/handbook/best-practices/inline-documentation-standards/javascript/

[pento]

I fixed the coding standard problems that jshint caught, was there anything I missed?

What doc standards is it missing? We should probably have a precommit hook to catch these.

[afercia]

@pento I had just a quick look... some examples
var var var doesn't meet the coding standards

// For consistency with our PHP standards, do not include a space around
// string literals or integers used as key values in array notation:
prop = object['default'];
firstArrayElement = arr[0];

docs:
alignments ot params names and descriptions

I fixed the coding standard problems that jshint caught

jshint doesn't catch everything... a manual check is always needed

[afercia]

Also:
if/else: else should not be in a new line

a few cases of missing spaces within parenthesis, e.g.:
editor.on('init', function(event) {
$('#wp-content-editor-tools');
.addClass('mce_SELRES_start');
etc.

typo (double asterisk): * * Decide if we should animate the transition or not ...

[azaozz]

I've been looking at this too, have couple of smaller changes that still need some testing.

var var var doesn't meet the coding standards

Thinking we should amend the coding standards because:

var some;
var more;
let that;
let there;
const these;

has better readability.

[afercia]

Thinking we should amend the coding standards

I'd agree :) and already tried to push in that direction, both in the Gutenberg context and in a conversation with @pento. However, that should happen before committing code that doesn't meet the current standards.

[biskobe]

I'd agree :) and already tried to push in that direction, both in the Gutenberg context and in a conversation with @pento. However, that should happen before committing code that doesn't meet the current standards.

That's a good way to say that @afercia ! I have a patch with bug fixes incoming soon and I'll address the coding standard issues in that too.

[afercia]

See #42530 and #42531 for a couple regressions introduced here.

[westonruter]

In 42183:

Editor: Improve scrolling behavior and prevent autosave logic from causing dirty state when just switching between Visual and Text tabs.

Props pento.
See #41962, #42029.
Fixes #42530 for trunk.

[westonruter]

In 42184:

Editor: Improve scrolling behavior and prevent autosave logic from causing dirty state when just switching between Visual and Text tabs.

Props pento.
See #41962, #42029.
Fixes #42530 for 4.9.

[westonruter]

In 42191:

Editor: Disable wp_keep_scroll_position in IE11 since buggy; fix matches polyfill conflict with ME.js by doing runtime feature detection in context window.

Props westonruter, SergeyBiryukov, Clorith for testing.
See #41962, #42029.
Fixes #42553 for trunk.

[westonruter]

In 42192:

Editor: Disable wp_keep_scroll_position in IE11 since buggy; fix matches polyfill conflict with ME.js by doing runtime feature detection in context window.

Props westonruter, SergeyBiryukov, Clorith for testing.
See #41962, #42029.
Fixes #42553 for 4.9.