Add MonacoEditor for code blocks

Author: Konard

example/components/chat-with-markdown.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { ChakraProvider, Box, Textarea, Button, VStack, HStack, Avatar, Text, Link as ChakraLink, Heading } from '@chakra-ui/react';
 import ReactMarkdown from 'react-markdown';
+import MonacoEditor from '@monaco-editor/react'; // Monaco Editor
 
 function ChatApp() {
   const [messages, setMessages] = useState([]);
@@ -19,7 +20,7 @@ function ChatApp() {
     }
   };
 
-  // Custom renderers for Markdown components using Chakra UI
+  // Custom renderers for Markdown components using Chakra UI and Monaco Editor for code blocks
   const renderers = {
     // Render headers using Chakra's Heading component
     h1: ({ children }) => <Heading as="h1" size="xl" mb={2}>{children}</Heading>,
@@ -32,6 +33,30 @@ function ChatApp() {
         {children}
       </ChakraLink>
     ),
+
+    // Use Monaco Editor for code blocks
+    code: ({ inline, children, className }) => {
+      const language = className ? className.replace('language-', '') : 'plaintext';
+      if (inline) {
+        return <Text as="code" bg="gray.100" p="1" borderRadius="md">{children}</Text>;
+      }
+      return (
+        <Box border="1px solid" borderColor="gray.200" borderRadius="md" overflow="hidden" my={2}>
+          <MonacoEditor
+            height="200px"
+            language={language}
+            theme="vs-dark"
+            value={String(children).trim()}
+            options={{
+              readOnly: true,
+              minimap: { enabled: false },
+              scrollBeyondLastLine: false,
+              lineNumbers: "off",
+            }}
+          />
+        </Box>
+      );
+    },
   };
 
   return (
@@ -51,7 +76,7 @@ function ChatApp() {
           {messages.map((message) => (
             <HStack key={message.id} align="start" w="100%">
               <Avatar name={message.sender} size="sm" />
-              <Box bg="blue.50" p={3} borderRadius="lg" maxW="80%">
+              <Box bg="blue.50" p={3} borderRadius="lg" width="80%">
                 <Text fontSize="sm" fontWeight="bold">
                   {message.sender}
                 </Text>
@@ -72,8 +97,8 @@ function ChatApp() {
             onChange={(e) => setInput(e.target.value)}
             placeholder="Type a message with Markdown..."
             bg="white"
-            resize="none" // Disable manual resize
-            overflow="hidden" // Hide overflow when max height is reached
+            resize="none"
+            overflow="hidden"
             flex="1"
           />
           <Button colorScheme="blue" onClick={sendMessage}>

example/package.json

@@ -13,6 +13,7 @@
     "@chakra-ui/react": "^2.10.3",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@monaco-editor/react": "^4.6.0",
     "framer-motion": "^11.11.9",
     "next": "14.2.15",
     "react": "18.3.1",

example/yarn.lock

@@ -321,6 +321,20 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@monaco-editor/loader@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.4.0.tgz#f08227057331ec890fa1e903912a5b711a2ad558"
+  integrity sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==
+  dependencies:
+    state-local "^1.0.6"
+
+"@monaco-editor/react@^4.6.0":
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.6.0.tgz#bcc68671e358a21c3814566b865a54b191e24119"
+  integrity sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==
+  dependencies:
+    "@monaco-editor/loader" "^1.4.0"
+
 "@next/[email protected]":
   version "14.2.15"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-14.2.15.tgz#06d984e37e670d93ddd6790af1844aeb935f332f"
@@ -1604,6 +1618,11 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
+state-local@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/state-local/-/state-local-1.0.7.tgz#da50211d07f05748d53009bee46307a37db386d5"
+  integrity sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==
+
 streamsearch@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"