gristlabs_grist-core/app/client/components/CodeEditorPanel.js

57 lines
2.0 KiB
JavaScript
Raw Normal View History

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.
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;