2019-10-23 12:30:52 -04:00
|
|
|
import Component from "@ember/component";
|
2018-06-15 11:03:24 -04:00
|
|
|
import loadScript from "discourse/lib/load-script";
|
2019-11-07 16:38:28 -05:00
|
|
|
import { observes } from "discourse-common/utils/decorators";
|
2019-10-30 18:05:27 -04:00
|
|
|
import { on } from "@ember/object/evented";
|
2015-03-09 12:49:11 -04:00
|
|
|
|
2019-10-23 12:30:52 -04:00
|
|
|
export default Component.extend({
|
2018-06-15 11:03:24 -04:00
|
|
|
mode: "css",
|
|
|
|
classNames: ["ace-wrapper"],
|
2015-03-09 12:49:11 -04:00
|
|
|
_editor: null,
|
|
|
|
_skipContentChangeEvent: null,
|
2017-10-30 03:07:49 -04:00
|
|
|
disabled: false,
|
2015-03-09 12:49:11 -04:00
|
|
|
|
2018-06-15 11:03:24 -04:00
|
|
|
@observes("editorId")
|
2017-04-13 16:21:46 -04:00
|
|
|
editorIdChanged() {
|
2019-05-27 04:15:39 -04:00
|
|
|
if (this.autofocus) {
|
2018-06-15 11:03:24 -04:00
|
|
|
this.send("focus");
|
2017-04-13 16:21:46 -04:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2018-06-15 11:03:24 -04:00
|
|
|
@observes("content")
|
2016-11-28 11:29:56 -05:00
|
|
|
contentChanged() {
|
2019-07-08 20:06:41 -04:00
|
|
|
const content = this.content || "";
|
|
|
|
if (this._editor && !this._skipContentChangeEvent) {
|
|
|
|
this._editor.getSession().setValue(content);
|
2015-03-09 12:49:11 -04:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2018-06-15 11:03:24 -04:00
|
|
|
@observes("mode")
|
2017-04-12 10:52:52 -04:00
|
|
|
modeChanged() {
|
2018-09-30 22:06:01 -04:00
|
|
|
if (this._editor && !this._skipContentChangeEvent) {
|
2019-05-27 04:15:39 -04:00
|
|
|
this._editor.getSession().setMode("ace/mode/" + this.mode);
|
2017-04-12 10:52:52 -04:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2018-06-15 11:03:24 -04:00
|
|
|
@observes("disabled")
|
2017-10-30 03:07:49 -04:00
|
|
|
disabledStateChanged() {
|
|
|
|
this.changeDisabledState();
|
|
|
|
},
|
|
|
|
|
|
|
|
changeDisabledState() {
|
|
|
|
const editor = this._editor;
|
|
|
|
if (editor) {
|
2019-05-27 04:15:39 -04:00
|
|
|
const disabled = this.disabled;
|
2017-10-30 03:07:49 -04:00
|
|
|
editor.setOptions({
|
|
|
|
readOnly: disabled,
|
|
|
|
highlightActiveLine: !disabled,
|
|
|
|
highlightGutterLine: !disabled
|
|
|
|
});
|
|
|
|
editor.container.parentNode.setAttribute("data-disabled", disabled);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2019-10-30 18:05:27 -04:00
|
|
|
_destroyEditor: on("willDestroyElement", function() {
|
2015-03-09 12:49:11 -04:00
|
|
|
if (this._editor) {
|
|
|
|
this._editor.destroy();
|
|
|
|
this._editor = null;
|
|
|
|
}
|
2015-07-15 13:15:05 -04:00
|
|
|
if (this.appEvents) {
|
|
|
|
// xxx: don't run during qunit tests
|
2020-03-30 12:55:15 -04:00
|
|
|
this.appEvents.off("ace:resize", this, "resize");
|
2015-07-15 13:15:05 -04:00
|
|
|
}
|
2017-05-15 16:10:07 -04:00
|
|
|
|
2018-06-15 11:03:24 -04:00
|
|
|
$(window).off("ace:resize");
|
2019-10-17 19:49:41 -04:00
|
|
|
}),
|
2015-03-09 12:49:11 -04:00
|
|
|
|
2015-07-09 16:25:33 -04:00
|
|
|
resize() {
|
|
|
|
if (this._editor) {
|
|
|
|
this._editor.resize();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2016-11-28 11:29:56 -05:00
|
|
|
didInsertElement() {
|
2019-01-19 04:05:51 -05:00
|
|
|
this._super(...arguments);
|
2015-03-09 12:49:11 -04:00
|
|
|
|
2018-09-30 22:06:01 -04:00
|
|
|
loadScript("/javascripts/ace/ace.js").then(() => {
|
2018-06-15 11:03:24 -04:00
|
|
|
window.ace.require(["ace/ace"], loadedAce => {
|
|
|
|
if (!this.element || this.isDestroying || this.isDestroyed) {
|
|
|
|
return;
|
|
|
|
}
|
2019-07-16 06:45:15 -04:00
|
|
|
const editor = loadedAce.edit(this.element.querySelector(".ace"));
|
2015-05-13 16:24:49 -04:00
|
|
|
|
2018-09-30 22:06:01 -04:00
|
|
|
editor.setTheme("ace/theme/chrome");
|
2015-05-13 16:24:49 -04:00
|
|
|
editor.setShowPrintMargin(false);
|
2018-06-15 11:03:24 -04:00
|
|
|
editor.setOptions({ fontSize: "14px" });
|
2019-05-27 04:15:39 -04:00
|
|
|
editor.getSession().setMode("ace/mode/" + this.mode);
|
2018-06-15 11:03:24 -04:00
|
|
|
editor.on("change", () => {
|
2016-11-28 11:29:56 -05:00
|
|
|
this._skipContentChangeEvent = true;
|
2018-06-15 11:03:24 -04:00
|
|
|
this.set("content", editor.getSession().getValue());
|
2016-11-28 11:29:56 -05:00
|
|
|
this._skipContentChangeEvent = false;
|
2015-05-13 16:24:49 -04:00
|
|
|
});
|
2015-07-09 16:25:33 -04:00
|
|
|
editor.$blockScrolling = Infinity;
|
2018-06-15 11:03:24 -04:00
|
|
|
editor.renderer.setScrollMargin(10, 10);
|
2015-05-13 16:24:49 -04:00
|
|
|
|
2019-07-16 06:45:15 -04:00
|
|
|
this.element.setAttribute("data-editor", editor);
|
2016-11-28 11:29:56 -05:00
|
|
|
this._editor = editor;
|
2017-10-30 03:07:49 -04:00
|
|
|
this.changeDisabledState();
|
2017-05-15 16:10:07 -04:00
|
|
|
|
2018-06-15 11:03:24 -04:00
|
|
|
$(window)
|
|
|
|
.off("ace:resize")
|
2020-03-30 12:55:15 -04:00
|
|
|
.on("ace:resize", () => this.appEvents.trigger("ace:resize"));
|
2017-05-15 16:10:07 -04:00
|
|
|
|
2016-11-28 11:29:56 -05:00
|
|
|
if (this.appEvents) {
|
2015-07-15 13:15:05 -04:00
|
|
|
// xxx: don't run during qunit tests
|
2019-03-20 07:50:13 -04:00
|
|
|
this.appEvents.on("ace:resize", this, "resize");
|
2015-07-15 13:15:05 -04:00
|
|
|
}
|
2017-04-13 16:21:46 -04:00
|
|
|
|
2019-05-27 04:15:39 -04:00
|
|
|
if (this.autofocus) {
|
2017-04-13 16:21:46 -04:00
|
|
|
this.send("focus");
|
|
|
|
}
|
2015-03-09 12:49:11 -04:00
|
|
|
});
|
|
|
|
});
|
2017-04-13 16:21:46 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
actions: {
|
|
|
|
focus() {
|
|
|
|
if (this._editor) {
|
|
|
|
this._editor.focus();
|
|
|
|
this._editor.navigateFileEnd();
|
|
|
|
}
|
|
|
|
}
|
2016-11-28 11:29:56 -05:00
|
|
|
}
|
|
|
|
});
|