@fileverse-dev/fortune-react 1.3.11-input-ref → 1.3.11-input-ref-1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/components/ContextMenu/index.js +1 -1
- package/es/components/FxEditor/index.js +190 -48
- package/es/components/SheetOverlay/InputBox.js +114 -59
- package/es/components/SheetOverlay/helper.d.ts +2 -0
- package/es/components/SheetOverlay/helper.js +43 -0
- package/es/components/SheetOverlay/index.css +1 -1
- package/es/components/Workbook/index.js +2 -2
- package/es/hooks/useFormulaEditorHistory.d.ts +24 -0
- package/es/hooks/useFormulaEditorHistory.js +119 -0
- package/es/hooks/useRerenderOnFormulaCaret.d.ts +2 -0
- package/es/hooks/useRerenderOnFormulaCaret.js +26 -0
- package/lib/components/ContextMenu/index.js +1 -1
- package/lib/components/FxEditor/index.js +188 -46
- package/lib/components/SheetOverlay/InputBox.js +112 -57
- package/lib/components/SheetOverlay/helper.d.ts +2 -0
- package/lib/components/SheetOverlay/helper.js +45 -0
- package/lib/components/SheetOverlay/index.css +1 -1
- package/lib/components/Workbook/index.js +2 -2
- package/lib/hooks/useFormulaEditorHistory.d.ts +24 -0
- package/lib/hooks/useFormulaEditorHistory.js +126 -0
- package/lib/hooks/useRerenderOnFormulaCaret.d.ts +2 -0
- package/lib/hooks/useRerenderOnFormulaCaret.js +32 -0
- package/package.json +2 -2
|
@@ -8,7 +8,7 @@ var __assign = this && this.__assign || function () {
|
|
|
8
8
|
};
|
|
9
9
|
return __assign.apply(this, arguments);
|
|
10
10
|
};
|
|
11
|
-
import { cancelNormalSelected, getCellValue, getInlineStringHTML, getStyleByCell, isInlineStringCell, moveToEnd, getFlowdata, handleFormulaInput, moveHighlightCell, escapeScriptTag, valueShowEs, createRangeHightlight, isShowHidenCR, israngeseleciton, escapeHTMLTag, isAllowEdit, indexToColumnChar, functionHTMLGenerate, handleBold, handleItalic, handleUnderline, handleStrikeThrough, getRangeRectsByCharacterOffset, rangeSetValue, getFormulaRangeIndexForKeyboardSync, createFormulaRangeSelect, seletedHighlistByindex, isFormulaReferenceInputMode, rangeHightlightselected } from "@fileverse-dev/fortune-core";
|
|
11
|
+
import { cancelNormalSelected, getCellValue, getInlineStringHTML, getStyleByCell, isInlineStringCell, moveToEnd, getFlowdata, handleFormulaInput, moveHighlightCell, escapeScriptTag, valueShowEs, createRangeHightlight, isShowHidenCR, israngeseleciton, escapeHTMLTag, isAllowEdit, indexToColumnChar, functionHTMLGenerate, handleBold, handleItalic, handleUnderline, handleStrikeThrough, getRangeRectsByCharacterOffset, rangeSetValue, getFormulaRangeIndexForKeyboardSync, getFormulaRangeIndexAtCaret, getFormulaEditorOwner, createFormulaRangeSelect, seletedHighlistByindex, isFormulaReferenceInputMode, isCaretAtValidFormulaRangeInsertionPoint, markRangeSelectionDirty, rangeHightlightselected, setFormulaEditorOwner } from "@fileverse-dev/fortune-core";
|
|
12
12
|
import React, { useContext, useEffect, useMemo, useRef, useCallback, useLayoutEffect, useState } from "react";
|
|
13
13
|
import _ from "lodash";
|
|
14
14
|
import { Tooltip } from "@fileverse/ui";
|
|
@@ -17,62 +17,70 @@ import ContentEditable from "./ContentEditable";
|
|
|
17
17
|
import FormulaSearch from "./FormulaSearch";
|
|
18
18
|
import FormulaHint from "./FormulaHint";
|
|
19
19
|
import usePrevious from "../../hooks/usePrevious";
|
|
20
|
-
import {
|
|
20
|
+
import { useFormulaEditorHistory } from "../../hooks/useFormulaEditorHistory";
|
|
21
|
+
import { useRerenderOnFormulaCaret } from "../../hooks/useRerenderOnFormulaCaret";
|
|
22
|
+
import { moveCursorToEnd, getCursorPosition, setCursorPosition, buildFormulaSuggestionText, getFunctionNameFromFormulaCaretSpans, isLetterNumberPattern, countCommasBeforeCursor, shouldShowFormulaFunctionList } from "./helper";
|
|
21
23
|
import { LucideIcon } from "./LucideIcon";
|
|
22
24
|
var InputBox = function InputBox() {
|
|
23
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
24
|
-
var
|
|
25
|
-
context =
|
|
26
|
-
setContext =
|
|
27
|
-
refs =
|
|
25
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
26
|
+
var _q = useContext(WorkbookContext),
|
|
27
|
+
context = _q.context,
|
|
28
|
+
setContext = _q.setContext,
|
|
29
|
+
refs = _q.refs;
|
|
28
30
|
var inputRef = useRef(null);
|
|
29
31
|
var lastKeyDownEventRef = useRef(null);
|
|
30
32
|
var prevCellUpdate = usePrevious(context.luckysheetCellUpdate);
|
|
31
33
|
var prevSheetId = usePrevious(context.currentSheetId);
|
|
32
|
-
var
|
|
33
|
-
isHidenRC =
|
|
34
|
-
setIsHidenRC =
|
|
35
|
-
var
|
|
36
|
-
isInputBoxActive =
|
|
37
|
-
setIsInputBoxActive =
|
|
38
|
-
var
|
|
39
|
-
activeCell =
|
|
40
|
-
setActiveCell =
|
|
41
|
-
var
|
|
42
|
-
activeRefCell =
|
|
43
|
-
setActiveRefCell =
|
|
44
|
-
var
|
|
34
|
+
var _r = useState(false),
|
|
35
|
+
isHidenRC = _r[0],
|
|
36
|
+
setIsHidenRC = _r[1];
|
|
37
|
+
var _s = useState(false),
|
|
38
|
+
isInputBoxActive = _s[0],
|
|
39
|
+
setIsInputBoxActive = _s[1];
|
|
40
|
+
var _t = useState(""),
|
|
41
|
+
activeCell = _t[0],
|
|
42
|
+
setActiveCell = _t[1];
|
|
43
|
+
var _u = useState(""),
|
|
44
|
+
activeRefCell = _u[0],
|
|
45
|
+
setActiveRefCell = _u[1];
|
|
46
|
+
var _v = useState({
|
|
45
47
|
left: 0,
|
|
46
48
|
top: 0
|
|
47
49
|
}),
|
|
48
|
-
frozenPosition =
|
|
49
|
-
setFrozenPosition =
|
|
50
|
+
frozenPosition = _v[0],
|
|
51
|
+
setFrozenPosition = _v[1];
|
|
50
52
|
var firstSelection = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0];
|
|
51
|
-
var
|
|
52
|
-
firstSelectionActiveCell =
|
|
53
|
-
setFirstSelectionActiveCell =
|
|
54
|
-
var
|
|
55
|
-
commaCount =
|
|
56
|
-
setCommaCount =
|
|
53
|
+
var _w = useState({}),
|
|
54
|
+
firstSelectionActiveCell = _w[0],
|
|
55
|
+
setFirstSelectionActiveCell = _w[1];
|
|
56
|
+
var _x = useState(0),
|
|
57
|
+
commaCount = _x[0],
|
|
58
|
+
setCommaCount = _x[1];
|
|
57
59
|
var hideFormulaHintLocal = localStorage.getItem("formulaMore") === "true";
|
|
58
|
-
var
|
|
59
|
-
showFormulaHint =
|
|
60
|
-
setShowFormulaHint =
|
|
61
|
-
var
|
|
62
|
-
showSearchHint =
|
|
63
|
-
setShowSearchHint =
|
|
60
|
+
var _y = useState(!hideFormulaHintLocal),
|
|
61
|
+
showFormulaHint = _y[0],
|
|
62
|
+
setShowFormulaHint = _y[1];
|
|
63
|
+
var _z = useState(false),
|
|
64
|
+
showSearchHint = _z[0],
|
|
65
|
+
setShowSearchHint = _z[1];
|
|
64
66
|
var row_index = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.row_focus;
|
|
65
67
|
var col_index = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.column_focus;
|
|
66
|
-
var preText = useRef("");
|
|
67
68
|
var isComposingRef = useRef(false);
|
|
68
69
|
var formulaAnchorCellRef = useRef(null);
|
|
69
70
|
var skipNextAnchorSelectionSyncRef = useRef(false);
|
|
70
71
|
var lastHandledMouseDragSignatureRef = useRef("");
|
|
72
|
+
var _0 = useFormulaEditorHistory(inputRef, refs.cellInput, refs.fxInput, setContext, "cell"),
|
|
73
|
+
formulaHistoryRef = _0.formulaHistoryRef,
|
|
74
|
+
preTextRef = _0.preTextRef,
|
|
75
|
+
resetFormulaHistory = _0.resetFormulaHistory,
|
|
76
|
+
handleFormulaHistoryUndoRedo = _0.handleFormulaHistoryUndoRedo,
|
|
77
|
+
capturePreFormulaState = _0.capturePreFormulaState,
|
|
78
|
+
appendFormulaHistoryFromPrimaryEditor = _0.appendFormulaHistoryFromPrimaryEditor;
|
|
71
79
|
var ZWSP = "\u200B";
|
|
72
80
|
var inputBoxInnerRef = useRef(null);
|
|
73
|
-
var
|
|
74
|
-
linkSelectionHighlightRects =
|
|
75
|
-
setLinkSelectionHighlightRects =
|
|
81
|
+
var _1 = useState([]),
|
|
82
|
+
linkSelectionHighlightRects = _1[0],
|
|
83
|
+
setLinkSelectionHighlightRects = _1[1];
|
|
76
84
|
var ensureNotEmpty = function ensureNotEmpty() {
|
|
77
85
|
var el = inputRef.current;
|
|
78
86
|
if (!el) return;
|
|
@@ -167,8 +175,9 @@ var InputBox = function InputBox() {
|
|
|
167
175
|
if (inputRef.current) {
|
|
168
176
|
inputRef.current.innerHTML = "";
|
|
169
177
|
}
|
|
178
|
+
resetFormulaHistory();
|
|
170
179
|
}
|
|
171
|
-
}, [context.luckysheetCellUpdate]);
|
|
180
|
+
}, [context.luckysheetCellUpdate, resetFormulaHistory]);
|
|
172
181
|
useEffect(function () {
|
|
173
182
|
var _a;
|
|
174
183
|
if (_.isEmpty(context.luckysheetCellUpdate) || !refs.cellInput.current) {
|
|
@@ -240,10 +249,11 @@ var InputBox = function InputBox() {
|
|
|
240
249
|
fxEditor.innerHTML = html;
|
|
241
250
|
}
|
|
242
251
|
setCursorPosition(textEditor, caretOffset);
|
|
252
|
+
setShowSearchHint(shouldShowFormulaFunctionList(textEditor));
|
|
243
253
|
setContext(function (draftCtx) {
|
|
244
254
|
draftCtx.functionCandidates = [];
|
|
245
255
|
draftCtx.defaultCandidates = [];
|
|
246
|
-
draftCtx.functionHint = formulaName;
|
|
256
|
+
draftCtx.functionHint = (formulaName || "").toUpperCase();
|
|
247
257
|
});
|
|
248
258
|
}, [setContext]);
|
|
249
259
|
var clearSearchItemActiveClass = useCallback(function () {
|
|
@@ -266,7 +276,7 @@ var InputBox = function InputBox() {
|
|
|
266
276
|
var _a, _b;
|
|
267
277
|
if (isComposingRef.current || !inputRef.current) return;
|
|
268
278
|
if (e.target.className.includes("sign-fortune")) return;
|
|
269
|
-
|
|
279
|
+
preTextRef.current = inputRef.current.innerText;
|
|
270
280
|
var formulaName = (_b = (_a = getActiveFormula()) === null || _a === void 0 ? void 0 : _a.querySelector(".luckysheet-formula-search-func")) === null || _b === void 0 ? void 0 : _b.textContent;
|
|
271
281
|
var lastSpanText = getLastInputSpanText();
|
|
272
282
|
if (formulaName && !isLetterNumberPattern(lastSpanText)) {
|
|
@@ -287,8 +297,7 @@ var InputBox = function InputBox() {
|
|
|
287
297
|
var _a;
|
|
288
298
|
var currentSelection = (_a = ctx.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[ctx.luckysheet_select_save.length - 1];
|
|
289
299
|
if (!currentSelection) return;
|
|
290
|
-
|
|
291
|
-
if (isMouseFormulaRangeDrag) {
|
|
300
|
+
if (getFormulaEditorOwner(ctx) === "fx") {
|
|
292
301
|
return;
|
|
293
302
|
}
|
|
294
303
|
israngeseleciton(ctx);
|
|
@@ -365,8 +374,11 @@ var InputBox = function InputBox() {
|
|
|
365
374
|
}, [formulaMouseDragSignature, context.formulaCache.func_selectedrange, refs.cellInput, setContext]);
|
|
366
375
|
var onKeyDown = useCallback(function (e) {
|
|
367
376
|
var _a, _b;
|
|
377
|
+
setContext(function (draftCtx) {
|
|
378
|
+
setFormulaEditorOwner(draftCtx, "cell");
|
|
379
|
+
});
|
|
368
380
|
lastKeyDownEventRef.current = new KeyboardEvent(e.type, e.nativeEvent);
|
|
369
|
-
|
|
381
|
+
capturePreFormulaState();
|
|
370
382
|
var currentInputText = ((_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.innerText) === null || _b === void 0 ? void 0 : _b.trim()) || "";
|
|
371
383
|
if ((e.key === "=" || currentInputText.startsWith("=")) && context.luckysheetCellUpdate.length === 2 && formulaAnchorCellRef.current == null) {
|
|
372
384
|
setContext(function (draftCtx) {
|
|
@@ -389,6 +401,7 @@ var InputBox = function InputBox() {
|
|
|
389
401
|
skipNextAnchorSelectionSyncRef.current = true;
|
|
390
402
|
setTimeout(function () {
|
|
391
403
|
setContext(function (draftCtx) {
|
|
404
|
+
var _a, _b;
|
|
392
405
|
draftCtx.luckysheetCellUpdate = [anchorRow_1, anchorCol_1];
|
|
393
406
|
draftCtx.luckysheet_select_save = [{
|
|
394
407
|
row: [anchorRow_1, anchorRow_1],
|
|
@@ -396,7 +409,6 @@ var InputBox = function InputBox() {
|
|
|
396
409
|
row_focus: anchorRow_1,
|
|
397
410
|
column_focus: anchorCol_1
|
|
398
411
|
}];
|
|
399
|
-
draftCtx.formulaRangeHighlight = [];
|
|
400
412
|
draftCtx.formulaRangeSelect = undefined;
|
|
401
413
|
draftCtx.formulaCache.selectingRangeIndex = -1;
|
|
402
414
|
draftCtx.formulaCache.func_selectedrange = undefined;
|
|
@@ -404,11 +416,23 @@ var InputBox = function InputBox() {
|
|
|
404
416
|
draftCtx.formulaCache.rangestart = false;
|
|
405
417
|
draftCtx.formulaCache.rangedrag_column_start = false;
|
|
406
418
|
draftCtx.formulaCache.rangedrag_row_start = false;
|
|
419
|
+
createRangeHightlight(draftCtx, ((_a = refs.cellInput.current) === null || _a === void 0 ? void 0 : _a.innerHTML) || ((_b = refs.fxInput.current) === null || _b === void 0 ? void 0 : _b.innerHTML) || "");
|
|
407
420
|
moveHighlightCell(draftCtx, "down", 0, "rangeOfSelect");
|
|
408
421
|
});
|
|
409
422
|
}, 0);
|
|
410
423
|
}
|
|
411
|
-
if (e.metaKey && context.luckysheetCellUpdate.length > 0) {
|
|
424
|
+
if ((e.metaKey || e.ctrlKey) && context.luckysheetCellUpdate.length > 0) {
|
|
425
|
+
if (e.code === "KeyZ" || e.code === "KeyY") {
|
|
426
|
+
var shouldUseFormulaHistory = currentInputText.startsWith("=") || formulaHistoryRef.current.active;
|
|
427
|
+
if (shouldUseFormulaHistory) {
|
|
428
|
+
var handledByFormulaHistory = handleFormulaHistoryUndoRedo(e.code === "KeyY" || e.code === "KeyZ" && e.shiftKey);
|
|
429
|
+
if (handledByFormulaHistory) {
|
|
430
|
+
e.preventDefault();
|
|
431
|
+
}
|
|
432
|
+
}
|
|
433
|
+
e.stopPropagation();
|
|
434
|
+
return;
|
|
435
|
+
}
|
|
412
436
|
if (e.code === "KeyB") {
|
|
413
437
|
handleBold(context, inputRef.current);
|
|
414
438
|
stopPropagation(e);
|
|
@@ -430,6 +454,23 @@ var InputBox = function InputBox() {
|
|
|
430
454
|
var allowListNavigation = true;
|
|
431
455
|
var isArrowKey = e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight";
|
|
432
456
|
if (e.key === "Delete" || e.key === "Backspace") {
|
|
457
|
+
var anchor = formulaAnchorCellRef.current;
|
|
458
|
+
if (anchor != null) {
|
|
459
|
+
var anchorRow_2 = anchor[0],
|
|
460
|
+
anchorCol_2 = anchor[1];
|
|
461
|
+
skipNextAnchorSelectionSyncRef.current = true;
|
|
462
|
+
setTimeout(function () {
|
|
463
|
+
setContext(function (draftCtx) {
|
|
464
|
+
draftCtx.luckysheetCellUpdate = [anchorRow_2, anchorCol_2];
|
|
465
|
+
draftCtx.luckysheet_select_save = [{
|
|
466
|
+
row: [anchorRow_2, anchorRow_2],
|
|
467
|
+
column: [anchorCol_2, anchorCol_2],
|
|
468
|
+
row_focus: anchorRow_2,
|
|
469
|
+
column_focus: anchorCol_2
|
|
470
|
+
}];
|
|
471
|
+
});
|
|
472
|
+
}, 0);
|
|
473
|
+
}
|
|
433
474
|
if (isComposingRef.current) requestAnimationFrame(ensureNotEmpty);
|
|
434
475
|
if (getCursorPosition(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current.innerText.length)) {
|
|
435
476
|
setTimeout(function () {
|
|
@@ -494,7 +535,7 @@ var InputBox = function InputBox() {
|
|
|
494
535
|
}
|
|
495
536
|
e.preventDefault();
|
|
496
537
|
}
|
|
497
|
-
}, [clearSearchItemActiveClass, context.luckysheetCellUpdate.length, selectActiveFormula, setContext, firstSelection]);
|
|
538
|
+
}, [capturePreFormulaState, clearSearchItemActiveClass, context.luckysheetCellUpdate.length, handleFormulaHistoryUndoRedo, selectActiveFormula, setContext, firstSelection]);
|
|
498
539
|
var handleHideShowHint = function handleHideShowHint() {
|
|
499
540
|
var _a, _b, _c, _d;
|
|
500
541
|
var searchElFx = (_a = document.getElementsByClassName("fx-search")) === null || _a === void 0 ? void 0 : _a[0];
|
|
@@ -518,11 +559,7 @@ var InputBox = function InputBox() {
|
|
|
518
559
|
var _a, _b, _c;
|
|
519
560
|
if (context.isFlvReadOnly) return;
|
|
520
561
|
handleHideShowHint();
|
|
521
|
-
|
|
522
|
-
setShowSearchHint(true);
|
|
523
|
-
} else {
|
|
524
|
-
setShowSearchHint(false);
|
|
525
|
-
}
|
|
562
|
+
setShowSearchHint(shouldShowFormulaFunctionList((_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) !== null && _a !== void 0 ? _a : null));
|
|
526
563
|
if (!isComposingRef.current) {
|
|
527
564
|
var currentCommaCount = countCommasBeforeCursor(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current);
|
|
528
565
|
setCommaCount(currentCommaCount);
|
|
@@ -540,16 +577,19 @@ var InputBox = function InputBox() {
|
|
|
540
577
|
}
|
|
541
578
|
var kcode = e.keyCode;
|
|
542
579
|
if (!kcode) return;
|
|
580
|
+
appendFormulaHistoryFromPrimaryEditor(function () {
|
|
581
|
+
return getCursorPosition(inputRef.current);
|
|
582
|
+
});
|
|
543
583
|
if (!(kcode >= 112 && kcode <= 123 || kcode <= 46 || kcode === 144 || kcode === 108 || e.ctrlKey || e.altKey || e.shiftKey && (kcode === 37 || kcode === 38 || kcode === 39 || kcode === 40)) || kcode === 8 || kcode === 32 || kcode === 46 || e.ctrlKey && kcode === 86) {
|
|
544
584
|
setContext(function (draftCtx) {
|
|
545
585
|
if ((draftCtx.formulaCache.rangestart || draftCtx.formulaCache.rangedrag_column_start || draftCtx.formulaCache.rangedrag_row_start || israngeseleciton(draftCtx)) && isBlur) return;
|
|
546
586
|
if (!isAllowEdit(draftCtx, draftCtx.luckysheet_select_save)) {
|
|
547
587
|
return;
|
|
548
588
|
}
|
|
549
|
-
handleFormulaInput(draftCtx, refs.fxInput.current, refs.cellInput.current, kcode,
|
|
589
|
+
handleFormulaInput(draftCtx, refs.fxInput.current, refs.cellInput.current, kcode, preTextRef.current);
|
|
550
590
|
});
|
|
551
591
|
}
|
|
552
|
-
}, [refs.cellInput, refs.fxInput, setContext]);
|
|
592
|
+
}, [refs.cellInput, refs.fxInput, setContext, appendFormulaHistoryFromPrimaryEditor]);
|
|
553
593
|
var onPaste = useCallback(function (e) {
|
|
554
594
|
if (_.isEmpty(context.luckysheetCellUpdate)) {
|
|
555
595
|
e.preventDefault();
|
|
@@ -680,6 +720,7 @@ var InputBox = function InputBox() {
|
|
|
680
720
|
}
|
|
681
721
|
return activeCell || cell;
|
|
682
722
|
};
|
|
723
|
+
useRerenderOnFormulaCaret(inputRef, context.luckysheetCellUpdate.length > 0);
|
|
683
724
|
var getFunctionNameFromInput = useCallback(function () {
|
|
684
725
|
var _a, _b;
|
|
685
726
|
var inputText = ((_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.innerText) || "";
|
|
@@ -696,8 +737,9 @@ var InputBox = function InputBox() {
|
|
|
696
737
|
}
|
|
697
738
|
return null;
|
|
698
739
|
}, []);
|
|
699
|
-
var functionName = context.functionHint
|
|
740
|
+
var functionName = (_o = (_m = getFunctionNameFromFormulaCaretSpans(inputRef.current)) !== null && _m !== void 0 ? _m : context.functionHint) !== null && _o !== void 0 ? _o : getFunctionNameFromInput();
|
|
700
741
|
var fn = functionName ? context.formulaCache.functionlistMap[functionName] : null;
|
|
742
|
+
var showCellFormulaChrome = context.luckysheetCellUpdate.length > 0 && getFormulaEditorOwner(context) === "cell";
|
|
701
743
|
var inputBoxBaseSelection = isInputBoxActive && firstSelectionActiveCell ? firstSelectionActiveCell : firstSelection;
|
|
702
744
|
return /*#__PURE__*/React.createElement("div", {
|
|
703
745
|
className: "luckysheet-input-box",
|
|
@@ -709,7 +751,7 @@ var InputBox = function InputBox() {
|
|
|
709
751
|
onMouseUp: function onMouseUp(e) {
|
|
710
752
|
return e.stopPropagation();
|
|
711
753
|
}
|
|
712
|
-
}, firstSelection && !((
|
|
754
|
+
}, firstSelection && !((_p = context.rangeDialog) === null || _p === void 0 ? void 0 : _p.show) && (/*#__PURE__*/React.createElement("div", {
|
|
713
755
|
className: "luckysheet-cell-address-indicator",
|
|
714
756
|
style: getAddressIndicatorPosition()
|
|
715
757
|
}, wraperGetCell())), /*#__PURE__*/React.createElement("div", {
|
|
@@ -739,10 +781,23 @@ var InputBox = function InputBox() {
|
|
|
739
781
|
},
|
|
740
782
|
onMouseUp: function onMouseUp() {
|
|
741
783
|
handleHideShowHint();
|
|
784
|
+
setContext(function (draftCtx) {
|
|
785
|
+
setFormulaEditorOwner(draftCtx, "cell");
|
|
786
|
+
});
|
|
742
787
|
if (!isComposingRef.current) {
|
|
743
788
|
var currentCommaCount = countCommasBeforeCursor(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current);
|
|
744
789
|
setCommaCount(currentCommaCount);
|
|
745
790
|
}
|
|
791
|
+
var editor = inputRef.current;
|
|
792
|
+
if (!editor) return;
|
|
793
|
+
setContext(function (draftCtx) {
|
|
794
|
+
if (draftCtx.formulaCache.rangeSelectionActive !== true) return;
|
|
795
|
+
var clickedInsideManagedRange = getFormulaRangeIndexAtCaret(editor) !== null;
|
|
796
|
+
var atValidInsertionPoint = isCaretAtValidFormulaRangeInsertionPoint(editor);
|
|
797
|
+
if (clickedInsideManagedRange || !atValidInsertionPoint) {
|
|
798
|
+
markRangeSelectionDirty(draftCtx);
|
|
799
|
+
}
|
|
800
|
+
});
|
|
746
801
|
},
|
|
747
802
|
innerRef: function innerRef(e) {
|
|
748
803
|
inputRef.current = e;
|
|
@@ -785,7 +840,7 @@ var InputBox = function InputBox() {
|
|
|
785
840
|
backgroundColor: "rgba(0, 123, 255, 0.25)"
|
|
786
841
|
}
|
|
787
842
|
});
|
|
788
|
-
})))), (context.functionCandidates.length > 0 || context.functionHint || context.defaultCandidates.length > 0 || fn) && (/*#__PURE__*/React.createElement(React.Fragment, null, showSearchHint && (/*#__PURE__*/React.createElement(FormulaSearch, {
|
|
843
|
+
})))), (context.functionCandidates.length > 0 || context.functionHint || context.defaultCandidates.length > 0 || fn) && showCellFormulaChrome && (/*#__PURE__*/React.createElement(React.Fragment, null, showSearchHint && (/*#__PURE__*/React.createElement(FormulaSearch, {
|
|
789
844
|
onMouseMove: function onMouseMove(e) {
|
|
790
845
|
if (document.getElementById("luckysheet-formula-search-c")) {
|
|
791
846
|
var hoveredItem = e.target.closest(".luckysheet-formula-search-item");
|
|
@@ -800,12 +855,12 @@ var InputBox = function InputBox() {
|
|
|
800
855
|
}
|
|
801
856
|
})), /*#__PURE__*/React.createElement("div", {
|
|
802
857
|
className: "cell-hint"
|
|
803
|
-
}, showFormulaHint && fn && (/*#__PURE__*/React.createElement(FormulaHint, {
|
|
858
|
+
}, showFormulaHint && fn && !showSearchHint && (/*#__PURE__*/React.createElement(FormulaHint, {
|
|
804
859
|
handleShowFormulaHint: handleShowFormulaHint,
|
|
805
860
|
showFormulaHint: showFormulaHint,
|
|
806
861
|
commaCount: commaCount,
|
|
807
862
|
functionName: functionName
|
|
808
|
-
})), !showFormulaHint && fn && (/*#__PURE__*/React.createElement(Tooltip, {
|
|
863
|
+
})), !showFormulaHint && fn && !showSearchHint && (/*#__PURE__*/React.createElement(Tooltip, {
|
|
809
864
|
text: "Turn on formula suggestions (F10)",
|
|
810
865
|
placement: "top",
|
|
811
866
|
defaultOpen: true,
|
|
@@ -6,6 +6,8 @@ export declare function buildFormulaSuggestionText(editableDiv: HTMLDivElement,
|
|
|
6
6
|
caretOffset: number;
|
|
7
7
|
};
|
|
8
8
|
export declare function isLetterNumberPattern(str: string): boolean;
|
|
9
|
+
export declare function shouldShowFormulaFunctionList(editor: HTMLDivElement | null): boolean;
|
|
10
|
+
export declare function getFunctionNameFromFormulaCaretSpans(editor: HTMLDivElement | null): string | null;
|
|
9
11
|
export declare function removeLastSpan(htmlString: string): string;
|
|
10
12
|
export declare function numberToColumn(colNumber: number): string;
|
|
11
13
|
export declare function incrementColumn(cell: string): string;
|
|
@@ -74,6 +74,49 @@ export function isLetterNumberPattern(str) {
|
|
|
74
74
|
var regex = /^[a-zA-Z]+\d+$/;
|
|
75
75
|
return regex.test(str);
|
|
76
76
|
}
|
|
77
|
+
export function shouldShowFormulaFunctionList(editor) {
|
|
78
|
+
var _a, _b;
|
|
79
|
+
if (!editor) return false;
|
|
80
|
+
if (!((_a = editor.innerText) === null || _a === void 0 ? void 0 : _a.includes("="))) return false;
|
|
81
|
+
var parser = new DOMParser();
|
|
82
|
+
var doc = parser.parseFromString("<div>".concat(editor.innerHTML, "</div>"), "text/html");
|
|
83
|
+
var spans = doc.querySelectorAll("span");
|
|
84
|
+
var lastSpan = spans[spans.length - 1];
|
|
85
|
+
var lastText = (_b = lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText) !== null && _b !== void 0 ? _b : "";
|
|
86
|
+
return /^=?[A-Za-z]*$/.test(lastText);
|
|
87
|
+
}
|
|
88
|
+
var FORMULA_FUNC_CLASS = "luckysheet-formula-text-func";
|
|
89
|
+
var FORMULA_LPAR_CLASS = "luckysheet-formula-text-lpar";
|
|
90
|
+
export function getFunctionNameFromFormulaCaretSpans(editor) {
|
|
91
|
+
var _a, _b;
|
|
92
|
+
if (!editor) return null;
|
|
93
|
+
var sel = window.getSelection();
|
|
94
|
+
if (!(sel === null || sel === void 0 ? void 0 : sel.rangeCount)) return null;
|
|
95
|
+
var range = sel.getRangeAt(0);
|
|
96
|
+
if (!editor.contains(range.startContainer)) return null;
|
|
97
|
+
var n = range.startContainer;
|
|
98
|
+
while (n && n !== editor) {
|
|
99
|
+
if (n.nodeType === Node.ELEMENT_NODE) {
|
|
100
|
+
var elem = n;
|
|
101
|
+
if (elem.classList.contains(FORMULA_FUNC_CLASS)) {
|
|
102
|
+
var next = elem.nextElementSibling;
|
|
103
|
+
if (next === null || next === void 0 ? void 0 : next.classList.contains(FORMULA_LPAR_CLASS)) {
|
|
104
|
+
var name_1 = (_a = elem.textContent) === null || _a === void 0 ? void 0 : _a.trim();
|
|
105
|
+
return name_1 ? name_1.toUpperCase() : null;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
if (elem.classList.contains(FORMULA_LPAR_CLASS)) {
|
|
109
|
+
var prev = elem.previousElementSibling;
|
|
110
|
+
if (prev === null || prev === void 0 ? void 0 : prev.classList.contains(FORMULA_FUNC_CLASS)) {
|
|
111
|
+
var name_2 = (_b = prev.textContent) === null || _b === void 0 ? void 0 : _b.trim();
|
|
112
|
+
return name_2 ? name_2.toUpperCase() : null;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
n = n.parentNode;
|
|
117
|
+
}
|
|
118
|
+
return null;
|
|
119
|
+
}
|
|
77
120
|
export function removeLastSpan(htmlString) {
|
|
78
121
|
var container = document.createElement("div");
|
|
79
122
|
container.innerHTML = htmlString;
|
|
@@ -878,7 +878,7 @@ var Workbook = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
878
878
|
});
|
|
879
879
|
}
|
|
880
880
|
var nativeEvent = e.nativeEvent;
|
|
881
|
-
if ((e.ctrlKey || e.metaKey) && e.code === "KeyZ") {
|
|
881
|
+
if ((e.ctrlKey || e.metaKey) && e.code === "KeyZ" && context.luckysheetCellUpdate.length === 0) {
|
|
882
882
|
if (e.shiftKey) {
|
|
883
883
|
handleRedo();
|
|
884
884
|
} else {
|
|
@@ -887,7 +887,7 @@ var Workbook = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
887
887
|
e.stopPropagation();
|
|
888
888
|
return;
|
|
889
889
|
}
|
|
890
|
-
if ((e.ctrlKey || e.metaKey) && e.code === "KeyY") {
|
|
890
|
+
if ((e.ctrlKey || e.metaKey) && e.code === "KeyY" && context.luckysheetCellUpdate.length === 0) {
|
|
891
891
|
handleRedo();
|
|
892
892
|
e.stopPropagation();
|
|
893
893
|
e.preventDefault();
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { type RefObject } from "react";
|
|
2
|
+
import { type Context } from "@fileverse-dev/fortune-core";
|
|
3
|
+
import type { SetContextOptions } from "../context";
|
|
4
|
+
export type FormulaHistoryEntry = {
|
|
5
|
+
text: string;
|
|
6
|
+
caret: number;
|
|
7
|
+
spanValues: string[];
|
|
8
|
+
};
|
|
9
|
+
export type FormulaEditorHistoryPrimary = "cell" | "fx";
|
|
10
|
+
type SetContext = (recipe: (ctx: Context) => void, options?: SetContextOptions) => void;
|
|
11
|
+
export declare function useFormulaEditorHistory(primaryRef: RefObject<HTMLDivElement | null>, cellInputRef: RefObject<HTMLDivElement | null>, fxInputRef: RefObject<HTMLDivElement | null>, setContext: SetContext, primary: FormulaEditorHistoryPrimary): {
|
|
12
|
+
formulaHistoryRef: RefObject<{
|
|
13
|
+
active: boolean;
|
|
14
|
+
entries: FormulaHistoryEntry[];
|
|
15
|
+
index: number;
|
|
16
|
+
}>;
|
|
17
|
+
preTextRef: RefObject<string>;
|
|
18
|
+
preFormulaSpanValuesRef: RefObject<string[] | null>;
|
|
19
|
+
resetFormulaHistory: () => void;
|
|
20
|
+
handleFormulaHistoryUndoRedo: (isRedo: boolean) => boolean;
|
|
21
|
+
capturePreFormulaState: () => void;
|
|
22
|
+
appendFormulaHistoryFromPrimaryEditor: (getCaret: () => number) => void;
|
|
23
|
+
};
|
|
24
|
+
export {};
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import { useCallback, useRef } from "react";
|
|
2
|
+
import _ from "lodash";
|
|
3
|
+
import { escapeScriptTag, functionHTMLGenerate, escapeHTMLTag, handleFormulaInput } from "@fileverse-dev/fortune-core";
|
|
4
|
+
import { setCursorPosition } from "../components/SheetOverlay/helper";
|
|
5
|
+
var MAX_FORMULA_HISTORY = 100;
|
|
6
|
+
export function useFormulaEditorHistory(primaryRef, cellInputRef, fxInputRef, setContext, primary) {
|
|
7
|
+
var preTextRef = useRef("");
|
|
8
|
+
var preFormulaSpanValuesRef = useRef(null);
|
|
9
|
+
var formulaHistoryRef = useRef({
|
|
10
|
+
active: false,
|
|
11
|
+
entries: [],
|
|
12
|
+
index: -1
|
|
13
|
+
});
|
|
14
|
+
var resetFormulaHistory = useCallback(function () {
|
|
15
|
+
formulaHistoryRef.current = {
|
|
16
|
+
active: false,
|
|
17
|
+
entries: [],
|
|
18
|
+
index: -1
|
|
19
|
+
};
|
|
20
|
+
preFormulaSpanValuesRef.current = null;
|
|
21
|
+
}, []);
|
|
22
|
+
var pushFormulaHistoryEntry = useCallback(function (entry) {
|
|
23
|
+
var history = formulaHistoryRef.current;
|
|
24
|
+
var current = history.entries[history.index];
|
|
25
|
+
if (current && current.spanValues.length > 0 && entry.spanValues.length > 0 && _.isEqual(current.spanValues, entry.spanValues)) {
|
|
26
|
+
return;
|
|
27
|
+
}
|
|
28
|
+
if (current && current.spanValues.length === 0 && entry.spanValues.length === 0 && current.text === entry.text && current.caret === entry.caret) {
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
31
|
+
var nextEntries = history.entries.slice(0, history.index + 1);
|
|
32
|
+
nextEntries.push(entry);
|
|
33
|
+
if (nextEntries.length > MAX_FORMULA_HISTORY) {
|
|
34
|
+
nextEntries.shift();
|
|
35
|
+
}
|
|
36
|
+
history.entries = nextEntries;
|
|
37
|
+
history.index = nextEntries.length - 1;
|
|
38
|
+
history.active = true;
|
|
39
|
+
}, []);
|
|
40
|
+
var applyFormulaHistoryEntry = useCallback(function (entry) {
|
|
41
|
+
var primaryEl = primaryRef.current;
|
|
42
|
+
if (!primaryEl) return;
|
|
43
|
+
var safeText = escapeScriptTag(entry.text || "");
|
|
44
|
+
var html = safeText.startsWith("=") ? functionHTMLGenerate(safeText) : escapeHTMLTag(safeText);
|
|
45
|
+
var cell = cellInputRef.current;
|
|
46
|
+
var fx = fxInputRef.current;
|
|
47
|
+
primaryEl.innerHTML = html;
|
|
48
|
+
if (primary === "cell") {
|
|
49
|
+
if (fx) fx.innerHTML = html;
|
|
50
|
+
} else if (cell) {
|
|
51
|
+
cell.innerHTML = html;
|
|
52
|
+
}
|
|
53
|
+
setCursorPosition(primaryEl, Math.min(entry.caret, entry.text.length));
|
|
54
|
+
setContext(function (draftCtx) {
|
|
55
|
+
if (primary === "cell") {
|
|
56
|
+
if (!cellInputRef.current) return;
|
|
57
|
+
handleFormulaInput(draftCtx, fxInputRef.current, cellInputRef.current, 0);
|
|
58
|
+
} else {
|
|
59
|
+
if (!fxInputRef.current) return;
|
|
60
|
+
handleFormulaInput(draftCtx, cellInputRef.current, fxInputRef.current, 0);
|
|
61
|
+
}
|
|
62
|
+
});
|
|
63
|
+
}, [cellInputRef, fxInputRef, primary, primaryRef, setContext]);
|
|
64
|
+
var handleFormulaHistoryUndoRedo = useCallback(function (isRedo) {
|
|
65
|
+
var history = formulaHistoryRef.current;
|
|
66
|
+
if (!history.active || history.entries.length === 0) return false;
|
|
67
|
+
var nextIndex = isRedo ? history.index + 1 : history.index - 1;
|
|
68
|
+
if (nextIndex < 0 || nextIndex >= history.entries.length) return true;
|
|
69
|
+
history.index = nextIndex;
|
|
70
|
+
applyFormulaHistoryEntry(history.entries[nextIndex]);
|
|
71
|
+
return true;
|
|
72
|
+
}, [applyFormulaHistoryEntry]);
|
|
73
|
+
var capturePreFormulaState = useCallback(function () {
|
|
74
|
+
var el = primaryRef.current;
|
|
75
|
+
if (!el) return;
|
|
76
|
+
preTextRef.current = el.innerText;
|
|
77
|
+
preFormulaSpanValuesRef.current = Array.from(el.querySelectorAll("span.fortune-formula-functionrange-cell")).map(function (node) {
|
|
78
|
+
var _a;
|
|
79
|
+
return (_a = node.textContent) !== null && _a !== void 0 ? _a : "";
|
|
80
|
+
});
|
|
81
|
+
}, [primaryRef]);
|
|
82
|
+
var appendFormulaHistoryFromPrimaryEditor = useCallback(function (getCaret) {
|
|
83
|
+
var _a, _b;
|
|
84
|
+
var el = primaryRef.current;
|
|
85
|
+
if (!el) return;
|
|
86
|
+
var currentText = el.innerText || "";
|
|
87
|
+
if (currentText.startsWith("=")) {
|
|
88
|
+
var caret = getCaret();
|
|
89
|
+
var spanValues = Array.from(el.querySelectorAll("span.fortune-formula-functionrange-cell")).map(function (node) {
|
|
90
|
+
var _a;
|
|
91
|
+
return (_a = node.textContent) !== null && _a !== void 0 ? _a : "";
|
|
92
|
+
});
|
|
93
|
+
if (!formulaHistoryRef.current.active) {
|
|
94
|
+
var seedText = preTextRef.current || "";
|
|
95
|
+
pushFormulaHistoryEntry({
|
|
96
|
+
text: seedText,
|
|
97
|
+
caret: Math.min(caret, seedText.length),
|
|
98
|
+
spanValues: (_b = (_a = preFormulaSpanValuesRef.current) !== null && _a !== void 0 ? _a : spanValues) !== null && _b !== void 0 ? _b : []
|
|
99
|
+
});
|
|
100
|
+
}
|
|
101
|
+
pushFormulaHistoryEntry({
|
|
102
|
+
text: currentText,
|
|
103
|
+
caret: caret,
|
|
104
|
+
spanValues: spanValues
|
|
105
|
+
});
|
|
106
|
+
} else if (formulaHistoryRef.current.active) {
|
|
107
|
+
resetFormulaHistory();
|
|
108
|
+
}
|
|
109
|
+
}, [primaryRef, pushFormulaHistoryEntry, resetFormulaHistory]);
|
|
110
|
+
return {
|
|
111
|
+
formulaHistoryRef: formulaHistoryRef,
|
|
112
|
+
preTextRef: preTextRef,
|
|
113
|
+
preFormulaSpanValuesRef: preFormulaSpanValuesRef,
|
|
114
|
+
resetFormulaHistory: resetFormulaHistory,
|
|
115
|
+
handleFormulaHistoryUndoRedo: handleFormulaHistoryUndoRedo,
|
|
116
|
+
capturePreFormulaState: capturePreFormulaState,
|
|
117
|
+
appendFormulaHistoryFromPrimaryEditor: appendFormulaHistoryFromPrimaryEditor
|
|
118
|
+
};
|
|
119
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { useEffect, useState } from "react";
|
|
2
|
+
export function useRerenderOnFormulaCaret(editorRef, editSessionActive) {
|
|
3
|
+
var _a = useState(0),
|
|
4
|
+
bump = _a[1];
|
|
5
|
+
useEffect(function () {
|
|
6
|
+
if (!editSessionActive) return;
|
|
7
|
+
var onSelectionChange = function onSelectionChange() {
|
|
8
|
+
var _a, _b;
|
|
9
|
+
var el = editorRef.current;
|
|
10
|
+
if (!el) return;
|
|
11
|
+
var text = (_b = (_a = el.innerText) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : "";
|
|
12
|
+
if (!text.startsWith("=")) return;
|
|
13
|
+
var sel = window.getSelection();
|
|
14
|
+
if (!(sel === null || sel === void 0 ? void 0 : sel.rangeCount) || !el.contains(sel.getRangeAt(0).startContainer)) {
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
bump(function (n) {
|
|
18
|
+
return n + 1;
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
document.addEventListener("selectionchange", onSelectionChange);
|
|
22
|
+
return function () {
|
|
23
|
+
return document.removeEventListener("selectionchange", onSelectionChange);
|
|
24
|
+
};
|
|
25
|
+
}, [editSessionActive, editorRef]);
|
|
26
|
+
}
|
|
@@ -21,7 +21,7 @@ require("./index.css");
|
|
|
21
21
|
var _Menu = _interopRequireDefault(require("./Menu"));
|
|
22
22
|
require("tippy.js/dist/tippy.css");
|
|
23
23
|
var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
|
|
24
|
-
var _LucideIcon = require("
|
|
24
|
+
var _LucideIcon = require("../SheetOverlay/LucideIcon");
|
|
25
25
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
26
26
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
27
27
|
var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
|