refactor: switch HtmlEditor to BEM

Author: atyrode

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

@@ -1,63 +1,56 @@
-.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;
-}
-
-.html-editor-content {
-  width: 100%;
-  height: 100%;
-
-  display: flex;
-  flex-direction: column;
-  position: relative;
-}
-
-.monaco-editor-container {
-  width: 100%;
-  position: relative;
+.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;
+  }
 
-  flex: 1;
-  min-height: 0;
-  
-  border: 1px solid #484848;
-  border-radius: 4px;
-  margin-bottom: 10px;
-}
+  &__content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
 
-.html-editor-controls {
-  position: relative;
+  &__monaco-container {
+    width: 100%;
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    border: 1px solid #484848;
+    border-radius: 4px;
+    margin-bottom: 10px;
+  }
 
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 0;
-  width: 100%;
-  flex-shrink: 0;
+  &__controls {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 0;
+    width: 100%;
+    flex-shrink: 0;
+  }
 
-  label {
+  &__label {
     font-size: 12px;
     color: #e0e0e0;
     display: flex;
     align-items: center;
     gap: 4px;
   }
 
-  button {
+  &__button {
     padding: 6px 12px;
     background: #5294f6;
     color: white;

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

@@ -94,8 +94,8 @@ export const HtmlEditor: React.FC<HtmlEditorProps> = ({
   };
 
   return (
-    <div className="html-editor-container">
-      <div className="html-editor-content">
+    <div className="html-editor__container">
+      <div className="html-editor__content">
         <Editor
           height="100%"
           language="html"
@@ -105,17 +105,18 @@ export const HtmlEditor: React.FC<HtmlEditorProps> = ({
           element={element}
           excalidrawAPI={excalidrawAPI}
           showLanguageSelector={false}
+          className="html-editor__monaco-container"
         />
-        <div className="html-editor-controls">
-          <label>
+        <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 onClick={applyHtml}>
+          <button className="html-editor__button" onClick={applyHtml}>
             Apply HTML
           </button>
         </div>