Hi everyone,
I would love to know if there is a (hopefully easy) way to change the blinking thin line cursor into a custom one?
Greetings
Hello.
They call that a caret. (I just learned this.)
Unfortunately, as far as I can tell, you can't do anything at all with it in the desktop version of Quest (due to the age of its built-in browser).
For the online players, it's not much better than nothing: You can change the color of the caret using caret-color in the CSS. (This will have no effect in the desktop player or on some browsers.)
https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color
EDIT
Vurt834 and 8ne have this licked:
https://textadventures.co.uk//forum/quest/topic/kkv1gpneeu63xaifn3_6ua/custom-command-cursor#28d415b7-2b98-497a-bade-12fc0b604d68
It looks like (maybe?) they have written the tedious code mrangel is talking about to which mrangel referred.
I believe there's also a property caret-shape which can be set to bar, block, or underscore. Not widely supported, though.
If you want something more sophisticated, you would need to use some javascript (although it's probably a lot of effort for a small change).
window.getSelection() will return a Selection object you can play with. Check to make sure that the selection's type property is "Caret" (the caret has a position but there's not a block of selected text), and that its anchorNode is the input element. If so, its anchorOffset will be the number of characters before the caret; which you can then do some frustrating maths with to work out where the caret is and position a floating image over it. You would probably want to bind an event listener to the document's selectionchanged event to move your fake caret when necessary (as well as maybe responding to keydown and click events as a backup for older browsers that might not support selectionchanged)
I used this library to achieve that purpose: https://github.com/8ne/quest_libraries/tree/master/OwnCursor . Easy to implement...there are (there are help files on the github page). Just import it, add a couple lines of code in your main code (which also allows you to set the character you want for your cursor). Its baked in cursors are great already.