feat: enhance editor functionality with searchable language selector and formatting options

- Introduced a new SearchableLanguageSelector component for improved language selection with search capabilities.
- Updated Editor component to include a format button with tooltip for document formatting.
- Enhanced styling for editor toolbar and language selector for better user experience.
- Added responsive design elements to prevent overflow and improve layout consistency.

Author: atyrode

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

@@ -1,18 +1,51 @@
 .editor {
   &__wrapper {
-    display: flex;
-    flex-direction: column;
+    position: relative; /* For absolute positioning of toolbar */
     height: 100%;
     width: 100%;
+    overflow: hidden; /* Prevent overflow issues */
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
   }
 
   &__toolbar {
     display: flex;
     justify-content: right;
     padding: 8px;
+    position: absolute; /* Position at bottom */
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 10; /* Keep toolbar above other elements */
+    background-color: #191919; /* Match editor background */
+    border-top: 1px solid #3c3c3c;
+    gap: 8px; /* Add spacing between toolbar items */
+  }
+
+  &__format-button {
+    background-color: #252526;
+    color: #cccccc;
+    border: 1px solid #3c3c3c;
+    border-radius: 7px;
+    padding: 4px 8px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    &:hover {
+      background-color: #2a2d2e;
+      color: #ffffff;
+    }
+    
+    &:focus {
+      outline: none;
+      border-color: #007fd4;
+    }
   }
 
   &__language-selector {
+    display: flex;
     margin-right: 10px;
   }
 
@@ -35,8 +68,106 @@
       color: #cccccc;
     }
   }
+  
+  &__searchable-language-container {
+    display: flex;
+    align-items: center;
+    background-color: #252526;
+    border: 1px solid #3c3c3c;
+    border-radius: 7px;
+    max-width: 150px;
+    position: relative;
+    
+    &:focus-within {
+      border-color: #007fd4;
+    }
+  }
+  
+  &__searchable-language-input {
+    background-color: transparent;
+    color: #cccccc;
+    border: none;
+    padding: 4px 8px;
+    font-size: 12px;
+    width: 100%;
+    
+    &:focus {
+      outline: none;
+    }
+    
+    &::placeholder {
+      color: #cccccc;
+      opacity: 0.8;
+    }
+  }
+  
+  &__searchable-language-toggle {
+    background: none;
+    border: none;
+    color: #cccccc;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 6px;
+    transition: transform 0.2s ease;
+    
+    &:hover {
+      color: #ffffff;
+    }
+    
+    &:focus {
+      outline: none;
+    }
+  }
+  
+  &__searchable-language-dropdown {
+    position: absolute;
+    bottom: 100%; /* Position above instead of below */
+    left: 0;
+    right: 0;
+    max-height: 200px;
+    overflow-y: auto;
+    background-color: #252526;
+    border: 1px solid #3c3c3c;
+    border-radius: 7px;
+    margin-bottom: 4px; /* Margin at bottom instead of top */
+    z-index: 20; /* Higher z-index to ensure it's above the toolbar */
+    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.3); /* Shadow adjusted for upward direction */
+  }
+  
+  &__searchable-language-option {
+    padding: 4px 8px;
+    font-size: 12px;
+    color: #cccccc;
+    cursor: pointer;
+    
+    &:hover {
+      background-color: #2a2d2e;
+    }
+    
+    &--highlighted {
+      background-color: #04395e;
+    }
+    
+    &--selected {
+      color: #ffffff;
+      font-weight: 500;
+    }
+  }
+  
+  &__searchable-language-no-results {
+    padding: 4px 8px;
+    font-size: 12px;
+    color: #cccccc;
+    font-style: italic;
+    text-align: center;
+  }
 
   &__container {
-    flex: 1;
+    height: 100%;
+    width: 100%;
+    padding-bottom: 40px; /* Make room for the toolbar */
+    box-sizing: border-box;
   }
 }

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

@@ -1,8 +1,35 @@
 import React, { useRef, useState, useEffect, useCallback } from 'react';
 import MonacoEditor from '@monaco-editor/react';
-import LanguageSelector from './LanguageSelector';
+import { Tooltip, updateTooltipPosition, getTooltipDiv } from '@atyrode/excalidraw';
+import SearchableLanguageSelector from './SearchableLanguageSelector';
 import './Editor.scss';
 
+// Custom tooltip wrapper that positions the tooltip at the top
+const TopTooltip: React.FC<{label: string, children: React.ReactNode}> = ({ label, children }) => {
+  const handlePointerEnter = (event: React.PointerEvent<HTMLDivElement>) => {
+    const tooltip = getTooltipDiv();
+    tooltip.classList.add("excalidraw-tooltip--visible");
+    tooltip.textContent = label;
+    
+    const itemRect = event.currentTarget.getBoundingClientRect();
+    updateTooltipPosition(tooltip, itemRect, "top");
+  };
+  
+  const handlePointerLeave = () => {
+    getTooltipDiv().classList.remove("excalidraw-tooltip--visible");
+  };
+  
+  return (
+    <div 
+      className="excalidraw-tooltip-wrapper"
+      onPointerEnter={handlePointerEnter}
+      onPointerLeave={handlePointerLeave}
+    >
+      {children}
+    </div>
+  );
+};
+
 interface EditorProps {
   defaultValue?: string;
   language?: string;
@@ -21,7 +48,7 @@ interface EditorProps {
 
 const Editor: React.FC<EditorProps> = ({
   defaultValue = '',
-  language = 'javascript',
+  language = 'plaintext',
   theme = 'vs-dark',
   height = '100%',
   options = {
@@ -259,6 +286,14 @@ const Editor: React.FC<EditorProps> = ({
     }
   };
 
+  // Format document function
+  const formatDocument = () => {
+    if (editorRef.current) {
+      // Trigger Monaco's format document action
+      editorRef.current.getAction('editor.action.formatDocument')?.run();
+    }
+  };
+
   return (
     <div className="editor__wrapper">
       <MonacoEditor
@@ -273,7 +308,18 @@ const Editor: React.FC<EditorProps> = ({
       />
       {showLanguageSelector && (
         <div className="editor__toolbar">
-          <LanguageSelector 
+          <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"