feat: add executable code blocks with 15+ languages, Monaco editor, and secure backend proxy

Author: rui-typelets

.husky/pre-commit

@@ -0,0 +1,22 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/_/husky.sh"
+
+echo "🔍 Running pre-commit checks..."
+
+# Type checking
+echo "📝 Type checking..."
+npm run type-check
+if [ $? -ne 0 ]; then
+  echo "❌ Type check failed"
+  exit 1
+fi
+
+# Linting
+echo "🔍 Linting..."
+npm run lint
+if [ $? -ne 0 ]; then
+  echo "❌ Lint failed"
+  exit 1
+fi
+
+echo "✅ All pre-commit checks passed!"

src/components/editor/Editor/Toolbar.tsx

@@ -399,7 +399,7 @@ export function Toolbar({ editor }: ToolbarProps) {
       <Button
         variant={editor.isActive('executableCodeBlock') ? 'default' : 'ghost'}
         size="sm"
-        onClick={() => editor.chain().focus().setExecutableCodeBlock({ language: 'javascript', executable: true }).run()}
+        onClick={() => editor.chain().focus().setExecutableCodeBlock({ language: 'javascript' }).run()}
         title="Executable Code Block"
       >
         <Codesandbox className="h-4 w-4" />

src/components/editor/extensions/ExecutableCodeBlockNodeView.tsx

@@ -60,12 +60,14 @@ interface ExecutableCodeBlockNodeViewProps {
     attrs: {
       language?: string;
       executable?: boolean;
+      output?: ExecutionResult | null;
     };
     textContent: string;
+    nodeSize: number;
   };
   updateAttributes: (attributes: Record<string, unknown>) => void;
   selected: boolean;
-  getPos: () => number;
+  getPos: () => number | undefined;
   editor: TiptapEditor;
 }
 
@@ -96,7 +98,7 @@ export function ExecutableCodeBlockNodeView({ node, updateAttributes, selected:
   const [isResizing, setIsResizing] = useState(false);
   const [monacoThemeOverride, setMonacoThemeOverride] = useState<'light' | 'dark'>('dark');
   const nodeRef = useRef<HTMLDivElement>(null);
-  const updateTimeoutRef = useRef<NodeJS.Timeout>();
+  const updateTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
   const monacoRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
   const resizeStartY = useRef<number>(0);
   const resizeStartHeight = useRef<number>(300);
@@ -138,8 +140,10 @@ export function ExecutableCodeBlockNodeView({ node, updateAttributes, selected:
       document.removeEventListener('mousemove', handleMouseMove);
       document.removeEventListener('mouseup', handleMouseUp);
       if (updateTimeoutRef.current) {
+        if (updateTimeoutRef.current) {
         clearTimeout(updateTimeoutRef.current);
       }
+      }
     };
   }, [isResizing]);
 
@@ -186,7 +190,9 @@ export function ExecutableCodeBlockNodeView({ node, updateAttributes, selected:
     if (value !== undefined) {
       setCode(value);
       // Debounce the node content update to avoid performance issues
-      clearTimeout(updateTimeoutRef.current);
+      if (updateTimeoutRef.current) {
+        clearTimeout(updateTimeoutRef.current);
+      }
       updateTimeoutRef.current = setTimeout(() => {
         updateNodeContent(value);
       }, 300);
@@ -196,7 +202,7 @@ export function ExecutableCodeBlockNodeView({ node, updateAttributes, selected:
   const updateNodeContent = (newCode: string) => {
     try {
       const pos = getPos();
-      if (pos >= 0) {
+      if (pos !== undefined && pos >= 0) {
         const transaction = editor.view.state.tr.replaceWith(
           pos + 1,
           pos + node.nodeSize - 1,

src/components/editor/extensions/SlashCommands.tsx

@@ -163,7 +163,7 @@ const commands: CommandItem[] = [
       editor.chain()
         .focus()
         .deleteRange(range)
-        .setExecutableCodeBlock({ language: 'javascript', executable: true })
+        .setExecutableCodeBlock({ language: 'javascript' })
         .insertContent('<p></p>')
         .run();
     },