DEV: Convert ace-editor to glimmer/gjs (#28492)
This commit is contained in:
Jarek Radosz
GitHub
parent
4a6fc45429
commit
62c8904721
|
|
@ -120,6 +120,7 @@
|
|||
|
||||
<AceEditor
|
||||
@content={{this.activeSection}}
|
||||
@onChange={{fn (mut this.activeSection)}}
|
||||
@editorId={{this.editorId}}
|
||||
@mode={{this.activeSectionMode}}
|
||||
@autofocus="true"
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@
|
|||
|
||||
<AceEditor
|
||||
@content={{this.editorContents}}
|
||||
@onChange={{fn (mut this.editorContents)}}
|
||||
@mode={{this.currentEditorMode}}
|
||||
@editorId={{this.editorId}}
|
||||
@save={{@save}}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,11 @@
|
|||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<AceEditor @content={{this.templateContent}} @mode="yaml" />
|
||||
<AceEditor
|
||||
@content={{this.templateContent}}
|
||||
@onChange={{fn (mut this.templateContent)}}
|
||||
@mode="yaml"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="footer-buttons">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
<div class="settings-editor">
|
||||
<div>
|
||||
<AceEditor @mode="html" @content={{this.editedContent}} />
|
||||
<AceEditor
|
||||
@content={{this.editedContent}}
|
||||
@onChange={{fn (mut this.editedContent)}}
|
||||
@mode="html"
|
||||
/>
|
||||
|
||||
{{#each this.errors as |error|}}
|
||||
<div class="validation-error">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,264 @@
|
|||
import Component from "@glimmer/component";
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
|
||||
import didUpdate from "@ember/render-modifiers/modifiers/did-update";
|
||||
import { service } from "@ember/service";
|
||||
import { modifier } from "ember-modifier";
|
||||
import ConditionalLoadingSpinner from "discourse/components/conditional-loading-spinner";
|
||||
import loadAce from "discourse/lib/load-ace-editor";
|
||||
import { bind } from "discourse-common/utils/decorators";
|
||||
import I18n from "discourse-i18n";
|
||||
|
||||
const COLOR_VARS_REGEX =
|
||||
/\$(primary|secondary|tertiary|quaternary|header_background|header_primary|highlight|danger|success|love)(\s|;|-(low|medium|high))/g;
|
||||
|
||||
function overridePlaceholder(ace) {
|
||||
const originalPlaceholderSetter =
|
||||
ace.config.$defaultOptions.editor.placeholder.set;
|
||||
|
||||
ace.config.$defaultOptions.editor.placeholder.set = function () {
|
||||
if (!this.$updatePlaceholder) {
|
||||
const originalRendererOn = this.renderer.on;
|
||||
this.renderer.on = function () {};
|
||||
originalPlaceholderSetter.call(this, ...arguments);
|
||||
this.renderer.on = originalRendererOn;
|
||||
|
||||
const originalUpdatePlaceholder = this.$updatePlaceholder;
|
||||
|
||||
this.$updatePlaceholder = function () {
|
||||
originalUpdatePlaceholder.call(this, ...arguments);
|
||||
|
||||
if (this.renderer.placeholderNode) {
|
||||
this.renderer.placeholderNode.innerHTML = this.$placeholder || "";
|
||||
}
|
||||
}.bind(this);
|
||||
|
||||
this.on("input", this.$updatePlaceholder);
|
||||
}
|
||||
|
||||
this.$updatePlaceholder();
|
||||
};
|
||||
}
|
||||
|
||||
// Args:
|
||||
// @content
|
||||
// @mode
|
||||
// @disabled (boolean)
|
||||
// @onChange
|
||||
// @editorId
|
||||
// @theme
|
||||
// @autofocus
|
||||
// @placeholder
|
||||
// @htmlPlaceholder (boolean)
|
||||
// @save
|
||||
// @submit
|
||||
// @setWarning
|
||||
export default class AceEditor extends Component {
|
||||
@service appEvents;
|
||||
|
||||
@tracked isLoading = true;
|
||||
editor = null;
|
||||
ace = null;
|
||||
skipChangePropagation = false;
|
||||
|
||||
setContent = modifier(() => {
|
||||
if (this.args.content === this.editor.getSession().getValue()) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.skipChangePropagation = true;
|
||||
this.editor.getSession().setValue(this.args.content || "");
|
||||
this.skipChangePropagation = false;
|
||||
});
|
||||
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
|
||||
loadAce().then((ace) => {
|
||||
if (this.isDestroying || this.isDestroyed) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.ace = ace;
|
||||
this.isLoading = false;
|
||||
});
|
||||
|
||||
this.appEvents.on("ace:resize", this.resize);
|
||||
window.addEventListener("resize", this.resize);
|
||||
this._darkModeListener = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
this._darkModeListener.addListener(this.setAceTheme);
|
||||
}
|
||||
|
||||
willDestroy() {
|
||||
super.willDestroy(...arguments);
|
||||
|
||||
this.editor?.destroy();
|
||||
|
||||
this._darkModeListener?.removeListener(this.setAceTheme);
|
||||
window.removeEventListener("resize", this.resize);
|
||||
this.appEvents.off("ace:resize", this.resize);
|
||||
}
|
||||
|
||||
@bind
|
||||
setupAce(element) {
|
||||
if (this.args.htmlPlaceholder) {
|
||||
overridePlaceholder(this.ace);
|
||||
}
|
||||
|
||||
this.ace.config.set("useWorker", false);
|
||||
|
||||
this.editor = this.ace.edit(element);
|
||||
this.editor.setShowPrintMargin(false);
|
||||
this.editor.setOptions({
|
||||
fontSize: "14px",
|
||||
placeholder: this.args.placeholder,
|
||||
});
|
||||
|
||||
const session = this.editor.getSession();
|
||||
session.setMode(`ace/mode/${this.mode}`);
|
||||
|
||||
this.editor.on("change", () => {
|
||||
if (!this.skipChangePropagation) {
|
||||
this.args.onChange?.(session.getValue());
|
||||
}
|
||||
});
|
||||
|
||||
if (this.args.save) {
|
||||
this.editor.commands.addCommand({
|
||||
name: "save",
|
||||
exec: () => this.args.save(),
|
||||
bindKey: { mac: "cmd-s", win: "ctrl-s" },
|
||||
});
|
||||
}
|
||||
if (this.args.submit) {
|
||||
this.editor.commands.addCommand({
|
||||
name: "submit",
|
||||
exec: () => this.args.submit(),
|
||||
bindKey: { mac: "cmd-enter", win: "ctrl-enter" },
|
||||
});
|
||||
}
|
||||
|
||||
this.editor.on("blur", () => this.warnSCSSDeprecations());
|
||||
|
||||
this.editor.$blockScrolling = Infinity;
|
||||
this.editor.renderer.setScrollMargin(10, 10);
|
||||
|
||||
element.setAttribute("data-editor", this.editor);
|
||||
this.changeDisabledState();
|
||||
this.warnSCSSDeprecations();
|
||||
|
||||
if (this.autofocus) {
|
||||
this.focus();
|
||||
}
|
||||
|
||||
this.setAceTheme();
|
||||
}
|
||||
|
||||
get mode() {
|
||||
return this.args.mode || "css";
|
||||
}
|
||||
|
||||
@bind
|
||||
editorIdChanged() {
|
||||
if (this.autofocus) {
|
||||
this.send("focus");
|
||||
}
|
||||
}
|
||||
|
||||
@bind
|
||||
modeChanged() {
|
||||
this.editor?.getSession().setMode(`ace/mode/${this.mode}`);
|
||||
}
|
||||
|
||||
@bind
|
||||
placeholderChanged() {
|
||||
this.editor?.setOptions({ placeholder: this.args.placeholder });
|
||||
}
|
||||
|
||||
@bind
|
||||
changeDisabledState() {
|
||||
this.editor?.setOptions({
|
||||
readOnly: this.args.disabled,
|
||||
highlightActiveLine: !this.args.disabled,
|
||||
highlightGutterLine: !this.args.disabled,
|
||||
});
|
||||
|
||||
this.editor?.container.parentNode.parentNode.setAttribute(
|
||||
"data-disabled",
|
||||
this.args.disabled
|
||||
);
|
||||
}
|
||||
|
||||
warnSCSSDeprecations() {
|
||||
if (
|
||||
this.mode !== "scss" ||
|
||||
this.args.editorId.startsWith("color_definitions") ||
|
||||
!this.editor
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
let warnings = this.args.content
|
||||
.split("\n")
|
||||
.map((line, row) => {
|
||||
if (line.match(COLOR_VARS_REGEX)) {
|
||||
return {
|
||||
row,
|
||||
column: 0,
|
||||
text: I18n.t("admin.customize.theme.scss_warning_inline"),
|
||||
type: "warning",
|
||||
};
|
||||
}
|
||||
})
|
||||
.filter(Boolean);
|
||||
|
||||
this.editor.getSession().setAnnotations(warnings);
|
||||
|
||||
this.args.setWarning?.(
|
||||
warnings.length
|
||||
? I18n.t("admin.customize.theme.scss_color_variables_warning")
|
||||
: false
|
||||
);
|
||||
}
|
||||
|
||||
@bind
|
||||
setAceTheme() {
|
||||
const schemeType = getComputedStyle(document.body)
|
||||
.getPropertyValue("--scheme-type")
|
||||
.trim();
|
||||
const aceTheme = schemeType === "dark" ? "chaos" : "chrome";
|
||||
|
||||
this.editor.setTheme(`ace/theme/${aceTheme}`);
|
||||
}
|
||||
|
||||
@bind
|
||||
resize() {
|
||||
this.editor?.resize();
|
||||
}
|
||||
|
||||
@bind
|
||||
focus() {
|
||||
if (this.editor) {
|
||||
this.editor.focus();
|
||||
this.editor.navigateFileEnd();
|
||||
}
|
||||
}
|
||||
|
||||
<template>
|
||||
<div class="ace-wrapper">
|
||||
<ConditionalLoadingSpinner @condition={{this.isLoading}} @size="small">
|
||||
<div
|
||||
{{didInsert this.setupAce}}
|
||||
{{this.setContent}}
|
||||
{{didUpdate this.editorIdChanged @editorId}}
|
||||
{{didUpdate this.modeChanged @mode}}
|
||||
{{didUpdate this.placeholderChanged @placeholder}}
|
||||
{{didUpdate this.changeDisabledState @disabled}}
|
||||
class="ace"
|
||||
...attributes
|
||||
>
|
||||
</div>
|
||||
</ConditionalLoadingSpinner>
|
||||
</div>
|
||||
</template>
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{{#if this.isLoading}}
|
||||
{{loading-spinner size="small"}}
|
||||
{{else}}
|
||||
<div class="ace" ...attributes>{{this.content}}</div>
|
||||
{{/if}}
|
||||
|
|
@ -1,262 +0,0 @@
|
|||
import Component from "@ember/component";
|
||||
import { action } from "@ember/object";
|
||||
import { next } from "@ember/runloop";
|
||||
import { service } from "@ember/service";
|
||||
import { classNames } from "@ember-decorators/component";
|
||||
import { observes } from "@ember-decorators/object";
|
||||
import loadAce from "discourse/lib/load-ace-editor";
|
||||
import { bind } from "discourse-common/utils/decorators";
|
||||
import I18n from "discourse-i18n";
|
||||
|
||||
const COLOR_VARS_REGEX =
|
||||
/\$(primary|secondary|tertiary|quaternary|header_background|header_primary|highlight|danger|success|love)(\s|;|-(low|medium|high))/g;
|
||||
|
||||
@classNames("ace-wrapper")
|
||||
export default class AceEditor extends Component {
|
||||
@service appEvents;
|
||||
|
||||
isLoading = true;
|
||||
mode = "css";
|
||||
disabled = false;
|
||||
htmlPlaceholder = false;
|
||||
_editor = null;
|
||||
_skipContentChangeEvent = null;
|
||||
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.appEvents.on("ace:resize", this.resize);
|
||||
window.addEventListener("resize", this.resize);
|
||||
this._darkModeListener = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
this._darkModeListener.addListener(this.setAceTheme);
|
||||
}
|
||||
|
||||
@observes("editorId")
|
||||
editorIdChanged() {
|
||||
if (this.autofocus) {
|
||||
this.send("focus");
|
||||
}
|
||||
}
|
||||
|
||||
didRender() {
|
||||
super.didRender(...arguments);
|
||||
this._skipContentChangeEvent = false;
|
||||
}
|
||||
|
||||
@observes("content")
|
||||
contentChanged() {
|
||||
const content = this.content || "";
|
||||
if (this._editor && !this._skipContentChangeEvent) {
|
||||
this._editor.getSession().setValue(content);
|
||||
}
|
||||
}
|
||||
|
||||
@observes("mode")
|
||||
modeChanged() {
|
||||
if (this._editor && !this._skipContentChangeEvent) {
|
||||
this._editor.getSession().setMode("ace/mode/" + this.mode);
|
||||
}
|
||||
}
|
||||
|
||||
@observes("placeholder")
|
||||
placeholderChanged() {
|
||||
if (this._editor) {
|
||||
this._editor.setOptions({
|
||||
placeholder: this.placeholder,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@observes("disabled")
|
||||
disabledStateChanged() {
|
||||
this.changeDisabledState();
|
||||
}
|
||||
|
||||
changeDisabledState() {
|
||||
const editor = this._editor;
|
||||
if (editor) {
|
||||
const disabled = this.disabled;
|
||||
editor.setOptions({
|
||||
readOnly: disabled,
|
||||
highlightActiveLine: !disabled,
|
||||
highlightGutterLine: !disabled,
|
||||
});
|
||||
editor.container.parentNode.setAttribute("data-disabled", disabled);
|
||||
}
|
||||
}
|
||||
|
||||
@action
|
||||
resize() {
|
||||
if (this._editor) {
|
||||
this._editor.resize();
|
||||
}
|
||||
}
|
||||
|
||||
didInsertElement() {
|
||||
super.didInsertElement(...arguments);
|
||||
this.setup();
|
||||
}
|
||||
|
||||
async setup() {
|
||||
const ace = await loadAce();
|
||||
|
||||
this.set("isLoading", false);
|
||||
|
||||
next(() => {
|
||||
if (this.htmlPlaceholder) {
|
||||
this._overridePlaceholder(ace);
|
||||
}
|
||||
|
||||
ace.config.set("useWorker", false);
|
||||
|
||||
if (!this.element || this.isDestroying || this.isDestroyed) {
|
||||
return;
|
||||
}
|
||||
const aceElement = this.element.querySelector(".ace");
|
||||
const editor = ace.edit(aceElement);
|
||||
editor.setShowPrintMargin(false);
|
||||
editor.setOptions({
|
||||
fontSize: "14px",
|
||||
placeholder: this.placeholder,
|
||||
});
|
||||
editor.getSession().setMode("ace/mode/" + this.mode);
|
||||
editor.on("change", () => {
|
||||
if (this.onChange) {
|
||||
this.onChange(editor.getSession().getValue());
|
||||
} else {
|
||||
this._skipContentChangeEvent = true;
|
||||
this.set("content", editor.getSession().getValue());
|
||||
}
|
||||
});
|
||||
if (this.save) {
|
||||
editor.commands.addCommand({
|
||||
name: "save",
|
||||
exec: () => {
|
||||
this.save();
|
||||
},
|
||||
bindKey: { mac: "cmd-s", win: "ctrl-s" },
|
||||
});
|
||||
}
|
||||
if (this.submit) {
|
||||
editor.commands.addCommand({
|
||||
name: "submit",
|
||||
exec: () => {
|
||||
this.submit();
|
||||
},
|
||||
bindKey: { mac: "cmd-enter", win: "ctrl-enter" },
|
||||
});
|
||||
}
|
||||
|
||||
editor.on("blur", () => {
|
||||
this.warnSCSSDeprecations();
|
||||
});
|
||||
|
||||
editor.$blockScrolling = Infinity;
|
||||
editor.renderer.setScrollMargin(10, 10);
|
||||
|
||||
this.element.setAttribute("data-editor", editor);
|
||||
this._editor = editor;
|
||||
this.changeDisabledState();
|
||||
this.warnSCSSDeprecations();
|
||||
|
||||
if (this.autofocus) {
|
||||
this.send("focus");
|
||||
}
|
||||
|
||||
this.setAceTheme();
|
||||
});
|
||||
}
|
||||
|
||||
willDestroyElement() {
|
||||
if (this._editor) {
|
||||
this._editor.destroy();
|
||||
this._editor = null;
|
||||
}
|
||||
|
||||
super.willDestroyElement(...arguments);
|
||||
|
||||
this._darkModeListener?.removeListener(this.setAceTheme);
|
||||
window.removeEventListener("resize", this.resize);
|
||||
this.appEvents.off("ace:resize", this.resize);
|
||||
}
|
||||
|
||||
get aceTheme() {
|
||||
const schemeType = getComputedStyle(document.body)
|
||||
.getPropertyValue("--scheme-type")
|
||||
.trim();
|
||||
|
||||
return schemeType === "dark" ? "chaos" : "chrome";
|
||||
}
|
||||
|
||||
@bind
|
||||
setAceTheme() {
|
||||
this._editor.setTheme(`ace/theme/${this.aceTheme}`);
|
||||
}
|
||||
|
||||
warnSCSSDeprecations() {
|
||||
if (
|
||||
this.mode !== "scss" ||
|
||||
this.editorId.startsWith("color_definitions") ||
|
||||
!this._editor
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
let warnings = this.content
|
||||
.split("\n")
|
||||
.map((line, row) => {
|
||||
if (line.match(COLOR_VARS_REGEX)) {
|
||||
return {
|
||||
row,
|
||||
column: 0,
|
||||
text: I18n.t("admin.customize.theme.scss_warning_inline"),
|
||||
type: "warning",
|
||||
};
|
||||
}
|
||||
})
|
||||
.filter(Boolean);
|
||||
|
||||
this._editor.getSession().setAnnotations(warnings);
|
||||
|
||||
this.setWarning?.(
|
||||
warnings.length
|
||||
? I18n.t("admin.customize.theme.scss_color_variables_warning")
|
||||
: false
|
||||
);
|
||||
}
|
||||
|
||||
@action
|
||||
focus() {
|
||||
if (this._editor) {
|
||||
this._editor.focus();
|
||||
this._editor.navigateFileEnd();
|
||||
}
|
||||
}
|
||||
|
||||
_overridePlaceholder(ace) {
|
||||
const originalPlaceholderSetter =
|
||||
ace.config.$defaultOptions.editor.placeholder.set;
|
||||
|
||||
ace.config.$defaultOptions.editor.placeholder.set = function () {
|
||||
if (!this.$updatePlaceholder) {
|
||||
const originalRendererOn = this.renderer.on;
|
||||
this.renderer.on = function () {};
|
||||
originalPlaceholderSetter.call(this, ...arguments);
|
||||
this.renderer.on = originalRendererOn;
|
||||
|
||||
const originalUpdatePlaceholder = this.$updatePlaceholder;
|
||||
|
||||
this.$updatePlaceholder = function () {
|
||||
originalUpdatePlaceholder.call(this, ...arguments);
|
||||
|
||||
if (this.renderer.placeholderNode) {
|
||||
this.renderer.placeholderNode.innerHTML = this.$placeholder || "";
|
||||
}
|
||||
}.bind(this);
|
||||
|
||||
this.on("input", this.$updatePlaceholder);
|
||||
}
|
||||
|
||||
this.$updatePlaceholder();
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -24,10 +24,10 @@ export default class FKControlCode extends Component {
|
|||
|
||||
<template>
|
||||
<AceEditor
|
||||
@content={{readonly this.initialValue}}
|
||||
@content={{this.initialValue}}
|
||||
@onChange={{this.handleInput}}
|
||||
@mode={{@lang}}
|
||||
@disabled={{@field.disabled}}
|
||||
@onChange={{this.handleInput}}
|
||||
class="form-kit__control-code"
|
||||
style={{this.style}}
|
||||
...attributes
|
||||
|
|
|
|||
|
|
@ -0,0 +1,56 @@
|
|||
import { render } from "@ember/test-helpers";
|
||||
import { module, test } from "qunit";
|
||||
import AceEditor from "discourse/components/ace-editor";
|
||||
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
|
||||
|
||||
module("Integration | Component | ace-editor", function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
test("css editor", async function (assert) {
|
||||
await render(<template><AceEditor @mode="css" /></template>);
|
||||
assert.dom(".ace_editor").exists("it renders the ace editor");
|
||||
});
|
||||
|
||||
test("html editor", async function (assert) {
|
||||
await render(<template>
|
||||
<AceEditor @mode="html" @content="<b>wat</b>" />
|
||||
</template>);
|
||||
assert.dom(".ace_editor").exists("it renders the ace editor");
|
||||
});
|
||||
|
||||
test("sql editor", async function (assert) {
|
||||
await render(<template>
|
||||
<AceEditor @mode="sql" @content="SELECT * FROM users" />
|
||||
</template>);
|
||||
assert.dom(".ace_editor").exists("it renders the ace editor");
|
||||
});
|
||||
|
||||
test("yaml editor", async function (assert) {
|
||||
await render(<template>
|
||||
<AceEditor @mode="yaml" @content="test: true" />
|
||||
</template>);
|
||||
assert.dom(".ace_editor").exists("it renders the ace editor");
|
||||
});
|
||||
|
||||
test("javascript editor", async function (assert) {
|
||||
await render(<template>
|
||||
<AceEditor @mode="javascript" @content="test: true" />
|
||||
</template>);
|
||||
assert.dom(".ace_editor").exists("it renders the ace editor");
|
||||
});
|
||||
|
||||
test("disabled editor", async function (assert) {
|
||||
await render(<template>
|
||||
<AceEditor
|
||||
@mode="sql"
|
||||
@content="SELECT * FROM users"
|
||||
@disabled={{true}}
|
||||
/>
|
||||
</template>);
|
||||
|
||||
assert.dom(".ace_editor").exists("it renders the ace editor");
|
||||
assert
|
||||
.dom(".ace-wrapper")
|
||||
.hasAttribute("data-disabled", "true", "it has a data-disabled attr");
|
||||
});
|
||||
});
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
import { render } from "@ember/test-helpers";
|
||||
import { hbs } from "ember-cli-htmlbars";
|
||||
import { module, test } from "qunit";
|
||||
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
|
||||
import { count, exists } from "discourse/tests/helpers/qunit-helpers";
|
||||
|
||||
module("Integration | Component | ace-editor", function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
test("css editor", async function (assert) {
|
||||
await render(hbs`<AceEditor @mode="css" />`);
|
||||
assert.ok(exists(".ace_editor"), "it renders the ace editor");
|
||||
});
|
||||
|
||||
test("html editor", async function (assert) {
|
||||
await render(hbs`<AceEditor @mode="html" @content="<b>wat</b>" />`);
|
||||
assert.ok(exists(".ace_editor"), "it renders the ace editor");
|
||||
});
|
||||
|
||||
test("sql editor", async function (assert) {
|
||||
await render(hbs`<AceEditor @mode="sql" @content="SELECT * FROM users" />`);
|
||||
assert.ok(exists(".ace_editor"), "it renders the ace editor");
|
||||
});
|
||||
|
||||
test("yaml editor", async function (assert) {
|
||||
await render(hbs`<AceEditor @mode="yaml" @content="test: true" />`);
|
||||
assert.ok(exists(".ace_editor"), "it renders the ace editor");
|
||||
});
|
||||
|
||||
test("javascript editor", async function (assert) {
|
||||
await render(hbs`<AceEditor @mode="javascript" @content="test: true" />`);
|
||||
assert.ok(exists(".ace_editor"), "it renders the ace editor");
|
||||
});
|
||||
|
||||
test("disabled editor", async function (assert) {
|
||||
await render(hbs`
|
||||
<AceEditor @mode="sql" @content="SELECT * FROM users" @disabled={{true}} />
|
||||
`);
|
||||
|
||||
assert.ok(exists(".ace_editor"), "it renders the ace editor");
|
||||
assert.strictEqual(
|
||||
count(".ace-wrapper[data-disabled]"),
|
||||
1,
|
||||
"it has a data-disabled attr"
|
||||
);
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue