@fileverse-dev/fortune-react 1.1.53 → 1.1.54-patch-1

package/es/components/SheetOverlay/InputBox.js

@@ -16,39 +16,39 @@ import ContentEditable from "./ContentEditable";
 import FormulaSearch from "./FormulaSearch";
 import FormulaHint from "./FormulaHint";
 import usePrevious from "../../hooks/usePrevious";
-import { moveCursorToEnd, isLetterNumberPattern, removeLastSpan, incrementColumn, decrementColumn, incrementRow, decrementRow } from "./helper";
+import { moveCursorToEnd, getCursorPosition, isLetterNumberPattern, removeLastSpan, incrementColumn, decrementColumn, incrementRow, decrementRow } from "./helper";
 var InputBox = function InputBox() {
-  var _a, _b, _c, _d, _e, _f;
-  var _g = useContext(WorkbookContext),
-    context = _g.context,
-    setContext = _g.setContext,
-    refs = _g.refs;
+  var _a, _b, _c, _d, _e, _f, _g;
+  var _h = useContext(WorkbookContext),
+    context = _h.context,
+    setContext = _h.setContext,
+    refs = _h.refs;
   var inputRef = useRef(null);
   var lastKeyDownEventRef = useRef(null);
   var prevCellUpdate = usePrevious(context.luckysheetCellUpdate);
   var prevSheetId = usePrevious(context.currentSheetId);
-  var _h = useState(false),
-    isHidenRC = _h[0],
-    setIsHidenRC = _h[1];
   var _j = useState(false),
-    isInputBoxActive = _j[0],
-    setIsInputBoxActive = _j[1];
-  var _k = useState(""),
-    activeCell = _k[0],
-    setActiveCell = _k[1];
+    isHidenRC = _j[0],
+    setIsHidenRC = _j[1];
+  var _k = useState(false),
+    isInputBoxActive = _k[0],
+    setIsInputBoxActive = _k[1];
   var _l = useState(""),
-    activeRefCell = _l[0],
-    setActiveRefCell = _l[1];
-  var _m = useState({
+    activeCell = _l[0],
+    setActiveCell = _l[1];
+  var _m = useState(""),
+    activeRefCell = _m[0],
+    setActiveRefCell = _m[1];
+  var _o = useState({
       left: 0,
       top: 0
     }),
-    frozenPosition = _m[0],
-    setFrozenPosition = _m[1];
+    frozenPosition = _o[0],
+    setFrozenPosition = _o[1];
   var firstSelection = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0];
-  var _o = useState({}),
-    firstSelectionActiveCell = _o[0],
-    setFirstSelectionActiveCell = _o[1];
+  var _p = useState({}),
+    firstSelectionActiveCell = _p[0],
+    setFirstSelectionActiveCell = _p[1];
   var row_index = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.row_focus;
   var col_index = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.column_focus;
   var preText = useRef("");
@@ -67,7 +67,7 @@ var InputBox = function InputBox() {
       return style;
     }
     return {};
-  }, [context.luckysheetfile, context.currentSheetId, context.luckysheetCellUpdate, firstSelectionActiveCell]);
+  }, [context.luckysheetfile, context.currentSheetId, context.luckysheetCellUpdate, (_b = context === null || context === void 0 ? void 0 : context.luckysheetCellUpdate) === null || _b === void 0 ? void 0 : _b.length, firstSelectionActiveCell]);
   useLayoutEffect(function () {
     var _a;
     if (!context.allowEdit) {
@@ -131,7 +131,7 @@ var InputBox = function InputBox() {
     if (!firstSelection || ((_a = context.rangeDialog) === null || _a === void 0 ? void 0 : _a.show) || _.isEmpty(context.luckysheetCellUpdate)) {
       setIsInputBoxActive(false);
     }
-  }, [firstSelection, (_b = context.rangeDialog) === null || _b === void 0 ? void 0 : _b.show, context.luckysheetCellUpdate]);
+  }, [firstSelection, (_c = context.rangeDialog) === null || _c === void 0 ? void 0 : _c.show, context.luckysheetCellUpdate]);
   var getActiveFormula = useCallback(function () {
     return document.querySelector(".luckysheet-formula-search-item-active");
   }, []);
@@ -141,6 +141,11 @@ var InputBox = function InputBox() {
       var ht = "<span dir=\"auto\" class=\"luckysheet-formula-text-color\">=</span><span dir=\"auto\" class=\"luckysheet-formula-text-func\">".concat(formulaName, "</span><span dir=\"auto\" class=\"luckysheet-formula-text-lpar\">(</span>");
       inputRef.current.innerHTML = ht;
       moveCursorToEnd(inputRef.current);
+      setContext(function (draftCtx) {
+        draftCtx.functionCandidates = [];
+        draftCtx.defaultCandidates = [];
+        draftCtx.functionHint = formulaName;
+      });
       return;
     }
     var textEditor = document.getElementById("luckysheet-rich-text-editor");
@@ -215,6 +220,11 @@ var InputBox = function InputBox() {
     lastKeyDownEventRef.current = new KeyboardEvent(e.type, e.nativeEvent);
     preText.current = inputRef.current.innerText;
     var allowListNavigation = true;
+    if ((e.key === "Delete" || e.key === "Backspace") && getCursorPosition(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current.innerText.length)) {
+      setTimeout(function () {
+        moveCursorToEnd(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current);
+      }, 5);
+    }
     var refCell = placeRef.current;
     if (e.key === "ArrowUp") {
       refCell = decrementRow(placeRef.current);
@@ -225,7 +235,7 @@ var InputBox = function InputBox() {
     } else if (e.key === "ArrowRight") {
       refCell = incrementColumn(placeRef.current);
     }
-    if (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight") {
+    if ((e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight") && !(getCursorPosition(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) !== (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current.innerText.length) && e.key === "ArrowRight")) {
       var parser = new DOMParser();
       var doc = parser.parseFromString("<div>".concat((_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.innerHTML, "</div>"), "text/html");
       var spans = doc.querySelectorAll("span");
@@ -362,7 +372,7 @@ var InputBox = function InputBox() {
       zIndex: _.isEmpty(context.luckysheetCellUpdate) ? -1 : 19,
       display: "block"
     };
-  }, [firstSelection, (_c = context.rangeDialog) === null || _c === void 0 ? void 0 : _c.show, context.luckysheetCellUpdate, refs.cellArea, isInputBoxActive, frozenPosition, context.scrollLeft, context.scrollTop]);
+  }, [firstSelection, (_d = context.rangeDialog) === null || _d === void 0 ? void 0 : _d.show, context.luckysheetCellUpdate, refs.cellArea, isInputBoxActive, frozenPosition, context.scrollLeft, context.scrollTop]);
   useEffect(function () {
     var _a;
     if (firstSelection && !((_a = context.rangeDialog) === null || _a === void 0 ? void 0 : _a.show) && !isInputBoxActive && !_.isEmpty(context.luckysheetCellUpdate)) {
@@ -378,7 +388,7 @@ var InputBox = function InputBox() {
         setIsInputBoxActive(true);
       }
     }
-  }, [firstSelection, (_d = context.rangeDialog) === null || _d === void 0 ? void 0 : _d.show, context.luckysheetCellUpdate, isInputBoxActive, context.scrollLeft, context.scrollTop, refs.cellArea]);
+  }, [firstSelection, (_e = context.rangeDialog) === null || _e === void 0 ? void 0 : _e.show, context.luckysheetCellUpdate, isInputBoxActive, context.scrollLeft, context.scrollTop, refs.cellArea]);
   var getAddressIndicatorPosition = useCallback(function () {
     var _a;
     if (!firstSelection || ((_a = context.rangeDialog) === null || _a === void 0 ? void 0 : _a.show)) {
@@ -391,7 +401,7 @@ var InputBox = function InputBox() {
       left: "0",
       display: "block"
     };
-  }, [firstSelection, (_e = context.rangeDialog) === null || _e === void 0 ? void 0 : _e.show]);
+  }, [firstSelection, (_f = context.rangeDialog) === null || _f === void 0 ? void 0 : _f.show]);
   var getCellAddress = useCallback(function () {
     if (!firstSelection) return "";
     var rowIndex = firstSelection.row_focus || 0;
@@ -424,7 +434,7 @@ var InputBox = function InputBox() {
     onMouseUp: function onMouseUp(e) {
       return e.stopPropagation();
     }
-  }, firstSelection && !((_f = context.rangeDialog) === null || _f === void 0 ? void 0 : _f.show) && (/*#__PURE__*/React.createElement("div", {
+  }, firstSelection && !((_g = context.rangeDialog) === null || _g === void 0 ? void 0 : _g.show) && (/*#__PURE__*/React.createElement("div", {
     className: "luckysheet-cell-address-indicator",
     style: getAddressIndicatorPosition()
   }, wraperGetCell())), /*#__PURE__*/React.createElement("div", {

package/es/components/SheetOverlay/helper.d.ts

@@ -1,4 +1,5 @@
 export declare function moveCursorToEnd(editableDiv: HTMLDivElement): void;
+export declare function getCursorPosition(editableDiv: HTMLDivElement): number;
 export declare function isLetterNumberPattern(str: string): boolean;
 export declare function removeLastSpan(htmlString: string): string;
 export declare function incrementColumn(cell: string): string;

package/es/components/SheetOverlay/helper.js

@@ -9,6 +9,15 @@ export function moveCursorToEnd(editableDiv) {
     selection.addRange(range);
   }
 }
+export function getCursorPosition(editableDiv) {
+  var selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) return 0;
+  var range = selection.getRangeAt(0);
+  var preRange = range.cloneRange();
+  preRange.selectNodeContents(editableDiv);
+  preRange.setEnd(range.endContainer, range.endOffset);
+  return preRange.toString().length;
+}
 export function isLetterNumberPattern(str) {
   var regex = /^[a-zA-Z]+\d+$/;
   return regex.test(str);

package/lib/components/SheetOverlay/InputBox.js

@@ -27,37 +27,37 @@ var __assign = void 0 && (void 0).__assign || function () {
   return __assign.apply(this, arguments);
 };
 var InputBox = function InputBox() {
-  var _a, _b, _c, _d, _e, _f;
-  var _g = (0, _react.useContext)(_context.default),
-    context = _g.context,
-    setContext = _g.setContext,
-    refs = _g.refs;
+  var _a, _b, _c, _d, _e, _f, _g;
+  var _h = (0, _react.useContext)(_context.default),
+    context = _h.context,
+    setContext = _h.setContext,
+    refs = _h.refs;
   var inputRef = (0, _react.useRef)(null);
   var lastKeyDownEventRef = (0, _react.useRef)(null);
   var prevCellUpdate = (0, _usePrevious.default)(context.luckysheetCellUpdate);
   var prevSheetId = (0, _usePrevious.default)(context.currentSheetId);
-  var _h = (0, _react.useState)(false),
-    isHidenRC = _h[0],
-    setIsHidenRC = _h[1];
   var _j = (0, _react.useState)(false),
-    isInputBoxActive = _j[0],
-    setIsInputBoxActive = _j[1];
-  var _k = (0, _react.useState)(""),
-    activeCell = _k[0],
-    setActiveCell = _k[1];
+    isHidenRC = _j[0],
+    setIsHidenRC = _j[1];
+  var _k = (0, _react.useState)(false),
+    isInputBoxActive = _k[0],
+    setIsInputBoxActive = _k[1];
   var _l = (0, _react.useState)(""),
-    activeRefCell = _l[0],
-    setActiveRefCell = _l[1];
-  var _m = (0, _react.useState)({
+    activeCell = _l[0],
+    setActiveCell = _l[1];
+  var _m = (0, _react.useState)(""),
+    activeRefCell = _m[0],
+    setActiveRefCell = _m[1];
+  var _o = (0, _react.useState)({
       left: 0,
       top: 0
     }),
-    frozenPosition = _m[0],
-    setFrozenPosition = _m[1];
+    frozenPosition = _o[0],
+    setFrozenPosition = _o[1];
   var firstSelection = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0];
-  var _o = (0, _react.useState)({}),
-    firstSelectionActiveCell = _o[0],
-    setFirstSelectionActiveCell = _o[1];
+  var _p = (0, _react.useState)({}),
+    firstSelectionActiveCell = _p[0],
+    setFirstSelectionActiveCell = _p[1];
   var row_index = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.row_focus;
   var col_index = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.column_focus;
   var preText = (0, _react.useRef)("");
@@ -76,7 +76,7 @@ var InputBox = function InputBox() {
       return style;
     }
     return {};
-  }, [context.luckysheetfile, context.currentSheetId, context.luckysheetCellUpdate, firstSelectionActiveCell]);
+  }, [context.luckysheetfile, context.currentSheetId, context.luckysheetCellUpdate, (_b = context === null || context === void 0 ? void 0 : context.luckysheetCellUpdate) === null || _b === void 0 ? void 0 : _b.length, firstSelectionActiveCell]);
   (0, _react.useLayoutEffect)(function () {
     var _a;
     if (!context.allowEdit) {
@@ -140,7 +140,7 @@ var InputBox = function InputBox() {
     if (!firstSelection || ((_a = context.rangeDialog) === null || _a === void 0 ? void 0 : _a.show) || _lodash.default.isEmpty(context.luckysheetCellUpdate)) {
       setIsInputBoxActive(false);
     }
-  }, [firstSelection, (_b = context.rangeDialog) === null || _b === void 0 ? void 0 : _b.show, context.luckysheetCellUpdate]);
+  }, [firstSelection, (_c = context.rangeDialog) === null || _c === void 0 ? void 0 : _c.show, context.luckysheetCellUpdate]);
   var getActiveFormula = (0, _react.useCallback)(function () {
     return document.querySelector(".luckysheet-formula-search-item-active");
   }, []);
@@ -150,6 +150,11 @@ var InputBox = function InputBox() {
       var ht = "<span dir=\"auto\" class=\"luckysheet-formula-text-color\">=</span><span dir=\"auto\" class=\"luckysheet-formula-text-func\">".concat(formulaName, "</span><span dir=\"auto\" class=\"luckysheet-formula-text-lpar\">(</span>");
       inputRef.current.innerHTML = ht;
       (0, _helper.moveCursorToEnd)(inputRef.current);
+      setContext(function (draftCtx) {
+        draftCtx.functionCandidates = [];
+        draftCtx.defaultCandidates = [];
+        draftCtx.functionHint = formulaName;
+      });
       return;
     }
     var textEditor = document.getElementById("luckysheet-rich-text-editor");
@@ -224,6 +229,11 @@ var InputBox = function InputBox() {
     lastKeyDownEventRef.current = new KeyboardEvent(e.type, e.nativeEvent);
     preText.current = inputRef.current.innerText;
     var allowListNavigation = true;
+    if ((e.key === "Delete" || e.key === "Backspace") && (0, _helper.getCursorPosition)(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current.innerText.length)) {
+      setTimeout(function () {
+        (0, _helper.moveCursorToEnd)(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current);
+      }, 5);
+    }
     var refCell = placeRef.current;
     if (e.key === "ArrowUp") {
       refCell = (0, _helper.decrementRow)(placeRef.current);
@@ -234,7 +244,7 @@ var InputBox = function InputBox() {
     } else if (e.key === "ArrowRight") {
       refCell = (0, _helper.incrementColumn)(placeRef.current);
     }
-    if (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight") {
+    if ((e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight") && !((0, _helper.getCursorPosition)(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) !== (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current.innerText.length) && e.key === "ArrowRight")) {
       var parser = new DOMParser();
       var doc = parser.parseFromString("<div>".concat((_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.innerHTML, "</div>"), "text/html");
       var spans = doc.querySelectorAll("span");
@@ -371,7 +381,7 @@ var InputBox = function InputBox() {
       zIndex: _lodash.default.isEmpty(context.luckysheetCellUpdate) ? -1 : 19,
       display: "block"
     };
-  }, [firstSelection, (_c = context.rangeDialog) === null || _c === void 0 ? void 0 : _c.show, context.luckysheetCellUpdate, refs.cellArea, isInputBoxActive, frozenPosition, context.scrollLeft, context.scrollTop]);
+  }, [firstSelection, (_d = context.rangeDialog) === null || _d === void 0 ? void 0 : _d.show, context.luckysheetCellUpdate, refs.cellArea, isInputBoxActive, frozenPosition, context.scrollLeft, context.scrollTop]);
   (0, _react.useEffect)(function () {
     var _a;
     if (firstSelection && !((_a = context.rangeDialog) === null || _a === void 0 ? void 0 : _a.show) && !isInputBoxActive && !_lodash.default.isEmpty(context.luckysheetCellUpdate)) {
@@ -387,7 +397,7 @@ var InputBox = function InputBox() {
         setIsInputBoxActive(true);
       }
     }
-  }, [firstSelection, (_d = context.rangeDialog) === null || _d === void 0 ? void 0 : _d.show, context.luckysheetCellUpdate, isInputBoxActive, context.scrollLeft, context.scrollTop, refs.cellArea]);
+  }, [firstSelection, (_e = context.rangeDialog) === null || _e === void 0 ? void 0 : _e.show, context.luckysheetCellUpdate, isInputBoxActive, context.scrollLeft, context.scrollTop, refs.cellArea]);
   var getAddressIndicatorPosition = (0, _react.useCallback)(function () {
     var _a;
     if (!firstSelection || ((_a = context.rangeDialog) === null || _a === void 0 ? void 0 : _a.show)) {
@@ -400,7 +410,7 @@ var InputBox = function InputBox() {
       left: "0",
       display: "block"
     };
-  }, [firstSelection, (_e = context.rangeDialog) === null || _e === void 0 ? void 0 : _e.show]);
+  }, [firstSelection, (_f = context.rangeDialog) === null || _f === void 0 ? void 0 : _f.show]);
   var getCellAddress = (0, _react.useCallback)(function () {
     if (!firstSelection) return "";
     var rowIndex = firstSelection.row_focus || 0;
@@ -433,7 +443,7 @@ var InputBox = function InputBox() {
     onMouseUp: function onMouseUp(e) {
       return e.stopPropagation();
     }
-  }, firstSelection && !((_f = context.rangeDialog) === null || _f === void 0 ? void 0 : _f.show) && (/*#__PURE__*/_react.default.createElement("div", {
+  }, firstSelection && !((_g = context.rangeDialog) === null || _g === void 0 ? void 0 : _g.show) && (/*#__PURE__*/_react.default.createElement("div", {
     className: "luckysheet-cell-address-indicator",
     style: getAddressIndicatorPosition()
   }, wraperGetCell())), /*#__PURE__*/_react.default.createElement("div", {

package/lib/components/SheetOverlay/helper.d.ts

@@ -1,4 +1,5 @@
 export declare function moveCursorToEnd(editableDiv: HTMLDivElement): void;
+export declare function getCursorPosition(editableDiv: HTMLDivElement): number;
 export declare function isLetterNumberPattern(str: string): boolean;
 export declare function removeLastSpan(htmlString: string): string;
 export declare function incrementColumn(cell: string): string;

package/lib/components/SheetOverlay/helper.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.decrementColumn = decrementColumn;
 exports.decrementRow = decrementRow;
+exports.getCursorPosition = getCursorPosition;
 exports.incrementColumn = incrementColumn;
 exports.incrementRow = incrementRow;
 exports.isLetterNumberPattern = isLetterNumberPattern;
@@ -21,6 +22,15 @@ function moveCursorToEnd(editableDiv) {
     selection.addRange(range);
   }
 }
+function getCursorPosition(editableDiv) {
+  var selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) return 0;
+  var range = selection.getRangeAt(0);
+  var preRange = range.cloneRange();
+  preRange.selectNodeContents(editableDiv);
+  preRange.setEnd(range.endContainer, range.endOffset);
+  return preRange.toString().length;
+}
 function isLetterNumberPattern(str) {
   var regex = /^[a-zA-Z]+\d+$/;
   return regex.test(str);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fileverse-dev/fortune-react",
-  "version": "1.1.53",
+  "version": "1.1.54-patch-1",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "module": "es/index.js",
@@ -16,7 +16,7 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@fileverse-dev/fortune-core": "1.1.53",
+    "@fileverse-dev/fortune-core": "^1.1.54",
     "@fileverse/ui": "^4.1.7-patch-21",
     "@tippyjs/react": "^4.2.6",
     "@types/regenerator-runtime": "^0.13.6",