You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
2.0 KiB
58 lines
2.0 KiB
var _ = require('underscore');
|
|
var ko = require('knockout');
|
|
var BackboneEvents = require('backbone').Events;
|
|
|
|
var dispose = require('../lib/dispose');
|
|
var dom = require('../lib/dom');
|
|
var kd = require('../lib/koDom');
|
|
|
|
// Rather than require the whole of highlight.js, require just the core with the one language we
|
|
// need, to keep our bundle smaller and the build faster.
|
|
var hljs = require('highlight.js/lib/highlight');
|
|
hljs.registerLanguage('python', require('highlight.js/lib/languages/python'));
|
|
|
|
function CodeEditorPanel(gristDoc) {
|
|
this._gristDoc = gristDoc;
|
|
this._schema = ko.observable('');
|
|
|
|
this.listenTo(this._gristDoc, 'schemaUpdateAction', this.onSchemaAction);
|
|
this.onSchemaAction(); // Fetch the schema to initialize
|
|
}
|
|
dispose.makeDisposable(CodeEditorPanel);
|
|
_.extend(CodeEditorPanel.prototype, BackboneEvents);
|
|
|
|
CodeEditorPanel.prototype.buildDom = function() {
|
|
// The tabIndex enables the element to gain focus, and the .clipboard class prevents the
|
|
// Clipboard module from re-grabbing it. This is a quick fix for the issue where clipboard
|
|
// interferes with text selection. TODO it should be possible for the Clipboard to never
|
|
// interfere with text selection even for un-focusable elements.
|
|
return dom('div.g-code-panel.clipboard',
|
|
{tabIndex: "-1"},
|
|
kd.scope(this._schema, function(schema) {
|
|
// The reason to scope and rebuild instead of using `kd.text(schema)` is because
|
|
// hljs.highlightBlock(elem) replaces `elem` with a whole new dom tree.
|
|
if (!schema) { return null; }
|
|
return dom(
|
|
'code.g-code-viewer.python',
|
|
schema,
|
|
dom.hide,
|
|
dom.defer(function(elem) {
|
|
hljs.highlightBlock(elem);
|
|
dom.show(elem);
|
|
})
|
|
);
|
|
})
|
|
);
|
|
};
|
|
|
|
CodeEditorPanel.prototype.onSchemaAction = function(actions) {
|
|
return this._gristDoc.docComm.fetchTableSchema()
|
|
.then(schema => {
|
|
if (!this.isDisposed()) {
|
|
this._schema(schema);
|
|
}
|
|
});
|
|
};
|
|
|
|
module.exports = CodeEditorPanel;
|