change font-size to be a range input with quick example

client/components/codeEditor/codeEditor.jsx

@@ -87,7 +87,7 @@ const createSettingsExtensions = (settings)=>[
 	...(settings.fontSize
 		? [EditorView.theme({
 			'&, .cm-content' : {
-				fontSize : `${settings.fontSize}px`,
+				fontSize : `${settings.fontSize || 1}em`,
 			},
 		})]
 		: []),

client/homebrew/editor/editor.jsx

@@ -91,7 +91,7 @@ const Editor = forwardRef(
 			showImagePreviews : true,
 			activeLineShading : true,
 			lineNumbers       : true,
-			fontSize          : 13,
+			fontSize          : 1,
 			editorTheme       : 'default',
 		});
 

client/homebrew/editor/settingsEditor/settingsEditor.jsx

@@ -4,17 +4,7 @@ import React from 'react';
 const SettingsEditor = ({ settings, updateSettings = ()=>{}, EditorThemeNameList })=>{
 
 	const validations = {
-		fontSize : [
-			(value)=>{
-				const number = Number(value);
 
-				if(number < 9 || number > 30) {
-					return 'Font size must be between 9 and 30.';
-				}
-
-				return null;
-			},
-		],
 	};
 
 	const handleFieldChange = (setting, e)=>{
@@ -129,12 +119,13 @@ const SettingsEditor = ({ settings, updateSettings = ()=>{}, EditorThemeNameList
 				</label>
 
 				<div className='value'>
-					<small>from 9px to 30px</small>
+					<small style={{ fontSize: `${settings.fontSize || 1}em` }}>from 9px to 30px</small>
 					<input
 						id='fontSize'
-						type='number'
+						type='range'
-						min={9}
+						min={.6}
-						max={30}
+						step={.1}
+						max={2}
 						name='fontSize'
 						value={settings.fontSize}
 						onChange={(e)=>handleFieldChange('fontSize', e)}