<link rel="stylesheet" href="<?php echo get_app_info('path');?>/js/ckeditor/plugins/codemirror/css/codemirror.min.css?11">
<?php if($dark_mode):?>
<link rel="stylesheet" href="<?php echo get_app_info('path');?>/js/ckeditor/plugins/codemirror/theme/monokai.css?11">
<?php endif;?>
<script src="<?php echo get_app_info('path');?>/js/ckeditor/plugins/codemirror/js/codemirror.min.js?11"></script>
<script src="<?php echo get_app_info('path');?>/js/ckeditor/plugins/codemirror/js/codemirror.mode.htmlmixed.min.js?11"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var textarea = document.getElementById('html');
		if (!textarea || typeof CodeMirror === 'undefined') return;
		
		var $textarea = $(textarea);
		var editorHeight = Math.max($textarea.outerHeight() || 0, 260);
		var htmlCodeEditor = CodeMirror.fromTextArea(textarea, {
			mode: 'htmlmixed',
			lineNumbers: true,
			lineWrapping: true,
			indentUnit: 2,
			tabSize: 2,
			theme: '<?php echo $dark_mode ? 'monokai' : 'default';?>'
		});
		
		htmlCodeEditor.setSize(null, editorHeight + 'px');
		htmlCodeEditor.on('change', function(editor) {
			editor.save();
		});
		htmlCodeEditor.on('blur', function(editor) {
			editor.save();
		});
		
		window.sendyPlainHtmlEditor = htmlCodeEditor;
		window.SendySyncPlainHtmlEditor = function() {
			if (window.sendyPlainHtmlEditor) {
				window.sendyPlainHtmlEditor.save();
				return window.sendyPlainHtmlEditor.getValue();
			}
			
			return textarea.value;
		};
		
		$textarea.closest('form').off('submit.sendy-plain-html').on('submit.sendy-plain-html', function() {
			var validator = $(this).data('validator');
			if (validator) validator.settings.ignore = ':hidden:not(#html)';
			window.SendySyncPlainHtmlEditor();
		});
		
		window.setTimeout(function() {
			var validator = $textarea.closest('form').data('validator');
			if (validator) validator.settings.ignore = ':hidden:not(#html)';
		}, 0);
	});
</script>
