diff --git a/app/assets/javascripts/discourse/app/components/composer-body.js b/app/assets/javascripts/discourse/app/components/composer-body.js index 15604628423..0827c1f3ad4 100644 --- a/app/assets/javascripts/discourse/app/components/composer-body.js +++ b/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` : "" diff --git a/app/assets/javascripts/discourse/app/controllers/composer.js b/app/assets/javascripts/discourse/app/controllers/composer.js index ac4bf19037d..3463f6f1d77 100644 --- a/app/assets/javascripts/discourse/app/controllers/composer.js +++ b/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(); diff --git a/app/assets/javascripts/discourse/tests/acceptance/composer-test.js b/app/assets/javascripts/discourse/tests/acceptance/composer-test.js index 7ebab8402c1..88c616e3fd3 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/composer-test.js +++ b/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");