Set Tinymce editor form min-height

app/javascript/alchemy_admin/components/tinymce.js

@@ -100,12 +100,19 @@ class Tinymce extends AlchemyHTMLElement {
       }
     })
 
-    return {
+    const config = {
       ...Alchemy.TinymceDefaults,
       ...customConfig,
       language: currentLocale(),
       selector: `#${this.editorId}`
     }
+
+    // Tinymce has a height of 400px by default
+    // if the element has a min_height set, we use this value for the height as well
+    // so we do not need to set both values in the element configuration
+    config.height = config.min_height
+
+    return config
   }
 
   get editorId() {

lib/alchemy/tinymce.rb

@@ -22,7 +22,6 @@ module Tinymce
       width: "auto",
       resize: true,
       min_height: 250,
-      height: 250,
       menubar: false,
       statusbar: true,
       toolbar: [

spec/javascript/alchemy_admin/components/tinymce.spec.js

@@ -52,6 +52,29 @@ describe("alchemy-tinymce", () => {
         <textarea id="${textareaId}"></textarea>
       </alchemy-tinymce>
     `
+      // The tinymce configuration is set in the global Alchemy object
+      // because we translate the configuration from the Rails backend
+      // into the JS world.
+      Alchemy.TinymceDefaults = {
+        skin: "alchemy",
+        content_css: "/assets/tinymce/skins/content/alchemy/content.min.css",
+        icons: "remixicons",
+        width: "auto",
+        resize: true,
+        min_height: 250,
+        menubar: false,
+        statusbar: true,
+        toolbar: [
+          "bold italic underline | strikethrough subscript superscript | numlist bullist indent outdent | removeformat | fullscreen",
+          "pastetext charmap hr | undo redo | alchemy_link unlink anchor | code"
+        ],
+        fix_list_elements: true,
+        convert_urls: false,
+        entity_encoding: "raw",
+        paste_as_text: true,
+        element_format: "html",
+        branding: false
+      }
       component = renderComponent("alchemy-tinymce", html)
     })
 
@@ -71,6 +94,22 @@ describe("alchemy-tinymce", () => {
     it("should set the selector to textarea id", () => {
       expect(component.configuration.selector).toEqual("#tinymce-textarea")
     })
+
+    it("sets height to min_height from defaults", () => {
+      expect(component.configuration.height).toEqual(250)
+    })
+
+    describe("if min-height is set on component", () => {
+      it("uses that value for height", () => {
+        const html = `
+          <alchemy-tinymce toolbar="bold italic" foo-bar="bar | foo" min-height="400">
+            <textarea id="${textareaId}"></textarea>
+          </alchemy-tinymce>
+        `
+        component = renderComponent("alchemy-tinymce", html)
+        expect(component.configuration.height).toEqual(400)
+      })
+    })
   })
 
   describe("minHeight", () => {