In Browser Markdown Editor created with NextJS

Another fun project to work on. This time, I decided to add some more features.

• Shortcut: user can use shortcuts to perform most of the app's functionalities. Press Ctrl-Shift-? to see the list of shortcuts supported.
• Save to localStorage.
• Naming new file. This is my favorite feature.

More about naming new file

In Windows (or in any OS nowadays), right after you click a button to create a new file and before you give it a name, most likely its temporary name will be something like “new-file”, or ‘new-document’. If ‘new-file’ already exists, the name will probably be ‘new-file-1’. If ‘new-file-1’ is already exists, ‘new-file-2’ will be chosen.

I decided to add this feature to my app, with some modifications. When user created a new file but haven't saved it yet,its name will be 'new-file.md'. If there are 3 new files that has not been saved yet, their names will be 'new-file-1.md', 'new-file-2.md', 'new-file-3.md'. If user deletes 'new-file-2.md', the next new file will be named 'new-file-2.md' and the one created after that is 'new-file-4.md'

To implement this idea, I created a counter object that has 2 functions: getIndex and markRemove. Internally, it has an array of booleans. Each time a 'new-file-(i).md' is deleted, markRemove will be called to set the ith element of the array to false. Each time a new file is created, getIndex will be called and return the index of the first false element of the array. If all array's elements are true, getIndex will return the array's length.

In the future, I might upgrade it into full-stack by adding log-in function and register user will be able to save documents to database.

Please tell me what you think. Any suggestion for improvement is welcomed.