feat: add executable code blocks with 15+ programming languages

- Add Monaco Editor integration with VS Code experience
- Support JavaScript, TypeScript, Python, Java, C++, C#, Go, Rust, PHP, Ruby, Kotlin, Swift, Bash, SQL
- Implement secure backend proxy for Judge0 API (no client-side API keys)
- Add real-time status updates during code execution
- Support per-block theme customization (light/dark)
- Add resizable code blocks with drag handles
- Integrate with TipTap editor via custom NodeView extension
- Add toolbar button and slash command support

Author: rui-typelets

README.md

@@ -64,6 +64,7 @@ Get the native desktop experience with:
 - 💾 **Auto-save** - Real-time saving with visual indicators
 - 🔗 **Links & references** - Easy link insertion and management
 - 🧮 **Code support** - Inline code and code blocks with syntax highlighting
+- ⚡ **Executable code blocks** - Run JavaScript, Python, Java, C++, and 10+ other languages directly in your notes
 
 ### 📊 Professional Status Bar
 - 📈 **Real-time statistics** - Word count, character count, reading time estimates
@@ -78,6 +79,20 @@ Get the native desktop experience with:
 - 🌐 **Cross-platform** - Responsive web app that works seamlessly on desktop, tablet, and mobile
 - 🖨️ **Print support** - Clean printing with proper formatting
 
+### ⚡ Executable Code Blocks
+
+![Execute Code Demo](https://github.com/typelets/typelets-app/blob/main/execute-code-demo.gif)
+
+- 💻 **15+ Programming Languages** - JavaScript, TypeScript, Python, Java, C++, C#, Go, Rust, PHP, Ruby, Kotlin, Swift, Bash, SQL, and more
+- 🎨 **Monaco Editor Integration** - Professional VS Code-powered editor with IntelliSense and syntax highlighting
+- ⚡ **One-click Execution** - Run code instantly with the play button or `Ctrl+Enter` keyboard shortcut
+- 📊 **Real-time Status Updates** - Live execution progress from "In Queue" → "Processing" → "Complete"
+- 🔄 **Resizable Code Blocks** - Drag to adjust editor height for optimal viewing
+- 🌙 **Theme Toggle** - Switch between light and dark Monaco editor themes
+- 💾 **Persistent Results** - Code output is automatically saved with your notes
+- 🔒 **Secure Sandboxed Execution** - Code runs in isolated environments via Judge0 API
+- 📋 **Error Handling** - Clear error messages and compilation details for debugging
+
 ## 🔒 Security First
 
 Typelets uses industry-standard encryption:
@@ -146,7 +161,13 @@ VITE_APP_NAME=Typelets
 VITE_APP_VERSION=0.5.0
 ```
 
-Get your Clerk keys from [dashboard.clerk.com](https://dashboard.clerk.com)
+**Authentication Setup:**
+- Get your Clerk keys from [dashboard.clerk.com](https://dashboard.clerk.com)
+
+**Code Execution Setup:**
+- Code execution is handled securely by your backend API
+- The backend proxy manages Judge0 API integration
+- No client-side API keys required for security
 
 ### Development Proxy
 
@@ -374,6 +395,8 @@ typelets/
 - **Build Tool:** Vite 7 with development proxy
 - **Styling:** Tailwind CSS v4
 - **Editor:** TipTap with code highlighting
+- **Code Editor:** Monaco Editor (VS Code engine)
+- **Code Execution:** Judge0 API for 15+ programming languages
 - **Authentication:** Clerk
 - **UI Components:** Radix UI
 - **Encryption:** Web Crypto API with AES-256-GCM

assets/execute-code-demo.gif

@@ -61,6 +61,7 @@
   },
   "dependencies": {
     "@clerk/clerk-react": "^5.41.0",
+    "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
@@ -90,6 +91,7 @@
     "highlight.js": "^11.11.1",
     "lowlight": "^3.3.0",
     "lucide-react": "^0.523.0",
+    "monaco-editor": "^0.53.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "tailwind-merge": "^3.3.1",

package.json

@@ -12,6 +12,7 @@ import Index from '@/components/common/SEO';
 import { SEO_CONFIG } from '@/constants';
 import { api } from '@/lib/api/api.ts';
 import { fileService } from '@/services/fileService';
+import { codeExecutionService } from '@/services/codeExecutionService';
 import { clearUserEncryptionData } from '@/lib/encryption';
 import MainApp from '@/pages/MainApp';
 
@@ -23,6 +24,7 @@ function AppContent() {
   useEffect(() => {
     api.setTokenProvider(getToken);
     fileService.setTokenProvider(getToken);
+    codeExecutionService.setTokenProvider(getToken);
   }, [getToken]);
 
   useEffect(() => {

pnpm-lock.yaml

@@ -24,6 +24,7 @@ import {
   RemoveFormatting,
   Copy,
   Smile,
+  Codesandbox,
 } from 'lucide-react';
 
 import { Button } from '@/components/ui/button.tsx';
@@ -395,6 +396,15 @@ export function Toolbar({ editor }: ToolbarProps) {
         </DropdownMenuContent>
       </DropdownMenu>
 
+      <Button
+        variant={editor.isActive('executableCodeBlock') ? 'default' : 'ghost'}
+        size="sm"
+        onClick={() => editor.chain().focus().setExecutableCodeBlock({ language: 'javascript', executable: true }).run()}
+        title="Executable Code Block"
+      >
+        <Codesandbox className="h-4 w-4" />
+      </Button>
+
       <Button
         variant={editor.isActive('blockquote') ? 'default' : 'ghost'}
         size="sm"

src/App.tsx

@@ -10,6 +10,7 @@ import Color from '@tiptap/extension-color';
 import TextStyle from '@tiptap/extension-text-style';
 import { TableOfContents } from '../extensions/TableOfContents';
 import { ResizableImage } from '../extensions/ResizableImage';
+import { ExecutableCodeBlock } from '../extensions/ExecutableCodeBlock';
 import StarterKit from '@tiptap/starter-kit';
 import bash from 'highlight.js/lib/languages/bash';
 import cpp from 'highlight.js/lib/languages/cpp';
@@ -56,6 +57,12 @@ export function createEditorExtensions() {
       horizontalRule: false,
       dropcursor: false,
     }),
+    ExecutableCodeBlock.configure({
+      defaultLanguage: 'javascript',
+      HTMLAttributes: {
+        class: 'executable-code-block',
+      },
+    }),
     CodeBlockLowlight.configure({
       lowlight,
       defaultLanguage: 'plaintext',