Customization options

[Bubobubobubobubo]

This PR is rather large and unfocused so I will keep it as a draft for now. Some help is necessary to review the code in order to tame the remaining ugly bits. I don't know much about React and my frontend skills are shallow. The PR is adding some much needed customization options to Flok:

• Fonts: JetBrains, Monaco, Courier, MonoCraft, BigBlue Terminal, JGS, Steps Mono, IBM Plex Mono, Inconsolata.
• Themes: Dracula, Monokai Dimmed, Gruvbox Dark, Ayu Dark, Tokyo Night, Nord.

It also refactors the keybinding based CodeMirror extension system that Flok was using. Now, options are accessed through the menu:

• Vim Mode: toggle / untoggle the Vim Editor keybindings
• Wrap Lines: wrap the line when it reaches the end of the screen
• Line Numbers: show or hide line numbers

EDIT: well, lots of typing errors to fix.

[Bubobubobubobubo]

I fixed the typing errors in the code I've written. Did I break something in the build process?

[munshkr]

I fixed the typing errors in the code I've written. Did I break something in the build process?

Sorry I've been a bit busy with life and work.. I'll take a look this weekend and help if I can.

[tmhglnd]

Hey! I tried to check out this branch but I get a build error when running npm run build. I see these are the same errors as listed below in Details of the Test / build

 ✖  @flok-editor/session:build
       > @flok-editor/[email protected] build
       > tsc
       
       ../../node_modules/y-websocket/dist/src/y-websocket.d.ts(116,28): error TS1479: The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("lib0/observable")' call instead.
       ../../node_modules/y-websocket/dist/src/y-websocket.d.ts(117,20): error TS1479: The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("yjs")' call instead.
       ../../node_modules/y-websocket/dist/src/y-websocket.d.ts(118,36): error TS1479: The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("y-protocols/awareness")' call instead.
       ../../node_modules/y-websocket/dist/src/y-websocket.d.ts(119,27): error TS1479: The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("lib0/encoding")' call instead.
       ../../node_modules/y-websocket/dist/src/y-websocket.d.ts(120,27): error TS1479: The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("lib0/decoding")' call instead.
       lib/session.ts(257,55): error TS2339: Property 'closed' does not exist on type 'WebrtcProvider'.
       npm ERR! Lifecycle script `build` failed with error: 
       npm ERR! Error: command failed 
       npm ERR!   in workspace: @flok-editor/[email protected] 
       npm ERR!   at location: /Users/timohoogland/Downloads/flok-add-vim-mode/packages/session 
       npm notice 
       npm notice New minor version of npm available! 10.2.3 -> 10.8.0
       npm notice Changelog: <https://github.com/npm/cli/releases/tag/v10.8.0>
       npm notice Run `npm install -g [email protected]` to update!
       npm notice 
       

 ——————————————————————————————————————————————————————————————————————————————————————————————————

 >  Lerna (powered by Nx)   Ran target build for 8 projects (6s)
 
    ✔    4/5 succeeded [0 read from cache]
 
    ✖    1/5 targets failed, including the following:
         - @flok-editor/session:build

I'm not so sure what to do to fix it.

I fixed the typing errors in the code I've written. Did I break something in the build process?

It looks like the build error was introduced in commit: 6f76118

[Bubobubobubobubo]

Yes I remember running a command that might have updated packages. The error has to do with something unrelated to the changes: Property 'closed' does not exist on type 'WebrtcProvider'.

[munshkr]

@Bubobubobubobubo @tmhglnd yes, apparently a lot of packages were upgraded automatically at some point, including typescript, which causes that error. I reverted the changes on package-lock.json and re-installed the dependencies, and it's building again. Will look into that build problem later in another issue...

This looks great! I'm going to make a few more edits if you don't mind @Bubobubobubobubo

• Try to improve Command dialog menu navigation
• Show "Enable/Disable ..." in menu options based on its state
• Restore custom styles on top of the currently selected theme
• Include all settings in a single object to simplify passing as prop and saving/restoring
• Use local storage to save/restore editor settings
• Make "Word Wrap" true by default
• Include prevoius theme "One Dark"
• Add a new option for enabling/disabling current line highlight (False by default)
• Restore key shortcuts for "Word Wrap" and "Line Numbers"

[Bubobubobubobubo]

Thank you for taking a look! Sorry about the auto-upgrade mishap. About customization, we could save a single object in localStorage to facilitate passing the configuration around in different components. I wasn't sure how localStorage was handled so I.. did nothing 😄.

I can take a look and test if needed for the following commits :)

[Bubobubobubobubo]

You might be able to push to this branch by adding the repo it is based on as a remote. Not a Git wizard myself 🥹

[tmhglnd]

You might be able to push to this branch by adding the repo it is based on as a remote. Not a Git wizard myself 🥹

I would need permission for that, now I get this error: remote: Permission to Bubobubobubobubo/flok.git denied to tmhglnd. But I think I could make a pull request here and then you merge it with your fork. I'll look into it tomorrow!

[tmhglnd]

I made a pull request: Bubobubobubobubo#3

Some extra things I updated:

• I normalized the font sizes in the @font-face with size-adjust: so there's less differences in font size when you change between them.

I Also noticed that the names do show up when you hover the mouse on the little circle above the cursor line. So I guess they are still there but it is indeed some css customization that got lost in the process of adding custom themes.

[Bubobubobubobubo]

@tmhglnd: I have merged your changes into the branch.

[Bubobubobubobubo]

Just a word of caution from personal experience: handling keyboard shortcuts can be quite difficult if you start to take into account that there will be multiple editing modes now. Some keyboard shortcuts will simply break because of the Vim Mode. Generally speaking, I'm not a big fan of these. A good command prompt can be tremendously better, especially since you only need to remember only one keybinding to summon it.

On another topic, I think that we are at a good point to start to get a bit creative with customization options. What about adding sliders for font-weight and other stuff?

[tmhglnd]

Created a new pull request here Bubobubobubobubo#4

With fixes for the name badges and the unwanted dotted ... line. I also added the fontFamily to the name badge so it changes with the selected font too. I took the liberty to lower the badge a bit as well, so it doesn't obstruct the code on that line too much.

[munshkr]

Just a word of caution from personal experience: handling keyboard shortcuts can be quite difficult if you start to take into account that there will be multiple editing modes now. Some keyboard shortcuts will simply break because of the Vim Mode. Generally speaking, I'm not a big fan of these. A good command prompt can be tremendously better, especially since you only need to remember only one keybinding to summon it.

Also true, I guess we need to test them more. I performed a couple or days ago and had some issues with some shortcuts, for example, at one point, I tried to comment a line with CMD+/ but mistyped and pressed CMD+. and silenced everything 😨 same thing with Ctrl+Enter in Mac, which executes all the code instead of the current block.

On another topic, I think that we are at a good point to start to get a bit creative with customization options. What about adding sliders for font-weight and other stuff?

Yes! That'd be great. We could make use of a Settings Dialog and throw everything in there 😄 I'd tackle this in a separate PR though

[Bubobubobubobubo]

Hello, bumping this PR. What can be done to get it merged in the near future?

[munshkr]

Hello, bumping this PR. What can be done to get it merged in the near future?

Hey! Let me take a look at the to-do list I had, I don't quite remember if it's up to date, maybe some of these things can be done later and we can merge this now...

[munshkr]

Ok I think it's ready! @Bubobubobubobubo @tmhglnd Do you want to take a last look? Just in case you feel something is missing...

These were my last changes:

• Removed font-size-adjust rule. For some reason it made the font super small on my end. Maybe this is needed in some cases? @tmhglnd
• Enabled word wrapping by default
• Moved editor settings into a single object, and save/load to/from local storage automatically.

The only thing that I didn't restored was the shortcuts for toggling Line numbers and Word wrapping, because I wasn't sure what was the best way to handle it now that it is a prop set in parent components and not handled in the editor itself. But I figured this isn't that bad now that settings are saved automatically, you just have to toggle them once if you prefer :)

[Bubobubobubobubo]

I don't have much time to program currently and I trust your judgment 🙏. IMO, the essential is to get something merged that we can gradually improve on. I'm sure more CSS hacks will find their way in in due time. I'll probably do more commits in the upcoming months when time will be a resource again.

[munshkr]

Alright, I'll merge it for now. As you mentioned, we can still make adjustments later. Thanks to both of you for your hard work and suggestions, and a shoutout to @diegodorado for motivating these customization improvements with the Vim mode! 😊

[tmhglnd]

• Removed font-size-adjust rule. For some reason it made the font super small on my end. Maybe this is needed in some cases? @tmhglnd

I think I added this to reduce the font-size differences between the fonts. For me it looked good I remember, but if it gives issues on your end then we leave it out. I haven't had a look at it in a while. In any case I think all looks good so far!

I don't mind not having the shortkeys for wrapping/line-numbers, the setting in the menu are fine.

[tmhglnd]

I also notice now that selection highlighting is difficult to see when the selection is just on 1 line. When switching to multiple lines it becomes better visible.

[diegodorado]

oh nice!