New Lists functionality in Reflect

We recently overhauled the entire codebase for creating and editing Lists (all 8,496 lines of it!). The previous iteration of the Lists editor was functional, but had its fair share of shortcomings. Given the importance of lists for note-taking, it's vital that they work as expected without interrupting one’s workflow. We thought we’d write up a little look into what goes behind the scenes at Reflect.

New Lists functionality in Reflect
We recently overhauled the entire codebase for creating and editing Lists (all 8,496 lines of it!). The previous iteration of the Lists editor was functional, but had its fair share of shortcomings. Given the importance of lists for note-taking, it's vital that they work as expected without interrupting one’s workflow. We thought we’d write up a little look into what goes behind the scenes at Reflect.
This update brings bug fixes, performance enhancements, and even some new features to the table. When it comes to editing, we think the gold-standard is Google Docs so we’ve modeled our editing behavior after them. After months of work we are now at parity.

What has changed?

Keyboard shortcuts
Creating and editing lists without relying on a mouse is now much simpler. We've made considerable improvements to the behavior of shortcuts like Enter, Tab, Shift-Tab, Backspace, and others.
notion image
 
Infinite indentation
You can now indent list items as far as you want within a page, and your list will maintain the correct structure. To-do items can now also be added and indented alongside bullets.
notion image
 
Incorporate headings into your lists
By using the [# + space] shortcut, you can convert a list item into a heading, making it easier to read and organize overarching categories within your lists.
notion image
 
Improved multi-device offline sync
You should notice significantly fewer conflicts and errors when syncing lists across devices and after using offline mode.
 
A more streamlined codebase
This leads to fewer bugs and points of failure. In particular, there will be no more strange blockquotes.

Some Functionality Tips

  • Type [-] to create a bullet, [1.] for a numbered list, or [] for tasks
  • Use [Cmd + return] to toggle between bullet, unchecked, and checked task lists
  • Select multiple list items to toggle them simultaneously
  • Swipe to increase or decrease indentation on your iPhone
  • Collapse bullet points for easier navigation
notion image
 
Watch a full walkthrough of how to use functionality within Lists here.
 
Our new Lists functionality is built off of ProseMirror Flat List, which is open source and can be accessed here.

Written by

Sam Claassen
Sam Claassen

Head of Growth at Reflect

    Related posts