From 6ec10d6f6f2d410cdecdf94a11fbf70c40cc5400 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Wed, 23 Sep 2026 23:59:23 +0200
Subject: [PATCH] change font-size to be a range input with quick example

---
 client/components/codeEditor/codeEditor.jsx   |  2 +-
 client/homebrew/editor/editor.jsx             |  2 +-
 .../editor/settingsEditor/settingsEditor.jsx  | 19 +++++--------------
 3 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/client/components/codeEditor/codeEditor.jsx b/client/components/codeEditor/codeEditor.jsx
index c9be18bc7..ebd9b9210 100644
--- a/client/components/codeEditor/codeEditor.jsx
+++ b/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`,
 			},
 		})]
 		: []),
diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx
index c490e92b6..777f7bcf1 100644
--- a/client/homebrew/editor/editor.jsx
+++ b/client/homebrew/editor/editor.jsx
@@ -91,7 +91,7 @@ const Editor = forwardRef(
 			showImagePreviews : true,
 			activeLineShading : true,
 			lineNumbers       : true,
-			fontSize          : 13,
+			fontSize          : 1,
 			editorTheme       : 'default',
 		});
 
diff --git a/client/homebrew/editor/settingsEditor/settingsEditor.jsx b/client/homebrew/editor/settingsEditor/settingsEditor.jsx
index 5dd3ffa0a..9ebc685e8 100644
--- a/client/homebrew/editor/settingsEditor/settingsEditor.jsx
+++ b/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'
-						min={9}
-						max={30}
+						type='range'
+						min={.6}
+						step={.1}
+						max={2}
 						name='fontSize'
 						value={settings.fontSize}
 						onChange={(e)=>handleFieldChange('fontSize', e)}