rhyskeepence/codemirror.html

## codemirror.html
<html>
<head>
    <link rel="stylesheet" href="codemirror/lib/codemirror.css">
    <link rel="stylesheet" href="codemirror/addon/lint/lint.css">
    <link rel="stylesheet" href="codemirror/addon/dialog/dialog.css">

    <script src="codemirror/lib/codemirror.js"></script>

    <script src="codemirror/addon/lint/lint.js"></script>

    <style type="text/css">
      .CodeMirror {border: 1px solid black; }
      .CodeMirror-empty { outline: 1px solid #c22; }
      .gretl-valid {color: #170;}
      .gretl-invalid {color: #a11;}
    </style>
</head>
<body>
    <div id="hintStatus"></div>
    <div><textarea id="code" name="code" placeholder="GRETL">
eur 50mmm 01jul2010 01jan2020
pay 4.42% act/act icma f unadj lf
rec 6me+18bps lf
long cancel 3jul2015 interval 10y notification 7b
    </textarea></div>
</body>
<script type="text/javascript">
    function notification(cm, template) {
      var wrap = cm.getWrapperElement();
      var dialog = wrap.appendChild(document.createElement("div"));
      dialog.className = "CodeMirror-dialog CodeMirror-dialog-bottom";
      dialog.innerHTML = template;
      return dialog;
    }

    CodeMirror.remoteValidator = function(cm, updateLinting, options) {
        var text = cm.getValue();

        if(text.trim() == "")
        {
            updateLinting(cm, []);
            return;
        }

        var fakeResponse = "GRETL not valid\n\nValid monetary shortcuts are K, MM, BN, TN at line 1 position 3\n\n" + text;
        var arr = fakeResponse.match(/(.*) at line (\d+) position (\d+)/);
        var message = arr[1];
        var line = parseInt(arr[2]);
        var position = parseInt(arr[3]);

        var found = [];

        found.push({
            from: CodeMirror.Pos(line - 1, position),
            to: CodeMirror.Pos(line - 1, position + 1),
            message: message,
            severity: 'error'
        });
        updateLinting(cm, found);
    }

    var displayGretlValidationResult = function(annotations, annotationsGroupedByLine, cm) {
      if (annotations.length > 0)
        notification(cm, '<span class="gretl-invalid">GRETL is not valid: ' + annotations[0].message + '</span>');
      else
        notification(cm, '<span class="gretl-valid">GRETL is valid</span>');
    }


    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        mode: "json",
        lineNumbers: true,
        gutters: ["CodeMirror-lint-markers"],
        extraKeys: {
            Tab: false
        },
        lintWith: {
            "getAnnotations": CodeMirror.remoteValidator,
            "async": true,
            "tooltips": false,
            "onUpdateLinting" : displayGretlValidationResult
        }
    });
</script>
</html>
	<html>
	<head>
	<link rel="stylesheet" href="codemirror/lib/codemirror.css">
	<link rel="stylesheet" href="codemirror/addon/lint/lint.css">
	<link rel="stylesheet" href="codemirror/addon/dialog/dialog.css">

	<script src="codemirror/lib/codemirror.js"></script>

	<script src="codemirror/addon/lint/lint.js"></script>

	<style type="text/css">
	.CodeMirror {border: 1px solid black; }
	.CodeMirror-empty { outline: 1px solid #c22; }
	.gretl-valid {color: #170;}
	.gretl-invalid {color: #a11;}
	</style>
	</head>
	<body>
	<div id="hintStatus"></div>
	<div><textarea id="code" name="code" placeholder="GRETL">
	eur 50mmm 01jul2010 01jan2020
	pay 4.42% act/act icma f unadj lf
	rec 6me+18bps lf
	long cancel 3jul2015 interval 10y notification 7b
	</textarea></div>
	</body>
	<script type="text/javascript">
	function notification(cm, template) {
	var wrap = cm.getWrapperElement();
	var dialog = wrap.appendChild(document.createElement("div"));
	dialog.className = "CodeMirror-dialog CodeMirror-dialog-bottom";
	dialog.innerHTML = template;
	return dialog;
	}

	CodeMirror.remoteValidator = function(cm, updateLinting, options) {
	var text = cm.getValue();

	if(text.trim() == "")
	{
	updateLinting(cm, []);
	return;
	}

	var fakeResponse = "GRETL not valid\n\nValid monetary shortcuts are K, MM, BN, TN at line 1 position 3\n\n" + text;
	var arr = fakeResponse.match(/(.*) at line (\d+) position (\d+)/);
	var message = arr[1];
	var line = parseInt(arr[2]);
	var position = parseInt(arr[3]);

	var found = [];

	found.push({
	from: CodeMirror.Pos(line - 1, position),
	to: CodeMirror.Pos(line - 1, position + 1),
	message: message,
	severity: 'error'
	});
	updateLinting(cm, found);
	}

	var displayGretlValidationResult = function(annotations, annotationsGroupedByLine, cm) {
	if (annotations.length > 0)
	notification(cm, '<span class="gretl-invalid">GRETL is not valid: ' + annotations[0].message + '</span>');
	else
	notification(cm, '<span class="gretl-valid">GRETL is valid</span>');
	}


	var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
	mode: "json",
	lineNumbers: true,
	gutters: ["CodeMirror-lint-markers"],
	extraKeys: {
	Tab: false
	},
	lintWith: {
	"getAnnotations": CodeMirror.remoteValidator,
	"async": true,
	"tooltips": false,
	"onUpdateLinting" : displayGretlValidationResult
	}
	});
	</script>
	</html>