Code Editor: Cursor jumps to end of file upon focus in the "contenteditable" inputStyle for CodeMirror in Additional CSS

[westonruter]

In the editor which appears in the Customizer for the Additional CSS feature, when you click on the editor to focus and set the cursor on a given line, it will focus but then put the cursor at the end of the editor without scrolling to that position. Sometimes it will even add the active-line style to where you clicked, but the cursor is at the bottom. Every time you blur the editor an then focus back into the editor, the cursor will get moved to the end of the file.

Of note, this issue can be observed exclusively in the editor for Additional CSS in the Customizer. It is not present on the theme/plugin editors. It is not even present for the code editor in the Custom HTML widget in the Customizer either. There seems to be something specifically about the Additional CSS editor.

This issue appears when CodeMirror is configured with a 'contenteditable' inputStyle, which it is by default in core for the sake of a11y. Per the CodeMirror ​docs on inputStyle:

Selects the way CodeMirror handles input and focus. The core library defines the "textarea" and "contenteditable" input models. On mobile browsers, the default is "contenteditable". On desktop browsers, the default is "textarea". Support for IME and screen readers is better in the "contenteditable" model. The intention is to make it the default on modern desktop browsers in the future.

If the inputStyle is changed from 'contenteditable' to 'textarea' then the issue goes away. This change:

src/wp-includes/general-template.php

@@ -3142 +3142 @@
                 'codemirror' => array(
                         'indentUnit' => 4,
                         'indentWithTabs' => true,
-                        'inputStyle' => 'contenteditable',
+                        'inputStyle' => 'textarea',
                         'lineNumbers' => true,
                         'lineWrapping' => true,
                         'styleActiveLine' => true,

However, since the inputSyle of 'contenteditable' improves accessibility, I'm wary to make this change.

Videos that depict the issue with the contenteditable inputStyle and how it is not present for the textarea inputStyle:

FAIL (inputStyle=contenteditable): ​https://youtu.be/uSFJqf_zwFw
PASS (inputStyle=textarea): ​https://youtu.be/CqMLObojkVU

[westonruter]

Opened an issue upstream in CodeMirror: ​https://github.com/codemirror/CodeMirror/issues/4975

[westonruter]

Bumping priority to high for visibility and alignment with 4.9 goals, and given proximity to beta 1 deadline.

[westonruter]

I believe the cause has been identified by @afercia in #41872:

When clicking on the label it should focus on the CodeMirror editor.

Trying this on the Additional CSS, focus always goes to the last line (and if the content is very long, it's out of view). Seems to me because of:

			// Refresh when receiving focus.
			control.editor.codemirror.on( 'focus', function( codemirror ) {
				codemirror.refresh();
			});

Is this really necessary? And why it is used only for the Additional CSS and not for the other CodeMirror instances? If there are no particular reasons, I'd consider to remove it.

I do think actually that codemirror.refresh() is obsolete because we are already ensuring the textarea is synced.

[westonruter]

In 41582:

Customize: Remove unnecessary call to refresh() a CodeMirror instance upon focus in Code Editor control.

This also fixes an issue with the cursor not being set in the expected location with an inputStyle=contenteditable.

Props afercia.
See #41897.
Fixes #41900.