Auto complete

I too struggled with this and the fact it does not display properly in blocks – the theme gets lost.

In the end I implemented my own solution, which displays in blocks and autocomplete works fine:

1. Enqueue a javascript file for the backend only:

add_action('admin_enqueue_scripts','cm_load_admin_script');
function cm_load_admin_script( $hook ){
	wp_enqueue_script(
		'cm_admin_script', //unique handle
		get_template_directory_uri().'/path-to/cm-admin-scripts.js', //location
		array('jquery')  //dependencies
	);
}

2. Load the WP codemirror assets – this just makes sure we have all the assets we need for cm-admin-scripts.js to work:

add_action('admin_enqueue_scripts', 'codemirror_enqueue_scripts');

function codemirror_enqueue_scripts($hook) {
	$cm_settings_scss['codeEditor'] = wp_enqueue_code_editor(array('type' => 'text/x-scss'));

	wp_localize_script('jquery', 'cm_settings_scss', $cm_settings_scss);
	wp_enqueue_script('wp-theme-plugin-editor');
	wp_enqueue_style('wp-codemirror');
}

3. We need cm-admin-scripts.js to setup different editor types. This is where the magic happens. Add one of these classes to an acf textarea field: html-editor, scss-editor or js-editor:

jQuery(document).ready(function ($) {

    function initCodeMirrors() {
        $('.scss-editor textarea').each(function (e) {
            let editorSettings = wp.codeEditor.defaultSettings ? _.clone(wp.codeEditor.defaultSettings) : {};
            editorSettings.codemirror = _.extend(
                {},
                editorSettings.codemirror,
                {
                    indentUnit: 2,
                    tabSize: 2,
                    mode: 'text/x-scss',
                    autoRefresh: true,
                }
            );
            wp.codeEditor.initialize($(this), editorSettings);
        });

        $('.html-editor textarea').each(function (e) {
            let editorSettings = wp.codeEditor.defaultSettings ? _.clone(wp.codeEditor.defaultSettings) : {};
            editorSettings.codemirror = _.extend(
                {},
                editorSettings.codemirror,
                {
                    indentUnit: 2,
                    tabSize: 2,
                    mode: 'htmlmixed',
                    autoRefresh: true,
                }
            );
            wp.codeEditor.initialize($(this), editorSettings);
        });

        $('.js-editor textarea').each(function (e) {
            window.console.log('setting up js codeMirror');
            let editorSettings = wp.codeEditor.defaultSettings ? _.clone(wp.codeEditor.defaultSettings) : {};
            editorSettings.codemirror = _.extend(
                {},
                editorSettings.codemirror,
                {
                    indentUnit: 2,
                    tabSize: 2,
                    mode: 'javascript',
                    autoRefresh: true,
                }
            );
            wp.codeEditor.initialize($(this), editorSettings);
        });
    }
if (window.acf) {
        window.acf.addAction('load', initCodeMirrors);
    }

});

This works for blocks the first time the page is loaded. It needs more work to get it to work for blocks as they are added to a page. If you are not using blocks then it should work just fine. I have a hack to refresh all codemirrors on a timer, checking to see if the texarea is visible or not:

function refreshCodeMirrors() {
        $('.scss-editor textarea').each(function (e) {
            if ($(this).is(':visible')) {
                let editorSettings = wp.codeEditor.defaultSettings ? _.clone(wp.codeEditor.defaultSettings) : {};
                editorSettings.codemirror = _.extend(
                    {},
                    editorSettings.codemirror,
                    {
                        indentUnit: 2,
                        tabSize: 2,
                        mode: 'text/x-scss',
                        autoRefresh: true,
                    }
                );
                wp.codeEditor.initialize($(this), editorSettings);
            }
        }); ...
setInterval(refreshCodeMirrors,1000);

But it is ugly. Gutenberg does not fire any js events, so no way of knowing via js if a block has been added. If anyone knows how to handle this more elegantly I would like to know.

There is a plugin which changes the default theme for all codemirror editors site-wide here: https://www.ads-software.com/plugins/wp-codemirror-themes/

Not sure if this plugin is still maintained – but it should give you an idea of how codemirror works in WordPress.

Thanks for the info! I have written similar code to apply Codemirror (using the version that comes with the WP core) to text fields that were created in custom metaboxes, I could not find out, however, how to apply CodeMirror themes to these textareas however (only the default wordpress codemirror theme).

Reading the CodeMirror documentation, I see…

“CodeMirror is a code-editor component that can be embedded in Web pages. The core library provides only the editor component, no accompanying buttons, auto-completion, or other IDE functionality.”

So perhaps this plugin is loading only the core of CodeMirror (i.e no auto-complete).

Might be best in the long run then to create my own Metaboxes and Textfields and apply CodeMirror to them. But for now, I guess this plugin (and the basic core of CodeMirror) will have to do. I will revisit the idea of making my own boxes/fields when time permits.

Cheers!