fabric.js get "edit" state of IText object

Question

In fabric.js I want to add some key interaction on my canvas. If an IText object is selected I want it to be deleted if I hit the "del" key. I accomplished this by:

$('html').keyup(function(e){
  if (e.keyCode == 46) {
    obj = canvas.getActiveObject();
    canvas.remove(obj);
  }
});

Now the problem is that when I am in the middle of editing the IText and hit the DEL key, the object is obviously also removed. I want to prevent this by something like this:

$('html').keyup(function(e){

  canvas.observe('text:editing:entered', editing = true);

  console.log(editing);

  if (editing == false) {
    if (e.keyCode == 46) {
      removeObject();
    }
  };

});

= only remove the object if I am not in the middle of editing the IText

I found this fire event "editing:entered" here: http://fabricjs.com/docs/fabric.IText.html So I try to catch this with the above code. However, it looks like this event already fires when I select the text and did not really start to edit it.

Any ideas how to solve this and check if I am really just editing the IText?

Answer 1

IText object has a property called isEditing which can be used to check if text in the object is being edited or not.

To achieve what you said, all you have to do is check this property before removing the object from the canvas. The code looks like this:

document.onkeyup = function (e) {
    if (e.keyCode == 46) {
        obj = canvas.getActiveObject();
        if (!obj.isEditing) {
            canvas.remove(obj);
        }
    }
};

Here's the fiddle : http://jsfiddle.net/bdgnrnxf/1/ and link to the documentation.