add keyboard short-cut within a code cell during editing

[ttimbers]

I want to be able to add a keyboard short-cut within a code cell during editing. Specifically, I want to recreate RStudio's 'alt--' short-cut that results in an in-place text insertion of '<-'.

I have been playing around with using %% javascript magic to do this. With the code below I can manage to get <- output to the output area, but there are two problem with this:

• I have to have clicked on the outside of the cell (I cannot have my cursor inside the code part of the cell)
• The text shows up in the output area, not the code cell (this is where I want it to be)

current code:

%%javascript

Jupyter.keyboard_manager.command_shortcuts.add_shortcut('alt--', {
    help : 'add assignment symbol',
    help_index : 'zz',
    handler : function (event) {
        element.text('<-');
        return false;
    }}
);

Any help to point me in the direction of getting this working to further develop this feature would be greatly appreciated (the plan is to add the final working code to custom.js so it works in all my notebooks). Additionally, such a feature would be desired by any R user using Jupyter. Thanks!

[bkatiemills]

%%javascript

Jupyter.keyboard_manager.edit_shortcuts.add_shortcut('alt--', {
    help : 'add assignment symbol',
    help_index : 'zz',
    handler : function (event) {
        var target = Jupyter.notebook.get_selected_cell()
        var cursor = target.code_mirror.getCursor()
        var before = target.get_pre_cursor()
        var after = target.get_post_cursor()
        target.set_text(before + '<-' + after)
        cursor.ch += 2
        target.code_mirror.setCursor(cursor)
        return false;
    }}
);

y/n?

[bkatiemills]

Note that bad things will happen if using this shortcut immediately before or after a linebreak. the get_pre_cursor and get_post_cursor methods seem to ignore the immediately adjacent newline character; the interested reader may be able to work around this, but this feels an awful lot like a bug IMO; for example, check the lengths of the strings returned by get_pre_cursor, get_post_cursor and get_text; the pre and post add up to the total if the cursor is not adjacent to a newline, but falls short by one if it is. Not sure if this is by design or not, but definitely not what I would have expected from these methods.

[ttimbers]

Thanks for this solution @BillMills! I agree that it works in the most common use case (assigning a variable), and so when using it like this, you do not run into the newline character issue. But the newline character issue is very weird, and I agree that this looks like a bug and not an intentional design feature of the method...

[ttimbers]

note - since magics don't work when running the R kernel in Jupyter, you have to wrap the above code in IRdisplay::display_javascript("some javascript code")

Working code in Jupyter using the R kernel looks like this (note - I tweaked the code to create a space before and after the assignment symbol - similar to what R Studio does):

IRdisplay::display_javascript("Jupyter.keyboard_manager.edit_shortcuts.add_shortcut('alt--', {
    help : 'add assignment symbol',
    help_index : 'zz',
    handler : function (event) {
        var target = Jupyter.notebook.get_selected_cell()
        var cursor = target.code_mirror.getCursor()
        var before = target.get_pre_cursor()
        var after = target.get_post_cursor()
        target.set_text(before + ' <- ' + after)
        cursor.ch += 4
        target.code_mirror.setCursor(cursor)
        return false;
    }}
);")

[ttimbers]

To get this feature in all notebooks, you need to add the following code to a file called custom.js whose path is ~/.jupyter/custom/custom.js:

$([IPython.events]).on("app_initialized.NotebookApp", function () {
  Jupyter.keyboard_manager.edit_shortcuts.add_shortcut('alt--', {
      help : 'add assignment symbol',
      help_index : 'zz',
      handler : function (event) {
          var target = Jupyter.notebook.get_selected_cell()
          var cursor = target.code_mirror.getCursor()
          var before = target.get_pre_cursor()
          var after = target.get_post_cursor()
          target.set_text(before + ' <- ' + after)
          cursor.ch += 4
          target.code_mirror.setCursor(cursor)
          return false;
      }}
  );
    return true;
});

essentially this is @BillMills solution wrapped in:

$([IPython.events]).on("app_initialized.NotebookApp", function () {
    <your code>

    return true;
});

[ttimbers]

@minrk @jdfreder @Carreau and @ellisonbg - can any of you comment on the bug identified by @BillMills in get_pre_cursor and get_post_cursor methods regarding their adjacency to line breaks? Specifically he has found that they seem to ignore the immediately adjacent newline character and this results in bad things happening if we use the shortcut we implemented immediately before or after a linebreak.

Since this shortcut would be WIDELY used by almost ALL R Jupyter users, I really think it would be worth our time to fix this upstream bug. Any thoughts/insights/fixes would be much appreciated!

[Carreau]

Hum, it seem like it would be possible, and likely less brittle to register a keyboard shortcut with codemirror directly instead of going through the jupyter keyboard manager.

Plus if you like to have that only on the R kernel, it should be possible to ship it with the R kernel itself using the kernel.js file that ship with the R kernel (if it ships one), so I guess that will likely interest @flying-sheep to ping on that and know if its worth including with the R kernel.

Something along the line of:

if (! doc.somethingSelected()){
    var cur = doc.getCursor()
    doc.replaceRange(' <- ', cur, cur, )
}

Will likely be more efficient, and less error prone, the question is how to propagate the keybinding directly to the code cells from configuration. I can try to have look, but maybe a bit later I need to finish a couple of things for this week-end.

This issue might have some extra hints about CodeMirror keymaps.

[flying-sheep]

indeed i am interested.

i condensed it to this and it works. will be in IRkernel as soon as i got something else in:

const extra_keys = {
    ['Alt--'](cm) {
        cm.replaceSelection(' <- ')
    }
}

define(['base/js/namespace'], jupyter => ({
    onload() {
        for (let cell of jupyter.notebook.get_cells()) {
            cell.code_mirror.setOption('extraKeys', extra_keys)
        }
    }
}))

[flying-sheep]

just one question: will the onload event fire for new cells? if not, what event will?

[flying-sheep]

it works! but badly, as the CodeMirror version is too old to know what a “word” in R is.

i need at least 5.13.0. when will notebook be upgraded to something above it?

[jasongrout]

It looks like the current notebook master has codemirror 5.14: https://github.com/jupyter/notebook/blob/85d7cfba224005d423ff27c0b8e961813ea5016b/bower.json#L8

[flying-sheep]

jup, just found it too! is the next release 5.0? if so: it got a huge heap of open bugs 😢

[flying-sheep]

@ttimbers once you update the IRkernel package and re-run installspec, you’ll have it 😄

i also added a F1 shortcut to get help for the word under the cursor: https://github.com/IRkernel/IRkernel/blob/4d4193ff2a041650b24364ecee1493ce595e1b5c/inst/kernelspec/kernel.js