Keyboard Shortcut to increase/decrease editor font size

makb · 23 January 2022 04:03

Thank you for suggestion Daeraxa
I would also like to have ctrl + scroll along with keyboard shortcuts. After this if everyone thinks its good idea then I can work on that. But for this feature I will be focusing on making shortcut like ctrl + + / ctrl + - and having its menu item in View (maybe). And maybe we can reuse the commands created for this feature in ctrl + scroll

whitewall · 23 January 2022 06:23

That's already a shortcut, isn't it?

I love me a good mousewheel zoom! But there should also be a keyboard command for accessability I think,

makb · 23 January 2022 06:26

Yes, I said it as an example. I meant to say that this feature will be focusing on keyboard shortcut.

makb · 24 January 2022 12:52

@laurent Should I provide technical spec for how this will be implemented with its menu item being in View or you have some other suggestions?

makb · 25 January 2022 10:07

So instead of adding toolbar button I will add a View menu item.

My current idea of implementing this feature:

Declare keyboard shortcut in KeyMapService.ts
Declare command name in menuCommandNames.ts
Add menu item in View as menuItemDic.increaseEditorFontSize,
I will declare 2 methods one for increasing and one for decreasing font size. I am not sure where to declare the commands. I was thinking of declaring them in globalCommands.ts correct me if I am wrong.

In those commands we will increase/decrease Editor font size from Setting. Maybe someone can guide me on how to do this as I was not able to do this even if I manually changed 'style.editor.fontSize' in Setting.ts.

Testing:
For now I have this basic idea that we will first store current value of editor font size in a variable and then call the method (e.g. increaseEditorFontSize) 'n' times. Then we will compare the incremented font size value with stored value after adding 'n' to it.

I would love to hear your thoughts on this.

makb · 27 January 2022 09:21

hey @laurent ,I wanted to ask that are you ok with the above approach? Should I start working on the PR?

laurent · 27 January 2022 10:04

I don't know sorry, I don't have time to review this.

makb · 27 January 2022 12:29

hey @tessus ,Can you please take a look at the above approach and give your suggestions? or should I directly make a PR?

makb · 28 January 2022 11:25

Quick update: I got it working but it needs to re-render the screen to actually reflect the updated font size. I am doing this with Setting.incValue("valueName", 5) .If you guys have any suggestions please leave them below.

tessus · 29 January 2022 22:16

Sorry, I totally missed this.

I believe the approach is feasible, but @CalebJohn has a better understanding of the editor's inner workings.

makb · 30 January 2022 03:43

Thanks tessus for replying. I will wait for CalebJohn's reply.

makb · 31 January 2022 05:43

hey @CalebJohn ,
I got it working with this approach

But the problem with this is the 'Note Editor' needs to be re-rendered (i.e. NoteEditor -> Settings -> NoteEditor) in order to reflex font size change.
So I was thinking of moving the commands to CodeMirror.ts with idea of refreshing the editor with editorRef.current.refresh(); but this did not working.

Can you please suggest something on this?

CalebJohn · 31 January 2022 06:34

Hi @makb, your current ideas for implementation look correct.

That said, I do think you'll have an easier time getting this implemented as a plugin. Going on what @Daeraxa suggested, the setting style.editor.fontSize could be used as the default font size (thus doesn't need to be changed by your plugin), and your plugin would maintain another font size that can be adjusted on the fly. This is possible in a plugin because in Joplin the editor font size is set in css (see below), so you only need to use a stronger css in your plugin to change the font size.

I highly suggest that you implement this feature as a plugin. Not only will it be simpler/faster to get the feature to users, it will also give you more flexibility in extending features (for example you could add commands for sizing the viewer as well).

With that said, let's move on to solving the problem you currently have (which is relevant to your current approach and a potential plugin approach).

Joplin injects some CSS into the main window in when styling the CodeMirror editor, this is used for themes as well as font size.

github.com

laurent22/joplin/blob/dev/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx#L413

      
        
            			max-width: ${props.contentMaxWidth}px !important;	
            		` : '';
            
            
		const element = document.createElement('style');
            		element.setAttribute('id', 'codemirrorStyle');
            		document.head.appendChild(element);
            		element.appendChild(document.createTextNode(`
            			/* These must be important to prevent the codemirror defaults from taking over*/
            			.CodeMirror {
            				font-family: monospace;
            				font-size: ${props.fontSize}px;
            				height: 100% !important;
            				width: 100% !important;
            				color: inherit !important;
            				background-color: inherit !important;
            				position: absolute !important;
            				/* Some themes add a box shadow for some reason */
            				-webkit-box-shadow: none !important;
            				line-height: ${theme.lineHeight} !important;
            			}

The injection is done as part of a React useEffect hook. Which means that you should be able to add props.fontSize as a dependency and have the UI update "reactively".

github.com

laurent22/joplin/blob/dev/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx#L567

      
        
            				color: #8ba1a7 !important;
            			}
            			*/
            
            
			${selectionColorCss}
            		`));
            
            
		return () => {
            			document.head.removeChild(element);
            		};
            	}, [props.themeId, props.contentMaxWidth]);
            
            
	const webview_domReady = useCallback(() => {
            		setWebviewReady(true);
            	}, []);
            
            
	const webview_ipcMessage = useCallback((event: any) => {
            		const msg = event.channel ? event.channel : '';
            		const args = event.args;
            		const arg0 = args && args.length >= 1 ? args[0] : null;

I said "should" above because I'm not certain that props.fontSize will update right away. If it doesn't, then the implementation will be trickier.

I think that should be enough to solve your problem, please let me know if you don't understand how this can be done as a plugin, I'll be happy to expand.

makb · 31 January 2022 07:53

Thanks for the detailed explanation @CalebJohn ,

As suggested by you, I tried adding props.fontSize as a dependency in useEffect hook but it does not update right away as you suspected. It also needs re-rendering of Note Editor.

So I think this will be easier to implement as a plugin. My idea behind giving this as a Joplin core feature was that user gets this by default like they get it in apps like Obsidian and Atom. But I think it is trickier to implement it as a core feature.

Yes, I agree as Daeraxa suggested we can add ctrl + scroll in this plugin.

As for implementing this as plugin, Can you please explain this ?

I get that we can maintain another editor font size by registering new setting section(with registerSection method)
but how are we going to change the font size without changing style.editor.fontSize ?

CalebJohn · 31 January 2022 08:56

Are you familiar with CSS? And using CSS to style applications? If not you should start by learning some basic CSS (find a tutorial somewhere) and then play around with styling Joplin using the userchrome.css and userstyle.css files. It will be good to understand the difference between these two.

Once you're comfortable styling Joplin using CSS, you can start implementing a plugin that loads custom CSS.

I'm not certain what the exact plugin will look like, but you might have to use a contentScript to change the CodeMirror editor font size. If that's the case, the plugin will be more complicated than just changing some CSS.

makb · 31 January 2022 09:00

Yes I am familiar with CSS and have used it in my personal projects.

Thanks for all the references I will look into those and try to implement this as a plugin.

makb · 8 February 2022 14:24

Hey @CalebJohn , Just wanted to give you update on the plugin. First of all thanks for all the references it made it so easy to implement.
I am able to make the plugin work with few bugs.

Cursor does not respond when increasing font size. To overcome this, we may need to add and remove space(" ").
Font size will return to its original size but after after doing the same (add and remove space(" ") ) it again returns to incremented font size.
I am not asking fix for this from you but if you have time to look at codebase it would really help me verify my approach with the plugin GitHub Link. But even if you don't its totally fine.
Thanks again for the help!

Topic		Replies	Views
[Feature Request] Keyboard shortcut to increase/decrease editor font size Features	2	501	21 January 2022
Plugin: Font Size Shortcut Plugins	9	1487	22 April 2024
Editor font size : no effect Support	6	664	13 January 2020
Feature request: please let me configure font name/size for the whole app GUI and for the editor Features	1	491	17 March 2021
Font sizes Features	7	5073	26 March 2021

Keyboard Shortcut to increase/decrease editor font size

Related topics