DEV: Convert topic-title to glimmer/gjs (#26775)

app/assets/javascripts/discourse/app/components/topic-title.gjs

@@ -0,0 +1,71 @@
+import Component from "@glimmer/component";
+import { hash } from "@ember/helper";
+import { on } from "@ember/modifier";
+import { action } from "@ember/object";
+import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import PluginOutlet from "discourse/components/plugin-outlet";
+import { isiPad } from "discourse/lib/utilities";
+
+export let topicTitleDecorators = [];
+
+export function addTopicTitleDecorator(decorator) {
+  topicTitleDecorators.push(decorator);
+}
+
+export function resetTopicTitleDecorators() {
+  topicTitleDecorators.length = 0;
+}
+
+export default class TopicTitle extends Component {
+  @action
+  applyDecorators(element) {
+    const fancyTitle = element.querySelector(".fancy-title");
+
+    if (fancyTitle) {
+      topicTitleDecorators?.forEach((cb) =>
+        cb(this.args.model, fancyTitle, "topic-title")
+      );
+    }
+  }
+
+  @action
+  keyDown(e) {
+    if (document.body.classList.contains("modal-open")) {
+      return;
+    }
+
+    if (e.key === "Escape") {
+      e.preventDefault();
+      this.args.cancelled();
+    } else if (
+      e.key === "Enter" &&
+      (e.ctrlKey || e.metaKey || (isiPad() && e.altKey))
+    ) {
+      // Ctrl+Enter or Cmd+Enter
+      // iPad physical keyboard does not offer Command or Ctrl detection
+      // so use Alt+Enter
+      e.preventDefault();
+      this.args.save(undefined, e);
+    }
+  }
+
+  <template>
+    {{! template-lint-disable no-invalid-interactive }}
+    <div
+      {{didInsert this.applyDecorators}}
+      {{on "keydown" this.keyDown}}
+      id="topic-title"
+      class="container"
+    >
+      <div class="title-wrapper">
+        {{yield}}
+      </div>
+
+      <PluginOutlet
+        @name="topic-title"
+        @connectorTagName="div"
+        @outletArgs={{hash model=@model}}
+      />
+    </div>
+  </template>
+}

app/assets/javascripts/discourse/app/components/topic-title.hbs

@@ -1,12 +0,0 @@
-<div class="container">
-  <div class="title-wrapper">
-    {{yield}}
-  </div>
-  <span>
-    <PluginOutlet
-      @name="topic-title"
-      @connectorTagName="div"
-      @outletArgs={{hash model=this.model}}
-    />
-  </span>
-</div>

app/assets/javascripts/discourse/app/components/topic-title.js

@@ -1,53 +0,0 @@
-import Component from "@ember/component";
-import { schedule } from "@ember/runloop";
-import { isiPad } from "discourse/lib/utilities";
-
-export let topicTitleDecorators = [];
-
-export function addTopicTitleDecorator(decorator) {
-  topicTitleDecorators.push(decorator);
-}
-
-export function resetTopicTitleDecorators() {
-  topicTitleDecorators.length = 0;
-}
-
-export default Component.extend({
-  elementId: "topic-title",
-
-  didInsertElement() {
-    this._super(...arguments);
-
-    schedule("afterRender", () => {
-      if (this.element && !this.isDestroying && !this.isDestroyed) {
-        const fancyTitle = this.element.querySelector(".fancy-title");
-
-        fancyTitle &&
-          topicTitleDecorators &&
-          topicTitleDecorators.forEach((cb) =>
-            cb(this.model, fancyTitle, "topic-title")
-          );
-      }
-    });
-  },
-
-  keyDown(e) {
-    if (document.body.classList.contains("modal-open")) {
-      return;
-    }
-
-    if (e.key === "Escape") {
-      e.preventDefault();
-      this.cancelled();
-    } else if (
-      e.key === "Enter" &&
-      (e.ctrlKey || e.metaKey || (isiPad() && e.altKey))
-    ) {
-      // Ctrl+Enter or Cmd+Enter
-      // iPad physical keyboard does not offer Command or Ctrl detection
-      // so use Alt+Enter
-      e.preventDefault();
-      this.save(undefined, e);
-    }
-  },
-});