Better message editing with Monaco Editor

example/components/chakra-markdown.tsx

@@ -13,17 +13,21 @@ function calculateChildrenHeight(parentDiv) {
   return childrenHeight;
 }
 
-const ChakraMarkdown = React.memo<any>(({ content }) => {
+interface ChakraMarkdownProps {
+  content: string;
+}
+
+const ChakraMarkdown = React.memo<ChakraMarkdownProps>(({ content }) => {
   const renderers = {
-    h1: ({ children }) => <Heading as="h1" size="xl" mb={2}>{children}</Heading>,
-    h2: ({ children }) => <Heading as="h2" size="lg" mb={2}>{children}</Heading>,
-    h3: ({ children }) => <Heading as="h3" size="md" mb={2}>{children}</Heading>,
-    a: ({ href, children }) => (
-      <ChakraLink href={href} color="blue.500" isExternal>
+    h1: ({ children }: any) => <Heading as="h1" size="xl" mb={2}>{children}</Heading>,
+    h2: ({ children }: any) => <Heading as="h2" size="lg" mb={2}>{children}</Heading>,
+    h3: ({ children }: any) => <Heading as="h3" size="md" mb={2}>{children}</Heading>,
+    a: ({ href, children, ...props }: any) => (
+      <ChakraLink href={href} color="blue.500" isExternal {...props}>
         {children}
       </ChakraLink>
     ),
-    code: ({ inline, children, className }) => {
+    code: ({ inline, children, className }: any) => {
       const { colorMode } = useColorMode();
       const monacoTheme = colorMode === 'dark' ? 'vs-dark' : 'vs-light';
 

example/components/chat-with-markdown.tsx

@@ -1,11 +1,11 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { ChakraProvider, Box, Textarea, Button, VStack, HStack, Avatar, Text, useColorModeValue } from '@chakra-ui/react';
+import React, { useState } from 'react';
+import { ChakraProvider, Box, Button, VStack, HStack, Avatar, Text, useColorModeValue } from '@chakra-ui/react';
 import ChakraMarkdown from './chakra-markdown'; // Import the renamed component
+import MonacoMarkdownEditor from './monaco-markdown-editor';
 
 function ChatApp() {
   const [messages, setMessages] = useState([]);
   const [input, setInput] = useState("");
-  const textareaRef = useRef(null);
 
   const bgColor = useColorModeValue("gray.100", "gray.900");
   const chatBgColor = useColorModeValue("white", "gray.800");
@@ -21,26 +21,9 @@ function ChatApp() {
       };
       setMessages([...messages, newMessage]);
       setInput("");
-      if (textareaRef.current) {
-        textareaRef.current.style.height = "auto"; // Reset textarea height after sending
-      }
     }
   };
 
-  // Function to adjust the height of the textarea
-  const autoResizeTextarea = () => {
-    const maxTextareaHeight = window.innerHeight * 0.3; // 30% of screen height
-    if (textareaRef.current) {
-      textareaRef.current.style.height = "auto"; // Reset the height
-      textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, maxTextareaHeight)}px`; // Adjust the height, limiting to 30%
-    }
-  };
-
-  useEffect(() => {
-    // Run the resize function when the input value changes
-    autoResizeTextarea();
-  }, [input]);
-
   return (
     <ChakraProvider>
       <Box bg={bgColor} h="100vh" p={4} display="flex" flexDirection="column">
@@ -74,17 +57,13 @@ function ChatApp() {
 
         {/* Input Section */}
         <HStack mt={4} spacing={2} align="end">
-          <Textarea
-            ref={textareaRef}
+          <MonacoMarkdownEditor
             value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onInput={autoResizeTextarea} // Call onInput to trigger auto-resize
+            onChange={setInput}
+            onEnter={sendMessage}
             placeholder="Type a message with Markdown..."
-            bg={chatBgColor}
-            resize="none"
-            overflow="hidden"
-            flex="1"
-            maxHeight={`30vh`} // Max height: 30% of screen height
+            maxHeight="30vh"
+            minHeight="60px"
           />
           <Button colorScheme="blue" onClick={sendMessage}>
             Send

example/components/monaco-markdown-editor.tsx

@@ -0,0 +1,140 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { Box, useColorMode } from '@chakra-ui/react';
+import MonacoEditor from '@monaco-editor/react';
+
+interface MonacoMarkdownEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  onEnter?: () => void;
+  placeholder?: string;
+  maxHeight?: string;
+  minHeight?: string;
+}
+
+const MonacoMarkdownEditor: React.FC<MonacoMarkdownEditorProps> = ({
+  value,
+  onChange,
+  onEnter,
+  placeholder = "Type your message with Markdown...",
+  maxHeight = "30vh",
+  minHeight = "100px"
+}) => {
+  const { colorMode } = useColorMode();
+  const editorRef = useRef(null);
+  const [editorHeight, setEditorHeight] = useState(minHeight);
+
+  const monacoTheme = colorMode === 'dark' ? 'vs-dark' : 'vs-light';
+
+  // Auto-resize editor based on content
+  const updateEditorHeight = () => {
+    if (editorRef.current) {
+      const editor = editorRef.current;
+      const contentHeight = editor.getContentHeight();
+      const maxHeightPx = parseInt(maxHeight.replace('vh', '')) * window.innerHeight / 100;
+      const minHeightPx = parseInt(minHeight.replace('px', ''));
+
+      const newHeight = Math.min(Math.max(contentHeight, minHeightPx), maxHeightPx);
+      setEditorHeight(`${newHeight}px`);
+    }
+  };
+
+  const handleEditorDidMount = (editor, monaco) => {
+    editorRef.current = editor;
+
+    // Set up auto-resize
+    editor.onDidContentSizeChange(updateEditorHeight);
+
+    // Initial height calculation
+    updateEditorHeight();
+
+    // Configure editor for better markdown editing experience
+    editor.updateOptions({
+      automaticLayout: true,
+      scrollBeyondLastLine: false,
+      wordWrap: 'on',
+      minimap: { enabled: false },
+      lineNumbers: 'off',
+      folding: false,
+      selectOnLineNumbers: false,
+      overviewRulerLanes: 0,
+      hideCursorInOverviewRuler: true,
+      renderLineHighlight: 'none',
+      scrollbar: {
+        vertical: 'auto',
+        horizontal: 'auto',
+        verticalScrollbarSize: 8,
+        horizontalScrollbarSize: 8
+      }
+    });
+
+    // Show placeholder when empty
+    if (!value) {
+      editor.setValue('');
+    }
+
+    // Add keyboard shortcut for Enter to send (Ctrl+Enter for new line)
+    if (onEnter) {
+      editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {
+        // Ctrl+Enter adds new line (default behavior)
+        editor.trigger('keyboard', 'type', { text: '\n' });
+      });
+
+      editor.addCommand(monaco.KeyCode.Enter, () => {
+        // Enter sends message
+        onEnter();
+      });
+    }
+  };
+
+  const handleEditorChange = (newValue) => {
+    onChange(newValue || '');
+    // Trigger height update after content change
+    setTimeout(updateEditorHeight, 0);
+  };
+
+  useEffect(() => {
+    updateEditorHeight();
+  }, [value]);
+
+  return (
+    <Box
+      border="1px solid"
+      borderColor={colorMode === 'dark' ? 'gray.600' : 'gray.200'}
+      borderRadius="md"
+      overflow="hidden"
+      flex="1"
+    >
+      <MonacoEditor
+        height={editorHeight}
+        language="markdown"
+        theme={monacoTheme}
+        value={value}
+        onChange={handleEditorChange}
+        onMount={handleEditorDidMount}
+        options={{
+          placeholder: placeholder,
+          automaticLayout: true,
+          scrollBeyondLastLine: false,
+          wordWrap: 'on',
+          minimap: { enabled: false },
+          lineNumbers: 'off',
+          folding: false,
+          selectOnLineNumbers: false,
+          overviewRulerLanes: 0,
+          hideCursorInOverviewRuler: true,
+          renderLineHighlight: 'none',
+          scrollbar: {
+            vertical: 'auto',
+            horizontal: 'auto',
+            verticalScrollbarSize: 8,
+            horizontalScrollbarSize: 8
+          },
+          fontSize: 14,
+          fontFamily: 'ui-monospace, SFMono-Regular, "Roboto Mono", monospace'
+        }}
+      />
+    </Box>
+  );
+};
+
+export default MonacoMarkdownEditor;