feat: enhance HTML editor integration and toolbar functionality

- Replaced HtmlEditor component with a more versatile Editor component for HTML content rendering.
- Introduced useHtmlEditor hook to manage HTML editor state and functionality.
- Updated Editor.scss to improve toolbar layout and added new HTML-specific controls.
- Enhanced Editor component to conditionally display HTML controls based on the selected language.
- Refactored HtmlEditor to provide reusable controls for HTML editing, improving code organization and maintainability.

Author: atyrode

src/frontend/src/CustomEmbeddableRenderer.tsx

@@ -7,7 +7,6 @@ import {
   Dashboard,
   StateIndicator,
   ControlButton,
-  HtmlEditor,
   Editor,
   Terminal,
 } from './pad';
@@ -28,7 +27,11 @@ export const renderCustomEmbeddable = (
 
     switch (path) {
       case 'html':
-        content = <HtmlEditor element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
+        content = <Editor 
+          element={element} 
+          language="html" 
+          excalidrawAPI={excalidrawAPI} 
+        />;
         title = "HTML Editor";
         break;
       case 'editor':

src/frontend/src/pad/editors/Editor.scss

@@ -10,7 +10,7 @@
 
   &__toolbar {
     display: flex;
-    justify-content: right;
+    justify-content: space-between; /* Space between HTML controls and right-side controls */
     padding: 8px;
     position: absolute; /* Position at bottom */
     bottom: 0;
@@ -19,7 +19,47 @@
     z-index: 10; /* Keep toolbar above other elements */
     // background-color: #191919; /* Match editor background */
     border-top: 2px solid #3c3c3c;
+  }
+  
+  &__toolbar-right {
+    display: flex;
+    align-items: center;
     gap: 8px; /* Add spacing between toolbar items */
+
+    .excalidraw-tooltip-wrapper {
+      height: 100%;
+      display: flex;
+      align-items: center;
+    }
+  }
+  
+  &__html-controls {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-right: auto; /* Push to the left side */
+    
+    .html-editor__label {
+      font-size: 12px;
+      color: #e0e0e0;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+    
+    .html-editor__button {
+      padding: 6px 12px;
+      background: #5294f6;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 12px;
+      
+      &:hover {
+        background: #4285e7;
+      }
+    }
   }
 
   &__format-button {
@@ -32,7 +72,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    
+    height: 100%;
     &:hover {
       background-color: #2a2d2e;
       color: #ffffff;

src/frontend/src/pad/editors/Editor.tsx

@@ -2,6 +2,7 @@ import React, { useRef, useState, useEffect, useCallback } from 'react';
 import MonacoEditor from '@monaco-editor/react';
 import { Tooltip, updateTooltipPosition, getTooltipDiv } from '@atyrode/excalidraw';
 import SearchableLanguageSelector from './SearchableLanguageSelector';
+import { useHtmlEditor, HtmlEditorControls, defaultHtml } from './HtmlEditor';
 import './Editor.scss';
 
 // Custom tooltip wrapper that positions the tooltip at the top
@@ -294,12 +295,20 @@ const Editor: React.FC<EditorProps> = ({
     }
   };
 
+  // Initialize HTML editor functionality if the language is HTML
+  const isHtml = currentLanguage === 'html';
+  
+  // Only initialize HTML editor hooks if we're in HTML mode and have the necessary props
+  const htmlEditor = isHtml && element && excalidrawAPI 
+    ? useHtmlEditor(element, editorRef, excalidrawAPI)
+    : null;
+
   return (
     <div className="editor__wrapper">
       <MonacoEditor
         height={height}
         language={currentLanguage}
-        defaultValue={defaultValue}
+        defaultValue={defaultValue || (isHtml ? defaultHtml : '')}
         theme={theme}
         options={options}
         onMount={handleEditorDidMount}
@@ -308,22 +317,37 @@ const Editor: React.FC<EditorProps> = ({
       />
       {showLanguageSelector && (
         <div className="editor__toolbar">
-          <TopTooltip label="Format" children={
-            <button 
-              className="editor__format-button" 
-              onClick={formatDocument}
-              aria-label="Format Document"
-            >
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M2 4H14M4 8H12M6 12H10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-              </svg>
-            </button>
-          } />
-          <SearchableLanguageSelector 
-            value={currentLanguage} 
-            onChange={handleLanguageChange}
-            className="editor__language-selector"
-          />
+          {/* Show HTML-specific controls when language is HTML */}
+          {isHtml && htmlEditor && (
+            <div className="editor__html-controls">
+              <HtmlEditorControls
+                createNew={htmlEditor.createNew}
+                setCreateNew={htmlEditor.setCreateNew}
+                applyHtml={htmlEditor.applyHtml}
+              />
+            </div>
+          )}
+          
+          {/* Group format button and language selector together on the right */}
+          <div className="editor__toolbar-right">
+            <TopTooltip label="Format" children={
+              <button 
+                className="editor__format-button" 
+                onClick={formatDocument}
+                aria-label="Format Document"
+              >
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M2 4H14M4 8H12M6 12H10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                </svg>
+              </button>
+            } />
+            
+            <SearchableLanguageSelector 
+              value={currentLanguage} 
+              onChange={handleLanguageChange}
+              className="editor__language-selector"
+            />
+          </div>
         </div>
       )}
     </div>

src/frontend/src/pad/editors/HtmlEditor.tsx

@@ -1,50 +1,18 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState } from 'react';
 import type { NonDeleted, ExcalidrawEmbeddableElement } from '@atyrode/excalidraw/element/types';
-import type { AppState } from '@atyrode/excalidraw/types';
-import Editor from './Editor';
 import { ExcalidrawElementFactory } from '../../lib/ExcalidrawElementFactory';
 import './HtmlEditor.scss';
 
-interface HtmlEditorProps {
-  element: NonDeleted<ExcalidrawEmbeddableElement>;
-  appState: AppState;
-  excalidrawAPI?: any;
-}
+// Default HTML content for new HTML elements
+export const defaultHtml = '<button style="padding: 8px; background: #5294f6; color: white; border: none; border-radius: 4px;">Example Button</button>';
 
-export const HtmlEditor: React.FC<HtmlEditorProps> = ({ 
-  element, 
-  appState,
-  excalidrawAPI
-}) => {
+// Hook to manage HTML editor state and functionality
+export const useHtmlEditor = (
+  element: NonDeleted<ExcalidrawEmbeddableElement>,
+  editorRef: React.RefObject<any>,
+  excalidrawAPI?: any
+) => {
   const [createNew, setCreateNew] = useState(true);
-  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 handleEditorMount = (editor: any) => {
-    editorRef.current = editor;
-  };
 
   const applyHtml = () => {
     if (!excalidrawAPI || !editorRef.current) return;
@@ -65,7 +33,7 @@ export const HtmlEditor: React.FC<HtmlEditorProps> = ({
       id: createNew ? undefined : element.id,
       customData: {
         editorContent: currentContent,
-        editorLanguage: 'html' // Always set to html for HtmlEditor
+        editorLanguage: 'html' // Always set to html for HTML content
       }
     });
 
@@ -93,34 +61,32 @@ export const HtmlEditor: React.FC<HtmlEditorProps> = ({
     excalidrawAPI.setActiveTool({ type: "selection" });
   };
 
+  return {
+    createNew,
+    setCreateNew,
+    applyHtml
+  };
+};
+
+// HTML-specific toolbar controls component
+export const HtmlEditorControls: React.FC<{
+  createNew: boolean;
+  setCreateNew: (value: boolean) => void;
+  applyHtml: () => void;
+}> = ({ createNew, setCreateNew, applyHtml }) => {
   return (
-    <div className="html-editor__container">
-      <div className="html-editor__content">
-        <Editor
-          height="100%"
-          language="html"
-          defaultValue={editorValue}
-          onChange={(value) => value && setEditorValue(value)}
-          onMount={handleEditorMount}
-          element={element}
-          excalidrawAPI={excalidrawAPI}
-          showLanguageSelector={false}
-          className="html-editor__monaco-container"
-        />
-        <div className="html-editor__controls">
-          <label className="html-editor__label">
-            <input 
-              type="checkbox" 
-              checked={createNew} 
-              onChange={(e) => setCreateNew(e.target.checked)} 
-            /> 
-            Create new element
-          </label>
-          <button className="html-editor__button" onClick={applyHtml}>
-            Apply HTML
-          </button>
-        </div>
-      </div>
-    </div>
+    <>
+      <label className="html-editor__label">
+        <input 
+          type="checkbox" 
+          checked={createNew} 
+          onChange={(e) => setCreateNew(e.target.checked)} 
+        /> 
+        Create new element
+      </label>
+      <button className="html-editor__button" onClick={applyHtml}>
+        Apply HTML
+      </button>
+    </>
   );
 };

src/frontend/src/pad/editors/index.ts

@@ -1,3 +1,3 @@
-export { HtmlEditor } from './HtmlEditor';
+export { useHtmlEditor, HtmlEditorControls, defaultHtml } from './HtmlEditor';
 export { default as Editor } from './Editor';
 export { default as LanguageSelector } from './LanguageSelector';