feat: implement split view for HTML editor with preview functionality

- Added a split view mode to the HTML editor, allowing simultaneous editing and previewing of HTML content.
- Introduced HtmlEditorSplitView component to manage the rendering of the editor and preview side by side.
- Enhanced useHtmlEditor hook to support active state management and preview toggling.
- Updated Editor and HtmlEditor components to integrate new split view features and improve user experience.
- Refactored styles in Editor.scss and HtmlEditor.scss to accommodate the new layout and ensure responsive design.

Author: atyrode

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

@@ -6,11 +6,25 @@
     overflow: hidden; /* Prevent overflow issues */
     border-bottom-left-radius: 20px;
     border-bottom-right-radius: 20px;
+    
+    &--split {
+      .monaco-editor {
+        width: 50% !important; /* Force Monaco editor to resize */
+      }
+      
+      .editor__container {
+        width: 50% !important; /* Force container to resize */
+      }
+      
+      .editor__toolbar {
+        right: 50%; /* Limit toolbar width to match the editor in split view */
+      }
+    }
   }
 
   &__toolbar {
     display: flex;
-    justify-content: space-between; /* Space between HTML controls and right-side controls */
+    justify-content: flex-end; /* Default justify to the right when no HTML controls */
     padding: 8px;
     position: absolute; /* Position at bottom */
     bottom: 0;

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

@@ -2,7 +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 { useHtmlEditor, HtmlEditorControls, defaultHtml, HtmlEditorSplitView } from './HtmlEditor';
 import './Editor.scss';
 
 // Custom tooltip wrapper that positions the tooltip at the top
@@ -295,16 +295,22 @@ const Editor: React.FC<EditorProps> = ({
     }
   };
 
-  // Initialize HTML editor functionality if the language is HTML
+  // Check 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;
+  // Always initialize HTML editor hooks, but pass isActive flag
+  const htmlEditor = useHtmlEditor(
+    element, 
+    editorRef, 
+    excalidrawAPI, 
+    isHtml
+  );
+    
+  // Determine if we should show the split view
+  const showSplitView = isHtml && !htmlEditor.createNew && htmlEditor.showPreview;
 
   return (
-    <div className="editor__wrapper">
+    <div className={`editor__wrapper ${showSplitView ? 'editor__wrapper--split' : ''}`}>
       <MonacoEditor
         height={height}
         language={currentLanguage}
@@ -315,15 +321,26 @@ const Editor: React.FC<EditorProps> = ({
         onChange={handleEditorChange}
         className={className}
       />
+      
+      {/* Render the HTML preview in split view mode */}
+      {showSplitView && (
+        <HtmlEditorSplitView
+          editorContent={contentRef.current || ''}
+          previewContent={htmlEditor.previewContent}
+          showPreview={htmlEditor.showPreview}
+        />
+      )}
       {showLanguageSelector && (
         <div className="editor__toolbar">
           {/* Show HTML-specific controls when language is HTML */}
-          {isHtml && htmlEditor && (
+          {isHtml && (
             <div className="editor__html-controls">
               <HtmlEditorControls
                 createNew={htmlEditor.createNew}
                 setCreateNew={htmlEditor.setCreateNew}
                 applyHtml={htmlEditor.applyHtml}
+                showPreview={htmlEditor.showPreview}
+                togglePreview={htmlEditor.togglePreview}
               />
             </div>
           )}

src/frontend/src/pad/editors/HtmlEditor.scss

@@ -1,47 +1,4 @@
 .html-editor {
-  &__container {
-    display: flex;
-    position: relative;
-    width: 100%;
-    height: 100%;
-    flex-direction: column;
-    box-sizing: border-box;
-    padding: 32px;
-    font-family: sans-serif;
-    background: #2d2d2d;
-    color: #e0e0e0;
-    border-radius: 4px;
-    border: 1px solid #484848;
-  }
-
-  &__content {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-  }
-
-  &__monaco-container {
-    width: 100%;
-    position: relative;
-    flex: 1;
-    min-height: 0;
-    border: 1px solid #484848;
-    border-radius: 4px;
-    margin-bottom: 10px;
-  }
-
-  &__controls {
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 8px 0;
-    width: 100%;
-    flex-shrink: 0;
-  }
-
   &__label {
     font-size: 12px;
     color: #e0e0e0;
@@ -58,9 +15,38 @@
     border-radius: 4px;
     cursor: pointer;
     font-size: 12px;
+    margin-right: 8px;
 
     &:hover {
       background: #4285e7;
     }
+    
+    &--active {
+      background: #3a75c4;
+    }
+  }
+  
+  &__split-view {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 50%;
+    height: 100%;
+    box-sizing: border-box;
+    z-index: 5;
+    background: #ffffff00;
+    border-left: 2px solid #484848;
+    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
+  }
+}
+
+// Split view styles for the editor container
+.editor__wrapper.editor__wrapper--split {
+  .monaco-editor {
+    width: 50% !important; /* Force Monaco editor to resize */
+  }
+  
+  .editor__container {
+    width: 50% !important; /* Force container to resize */
   }
 }