• streamworksaudio

    (@streamworksaudio)


    I am not sure this plugin is being supported or furthered worked on, however I was wondering if there is a way to add ‘autocomplete’ to a code field? I know that when enabling the built in Codemirror on WordPress text fields the auto complete is on. However this is now option with this plugin to do that.

    Possible?

    Cheers!

Viewing 2 replies - 1 through 2 (of 2 total)
  • EdwardN

    (@edwardn)

    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.

    Thread Starter streamworksaudio

    (@streamworksaudio)

    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!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Auto complete’ is closed to new replies.