refactor: switch Editor to BEM

Author: atyrode

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

@@ -1,22 +1,24 @@
-.editor-wrapper {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-}
+.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;
-}
+  &__toolbar {
+    display: flex;
+    justify-content: right;
+    padding: 8px;
+    background-color: #1e1e1e;
+    border-bottom: 1px solid #333;
+  }
 
-.language-selector {
-  margin-right: 10px;
+  &__language-selector {
+    margin-right: 10px;
+  }
 
-  .language-select {
+  &__language-select {
     background-color: #252526;
     color: #cccccc;
     border: 1px solid #3c3c3c;
@@ -35,8 +37,8 @@
       color: #cccccc;
     }
   }
-}
 
-.monaco-editor-container {
-  flex: 1;
+  &__container {
+    flex: 1;
+  }
 }

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

@@ -33,7 +33,7 @@ const Editor: React.FC<EditorProps> = ({
   onChange,
   onMount,
   onLanguageChange,
-  className = 'monaco-editor-container',
+  className = 'editor__container',
   showLanguageSelector = true,
   element,
   excalidrawAPI,
@@ -260,7 +260,7 @@ const Editor: React.FC<EditorProps> = ({
   };
 
   return (
-    <div className="editor-wrapper">
+    <div className="editor__wrapper">
       <MonacoEditor
         height={height}
         language={currentLanguage}
@@ -272,10 +272,11 @@ const Editor: React.FC<EditorProps> = ({
         className={className}
       />
       {showLanguageSelector && (
-        <div className="editor-toolbar">
+        <div className="editor__toolbar">
           <LanguageSelector 
             value={currentLanguage} 
-            onChange={handleLanguageChange} 
+            onChange={handleLanguageChange}
+            className="editor__language-selector"
           />
         </div>
       )}

src/frontend/src/pad/editors/LanguageSelector.tsx

@@ -105,14 +105,14 @@ const languageOptions = [
 const LanguageSelector: React.FC<LanguageSelectorProps> = ({
   value,
   onChange,
-  className = 'language-selector'
+  className = 'editor__language-selector'
 }) => {
   return (
     <div className={className}>
       <select 
         value={value} 
         onChange={(e) => onChange(e.target.value)}
-        className="language-select"
+        className="editor__language-select"
       >
         {languageOptions.map((option) => (
           <option