Steps performed:

• Enter 1+sin(x)+1
• Select +sin(x)
• Copy
• Modify equation to 1+sin(xy)+1
• Move cursor to end
• Paste

Observed:
Equation ends up as 1+sin(xy)+1+sin(xy)

Expected:
Equation ends up as 1+sin(xy)+1+sin(x)

Either the mouse should control the cursor and selection the way it normally does in a text editor (will required more KaTeX work; \xmlAttr perhaps) or it should not at least do nothing (rather than select the divs the way it does now).

Steps performed:

• Enter x + 1
• Press Ctrl-Z

Observed:
No change in editor state, confirmed by inspecting the XML state before and after the Ctrl-Z

Expected:
Editor reverts to a state of displaying x +

My screen looks like this and doesn't work offline. Do i need to install some other library.

Hello,

First of all, thank you for the library.
Using MathQuill has been a nightmare.

It'd be great to have guppy on npm, so its easier to install and update as opposed to just downloading.
Its very easy to create and publish a package.

Steps performed:

Enter pi^2

Observed:

Output (pi)^2

Expected:

pi^2

Do more extensive testing to verify that the JS-based rendering is as good as the XSLT-based rendering and then remove both src/transform.xsl and the Guppy.guppy_init function, using only Guppy.get_symbols to load symbol files.

Guppy should support all greek letters (upper and lower case) and a few more common symbols (for example, \leq, \geq) than it currently does.

Steps performed:

• On chromium 54.0.2840.100 (64-bit) on Arch Linux (fully upgraded system), go to the demo page
• Enter x ^ 2
• Hit backspace twice

Expected result:

Left with x^[?] with the cursor to the right of the x.

Observed result:

The page crashes with the error "Aw, Snap! Something went wrong while displaying this webpage".

I'm planning to use guppy as an input for entering expressions and equations. However after reading the documentation I wasn't able to find a way to clear the editor. I implemented this utility function hoping that would work

function clear() {
    guppy.end();
    var n = getText().length;
    while(n--)
        guppy.backspace();
    guppy.home();
}

where guppy is the editor instance. This unfortunately causes the editor to become unselectable and the following error to be thrown.

    Uncaught TypeError: Cannot read property 'setAttribute' of null
    at Guppy.render_node (guppy.min.js:1709)
    at Guppy.render (guppy.min.js:2161)
    at Guppy.mouse_move (guppy.min.js:1554)

Is there an existing way to clear the editor? If not a better way?
One more thing, when initially selecting the editor this error gets thrown

    Uncaught TypeError: Cannot read property 'length' of undefined
    at Function.Guppy.get_loc (guppy.min.js:1418)
    at Guppy.select_to (guppy.min.js:1481)
    at Guppy.mouse_move (guppy.min.js:1557)

Thanks in advance.

Would like to be able to control programatically what all keys do within an f-node. For example, would like to make it so that the keystrokes sin^2 result in something that looks like sin^2() rather than sin(()^2).

Want to be able to support at least the common versions of Chrome and Firefox, but Safari, Opera, and maybe some recent IE would be nice.

Simplest way to test is to go to https://guppy.js.org/test/ and see if any failures are reported. Beyond that, you can simply exercise the editor by using it on the demo page at https://guppy.js.org.

I tried to call insert_string() and it doesn't work properly. My call looks like this: Guppy.instances.my_instance.insert_string('x');.

There are 2 scenarios:

• when editor is focused and method is called, inserted string is displayed only after mouse is moved inside workspace.
• when editor is not focused and method is called, the following error occurs and inserted string is displayed only after Guppy container is clicked.

guppy.js:1477 Uncaught TypeError: Cannot read property 'current' of null(…)

	Guppy.check_for_symbol @ guppy.js:1477

	Guppy.insert_string @ guppy.js:1018

	(anonymous function) @ VM9271:1

There are also a lot of 'ASD' logs in console.

• Steps:
  • Enter "xyz" and move cursor to beginning
  • Drag mouse from between x and y to between y and z
  • Hit left arrow key
• Observed: Dragging selects just the y, then left arrow key moves cursor from before the y to before the x
• Expected: Dragging selects just the y, then left arrow key moves cursor from after the y to before the y

I think a blinking cursor gives nice feedback to users about where their cursor is. It might be very easy to implement this using CSS3 (http://stackoverflow.com/questions/16344354/how-to-make-blinking-flashing-text-with-css3). It would also be nice if the cursor is a little bit thicker and higher, I played around bit with the Guppy.kb.CONSTANTS, and some CSS rules, but it seems the current architecture doesn't allow much tweaking. If there are some extra CSS class selectors (e.g. a .cursor-active) I could add some custom styles (such as thickness, I'm okay with a cursor that displaces text, and I don't really like the negative margin to compensate). In fact a CSS3 transforms might even enable a cursor that has a fairly usual height without breaking anything.

P.S. I really like your project! I'm using the Dart language, and I'll try to create a Dart wrapper for this. The code seems very small so I could, theoretically, even write a Dart port! (Dart is really nice, much cleaner than JavaScript). I'm unfamiliar with the XSL stuff you are using, it seems a pretty uncommon technique (but powerful apparently).

Dear sir,
If you can make settings then please make settigs like smath or mathcad which is very simple to write math. (http://en.smath.info/)

If a guppy textarea is added dynamically to a page, it steals the focus. This probably shouldn't happen.

Steps performed:

• Enter xyz
• Hit left arrow
• Hit "Delete" key

Expected result:

Left with xy with the cursor to the right of the y.

Observed result:

The content remains as it was before the "Delete" key was pressed

Get the appropriate version of mousetrap from npm or bower rather than shipping mousetrap.js with guppy.

I have a use case where I type into an instance of Guppy, hit Ctrl+Enter, and then that instance of Guppy disappears and a new instance of Guppy appears. Typing into the second instance of Guppy produces a string of errors along the following lines:

Uncaught TypeError: Cannot read property 'length' of undefinedGuppy.sel_cut @ guppy.js:709
Guppy.key_down @ guppy.js:1159
guppy.js:1155 88
guppy.js:709 Uncaught TypeError: Cannot read property 'length' of undefined

I believe guppy still thinks I'm holding down the Ctrl key, when I'm no longer doing so.

Would it be possible to show a red cursor (or some kind of "you can type here" indication) when the guppy div is activated? At the moment it's unclear that the div has been focused on.

Want to be able to have the editor display some text when both inactive and blank (e.g. to tell the user they can click on it to start typing maths).

We would like a way to import existing LaTeX into the editor. Ideally, this mechanism would allow pasting in of LaTeX to the editor and auto-import that, but there are problems to be solved in resolving ambiguities, e.g. is \frac{dy}{dx} a derivative or a fraction.

Right now we use a manual mapping of keycodes to keys. This works on my browser on my computer, but may or may not do elsewhere. Better to use some keyboard input normalising library if possible.

When selecting the editor in mobile devices, the keyboard doesn't get opened. I tried it on different browsers in Linux and Windows. I also tried it on Safari for iOS. It doesn't seem to trigger on any of those.

Thanks.

Having to press right arrow to get out of exponents, say, is a substantial hand movement and makes for kind of an annoying interface

Is there a matrix support?

Make it possible that it can be specified what cursor is displayed in the blank after, e.g. if x^ or sin is typed. If no cursor is specified, use the vertical bar cursor as default (rather than the current red [?]).

Steps performed:

1. Enter AAAdefi1[right]2[right]x[right]x[right]AAAsinx[right]AAA.
2. Move cursor to beginning.
3. Select from beginning to just before Asin(x).
4. Select one more to the right so that selection is now from beginning to just before sin(x).

Observed: The sin(x) shifts to the left between steps 3 and 4.

Expected: The sin(x) remains in the same place on screen through steps 2-4.

Textareas and input fields in HTML have visual affordances that make them look editable. It would be nice to add these (borders, shading, etc.) to Guppy, so that it's visually clear that it's something the user should type into.

Steps performed:

• Enter 1+cosx
• Press left arrow twice

Observed:
Equation to the right of the cursor shifts a pixel or two to the right

Expected:
Equation does not change appearance at all except for position of cursor

Steps performed:

• Enter sin(x)+pi+cos(x).
• Select pi.
• Enter C-x to cut.

Observed:

pi is removed, leaving sin(x)cos(x)++ with cursor between the +s, and left arrow does not bring cursor into the cos(x).

Expected:

pi is removed, leaving sin(x)++cos(x).

Hello daniel,

I was wondering if you needed any help maintaining this project,
It looks like it has a tonne of potential, and I'd love to help out and get it kicking again :)

On the page at https://daniel3735928559.github.io/guppy/

When trying to type an expression such as "a < b", the "<" will not be shown and an error is produced in console:

Uncaught TypeError: Cannot read property 'type' of undefined
at Guppy.insert_symbol (guppy.js:958)

It seems like there is an "angle" defined here: https://github.com/daniel3735928559/guppy/blob/master/src/guppy.js#L1756

But no corresponding entry in symbols.json?

I using virtual keyboard for input character.
same as here: https://github.com/Mottie/Keyboard.
The Guppy can work with this virtual keyboard?

Make it possible to define symbols that include arguments of type "list" or "matrix", such as:

    "mat":
    {"output":{
        "latex":"\\left(\\begin{matrix}{$1}\\end{matrix}\\right)",
	"text":"matrix({$1})"},
     "current":0,
     "type":"matrix",
     "attrs":{
         "type":["matrix"],
         "separator":[{"latex":[" & ", "\\\n"], "text":[",",";"]}],
	 "name":["element"]}
    },
        
    "vec":
    {"output":{
        "latex":"\langle {$1} \rangle",
	"text":"vec({$1})"},
     "current":0,
     "type":"vector",
     "attrs":{
         "type":["list"],
         "separator":[{"latex":",", "text":","}],
	 "name":["element"]}
    },

In this case, when editing a vector, the it will start out looking like:

<[?]>

That is, a vector with a single entry. When in the blank, we can use C-right to add an element to the right of it, giving <[?], [?]>. We could also use C-left to add an entry to the left, and C-del or C-backspace to remove an entry.

Likewise, for matrices, C-up adds a row above, C-down adds a row below, C-right adds a column to the right, C-left adds a column to the left, C-backspace or C-delete deletes the current row, and C-S-backapce/del deletes the current column.

Guppy emits a number to the console log after every keystroke, which is pretty noisy. Would it be possible for it not to do this by default?

It would be nice to be able to use "logp" as the shortcut for p-adic logarithm and not have this conflict with "log" for natural logarithm. One possible interface for this would be to have backslash open a box where you could type the name of an element (without auto-replacement) and then "enter" or "space" would insert the element in place of the box.

An alternative interface would be for there to be no autoreplacement, but space would trigger the replacement code that currently runs after every character insertion.

• Steps:
  • Enter "xyz" and move cursor to beginning
  • Hold shift and click at end
• Observed: Cursror moves to end; nothing selected
• Expected: Cursor moves to end and selects the content from the beginning

Steps performed:

• Enter x^1/2 (1/2 all in the exponent)

Observed:

The 1/2 in the exponent is full-size, as it is when we enter the fraction 1/2 outside an exponent.

Expected:

The 1/2 should be smaller--perhaps even appearing with a forward-slash.

Notes:

• Similar behaviour is observed with integrals in exponents
• May require having a "small" version of the LaTeX rendering b-node in the XML

Typing '9' in a guppy textarea works if the 9 key is the one above and between the 'I' and the 'O' of a standard qwerty keyboard.

However, typing '9' (or anything) on the numeric keypad doesn't register anything, even though a keystroke is recorded in the console logs.

If you initiate the editor before the get_symbols is done it works fine, but if you wait for the get_symbols call to finish i get errors (tested in chrome and firefox)
See this fiddle:
https://jsfiddle.net/Timlessonup/9mngc9gs/

BTW, the get_symbols callback is never called.

Thank you.

Would like typing x ^ BACKSPACE to leave us with just x, rather than with x^ with the cursor by the x. Likewise, if the cursor is just before the x^2 in sin(x^2), would like backspace to delete the sin and leave the x^2, rather than deleting the whole thing as it currently does.

One possible implementation is that symbols have a "delete" entry in "attrs", which specifies which child should be used when backspace is pressed at the start of that child.

We want to include the option for the editor to come with buttons that users can click to insert any of the available symbols. These buttons should be generated from the loaded symbols. The symbols should have some metadata that allows the corresponding buttons to be sensibly grouped.

Encapsulate the stuff there or perhaps move to guppy.js

On Chrome, we have been seeing some issues with using guppy: the textarea appears, but clicking to it shows the red "[?]" and typing further does not do anything. This is not always reproducible but happens with non-negligible frequency. After a while, I managed to reproduce this locally with v1.0.0 as shown in the screenshot below.

The problematic line in question is actually line 268 of guppy.js (I added some console log statements in the screenshot below). It arises in the get_loc() function, when guppy is trying to find a bounding client rect. I logged the values of g, g.editor, and bb, and in the Chrome dev tools I found that when I expand the first g.editor there's nothing inside the katex span. I'm not sure if that span is being picked up from the subsequent console logs, though (since get_loc() keeps getting called and all the logged stuff looks correct in the subsequent calls).

Please let me know if you need more info (though note that this bug only happens sometimes, and is quite hard to reproduce reliably). Also, would it be possible to make this somehow fail-safe, so that a bad call to get_loc() doesn't crash the whole thing?

I assigned my instance a ready_callback as follows:

      guppyInstance.ready_callback = function() {
        console.log('ready');
      };

However, 'ready' is never printed to the terminal. It is possible to type into the instance and focus it, though.

Steps performed:

• Enter 2^pi
• Press backspace

Observed:
Cursor moves to just before pi. Content of editor unchanged

Expected:
Pi should get deleted

Pull in KaTeX/KaTeX@9d3cdf6 or so to get the fix for KaTeX/KaTeX#533.

Is there any way I could type normal text into editor?