From 9d9c48fcb867b6ffd88e84f670a3e084a8d9bea7 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Thu, 25 Aug 2022 18:12:35 -0400
Subject: [PATCH] DEV: allow custom composer heights in CSS (#18094)

---
 app/assets/javascripts/discourse/app/controllers/composer.js | 5 ++++-
 .../javascripts/discourse/tests/acceptance/composer-test.js  | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/controllers/composer.js b/app/assets/javascripts/discourse/app/controllers/composer.js
index 3e990c07451..574b992653c 100644
--- a/app/assets/javascripts/discourse/app/controllers/composer.js
+++ b/app/assets/javascripts/discourse/app/controllers/composer.js
@@ -1235,8 +1235,11 @@ 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" ? "300px" : "400px";
+      this.model.action === "reply"
+        ? "var(--reply-composer-height, 300px)"
+        : "var(--new-topic-composer-height, 400px)";
 
     this.set("model.composerHeight", defaultComposerHeight);
     document.documentElement.style.setProperty(
diff --git a/app/assets/javascripts/discourse/tests/acceptance/composer-test.js b/app/assets/javascripts/discourse/tests/acceptance/composer-test.js
index 2ec16f1854c..a38a59ce2ea 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/composer-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/composer-test.js
@@ -65,7 +65,7 @@ acceptance("Composer", function (needs) {
 
     assert.strictEqual(
       document.documentElement.style.getPropertyValue("--composer-height"),
-      "400px",
+      "var(--new-topic-composer-height, 400px)",
       "sets --composer-height to 400px when creating topic"
     );
 
@@ -83,7 +83,7 @@ acceptance("Composer", function (needs) {
     await click(".toggle-fullscreen");
     assert.strictEqual(
       document.documentElement.style.getPropertyValue("--composer-height"),
-      "400px",
+      "var(--new-topic-composer-height, 400px)",
       "sets --composer-height back to 400px when composer is opened from draft mode"
     );