From 0bb1588f22ff5d7e808eb5e27a4cc4904b882ea5 Mon Sep 17 00:00:00 2001
From: Fletcher Hazlehurst <fletcher.haz@gmail.com>
Date: Tue, 15 Dec 2020 12:22:22 -0700
Subject: [PATCH] Use Ace for Run JavaScript code editor

Closes #1928
---
 chrome/content/zotero/runJS.html     |  8 ++++++--
 chrome/content/zotero/runJS.js       | 17 +++++++++++++++--
 chrome/skin/default/zotero/runJS.css |  6 +++++-
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/chrome/content/zotero/runJS.html b/chrome/content/zotero/runJS.html
index f135d819c1..6c9828ae48 100644
--- a/chrome/content/zotero/runJS.html
+++ b/chrome/content/zotero/runJS.html
@@ -13,13 +13,17 @@
 		<main>
 			<div class="textbox-container">
 				<div class="textbox-header">
-					<label class="textbox-label" for="code">Code:</label>
+					<label class="textbox-label" for="editor-code">Code:</label>
 					<label id="run-as-async-label" for="run-as-async">
 						<input id="run-as-async" type="checkbox" onclick="update()">
 						Run as async function
 					</label>
 				</div>
-				<textarea id="code" oninput="handleInput()"></textarea>
+				<iframe
+						src="chrome://zotero/content/ace.html"
+						id="editor-code"
+						class="editor-code"
+				></iframe>
 			</div>
 			
 			<div class="textbox-container">
diff --git a/chrome/content/zotero/runJS.js b/chrome/content/zotero/runJS.js
index 0a9703e0e4..1c48af1b18 100644
--- a/chrome/content/zotero/runJS.js
+++ b/chrome/content/zotero/runJS.js
@@ -10,7 +10,7 @@ async function run() {
 	if (!win) {
 		return;
 	}
-	var code = document.getElementById('code').value;
+	var code = codeEditor.getSession().getValue();
 	var isAsync = document.getElementById('run-as-async').checked;
 	var result;
 	var resultTextbox = document.getElementById('result');
@@ -42,7 +42,7 @@ function handleInput() { // eslint-disable-line no-unused-vars
 	if (isAsync) {
 		return;
 	}
-	var code = document.getElementById('code').value;
+	var code = codeEditor.getSession().getValue();
 	// If `await` is used, switch to async mode
 	if (/[^=([]\s*await\s/m.test(code)) {
 		checkbox.checked = true;
@@ -77,3 +77,16 @@ var shortcut = Zotero.isMac ? 'Cmd-R' : 'Ctrl+R';
 document.getElementById('run-label').textContent = `(${shortcut})`;
 
 update();
+
+var codeWin, codeEditor;
+window.addEventListener("load", function (e) {
+	if (e.target !== document) {
+		return;
+	}
+
+	codeWin = document.getElementById("editor-code").contentWindow;
+	codeEditor = codeWin.editor;
+	codeEditor.getSession().setMode(new codeWin.JavaScriptMode);
+	codeEditor.getSession().setUseSoftTabs(false);
+	codeEditor.on('input', handleInput);
+}, false);
diff --git a/chrome/skin/default/zotero/runJS.css b/chrome/skin/default/zotero/runJS.css
index 4c008bb164..4f8cf9de4f 100644
--- a/chrome/skin/default/zotero/runJS.css
+++ b/chrome/skin/default/zotero/runJS.css
@@ -70,4 +70,8 @@ textarea {
 
 textarea.error {
 	color: red;
-}
\ No newline at end of file
+}
+
+.editor-code {
+	flex: 1;
+}