Bricks + Ace.js (instead of CodeMirror)

Developers
1

Hey. I’m looking for a way to replace CodeMirror inside Bricks with Ace.js. Right now I’m thinking about destroying CodeMirror instance and then initializing Ace there. But maybe you can guide me in a more proper direction?

For destroy & init thingy, I need to know how can I catch Js event for “bricks editor loaded”?

Btw. I already attached Ace in WP Dashboard → Bricks → Settings → Custom Code. And I love it so far. Here’s how I did it (PHP):

if (is_admin()) {
	if (isset($_GET['page']) and $_GET['page'] == 'bricks-settings') {
		wp_enqueue_script(
			'ace',
			'https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.5/ace.js',
			array('jquery'),
			'1.2.5',
			true
		);
		
		wp_enqueue_script(
			'ace-language-tools',
			'https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.5/ext-language_tools.js',
			array('ace'),
			'1.2.5',
			true
		);
		
		wp_enqueue_script(
			'ace-hook',
			'/wp-content/themes/bricks-child/heavy/js/ace-hook.js',
			array('ace-language-tools'),
			'1',
			true
		);
	}
}

And here’s ace-hook.js:

(function ($) {
$(document).ready( function () {
	// init ace editor
	function initAceEditor(aceEditorSelector, mode) {
		let aceEditor;
		const aceEditorObj = $(aceEditorSelector);
		if (!aceEditorObj.length) {
			return;
		}

		if (aceEditorObj.hasClass('.ace_editor')) {
			return;
		}

		const wrapper = aceEditorObj.parents('td').first();
		const aceEditorClone = aceEditorObj.clone();

		aceEditor = ace.edit(aceEditorSelector.replace('#', ''));
		aceEditor.setTheme("ace/theme/merbivore_soft");
		aceEditor.setOptions({
			showGutter: true,
			useWorker: true,
			enableBasicAutocompletion: true,
			enableLiveAutocompletion: true,
			fontSize: "14px",
			mode: "ace/mode/"+mode
		});

		aceEditor.on('change', function() {
			$(aceEditorSelector).val(aceEditor.getSession().getValue());
		});

		const offset = $('#wpadminbar').height();
		wrapper.find('pre').first().css('height', 'calc(100vh - '+offset+'px)').attr('data-txa', aceEditorSelector);
		aceEditor.resize();

		aceEditorClone.css('display', 'none');
		wrapper.append(aceEditorClone);
	}

	if ($('#tab-custom-code').length) {
		$('#tab-custom-code tbody tr').each(function () {
			const label = $(this).find('th');
			if (label.length) {
				$(this).find('td').prepend('<h3>'+label.text()+'</h3>');
				label.remove();
			}
		});

		$('form#bricks-settings').css('max-width', 'none');

		initAceEditor('#customCss', 'css');
		initAceEditor('#customScriptsHeader', 'javascript');
		initAceEditor('#customScriptsBodyHeader', 'javascript');
		initAceEditor('#customScriptsBodyHeader', 'javascript');
		initAceEditor('#customScriptsBodyFooter', 'javascript');
	}
});
}(jQuery));
1 Like