javascriptangularcodemirrorui-codemirror

Prevent code mirror copy on click


We are using Code Mirror in an angular web application. Currently when the user has highlighted a piece of text and later subsequently clicks on the highlighted portion, Code Mirror places a copy of the selected area into the clipboard. This is not the behaviour we want. We would like the normal behaviour of just un-selecting the text.

I have tried to catch mouse click events and return false or set codemirrorIgnore to true and it didn't work. I also tried to redefine the key map for "LeftDown" but I could not find information on where the existing action names are defined.

Can anyone help?

Here is the code I tried for changing the KeyMap:

$scope.editorOptions = {
    lineWrapping: true,
    lineNumbers: true,
    smartIndent: true,
    autoCloseTags: true,
    cursorScrollMargin: 25,
    styleActiveLine: true,
    mode: "text/html",
    theme: "default",
    matchBrackets: true,
    matchTags: {
        bothTags: true
    },
    extraKeys: {
        "F11": function (cm) {
            cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        },
        "Esc": function (cm) {
            if (cm.getOption("fullScreen")) {
                cm.setOption("fullScreen", false);
            }
        },
        //Don't know where "autocomple", "findPersistent" are defined so I can see what is available
        "LeftClick": "LeftClick",
        "Ctrl-Space": "autocomplete",
        "Alt-B": "findPersistent",
        "Ctrl-J": "toMatchingTag"
    },
    viewportMargin: 10,
    textWrapping: true
};

I also tried to use an onload function using ui-codemirror="{ onLoad : codemirrorLoaded }" and the following:

$scope.codemirrorLoaded = function(_editor) {
    _editor.on("mouseDown", function(cm, event) {
        cm.codemirrorIgnore = true;
        //also tried return false
    }
};

Returning false did nothing and setting codemirrorIgnore to true prevented the left click from doing anything at all.


Solution

  • I discovered that this is a bug with Code Mirror. Here is the first bit of Code Mirror code:

    if (cm.options.dragDrop && dragAndDrop && !cm.isReadOnly() &&
        type == "single" && (contained = sel.contains(start)) > -1 &&
        (cmp((contained = sel.ranges[contained]).from(), start) < 0 || start.xRel > 0) &&
        (cmp(contained.to(), start) > 0 || start.xRel < 0))
      leftButtonStartDrag(cm, e, start, modifier);
    else
      leftButtonSelect(cm, e, start, type, modifier);
    

    According to this if drag and drop is enabled, which it is by default, then dragging will start. But in the next bit of code:

    // Start a text drag. When it ends, see if any dragging actually
    // happen, and treat as a click if it didn't.
    function leftButtonStartDrag(cm, e, start, modifier) {
    

    Treat the click as a click if there was no drag. I haven't looked closer at the code to see if I can fix it but since dragging uses the clipboard, the clipboard is already erased and replaced with the selected text.

    So to avoid this happing you need to disable drag and drop.