From 2fc135724f083e96fde08de63b66a5c60571b756 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, 26 Aug 2026 21:49:21 +0200
Subject: [PATCH] add image previews to settings

---
 client/components/codeEditor/codeEditor.jsx         |  4 ++--
 .../codeEditor/extensions/customHighlight.js        |  6 +++---
 client/homebrew/editor/editor.jsx                   |  4 +++-
 .../editor/settingsEditor/settingsEditor.jsx        | 13 +++++++++++++
 4 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/client/components/codeEditor/codeEditor.jsx b/client/components/codeEditor/codeEditor.jsx
index 1a9bb0213..6ee6fcb9e 100644
--- a/client/components/codeEditor/codeEditor.jsx
+++ b/client/components/codeEditor/codeEditor.jsx
@@ -193,7 +193,7 @@ const CodeEditor = forwardRef(
 				}),
 
 				//highlights
-				highlightCompartment.of([customHighlightPlugin(renderer, tab), highlightExtension]),
+				highlightCompartment.of([customHighlightPlugin(renderer, tab, settings), highlightExtension]),
 				themeCompartment.of(themeExtension),
 
 				//keyboard shortcut
@@ -341,7 +341,7 @@ const CodeEditor = forwardRef(
     		: syntaxHighlighting(legacyCustomHighlightStyle);
 
 			view.dispatch({
-				effects : highlightCompartment.reconfigure([customHighlightPlugin(renderer, tab), highlightExtension])
+				effects : highlightCompartment.reconfigure([customHighlightPlugin(renderer, tab, settings), highlightExtension])
 			});
 		}, [renderer, tab]);
 
diff --git a/client/components/codeEditor/extensions/customHighlight.js b/client/components/codeEditor/extensions/customHighlight.js
index 33c68da7a..10bb8fd54 100644
--- a/client/components/codeEditor/extensions/customHighlight.js
+++ b/client/components/codeEditor/extensions/customHighlight.js
@@ -367,7 +367,7 @@ class ImageWidget extends WidgetType {
 	}
 }
 
-export function customHighlightPlugin(renderer, tab) {
+export function customHighlightPlugin(renderer, tab, settings) {
 	//this function takes the custom tokens created in the tokenize function in customhighlight files
 	//takes the tokens defined by that function and assigns classes to them
 	//it also creates page number and snippet number widgets
@@ -399,7 +399,7 @@ export function customHighlightPlugin(renderer, tab) {
 				const tree = ensureSyntaxTree(view.state, view.state.doc.length, 50) || syntaxTree(view.state);
 				tree.iterate({
 					enter : (node)=>{
-						if(node.name === 'Image') {
+						if(node.name === 'Image' && settings.showImagePreviews) {
 							const url = getUrl(node, view.state.doc);
 
 							const widgetPosition = node.node.lastChild.from;
@@ -432,7 +432,7 @@ export function customHighlightPlugin(renderer, tab) {
 						const to = line.from + token.to;
 
 						const attrs = {};
-						if(token.type === 'Image' && token.url) {
+						if(token.type === 'Image' && token.url && settings.showImagePreviews) {
 
 							attrs['data-url'] = token.url;
 						}
diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx
index f03dc0e4e..dc799f263 100644
--- a/client/homebrew/editor/editor.jsx
+++ b/client/homebrew/editor/editor.jsx
@@ -14,6 +14,7 @@ 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 };
 
@@ -75,7 +76,8 @@ const Editor = forwardRef(
 		const [view, setView] = useState('text'); // 'text', 'style', 'meta', 'snippet'
 		const [snippetBarHeight, setSnippetBarHeight] = useState(26);
 		const [editorSettings, setEditorSettings] = useState({
-			blockShading: false,
+			autoCloseBrackets: true,
+			showImagePreviews: true,
 			activeLineShading: true,
 			lineNumbers: true,
 			fontSize: 13
diff --git a/client/homebrew/editor/settingsEditor/settingsEditor.jsx b/client/homebrew/editor/settingsEditor/settingsEditor.jsx
index 1acb64598..65353296e 100644
--- a/client/homebrew/editor/settingsEditor/settingsEditor.jsx
+++ b/client/homebrew/editor/settingsEditor/settingsEditor.jsx
@@ -79,6 +79,19 @@ const SettingsEditor = ({settings, updateSettings = () => {} }) => {
 				/>
 			</div>
 
+			<div className='field title'>
+				<label htmlFor='showImagePreviews'>
+					Show Image Previews when hovering a link
+				</label>
+				<input
+					id='showImagePreviews'
+					type='checkbox'
+					name='showImagePreviews'
+					checked={currentSettings.showImagePreviews}
+					onChange={(e) => handleFieldChange('showImagePreviews', e)}
+				/>
+			</div>
+
 			<div className='field title'>
 				<label htmlFor='activeLineShading'>
 					Background shading of active line