Shortcuts and Customized Hotkeys for AppFlowy

Mayur Mahajan

Introduction

• Appflowy is now my favorite knowledge management tool and there are many who share my opinion. Appflowy provides many useful features.

• But it currently lacks in one area. Although many useful functionalities can be achieved using AppFlowy, there are many widely accepted shortcuts that appflowy currently does not support.

• Shortcuts are key combinations that allow users to quickly achieve some functionality. They improve the users' productivity. Using keyboard shortcuts is much faster than using the mouse.

• One of the main edges AppFlowy has over its competitors is the ability to have a customizable user experience. Many applications offer users a way to customize keyboard shortcuts to their desired functionality but currently, there is no such mechanism in AppFlowy.

Goal

• We need to implement a bunch of functionalities based on some key combinations or single key presses. These shortcuts can be classified into two types:

  1. Predefined Shortcuts

  2. Customizable Shortcuts

• Predefined Shortcuts will be a set of commonly used key combinations that help in simple text editing, cursor movement, element selection, etc. These shortcuts will be inspired by other desktop applications, which will give our users a uniform experience across their desktop apps. Thus through this project, our goal is to support many standard shortcuts.

• Customizable Shortcuts is an advanced functionality that will allow users to customize key combinations to achieve their desired functionality with AppFlowy. This feature truly aligns perfectly with the vision of AppFlowy in providing a customizable user experience. Through this project, our goal is to allow users to customize key combinations.

Implementation Design

Let us talk about how the Apps UI might change after we achieve the aforementioned changes.

Users will see a Shortcuts tab in the settings

In the settings, a Shortcuts option will appear which shows all the custom shortcuts

Predefined shortcuts link

In the Shortcuts tab, users can customize some shortcuts and through a link, they can also see a list of predefined shortcuts(this link will open up in a browser).

Add Custom Shortcut option

Clicking any existing key combination will open a popup for assigning a new key combination to that functionality. This popup will contain an input field where users can enter the key, the keys pressed will be caught by the Keyboard Listener service. That key event will be assigned for that shortcut. Finally selecting done will save this key combination to achieve the desired functionality.

Halfway Evaluation:

• Week 1 ~ 30th January 2023

• Discussed the project plan with my mentor Lucas

• I researched existing shortcuts and how they are implemented in the codebase.

• Added new key bindings to existing shortcuts. (PR: 1786)

• Week 2 ~ 6th February 2023

• Created shortcuts for toggling checkbox, tested it, and got it merged. (PR: 1817)
• I started working on shortcuts for creating sub-todos using the Tab key.

• I started working on improving editing using Ctrl/Meta.

• Week 3 ~ 13th February 2023

• Merged shortcuts for creating sub-todos using the Tab key (PR: 1847)
• Merged PR that allows editing with Ctrl/Meta (PR: 1845)

• Week 4 ~ 20th February 2023

• Implement the Find with Ctrl+F plugin.

• Implement the Find and Replace with Ctrl+H plugin.

• Created hardcoded UI for Customize Shortcuts Settings page.

• Week 5 ~ 27th February 2023

• Designed the BLoC for handling Customize Shortcuts Settings page. (See here)
• Researched about KeyboardListener, RawKeyboardListener, etc in flutter, to better capture user actions.

• Discussed doubts about implementing Customize Shortcuts Settings page with Mentor.

BLoC Design for Customized Shortcuts

BLoC Design use case

Next steps and schedule

• Week 6 ~ 6th March 2023

• Implement a completely functioning Customize Shortcut feature and test it.

• Gather feedback about Customize shortcut feature and improve upon it.

• Week 7 ~ 13th March 2023

• Finish work for Find and Replace plugins in the editor.

• Write an article about my mentorship experience.

• Continue maintaining and improving my work.