Customizer code editor CSS breaks on activate() (Or breaks when loaded later)

[vukvukovich]

I've added css editor via WP_Customize_Code_Editor_Control() which is hidden by default with provided active_callback.

When activating control via JS in Customizer ex: wp.customize.control('my_custom_css').activate(); it shows, but CodeMirror CSS is broken.

[vukvukovich]

CSS broken on activated control via JS on some event

[vukvukovich]

loaded normally without active_callback arg.

[dlh]

Hi @vukvukovich, and welcome to WordPress Trac! Thanks for the ticket.

Are you able to provide a code sample that can be used to replicate this bug?

[vukvukovich]

Plugin with all of the code needed for reproducing the bug.

[vukvukovich]

Replying to dlh:

Hi @vukvukovich, and welcome to WordPress Trac! Thanks for the ticket.

Are you able to provide a code sample that can be used to replicate this bug?

Sure. I've uploaded simple plugin with complete code needed for reproducing the bug.

[vukvukovich]

@dlh Little update. I've loaded CodeMirror manually to plain textarea control with wp.codeEditor.initialize() and it works properly if textarea is activated before and then CodeMirror instantiated. Vice versa bug occurs. I guess it is just a loading priority issue.

[dlh]

Thanks so much for that sample plugin, @vukvukovich!

This situation looks similar to me to a bug report in the CodeMirror repo: ​https://github.com/codemirror/CodeMirror/issues/61. The issue there was closed with a pointer to ​CodeMirror's .refresh() method.

I've taken that and attempted to apply it to the CodeEditorControl in 48902.diff​: If the control is not yet active even when its parent section is active, codemirror.refresh() is called the first time the control becomes active.

@vukvukovich, would you be able to test the patch?

[dlh]

I meant to also say why the refresh() method seemed promising from the CodeMirror docs, as currently written:

If your code does something to change the size of the editor element (window resizes are already listened for), or unhides it, you should probably follow up by calling this method to ensure CodeMirror is still looking as intended.

(My emphasis.)