CodeMirror in Customize - copy & paste bug

[dionysous]

Wrong behavior in CodeMirror:
I go to Customize > Additional CSS and copy one selector including the opening curly bracket "{". I paste the copied text at the end of the content of the CSS textarea and press enter to create a new line. The new line won't be created, instead Autocompletion of CodeMirror is executed and the CSS attribute align-content is added.

Animated screen capture as GIF:
​https://hipp.design/media/code-mirror-copy-paste.gif

It only happens, when the selector is pasted at the end (of the textarea) and if the CSS field was already filled out and the Customize have been saved before.

[SergeyBiryukov]

Hi @dionysous, welcome to WordPress Trac! Thanks for the report.

I could not reproduce the issue on a clean install with Opera 55 (Windows 10).

1. Does it happen in CodeMirror demos on ​https://codemirror.net?
2. Which browser are you using?

[dionysous]

Hello @SergeyBiryukov ,

thank you for trying. Try copying this CSS code:

.class .class-2 #id-here {

}

...and save the Customize options then. Reload the Customize.
Paste only this after the saved CSS code:

.class .class-2 #id-here {

The cursor/focus should be after the openin {. Next press enter key. Then the align-content suggestion should appear.

It happened for users on Windows, e.g. on Chrome or Firefox.

I could reproduce it now in Safari (latest) and Google Chrome (latest) on MacOS, but we have users/webdesigners, which reported us the problem on Windows systems.

Can you reproduce the bug now?

[pento]

Thank you for the additional information, @dionysous!

I'm able to reproduce this bug consistently. In order to reproduce it, you need to to paste with Cmd+V, and release the Cmd key before releasing V.

In code-editor.js, in the wp.codeEditor.initialize function, the keyup event is deciding to show the autocomplete dropdown because isAlphaKey is true.

44820.2.diff​ fixes this issue, but I suspect that JS and HTML editing will have similar issues, too.

[zackpyle]

How is this still not fixed 4 years later?

[SirLouen]

Replying to SergeyBiryukov:

1. Does it happen in CodeMirror demos on ​https://codemirror.net?

This is a problem in CodeMirror, I've been able to replicate it in the demo

Testing Instructions

1. Add this code ​to the demo, and copy the shared URL

.class .class-2 #id-here {

}

Important the last space in the code

Or use this URL: ​https://codemirror.net/try/#c=LmNsYXNzIC5jbGFzcy0yICNpZC1oZXJlIHsKCn0K

2. Then open the Shared URL and copy this code: .class .class-2 #id-here {
3. 🐞 It will jump

The right thing here is to report upstream this error to CodeMirror. But since Customizer is in Maintenance mode, I'm not sure if we are going to be willing to support a forked static version of CodeMirror forever.

Replying to zackpyle:

How is this still not fixed 4 years later?

TLTR; Its a CodeMirror issue and as said, Customizer entered this maintenace mode long time ago. Given that this is happening in upstream system, and it doesn't seem to be a major bug, its unlikely this will ever get fixed. My recommendation is that you stop using Customizer's CSS editor and move all the CSS code you have there to a supported place.

Conclusion

I'm not sure if this could be considered a bug or an enhancement but ultimately is a very low-key bug that is happening upstream also, so I doubt it has been considered relevant at all. I'm proposing this as a close, wontfix

[SirLouen]

​I've reported upstream just in case anyone in the future is willing to sort this

[SirLouen]

Combined Bug Reproduction and Patch Test Report

Description

✅ This report validates that the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/44820/44820.2.diff

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.29.0
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 137.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-One 2.5
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Reproduction Instructions

1. The instructions provided here worked for me
2. 🐞 align-content always pop as the default suggestion, instead of letting just do an Enter to start writing code for such selector.

Actual Results

1. ✅ Issue resolved with patch.

Additional Notes

• I was looking the wrong way: For some reason, reading through the original report, I thought that the automatic "new line" when adding the code was actually the problem being reported, instead of the align-content suggestion that pops afterwards. Furthermore, for some reason, this is not happening consistently but happens pretty frequently.

• With this in mind, this is not occurring upstream, only here in WP and the patch happens to solve this.