feat: use textarea for longer additional promtp

includes/Api.php

@@ -22,7 +22,7 @@ public function register_routes(): void {
 					'user_prompt'   => [
 						'required'          => false,
 						'type'              => 'string',
-						'sanitize_callback' => 'sanitize_text_field',
+						'sanitize_callback' => 'sanitize_textarea_field',
 					],
 					'save'          => [
 						'required'    => false,

src/components/AdditionalPromptControl.tsx

@@ -0,0 +1,35 @@
+import type { ComponentProps } from "react";
+import { TextareaControl } from "@wordpress/components";
+import { __, _x } from "@wordpress/i18n";
+
+interface AdditionalPromptControlProps
+  extends ComponentProps<typeof TextareaControl> {}
+
+export default function AdditionalPromptControl({
+  rows = 1,
+  ...props
+}: AdditionalPromptControlProps) {
+  return (
+    <TextareaControl
+      rows={rows}
+      label={__(
+        "Additional prompt (optional)",
+        "alt-text-generator-gpt-vision",
+      )}
+      help={__(
+        "Provide additional instructions for AI to tailor the alt text generation, such as including specific keywords for SEO.",
+        "alt-text-generator-gpt-vision",
+      )}
+      placeholder={_x(
+        'e.g. Include terms like "AI", "robotics"',
+        "Additional prompt placeholder",
+        "alt-text-generator-gpt-vision",
+      )}
+      style={{
+        fieldSizing: "content",
+        maxHeight: "8em",
+      }}
+      {...props}
+    />
+  );
+}

src/components/BulkGenerateModal.tsx

@@ -4,6 +4,7 @@ import {
   Flex,
   FlexItem,
   Modal,
+  TextareaControl,
   TextControl,
   ToggleControl,
 } from "@wordpress/components";
@@ -15,6 +16,7 @@ import BulkGenerationTable from "./BulkGenerationTable";
 import generateAltText from "../utils/generateAltText";
 import sleep from "../utils/sleep";
 import useAttachments from "../hooks/useAttachments";
+import AdditionalPromptControl from "./AdditionalPromptControl";
 
 export default function BulkGenerateModal({
   attachmentIds,
@@ -174,20 +176,8 @@ export default function BulkGenerateModal({
         onChange={setOverwriteExisting}
         disabled={isGenerating}
       />
-      <TextControl
-        label={__(
-          "Additional prompt (optional)",
-          "alt-text-generator-gpt-vision",
-        )}
-        help={__(
-          "Provide additional instructions for AI to tailor the alt text generation, such as including specific keywords for SEO.",
-          "alt-text-generator-gpt-vision",
-        )}
-        placeholder={_x(
-          'e.g. Include terms like "AI", "robotics"',
-          "Additional prompt placeholder",
-          "alt-text-generator-gpt-vision",
-        )}
+
+      <AdditionalPromptControl
         value={customPrompt}
         onChange={setCustomPrompt}
         disabled={isGenerating}