DEV: Convert ace-editor to glimmer/gjs (#28492)

app/assets/javascripts/admin/addon/components/admin-theme-editor.hbs

@@ -120,6 +120,7 @@
 
 <AceEditor
   @content={{this.activeSection}}
+  @onChange={{fn (mut this.activeSection)}}
   @editorId={{this.editorId}}
   @mode={{this.activeSectionMode}}
   @autofocus="true"

app/assets/javascripts/admin/addon/components/email-styles-editor.hbs

@@ -27,6 +27,7 @@
 
 <AceEditor
   @content={{this.editorContents}}
+  @onChange={{fn (mut this.editorContents)}}
   @mode={{this.currentEditorMode}}
   @editorId={{this.editorId}}
   @save={{@save}}

app/assets/javascripts/admin/addon/components/form-template/form.hbs

@@ -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">

app/assets/javascripts/admin/addon/components/theme-settings-editor.hbs

@@ -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">

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();
+    }
+  }
+
+  <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>
+}

app/assets/javascripts/discourse/app/components/ace-editor.hbs

@@ -1,5 +0,0 @@
-{{#if this.isLoading}}
-  {{loading-spinner size="small"}}
-{{else}}
-  <div class="ace" ...attributes>{{this.content}}</div>
-{{/if}}

app/assets/javascripts/discourse/app/components/ace-editor.js

@@ -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();
-    };
-  }
-}

app/assets/javascripts/discourse/app/form-kit/components/fk/control/code.gjs

@@ -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

app/assets/javascripts/discourse/tests/integration/components/ace-editor-test.gjs

@@ -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");
+  });
+});

app/assets/javascripts/discourse/tests/integration/components/ace-editor-test.js

@@ -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"
-    );
-  });
-});