diff --git a/src/components/editors/task-card-editor.tsx b/src/components/editors/task-card-editor.tsx index 30abfab..e542802 100644 --- a/src/components/editors/task-card-editor.tsx +++ b/src/components/editors/task-card-editor.tsx @@ -1,19 +1,27 @@ import { Plus, Trash2 } from 'lucide-react'; +import type { RichTextBlock } from 'slack-web-api-client'; import { Button } from '../../lib/ui/button'; import { Input } from '../../lib/ui/input'; import { Label } from '../../lib/ui/label'; import { RadioGroup, RadioGroupItem } from '../../lib/ui/radio-group'; import type { TaskCardBlock, TaskCardStatus, UrlSourceElement } from '../../types'; import { EditorField } from './field'; +import { RichTextEditor } from './rich-text-editor'; import type { BlockEditorProps } from './types'; const STATUSES: readonly TaskCardStatus[] = ['pending', 'in_progress', 'complete', 'error'] as const; +const EMPTY_RICH_TEXT: RichTextBlock = { + type: 'rich_text', + elements: [{ type: 'rich_text_section', elements: [{ type: 'text', text: '' }] }] +}; + /** - * Editor form for task_card blocks. Edits the task id, title, status, and - * the cited sources list. The rich-text `details` and `output` fields - * round-trip through the payload but are not editable in the visual - * builder — palette variants that include them keep them on save. + * Editor form for task_card blocks. Edits the task id, title, status, + * the cited sources list, and the optional rich-text `details` and + * `output` fields. Details and output are togglable — adding one swaps + * in an empty rich_text block; removing one drops the field from the + * payload. * @param props - editor props * @param props.block - the task_card block to edit * @param props.onChange - called with the updated block payload @@ -23,7 +31,7 @@ export function TaskCardEditor({ block, onChange }: BlockEditorProps - + - + - + onChange({ ...block, status: v as TaskCardStatus })} @@ -62,6 +66,20 @@ export function TaskCardEditor({ block, onChange }: BlockEditorProps + onChange({ ...block, details: next })} + /> + + onChange({ ...block, output: next })} + /> + onChange({ ...block, sources: next.length > 0 ? next : undefined })} @@ -70,6 +88,65 @@ export function TaskCardEditor({ block, onChange }: BlockEditorProps void; +}) { + if (!value) { + return ( +
+ + + {help &&

{help}

} +
+ ); + } + return ( +
+
+ + +
+ + {help &&

{help}

} +
+ ); +} + /** * Sub-editor for the task card's `sources` list. Each source is a * `{ text, url }` pair Slack renders as a labeled link beneath the card. @@ -96,11 +173,9 @@ function SourcesField({ return (
Sources - {sources.length === 0 ? ( -

- No sources. Add one to cite a document or link beneath the card. -

- ) : null} +

+ Array of URL source elements used to generate a response. +

{sources.map((src, idx) => (