Allow passing in argv array instead of cmdline

Inspired by Discipulus from PerlMonks :-)

web/democode/demo.html

@@ -118,7 +118,28 @@ document.getElementById('perl1').src =
 <!-- The following example demonstrates (almost) all of the possible
 options that can be passed to the editor.
 
-The "cmdline" supports only very basic quoting constructs.
+The "cmdline" option and the corresponding input box in the editor
+only support very basic quoting constructs:
+- Strings in double quotes may contain whitespace, \\, and/or \",
+  the latter two will be changed to \ and " respectively;
+- strings in single quotes may contain whitespace, \\, and/or \',
+  the latter two will be changed to \ and ' respectively;
+- other strings (without whitespace) will not be modified.
+Note: As a consequence of these rules, inside of single or double
+quotes, both \\n and \n resolve to \n (for any character "n" that
+is not a backslash or single resp. double quote).
+
+Instead of "cmdline", you may specify "argv" as an array ("cmdline"
+overrides "argv"). This array should *not* include "perl" as the
+first element; this is added automatically.
+
+So that it can be displayed in the input box, the "argv" array
+will be encoded into a single string - this means that if you want
+full control over the formatting of the command line as it is
+displayed to the user in the editor, use "cmdline" instead. The
+"Copy JSON" data will include both "cmdline" and "argv" (so you
+can choose to delete whichever one you don't need), while "Copy
+URL" will include only "cmdline" (for brevity).
 
 You may specify the text of a script via "script", or, alternatively,
 a "script_url" from which the script is to be fetched - however, be
@@ -156,7 +177,7 @@ they would be on the console.
 <script>
 document.getElementById('perl2').src =
 	"perleditor.html#" + encodeURIComponent(JSON.stringify( {
-		cmdline: "perl devoweler.pl mytext.txt other.txt",
+		argv: ["devoweler.pl","mytext.txt","other.txt"],
 		script: "use warnings;\nuse strict;\n\nopen my $vfh, '>', 'vowels.txt' or die $!;\n"
 			+"while (<>) {\n\tprint $vfh $1 while s/([aeiou])/_/i;\n\tprint;\n}\nclose $vfh;",
 		script_fn: "devoweler.pl",

web/democode/perleditor.html

@@ -163,9 +163,22 @@ function parseCmdLine(str) {
 		     if (typeof match[1] != 'undefined') argv.push(match[1].replace(/\\\\/g,"\\").replace(/\\"/g,"\""));
 		else if (typeof match[2] != 'undefined') argv.push(match[2].replace(/\\\\/g,'\\').replace(/\\'/g,'\''));
 		else if (typeof match[3] != 'undefined') argv.push(match[3]);
+		else throw "Unexpected match "+match;
 	}
 	return argv;
 }
+function encodeCmdLine(arr) {
+	var out = [];
+	for (var i=0; i<arr.length; i++) {
+		/* Note: we only *need* to encode strings if they contain /[\s'"\\]/,
+		 * but since we want to show the users a command line similar to a shell,
+		 * I've added $ */
+		out.push( arr[i].match(/[\s'"\\\$]/)
+			? "'"+arr[i].replace(/\\/g, "\\\\").replace(/'/g, "\\'")+"'"
+			: arr[i] );
+	}
+	return out.join(' ');
+}
 
 function fetchUrl(url,cm) { // fetch the contents of a URL into a CodeMirror instance
 	cm.setValue("Fetching URL\n"+url+"\nPlease wait...");
@@ -284,6 +297,18 @@ function setupInputFile (inp) {
 
 function getFileData () {
 	var filedata = {};
+	// command-line args
+	filedata.cmdline = $('#argv').val();
+	var argv = parseCmdLine( filedata.cmdline );
+	if ( argv.length<1 || argv[0]!="perl" ) {
+		$('#runnererrors>pre').text('Invalid command line, command must be "perl"');
+		$('#runnererrors').show();
+		return;
+	} // else
+	argv.shift();
+	$('#runnererrors>pre').text('');
+	$('#runnererrors').hide();
+	filedata.argv = argv;
 	// script
 	var scriptdiv = $('#script');
 	if (scriptdiv.is(':visible')) {
@@ -360,6 +385,8 @@ $(function () {
 	});
 	if (hash["cmdline"])
 		argv_inp.val(hash.cmdline);
+	else if (hash["argv"])
+		argv_inp.val("perl "+encodeCmdLine(hash.argv));
 	argv_inp.trigger('input');
 	
 	// input files
@@ -394,18 +421,9 @@ $(function () {
 	// "run perl" button
 	$('#runperl').click( function () {
 		clearStdOutput();
-		// command-line args
-		var argv = parseCmdLine(argv_inp.val());
-		if (argv.length<1 || argv[0]!="perl") {
-			$('#runnererrors>pre').text('Invalid command line, command must be "perl"');
-			$('#runnererrors').show();
-			return;
-		} // else
-		argv.shift();
-		$('#runnererrors>pre').text('');
-		$('#runnererrors').hide();
 		var rp_data = getFileData();
-		rp_data.argv = argv;
+		if (!rp_data) return;
+		delete rp_data.cmdline;
 		// send message to runner
 		buttonBlockers.runnerState = 1;
 		updateButtonState();
@@ -417,14 +435,15 @@ $(function () {
 	// "copy url / json" function
 	$('#copyurl').click(function () {
 		var data = getFileData();
-		data.cmdline = $('#argv').val();
+		if (!data) return;
+		delete data.argv;
 		var loc = new URL(window.location);
 		loc.hash = encodeURIComponent(JSON.stringify(data));
 		copyit(loc);
 	});
 	$('#copyjson').click(function () {
 		var data = getFileData();
-		data.cmdline = $('#argv').val();
+		if (!data) return;
 		copyit(JSON.stringify(data, null, "\t"));
 	});