Wrong cursor position Create a new artifact editor in Chrome(on macOS)

[fukusuket]

Hello, Thank you for great project :) I would like to report the following issue that occurred.

Describe the bug
Wrong cursor position Create a new artifact editor in Chrome(on macOS).
This prevents users from editing YAML properly.

Step to Reproduce

1. on macOS/Chrome
2. ./velociraptor-v0.7.1-1-darwin-arm64 gui
3. View Artifacts -> Click + (Create a new artifact)
4. Place the cursor at the end of the first line(name: Custom.Artifact.Name) and delete the last character

Expected behavior
The last letter e is removed as below
name: Custom.Artifact.Nam

Actual behavior
The 7th character c from the end is removed as shown below.
name: Custom.Artifat.Name

Screenshot
The seventh character c from the end is removed as shown below.(note: Cursor position is at the end of line)

Environment

• OS: macOS Sonoma version 14.2.1
• Velociraptor: 0.7.1
• Google Chrome: 121.0.6167.85（Official Build） （arm64）

Additional context
I have confirmed that this issue does not occur in the following environments. It seems to only occur on Google Chrome on macOS

• macOS:
  • Firefox
  • Safari
• Windows11:
  • Google Chrome
  • Firefox
  • Microsoft Edge

Similar issue(This may be an issue with Ace?):

• Wrong cursor position ajaxorg/ace#2548
• Cursor position incorrect on Mac error ajaxorg/ace#4794

Thank you for your time.

[scudette]

This does not reproduce on an English based system - perhaps it is something specific to unicode fonts? Does it occur in all themes?

[fukusuket]

@scudette
Thank you for quick response.
Yes, in my environment (Japanese/macOS/Chrome), this issue occurred even when I selected other themes.

I have confirmed that this does not occur in the Japanese/Windows/Chrome environment ...
but will it not occur in your macOS/Chrome/English environment? Is my understanding correct?

I'll check the fonts actually read in the dev console.

[fukusuket]

Sorry... I'm not familiar with CSS, but the fonts loaded in the reproduction environment were as follows.

Can you find out anything here?
Thank you for your time.

[scudette]

Sorry i meant velociraptor themes. You can change the theme in the user preferences tile

[predictiple]

All of the screenshots here, including the ones in the PR, are not using the correct font in the ace editor. Although the modal title ("Create a new artifact") is using the right font so it shows that the font is available.

As Mike has suggested, please try the other themes. Specifically please also try the ncurses theme because this is the only theme that uses a different font for the ace editor. With this theme it's much easier to see if it's using the right font and it should look like this:

[predictiple]

For reference the ace editor fonts are set here (and not in the CSS):

velociraptor/gui/velociraptor/src/components/users/user-label.jsx

Line 376 in 00cbd2f

// Set the ACE theme according to the theme so they match.

If the right font is not loaded then you'll definitely have cursor position problems because the ace editor calibrates itself for the font it expects to be using.

[scudette]

is it possible that on this system there is a system version of Iosevka Term which is different than the one we ship?

[predictiple]

It's possible but unlikely, unless the full font has been installed during troubleshooting. And in that case it might even be a good thing.

One of the reasons for using Iosevka is that the full font supports CJK, so if the user is in Japan and the GUI needs to display a CJK glyph other than the most common ones included in our (small) subset, then installing the full font should give it access to the full CJK glyph set.

We have an ace.css but generally don't try to set much there because the ace component adds it's own CSS, which I guess can be overridden but it should be unnecessary because - as mentioned above - on most systems it seems to work fine when set through ace.options (which also is the right way to do it according their docs IIRC).

On Firefox the dev tools shows you what font is actually being used. This might help with troubleshooting.

[predictiple]

To summarize what we know so far:

• Since the Iosevka font appears to be available on the system (as it is being used for the modal title), the issue amounts to the correct font not being used by the ace editor, despite it being set via ace_options.fontFamily.
• From the screenshots in Wrong cursor position Create a new artifact editor in Chrome(on macOS) #3259 the underlying issue of the font not being used seems to be browser-independent, with the cursor positioning arising as an additional issue on Chrome.
• For the previous point the cursor issue occurs with macOS/Chrome/Japanese but not macOS/Chrome/English.

If the issue also occurs with the ncurses theme then we'll know that it's not related to the Iosevka font.

[fukusuket]

@scudette @predictiple
Thank you for your kind support.

When I changed user profile themes, I found that it was only occurring in Velociraptor Classic(light). (It seems that I was changing the default themes ...) Is there any other information required for the investigation?

• OK Velociraptor(light)
• OK Velociraptor(dark)
• NG Velociraptor Classic(light)
• OK Strawberry Milkshake(light)
• OK Ncursess(light)
• OK GitHub dimmed(dark)
• OK Cool Gray(dark)
• OK Midnight Inferno(dark)

It occurred only with Chrome(on macOS/Japanese) and did not occur in Firefox and Safari.
Also, it did not occur on Chrome(on Windows11/Japanese).

In my environment, I have confirmed that this commit resolves the issue (though it doesn't seem to be a good fix), but would this be helpful in investigating the cause?

[predictiple]

Thanks for doing that testing on all the themes. The Classic theme is quite bare-bones so I think nobody noticed the issue with that theme until now.

I believe the issue is that the ace_options.fontFamily needs an explicit font name. For the Classic theme it was set to "monospace" which is probably insufficient for the ACE editor to work out the correct cursor positioning.

I'm not sure why it would work on non-Chrome browsers and other OS/language combinations.

[fukusuket]

@predictiple
I have confirmed that the issue has been resolved in the PR #3262 :) Thank you so much for quick fix!