FEATURE: Remember adjusted composer height (#18385)

This PR makes adjusted composer height persistent for a user. After dragging to change the composer height, the updated height will be stored in localStorage and will be restored when opening the composer again.

app/assets/javascripts/discourse/app/components/composer-body.js

@@ -103,6 +103,10 @@ export default Component.extend(KeyEnterEscape, {
     size = Math.max(minHeight, size);
 
     this.set("composer.composerHeight", `${size}px`);
+    this.keyValueStore.set({
+      key: "composerHeight",
+      value: this.get("composer.composerHeight"),
+    });
     document.documentElement.style.setProperty(
       "--composer-height",
       size ? `${size}px` : ""

app/assets/javascripts/discourse/app/controllers/composer.js

@@ -1253,11 +1253,7 @@ export default Controller.extend({
       this.model.set("reply", opts.topicBody);
     }
 
-    // The two custom properties below can be overriden by themes/plugins to set different default composer heights.
-    const defaultComposerHeight =
-      this.model.action === "reply"
-        ? "var(--reply-composer-height, 300px)"
-        : "var(--new-topic-composer-height, 400px)";
+    const defaultComposerHeight = this._getDefaultComposerHeight();
 
     this.set("model.composerHeight", defaultComposerHeight);
     document.documentElement.style.setProperty(
@@ -1266,6 +1262,19 @@ export default Controller.extend({
     );
   },
 
+  _getDefaultComposerHeight() {
+    if (this.keyValueStore.getItem("composerHeight")) {
+      return this.keyValueStore.getItem("composerHeight");
+    }
+
+    // The two custom properties below can be overriden by themes/plugins to set different default composer heights.
+    if (this.model.action === "reply") {
+      return "var(--reply-composer-height, 300px)";
+    } else {
+      return "var(--new-topic-composer-height, 400px)";
+    }
+  },
+
   viewNewReply() {
     DiscourseURL.routeTo(this.get("model.createdPost.url"));
     this.close();

app/assets/javascripts/discourse/tests/acceptance/composer-test.js

@@ -1,4 +1,11 @@
-import { click, currentURL, fillIn, settled, visit } from "@ember/test-helpers";
+import {
+  click,
+  currentURL,
+  fillIn,
+  settled,
+  triggerEvent,
+  visit,
+} from "@ember/test-helpers";
 import { toggleCheckDraftPopup } from "discourse/controllers/composer";
 import { cloneJSON } from "discourse-common/lib/object";
 import TopicFixtures from "discourse/tests/fixtures/topic";
@@ -96,6 +103,28 @@ acceptance("Composer", function (needs) {
     );
   });
 
+  test("Composer height adjustment", async function (assert) {
+    await visit("/");
+    await click("#create-topic");
+    await triggerEvent(document.querySelector(".grippie"), "mousedown");
+    await triggerEvent(document.querySelector(".grippie"), "mousemove");
+    await triggerEvent(document.querySelector(".grippie"), "mouseup");
+    await visit("/"); // reload page
+    await click("#create-topic");
+
+    const expectedHeight = localStorage.getItem(
+      "__test_discourse_composerHeight"
+    );
+    const actualHeight =
+      document.documentElement.style.getPropertyValue("--composer-height");
+
+    assert.strictEqual(
+      expectedHeight,
+      actualHeight,
+      "Updated height is persistent"
+    );
+  });
+
   test("composer controls", async function (assert) {
     await visit("/");
     assert.ok(exists("#create-topic"), "the create button is visible");