Improve Monaco integration and use in csledit

And remove timedtextarea.xml. Fixes #2665.
This commit is contained in:
Abe Jellinek 2022-06-28 15:05:11 -04:00
parent 8681e8ffe9
commit 9c837b3361
6 changed files with 83 additions and 369 deletions

View file

@ -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>

View file

@ -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
});

View file

@ -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>

View file

@ -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) {

View file

@ -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>

View file

@ -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');