diff --git a/src/frontend/src/CustomEmbeddableRenderer.tsx b/src/frontend/src/CustomEmbeddableRenderer.tsx
index bb096fc..9af04ff 100644
--- a/src/frontend/src/CustomEmbeddableRenderer.tsx
+++ b/src/frontend/src/CustomEmbeddableRenderer.tsx
@@ -5,7 +5,8 @@ import {
   Dashboard,
   StateIndicator,
   ControlButton,
-  HtmlEditor
+  HtmlEditor,
+  Editor
 } from './pad';
 import { ActionButton } from './pad/buttons';
 
@@ -20,8 +21,9 @@ export const renderCustomEmbeddable = (
 
     switch (path) {
       case 'html':
-      case 'editor':
         return <HtmlEditor element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
+      case 'editor':
+        return <Editor element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
       case 'state':
         return <StateIndicator />;
       case 'control':
diff --git a/src/frontend/src/pad/editors/Editor.tsx b/src/frontend/src/pad/editors/Editor.tsx
new file mode 100644
index 0000000..fad0763
--- /dev/null
+++ b/src/frontend/src/pad/editors/Editor.tsx
@@ -0,0 +1,286 @@
+import React, { useRef, useState, useEffect, useCallback } from 'react';
+import MonacoEditor from '@monaco-editor/react';
+import LanguageSelector from './LanguageSelector';
+import '../../styles/Editor.scss';
+
+interface EditorProps {
+  defaultValue?: string;
+  language?: string;
+  theme?: string;
+  height?: string | number;
+  options?: Record<string, any>;
+  onChange?: (value: string | undefined) => void;
+  onMount?: (editor: any) => void;
+  onLanguageChange?: (language: string) => void; // Callback for language changes
+  className?: string;
+  showLanguageSelector?: boolean;
+  element?: any; // Excalidraw element
+  excalidrawAPI?: any; // Excalidraw API instance
+  autoSaveInterval?: number; // Interval in ms to auto-save content to customData
+}
+
+const Editor: React.FC<EditorProps> = ({
+  defaultValue = '',
+  language = 'javascript',
+  theme = 'vs-dark',
+  height = '100%',
+  options = {
+    minimap: { enabled: false },
+    scrollBeyondLastLine: false,
+    fontSize: 12,
+    automaticLayout: true
+  },
+  onChange,
+  onMount,
+  onLanguageChange,
+  className = 'monaco-editor-container',
+  showLanguageSelector = true,
+  element,
+  excalidrawAPI,
+  autoSaveInterval = 2000 // Default to 2 seconds
+}) => {
+  const editorRef = useRef<any>(null);
+  // Initialize currentLanguage from element's customData if available, otherwise use the prop
+  const [currentLanguage, setCurrentLanguage] = useState(
+    element?.customData?.editorLanguage || language
+  );
+  const contentRef = useRef(defaultValue);
+  const lastSavedContentRef = useRef('');
+  const lastSavedLanguageRef = useRef(language);
+  const elementIdRef = useRef(element?.id);
+  const isInitialMountRef = useRef(true);
+
+  // Special effect to handle initial mount and force language reload
+  useEffect(() => {
+    // Only run this effect when the editor is mounted
+    if (!editorRef.current) return;
+    
+    if (isInitialMountRef.current && element?.customData?.editorLanguage) {
+      // Force a language reload after initial mount
+      const model = editorRef.current.getModel();
+      if (model) {
+        // Force Monaco to update the language model immediately
+        model.setLanguage(element.customData.editorLanguage);
+        
+        // Set a small timeout to force Monaco to re-process the content with the correct language
+        setTimeout(() => {
+          // This triggers Monaco to re-process the content with the correct language
+          const currentValue = model.getValue();
+          model.setValue(currentValue);
+        }, 50);
+      }
+      
+      isInitialMountRef.current = false;
+    }
+  }, [element?.customData?.editorLanguage]);
+
+  // Update editor content when element changes (e.g., when cloned or pasted)
+  useEffect(() => {
+    if (!editorRef.current || !element) return;
+    
+    // Check if element ID has changed (indicating a new element)
+    if (element.id !== elementIdRef.current) {
+      elementIdRef.current = element.id;
+      
+      // First update language if needed - do this before setting content
+      if (element.customData?.editorLanguage) {
+        setCurrentLanguage(element.customData.editorLanguage);
+        lastSavedLanguageRef.current = element.customData.editorLanguage;
+        
+        // Force Monaco to update the language model immediately
+        const model = editorRef.current.getModel();
+        if (model) {
+          model.setLanguage(element.customData.editorLanguage);
+          
+          // Then update the editor content after language is set
+          if (element.customData?.editorContent) {
+            model.setValue(element.customData.editorContent);
+            contentRef.current = element.customData.editorContent;
+            lastSavedContentRef.current = element.customData.editorContent;
+            
+            // Force a re-processing of the content with the new language after a short delay
+            // This is crucial for fixing linting errors when pasting/cloning elements
+            setTimeout(() => {
+              const currentValue = model.getValue();
+              model.setValue(currentValue);
+            }, 50);
+          }
+        } else {
+          // Fallback if model isn't available
+          if (element.customData?.editorContent) {
+            editorRef.current.setValue(element.customData.editorContent);
+            contentRef.current = element.customData.editorContent;
+            lastSavedContentRef.current = element.customData.editorContent;
+          }
+        }
+      } else if (element.customData?.editorContent) {
+        // If no language change but content exists
+        editorRef.current.setValue(element.customData.editorContent);
+        contentRef.current = element.customData.editorContent;
+        lastSavedContentRef.current = element.customData.editorContent;
+      }
+    }
+  }, [element, showLanguageSelector]);
+
+  const handleEditorDidMount = (editor: any) => {
+    editorRef.current = editor;
+    
+    // First check and set the language before setting content
+    // This ensures Monaco uses the correct language mode from the start
+    if (element?.customData?.editorLanguage) {
+      setCurrentLanguage(element.customData.editorLanguage);
+      lastSavedLanguageRef.current = element.customData.editorLanguage;
+      
+      const model = editor.getModel();
+      if (model) {
+        // Force Monaco to update the language model immediately
+        model.setLanguage(element.customData.editorLanguage);
+        
+        // Now set the content after language is properly initialized
+        if (element?.customData?.editorContent) {
+          model.setValue(element.customData.editorContent);
+          contentRef.current = element.customData.editorContent;
+          lastSavedContentRef.current = element.customData.editorContent;
+          
+          // Force a re-processing of the content with the correct language after a short delay
+          setTimeout(() => {
+            const currentValue = model.getValue();
+            model.setValue(currentValue);
+          }, 50);
+        }
+      } else {
+        // Fallback if model isn't available
+        if (element?.customData?.editorContent) {
+          editor.setValue(element.customData.editorContent);
+          contentRef.current = element.customData.editorContent;
+          lastSavedContentRef.current = element.customData.editorContent;
+        }
+      }
+    } else if (element?.customData?.editorContent) {
+      // If no language change but content exists
+      editor.setValue(element.customData.editorContent);
+      contentRef.current = element.customData.editorContent;
+      lastSavedContentRef.current = element.customData.editorContent;
+    }
+    
+    if (onMount) {
+      onMount(editor);
+    }
+  };
+
+  // Update editor content when it changes
+  const handleEditorChange = (value: string | undefined) => {
+    if (value !== undefined) {
+      contentRef.current = value;
+    }
+    if (onChange) {
+      onChange(value);
+    }
+  };
+
+  // Save editor content to element's customData
+  const saveContentToCustomData = useCallback(() => {
+    if (!element || !excalidrawAPI || !editorRef.current) return;
+    
+    // Get the current content from the editor
+    const content = editorRef.current.getValue();
+    
+    // Only save if content or language has changed
+    if (content === lastSavedContentRef.current && 
+        currentLanguage === lastSavedLanguageRef.current) {
+      return;
+    }
+    
+    // Update refs to track what we've saved
+    lastSavedContentRef.current = content;
+    lastSavedLanguageRef.current = currentLanguage;
+    
+    // Get all elements from the scene
+    const elements = excalidrawAPI.getSceneElements();
+    
+    // Find and update the element
+    const updatedElements = elements.map(el => {
+      if (el.id === element.id) {
+        // Create a new customData object with the updated editorContent
+        const customData = {
+          ...(el.customData || {}),
+          editorContent: content,
+          editorLanguage: currentLanguage
+        };
+        
+        return { ...el, customData };
+      }
+      return el;
+    });
+    
+    // Update the scene with the modified elements
+    excalidrawAPI.updateScene({
+      elements: updatedElements
+    });
+  }, [element, excalidrawAPI, currentLanguage]);
+
+  // Set up auto-save interval
+  useEffect(() => {
+    if (!element || !excalidrawAPI) return;
+    
+    // Set up interval for auto-saving
+    const intervalId = setInterval(saveContentToCustomData, autoSaveInterval);
+    
+    // Clean up interval on unmount
+    return () => {
+      clearInterval(intervalId);
+      // Save one last time when unmounting
+      saveContentToCustomData();
+    };
+  }, [element, excalidrawAPI, saveContentToCustomData, autoSaveInterval]);
+
+  const handleLanguageChange = (newLanguage: string) => {
+    setCurrentLanguage(newLanguage);
+    
+    // Force Monaco to update the language model immediately when language is changed
+    if (editorRef.current) {
+      const model = editorRef.current.getModel();
+      if (model) {
+        // Update the language
+        model.setLanguage(newLanguage);
+        
+        // Force a re-processing of the content with the new language
+        // This is what fixes the linting errors when manually switching languages
+        setTimeout(() => {
+          const currentValue = model.getValue();
+          model.setValue(currentValue);
+        }, 10);
+      }
+    }
+    
+    // Notify parent component about language change
+    if (onLanguageChange) {
+      onLanguageChange(newLanguage);
+    }
+  };
+
+  return (
+    <div className="editor-wrapper">
+      <MonacoEditor
+        height={height}
+        language={currentLanguage}
+        defaultValue={defaultValue}
+        theme={theme}
+        options={options}
+        onMount={handleEditorDidMount}
+        onChange={handleEditorChange}
+        className={className}
+      />
+      {showLanguageSelector && (
+        <div className="editor-toolbar">
+          <LanguageSelector 
+            value={currentLanguage} 
+            onChange={handleLanguageChange} 
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Editor;
diff --git a/src/frontend/src/pad/editors/HtmlEditor.tsx b/src/frontend/src/pad/editors/HtmlEditor.tsx
index a879d7f..84715ac 100644
--- a/src/frontend/src/pad/editors/HtmlEditor.tsx
+++ b/src/frontend/src/pad/editors/HtmlEditor.tsx
@@ -1,7 +1,7 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import type { NonDeleted, ExcalidrawEmbeddableElement } from '@atyrode/excalidraw/element/types';
 import type { AppState } from '@atyrode/excalidraw/types';
-import Editor from '@monaco-editor/react';
+import Editor from './Editor';
 import { ExcalidrawElementFactory } from '../../lib/ExcalidrawElementFactory';
 import '../../styles/HtmlEditor.scss';
 
@@ -17,10 +17,32 @@ export const HtmlEditor: React.FC<HtmlEditorProps> = ({
   excalidrawAPI
 }) => {
   const [createNew, setCreateNew] = useState(true);
-  const [editorValue, setEditorValue] = useState('<button style="padding: 8px; background: #5294f6; color: white; border: none; border-radius: 4px;">Example Button</button>');
+  const defaultHtml = '<button style="padding: 8px; background: #5294f6; color: white; border: none; border-radius: 4px;">Example Button</button>';
+  const [editorValue, setEditorValue] = useState(
+    element.customData?.editorContent || defaultHtml
+  );
   const editorRef = useRef<any>(null);
+  const elementIdRef = useRef(element.id);
+
+  // Load content from customData when element changes (e.g., when cloned or pasted)
+  useEffect(() => {
+    // Check if element ID has changed (indicating a new element)
+    if (element.id !== elementIdRef.current) {
+      elementIdRef.current = element.id;
+      
+      // If element has customData with editorContent, update the state
+      if (element.customData?.editorContent) {
+        setEditorValue(element.customData.editorContent);
+      } else {
+        setEditorValue(defaultHtml);
+      }
+      
+      // Note: We don't need to update language here since HtmlEditor always uses 'html'
+      // But we still save it in customData for consistency
+    }
+  }, [element.id, element.customData, defaultHtml]);
 
-  const handleEditorDidMount = (editor: any) => {
+  const handleEditorMount = (editor: any) => {
     editorRef.current = editor;
   };
 
@@ -30,6 +52,9 @@ export const HtmlEditor: React.FC<HtmlEditorProps> = ({
     const htmlContent = editorRef.current.getValue();
     const elements = excalidrawAPI.getSceneElements();
     
+    // Get the current editor content
+    const currentContent = editorRef.current.getValue();
+    
     // Create a new iframe element with the HTML content using our factory
     const newElement = ExcalidrawElementFactory.createIframeElement({
       x: createNew ? element.x + element.width + 20 : element.x,
@@ -37,7 +62,11 @@ export const HtmlEditor: React.FC<HtmlEditorProps> = ({
       width: element.width,
       height: element.height,
       htmlContent: htmlContent,
-      id: createNew ? undefined : element.id
+      id: createNew ? undefined : element.id,
+      customData: {
+        editorContent: currentContent,
+        editorLanguage: 'html' // Always set to html for HtmlEditor
+      }
     });
     
     // If creating a new element, add it to the scene
@@ -69,18 +98,13 @@ export const HtmlEditor: React.FC<HtmlEditorProps> = ({
       <div className="html-editor-content">
         <Editor
           height="100%"
-          defaultLanguage="html"
+          language="html"
           defaultValue={editorValue}
-          theme="vs-dark"
-          options={{
-            minimap: { enabled: false },
-            scrollBeyondLastLine: false,
-            fontSize: 12,
-            automaticLayout: true
-          }}
-          onMount={handleEditorDidMount}
           onChange={(value) => value && setEditorValue(value)}
-          className="monaco-editor-container"
+          onMount={handleEditorMount}
+          element={element}
+          excalidrawAPI={excalidrawAPI}
+          showLanguageSelector={false}
         />
         <div className="html-editor-controls">
           <label>
diff --git a/src/frontend/src/pad/editors/LanguageSelector.tsx b/src/frontend/src/pad/editors/LanguageSelector.tsx
new file mode 100644
index 0000000..dd8a4d9
--- /dev/null
+++ b/src/frontend/src/pad/editors/LanguageSelector.tsx
@@ -0,0 +1,132 @@
+import React from 'react';
+
+interface LanguageSelectorProps {
+  value: string;
+  onChange: (language: string) => void;
+  className?: string;
+}
+
+// Language options based on Monaco editor supported languages
+const languageOptions = [
+  { value: '', label: 'Select an example...', disabled: true, hidden: true },
+  { value: 'plaintext', label: 'plaintext' },
+  { value: 'abap', label: 'abap' },
+  { value: 'apex', label: 'apex' },
+  { value: 'azcli', label: 'azcli' },
+  { value: 'bat', label: 'bat' },
+  { value: 'bicep', label: 'bicep' },
+  { value: 'cameligo', label: 'cameligo' },
+  { value: 'clojure', label: 'clojure' },
+  { value: 'coffeescript', label: 'coffeescript' },
+  { value: 'c', label: 'c' },
+  { value: 'cpp', label: 'cpp' },
+  { value: 'csharp', label: 'csharp' },
+  { value: 'csp', label: 'csp' },
+  { value: 'css', label: 'css' },
+  { value: 'cypher', label: 'cypher' },
+  { value: 'dart', label: 'dart' },
+  { value: 'dockerfile', label: 'dockerfile' },
+  { value: 'ecl', label: 'ecl' },
+  { value: 'elixir', label: 'elixir' },
+  { value: 'flow9', label: 'flow9' },
+  { value: 'fsharp', label: 'fsharp' },
+  { value: 'freemarker2', label: 'freemarker2' },
+  { value: 'freemarker2.tag-angle.interpolation-dollar', label: 'freemarker2.tag-angle.interpolation-dollar' },
+  { value: 'freemarker2.tag-bracket.interpolation-dollar', label: 'freemarker2.tag-bracket.interpolation-dollar' },
+  { value: 'freemarker2.tag-angle.interpolation-bracket', label: 'freemarker2.tag-angle.interpolation-bracket' },
+  { value: 'freemarker2.tag-bracket.interpolation-bracket', label: 'freemarker2.tag-bracket.interpolation-bracket' },
+  { value: 'freemarker2.tag-auto.interpolation-dollar', label: 'freemarker2.tag-auto.interpolation-dollar' },
+  { value: 'freemarker2.tag-auto.interpolation-bracket', label: 'freemarker2.tag-auto.interpolation-bracket' },
+  { value: 'go', label: 'go' },
+  { value: 'graphql', label: 'graphql' },
+  { value: 'handlebars', label: 'handlebars' },
+  { value: 'hcl', label: 'hcl' },
+  { value: 'html', label: 'html' },
+  { value: 'ini', label: 'ini' },
+  { value: 'java', label: 'java' },
+  { value: 'javascript', label: 'javascript' },
+  { value: 'julia', label: 'julia' },
+  { value: 'kotlin', label: 'kotlin' },
+  { value: 'less', label: 'less' },
+  { value: 'lexon', label: 'lexon' },
+  { value: 'lua', label: 'lua' },
+  { value: 'liquid', label: 'liquid' },
+  { value: 'm3', label: 'm3' },
+  { value: 'markdown', label: 'markdown' },
+  { value: 'mdx', label: 'mdx' },
+  { value: 'mips', label: 'mips' },
+  { value: 'msdax', label: 'msdax' },
+  { value: 'mysql', label: 'mysql' },
+  { value: 'objective-c', label: 'objective-c' },
+  { value: 'pascal', label: 'pascal' },
+  { value: 'pascaligo', label: 'pascaligo' },
+  { value: 'perl', label: 'perl' },
+  { value: 'pgsql', label: 'pgsql' },
+  { value: 'php', label: 'php' },
+  { value: 'pla', label: 'pla' },
+  { value: 'postiats', label: 'postiats' },
+  { value: 'powerquery', label: 'powerquery' },
+  { value: 'powershell', label: 'powershell' },
+  { value: 'proto', label: 'proto' },
+  { value: 'pug', label: 'pug' },
+  { value: 'python', label: 'python' },
+  { value: 'qsharp', label: 'qsharp' },
+  { value: 'r', label: 'r' },
+  { value: 'razor', label: 'razor' },
+  { value: 'redis', label: 'redis' },
+  { value: 'redshift', label: 'redshift' },
+  { value: 'restructuredtext', label: 'restructuredtext' },
+  { value: 'ruby', label: 'ruby' },
+  { value: 'rust', label: 'rust' },
+  { value: 'sb', label: 'sb' },
+  { value: 'scala', label: 'scala' },
+  { value: 'scheme', label: 'scheme' },
+  { value: 'scss', label: 'scss' },
+  { value: 'shell', label: 'shell' },
+  { value: 'sol', label: 'sol' },
+  { value: 'aes', label: 'aes' },
+  { value: 'sparql', label: 'sparql' },
+  { value: 'sql', label: 'sql' },
+  { value: 'st', label: 'st' },
+  { value: 'swift', label: 'swift' },
+  { value: 'systemverilog', label: 'systemverilog' },
+  { value: 'verilog', label: 'verilog' },
+  { value: 'tcl', label: 'tcl' },
+  { value: 'twig', label: 'twig' },
+  { value: 'typescript', label: 'typescript' },
+  { value: 'typespec', label: 'typespec' },
+  { value: 'vb', label: 'vb' },
+  { value: 'wgsl', label: 'wgsl' },
+  { value: 'xml', label: 'xml' },
+  { value: 'yaml', label: 'yaml' },
+  { value: 'json', label: 'json' }
+];
+
+const LanguageSelector: React.FC<LanguageSelectorProps> = ({
+  value,
+  onChange,
+  className = 'language-selector'
+}) => {
+  return (
+    <div className={className}>
+      <select 
+        value={value} 
+        onChange={(e) => onChange(e.target.value)}
+        className="language-select"
+      >
+        {languageOptions.map((option) => (
+          <option 
+            key={option.value} 
+            value={option.value}
+            disabled={option.disabled}
+            hidden={option.hidden}
+          >
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+export default LanguageSelector;
diff --git a/src/frontend/src/pad/editors/index.ts b/src/frontend/src/pad/editors/index.ts
index 6dbe62b..05d9982 100644
--- a/src/frontend/src/pad/editors/index.ts
+++ b/src/frontend/src/pad/editors/index.ts
@@ -1 +1,3 @@
 export { HtmlEditor } from './HtmlEditor';
+export { default as Editor } from './Editor';
+export { default as LanguageSelector } from './LanguageSelector';
diff --git a/src/frontend/src/styles/Editor.scss b/src/frontend/src/styles/Editor.scss
new file mode 100644
index 0000000..7f1bbd5
--- /dev/null
+++ b/src/frontend/src/styles/Editor.scss
@@ -0,0 +1,42 @@
+.editor-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.editor-toolbar {
+  display: flex;
+  justify-content: right;
+  padding: 8px;
+  background-color: #1e1e1e;
+  border-bottom: 1px solid #333;
+}
+
+.language-selector {
+  margin-right: 10px;
+  
+  .language-select {
+    background-color: #252526;
+    color: #cccccc;
+    border: 1px solid #3c3c3c;
+    border-radius: 7px;
+    padding: 4px 8px;
+    font-size: 12px;
+    max-width: 150px;
+    
+    &:focus {
+      outline: none;
+      border-color: #007fd4;
+    }
+    
+    option {
+      background-color: #252526;
+      color: #cccccc;
+    }
+  }
+}
+
+.monaco-editor-container {
+  flex: 1;
+}
diff --git a/src/frontend/src/styles/index.scss b/src/frontend/src/styles/index.scss
index 9de1ae7..3d51eef 100644
--- a/src/frontend/src/styles/index.scss
+++ b/src/frontend/src/styles/index.scss
@@ -1,5 +1,6 @@
 @import './fonts.scss';
 @import './HtmlEditor.scss';
+@import './Editor.scss';
 @import './AuthModal.scss';
 @import './FeedbackButton.scss';
 @import './DiscordButton.scss';
diff --git a/src/frontend/src/ui/MainMenu.tsx b/src/frontend/src/ui/MainMenu.tsx
index af312cb..397c5de 100644
--- a/src/frontend/src/ui/MainMenu.tsx
+++ b/src/frontend/src/ui/MainMenu.tsx
@@ -3,11 +3,12 @@ import React from 'react';
 import type { ExcalidrawImperativeAPI } from '@atyrode/excalidraw/types';
 import type { MainMenu as MainMenuType } from '@atyrode/excalidraw';
 
-import { LogOut, SquarePlus, LayoutDashboard, SquareCode, Eye, Coffee, Grid2x2, User } from 'lucide-react';
+import { LogOut, SquarePlus, LayoutDashboard, SquareCode, Eye, Coffee, Grid2x2, User, Text } from 'lucide-react';
 import { capture } from '../utils/posthog';
 import { ExcalidrawElementFactory, PlacementMode } from '../lib/ExcalidrawElementFactory';
 import { useUserProfile } from "../api/hooks";
 import { queryClient } from "../api/queryClient";
+import Editor from '../pad/editors/Editor';
 
 interface MainMenuConfigProps {
   MainMenu: typeof MainMenuType;
@@ -32,8 +33,8 @@ export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
     if (!excalidrawAPI) return;
     
     const htmlEditorElement = ExcalidrawElementFactory.createEmbeddableElement({
-      link: "!editor",
-      width: 1200,
+      link: "!html",
+      width: 800,
       height: 500
     });
     
@@ -75,6 +76,22 @@ export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
       scrollToView: true
     });
   };
+  
+  const handleEditorClick = () => {
+    if (!excalidrawAPI) return;
+    
+    const editorElement = ExcalidrawElementFactory.createEmbeddableElement({
+      link: "!editor",
+      width: 800,
+      height: 500
+    });
+    
+    ExcalidrawElementFactory.placeInScene(editorElement, excalidrawAPI, {
+      mode: PlacementMode.NEAR_VIEWPORT_CENTER,
+      bufferPercentage: 10,
+      scrollToView: true
+    });
+  };
 
   const handleGridToggle = () => {
     if (!excalidrawAPI) return;
@@ -154,6 +171,12 @@ export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
         >
           Insert HTML Editor
         </MainMenu.Item>
+        <MainMenu.Item
+          icon={<Text />}
+          onClick={handleEditorClick}
+        >
+          Insert Code Editor
+        </MainMenu.Item>
         <MainMenu.Item
           icon={<LayoutDashboard />}
           onClick={handleDashboardButtonClick}