feat: add executable code blocks with 15+ programming languages

[rui-typelets]

Summary

Transform Typelets into an interactive coding environment! This PR adds executable code blocks that support 15+ programming languages, allowing users to write, edit, and
execute code directly within their notes.

Features Added

💻 Code Execution

• 15+ Programming Languages - JavaScript, TypeScript, Python, Java, C++, C#, Go, Rust, PHP, Ruby, Kotlin, Swift, Bash, SQL
• One-click Execution - Run code with play button or Ctrl+Enter
• Real-time Status Updates - Live progress from "In Queue" → "Processing" → "Complete"
• Secure Backend Proxy - No API keys exposed on frontend

🎨 Professional Editor Experience

• Monaco Editor Integration - Full VS Code editor experience with IntelliSense
• Syntax Highlighting - Advanced highlighting for all supported languages
• Per-block Themes - Independent light/dark theme toggle for each code block
• Resizable Blocks - Drag to adjust editor height
• Automatic Resizing - Smart resize on window/panel changes

🔧 Editor Integration

• TipTap NodeView Extension - Deep integration with existing editor
• Toolbar Button - Quick access via Codesandbox icon
• Slash Commands - Type /executable or /code to insert
• Persistent Results - Code output saved with notes

📱 Responsive Design Fixes

• Panel Minimum Widths - Prevents panels from collapsing too small
• No Horizontal Scroll - Fixed layout overflow issues
• Mobile Optimized - Works seamlessly across all screen sizes

Technical Implementation

Architecture

• TipTap Extension - Custom ExecutableCodeBlock node type
• React NodeView - ExecutableCodeBlockNodeView component with Monaco
• Service Layer - CodeExecutionService with authentication and error handling
• Backend Proxy - Secure Judge0 API integration (no client-side keys)

Security

• ✅ No API Key Exposure - Judge0 key stays secure on backend
• ✅ SecureError Pattern - Consistent error handling across app
• ✅ Authentication Required - All requests use JWT tokens
• ✅ Sandboxed Execution - Code runs in isolated Judge0 environments

Performance

• ✅ Lazy Loading - Monaco loads only when needed
• ✅ Optimized Dependencies - Only added necessary packages
• ✅ Efficient Polling - Smart status checking with timeout handling
• ✅ CSS Theme Isolation - Per-block styling without global conflicts

Files Changed

New Files

• src/services/codeExecutionService.ts - Core execution service
• src/components/editor/extensions/ExecutableCodeBlock.ts - TipTap extension
• src/components/editor/extensions/ExecutableCodeBlockNodeView.tsx - React component
• assets/execute-code-demo.gif - Feature demonstration

Modified Files

• src/App.tsx - Authentication setup for code execution service
• src/components/editor/Editor/Toolbar.tsx - Added executable code block button
• src/components/editor/config/editor-config.ts - Registered new extension
• src/components/editor/extensions/SlashCommands.tsx - Added slash command
• src/components/folders/index.tsx - Responsive layout fixes
• src/components/layout/DesktopLayout.tsx - Overflow and flex improvements
• src/components/notes/NotesPanel/index.tsx - Panel width constraints
• README.md - Comprehensive documentation update
• package.json - Added Monaco Editor dependencies

Dependencies Added

• @monaco-editor/react - React wrapper for Monaco Editor
• monaco-editor - VS Code editor engine

Breaking Changes

None - fully backward compatible with existing notes.

Testing

• ✅ All existing tests pass
• ✅ TypeScript type checking clean
• ✅ ESLint passes with zero warnings
• ✅ Responsive design tested across screen sizes
• ✅ Code execution tested with multiple languages
• ✅ Error handling verified for auth/network failures

Migration Notes

No migration required. Existing notes remain unchanged. New executable code blocks can be added via toolbar or slash commands.

Usage

Creating Executable Code Blocks

1. Toolbar - Click the Codesandbox icon
2. Slash Command - Type /executable or /code
3. Language Selection - Choose from 15+ languages in dropdown

Executing Code

1. Play Button - Click to execute
2. Keyboard - Press Ctrl+Enter
3. Status - Watch real-time execution progress
4. Results - View output or error messages

Customization

• Theme Toggle - Sun/Moon icon to switch Monaco theme
• Resize - Drag bottom handle to adjust height
• Clear Output - Reset button to clear results

[github-actions]

🎉 This PR is included in version 1.18.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀