fix: Use text area for alternative text and captions (visual editor) (#644)

* fix: use text box instead of input for alt-text

* fix: use resize instead of setting height

* refactor: use text area for caption

* refactor: text area for table caption

* refactor: use text box for caption in table

* refactor: use text box for caption in callout

* chore: update changelog entry

* fix(changelog): correct pr number

Author: mcanouil

apps/vscode/CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 1.127.0 (Unreleased)
 
 - Added a new setting `quarto.useBundledQuartoInPositron` to prefer the Quarto CLI bundled with Positron when available. This setting has precedence _between_ `quarto.path` and `quarto.usePipQuarto`, and has no effect outside of Positron (<https://github.com/quarto-dev/quarto/pull/841>).
+- 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>)
 - Fixed a bug where previewing showed "Not Found" on Quarto files with spaces in the name in subfolders of projects (<https://github.com/quarto-dev/quarto/pull/853>).
 
 ## 1.126.0 (Release on 2025-10-08)

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%'
     }
   },
-})
+})

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";
@@ -153,19 +154,21 @@ const imagePanel =
       : null
     }
     <Field label={t("Caption")}>
-      <Input 
+      <Textarea
         value={caption} 
         onChange={(_ev, data) => setCaption(data.value)}
         placeholder={t("(Optional)")}
+        resize="vertical"
       />
     </Field>
 
     {alt !== undefined
       ?  <Field label={t("Alternative text")}>
-          <Input 
-            value={alt} 
+          <Textarea
+            value={alt}
             onChange={(_ev, data) => setAlt(data.value)}
             placeholder={t("(Optional)")}
+            resize="vertical"
           />
         </Field>
       : null
@@ -288,6 +291,3 @@ const useStyles = makeStyles({
     gridRowGap: tokens.spacingVerticalS,
   }
 })
-
-
-

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,
@@ -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%'
     }
   },
-})
+})