move toward input edit

jordanvidrine · jordanvidrine · commit 57e192bc0770 · 2025-05-22T19:11:22.000-05:00
diff --git a/app/assets/javascripts/discourse/app/controllers/topic.js b/app/assets/javascripts/discourse/app/controllers/topic.js
@@ -8,6 +8,7 @@ import { service } from "@ember/service";
 import { isEmpty, isPresent } from "@ember/utils";
 import { observes } from "@ember-decorators/object";
 import BufferedProxy from "ember-buffered-proxy/proxy";
+import { log } from "qunit";
 import { Promise } from "rsvp";
 import {
   CLOSE_INITIATED_BY_BUTTON,
@@ -374,6 +375,15 @@ export default class TopicController extends Controller {
     }
   }
 
+  @action
+  autoResize(event) {
+    const textArea = event.target;
+    const scrollHeight = textArea.scrollHeight;
+
+    textArea.style.height = "auto";
+    textArea.style.height = scrollHeight + "px";
+  }
+
   @action
   jumpTop(event) {
     if (event && wantsNewWindow(event)) {
diff --git a/app/assets/javascripts/discourse/app/templates/topic.gjs b/app/assets/javascripts/discourse/app/templates/topic.gjs
@@ -1,3 +1,4 @@
+import { Textarea } from "@ember/component";
 import { array, concat, fn, hash } from "@ember/helper";
 import { on } from "@ember/modifier";
 import { getProperties } from "@ember/object";
@@ -23,7 +24,6 @@ import SelectedPosts from "discourse/components/selected-posts";
 import SharedDraftControls from "discourse/components/shared-draft-controls";
 import SignupCta from "discourse/components/signup-cta";
 import SlowModeInfo from "discourse/components/slow-mode-info";
-import TextField from "discourse/components/text-field";
 import TopicAdminMenu from "discourse/components/topic-admin-menu";
 import TopicCategory from "discourse/components/topic-category";
 import TopicFooterButtons from "discourse/components/topic-footer-buttons";
@@ -120,11 +120,14 @@ export default RouteTemplate(
                         buffered=@controller.buffered
                       }}
                     >
-                      <TextField
+                      <Textarea
                         @id="edit-title"
                         @value={{@controller.buffered.title}}
                         @maxlength={{@controller.siteSettings.max_topic_title_length}}
-                        @autofocus="true"
+                        autofocus="true"
+                        id="edit-title"
+                        {{on "input" @controller.autoResize}}
+                        {{on "focusin" @controller.autoResize}}
                       />
                     </PluginOutlet>
                   </div>
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
@@ -192,7 +192,6 @@
         outline: 2px solid transparent;
         border-radius: var(--d-border-radius);
         transition: outline ease-in-out 0.2s;
-        padding: 0.25rem;
         transition-delay: 0.1s;
       }
 
@@ -207,6 +206,20 @@
       &.editing-topic {
         transition: none;
       }
+
+      &.editing-topic #edit-title {
+        border: none;
+        font-size: var(--font-up-4);
+        line-height: var(--line-height-medium);
+        font-weight: bold;
+        padding: 0;
+        resize: none;
+        height: var(--font-up-4);
+      }
+
+      &.editing-topic #edit-title:focus {
+        outline: none;
+      }
     }
 
     &.can-edit-topic .title-wrapper .d-icon {
