fix: prevent pasting or dropping images into issue commands

resources/js/components/commit-composer.tsx

@@ -1,6 +1,6 @@
 import { Form, Link, usePage } from '@inertiajs/react';
 import { ChartBar, Clock3 } from 'lucide-react';
-import type { KeyboardEvent } from 'react';
+import type { DragEvent, KeyboardEvent } from 'react';
 import { useEffect, useRef, useState } from 'react';
 import CommitController from '@/actions/App/Http/Controllers/CommitController';
 import ScheduledCommitController from '@/actions/App/Http/Controllers/ScheduledCommitController';
@@ -177,12 +177,20 @@ function CommitComposerBody({
         return () => observer.disconnect();
     }, [isInDialog]);
 
+    const cancelFileDrop = (event: DragEvent<HTMLElement>) => {
+        if (event.dataTransfer.types.includes('Files')) {
+            event.preventDefault();
+        }
+    };
+
     return (
         <div
             className={cn('relative flex', { 'min-h-0': isInDialog })}
-            {...(poll === null ? attachments.dropzone : {})}
+            {...(poll === null && !isIssue
+                ? attachments.dropzone
+                : { onDragOver: cancelFileDrop, onDrop: cancelFileDrop })}
         >
-            {attachments.isDraggingFiles && (
+            {!isIssue && attachments.isDraggingFiles && (
                 <ImageDropOverlay className="inset-2" />
             )}
             <GraphRail
@@ -251,7 +259,9 @@ function CommitComposerBody({
                             value={body}
                             onValueChange={issue.change}
                             onPaste={
-                                poll === null ? attachments.onPaste : undefined
+                                poll === null && !isIssue
+                                    ? attachments.onPaste
+                                    : undefined
                             }
                             onKeyDown={(event) =>
                                 preview.handleShortcut(event) ||
@@ -322,18 +332,22 @@ function CommitComposerBody({
                     />
                     <InputError message={error} />
 
-                    {!preview.isPreviewing && (
+                    {!isIssue && !preview.isPreviewing && (
                         <ImagePickerPreviews
                             images={attachments.images}
                             descriptions={attachments.descriptions}
                             onDescribe={attachments.describe}
                             onRemove={attachments.remove}
                         />
                     )}
-                    <InputError
-                        message={attachments.error ?? imageErrorFrom(errors)}
-                        className="mt-1"
-                    />
+                    {!isIssue && (
+                        <InputError
+                            message={
+                                attachments.error ?? imageErrorFrom(errors)
+                            }
+                            className="mt-1"
+                        />
+                    )}
 
                     {poll && (
                         <div className="mt-2 grid">
@@ -601,15 +615,21 @@ export function CommitComposer({
             poll === null &&
             !isScheduling,
         initialKind: initialIssue,
+        onStart: () => {
+            attachments.clear();
+        },
         onCreated: () => {
             drop();
+            attachments.clear();
             focusBody(id);
         },
     });
 
     const isCommittable =
         !attachments.reading &&
-        (hasImages || characterCount(body.trim()) >= minBodyLength) &&
+        (issue.command !== null
+            ? characterCount(body.trim()) >= minBodyLength
+            : hasImages || characterCount(body.trim()) >= minBodyLength) &&
         (issue.command !== null
             ? characterCount(body)
             : bodyCharacterCount(body)) <= maxBodyLength &&

resources/js/components/issue-command.tsx

@@ -36,12 +36,14 @@ export function useIssueCommand({
     updateBody,
     enabled,
     initialKind = null,
+    onStart,
     onCreated,
 }: {
     body: string;
     updateBody: (body: string) => void;
     enabled: boolean;
     initialKind?: IssueKind | null;
+    onStart?: () => void;
     onCreated: () => void;
 }) {
     const [kind, setKind] = useState<IssueKind | null>(
@@ -69,6 +71,7 @@ export function useIssueCommand({
         setKind(next);
         setSelected(0);
         updateBody(rest);
+        onStart?.();
     };
 
     const change = (value: string) => {

tests/Unit/ComposerDraft.test.tsx

@@ -536,6 +536,36 @@ test('typing a command and a space turns the draft into an issue, and backspace
     );
     assert.equal(find('data-test', 'add-poll-button'), undefined);
     assert.equal(view.form.props.onBefore(), false);
+    const issueTextarea = view.fields.find(
+        (element) => element.type === MentionTextarea,
+    )!;
+    assert.equal(issueTextarea.props.onPaste, undefined);
+    assert.equal(
+        view.fields.some(
+            (element) => element.props.onDragEnter !== undefined,
+        ),
+        false,
+    );
+    const dropzone = view.fields.find(
+        (element) => element.props.onDragOver !== undefined,
+    )!;
+    const onDragOver = dropzone.props.onDragOver as (event: unknown) => void;
+    let prevented = false;
+    onDragOver({
+        dataTransfer: { types: ['Files'] },
+        preventDefault: () => {
+            prevented = true;
+        },
+    });
+    assert.equal(prevented, true);
+    prevented = false;
+    onDragOver({
+        dataTransfer: { types: ['text/plain'] },
+        preventDefault: () => {
+            prevented = true;
+        },
+    });
+    assert.equal(prevented, false);
 
     keyDown(view, 'Backspace');
     view = render();