From 7e45474735ccbbcfa92713236e9ce8185507f751 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micka=C3=ABl=20Canouil?=
 <8896044+mcanouil@users.noreply.github.com>
Date: Mon, 20 Jan 2025 22:23:45 +0100
Subject: [PATCH 1/8] fix: use text box instead of input for alt-text

---
 apps/vscode/CHANGELOG.md                      |  2 ++
 packages/editor-ui/src/dialogs/edit-image.tsx | 11 +++++------
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/vscode/CHANGELOG.md b/apps/vscode/CHANGELOG.md
index caa9c8cb..21348483 100644
--- a/apps/vscode/CHANGELOG.md
+++ b/apps/vscode/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## 1.119.0 (unreleased)
 
+- Visual Editor: "Inset image" command now uses a text box for the alternative text. (<https://github.com/quarto-dev/quarto/pull/599>)
+
 ## 1.118.0 (Release on 2024-11-26)
 
 - Provide F1 help at cursor in Positron (<https://github.com/quarto-dev/quarto/pull/599>)
diff --git a/packages/editor-ui/src/dialogs/edit-image.tsx b/packages/editor-ui/src/dialogs/edit-image.tsx
index cb405455..3d95260e 100644
--- a/packages/editor-ui/src/dialogs/edit-image.tsx
+++ b/packages/editor-ui/src/dialogs/edit-image.tsx
@@ -28,7 +28,8 @@ import {
   useId, 
   RadioGroup, 
   Label, 
-  Radio 
+  Radio,
+  Textarea
 } from "@fluentui/react-components";
 
 import { ModalDialog, ModalDialogTabList, showValueEditorDialog} from "ui-widgets";
@@ -162,10 +163,11 @@ const imagePanel =
   
     {alt !== undefined
       ?  <Field label={t("Alternative text")}>
-          <Input 
-            value={alt} 
+          <Textarea
+            value={alt}
             onChange={(_ev, data) => setAlt(data.value)}
             placeholder={t("(Optional)")}
+            style={{ height: "100px" }}
           />
         </Field>
       : null
@@ -288,6 +290,3 @@ const useStyles = makeStyles({
     gridRowGap: tokens.spacingVerticalS,
   }
 })
-
-
-

From 615dc1ee4726a7be91400729cf55b7f10fcb4479 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micka=C3=ABl=20Canouil?=
 <8896044+mcanouil@users.noreply.github.com>
Date: Mon, 20 Jan 2025 22:57:25 +0100
Subject: [PATCH 2/8] fix: use resize instead of setting height

---
 packages/editor-ui/src/dialogs/edit-image.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/dialogs/edit-image.tsx b/packages/editor-ui/src/dialogs/edit-image.tsx
index 3d95260e..4d2e5476 100644
--- a/packages/editor-ui/src/dialogs/edit-image.tsx
+++ b/packages/editor-ui/src/dialogs/edit-image.tsx
@@ -167,7 +167,7 @@ const imagePanel =
             value={alt}
             onChange={(_ev, data) => setAlt(data.value)}
             placeholder={t("(Optional)")}
-            style={{ height: "100px" }}
+            resize="vertical"
           />
         </Field>
       : null

From 1a828859de2406468baa4bf438c4e54bfd529c7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micka=C3=ABl=20Canouil?=
 <8896044+mcanouil@users.noreply.github.com>
Date: Tue, 21 Jan 2025 00:03:34 +0100
Subject: [PATCH 3/8] refactor: use text area for caption

---
 packages/editor-ui/src/dialogs/edit-image.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/dialogs/edit-image.tsx b/packages/editor-ui/src/dialogs/edit-image.tsx
index 4d2e5476..1a9afd89 100644
--- a/packages/editor-ui/src/dialogs/edit-image.tsx
+++ b/packages/editor-ui/src/dialogs/edit-image.tsx
@@ -154,10 +154,11 @@ const imagePanel =
       : null
     }
     <Field label={t("Caption")}>
-      <Input 
+      <Textarea
         value={caption} 
         onChange={(_ev, data) => setCaption(data.value)}
         placeholder={t("(Optional)")}
+        resize="vertical"
       />
     </Field>
   

From f4bf877096b84b4e6318d2733e2bacf0beb9d0c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micka=C3=ABl=20Canouil?=
 <8896044+mcanouil@users.noreply.github.com>
Date: Tue, 21 Jan 2025 00:07:12 +0100
Subject: [PATCH 4/8] refactor: text area for table caption

---
 packages/editor-ui/src/dialogs/insert-table.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/dialogs/insert-table.tsx b/packages/editor-ui/src/dialogs/insert-table.tsx
index 27f3f2e7..593422db 100644
--- a/packages/editor-ui/src/dialogs/insert-table.tsx
+++ b/packages/editor-ui/src/dialogs/insert-table.tsx
@@ -91,7 +91,12 @@ const InsertTableDialog: React.FC<{
 
       {props.options.captions ? (
         <Field label={t("Caption")}>
-          <Input value={caption} onChange={(_ev, data) => setCaption(data.value)} placeholder={t("(Optional)")}/>
+          <Textarea
+            value={caption}
+            onChange={(_ev, data) => setCaption(data.value)}
+            placeholder={t("(Optional)")}
+            resize="vertical"
+          />
         </Field>
       ) : null}
 
@@ -111,4 +116,4 @@ const useStyles = makeStyles({
       width: '50%'
     }
   },
-})
\ No newline at end of file
+})

From edb703c851470178ce0cdf002232a76b399f1eac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micka=C3=ABl=20Canouil?=
 <8896044+mcanouil@users.noreply.github.com>
Date: Tue, 21 Jan 2025 11:19:35 +0100
Subject: [PATCH 5/8] refactor: use text box for caption in table

---
 packages/editor-ui/src/dialogs/insert-table.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/dialogs/insert-table.tsx b/packages/editor-ui/src/dialogs/insert-table.tsx
index 593422db..d67de7f2 100644
--- a/packages/editor-ui/src/dialogs/insert-table.tsx
+++ b/packages/editor-ui/src/dialogs/insert-table.tsx
@@ -15,7 +15,7 @@
 
 import React, { useState } from "react";
 
-import { Checkbox, Field, Input, makeStyles } from "@fluentui/react-components";
+import { Checkbox, Field, Input, makeStyles, Textarea } from "@fluentui/react-components";
 
 import { 
   ModalDialog,

From 9a60b87bde404b5b2197d519411d713d222e0058 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micka=C3=ABl=20Canouil?=
 <8896044+mcanouil@users.noreply.github.com>
Date: Tue, 21 Jan 2025 11:19:54 +0100
Subject: [PATCH 6/8] refactor: use text box for caption in callout

---
 .../editor-ui/src/dialogs/edit-callout.tsx    | 47 ++++++++++++-------
 1 file changed, 31 insertions(+), 16 deletions(-)

diff --git a/packages/editor-ui/src/dialogs/edit-callout.tsx b/packages/editor-ui/src/dialogs/edit-callout.tsx
index 0330f8e6..9377358e 100644
--- a/packages/editor-ui/src/dialogs/edit-callout.tsx
+++ b/packages/editor-ui/src/dialogs/edit-callout.tsx
@@ -15,7 +15,18 @@
 
 import React, { useRef, useState } from "react"
 
-import { Button, Checkbox, Field, Input, Select, SelectTabData, SelectTabEvent, Tab, TabValue, makeStyles } from "@fluentui/react-components"
+import {
+  Button,
+  Checkbox,
+  Field,
+  Select,
+  SelectTabData,
+  SelectTabEvent,
+  Tab,
+  TabValue,
+  makeStyles,
+  Textarea,
+} from "@fluentui/react-components";
 
 import { AttrEditInput, CalloutEditProps, CalloutEditResult, CalloutProps, PandocAttr, UIToolsAttr } from "editor-types";
 
@@ -32,10 +43,10 @@ import { useEffect } from "react";
 
 export function editCallout(attrUITools: UIToolsAttr) {
   return async (props: CalloutEditProps, removeEnabled: boolean): Promise<CalloutEditResult | null> => {
-    
-    const values: EditCalloutDialogValues = { 
-      values: {...attrUITools.propsToInput(props.attr), ...props.callout}, 
-      action: "edit" 
+
+    const values: EditCalloutDialogValues = {
+      values: {...attrUITools.propsToInput(props.attr), ...props.callout},
+      action: "edit"
     };
 
     const result = await showValueEditorDialog(EditCalloutDialog, values, {
@@ -65,7 +76,7 @@ interface EditCalloutDialogOptions {
   removeEnabled: boolean;
 }
 
-const EditCalloutDialog: React.FC<{ 
+const EditCalloutDialog: React.FC<{
   values: EditCalloutDialogValues,
   options: EditCalloutDialogOptions,
   onClosed: (values?: EditCalloutDialogValues) => void }
@@ -93,7 +104,7 @@ const EditCalloutDialog: React.FC<{
     }
   }
 
-  const removeButton = 
+  const removeButton =
     <Button onClick={() => close({ ...props.values, action: 'remove' })}>
       {t("Unwrap Div")}
     </Button>;
@@ -128,32 +139,36 @@ const EditCalloutDialog: React.FC<{
         </Field>
       </div>
       <Field label={t("Caption")} placeholder={t("(Optional)")}>
-        <Input value={caption} onChange={(_ev, data) => setCaption(data.value)}/>
+        <Textarea
+          value={caption}
+          onChange={(_ev, data) => setCaption(data.value)}
+          resize="vertical"
+        />
       </Field>
-      <Checkbox label={t("Display icon alongside callout")} checked={icon} onChange={(_ev, data) => setIcon(!!data.checked)}/> 
+      <Checkbox label={t("Display icon alongside callout")} checked={icon} onChange={(_ev, data) => setIcon(!!data.checked)}/>
     </EditAttrPanel>;
 
-  const attributesPanel = 
+  const attributesPanel =
     <EditAttrPanel>
       <EditAttr value={attr} onChange={setAttr} />
     </EditAttrPanel>;
 
   return (
     <ModalDialog
-      title={t("Callout")} 
+      title={t("Callout")}
       theme={fluentTheme()}
-      isOpen={isOpen} 
+      isOpen={isOpen}
       leftButtons={props.options.removeEnabled ? removeButton : undefined}
       onOK={() => close({ values: { ...attr, type, appearance, caption, icon}, action: 'edit'})}
       onCancel={() => close() }
     >
       <ModalDialogTabList
-        id="edit-callout" 
-        selectedValue={selectedTab} 
+        id="edit-callout"
+        selectedValue={selectedTab}
         onTabSelect={onTabSelect}
       >
         <Tab id="callout" value="callout">{t("Callout")}</Tab>
-        <Tab id="attributes" value="attributes">{t("Attributes")}</Tab> 
+        <Tab id="attributes" value="attributes">{t("Attributes")}</Tab>
       </ModalDialogTabList>
       <div>
         {selectedTab === "callout" && calloutPanel}
@@ -173,4 +188,4 @@ const useStyles = makeStyles({
       width: '50%'
     }
   },
-})
\ No newline at end of file
+})

From b99222353c14e0c427dcee8818b97ff717330883 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micka=C3=ABl=20Canouil?=
 <8896044+mcanouil@users.noreply.github.com>
Date: Tue, 21 Jan 2025 11:29:08 +0100
Subject: [PATCH 7/8] chore: update changelog entry

---
 apps/vscode/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/vscode/CHANGELOG.md b/apps/vscode/CHANGELOG.md
index 21348483..e5625ca5 100644
--- a/apps/vscode/CHANGELOG.md
+++ b/apps/vscode/CHANGELOG.md
@@ -2,7 +2,7 @@
 
 ## 1.119.0 (unreleased)
 
-- Visual Editor: "Inset image" command now uses a text box for the alternative text. (<https://github.com/quarto-dev/quarto/pull/599>)
+- Visual Editor: uses a text box for alternative text and captions in callouts, images, and tables interface. (<https://github.com/quarto-dev/quarto/pull/599>)
 
 ## 1.118.0 (Release on 2024-11-26)
 

From f67eb20c26dd06753cc4274a9153513a0351aac1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micka=C3=ABl=20Canouil?=
 <8896044+mcanouil@users.noreply.github.com>
Date: Tue, 21 Jan 2025 11:52:31 +0100
Subject: [PATCH 8/8] fix(changelog): correct pr number

---
 apps/vscode/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/vscode/CHANGELOG.md b/apps/vscode/CHANGELOG.md
index e5625ca5..e35cac12 100644
--- a/apps/vscode/CHANGELOG.md
+++ b/apps/vscode/CHANGELOG.md
@@ -2,7 +2,7 @@
 
 ## 1.119.0 (unreleased)
 
-- Visual Editor: uses a text box for alternative text and captions in callouts, images, and tables interface. (<https://github.com/quarto-dev/quarto/pull/599>)
+- Visual Editor: uses a text box for alternative text and captions in callouts, images, and tables interface. (<https://github.com/quarto-dev/quarto/pull/644>)
 
 ## 1.118.0 (Release on 2024-11-26)