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.

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

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).

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.

Week 2 ~ 6th February 2023

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

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

Researched about KeyboardListener, RawKeyboardListener, etc in flutter, to better capture user actions.
Discussed doubts about implementing Customize Shortcuts Settings page with Mentor.