可手动操作，自定义文本编辑器，复制/粘贴问题

Question

I have a table with two columns: name and code. I have created a simple custom editor for code column. The idea is, when user double clicks on the cell, the custom dialog with code editor opens. I have implemented it and posted the simplified example here:

Link to plunker

However, I have one issue with copy/paste functionality: if I use my editor, edit some code for the cell, press “Save”, the "code" column value seems to be correctly saved. But when I select this cell and press Ctrl+C, the value is not copied.

The question is: is it a bug in handsontable or I have just missed something, while implementing the custom editor? How should I change my custom editor to make the copy-paste functionality working properly.

The code of editor:

var ScriptEditor = Handsontable.editors.TextEditor.prototype.extend();

ScriptEditor.prototype.getValue = function () {
    return this.TEXTAREA.value;
};

ScriptEditor.prototype.setValue = function (value) {
    this.TEXTAREA.value = value;
};

ScriptEditor.prototype.open = function () {

    var self = this;

    this.instance.deselectCell();

    var value = self.instance.getDataAtCell(self.row, self.col);
    var decodedCode = decodeURI(value);

    var success = function (resultCode) {
        var encodedCode = encodeURI(resultCode);

        self.instance.setDataAtCell(self.row, self.col, encodedCode, 'edit');
        self.instance.selectCell(self.row, self.col);
    };

    openEditor(decodedCode)
            .then(success);

};

ScriptEditor.prototype.focus = function () {
    Handsontable.editors.TextEditor.prototype.focus.apply(this, arguments);
};

ScriptEditor.prototype.close = function () {

};


var openEditor = function (codeToEdit) {

    var deferred = $q.defer();

    var dialog = ngDialog.open({
        template: 'editorTemplate.htm',
        className: 'ngdialog-theme-default',
        controllerAs: "editor",
        controller: function () {
            var vm = this;
            vm.inputCode = codeToEdit;
            vm.submitChanges = function () {
                dialog.close();
                deferred.resolve(vm.inputCode);
            };
        }
    });

    return deferred.promise;
};

Specs: Angular version: 1.6.1 Handsontable version: 0.31.2 Chrome version: Version 58.0.3029.81

Answer 1

I have posted an issue on handsontable github repositiory and received there the answer. Link to issue: here

Solution: Like the member of handsontable team has suggested, in open function before opening my dialog I call this.instance.deselectCell(); . However, with this solution, the problem was, that if I press Enter my code editor dialog, not the new line is inserted, but the next cell in handsontable is selected. Then, I have wrappped the call in setTimeout() and it is worked.

Link to plunker: here

The working code is:

ScriptEditor.prototype.open = function () {

    var self = this;

    setTimeout(function () {
        self.instance.deselectCell();
    });

    var value = self.instance.getDataAtCell(self.row, self.col);
    var decodedCode = decodeURI(value);

    var success = function (resultCode) {
        var encodedCode = encodeURI(resultCode);
        self.instance.setDataAtCell(self.row, self.col, encodedCode, 'edit');
        self.instance.selectCell(self.row, self.col);
    };

    openEditor(decodedCode)
        .then(success);

};