From 9c837b3361985c66c067c7655250ee96a64f571f Mon Sep 17 00:00:00 2001
From: Abe Jellinek <jellinek@berkeley.edu>
Date: Tue, 28 Jun 2022 15:05:11 -0400
Subject: [PATCH] Improve Monaco integration and use in csledit

And remove timedtextarea.xml. Fixes #2665.
---
 chrome/content/scaffold/monaco/monaco.html    |  72 +++--
 chrome/content/scaffold/scaffold.js           |  28 +-
 .../content/zotero/bindings/timedtextarea.xml | 293 ------------------
 chrome/content/zotero/tools/csledit.js        |  45 ++-
 chrome/content/zotero/tools/csledit.xhtml     |   9 +-
 chrome/skin/default/zotero/zotero.css         |   5 -
 6 files changed, 83 insertions(+), 369 deletions(-)
 delete mode 100644 chrome/content/zotero/bindings/timedtextarea.xml

diff --git a/chrome/content/scaffold/monaco/monaco.html b/chrome/content/scaffold/monaco/monaco.html
index 22ccab4a1f..c329415144 100644
--- a/chrome/content/scaffold/monaco/monaco.html
+++ b/chrome/content/scaffold/monaco/monaco.html
@@ -21,43 +21,53 @@
 
 	<script src="resource://zotero/vs/loader.js"></script>
 	<script>
-		var container = document.getElementById('container');
-		var editor, globalEditor;
+		/**
+		 * @param {Object} [params = {}]
+		 * @return {Promise<void>}
+		 */
+		function loadMonaco(params = {}) {
+			let container = document.getElementById('container');
 
-		require.config({ paths: { vs: 'resource://zotero/vs' } });
+			require.config({ paths: { vs: 'resource://zotero/vs' } });
 
-		let proxy = URL.createObjectURL(
-			new Blob(
-			    [`
-					self.MonacoEnvironment = {
-						baseUrl: 'resource://zotero/'
-					};
-					importScripts('resource://zotero/vs/base/worker/workerMain.js');
-				`],
-			    { type: "text/javascript" }
-		    )
-		);
-		window.MonacoEnvironment = { getWorkerUrl: () => proxy };
+			let proxy = URL.createObjectURL(
+				new Blob(
+					[`
+						self.MonacoEnvironment = {
+							baseUrl: 'resource://zotero/'
+						};
+						importScripts('resource://zotero/vs/base/worker/workerMain.js');
+					`],
+					{ type: "text/javascript" }
+				)
+			);
+			window.MonacoEnvironment = { getWorkerUrl: () => proxy };
 
-		require(['vs/editor/editor.main'], function () {
-			globalEditor = monaco;
+			return new Promise(resolve => require(['vs/editor/editor.main'], function () {
+				globalEditor = monaco;
 
-			monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
-				target: monaco.languages.typescript.ScriptTarget.ES6,
-				allowNonTsExtensions: true // needed for peeking definitions from in-memory models to work
-			});
+				monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+					target: monaco.languages.typescript.ScriptTarget.ES6,
+					allowNonTsExtensions: true // needed for peeking definitions from in-memory models to work
+				});
 
-			editor = monaco.editor.create(container, {
-				theme: 'vs-dark',
-				language: 'javascript',
-				scrollBeyondLastLine: false,
-				minimap: { enabled: false }
-			});
+				editor = monaco.editor.create(container, {
+					theme: 'vs-dark',
+					language: 'javascript',
+					scrollBeyondLastLine: false,
+					minimap: { enabled: false },
+					// Clicking links doesn't actually work, so disable them (for now)
+					links: false,
+					...params
+				});
 
-			window.onresize = function () {
-				editor.layout();
-			};
-		});
+				window.onresize = function () {
+					editor.layout();
+				};
+
+				resolve({ monaco, editor });
+			}));
+		}
 	</script>
 	
 </body>
diff --git a/chrome/content/scaffold/scaffold.js b/chrome/content/scaffold/scaffold.js
index 6d495dac0e..6d1949696f 100644
--- a/chrome/content/scaffold/scaffold.js
+++ b/chrome/content/scaffold/scaffold.js
@@ -142,13 +142,21 @@ var Scaffold = new function () {
 		var importWin = document.getElementById("editor-import").contentWindow;
 		var codeWin = document.getElementById("editor-code").contentWindow;
 		var testsWin = document.getElementById("editor-tests").contentWindow;
-		
-		_editors.import = importWin.editor;
-		_editors.importGlobal = importWin.globalEditor;
-		_editors.code = codeWin.editor;
-		_editors.codeGlobal = codeWin.globalEditor;
-		_editors.tests = testsWin.editor;
-		_editors.testsGlobal = testsWin.globalEditor;
+
+		await Promise.all([
+			importWin.loadMonaco({ language: 'plaintext' }).then(({ monaco, editor }) => {
+				_editors.importGlobal = monaco;
+				_editors.import = editor;
+			}),
+			codeWin.loadMonaco({ language: 'javascript' }).then(({ monaco, editor }) => {
+				_editors.codeGlobal = monaco;
+				_editors.code = editor;
+			}),
+			testsWin.loadMonaco({ language: 'json' }).then(({ monaco, editor }) => {
+				_editors.testsGlobal = monaco;
+				_editors.tests = editor;
+			}),
+		]);
 
 		this.initImportEditor();
 		this.initCodeEditor();
@@ -257,7 +265,7 @@ var Scaffold = new function () {
 
 	this.initImportEditor = function () {
 		let monaco = _editors.importGlobal, editor = _editors.import;
-		monaco.editor.setModelLanguage(editor.getModel(), 'plaintext');
+		// Nothing to do here
 	};
 
 	this.initCodeEditor = async function () {
@@ -269,8 +277,6 @@ var Scaffold = new function () {
 
 		editor.updateOptions({
 			lineNumbers: num => num + _linesOfMetadata - 1,
-			// clicking links doesn't actually work, so disable them (for now)
-			links: false
 		});
 
 		monaco.languages.registerCodeLensProvider('javascript', this.createRunCodeLensProvider(monaco, editor));
@@ -295,8 +301,6 @@ var Scaffold = new function () {
 			schemaValidation: 'error'
 		});
 
-		monaco.editor.setModelLanguage(editor.getModel(), 'json');
-
 		editor.getModel().updateOptions({
 			insertSpaces: false
 		});
diff --git a/chrome/content/zotero/bindings/timedtextarea.xml b/chrome/content/zotero/bindings/timedtextarea.xml
deleted file mode 100644
index 35cd8759e4..0000000000
--- a/chrome/content/zotero/bindings/timedtextarea.xml
+++ /dev/null
@@ -1,293 +0,0 @@
-<?xml version="1.0"?>
-<!--
-	A combination of Mozilla's textarea, timed-textbox, input-box, and
-	input-box-spell bindings, with the timed-textbox's Return key
-	event handler removed
-	
-	Note: It would be much nicer if a) Mozilla offered this natively or
-	b) we just extended the timed-textbox binding directly, but since it's based
-	on html:input rather than html:textarea, doing so breaks things in various
-	ways (though it may be possible with some tweaking)
-	
-	Also note: spellcheck code here is a slightly adjusted version
-	of a patch by Neil Deakin on Bugzilla that wasn't 	approved in time for
-	Firefox 2.0 (https://bugzilla.mozilla.org/show_bug.cgi?id=346787).
-	When there's native support for spellcheck="true" in XUL,	we'll hopefully be
-	able to use that, though it'll still need to work as a timed textarea...
--->
-
-<!DOCTYPE bindings [
-  <!ENTITY % textcontextDTD SYSTEM "chrome://global/locale/textcontext.dtd" >
-  %textcontextDTD;
-  
-  <!-- These aren't yet included in textcontext.dtd in Minefield, so we reproduce them here
-  		(rather than including the massive browser.dtd) -->
-  <!ENTITY spellAddToDictionary.label "Add to dictionary">
-  <!ENTITY spellAddToDictionary.accesskey "o">
-  <!ENTITY spellEnable.label "Spell check this field">
-  <!ENTITY spellEnable.accesskey "S">
-  <!ENTITY spellNoSuggestions.label "(No spelling suggestions)">
-  <!ENTITY spellDictionaries.label "Languages">
-  <!ENTITY spellDictionaries.accesskey "l">
-  <!ENTITY spellAddDictionaries.label "Add dictionaries...">
-  <!ENTITY spellAddDictionaries.accesskey "A">
-]>
-
-<bindings 	xmlns="http://www.mozilla.org/xbl"
-			xmlns:html="http://www.w3.org/1999/xhtml"
-			xmlns:xbl="http://www.mozilla.org/xbl"
-			xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-	<binding id="timed-textarea" extends="chrome://global/content/bindings/textbox.xml#textbox">
-		<implementation>
-			<field name="mInputField">null</field>
-			<property name="inputField" readonly="true">
-				<getter><![CDATA[
-				  if (!this.mInputField)
-					this.mInputField = document.getAnonymousElementByAttribute(this, "anonid", "input");
-				  return this.mInputField;
-				]]></getter>
-			</property>
-		  
-			<field name="_timer">null</field>
-			<property name="timeout"
-					onset="this.setAttribute('timeout', val); return val;"
-					onget="return parseInt(this.getAttribute('timeout')) || 0;"/>
-			<property name="value">
-				<getter>
-				  return this.inputField.value;
-				</getter>
-				<setter>
-				  <![CDATA[
-					this.inputField.value = val;
-					if (this._timer)
-					  clearTimeout(this._timer);
-					return val;
-				  ]]>
-				</setter>
-			</property>
-			<method name="_fireCommand">
-				<parameter name="me"/>
-				<body>
-				  <![CDATA[
-					me._timer = null;
-					me.doCommand();
-				  ]]>
-				</body>
-			</method>
-			
-			
-			<!-- Spellcheck code -->
-			<field name="_spellCheckInitialized">false</field>
-			<property name="spellCheckerUI" readonly="true">
-				<getter><![CDATA[
-				  if (!this._spellCheckInitialized) {
-					this._spellCheckInitialized = true;
-				
-					const CI = Components.interfaces;
-					if (!document instanceof CI.nsIDOMXULDocument)
-					  return null;
-				
-					var textbox = this;
-					
-					if (!textbox || !textbox instanceof CI.nsIDOMXULTextBoxElement)
-					  return null;
-				
-					try {
-					  var loader = Components.classes["@mozilla.org/moz/jssubscript-loader;1"].
-									 getService(CI.mozIJSSubScriptLoader);
-					  loader.loadSubScript("chrome://global/content/inlineSpellCheckUI.js", this);
-					  
-					  if ("InlineSpellCheckerUI" in this)
-						this.InlineSpellCheckerUI.init(
-							textbox.inputField.QueryInterface(CI.nsIDOMNSEditableElement).editor
-						);
-					} catch(ex) {
-						// this throws an error on window open...
-					}
-				  }
-				
-				  return this.InlineSpellCheckerUI;
-				]]></getter>
-			</property>
-			
-			<constructor>
-			<![CDATA[
-			  // can't initialize the spell checker in the constructor as not
-			  // everything is initialized and the editor will fail to create the
-			  // inline spell checker object
-			  setTimeout(this._delayedInitSpellCheck, 0, this)
-			  
-				// oninput doesn't seem to fire on text drag
-				this.inputField.addEventListener('dragdrop', function(event) {
-					document.getBindingParent(event.target).doInput();
-				}, false);
-			]]>
-			</constructor>
-			
-			<method name="_delayedInitSpellCheck">
-				<parameter name="me"/>
-				<body><![CDATA[
-				  var spellui = me.spellCheckerUI;
-				  if (spellui)
-					spellui.enabled = true;
-				]]></body>
-			</method>
-			
-			<method name="_doPopupItemEnabling">
-				<parameter name="popupNode"/>
-				<body>
-				<![CDATA[
-					var children = popupNode.childNodes;
-					for (var i = 0; i < children.length; i++) {
-						var command = children[i].getAttribute("cmd");
-						if (command) {
-							var controller = document.commandDispatcher.getControllerForCommand(command);
-							var enabled = controller.isCommandEnabled(command);
-							if (enabled) {
-								children[i].removeAttribute("disabled");
-							}
-							else {
-								children[i].setAttribute("disabled", "true");
-							}
-						}
-					}
-				]]>
-				</body>
-			</method>
-			
-			<method name="_doPopupItemEnablingSpell">
-				<parameter name="popupNode"/>
-				<body>
-				  <![CDATA[
-					var spellui = this.spellCheckerUI;
-					if (!spellui || !spellui.canSpellCheck) {
-					  this._setMenuItemVisibility("spell-no-suggestions", false);
-					  this._setMenuItemVisibility("spell-check-enabled", false);
-					  this._setMenuItemVisibility("spell-check-separator", false);
-					  this._setMenuItemVisibility("spell-add-to-dictionary", false);
-					  this._setMenuItemVisibility("spell-suggestions-separator", false);
-					  this._setMenuItemVisibility("spell-dictionaries", false);
-					  return;
-					}
-				
-					spellui.initFromEvent(document.popupRangeParent,
-										  document.popupRangeOffset);
-				
-					var enabled = spellui.enabled;
-					document.getAnonymousElementByAttribute(this, "anonid",
-					  "spell-check-enabled").setAttribute("checked", enabled);
-				
-					var overMisspelling = spellui.overMisspelling;
-					this._setMenuItemVisibility("spell-add-to-dictionary", overMisspelling);
-					this._setMenuItemVisibility("spell-suggestions-separator", overMisspelling);
-				
-					// suggestion list
-					var suggestionsSeparator = document.getAnonymousElementByAttribute(this,
-												 "anonid", "spell-add-to-dictionary");
-					var numsug = spellui.addSuggestionsToMenu(popupNode, suggestionsSeparator, 5);
-					this._setMenuItemVisibility("spell-no-suggestions", overMisspelling && numsug == 0);
-				
-					// dictionary list
-					var dictmenu = document.getAnonymousElementByAttribute(this, "anonid",
-									 "spell-dictionaries-menu");
-					var addsep = document.getAnonymousElementByAttribute(this, "anonid",
-									 "spell-language-separator");
-					
-					var numdicts = spellui.addDictionaryListToMenu(dictmenu, addsep);
-					this._setMenuItemVisibility("spell-dictionaries", enabled);
-					
-					this._doPopupItemEnabling(popupNode);
-				  ]]>
-				</body>
-			</method>
-			
-			<method name="_doPopupItemDisabling">
-				<body><![CDATA[
-				  if (this.spellCheckerUI) {
-					this.spellCheckerUI.clearSuggestionsFromMenu();
-					this.spellCheckerUI.clearDictionaryListFromMenu();
-				  }
-				]]></body>
-			</method>
-			
-			<method name="_setMenuItemVisibility">
-				<parameter name="anonid"/>
-				<parameter name="visible"/>
-				<body><![CDATA[
-				  document.getAnonymousElementByAttribute(this, "anonid", anonid).
-					hidden = ! visible;
-				]]></body>
-			</method>
-			
-			
-			<method name="doTextCommand">
-				<parameter name="command"/>
-					<body>
-					<![CDATA[
-					var controller = document.commandDispatcher.getControllerForCommand(command);
-					controller.doCommand(command);
-					]]>
-				</body>
-			</method>
-			
-			<method name="doInput">
-				<body>
-				<![CDATA[
-					if (this._timer) {
-						clearTimeout(this._timer);
-					}
-					this._timer = this.timeout && setTimeout(this._fireCommand, this.timeout, this);
-				]]>
-				</body>
-			</method>
-		</implementation>
-		
-		
-		<handlers>
-			<handler event="input">
-			<![CDATA[
-				this.doInput();
-			]]>
-			</handler>
-		</handlers>
-		
-		
-		<content context="_child">
-			<xul:hbox class="textbox-input-box" flex="1">
-				<html:textarea class="textbox-textarea" flex="1" anonid="input"
-					xbl:inherits="onfocus,onblur,xbl:text=value,disabled,tabindex,rows,cols,readonly,wrap"><children/></html:textarea>
-				<xul:menupopup anonid="input-box-contextmenu"
-								onpopupshowing="if (document.commandDispatcher.focusedElement != this.parentNode.firstChild) { this.parentNode.firstChild.focus(); } this.parentNode.parentNode._doPopupItemEnablingSpell(this);"
-								onpopuphiding="this.parentNode.parentNode._doPopupItemDisabling(this);"
-								oncommand="var cmd = event.originalTarget.getAttribute('cmd'); if(cmd) { this.parentNode.parentNode.doTextCommand(cmd); event.stopPropagation(); }">
-					<xul:menuitem label="&spellNoSuggestions.label;" anonid="spell-no-suggestions" disabled="true"/>
-					<xul:menuitem label="&spellAddToDictionary.label;" accesskey="&spellAddToDictionary.accesskey;" anonid="spell-add-to-dictionary"
-									oncommand="this.parentNode.parentNode.parentNode.spellCheckerUI.addToDictionary();"/>
-					<xul:menuseparator anonid="spell-suggestions-separator"/>
-					<xul:menuitem label="&undoCmd.label;" accesskey="&undoCmd.accesskey;" cmd="cmd_undo"/>
-					<xul:menuseparator/>
-					<xul:menuitem label="&cutCmd.label;" accesskey="&cutCmd.accesskey;" cmd="cmd_cut"/>
-					<xul:menuitem label="&copyCmd.label;" accesskey="&copyCmd.accesskey;" cmd="cmd_copy"/>
-					<xul:menuitem label="&pasteCmd.label;" accesskey="&pasteCmd.accesskey;" cmd="cmd_paste"/>
-					<xul:menuitem label="&deleteCmd.label;" accesskey="&deleteCmd.accesskey;" cmd="cmd_delete"/>
-					<xul:menuseparator/>
-					<xul:menuitem label="&selectAllCmd.label;" accesskey="&selectAllCmd.accesskey;" cmd="cmd_selectAll"/>
-					<xul:menuseparator anonid="spell-check-separator"/>
-					<xul:menuitem label="&spellEnable.label;" type="checkbox" accesskey="&spellEnable.accesskey;" anonid="spell-check-enabled"
-									oncommand="this.parentNode.parentNode.parentNode.spellCheckerUI.toggleEnabled();"/>
-					<xul:menu label="&spellDictionaries.label;" accesskey="&spellDictionaries.accesskey;" anonid="spell-dictionaries">
-						<xul:menupopup anonid="spell-dictionaries-menu"
-										onpopupshowing="event.stopPropagation();"
-										onpopuphiding="event.stopPropagation();">
-							<xul:menuseparator anonid="spell-language-separator"/>
-							<xul:menuitem anonid="spell-add-dictionaries-main" label="&spellAddDictionaries.label;"
-											accesskey="&spellAddDictionaries.accesskey;"
-											oncommand="nsContextMenu.prototype.addDictionaries();"/>
-						</xul:menupopup>
-					</xul:menu>
-				</xul:menupopup>
-			</xul:hbox>
-		  
-		</content>
-	</binding>
-</bindings>
\ No newline at end of file
diff --git a/chrome/content/zotero/tools/csledit.js b/chrome/content/zotero/tools/csledit.js
index abb618b2ea..42f7250505 100644
--- a/chrome/content/zotero/tools/csledit.js
+++ b/chrome/content/zotero/tools/csledit.js
@@ -26,9 +26,11 @@
 import FilePicker from 'zotero/modules/filePicker';
 
 var Zotero_CSL_Editor = new function() {
+	let monaco, editor;
+
 	this.init = init;
-	this.handleKeyPress = handleKeyPress;
 	this.loadCSL = loadCSL;
+
 	async function init() {
 		await Zotero.Schema.schemaUpdatePromise;
 		
@@ -52,11 +54,6 @@ var Zotero_CSL_Editor = new function() {
 			}
 		}
 		
-		if (currentStyle) {
-			// Call asynchronously, see note in Zotero.Styles
-			window.setTimeout(this.onStyleSelected.bind(this, currentStyle.styleID), 1);
-		}
-		
 		var pageList = document.getElementById('zotero-csl-page-type');
 		var locators = Zotero.Cite.labels;
 		for (let type of locators) {
@@ -66,6 +63,20 @@ var Zotero_CSL_Editor = new function() {
 		}
 		
 		pageList.selectedIndex = 0;
+
+		let editorWin = document.getElementById("zotero-csl-editor-iframe").contentWindow;
+		let { monaco: _monaco, editor: _editor } = await editorWin.loadMonaco({ language: 'xml' });
+		monaco = _monaco;
+		editor = _editor;
+
+		editor.getModel().onDidChangeContent(Zotero.Utilities.debounce(() => {
+			this.onStyleModified();
+		}, 250));
+
+		if (currentStyle) {
+			// Call asynchronously, see note in Zotero.Styles
+			window.setTimeout(this.onStyleSelected.bind(this, currentStyle.styleID), 1);
+		}
 	}
 	
 	this.onStyleSelected = function(styleID) {
@@ -84,10 +95,11 @@ var Zotero_CSL_Editor = new function() {
 	this.refresh = function() {
 		this.generateBibliography(this.loadStyleFromEditor());
 	}
+
+	this.refreshDebounced = Zotero.Utilities.debounce(this.refresh, 250);
 	
 	this.save = async function () {
-		var editor = document.getElementById('zotero-csl-editor');
-		var style = editor.value;
+		var style = editor.getValue();
 		var fp = new FilePicker();
 		fp.init(window, Zotero.getString('styles.editor.save'), fp.modeSave);
 		fp.appendFilter("Citation Style Language", "*.csl");
@@ -109,21 +121,9 @@ var Zotero_CSL_Editor = new function() {
 		}
 	};
 	
-	function handleKeyPress(event) {
-		if (event.keyCode == 9 &&
-				(!event.shiftKey && !event.metaKey && !event.altKey && !event.ctrlKey)) {
-			_insertText("\t");
-			event.preventDefault();
-		}
-	}
-	
-	
 	function loadCSL(cslID) {
-		var editor = document.getElementById('zotero-csl-editor');
 		var style = Zotero.Styles.get(cslID);
-		editor.value = style.getXML();
-		editor.cslID = cslID;
-		editor.doCommand();
+		editor.setValue(style.getXML());
 		document.getElementById('zotero-csl-list').value = cslID;
 	}
 	
@@ -131,7 +131,7 @@ var Zotero_CSL_Editor = new function() {
 		var styleObject;
 		try {
 			styleObject = new Zotero.Style(
-				document.getElementById('zotero-csl-editor').value
+				editor.getValue()
 			);
 		} catch(e) {
 			document.getElementById('zotero-csl-preview-box')
@@ -159,7 +159,6 @@ var Zotero_CSL_Editor = new function() {
 	
 	this.generateBibliography = function(style) {
 		var iframe = document.getElementById('zotero-csl-preview-box');
-		var editor = document.getElementById('zotero-csl-editor');
 		
 		var items = Zotero.getActiveZoteroPane().getSelectedItems();
 		if (items.length == 0) {
diff --git a/chrome/content/zotero/tools/csledit.xhtml b/chrome/content/zotero/tools/csledit.xhtml
index 26019a0b19..ae83a45870 100644
--- a/chrome/content/zotero/tools/csledit.xhtml
+++ b/chrome/content/zotero/tools/csledit.xhtml
@@ -34,6 +34,7 @@
 <window
 	id="csl-edit"
 	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+	xmlns:html="http://www.w3.org/1999/xhtml"
 	onload="Zotero_CSL_Editor.init();"
 	onunload="Zotero_CSL_Editor.onUnload()"
 	title="&styles.editor;">
@@ -47,7 +48,7 @@
 			<button id="zotero-csl-save" label="&zotero.general.saveAs;" oncommand="Zotero_CSL_Editor.save()"/>
 			<menulist id="zotero-csl-page-type" style="min-height: 1.6em; min-width: 50px" oncommand="Zotero_CSL_Editor.refresh()" native="true" />
 			<label value=":" />
-			<textbox size="5" id="preview-pages" type="timed" timeout="250" oncommand="Zotero_CSL_Editor.refresh()"/>
+			<html:input size="5" id="preview-pages" oninput="Zotero_CSL_Editor.refreshDebounced()"/>
 			<checkbox oncommand="Zotero_CSL_Editor.refresh()" id="preview-suppress-author" label="&zotero.citation.suppressAuthor.label;" native="true" />
 			<label value="&styles.editor.citePosition;" />
 			<menulist id="zotero-ref-position" oncommand="Zotero_CSL_Editor.refresh()" native="true">
@@ -64,10 +65,8 @@
 		<hbox align="center">
 			<menulist id="zotero-csl-list" style="margin-left: 7px; min-height: 1.6em; min-width: 100px" oncommand="Zotero_CSL_Editor.onStyleSelected(this.value)" native="true"/>
 		</hbox>
-		<textbox id="zotero-csl-editor" type="timed" timeout="250" multiline="true"
-			flex="1"
-			onkeypress="Zotero_CSL_Editor.handleKeyPress(event)"
-			oncommand="Zotero_CSL_Editor.onStyleModified()"/>
+		<iframe id="zotero-csl-editor-iframe" src="chrome://scaffold/content/monaco/monaco.html" flex="1"
+			onmousedown="this.focus()"/>
 		<splitter id="csledit-splitter" collapse="before" persist="state">
 			<grippy/>
 		</splitter>
diff --git a/chrome/skin/default/zotero/zotero.css b/chrome/skin/default/zotero/zotero.css
index 08c6de3883..108beed4ab 100644
--- a/chrome/skin/default/zotero/zotero.css
+++ b/chrome/skin/default/zotero/zotero.css
@@ -21,11 +21,6 @@
 }
 
 /* Bindings */
-textbox[multiline="true"][type="timed"]
-{
-	-moz-binding: url('chrome://zotero/content/bindings/timedtextarea.xml#timed-textarea');
-}
-
 textbox[type="styled"]
 {
 	-moz-binding: url('chrome://zotero/content/bindings/styled-textbox.xml#styled-textbox');