fix: Fix task input editor not allowing submission because empty (#377)

Author: charlesvien

apps/array/src/renderer/features/message-editor/tiptap/useTiptapEditor.ts

@@ -1,6 +1,6 @@
 import { toast } from "@renderer/utils/toast";
 import { useEditor } from "@tiptap/react";
-import { useCallback, useRef } from "react";
+import { useCallback, useRef, useState } from "react";
 import type { MentionChip } from "../utils/content";
 import { contentToXml } from "../utils/content";
 import { getEditorExtensions } from "./extensions";
@@ -21,6 +21,7 @@ export interface UseTiptapEditorOptions {
   onSubmit?: (text: string) => void;
   onBashCommand?: (command: string) => void;
   onBashModeChange?: (isBashMode: boolean) => void;
+  onEmptyChange?: (isEmpty: boolean) => void;
 }
 
 const EDITOR_CLASS =
@@ -38,6 +39,7 @@ export function useTiptapEditor(options: UseTiptapEditorOptions) {
     onSubmit,
     onBashCommand,
     onBashModeChange,
+    onEmptyChange,
   } = options;
 
   const {
@@ -46,13 +48,27 @@ export function useTiptapEditor(options: UseTiptapEditorOptions) {
     bashMode: enableBashMode = true,
   } = capabilities;
 
-  const callbackRefs = useRef({ onSubmit, onBashCommand, onBashModeChange });
-  callbackRefs.current = { onSubmit, onBashCommand, onBashModeChange };
+  const callbackRefs = useRef({
+    onSubmit,
+    onBashCommand,
+    onBashModeChange,
+    onEmptyChange,
+  });
+  callbackRefs.current = {
+    onSubmit,
+    onBashCommand,
+    onBashModeChange,
+    onEmptyChange,
+  };
 
   const prevBashModeRef = useRef(false);
+  const prevIsEmptyRef = useRef(true);
   const submitRef = useRef<() => void>(() => {});
   const draftRef = useRef<ReturnType<typeof useDraftSync> | null>(null);
 
+  // Track isEmpty state to trigger re-renders when content changes
+  const [isEmptyState, setIsEmptyState] = useState(true);
+
   const handleCommandSubmit = useCallback((text: string) => {
     callbackRefs.current.onSubmit?.(text);
   }, []);
@@ -86,15 +102,30 @@ export function useTiptapEditor(options: UseTiptapEditorOptions) {
           return false;
         },
       },
+      onCreate: ({ editor: e }) => {
+        const newIsEmpty = !e.getText().trim();
+        setIsEmptyState(newIsEmpty);
+        prevIsEmptyRef.current = newIsEmpty;
+        callbackRefs.current.onEmptyChange?.(newIsEmpty);
+      },
       onUpdate: ({ editor: e }) => {
         const text = e.getText();
+        const trimmedText = text.trim();
         const newBashMode = enableBashMode && text.trimStart().startsWith("!");
 
         if (newBashMode !== prevBashModeRef.current) {
           prevBashModeRef.current = newBashMode;
           callbackRefs.current.onBashModeChange?.(newBashMode);
         }
 
+        const newIsEmpty = !trimmedText;
+        setIsEmptyState(newIsEmpty);
+
+        if (newIsEmpty !== prevIsEmptyRef.current) {
+          prevIsEmptyRef.current = newIsEmpty;
+          callbackRefs.current.onEmptyChange?.(newIsEmpty);
+        }
+
         draftRef.current?.saveDraft(e);
       },
     },
@@ -159,7 +190,7 @@ export function useTiptapEditor(options: UseTiptapEditorOptions) {
     [editor, draft],
   );
 
-  const isEmpty = !editor || editor.isEmpty;
+  const isEmpty = !editor || isEmptyState;
   const isBashMode =
     enableBashMode && (editor?.getText().trimStart().startsWith("!") ?? false);
 

apps/array/src/renderer/features/task-detail/components/TaskInput.tsx

@@ -42,6 +42,7 @@ export function TaskInput() {
   const [localWorkspaceMode, setLocalWorkspaceMode] =
     useState<LocalWorkspaceMode>(lastUsedLocalWorkspaceMode);
   const [selectedBranch, setSelectedBranch] = useState<string | null>(null);
+  const [editorIsEmpty, setEditorIsEmpty] = useState(true);
 
   const { githubIntegration } = useRepositoryIntegration();
 
@@ -69,6 +70,7 @@ export function TaskInput() {
     githubIntegrationId: githubIntegration?.id,
     workspaceMode: effectiveWorkspaceMode,
     branch: selectedBranch,
+    editorIsEmpty,
   });
 
   return (
@@ -162,6 +164,7 @@ export function TaskInput() {
           hasDirectory={
             runMode === "cloud" ? !!selectedRepository : !!selectedDirectory
           }
+          onEmptyChange={setEditorIsEmpty}
         />
 
         <SuggestedTasks editorRef={editorRef} />

apps/array/src/renderer/features/task-detail/components/TaskInputEditor.tsx

@@ -21,6 +21,7 @@ interface TaskInputEditorProps {
   canSubmit: boolean;
   onSubmit: () => void;
   hasDirectory: boolean;
+  onEmptyChange?: (isEmpty: boolean) => void;
 }
 
 export const TaskInputEditor = forwardRef<
@@ -38,6 +39,7 @@ export const TaskInputEditor = forwardRef<
       canSubmit,
       onSubmit,
       hasDirectory,
+      onEmptyChange,
     },
     ref,
   ) => {
@@ -67,6 +69,7 @@ export const TaskInputEditor = forwardRef<
           onSubmit();
         }
       },
+      onEmptyChange,
     });
 
     useImperativeHandle(

apps/array/src/renderer/features/task-detail/hooks/useTaskCreation.ts

@@ -24,6 +24,7 @@ interface UseTaskCreationOptions {
   githubIntegrationId?: number;
   workspaceMode: WorkspaceMode;
   branch?: string | null;
+  editorIsEmpty: boolean;
 }
 
 interface UseTaskCreationReturn {
@@ -111,6 +112,7 @@ export function useTaskCreation({
   githubIntegrationId,
   workspaceMode,
   branch,
+  editorIsEmpty,
 }: UseTaskCreationOptions): UseTaskCreationReturn {
   const [isCreatingTask, setIsCreatingTask] = useState(false);
   const { navigateToTask } = useNavigationStore();
@@ -119,7 +121,6 @@ export function useTaskCreation({
   const { invalidateTasks } = useCreateTask();
 
   const isCloudMode = workspaceMode === "cloud";
-  const editorIsEmpty = editorRef.current?.isEmpty() ?? true;
   const canSubmit =
     !!editorRef.current &&
     isAuthenticated &&