Keyboard Shortcut to increase/decrease editor font size

Hey guys,

I was thinking of making a keyboard shortcut to increase/decrease font size for editor. So far I have been thinking about using ShortcutRecorder for specific key press event and when it is triggered we would increase 'style.editor.fontSize' from Setting.ts.

If this sounds good can anyone please guide me on how I should approach this.

Edit: I have started working on this feature.

Thanks.

2 Likes

I have been waiting for the ... :wink: Hopefully your shortcut would work for the markdown AND the wys editor. The zoom commands already available in Joplin do not really help as they do change all fonts in the windows, including the notes list and the sidebar. Both become quickly useless if you play with zoom.

1 Like

Hey @ajay I tried to manually change 'style.editor.fontSize' in Setting.ts but it doesn't change font size. Also which zoom command are you talking about.

View - Zoom In/Out

1 Like

ohhk got it.

hey @roman_r_m I was thinking about making a plugin for this but while reading Plugin API I found out that it doesn't allow accessing Joplin's built in setting. Currently this API does not provide access to Joplin's built-in settings.
So my question is will it be possible to access 'Editor Font Size' from this API if not how would I go about making this plugin?

1 Like

I'm not sure, probably it's not possible to access this setting. In that case, you just can't make this plugin at all.

Ohhk so in that case I think I will just change the category of this post to Feature. I guess I cant change the category now.

hey @roman_r_m sorry for pinging you but can you tell me should I reopen this as new 'Feature Request' post?

Sure, why not.

ok Thanks

We could accept this feature but you'd need to explain, at a high level, how it will be implemented. For example, we can't have shortcuts without associated menu items, so we need to know where would the items go. Will the feature applies to both editors or just one of them; what commands, if any, will be created, etc.

Also what's your plan for testing.

Essentially we need a small technical spec.

1 Like

Yeah sure. I will look into it and update you with technical details soon.

Implementation:
hey @laurent , as you said we can't have shortcuts without associated menu items my idea is to make 2 more buttons in CodeMirror's Toolbar.


(Here I have just added A+ and A- for demo purpose we will probably use different icons)

For this feature I think my focus will be implementing this into CodeMirror only.
I will have to create 1 or 2 command/s which takes care of both increasing/decreasing font size.
As these commands will be on Editor's Toolbar they will be declared in editorCommandDeclarations.ts and implementation will be in CodeMirror.ts.
Basic pseudo code:
increaseEditorFontSize: ()=> Setting['style.editor.fontSize'] + 1 decreaseEditorFontSize: ()=> Setting['style.editor.fontSize'] - 1
I will also have to add shortcuts for this into KeymapService.ts
(I was curious about how I would change font size from Setting instance because even if I manually changed 'style.editor.fontSize' in Setting.ts it doesn't work)

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.

1 Like

No sorry we won't add more toolbar buttons at this point.

Do you have to have buttons? I doubt if this is something people will be changing frequently. Better just to have it as a menu item, shortcut, and control panel item.

No I can then add it as a 'edit' menu item. Is this approach ok?

1 Like

I would think View would make more sense, eh? Will you have a reset option like the current "Actual Size"? Laurent is the one to decide.

Yep, I agree.

I didn't think about it but it would be good to have it just like what we have right now for zoom ('Actual Size') .

Lets see what Laurent thinks of this.

I'd like to see this ideally as a ctrl + scroll shortcut as implemented in Atom and Obsidian by way of comparison.

image

In my mind it should have two different settings here (like Atom) - the default font size should remain as a default and the "font size adjust" should be only for that session (or at least easily resettable to the default (like Obsidian) - Atom uses ctrl + +/-/0 shortcuts as well as ctrl + scroll.

Not entirely relevant to this feature but it would also be nice if we could use the same gesture to zoom in on the rendered output and richtext editors as you would with a webpage (action dependant on which pane the cursor is over at the time)

4 Likes