Customization options #283

Bubobubobubobubo · 2024-05-05T20:57:04Z

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 · 2024-05-05T21:31:23Z

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

munshkr · 2024-05-15T22:31:07Z

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 · 2024-05-18T09:05:16Z

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/session@1.1.0 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/session@1.1.0 
       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 npm@10.8.0` 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 · 2024-05-18T10:15:06Z

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

This fixes some build errors related to an unwanted typescript package upgrade

munshkr · 2024-05-19T12:22:53Z

@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
Add a new option for enabling/disabling current line highlight (False by default)
Make "Word Wrap" true by default
Restore key shortcuts for "Word Wrap" and "Line Numbers"
Include prevoius theme "One Dark"

Bubobubobubobubo · 2024-05-19T12:49:22Z

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

tmhglnd · 2024-05-19T18:55:34Z

Hey! I just briefly tried this. Very nice! 😎 Some initial notes:

I don't see the names anymore? Maybe something broke there?
The theme's don't have a semi-transparent black background anymore. Making them very hard to read when Hydra visuals are being used.
The fontweight in the previous version was more bold/strong. I personally liked that for more visibility, dunnow if this should be an option or something we just put back in.
I like the Line-numbers and Word-wrapping features! In a previous commit I proposed shift-ctrl-L for enabling line-numbers ans shift-ctrl-W for word-wrap. Is this something we should put back in too?
I think word-wrap on should be the default maybe? At least I wouldn't mind.
I also see this .......... dotted line below the editor where i am currently typing in.

…linenumbers

munshkr · 2024-05-19T20:58:24Z

Hey! I just briefly tried this. Very nice! 😎 Some initial notes:

I don't see the names anymore? Maybe something broke there?

The theme's don't have a semi-transparent black background anymore. Making them very hard to read when Hydra visuals are being used.

The fontweight in the previous version was more bold/strong. I personally liked that for more visibility, dunnow if this should be an option or something we just put back in.

I also see this .......... dotted line below the editor where i am currently typing in.

Most of these issues are related to the fact that I customized the One Dark theme a lot, so I guess we need to apply those on top of the selected theme.

I like the Line-numbers and Word-wrapping features! In a previous commit I proposed shift-ctrl-L for enabling line-numbers ans shift-ctrl-W for word-wrap. Is this something we should put back in too?

Agree, I think those are sensible shortcuts. I'll add a "Key Shortcuts" dialog soon, so this could be further customized.

I think word-wrap on should be the default maybe? At least I wouldn't mind.

Makes sense!

tmhglnd · 2024-05-19T21:14:33Z

I have a fix for 2, removing all themes default background and replacing it by the semi-transparant black background that is not full editor but only where the text is.
I've also included some additional themes that I think ook nice: Andromeda, Bespin, Console Dark, Xcode Dark, Solarized Dark, Monakai, Github Dark (all from: https://uiwjs.github.io/react-codemirror/#/theme/home)
I've also addressed 3, making the default font-weight 500.
I've also added the One Dark theme back in. (used this one: https://github.com/codemirror/theme-one-dark/tree/main)
I added a preview of the changes when you hover over the Font or Theme with onMouseEnter => {}. So you can see in the background already what it looks like before you click.
I included some extra fonts too: Fira Code, Ubuntu Mono, Roboto Mono, Syne Mono, VT323 (from https://fonts.google.com/, converted to woff and woff2 with: https://transfonter.org/)

I think word-wrap on should be the default maybe? At least I wouldn't mind.

Maybe not yet, it behaves a bit strange when you're zoomed in more then 100% on the page.

I have to up my github skills I think, because I'm not sure what now the best way is to get my commits to be in this fork. Should I do a pull request to this fork that then eventually will be merged with the main branch? (I guess so). In the meantime you can already check the things I'm doing here: https://github.com/tmhglnd/flok/tree/add-vim-mode

Bubobubobubobubo · 2024-05-19T23:35:30Z

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 · 2024-05-19T23:44:53Z

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!

…consolata;

tmhglnd · 2024-05-20T09:21:10Z

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.

Some fixes and ideas added

Bubobubobubobubo · 2024-05-20T10:33:12Z

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

munshkr · 2024-05-20T11:28:13Z

packages/web/src/components/editor.tsx

-    backgroundColor: "rgba(255, 0, 255, 0.5) !important",
-    opacity: 0.5,
-  },
-  ".cm-ySelectionInfo": {


@tmhglnd I think this .cm-ySelectionInfo is related to the "username" cursor

munshkr · 2024-05-20T11:29:30Z

packages/web/src/components/editor.tsx

-  "& .cm-scroller": {
-    fontFamily: `Inconsolata`,
-    paddingLeft: "2px !important",
-    minHeight: "100vh",


and I think this minHeight fixes the "......." outline that appears just below your cursor, it should expand the editor div height to full screen height.

Bubobubobubobubo · 2024-05-20T15:44:49Z

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 · 2024-05-20T21:07:23Z

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 · 2024-05-21T14:50:05Z

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

diegodorado and others added 15 commits May 1, 2024 22:58

add a keybinding for vim keymap

82c03af

Adding Configuration Options for CodeMirror editor

0ec8c12

Re-organise menu

c10a78c

Create empty menus

fed61b2

At least now we have a menu

d3b7514

Menu reorganisation

a905cde

base callback for font/theme selection

2e34043

handle props properly

5e006cd

Semi-working

799b1da

begin adding fonts

4a5cb81

Adding fonts and themes

e1ad32d

each theme its own file

0e1d590

Add Nord theme

e609742

Move customization options down in the menu

6f76118

Fix typing issues

919ac97

munshkr self-requested a review May 18, 2024 13:05

munshkr added 2 commits May 19, 2024 09:08

chore: Remove unused packages and set some as development deps

5ac385a

fix: Only upgrade necessary packages

308a1e7

This fixes some build errors related to an unwanted typescript package upgrade

munshkr added 6 commits May 19, 2024 10:39

fix: Show only themes/fonts when seleting option on Command dialog

e293cb1

fix: Remove unused import

c7e6af3

refactor: Replace theme.ts for themes/index.ts

8c590e1

fix: Separate theme name from key

bb4b0a3

feat: Show if toggle option is enabled/disabled on Command dialog

8813e8b

fix: Default theme; Rename config section to Editor

6babb95

feat: Show current theme and font family on Command dialog

c077acd

semi-transparant bg for code with black highlight and margin between …

ca0f64e

…linenumbers

installed some extra themes

057c712

tmhglnd added 2 commits May 19, 2024 23:17

included default one dark theme

5f3764b

previw font and theme onMouseEnter

b3531d6

added some coding fonts

efe1db7

font-sizes normalized, default theme and font back to one dark and in…

08900af

…consolata;

Merge pull request #3 from tmhglnd/add-vim-mode

94329ba

Some fixes and ideas added

munshkr reviewed May 20, 2024

View reviewed changes

Bubobubobubobubo mentioned this pull request May 20, 2024

Custom Font / Theme #282

Closed

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Customization options #283

Customization options #283

Bubobubobubobubo commented May 5, 2024 •

edited

Bubobubobubobubo commented May 5, 2024

munshkr commented May 15, 2024

tmhglnd commented May 18, 2024 •

edited

Bubobubobubobubo commented May 18, 2024 •

edited

munshkr commented May 19, 2024 •

edited

Bubobubobubobubo commented May 19, 2024

tmhglnd commented May 19, 2024 •

edited

munshkr commented May 19, 2024

tmhglnd commented May 19, 2024 •

edited

Bubobubobubobubo commented May 19, 2024

tmhglnd commented May 19, 2024

tmhglnd commented May 20, 2024 •

edited

Bubobubobubobubo commented May 20, 2024

munshkr May 20, 2024

tmhglnd May 20, 2024

munshkr May 20, 2024 •

edited

tmhglnd May 20, 2024

Bubobubobubobubo commented May 20, 2024 •

edited

tmhglnd commented May 20, 2024

munshkr commented May 21, 2024

Customization options #283

Are you sure you want to change the base?

Customization options #283

Conversation

Bubobubobubobubo commented May 5, 2024 • edited

Bubobubobubobubo commented May 5, 2024

munshkr commented May 15, 2024

tmhglnd commented May 18, 2024 • edited

Bubobubobubobubo commented May 18, 2024 • edited

munshkr commented May 19, 2024 • edited

Bubobubobubobubo commented May 19, 2024

tmhglnd commented May 19, 2024 • edited

munshkr commented May 19, 2024

tmhglnd commented May 19, 2024 • edited

Bubobubobubobubo commented May 19, 2024

tmhglnd commented May 19, 2024

tmhglnd commented May 20, 2024 • edited

Bubobubobubobubo commented May 20, 2024

munshkr May 20, 2024

Choose a reason for hiding this comment

tmhglnd May 20, 2024

Choose a reason for hiding this comment

munshkr May 20, 2024 • edited

Choose a reason for hiding this comment

tmhglnd May 20, 2024

Choose a reason for hiding this comment

Bubobubobubobubo commented May 20, 2024 • edited

tmhglnd commented May 20, 2024

munshkr commented May 21, 2024

Bubobubobubobubo commented May 5, 2024 •

edited

tmhglnd commented May 18, 2024 •

edited

Bubobubobubobubo commented May 18, 2024 •

edited

munshkr commented May 19, 2024 •

edited

tmhglnd commented May 19, 2024 •

edited

tmhglnd commented May 19, 2024 •

edited

tmhglnd commented May 20, 2024 •

edited

munshkr May 20, 2024 •

edited

Bubobubobubobubo commented May 20, 2024 •

edited