daniel3735928559/guppy

Styling the cursor

Closed this issue · 4 comments

I'd like the change the cursor from its default "[?]". I previously accomplished this with this bit of code

var guppy = new Guppy(inputId, {
    empty_content: "\\color{gray}{\\text{Visual editor. Enter your expression here}}",
    done_callback: process
});

I've updated my Guppy.init to the following since

Guppy.init({
    osk: new GuppyOSK({"goto_tab":"qwerty","attach":"focus"}),
    path: "plugins/guppy/build",
    symbols: "plugins/guppy/sym/symbols.json"
});

The default guppy input would then contain the placeholder text and then display the cursor as "|" when selected. Neither happens now. How do I accomplish this in newer versions?
In the documentation it's stated

settings Object A dictionary of settings. Available settings are as specified in Guppy.init. Values in this dictionary will, for this instance of the editor, override settings specified through Guppy.init.

Where is the list of settings? Does this include the cursor style?

As a side question:
How can I hide the OSK?

Thanks in advance.

The settings can now be set globally for all instances of the editor through Guppy.init, as documented here. So, in your case, if you want all editors to have that empty content, you'd do:

Guppy.init({
    osk: new GuppyOSK({"goto_tab":"qwerty","attach":"focus"}),
    path: "plugins/guppy/build",
    symbols: "plugins/guppy/sym/symbols.json",
    settings: {"empty_content":"\\color{gray}{\\text{Visual editor. Enter your expression here}}"},
    events: {"done": process}
});

Note that, in another slight API change, process will now receive an argument, e where e.target will be the guppy instance that triggered the event. (So if you want to get the editor's LaTeX content in the event handler, you could do

var process = function(e){ console.log(e.target.latex()); }

for example)

That documentation you referenced for the Guppy constructor (which, reading it now, is not the most clear thing in the world--I've updated it slightly) was attempting to say that if you want a specific instance of the editor to have different settings from the global ones specified in Guppy.init, you can pass those different settings into the constructor for that specific instance like:

var guppy = new Guppy(inputId, {
    settings: {empty_content: "\\color{gray}{\\text{Hello this is a visual editor! Enter your expression here!}}"},
    events: {"done": process}
});

The OSK can be hidden by a user by either clicking outside the editor (if "attach":"focus" was passed to GuppyOSK) or by clicking the keyboard button in the editor. The OSK can be hidden programatically by Guppy.OSK.detach(my_guppy).

Thanks! The cursor still displays as "[?]". Is there anything I can do about this or do I have to modify the source code to get it to display as "|"?

Interesting--that is an actual regression. Should now be fixed. (Apparently I forgot that "" is falsey)

Perfect! Thanks again.