jspreadsheet / jspreadsheet/ce

Custom-Editor: minor request + revisit old bug

Open
#1,648 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
7.2k
Forks
890
PR merge metrics
No merged PRs in 30d

Description

Hello,

First, thanks for developing and maintaining jspreadsheet, it is very awesome and extremely useful.

I'm working on integrating jspreadsheet with select2 as a custom-editor (will publish working code soon).

  1. I'd like to suggest/request a minor improvement regarding custom-editors: the ability to pass the DOM/JS event that triggered the custom-editor's openEditor function. This will enable making the user-experience much smoother. For example, if a user pressed "BACKSPACE", I can delete the cell's content instead of opening the custom-editor UI.

I have only limited understanding of jspreadsheet internals, but code changes seem minimal and not disruptive. I attach them here as a diff to index.js, but I understand that it could require changing other files.

diff --git a/src/index.js b/src/index.js
index c49572b..8e6030c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -7583,18 +7583,18 @@ if (! formula && typeof(require) === 'function') {
                                             jexcel.current.setCheckRadioValue();
                                         } else {
                                             // Start edition
-                                            jexcel.current.openEditor(jexcel.current.records[rowId][columnId], true);
+                                            jexcel.current.openEditor(jexcel.current.records[rowId][columnId], true, e);
                                         }
                                     } else if (e.keyCode == 113) {
                                         // Start edition with current content F2
-                                        jexcel.current.openEditor(jexcel.current.records[rowId][columnId], false);
+                                        jexcel.current.openEditor(jexcel.current.records[rowId][columnId], false, e);
                                     } else if ((e.keyCode == 8) ||
                                                (e.keyCode >= 48 && e.keyCode <= 57) ||
                                                (e.keyCode >= 96 && e.keyCode <= 111) ||
                                                (e.keyCode >= 187 && e.keyCode <= 190) ||
                                                ((String.fromCharCode(e.keyCode) == e.key || String.fromCharCode(e.keyCode).toLowerCase() == e.key.toLowerCase()) && jexcel.validLetter(String.fromCharCode(e.keyCode)))) {
                                         // Start edition
-                                        jexcel.current.openEditor(jexcel.current.records[rowId][columnId], true);
+                                        jexcel.current.openEditor(jexcel.current.records[rowId][columnId], true, e);
                                         // Prevent entries in the calendar
                                         if (jexcel.current.options.columns[columnId].type == 'calendar') {
                                             e.preventDefault();
@@ -8222,7 +8222,7 @@ if (! formula && typeof(require) === 'function') {
                         }
                         var cell = getCellCoords(e.target);
                         if (cell && cell.classList.contains('highlight')) {
-                            jexcel.current.openEditor(cell);
+                            jexcel.current.openEditor(cell, false, e);
                         }
                     }
                 }

With these changes, the custom-editor function becomes:

   openEditor : function(cell, el, empty, event) {
      ...
    }

And then the event parameter can indicate why triggered opening the custom-editor.

  1. There's an old closed issue (#990 ) that relates to custom-editors, and I think I encountered the same issue: getValue and setValue are never called, even in the latest git version. A different function updateCell does get called, but it is undocumented.

An example of both of these issues is here:
https://jsfiddle.net/1egbq690/2/

I'm happy to provide further details if needed.

Thanks!
gordon

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in src/index.js by tracing the openEditor calls shown in the issue and inspect the custom-editor lifecycle around getValue, setValue, and updateCell. Reproduce both behaviors with the linked jsfiddle; done means the triggering event is available to custom editors and the documented value callbacks behave as expected.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.