Editor: have cursor remember position when switching between Visual and HTML #8592

Closed
KokkieH opened this Issue Oct 7, 2016 · 6 comments

Comments

Projects
None yet
5 participants
@KokkieH

KokkieH commented Oct 7, 2016

Steps to reproduce

  1. Starting at URL: https://wordpress.com/post
  2. Create a new post and add some content in the visual editor.
  3. Position the cursor at a specific point in the post.
  4. Switch to the HTML editor

What I expected

That the cursor would be at the position it was when I switched editors, so I can easily edit the relevant section's HTML

What happened instead

The cursor jumped to the top of the post, meaning I'd have to search again for the section I need to edit.

Browser / OS version

Happens across browsers and OS's

Screenshot / Video

html

Context / Source

This was reported by a user via Twitter. In very long posts or posts with complex HTML formatting the current behaviour leads to a very cumbersome editing experience. Making the cursor "stick" when switching editors can make a big difference to users who regularly edit content using both views.

Edited to add: The highlighting in the video is just for emphasis. The cursor jumps to the top regardless of whether text is highlighted or not.

@lancewillett

This comment has been minimized.

Show comment
Hide comment
@lancewillett

lancewillett Mar 1, 2017

Member

In Visual mode, I would like to place my cursor where I want to edit the html, and when I select the HTML tab, the cursor is at the relevant spot in HTML – and vice-versa

Suggestion in 3083258-t

Member

lancewillett commented Mar 1, 2017

In Visual mode, I would like to place my cursor where I want to edit the html, and when I select the HTML tab, the cursor is at the relevant spot in HTML – and vice-versa

Suggestion in 3083258-t

@lancewillett

This comment has been minimized.

Show comment
Hide comment
@lancewillett

lancewillett Mar 1, 2017

Member

Anecdotal flowsharing from @ryanboren

The wp-admin editor keeps the Visual and Text tabs visible on screen when vscrolling. I can switch between the two without losing cursor position in the Visual tab. This is a big deal for me, as I often switch between the two modes to work around editor bugs and add ids to headers.

Member

lancewillett commented Mar 1, 2017

Anecdotal flowsharing from @ryanboren

The wp-admin editor keeps the Visual and Text tabs visible on screen when vscrolling. I can switch between the two without losing cursor position in the Visual tab. This is a big deal for me, as I often switch between the two modes to work around editor bugs and add ids to headers.

@ryanboren

This comment has been minimized.

Show comment
Hide comment
@ryanboren

ryanboren Mar 3, 2017

Contributor

I call this #scroll-scan-correlate flow.

  • Switch tabs
  • Scroll down
  • Scan for where you were in the other tab
  • Correlate back and forth between the two tabs

I also experience this in media pickers that don't provide images accessible to my presbyopic eyes. Scroll, scan, correlate is physically and mentally tedious and smashes my cognitive stack. I'll forget what I was doing while doing the scan-and-correlate context gymnastics.

https://test.wordpress.com/2016/05/13/full-width-media-views-during-selection/
https://test.wordpress.com/tag/scroll-scan-correlate/

Contributor

ryanboren commented Mar 3, 2017

I call this #scroll-scan-correlate flow.

  • Switch tabs
  • Scroll down
  • Scan for where you were in the other tab
  • Correlate back and forth between the two tabs

I also experience this in media pickers that don't provide images accessible to my presbyopic eyes. Scroll, scan, correlate is physically and mentally tedious and smashes my cognitive stack. I'll forget what I was doing while doing the scan-and-correlate context gymnastics.

https://test.wordpress.com/2016/05/13/full-width-media-views-during-selection/
https://test.wordpress.com/tag/scroll-scan-correlate/

@designsimply

This comment has been minimized.

Show comment
Hide comment
@designsimply

designsimply May 30, 2017

Contributor

Notes from https://horizonfeedback.wordpress.com/2017/03/03/call-for-testing-calypso-html-toolbar/#comment-343

I am glad I can insert images in HTML mode because that gives me more control over where they actually appear. (Images I insert in Visual mode often must be moved in HTML mode.) On the other hand, I always want to override the default alignment. If I am not sure how to tweak the HTML attributes directly, I can switch to the Visual tab. But I need to find the image again on the Visual tab. I realize that it would be tough to maintain a tight correlation between editing cursor positions on the HTML and Visual tabs, but it would be helpful if the cursor position in one tab could be *approximated* when switching to the other.
Contributor

designsimply commented May 30, 2017

Notes from https://horizonfeedback.wordpress.com/2017/03/03/call-for-testing-calypso-html-toolbar/#comment-343

I am glad I can insert images in HTML mode because that gives me more control over where they actually appear. (Images I insert in Visual mode often must be moved in HTML mode.) On the other hand, I always want to override the default alignment. If I am not sure how to tweak the HTML attributes directly, I can switch to the Visual tab. But I need to find the image again on the Visual tab. I realize that it would be tough to maintain a tight correlation between editing cursor positions on the HTML and Visual tabs, but it would be helpful if the cursor position in one tab could be *approximated* when switching to the other.
@lancewillett

This comment has been minimized.

Show comment
Hide comment
@lancewillett

lancewillett Sep 4, 2017

Member

This fix is in-progress! #17481 (comment)

Member

lancewillett commented Sep 4, 2017

This fix is in-progress! #17481 (comment)

@lancewillett

This comment has been minimized.

Show comment
Hide comment
@lancewillett

lancewillett Sep 28, 2017

Member

Closing with #17481

Member

lancewillett commented Sep 28, 2017

Closing with #17481

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment