obliterate tiptap out of existence

Author: jonathanlab

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

@@ -2,13 +2,12 @@ import "./message-editor.css";
 import { ModelSelector } from "@features/sessions/components/ModelSelector";
 import { ArrowUp, Paperclip, Stop } from "@phosphor-icons/react";
 import { Flex, IconButton, Text, Tooltip } from "@radix-ui/themes";
-import type { JSONContent } from "@tiptap/core";
-import { EditorContent } from "@tiptap/react";
 import { forwardRef, useImperativeHandle, useRef } from "react";
 import {
-  createEditorHandle,
-  useMessageEditor,
-} from "../hooks/useMessageEditor";
+  type EditorContent,
+  type MentionChip,
+  useContenteditableEditor,
+} from "../hooks/useContenteditableEditor";
 import { useMessageEditorStore } from "../stores/messageEditorStore";
 import { SuggestionPortal } from "./SuggestionPortal";
 
@@ -17,7 +16,7 @@ export interface MessageEditorHandle {
   blur: () => void;
   clear: () => void;
   isEmpty: () => boolean;
-  getContent: () => JSONContent | undefined;
+  getContent: () => EditorContent;
   getText: () => string;
 }
 
@@ -39,7 +38,7 @@ export const MessageEditor = forwardRef<
   (
     {
       sessionId,
-      placeholder,
+      placeholder = "Type a message... @ to mention files, / for commands",
       onSubmit,
       onBashCommand,
       onBashModeChange,
@@ -50,15 +49,30 @@ export const MessageEditor = forwardRef<
     ref,
   ) => {
     const fileInputRef = useRef<HTMLInputElement>(null);
-    const actions = useMessageEditorStore((s) => s.actions);
     const context = useMessageEditorStore((s) => s.contexts[sessionId]);
     const taskId = context?.taskId;
     const disabled = context?.disabled ?? false;
     const isLoading = context?.isLoading ?? false;
     const isCloud = context?.isCloud ?? false;
     const repoPath = context?.repoPath;
 
-    const { editor, isEmpty, isBashMode, submit } = useMessageEditor({
+    const {
+      editorRef,
+      isEmpty,
+      isBashMode,
+      submit,
+      focus,
+      blur,
+      clear,
+      getText,
+      getContent,
+      insertChip,
+      onInput,
+      onKeyDown,
+      onPaste,
+      onCompositionStart,
+      onCompositionEnd,
+    } = useContenteditableEditor({
       sessionId,
       taskId,
       placeholder,
@@ -73,27 +87,27 @@ export const MessageEditor = forwardRef<
 
     useImperativeHandle(
       ref,
-      () => createEditorHandle(editor, sessionId, actions),
-      [editor, sessionId, actions],
+      () => ({
+        focus,
+        blur,
+        clear,
+        isEmpty: () => isEmpty,
+        getContent,
+        getText,
+      }),
+      [focus, blur, clear, isEmpty, getContent, getText],
     );
 
     const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
       const files = e.target.files;
       if (files && files.length > 0) {
         for (const file of Array.from(files)) {
-          editor
-            ?.chain()
-            .focus()
-            .insertContent({
-              type: "mention",
-              attrs: {
-                id: file.name,
-                label: file.name,
-                type: "file",
-              },
-            })
-            .insertContent(" ")
-            .run();
+          const chip: MentionChip = {
+            type: "file",
+            id: file.name,
+            label: file.name,
+          };
+          insertChip(chip);
         }
         onAttachFiles?.(Array.from(files));
       }
@@ -105,7 +119,7 @@ export const MessageEditor = forwardRef<
     const handleContainerClick = (e: React.MouseEvent) => {
       const target = e.target as HTMLElement;
       if (!target.closest("button")) {
-        editor?.commands.focus();
+        focus();
       }
     };
 
@@ -117,7 +131,24 @@ export const MessageEditor = forwardRef<
         style={{ cursor: "text" }}
       >
         <div className="max-h-[200px] min-h-[30px] flex-1 overflow-y-auto font-mono text-sm">
-          <EditorContent editor={editor} />
+          {/* biome-ignore lint/a11y/useSemanticElements: contenteditable is intentional for rich mention chips */}
+          <div
+            ref={editorRef}
+            className="cli-editor outline-none"
+            contentEditable={!disabled}
+            suppressContentEditableWarning
+            spellCheck={false}
+            role="textbox"
+            tabIndex={disabled ? -1 : 0}
+            aria-multiline="true"
+            aria-placeholder={placeholder}
+            data-placeholder={placeholder}
+            onInput={onInput}
+            onKeyDown={onKeyDown}
+            onPaste={onPaste}
+            onCompositionStart={onCompositionStart}
+            onCompositionEnd={onCompositionEnd}
+          />
         </div>
 
         <SuggestionPortal sessionId={sessionId} />

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

@@ -1,3 +1,4 @@
+import { useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import { useMessageEditorStore } from "../stores/messageEditorStore";
 import { SuggestionList } from "./SuggestionList";
@@ -12,15 +13,41 @@ export function SuggestionPortal({ sessionId }: SuggestionPortalProps) {
   );
   const active = useMessageEditorStore((s) => s.suggestion.active);
   const position = useMessageEditorStore((s) => s.suggestion.position);
+  const triggerExit = useMessageEditorStore((s) => s.suggestion.triggerExit);
+  const popupRef = useRef<HTMLDivElement>(null);
 
   const isActive = active && suggestionSessionId === sessionId;
 
+  useEffect(() => {
+    if (!isActive) return;
+
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node;
+      const popup = popupRef.current;
+
+      // Check if click is outside the popup
+      if (popup && !popup.contains(target)) {
+        // Also check if click is inside the editor (don't close if clicking in editor)
+        const editor = document.querySelector(".cli-editor");
+        if (!editor?.contains(target)) {
+          // Use tiptap's exitSuggestion to properly close and reset plugin state
+          triggerExit?.();
+        }
+      }
+    };
+
+    // Use mousedown to catch the click before focus changes
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isActive, triggerExit]);
+
   if (!isActive) {
     return null;
   }
 
   return createPortal(
     <div
+      ref={popupRef}
       data-suggestion-popup
       style={{
         position: "fixed",

apps/array/src/renderer/features/message-editor/components/message-editor.css

@@ -1,6 +1,6 @@
 /* Message Editor Styles */
 
-/* Editor container */
+/* Editor container - contenteditable */
 .cli-editor {
   font-family: monospace;
   background-color: transparent;
@@ -12,32 +12,27 @@
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;
+  white-space: pre-wrap;
+  min-height: 1.5em;
 }
 
-.cli-editor.ProseMirror {
-  overflow-x: hidden;
-}
-
-.cli-editor.ProseMirror p {
-  margin: 0;
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  word-break: break-word;
+/* Placeholder for empty contenteditable */
+.cli-editor:empty::before {
+  content: attr(data-placeholder);
+  color: var(--gray-11);
+  pointer-events: none;
 }
 
-/* Placeholder */
-.cli-editor.ProseMirror.ProseMirror-focused
-p.is-editor-empty:first-child::before {
+/* Hide placeholder when focused and has content */
+.cli-editor:focus:not(:empty)::before {
   content: "";
 }
 
-.cli-editor.ProseMirror:not(.ProseMirror-focused)
-  p.is-editor-empty:first-child::before {
-  color: var(--gray-11);
-  content: attr(data-placeholder);
-  float: left;
-  height: 0;
-  pointer-events: none;
+/* Mention chip - base styles */
+.mention-chip {
+  display: inline;
+  user-select: all;
+  cursor: default;
 }
 
 /* File mention */