Keyboard Shortcut to increase/decrease editor font size

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

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

1 Like

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,

1 Like

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

1 Like

@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?

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

My current idea of implementing this feature:

  1. Declare keyboard shortcut in KeyMapService.ts
  2. Declare command name in menuCommandNames.ts
  3. Add menu item in View as menuItemDic.increaseEditorFontSize,
  4. 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.

1 Like