JSFiddle - React, Tailwind, and code Playground

by Myles McNamara

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"></script>
<h2>
  Ace Editor Shortcode Syntax Errors
</h2>
<p>
 Looking for help to extend PHP mode to support shortcodes (single) and open/close shortcodes.
</p>
<p>
<a href="https://github.com/ajaxorg/ace/wiki/Creating-or-Extending-an-Edit-Mode" target="_blank">https://github.com/ajaxorg/ace/wiki/Creating-or-Extending-an-Edit-Mode</a>
</p>
<p>
Regex used for shortcodes on backend to replace with user input value, or empty string, is:
<pre>
<code>
	\[(\[?)(get_input|check_question)(?![\w-])([^\]\/]*(?:\/(?!\])[^\]\/]*)*?)(?:(\/)\]|\](?:([^\[]*+(?:\[(?!\/\2\])[^\[]*+)*+)\[\/\2\])?)(\]?)
</code>
</pre>
</p>
<br/>
<hr/>

<div id="editor">function foo( $title ) {

	// Example single shortcode (without closing shortcode), [...] will be replaced with "Some value entered by user"
	$site_name = [get_input type="text" desc="Please enter the site name"];

	// Example with open closing shortcodes
	[check_question question="Do you want to add period to the end of the title?"]
		$title .= '.';
	[/check_question]
    
	$title = ucfirst( $title );
	
    return $title;
}</div>

CSS

body {
  margin: 40px;
}

#editor {
  height: 300px;
}

JavaScript

var editor = ace.edit( "editor" );

editor.setTheme("ace/theme/monokai");
// inline must be true to syntax highlight PHP without opening <?php tag
editor.getSession().setMode( { path: "ace/mode/php", inline: true } );

	// enable autocompletion and snippets
	editor.setOptions( {
		                 enableBasicAutocompletion: true,
		                 enableSnippets           : true,
		                 enableLiveAutocompletion : false
	                 } );