From 46e93a1d4b9134a4b3ae009200a692bd3a5141d1 Mon Sep 17 00:00:00 2001
From: konard <drakonard@gmail.com>
Date: Thu, 11 Sep 2025 08:18:27 +0300
Subject: [PATCH 1/3] Initial commit with task details for issue #22

Adding CLAUDE.md with task information for AI processing.
This file will be removed when the task is complete.

Issue: https://github.com/linksplatform/react-deep-tree/issues/22
---
 CLAUDE.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 CLAUDE.md

diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..4389f8f
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,5 @@
+Issue to solve: https://github.com/linksplatform/react-deep-tree/issues/22
+Your prepared branch: issue-22-cff693c5
+Your prepared working directory: /tmp/gh-issue-solver-1757567905437
+
+Proceed.
\ No newline at end of file

From fb367a1f53fbb7d0c0c1bfef48251677b39b579d Mon Sep 17 00:00:00 2001
From: konard <drakonard@gmail.com>
Date: Thu, 11 Sep 2025 08:18:43 +0300
Subject: [PATCH 2/3] Remove CLAUDE.md - PR created successfully

---
 CLAUDE.md | 5 -----
 1 file changed, 5 deletions(-)
 delete mode 100644 CLAUDE.md

diff --git a/CLAUDE.md b/CLAUDE.md
deleted file mode 100644
index 4389f8f..0000000
--- a/CLAUDE.md
+++ /dev/null
@@ -1,5 +0,0 @@
-Issue to solve: https://github.com/linksplatform/react-deep-tree/issues/22
-Your prepared branch: issue-22-cff693c5
-Your prepared working directory: /tmp/gh-issue-solver-1757567905437
-
-Proceed.
\ No newline at end of file

From 5fedc6b73c069122ffa624cf052b8b65166e5165 Mon Sep 17 00:00:00 2001
From: konard <drakonard@gmail.com>
Date: Thu, 11 Sep 2025 08:28:28 +0300
Subject: [PATCH 3/3] Implement Monaco Editor for better message editing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Created MonacoMarkdownEditor component with markdown language support
- Replaced textarea with Monaco Editor in chat-with-markdown component
- Added auto-resize functionality based on content height
- Added keyboard shortcuts: Enter to send, Ctrl+Enter for new line
- Fixed TypeScript errors in chakra-markdown component
- Improved markdown editing experience with syntax highlighting

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 example/components/chakra-markdown.tsx        |  18 ++-
 example/components/chat-with-markdown.tsx     |  37 +----
 example/components/monaco-markdown-editor.tsx | 140 ++++++++++++++++++
 3 files changed, 159 insertions(+), 36 deletions(-)
 create mode 100644 example/components/monaco-markdown-editor.tsx

diff --git a/example/components/chakra-markdown.tsx b/example/components/chakra-markdown.tsx
index ce31ab3..33b2e90 100644
--- a/example/components/chakra-markdown.tsx
+++ b/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';
 
diff --git a/example/components/chat-with-markdown.tsx b/example/components/chat-with-markdown.tsx
index c928262..c2e0abd 100644
--- a/example/components/chat-with-markdown.tsx
+++ b/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
diff --git a/example/components/monaco-markdown-editor.tsx b/example/components/monaco-markdown-editor.tsx
new file mode 100644
index 0000000..fadebe3
--- /dev/null
+++ b/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;
\ No newline at end of file