diff --git a/app/assets/javascripts/admin/addon/components/admin-theme-editor.hbs b/app/assets/javascripts/admin/addon/components/admin-theme-editor.hbs index d396dbbb93d..d5437664c3e 100644 --- a/app/assets/javascripts/admin/addon/components/admin-theme-editor.hbs +++ b/app/assets/javascripts/admin/addon/components/admin-theme-editor.hbs @@ -120,6 +120,7 @@
- +
diff --git a/app/assets/javascripts/admin/addon/components/theme-settings-editor.hbs b/app/assets/javascripts/admin/addon/components/theme-settings-editor.hbs index d3884cfdb5f..3a74647fdca 100644 --- a/app/assets/javascripts/admin/addon/components/theme-settings-editor.hbs +++ b/app/assets/javascripts/admin/addon/components/theme-settings-editor.hbs @@ -1,6 +1,10 @@
- + {{#each this.errors as |error|}}
diff --git a/app/assets/javascripts/discourse/app/components/ace-editor.gjs b/app/assets/javascripts/discourse/app/components/ace-editor.gjs new file mode 100644 index 00000000000..5ba00a62dd1 --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/ace-editor.gjs @@ -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(); + } + } + + +} diff --git a/app/assets/javascripts/discourse/app/components/ace-editor.hbs b/app/assets/javascripts/discourse/app/components/ace-editor.hbs deleted file mode 100644 index 8c17226c000..00000000000 --- a/app/assets/javascripts/discourse/app/components/ace-editor.hbs +++ /dev/null @@ -1,5 +0,0 @@ -{{#if this.isLoading}} - {{loading-spinner size="small"}} -{{else}} -
{{this.content}}
-{{/if}} \ No newline at end of file diff --git a/app/assets/javascripts/discourse/app/components/ace-editor.js b/app/assets/javascripts/discourse/app/components/ace-editor.js deleted file mode 100644 index 17fe7a6d193..00000000000 --- a/app/assets/javascripts/discourse/app/components/ace-editor.js +++ /dev/null @@ -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(); - }; - } -} diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/code.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/code.gjs index 7dada72dd26..fc6edb72bdc 100644 --- a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/code.gjs +++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/code.gjs @@ -24,10 +24,10 @@ export default class FKControlCode extends Component { ); + assert.dom(".ace_editor").exists("it renders the ace editor"); + }); + + test("html editor", async function (assert) { + await render(); + assert.dom(".ace_editor").exists("it renders the ace editor"); + }); + + test("sql editor", async function (assert) { + await render(); + assert.dom(".ace_editor").exists("it renders the ace editor"); + }); + + test("yaml editor", async function (assert) { + await render(); + assert.dom(".ace_editor").exists("it renders the ace editor"); + }); + + test("javascript editor", async function (assert) { + await render(); + assert.dom(".ace_editor").exists("it renders the ace editor"); + }); + + test("disabled editor", async function (assert) { + await render(); + + assert.dom(".ace_editor").exists("it renders the ace editor"); + assert + .dom(".ace-wrapper") + .hasAttribute("data-disabled", "true", "it has a data-disabled attr"); + }); +}); diff --git a/app/assets/javascripts/discourse/tests/integration/components/ace-editor-test.js b/app/assets/javascripts/discourse/tests/integration/components/ace-editor-test.js deleted file mode 100644 index ed744e9d0b6..00000000000 --- a/app/assets/javascripts/discourse/tests/integration/components/ace-editor-test.js +++ /dev/null @@ -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``); - assert.ok(exists(".ace_editor"), "it renders the ace editor"); - }); - - test("html editor", async function (assert) { - await render(hbs``); - assert.ok(exists(".ace_editor"), "it renders the ace editor"); - }); - - test("sql editor", async function (assert) { - await render(hbs``); - assert.ok(exists(".ace_editor"), "it renders the ace editor"); - }); - - test("yaml editor", async function (assert) { - await render(hbs``); - assert.ok(exists(".ace_editor"), "it renders the ace editor"); - }); - - test("javascript editor", async function (assert) { - await render(hbs``); - assert.ok(exists(".ace_editor"), "it renders the ace editor"); - }); - - test("disabled editor", async function (assert) { - await render(hbs` - - `); - - assert.ok(exists(".ace_editor"), "it renders the ace editor"); - assert.strictEqual( - count(".ace-wrapper[data-disabled]"), - 1, - "it has a data-disabled attr" - ); - }); -});