WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#41962 closed enhancement (fixed)

Editor: Keep text selection between Visual and Text modes

Reported by: biskobe Owned by: pento
Milestone: 4.9 Priority: normal
Severity: normal Version:
Component: Editor Keywords: has-patch needs-testing
Focuses: javascript Cc:

Description (last modified by pento)

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

https://core.trac.wordpress.org/raw-attachment/ticket/41962/wordpress-selection-keep-v2.gif

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.

Attachments (2)

wordpress-selection-keep-v2.gif (2.0 MB) - added by biskobe 3 years ago.
41962.diff (21.5 KB) - added by biskobe 3 years ago.

Download all attachments as: .zip

Change History (18)

#1 @pento
3 years ago

  • Description modified (diff)
  • Milestone changed from Awaiting Review to 4.9
  • Owner set to biskobe
  • Status changed from new to assigned
  • Version trunk deleted

@biskobe
3 years ago

#2 @biskobe
3 years ago

  • Keywords has-patch needs-testing added

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

#3 @pento
3 years ago

  • Owner changed from biskobe to pento
  • Status changed from assigned to accepted

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.

#4 @pento
3 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

#5 @afercia
3 years ago

@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/

#6 @pento
3 years ago

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.

#7 @afercia
3 years ago

@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

Last edited 3 years ago by afercia (previous) (diff)

#8 @afercia
3 years ago

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 ...

#9 @azaozz
3 years ago

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.

#10 @afercia
3 years ago

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.

#11 @biskobe
3 years ago

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.

#12 @afercia
3 years ago

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

#13 @westonruter
3 years ago

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.

#14 @westonruter
3 years ago

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.

#15 @westonruter
3 years ago

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.

#16 @westonruter
3 years ago

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.

Note: See TracTickets for help on using tickets.