Replace textarea with Monaco editor for better UX and syntax highlighting

Author: Gupta-02

package-lock.json

@@ -38,6 +38,7 @@
     "@floating-ui/react": "^0.27.8",
     "@giscus/react": "^3.1.0",
     "@mdx-js/react": "^3.0.0",
+    "@monaco-editor/react": "^4.7.0",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-avatar": "^1.1.7",
     "@radix-ui/react-collapsible": "^1.1.12",

package.json

@@ -1,4 +1,5 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useState} from 'react';
+import Editor from '@monaco-editor/react';
 import './styles.css';
 
 declare global {
@@ -8,11 +9,13 @@ declare global {
   }
 }
 
-const DEFAULT_CODE = `print("Hello from Pyodide!")\nfor i in range(3):\n    print('Line', i+1)`;
+const DEFAULT_CODE = `print("Hello from Pyodide!")
+for i in range(3):
+    print('Line', i+1)`;
 
 export default function InteractivePythonEditor({
   initialCode = DEFAULT_CODE,
-  height = 260,
+  height = 400,
 }: {
   initialCode?: string;
   height?: number | string;
@@ -21,36 +24,6 @@ export default function InteractivePythonEditor({
   const [output, setOutput] = useState('');
   const [loading, setLoading] = useState(false);
   const [pyodideReady, setPyodideReady] = useState(false);
-  const preRef = useRef<HTMLPreElement | null>(null);
-
-  useEffect(() => {
-    // Load Prism for highlighting (CSS + script)
-    if (!document.querySelector('link[data-prism]')) {
-      const link = document.createElement('link');
-      link.setAttribute('data-prism', '');
-      link.rel = 'stylesheet';
-      link.href = 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.css';
-      document.head.appendChild(link);
-    }
-    if (!(window as any).Prism) {
-      const s = document.createElement('script');
-      s.src = 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js';
-      s.async = true;
-      document.head.appendChild(s);
-    }
-  }, []);
-
-  useEffect(() => {
-    // Highlight when code or Prism loads
-    const highlight = () => {
-      if ((window as any).Prism && preRef.current) {
-        (window as any).Prism.highlightElement(preRef.current);
-      }
-    };
-    highlight();
-    const id = setTimeout(highlight, 50);
-    return () => clearTimeout(id);
-  }, [code]);
 
   async function ensurePyodide() {
     if (pyodideReady) return window.pyodide;
@@ -118,18 +91,22 @@ export default function InteractivePythonEditor({
         <div className="ipe-status">{pyodideReady ? 'Pyodide ready' : (loading ? 'Loading...' : 'Pyodide not loaded')}</div>
       </div>
 
-      <div className="ipe-main">
-        <textarea
-          className="ipe-textarea"
+      <div className="ipe-editor">
+        <Editor
+          height={height}
+          language="python"
           value={code}
-          onChange={(e) => setCode(e.target.value)}
-          style={{height}}
-          spellCheck={false}
+          onChange={(value) => setCode(value || '')}
+          theme="light"
+          options={{
+            minimap: { enabled: false },
+            fontSize: 14,
+            lineNumbers: 'on',
+            roundedSelection: false,
+            scrollBeyondLastLine: false,
+            automaticLayout: true,
+          }}
         />
-
-        <div className="ipe-preview" style={{height}}>
-          <pre ref={preRef} className="language-python"><code>{code}</code></pre>
-        </div>
       </div>
 
       <div className="ipe-output">

src/components/InteractivePythonEditor/index.tsx

@@ -1,32 +1,74 @@
-.interactive-py-editor { 
+.interactive-py-editor {
   border: 1px solid var(--ifm-color-emphasis-200, #e6e6e6);
-  border-radius: 6px;
+  border-radius: 8px;
   overflow: hidden;
+  background: var(--ifm-background-color, #fff);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
   font-family: var(--ifm-font-family-base, Inter, Roboto, system-ui, -apple-system, 'Segoe UI');
 }
+
 .ipe-toolbar {
   display: flex;
-  gap: 8px;
+  gap: 10px;
   align-items: center;
-  padding: 8px;
+  padding: 12px 16px;
   background: var(--ifm-color-emphasis-0, #fafafa);
   border-bottom: 1px solid var(--ifm-color-emphasis-200, #e6e6e6);
 }
+
 .ipe-btn {
-  padding: 6px 10px;
-  border-radius: 4px;
-  border: 1px solid rgba(0,0,0,0.08);
-  background: white;
+  padding: 8px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--ifm-color-primary, #007acc);
+  background: var(--ifm-color-primary, #007acc);
+  color: white;
   cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: background 0.2s;
+}
+
+.ipe-btn:hover:not(:disabled) {
+  background: var(--ifm-color-primary-dark, #005a9e);
+}
+
+.ipe-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.ipe-status {
+  margin-left: auto;
+  color: var(--ifm-color-emphasis-600, #666);
+  font-size: 13px;
+  font-style: italic;
+}
+
+.ipe-editor {
+  border-bottom: 1px solid var(--ifm-color-emphasis-200, #e6e6e6);
+}
+
+.ipe-output {
+  background: #1e1e1e;
+  color: #d4d4d4;
+  padding: 16px;
+}
+
+.ipe-output-header {
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: #fff;
+}
+
+.ipe-output-body {
+  background: #1e1e1e;
+  color: #d4d4d4;
+  padding: 12px;
+  border-radius: 4px;
+  min-height: 100px;
+  overflow: auto;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 13px;
+  white-space: pre-wrap;
+  word-break: break-word;
 }
-.ipe-btn:disabled { opacity: 0.6; cursor: default }
-.ipe-status { margin-left: auto; color: #666; font-size: 13px }
-.ipe-main { display: flex; gap: 8px; padding: 12px }
-.ipe-textarea { flex: 1 1 50%; font-family: monospace; font-size: 13px; padding: 10px; border: 1px solid var(--ifm-color-emphasis-200, #e6e6e6); border-radius: 4px; resize: vertical; }
-.ipe-preview { flex: 1 1 50%; overflow: auto; background: #f7f7f7; border-radius: 4px; padding: 10px; border: 1px solid var(--ifm-color-emphasis-200, #e6e6e6) }
-.ipe-output { border-top: 1px solid var(--ifm-color-emphasis-200, #e6e6e6); background: #fff; padding: 10px }
-.ipe-output-header { font-weight: 600; margin-bottom: 6px }
-.ipe-output-body { background: #111; color: #fff; padding: 10px; border-radius: 4px; min-height: 80px; overflow: auto }
-
-/* Ensure Prism code block wraps nicely */
-.language-python { white-space: pre-wrap; word-break: break-word; }