QoL options

math-tutor/frontend/src/components/Chat/MessageInput.tsx

@@ -116,6 +116,16 @@ const docToMarkdown = (doc: JSONContent) => {
   return parts.join("");
 };
 
+const isSelectionAtStart = (editor: Editor) => {
+  const { selection } = editor.state;
+  return selection.empty && selection.$from.parentOffset === 0;
+};
+
+const isSelectionAtEnd = (editor: Editor) => {
+  const { selection } = editor.state;
+  return selection.empty && selection.$from.parentOffset === selection.$from.parent.content.size;
+};
+
 const createMathNode = (
   openMathEditor: (latex: string, onSave: (latex: string) => void) => void
 ) =>
@@ -227,6 +237,31 @@ export default function MessageInput({
     requestAnimationFrame(() => mathFieldRef.current?.focus());
   }, []);
 
+  const clearEditor = useCallback((targetEditor: Editor) => {
+    targetEditor.commands.setContent(markdownToDoc(""), { emitUpdate: false });
+    onChange("");
+  }, [onChange]);
+
+  const sendEditor = useCallback((targetEditor: Editor) => {
+    if (isSending) {
+      return;
+    }
+
+    const message = docToMarkdown(targetEditor.getJSON()).trim();
+    if (!message) {
+      return;
+    }
+
+    clearEditor(targetEditor);
+    onSend(message);
+  }, [clearEditor, isSending, onSend]);
+
+  const saveFormula = useCallback(() => {
+    saveMathRef.current?.(mathFieldRef.current?.value || "");
+    saveMathRef.current = null;
+    dialogRef.current?.close();
+  }, []);
+
   const MathNode = useMemo(() => createMathNode(openMathEditor), [openMathEditor]);
 
   const editor = useEditor({
@@ -252,22 +287,17 @@ export default function MessageInput({
 
         if (event.key === "Enter" && !event.shiftKey) {
           event.preventDefault();
-          const message = currentEditor ? docToMarkdown(currentEditor.getJSON()).trim() : "";
-          if (message) {
-            onSend(message);
+          if (currentEditor) {
+            sendEditor(currentEditor);
           }
           return true;
         }
 
-        if (event.key === "ArrowUp" && currentEditor?.state.selection.from === 1) {
+        if (event.key === "ArrowUp" && currentEditor && isSelectionAtStart(currentEditor)) {
           return onHistoryNavigate?.("older") ?? false;
         }
 
-        if (
-          event.key === "ArrowDown" &&
-          currentEditor &&
-          currentEditor.state.selection.to === currentEditor.state.doc.content.size
-        ) {
+        if (event.key === "ArrowDown" && currentEditor && isSelectionAtEnd(currentEditor)) {
           return onHistoryNavigate?.("newer") ?? false;
         }
 
@@ -283,15 +313,12 @@ export default function MessageInput({
 
   const handleSend = useCallback(() => {
     const currentEditor = editorRef.current;
-    if (!currentEditor || isSending) {
+    if (!currentEditor) {
       return;
     }
 
-    const message = docToMarkdown(currentEditor.getJSON()).trim();
-    if (message) {
-      onSend(message);
-    }
-  }, [isSending, onSend]);
+    sendEditor(currentEditor);
+  }, [sendEditor]);
 
   useEffect(() => {
     editor?.setEditable(!isSending);
@@ -428,7 +455,15 @@ export default function MessageInput({
         }}
       >
         <form method="dialog">
-          <math-field ref={mathFieldRef} />
+          <math-field
+            ref={mathFieldRef}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+                saveFormula();
+              }
+            }}
+          />
           <div className="dialog-actions">
             <button className="btn" value="cancel" type="submit">
               {t("hide")}