mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-09-24 05:12:57 +00:00
add image previews to settings
This commit is contained in:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user