Commit a629ef86 authored by Jérome Perrin's avatar Jérome Perrin

monaco_editor: RenderJS gadget version

parent 8ac50d14
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Monaco Editor</title>
<script src="rsvp.js"></script>
<script src="renderjs.js"></script>
<script>
/*
This is understood by our build of monaco-editor
https://lab.nexedi.com/jerome/monaco-editor-erp5/blob/master/public-path.js
*/
window.monacoEditorWebPackResourceBaseUrl = "monaco-editor/";
</script>
<script src="monaco-editor/app.bundle.min.js"></script>
<script src="monaco-editor.gadget.js"></script>
</head>
<body>
<div class="monaco-container" style="width:100%;height:800px;border:1px solid grey;"></div>
</body>
</html>
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="File" module="OFS.Image"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>_Cacheable__manager_id</string> </key>
<value> <string>http_cache</string> </value>
</item>
<item>
<key> <string>__name__</string> </key>
<value> <string>monaco-editor.gadget.html</string> </value>
</item>
<item>
<key> <string>content_type</string> </key>
<value> <string>text/html</string> </value>
</item>
<item>
<key> <string>precondition</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>title</string> </key>
<value> <string></string> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
/*jslint nomen: true, indent: 2 */
/*global window, rJS, monaco*/
(function(window, rJS, monaco) {
'use strict';
rJS(window)
.declareAcquiredMethod('notifySubmit', 'notifySubmit')
.declareJob('deferNotifySubmit', function() {
// Ensure error will be correctly handled
return this.notifySubmit();
})
.declareAcquiredMethod('notifyChange', 'notifyChange')
.declareJob('deferNotifyChange', function() {
// Ensure error will be correctly handled
return this.notifyChange();
})
.ready(function() {
var context = this,
editor;
function deferNotifyChange() {
if (!context.state.ignoredChangeDuringInitialization) {
return context.deferNotifyChange();
}
}
this.editor = editor = monaco.editor.create(
this.element.querySelector('.monaco-container'),
{
/* because Alt+Click is LeftClick on ChromeOS */
multiCursorModifier: 'ctrlCmd',
automaticLayout: true,
autoIndent: true
}
);
editor.addAction({
id: 'save',
label: 'Save',
keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S],
precondition: null,
keybindingContext: null,
contextMenuGroupId: 'navigation',
contextMenuOrder: 1.5,
run: context.deferNotifySubmit.bind(context)
});
editor.getModel().updateOptions({
tabSize: 2,
insertSpaces: true
});
editor.getModel().onDidChangeContent(deferNotifyChange);
})
.declareMethod('render', function(options) {
var model_language,
state_dict = {
key: options.key,
editable: options.editable === undefined ? true : options.editable
};
if (options.portal_type === 'Web Page') {
model_language = 'html';
} else if (options.portal_type === 'Web Script') {
model_language = 'javascript';
} else if (options.portal_type === 'Web Style') {
model_language = 'css';
} else if (options.portal_type === 'Python Script') {
model_language = 'python';
}
state_dict.model_language = model_language;
state_dict.value = options.value || '';
return this.changeState(state_dict);
})
.onStateChange(function(modification_dict) {
if (modification_dict.hasOwnProperty('value')) {
// Do not notify the UI when initializing the value
this.state.ignoredChangeDuringInitialization = true;
this.editor.setValue(this.state.value);
this.state.ignoredChangeDuringInitialization = false;
}
if (modification_dict.hasOwnProperty('model_language')) {
monaco.editor.setModelLanguage(
this.editor.getModel(),
this.state.model_language
);
if (this.state.model_language === 'html') {
// XXX why do we need this while it set on model already ? is it bug in monaco ?
monaco.languages.html.htmlDefaults.options.format.tabSize = 2;
monaco.languages.html.htmlDefaults.options.format.insertSpaces = true;
}
}
})
.declareMethod('getContent', function() {
var form_data = {};
if (this.state.editable) {
form_data[this.state.key] = this.editor.getValue();
// Change the value state in place
// This will prevent the gadget to be changed if
// its parent call render with the same value
// (as ERP5 does in case of formulator error)
this.state.value = form_data[this.state.key];
}
return form_data;
});
})(window, rJS, monaco);
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="File" module="OFS.Image"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>_Cacheable__manager_id</string> </key>
<value> <string>http_cache</string> </value>
</item>
<item>
<key> <string>__name__</string> </key>
<value> <string>monaco-editor.gadget.js</string> </value>
</item>
<item>
<key> <string>content_type</string> </key>
<value> <string>application/javascript</string> </value>
</item>
<item>
<key> <string>precondition</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>title</string> </key>
<value> <string></string> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment