Dev Tools - Velocity. Cursor has odd behavior when editing.

[hmoreras]

GitHub Issue Template

Problem Statement

In the dev tool's Velocity section, when editing Velocity code, the cursor is exhibiting odd behavior due to font size differences. This inconsistency in cursor movement and positioning is affecting the user experience and making code editing less efficient and more error-prone.

Steps to Reproduce

1. Open the dotCMS admin panel
2. Navigate to the dev tools - Velocity section
3. Start typing or editing the Velocity code
4. Observe the cursor movement as you type.

Screenshare.-.2024-10-18.8_04_49.AM.mp4

Acceptance Criteria

• Cursor positioning should be accurate and predictable when moving up, down, left, or right
• The visual feedback of cursor location should align perfectly with where text will be insert

dotCMS Version

latest

Proposed Objective

User Experience

Additional Notes

• This issue may be related to the text rendering or the code editor component used in the Velocity section

[github-actions]

PRs:

• fix (velocity playground): #30393 Dev Tools - Velocity. Cursor has odd behavior when editing.  #30407

[hmoreras]

QA note: cursor editor working correctly:

Screenshare.-.2024-10-18.2_03_27.PM.mp4

velocity used.
#foreach($con in $dotcontent.pull("+contentType:Activity +(conhost:48190c8c-42c4-46af-8d1a-0cd5db894797 conhost:SYSTEM_HOST) +variant:default",10,"modDate desc")) $con.title #end