add image previews to settings

This commit is contained in:
Víctor Losada Hernández
2026-08-26 21:49:21 +02:00
parent a83ac83ed3
commit 2fc135724f
4 changed files with 21 additions and 6 deletions
+2 -2
View File
@@ -193,7 +193,7 @@ const CodeEditor = forwardRef(
}), }),
//highlights //highlights
highlightCompartment.of([customHighlightPlugin(renderer, tab), highlightExtension]), highlightCompartment.of([customHighlightPlugin(renderer, tab, settings), highlightExtension]),
themeCompartment.of(themeExtension), themeCompartment.of(themeExtension),
//keyboard shortcut //keyboard shortcut
@@ -341,7 +341,7 @@ const CodeEditor = forwardRef(
: syntaxHighlighting(legacyCustomHighlightStyle); : syntaxHighlighting(legacyCustomHighlightStyle);
view.dispatch({ view.dispatch({
effects : highlightCompartment.reconfigure([customHighlightPlugin(renderer, tab), highlightExtension]) effects : highlightCompartment.reconfigure([customHighlightPlugin(renderer, tab, settings), highlightExtension])
}); });
}, [renderer, tab]); }, [renderer, tab]);
@@ -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 //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 //takes the tokens defined by that function and assigns classes to them
//it also creates page number and snippet number widgets //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); const tree = ensureSyntaxTree(view.state, view.state.doc.length, 50) || syntaxTree(view.state);
tree.iterate({ tree.iterate({
enter : (node)=>{ enter : (node)=>{
if(node.name === 'Image') { if(node.name === 'Image' && settings.showImagePreviews) {
const url = getUrl(node, view.state.doc); const url = getUrl(node, view.state.doc);
const widgetPosition = node.node.lastChild.from; const widgetPosition = node.node.lastChild.from;
@@ -432,7 +432,7 @@ export function customHighlightPlugin(renderer, tab) {
const to = line.from + token.to; const to = line.from + token.to;
const attrs = {}; const attrs = {};
if(token.type === 'Image' && token.url) { if(token.type === 'Image' && token.url && settings.showImagePreviews) {
attrs['data-url'] = token.url; attrs['data-url'] = token.url;
} }
+3 -1
View File
@@ -14,6 +14,7 @@ const EDITOR_SETTINGS_KEY = 'HB_edit_settings';
import defaultCM5Theme from '@themes/codeMirror/default.js'; import defaultCM5Theme from '@themes/codeMirror/default.js';
import darkbrewery from '@themes/codeMirror/darkbrewery.js'; import darkbrewery from '@themes/codeMirror/darkbrewery.js';
import cm5Themes from 'codemirror-5-themes'; import cm5Themes from 'codemirror-5-themes';
import { autoCloseTags } from '@codemirror/lang-javascript';
const themes = { default: defaultCM5Theme, ...cm5Themes, darkbrewery }; const themes = { default: defaultCM5Theme, ...cm5Themes, darkbrewery };
@@ -75,7 +76,8 @@ const Editor = forwardRef(
const [view, setView] = useState('text'); // 'text', 'style', 'meta', 'snippet' const [view, setView] = useState('text'); // 'text', 'style', 'meta', 'snippet'
const [snippetBarHeight, setSnippetBarHeight] = useState(26); const [snippetBarHeight, setSnippetBarHeight] = useState(26);
const [editorSettings, setEditorSettings] = useState({ const [editorSettings, setEditorSettings] = useState({
blockShading: false, autoCloseBrackets: true,
showImagePreviews: true,
activeLineShading: true, activeLineShading: true,
lineNumbers: true, lineNumbers: true,
fontSize: 13 fontSize: 13
@@ -79,6 +79,19 @@ const SettingsEditor = ({settings, updateSettings = () => {} }) => {
/> />
</div> </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'> <div className='field title'>
<label htmlFor='activeLineShading'> <label htmlFor='activeLineShading'>
Background shading of active line Background shading of active line