FIX: supports height/preview form-kit composer (#31121)

- `@height` was supported but not working correctly, this is now fixed
and tested
- `@preview` was not supported, we would always hide the preview in form
kit. You now have control over this, default `false`.

app/assets/javascripts/discourse/app/form-kit/components/fk/control-wrapper.gjs

@@ -105,6 +105,7 @@ export default class FKControlWrapper extends Component {
           @before={{@before}}
           @after={{@after}}
           @height={{@height}}
+          @preview={{@preview}}
           @selection={{@selection}}
           id={{@field.id}}
           name={{@field.name}}

app/assets/javascripts/discourse/app/form-kit/components/fk/control/composer.gjs

@@ -2,6 +2,7 @@ import Component from "@glimmer/component";
 import { action } from "@ember/object";
 import { htmlSafe } from "@ember/template";
 import DEditor from "discourse/components/d-editor";
+import concatClass from "discourse/helpers/concat-class";
 import { escapeExpression } from "discourse/lib/utilities";
 
 export default class FKControlComposer extends Component {
@@ -13,7 +14,7 @@ export default class FKControlComposer extends Component {
   }
 
   get style() {
-    if (this.args.height) {
+    if (!this.args.height) {
       return;
     }
 
@@ -25,7 +26,10 @@ export default class FKControlComposer extends Component {
       @value={{readonly @field.value}}
       @change={{this.handleInput}}
       @disabled={{@field.disabled}}
-      class="form-kit__control-composer"
+      class={{concatClass
+        "form-kit__control-composer"
+        (if @preview "--preview")
+      }}
       style={{this.style}}
       @textAreaId={{@field.id}}
     />

app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/composer-test.gjs

@@ -44,5 +44,41 @@ module(
 
       assert.dom(".d-editor-input").hasAttribute("disabled");
     });
+
+    test("@height", async function (assert) {
+      await render(<template>
+        <Form as |form|>
+          <form.Field @name="foo" @title="Foo" as |field|>
+            <field.Composer @height={{42}} />
+          </form.Field>
+        </Form>
+      </template>);
+
+      assert
+        .dom(".form-kit__control-composer")
+        .hasAttribute("style", "height: 42px");
+    });
+
+    test("@preview", async function (assert) {
+      await render(<template>
+        <Form as |form|>
+          <form.Field @name="foo" @title="Foo" as |field|>
+            <field.Composer />
+          </form.Field>
+        </Form>
+      </template>);
+
+      assert.dom(".form-kit__control-composer.--preview").doesNotExist();
+
+      await render(<template>
+        <Form as |form|>
+          <form.Field @name="foo" @title="Foo" as |field|>
+            <field.Composer @preview={{true}} />
+          </form.Field>
+        </Form>
+      </template>);
+
+      assert.dom(".form-kit__control-composer.--preview").exists();
+    });
   }
 );

app/assets/stylesheets/common/form-kit/_control-composer.scss

@@ -7,6 +7,12 @@
     display: none;
   }
 
+  &.--preview {
+    .d-editor-preview-wrapper {
+      display: block;
+    }
+  }
+
   .d-editor-button-bar {
     > .btn {
       border-radius: 0;