From 83b8d5b3f015f4d5a8f897ad51ee906a9a5b5e12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Ca=C5=82ka?= <calka.rafal@gmail.com>
Date: Fri, 3 May 2024 18:57:19 +0200
Subject: [PATCH] feat: use textarea for longer additional promtp

---
 includes/Api.php                           |  2 +-
 src/components/AdditionalPromptControl.tsx | 35 ++++++++++++++++++++++
 src/components/BulkGenerateModal.tsx       | 18 +++--------
 3 files changed, 40 insertions(+), 15 deletions(-)
 create mode 100644 src/components/AdditionalPromptControl.tsx

diff --git a/includes/Api.php b/includes/Api.php
index 4db4ec8..7977a2d 100644
--- a/includes/Api.php
+++ b/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,
diff --git a/src/components/AdditionalPromptControl.tsx b/src/components/AdditionalPromptControl.tsx
new file mode 100644
index 0000000..1d944ab
--- /dev/null
+++ b/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}
+    />
+  );
+}
diff --git a/src/components/BulkGenerateModal.tsx b/src/components/BulkGenerateModal.tsx
index 95ea147..0850950 100644
--- a/src/components/BulkGenerateModal.tsx
+++ b/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}