cannot add key map for Ctrl-H on chrome

1

see demo https://plnkr.co/edit/MgmEJk1QaIEqI9M8R0fF

  	cm.addKeyMap({
  		'Ctrl-h': cm => { cm.execCommand('replace'); },
  	});

but hitting ctrl+h opens a new tab with the browser history.

How can I bind ctrl-h to replace ?

(it is in general possible to capture this key see http://stackoverflow.com/a/34876153/460084)

2

Chrome won’t let you. The same goes for some other keys, like Ctrl-W.

3

but it does … see http://stackoverflow.com/a/34876153/460084

4

Ah, you’re right, and CodeMirror can bind it just fine, you just have to spell it Ctrl-H (note capital H).

5

works ! great :slight_smile:

6

Hi Marijn,

I’m trying to use the gutter markers to make “shortcuts” from Ctrl-1 to Ctrl-0 so people can add 10 shortcut keys. I’m doing this from code

var bookmarks = 0;

function makeMarker(info, cm) {

if (bookmarks === 10)
    return null;

bookmarks += 1;

const key = `Ctrl-${bookmarks}`;
console.log(key);
const map = {
    key: function(cm) {
        console.log("pressed " + key);
        cm.setCursor(info.line, 0);
    }
};

cm.addKeyMap(map);
const marker = document.createElement("div");
console.log(info.line);
marker.innerHTML = "<img src=\"/images/scripteditor/bookmark.png\" style=\"margin-left: -15px;\"/>";
return marker;

}

But for some reason the key combination is not recognized when I do it like const key = Ctrl-${bookmarks};

When I make it hard coded like this “Ctrl-1” then it works… is there a reason why I can’t generate a string in code and use this as a keymap… or am I doing something wrong here?

7

This is what I have made and I have no idea why it wont work when getting the key map string from an array:

var shortcutKeys = ["Ctrl-0", "Ctrl-9", "Ctrl-8", "Ctrl-7", "Ctrl-6", "Ctrl-5", "Ctrl-4", "Ctrl-3", "Ctrl-2", "Ctrl-1"];
var shortcutMaps = [];

function createMarker(info, cm) {

    if (shortcutKeys.length === 0)
        return null;

    const key = shortcutKeys.pop();
    console.log(key);
    const map = {
        key: function(cm) {
            console.log("pressed " + key);
            cm.setCursor(info.line, 0);
        }
    };

    shortcutMaps.push(map);

    cm.addKeyMap(map);
    const marker = document.createElement("div");
    marker.style.width = "10px";
    marker.style.height = "16px";
    marker.style.backgroundImage = "url('images/scripteditor/bookmark.png')";
    marker.style.marginTop = "2px";
    marker.style.marginLeft = "-13px";
    marker.style.textAlign = "center";
    marker.id = key;
    const text = document.createElement("div");
    marker.append(text);
    text.style.fontSize = "11px";
    text.style.marginLeft = "1px";
    text.innerText = key.split("-")[1];
    return marker;
}

function removeMarker(info, cm) {

    const marker = info.gutterMarkers.breakpoints;
    const key = marker.id;
    cm.removeKeyMap(shortcutMaps.pop());
    shortcutKeys.push(key);
    return null;
}

....

            codeMirror.on("gutterClick", function(cm, n) {
                const info = cm.lineInfo(n);
                cm.setGutterMarker(n, "breakpoints", info.gutterMarkers ? removeMarker(info, cm) : createMarker(info, cm));
            });
8

Got is solved by doing this:

const map = {};
    map[key] = function(cm) {
        console.log("pressed " + key);
        cm.setCursor(info.line, 0);
    };

Instead of this

    const map = {
        key: function(cm) {
            console.log("pressed " + key);
            cm.setCursor(info.line, 0);
        }
    };

In the last example javascript literaly takes key as the name instead of the value that is in the var key.

So in the end this worked:

var shortcutKeys = ["Ctrl-0", "Ctrl-9", "Ctrl-8", "Ctrl-7", "Ctrl-6", "Ctrl-5", "Ctrl-4", "Ctrl-3", "Ctrl-2", "Ctrl-1"];
var shortcutMaps = [];

function createMarker(info, cm) {

    if (shortcutKeys.length === 0)
        return null;

    const key = shortcutKeys.pop();

    const map = {};
    map[key] = function(cm) {
        cm.setCursor(info.line, 0);
    };

    shortcutMaps.push(map);
    cm.addKeyMap(map);

    const marker = document.createElement("div");
    marker.style.width = "10px";
    marker.style.height = "16px";
    marker.style.backgroundImage = "url('images/scripteditor/bookmark.png')";
    marker.style.marginTop = "2px";
    marker.style.marginLeft = "-13px";
    marker.id = key;
    const text = document.createElement("div");
    marker.append(text);
    text.style.fontSize = "11px";
    text.style.marginLeft = "2px";
    text.innerText = key.split("-")[1];
    return marker;
}

function removeMarker(info, cm) {

    const marker = info.gutterMarkers.breakpoints;
    const key = marker.id;
    cm.removeKeyMap(shortcutMaps.pop());
    shortcutKeys.push(key);
    return null;
}

.....

            codeMirror.on("gutterClick", function(cm, n) {
                const info = cm.lineInfo(n);
                cm.setGutterMarker(n, "breakpoints", info.gutterMarkers ? removeMarker(info, cm) : createMarker(info, cm));