lint

client/components/codeEditor/extensions/customHighlight.js

@@ -350,7 +350,7 @@ class ImageWidget extends WidgetType {
 
 	toDOM() {
 		const img = document.createElement('img');
-		img.loading = "lazy";
+		img.loading = 'lazy';
 		img.className = 'cm-preview';
 		img.src = this.url;
 

client/homebrew/editor/editor.jsx

@@ -14,7 +14,6 @@ const EDITOR_SETTINGS_KEY = 'HB_edit_settings';
 import defaultCM5Theme from '@themes/codeMirror/default.js';
 import darkbrewery from '@themes/codeMirror/darkbrewery.js';
 import cm5Themes from 'codemirror-5-themes';
-import { autoCloseTags } from '@codemirror/lang-javascript';
 
 const themes = { default: defaultCM5Theme, ...cm5Themes, darkbrewery };
 
@@ -94,7 +93,7 @@ const Editor = forwardRef(
 			lineNumbers       : true,
 			fontSize          : 13,
 			editorTheme       : 'default',
-		})
+		});
 
 		const editor = useRef(null);
 		const codeEditor = useRef(null);
@@ -115,7 +114,7 @@ const Editor = forwardRef(
 
 			const localEditorTheme = window.localStorage.getItem(EDITOR_THEME_KEY);
 			if(localEditorTheme && EditorThemes.includes(localEditorTheme)) {
-				setEditorSettings({...editorSettings , editorTheme: localEditorTheme})
+				setEditorSettings({ ...editorSettings, editorTheme: localEditorTheme });
 			} else setEditorSettings({ ...editorSettings, editorTheme: 'default' });
 			const localEditorSettings = window.localStorage.getItem(EDITOR_SETTINGS_KEY);
 			if(localEditorSettings) setEditorSettings(JSON.parse(localEditorSettings));
@@ -235,13 +234,13 @@ const Editor = forwardRef(
 
 		const updateEditorTheme = (newTheme)=>{
 			window.localStorage.setItem(EDITOR_THEME_KEY, newTheme);
-			setEditorSettings({...editorSettings , editorTheme: newTheme})
+			setEditorSettings({ ...editorSettings, editorTheme: newTheme });
 		};
 
 		const updateEditorSettings = (newEditorSettings)=>{
 			window.localStorage.setItem(EDITOR_SETTINGS_KEY, JSON.stringify(newEditorSettings));
 			setEditorSettings(newEditorSettings);
-		}
+		};
 
 		const renderEditor = ()=>{
 			if(isText()) {

client/homebrew/editor/settingsEditor/settingsEditor.jsx

@@ -1,5 +1,5 @@
 import '../uiEditor.less';
-import React, { useState, useEffect} from 'react';
+import React from 'react';
 
 const SettingsEditor = ({ settings, updateSettings = ()=>{}, EditorThemeNameList })=>{
 
@@ -56,7 +56,7 @@ const SettingsEditor = ({ settings, updateSettings = ()=>{}, EditorThemeNameList
 					Select your Editor Theme
 				</label>
 				<div className='value'>
-					<select id="changeEditorTheme" value={settings.editorTheme} onChange={(e)=>handleFieldChange('editorTheme', e)} >
+					<select id='changeEditorTheme' value={settings.editorTheme} onChange={(e)=>handleFieldChange('editorTheme', e)} >
 						{EditorThemeNameList.map((theme, key)=>{
 							return <option key={key} value={theme}>{theme}</option>;
 						})}

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -294,7 +294,7 @@ const SnippetGroup = createReactClass({
 					<Dropdown groupName={snippet.name} icon={snippet.icon} key={snippet.name}>
 						{this.renderSnippets(snippet.subsnippets)}
 					</Dropdown>
-				)
+				);
 			}
 
 		});

client/homebrew/editor/snippetbar/snippetbar.less

@@ -11,18 +11,18 @@
 	flex-wrap            : wrap-reverse;
 	justify-content      : space-between;
 	height               : auto;
-	color            : black;
-	background-color : #DDDDDD;
-	font-size        : .65rem;
 	font-family          : 'Open Sans', sans-serif;
-	text-transform: uppercase;
+	font-size            : 0.65rem;
 	font-weight          : 800;
+	color                : black;
+	text-transform       : uppercase;
+	background-color     : #DDDDDD;
 
 	.editors {
 		display         : flex;
 		justify-content : flex-end;
 		min-width       : 275px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
-		font-size: .85rem;
+		font-size       : 0.85rem;
 		&:only-child {min-width   : unset; margin-left : auto;}
 
 		>div {
@@ -135,13 +135,13 @@
 	.menu-item {
 		position        : relative;
 		display         : flex;
-		justify-content: space-between;
 		align-items     : center;
+		justify-content : space-between;
+		width           : 100%; 
 		min-width       : max-content;
 		padding         : 5px;
 		cursor          : pointer;
-		width: 100%;
+		&:is(.menu-list .menu-item) [class*='name'] {
-		&:is(.menu-list .menu-item) [class*="name"] {
 			padding-inline : 8px;   // additional space between icon and name (helpful in Fonts menu especially).
 		}
 		.menu-name {
@@ -151,15 +151,11 @@
 		}
 		i {
 			min-width    : 25px;
-			height       : .85rem;
+			height       : 0.85rem;
 			font-size    : 1.2em;
 			text-align   : center;
-			&.caret {
+			&.caret { margin-right : 0; }
-				margin-right: 0;
+			&.caret:is(.menu-wrapper .menu-wrapper *) { text-align : right; }
-			}
-			&.caret:is(.menu-wrapper .menu-wrapper * ) {
-				text-align: right;
-			}
 			/* Fonts */
 			&.font {
 				height : auto;
@@ -198,9 +194,7 @@
 			background    : grey;
 			border-radius : 12px;
 		}
-		&:hover {
+		&:hover { background-color : #999999; }
-			background-color : #999999;
-		}
 		&:disabled {
 			color  : gray;
 			cursor : not-allowed;

client/homebrew/editor/uiEditor.less

@@ -65,15 +65,13 @@
 			&:invalid { background : #FFB9B9; }
 			small {
 				display       : block;
+				width         : fit-content;
+				margin-inline : 5px;
 				font-size     : 0.9em;
 				font-style    : italic;
 				line-height   : 1.4em;
 			}
 
-			small {
-				width:fit-content;
-				margin-inline:5px;
-			}
 			input[type='checkbox'], input[type='number'] {
 				float      : right;
 				text-align : end;
@@ -190,36 +188,30 @@
 
 			&.owner {
 				position         : relative;
-				background-color:@silverLight;
-				min-width:25px;
 				display          : grid;
 				place-items      : center;
+				min-width        : 25px;
 				font-weight      : 900;
+				background-color : @silverLight;
 
 				&::after {
-					content: "\f521";
-					font-family: "Font Awesome 6 Free";
-					color:gold;
 					position    : absolute;
 					top         : 0;
 					left        : 0;
 					width       : 15px;
 					height      : 15px;
+					font-family : 'Font Awesome 6 Free';
+					color       : gold;
+					content     : '\f521';
+					transform   : scaleY(0.7);
 					rotate      : -25deg;
 					translate   : -30% -50%;
-					transform: scaleY(0.7);
 				}
 			}
-			&:has(button) a {
+			&:has(button) a { padding-right : 5px; }
-				padding-right:5px;
+			&:has(button:hover) { background : #D97D7D; }
-			}
-			&:has(button:hover) {
-				background:#d97d7d;
-			}
 
-			button {
+			button { color : @red; }
-				color:@red;
-			}
 
 		
 		}
@@ -337,9 +329,7 @@
 
 			.icon { #groupedIcon; }
 
-			button {
+			button { cursor : pointer; }
-				cursor : pointer;
-			}
 		}
 
 		.input-group {
@@ -385,8 +375,8 @@
 
 
 .settingsEditor .field {
-	border-bottom:1px solid black;
 	padding-bottom : 10px;
+	border-bottom  : 1px solid black;
 
 	.value {