add image previews to settings

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]);
 

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;
 						}

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

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