fix: Fix the message editor "disabled" attribute not actually disabling the input (#495)

...

Author: charlesvien

apps/array/src/renderer/features/message-editor/components/MessageEditor.tsx

@@ -73,7 +73,8 @@ export const MessageEditor = forwardRef<EditorHandle, MessageEditorProps>(
       sessionId,
       taskId,
       placeholder,
-      disabled,
+      disabled: isDisabled,
+      isLoading,
       isCloud,
       autoFocus,
       context: { taskId, repoPath },
@@ -138,7 +139,7 @@ export const MessageEditor = forwardRef<EditorHandle, MessageEditorProps>(
         <Flex justify="between" align="center">
           <Flex gap="2" align="center">
             <EditorToolbar
-              disabled={disabled}
+              disabled={isDisabled}
               taskId={taskId}
               onInsertChip={insertChip}
               onAttachFiles={onAttachFiles}

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

@@ -12,6 +12,7 @@ export interface UseTiptapEditorOptions {
   taskId?: string;
   placeholder?: string;
   disabled?: boolean;
+  isLoading?: boolean;
   isCloud?: boolean;
   autoFocus?: boolean;
   context?: DraftContext;
@@ -35,6 +36,7 @@ export function useTiptapEditor(options: UseTiptapEditorOptions) {
     taskId,
     placeholder = "",
     disabled = false,
+    isLoading = false,
     isCloud = false,
     autoFocus = false,
     context,
@@ -97,6 +99,7 @@ export function useTiptapEditor(options: UseTiptapEditorOptions) {
         attributes: { class: EDITOR_CLASS },
         handleKeyDown: (view, event) => {
           if (event.key === "Enter" && !event.shiftKey) {
+            if (!view.editable) return false;
             const suggestionPopup = document.querySelector("[data-tippy-root]");
             if (suggestionPopup) return false;
             event.preventDefault();
@@ -217,6 +220,7 @@ export function useTiptapEditor(options: UseTiptapEditorOptions) {
 
   const submit = useCallback(() => {
     if (!editor) return;
+    if (disabled || isLoading) return;
 
     const text = editor.getText().trim();
     if (!text) return;
@@ -236,7 +240,7 @@ export function useTiptapEditor(options: UseTiptapEditorOptions) {
     editor.commands.clearContent();
     prevBashModeRef.current = false;
     draft.clearDraft();
-  }, [editor, isCloud, draft]);
+  }, [editor, disabled, isLoading, isCloud, draft]);
 
   submitRef.current = submit;
 

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

@@ -54,6 +54,7 @@ export const TaskInputEditor = forwardRef<
     const isWorktreeMode = localWorkspaceMode === "worktree";
     const isCloudMode = runMode === "cloud";
     const { isOnline } = useConnectivity();
+    const isDisabled = isCreatingTask || !isOnline;
 
     useHotkeys(
       "shift+tab",
@@ -82,7 +83,8 @@ export const TaskInputEditor = forwardRef<
     } = useTiptapEditor({
       sessionId,
       placeholder: "What do you want to work on? - @ to add context",
-      disabled: isCreatingTask,
+      disabled: isDisabled,
+      isLoading: isCreatingTask,
       isCloud: isCloudMode,
       autoFocus: true,
       context: { repoPath },
@@ -198,7 +200,7 @@ export const TaskInputEditor = forwardRef<
 
           <Flex justify="between" align="center" px="3" pb="3">
             <EditorToolbar
-              disabled={isCreatingTask}
+              disabled={isDisabled}
               onInsertChip={insertChip}
               attachTooltip="Attach files from anywhere"
               iconSize={16}
@@ -241,17 +243,13 @@ export const TaskInputEditor = forwardRef<
                     e.stopPropagation();
                     onSubmit();
                   }}
-                  disabled={!canSubmit || isCreatingTask}
+                  disabled={!canSubmit || isDisabled}
                   loading={isCreatingTask}
                   style={{
                     backgroundColor:
-                      !canSubmit || isCreatingTask
-                        ? "var(--accent-a4)"
-                        : undefined,
+                      !canSubmit || isDisabled ? "var(--accent-a4)" : undefined,
                     color:
-                      !canSubmit || isCreatingTask
-                        ? "var(--accent-8)"
-                        : undefined,
+                      !canSubmit || isDisabled ? "var(--accent-8)" : undefined,
                   }}
                 >
                   <ArrowUp size={16} weight="bold" />