@fileverse-dev/fortune-react 1.3.10-yjs-10 → 1.3.11-input-ref
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/FxEditor/index.js +12 -6
- package/es/components/SheetOverlay/InputBox.js +243 -130
- package/es/components/SheetOverlay/helper.d.ts +5 -0
- package/es/components/SheetOverlay/helper.js +52 -0
- package/lib/components/FxEditor/index.js +10 -4
- package/lib/components/SheetOverlay/InputBox.js +241 -128
- package/lib/components/SheetOverlay/helper.d.ts +5 -0
- package/lib/components/SheetOverlay/helper.js +54 -0
- package/package.json +2 -2
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { getFlowdata, cancelNormalSelected, getCellValue, updateCell, getInlineStringNoStyle, isInlineStringCell, escapeScriptTag, moveHighlightCell, handleFormulaInput, rangeHightlightselected, valueShowEs, isShowHidenCR, escapeHTMLTag, isAllowEdit } from "@fileverse-dev/fortune-core";
|
|
1
|
+
import { getFlowdata, cancelNormalSelected, getCellValue, updateCell, getInlineStringNoStyle, isInlineStringCell, escapeScriptTag, moveHighlightCell, handleFormulaInput, rangeHightlightselected, valueShowEs, isShowHidenCR, escapeHTMLTag, functionHTMLGenerate, isAllowEdit } from "@fileverse-dev/fortune-core";
|
|
2
2
|
import React, { useContext, useState, useCallback, useEffect, useRef, useMemo } from "react";
|
|
3
3
|
import "./index.css";
|
|
4
4
|
import _ from "lodash";
|
|
@@ -9,7 +9,7 @@ import FormulaSearch from "../../components/SheetOverlay/FormulaSearch";
|
|
|
9
9
|
import FormulaHint from "../../components/SheetOverlay/FormulaHint";
|
|
10
10
|
import usePrevious from "../../hooks/usePrevious";
|
|
11
11
|
import { LucideIcon } from "../../components/SheetOverlay/LucideIcon";
|
|
12
|
-
import { countCommasBeforeCursor, isLetterNumberPattern,
|
|
12
|
+
import { countCommasBeforeCursor, isLetterNumberPattern, setCursorPosition, buildFormulaSuggestionText } from "../../components/SheetOverlay/helper";
|
|
13
13
|
var FxEditor = function FxEditor() {
|
|
14
14
|
var _a;
|
|
15
15
|
var hideFormulaHintLocal = localStorage.getItem("formulaMore") === "true";
|
|
@@ -85,13 +85,19 @@ var FxEditor = function FxEditor() {
|
|
|
85
85
|
return document.querySelector(".luckysheet-formula-search-item-active");
|
|
86
86
|
}, []);
|
|
87
87
|
var insertSelectedFormula = useCallback(function (formulaName) {
|
|
88
|
-
var
|
|
89
|
-
|
|
88
|
+
var fxEditor = refs.fxInput.current;
|
|
89
|
+
if (!fxEditor) return;
|
|
90
90
|
var cellEditor = document.getElementById("luckysheet-rich-text-editor");
|
|
91
|
+
var _a = buildFormulaSuggestionText(fxEditor, formulaName),
|
|
92
|
+
text = _a.text,
|
|
93
|
+
caretOffset = _a.caretOffset;
|
|
94
|
+
var safeText = escapeScriptTag(text);
|
|
95
|
+
var html = safeText.startsWith("=") ? functionHTMLGenerate(safeText) : escapeHTMLTag(safeText);
|
|
96
|
+
fxEditor.innerHTML = html;
|
|
91
97
|
if (cellEditor) {
|
|
92
|
-
cellEditor.innerHTML =
|
|
98
|
+
cellEditor.innerHTML = html;
|
|
93
99
|
}
|
|
94
|
-
|
|
100
|
+
setCursorPosition(fxEditor, caretOffset);
|
|
95
101
|
setContext(function (draftCtx) {
|
|
96
102
|
draftCtx.functionCandidates = [];
|
|
97
103
|
draftCtx.defaultCandidates = [];
|
|
@@ -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,
|
|
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";
|
|
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,60 +17,62 @@ 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 { moveCursorToEnd, getCursorPosition,
|
|
20
|
+
import { moveCursorToEnd, getCursorPosition, setCursorPosition, buildFormulaSuggestionText, isLetterNumberPattern, countCommasBeforeCursor } from "./helper";
|
|
21
21
|
import { LucideIcon } from "./LucideIcon";
|
|
22
22
|
var InputBox = function InputBox() {
|
|
23
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
24
|
-
var
|
|
25
|
-
context =
|
|
26
|
-
setContext =
|
|
27
|
-
refs =
|
|
23
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
24
|
+
var _o = useContext(WorkbookContext),
|
|
25
|
+
context = _o.context,
|
|
26
|
+
setContext = _o.setContext,
|
|
27
|
+
refs = _o.refs;
|
|
28
28
|
var inputRef = useRef(null);
|
|
29
29
|
var lastKeyDownEventRef = useRef(null);
|
|
30
30
|
var prevCellUpdate = usePrevious(context.luckysheetCellUpdate);
|
|
31
31
|
var prevSheetId = usePrevious(context.currentSheetId);
|
|
32
|
-
var _o = useState(false),
|
|
33
|
-
isHidenRC = _o[0],
|
|
34
|
-
setIsHidenRC = _o[1];
|
|
35
32
|
var _p = useState(false),
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
var _q = useState(
|
|
39
|
-
|
|
40
|
-
|
|
33
|
+
isHidenRC = _p[0],
|
|
34
|
+
setIsHidenRC = _p[1];
|
|
35
|
+
var _q = useState(false),
|
|
36
|
+
isInputBoxActive = _q[0],
|
|
37
|
+
setIsInputBoxActive = _q[1];
|
|
41
38
|
var _r = useState(""),
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
var _s = useState(
|
|
39
|
+
activeCell = _r[0],
|
|
40
|
+
setActiveCell = _r[1];
|
|
41
|
+
var _s = useState(""),
|
|
42
|
+
activeRefCell = _s[0],
|
|
43
|
+
setActiveRefCell = _s[1];
|
|
44
|
+
var _t = useState({
|
|
45
45
|
left: 0,
|
|
46
46
|
top: 0
|
|
47
47
|
}),
|
|
48
|
-
frozenPosition =
|
|
49
|
-
setFrozenPosition =
|
|
48
|
+
frozenPosition = _t[0],
|
|
49
|
+
setFrozenPosition = _t[1];
|
|
50
50
|
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 =
|
|
51
|
+
var _u = useState({}),
|
|
52
|
+
firstSelectionActiveCell = _u[0],
|
|
53
|
+
setFirstSelectionActiveCell = _u[1];
|
|
54
|
+
var _v = useState(0),
|
|
55
|
+
commaCount = _v[0],
|
|
56
|
+
setCommaCount = _v[1];
|
|
57
57
|
var hideFormulaHintLocal = localStorage.getItem("formulaMore") === "true";
|
|
58
|
-
var
|
|
59
|
-
showFormulaHint =
|
|
60
|
-
setShowFormulaHint =
|
|
61
|
-
var
|
|
62
|
-
showSearchHint =
|
|
63
|
-
setShowSearchHint =
|
|
58
|
+
var _w = useState(!hideFormulaHintLocal),
|
|
59
|
+
showFormulaHint = _w[0],
|
|
60
|
+
setShowFormulaHint = _w[1];
|
|
61
|
+
var _x = useState(false),
|
|
62
|
+
showSearchHint = _x[0],
|
|
63
|
+
setShowSearchHint = _x[1];
|
|
64
64
|
var row_index = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.row_focus;
|
|
65
65
|
var col_index = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.column_focus;
|
|
66
66
|
var preText = useRef("");
|
|
67
|
-
var placeRef = useRef("");
|
|
68
67
|
var isComposingRef = useRef(false);
|
|
68
|
+
var formulaAnchorCellRef = useRef(null);
|
|
69
|
+
var skipNextAnchorSelectionSyncRef = useRef(false);
|
|
70
|
+
var lastHandledMouseDragSignatureRef = useRef("");
|
|
69
71
|
var ZWSP = "\u200B";
|
|
70
72
|
var inputBoxInnerRef = useRef(null);
|
|
71
|
-
var
|
|
72
|
-
linkSelectionHighlightRects =
|
|
73
|
-
setLinkSelectionHighlightRects =
|
|
73
|
+
var _y = useState([]),
|
|
74
|
+
linkSelectionHighlightRects = _y[0],
|
|
75
|
+
setLinkSelectionHighlightRects = _y[1];
|
|
74
76
|
var ensureNotEmpty = function ensureNotEmpty() {
|
|
75
77
|
var el = inputRef.current;
|
|
76
78
|
if (!el) return;
|
|
@@ -167,6 +169,34 @@ var InputBox = function InputBox() {
|
|
|
167
169
|
}
|
|
168
170
|
}
|
|
169
171
|
}, [context.luckysheetCellUpdate]);
|
|
172
|
+
useEffect(function () {
|
|
173
|
+
var _a;
|
|
174
|
+
if (_.isEmpty(context.luckysheetCellUpdate) || !refs.cellInput.current) {
|
|
175
|
+
formulaAnchorCellRef.current = null;
|
|
176
|
+
lastHandledMouseDragSignatureRef.current = "";
|
|
177
|
+
return;
|
|
178
|
+
}
|
|
179
|
+
var inputText = ((_a = refs.cellInput.current.innerText) === null || _a === void 0 ? void 0 : _a.trim()) || "";
|
|
180
|
+
if (!inputText.startsWith("=")) {
|
|
181
|
+
formulaAnchorCellRef.current = null;
|
|
182
|
+
lastHandledMouseDragSignatureRef.current = "";
|
|
183
|
+
}
|
|
184
|
+
}, [context.luckysheetCellUpdate, refs.cellInput]);
|
|
185
|
+
useEffect(function () {
|
|
186
|
+
if (_.isEmpty(context.luckysheetCellUpdate) || _.isEmpty(prevCellUpdate) || _.isEqual(prevCellUpdate, context.luckysheetCellUpdate)) {
|
|
187
|
+
return;
|
|
188
|
+
}
|
|
189
|
+
setContext(function (ctx) {
|
|
190
|
+
ctx.formulaRangeHighlight = [];
|
|
191
|
+
ctx.formulaRangeSelect = undefined;
|
|
192
|
+
ctx.formulaCache.selectingRangeIndex = -1;
|
|
193
|
+
ctx.formulaCache.func_selectedrange = undefined;
|
|
194
|
+
ctx.formulaCache.rangestart = false;
|
|
195
|
+
ctx.formulaCache.rangedrag_column_start = false;
|
|
196
|
+
ctx.formulaCache.rangedrag_row_start = false;
|
|
197
|
+
ctx.formulaCache.rangechangeindex = undefined;
|
|
198
|
+
});
|
|
199
|
+
}, [context.luckysheetCellUpdate, prevCellUpdate, setContext]);
|
|
170
200
|
useEffect(function () {
|
|
171
201
|
setIsHidenRC(isShowHidenCR(context));
|
|
172
202
|
}, [context.luckysheet_select_save]);
|
|
@@ -176,61 +206,40 @@ var InputBox = function InputBox() {
|
|
|
176
206
|
setIsInputBoxActive(false);
|
|
177
207
|
}
|
|
178
208
|
}, [firstSelection, (_c = context.rangeDialog) === null || _c === void 0 ? void 0 : _c.show, context.luckysheetCellUpdate]);
|
|
209
|
+
useEffect(function () {
|
|
210
|
+
if (isInputBoxActive) return;
|
|
211
|
+
setContext(function (ctx) {
|
|
212
|
+
if (_.isEmpty(ctx.formulaRangeHighlight) && !ctx.formulaRangeSelect && ctx.formulaCache.selectingRangeIndex === -1 && !ctx.formulaCache.func_selectedrange) {
|
|
213
|
+
return;
|
|
214
|
+
}
|
|
215
|
+
ctx.formulaRangeHighlight = [];
|
|
216
|
+
ctx.formulaRangeSelect = undefined;
|
|
217
|
+
ctx.formulaCache.selectingRangeIndex = -1;
|
|
218
|
+
ctx.formulaCache.func_selectedrange = undefined;
|
|
219
|
+
ctx.formulaCache.rangestart = false;
|
|
220
|
+
ctx.formulaCache.rangedrag_column_start = false;
|
|
221
|
+
ctx.formulaCache.rangedrag_row_start = false;
|
|
222
|
+
ctx.formulaCache.rangechangeindex = undefined;
|
|
223
|
+
ctx.formulaCache.rangeSelectionActive = null;
|
|
224
|
+
});
|
|
225
|
+
}, [isInputBoxActive, setContext]);
|
|
179
226
|
var getActiveFormula = useCallback(function () {
|
|
180
227
|
return document.querySelector(".luckysheet-formula-search-item-active");
|
|
181
228
|
}, []);
|
|
182
229
|
var insertSelectedFormula = useCallback(function (formulaName) {
|
|
183
|
-
var
|
|
184
|
-
if (/^=[a-zA-Z]+$/.test(inputRef.current.innerText)) {
|
|
185
|
-
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>");
|
|
186
|
-
inputRef.current.innerHTML = ht;
|
|
187
|
-
var fxEditor = document.getElementById("luckysheet-functionbox-cell");
|
|
188
|
-
if (fxEditor) {
|
|
189
|
-
fxEditor.innerHTML = ht;
|
|
190
|
-
}
|
|
191
|
-
moveCursorToEnd(inputRef.current);
|
|
192
|
-
setContext(function (draftCtx) {
|
|
193
|
-
draftCtx.functionCandidates = [];
|
|
194
|
-
draftCtx.defaultCandidates = [];
|
|
195
|
-
draftCtx.functionHint = formulaName;
|
|
196
|
-
});
|
|
197
|
-
return;
|
|
198
|
-
}
|
|
199
|
-
var textEditor = document.getElementById("luckysheet-rich-text-editor");
|
|
230
|
+
var textEditor = inputRef.current;
|
|
200
231
|
if (!textEditor) return;
|
|
201
|
-
|
|
202
|
-
var
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
var searchTxt = ((_a = getrangeseleciton()) === null || _a === void 0 ? void 0 : _a.textContent) || "";
|
|
213
|
-
var deleteCount = searchTxt === "=" ? 0 : searchTxt.length;
|
|
214
|
-
if (deleteCount > 0 && range.startContainer.nodeType === Node.TEXT_NODE && textEditor.contains(range.startContainer)) {
|
|
215
|
-
var startOffset = Math.max(range.startOffset - deleteCount, 0);
|
|
216
|
-
var endOffset = range.startOffset;
|
|
217
|
-
range.setStart(range.startContainer, startOffset);
|
|
218
|
-
range.setEnd(range.startContainer, endOffset);
|
|
219
|
-
range.deleteContents();
|
|
220
|
-
}
|
|
221
|
-
textEditor.querySelectorAll(".luckysheet-formula-text-func, .luckysheet-formula-text-lpar").forEach(function (el) {
|
|
222
|
-
return el.remove();
|
|
223
|
-
});
|
|
224
|
-
var funcNode = new DOMParser().parseFromString("<span dir=\"auto\" class=\"luckysheet-formula-text-func\">".concat(formulaName, "</span>"), "text/html").body.firstChild;
|
|
225
|
-
var parNode = new DOMParser().parseFromString("<span dir=\"auto\" class=\"luckysheet-formula-text-lpar\">(</span>", "text/html").body.firstChild;
|
|
226
|
-
if (range && parNode && funcNode) {
|
|
227
|
-
range.insertNode(funcNode);
|
|
228
|
-
range.collapse(false);
|
|
229
|
-
range.insertNode(parNode);
|
|
230
|
-
range.collapse(false);
|
|
231
|
-
selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
|
|
232
|
-
selection === null || selection === void 0 ? void 0 : selection.addRange(range);
|
|
233
|
-
}
|
|
232
|
+
var fxEditor = document.getElementById("luckysheet-functionbox-cell");
|
|
233
|
+
var _a = buildFormulaSuggestionText(textEditor, formulaName),
|
|
234
|
+
text = _a.text,
|
|
235
|
+
caretOffset = _a.caretOffset;
|
|
236
|
+
var safeText = escapeScriptTag(text);
|
|
237
|
+
var html = safeText.startsWith("=") ? functionHTMLGenerate(safeText) : escapeHTMLTag(safeText);
|
|
238
|
+
textEditor.innerHTML = html;
|
|
239
|
+
if (fxEditor) {
|
|
240
|
+
fxEditor.innerHTML = html;
|
|
241
|
+
}
|
|
242
|
+
setCursorPosition(textEditor, caretOffset);
|
|
234
243
|
setContext(function (draftCtx) {
|
|
235
244
|
draftCtx.functionCandidates = [];
|
|
236
245
|
draftCtx.defaultCandidates = [];
|
|
@@ -270,10 +279,135 @@ var InputBox = function InputBox() {
|
|
|
270
279
|
event.stopPropagation();
|
|
271
280
|
event.preventDefault();
|
|
272
281
|
};
|
|
282
|
+
useEffect(function () {
|
|
283
|
+
var _a;
|
|
284
|
+
var cellInputEl = refs.cellInput.current;
|
|
285
|
+
if (!((_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0]) || !cellInputEl) return;
|
|
286
|
+
setContext(function (ctx) {
|
|
287
|
+
var _a;
|
|
288
|
+
var currentSelection = (_a = ctx.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[ctx.luckysheet_select_save.length - 1];
|
|
289
|
+
if (!currentSelection) return;
|
|
290
|
+
var isMouseFormulaRangeDrag = !!ctx.formulaCache.func_selectedrange && (ctx.formulaCache.rangestart || ctx.formulaCache.rangedrag_column_start || ctx.formulaCache.rangedrag_row_start);
|
|
291
|
+
if (isMouseFormulaRangeDrag) {
|
|
292
|
+
return;
|
|
293
|
+
}
|
|
294
|
+
israngeseleciton(ctx);
|
|
295
|
+
var keyboardSyncRangeIndex = getFormulaRangeIndexForKeyboardSync(cellInputEl);
|
|
296
|
+
if (skipNextAnchorSelectionSyncRef.current && formulaAnchorCellRef.current) {
|
|
297
|
+
var _b = formulaAnchorCellRef.current,
|
|
298
|
+
anchorRow = _b[0],
|
|
299
|
+
anchorCol = _b[1];
|
|
300
|
+
var isAnchorSelection = currentSelection.row_focus === anchorRow && currentSelection.column_focus === anchorCol;
|
|
301
|
+
if (isAnchorSelection) {
|
|
302
|
+
skipNextAnchorSelectionSyncRef.current = false;
|
|
303
|
+
return;
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
var isFormulaMode = isFormulaReferenceInputMode(ctx);
|
|
307
|
+
if (!isFormulaMode) return;
|
|
308
|
+
if (keyboardSyncRangeIndex !== null) {
|
|
309
|
+
ctx.formulaCache.rangechangeindex = keyboardSyncRangeIndex;
|
|
310
|
+
ctx.formulaCache.rangestart = true;
|
|
311
|
+
ctx.formulaCache.rangedrag_column_start = false;
|
|
312
|
+
ctx.formulaCache.rangedrag_row_start = false;
|
|
313
|
+
} else {
|
|
314
|
+
ctx.formulaCache.rangechangeindex = undefined;
|
|
315
|
+
ctx.formulaCache.rangestart = false;
|
|
316
|
+
}
|
|
317
|
+
ctx.formulaCache.rangeSelectionActive = true;
|
|
318
|
+
rangeSetValue === null || rangeSetValue === void 0 ? void 0 : rangeSetValue(ctx, cellInputEl, {
|
|
319
|
+
row: currentSelection.row,
|
|
320
|
+
column: currentSelection.column
|
|
321
|
+
}, refs.fxInput.current);
|
|
322
|
+
rangeHightlightselected(ctx, cellInputEl);
|
|
323
|
+
if (!_.isNil(ctx.formulaCache.rangechangeindex)) {
|
|
324
|
+
ctx.formulaCache.selectingRangeIndex = ctx.formulaCache.rangechangeindex;
|
|
325
|
+
createRangeHightlight(ctx, cellInputEl.innerHTML, ctx.formulaCache.rangechangeindex);
|
|
326
|
+
var rectFromSelection = seletedHighlistByindex(ctx, currentSelection.row[0], currentSelection.row[1], currentSelection.column[0], currentSelection.column[1]);
|
|
327
|
+
if (rectFromSelection) {
|
|
328
|
+
createFormulaRangeSelect(ctx, {
|
|
329
|
+
rangeIndex: ctx.formulaCache.rangechangeindex || 0,
|
|
330
|
+
left: rectFromSelection.left,
|
|
331
|
+
top: rectFromSelection.top,
|
|
332
|
+
width: rectFromSelection.width,
|
|
333
|
+
height: rectFromSelection.height
|
|
334
|
+
});
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
});
|
|
338
|
+
}, [context.luckysheet_select_save, (_d = context.rangeDialog) === null || _d === void 0 ? void 0 : _d.show]);
|
|
339
|
+
var formulaMouseDragSignature = function () {
|
|
340
|
+
var _a, _b, _c, _d;
|
|
341
|
+
var r = context.formulaCache.func_selectedrange;
|
|
342
|
+
if (!r) return "";
|
|
343
|
+
return [(_a = r.row) === null || _a === void 0 ? void 0 : _a[0], (_b = r.row) === null || _b === void 0 ? void 0 : _b[1], (_c = r.column) === null || _c === void 0 ? void 0 : _c[0], (_d = r.column) === null || _d === void 0 ? void 0 : _d[1], r.left_move, r.top_move, r.width_move, r.height_move].join(":");
|
|
344
|
+
}();
|
|
345
|
+
useEffect(function () {
|
|
346
|
+
var _a;
|
|
347
|
+
if (!formulaMouseDragSignature) return;
|
|
348
|
+
if (lastHandledMouseDragSignatureRef.current === formulaMouseDragSignature) {
|
|
349
|
+
return;
|
|
350
|
+
}
|
|
351
|
+
if (!refs.cellInput.current) return;
|
|
352
|
+
var inputText = ((_a = refs.cellInput.current.innerText) === null || _a === void 0 ? void 0 : _a.trim()) || "";
|
|
353
|
+
if (!inputText.startsWith("=")) return;
|
|
354
|
+
var dragRange = context.formulaCache.func_selectedrange;
|
|
355
|
+
if (!dragRange) return;
|
|
356
|
+
lastHandledMouseDragSignatureRef.current = formulaMouseDragSignature;
|
|
357
|
+
setContext(function (ctx) {
|
|
358
|
+
ctx.luckysheet_select_save = [{
|
|
359
|
+
row: [dragRange.row[0], dragRange.row[1]],
|
|
360
|
+
column: [dragRange.column[0], dragRange.column[1]],
|
|
361
|
+
row_focus: _.isNil(dragRange.row_focus) ? dragRange.row[0] : dragRange.row_focus,
|
|
362
|
+
column_focus: _.isNil(dragRange.column_focus) ? dragRange.column[0] : dragRange.column_focus
|
|
363
|
+
}];
|
|
364
|
+
});
|
|
365
|
+
}, [formulaMouseDragSignature, context.formulaCache.func_selectedrange, refs.cellInput, setContext]);
|
|
273
366
|
var onKeyDown = useCallback(function (e) {
|
|
274
367
|
var _a, _b;
|
|
275
368
|
lastKeyDownEventRef.current = new KeyboardEvent(e.type, e.nativeEvent);
|
|
276
369
|
preText.current = inputRef.current.innerText;
|
|
370
|
+
var currentInputText = ((_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.innerText) === null || _b === void 0 ? void 0 : _b.trim()) || "";
|
|
371
|
+
if ((e.key === "=" || currentInputText.startsWith("=")) && context.luckysheetCellUpdate.length === 2 && formulaAnchorCellRef.current == null) {
|
|
372
|
+
setContext(function (draftCtx) {
|
|
373
|
+
draftCtx.formulaCache.rangeSelectionActive = null;
|
|
374
|
+
});
|
|
375
|
+
formulaAnchorCellRef.current = [context.luckysheetCellUpdate[0], context.luckysheetCellUpdate[1]];
|
|
376
|
+
}
|
|
377
|
+
if (e.key === "(" && currentInputText.startsWith("=")) {
|
|
378
|
+
setContext(function (draftCtx) {
|
|
379
|
+
draftCtx.formulaCache.rangeSelectionActive = null;
|
|
380
|
+
});
|
|
381
|
+
}
|
|
382
|
+
if (e.key === "," && context.luckysheetCellUpdate.length > 0 && currentInputText.startsWith("=") && formulaAnchorCellRef.current) {
|
|
383
|
+
setContext(function (draftCtx) {
|
|
384
|
+
draftCtx.formulaCache.rangeSelectionActive = null;
|
|
385
|
+
});
|
|
386
|
+
var _c = formulaAnchorCellRef.current,
|
|
387
|
+
anchorRow_1 = _c[0],
|
|
388
|
+
anchorCol_1 = _c[1];
|
|
389
|
+
skipNextAnchorSelectionSyncRef.current = true;
|
|
390
|
+
setTimeout(function () {
|
|
391
|
+
setContext(function (draftCtx) {
|
|
392
|
+
draftCtx.luckysheetCellUpdate = [anchorRow_1, anchorCol_1];
|
|
393
|
+
draftCtx.luckysheet_select_save = [{
|
|
394
|
+
row: [anchorRow_1, anchorRow_1],
|
|
395
|
+
column: [anchorCol_1, anchorCol_1],
|
|
396
|
+
row_focus: anchorRow_1,
|
|
397
|
+
column_focus: anchorCol_1
|
|
398
|
+
}];
|
|
399
|
+
draftCtx.formulaRangeHighlight = [];
|
|
400
|
+
draftCtx.formulaRangeSelect = undefined;
|
|
401
|
+
draftCtx.formulaCache.selectingRangeIndex = -1;
|
|
402
|
+
draftCtx.formulaCache.func_selectedrange = undefined;
|
|
403
|
+
draftCtx.formulaCache.rangechangeindex = undefined;
|
|
404
|
+
draftCtx.formulaCache.rangestart = false;
|
|
405
|
+
draftCtx.formulaCache.rangedrag_column_start = false;
|
|
406
|
+
draftCtx.formulaCache.rangedrag_row_start = false;
|
|
407
|
+
moveHighlightCell(draftCtx, "down", 0, "rangeOfSelect");
|
|
408
|
+
});
|
|
409
|
+
}, 0);
|
|
410
|
+
}
|
|
277
411
|
if (e.metaKey && context.luckysheetCellUpdate.length > 0) {
|
|
278
412
|
if (e.code === "KeyB") {
|
|
279
413
|
handleBold(context, inputRef.current);
|
|
@@ -294,6 +428,7 @@ var InputBox = function InputBox() {
|
|
|
294
428
|
setCommaCount(currentCommaCount);
|
|
295
429
|
}
|
|
296
430
|
var allowListNavigation = true;
|
|
431
|
+
var isArrowKey = e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight";
|
|
297
432
|
if (e.key === "Delete" || e.key === "Backspace") {
|
|
298
433
|
if (isComposingRef.current) requestAnimationFrame(ensureNotEmpty);
|
|
299
434
|
if (getCursorPosition(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current.innerText.length)) {
|
|
@@ -302,39 +437,8 @@ var InputBox = function InputBox() {
|
|
|
302
437
|
}, 5);
|
|
303
438
|
}
|
|
304
439
|
}
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
refCell = decrementRow(placeRef.current);
|
|
308
|
-
} else if (e.key === "ArrowDown") {
|
|
309
|
-
refCell = incrementRow(placeRef.current);
|
|
310
|
-
} else if (e.key === "ArrowLeft") {
|
|
311
|
-
refCell = decrementColumn(placeRef.current);
|
|
312
|
-
} else if (e.key === "ArrowRight") {
|
|
313
|
-
refCell = incrementColumn(placeRef.current);
|
|
314
|
-
}
|
|
315
|
-
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")) {
|
|
316
|
-
var parser = new DOMParser();
|
|
317
|
-
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");
|
|
318
|
-
var spans = doc.querySelectorAll("span");
|
|
319
|
-
var lastSpan = spans[spans.length - 1];
|
|
320
|
-
var notFunctionInit = !((_b = document.getElementById("luckysheet-rich-text-editor")) === null || _b === void 0 ? void 0 : _b.innerText.includes("("));
|
|
321
|
-
var arrowRefNotAllowed = (lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText.includes(")")) || notFunctionInit && /^[a-zA-Z]+$/.test(lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText) && !_.includes(["="], lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText);
|
|
322
|
-
if (((lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText) === "(" || (lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText) === "," || (lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText.includes(":")) || (lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText) !== ")") && !(lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText.includes('"')) && !isLetterNumberPattern(lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText) && !arrowRefNotAllowed && !/^[a-zA-Z]+$/.test(lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText)) {
|
|
323
|
-
allowListNavigation = false;
|
|
324
|
-
inputRef.current.innerHTML = "".concat(inputRef.current.innerHTML, "<span class=\"fortune-formula-functionrange-cell\" rangeindex=\"0\" dir=\"auto\" style=\"color:#c1232b;\">").concat(refCell, "</span>");
|
|
325
|
-
setTimeout(function () {
|
|
326
|
-
moveCursorToEnd(inputRef.current);
|
|
327
|
-
}, 1);
|
|
328
|
-
}
|
|
329
|
-
if (isLetterNumberPattern(lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText)) {
|
|
330
|
-
allowListNavigation = false;
|
|
331
|
-
var htmlR = removeLastSpan(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current.innerHTML);
|
|
332
|
-
inputRef.current.innerHTML = "".concat(htmlR, "<span class=\"fortune-formula-functionrange-cell\" rangeindex=\"0\" dir=\"auto\" style=\"color:#c1232b;\">").concat(refCell, "</span>");
|
|
333
|
-
moveCursorToEnd(inputRef.current);
|
|
334
|
-
setTimeout(function () {
|
|
335
|
-
moveCursorToEnd(inputRef.current);
|
|
336
|
-
}, 1);
|
|
337
|
-
}
|
|
440
|
+
if (isArrowKey && isFormulaReferenceInputMode(context)) {
|
|
441
|
+
allowListNavigation = false;
|
|
338
442
|
}
|
|
339
443
|
if (e.key === "Escape" && context.luckysheetCellUpdate.length > 0) {
|
|
340
444
|
setContext(function (draftCtx) {
|
|
@@ -411,7 +515,7 @@ var InputBox = function InputBox() {
|
|
|
411
515
|
}
|
|
412
516
|
};
|
|
413
517
|
var onChange = useCallback(function (__, isBlur) {
|
|
414
|
-
var _a;
|
|
518
|
+
var _a, _b, _c;
|
|
415
519
|
if (context.isFlvReadOnly) return;
|
|
416
520
|
handleHideShowHint();
|
|
417
521
|
if (((_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.innerText.includes("=")) && /^=?[A-Za-z]*$/.test(getLastInputSpanText())) {
|
|
@@ -424,7 +528,16 @@ var InputBox = function InputBox() {
|
|
|
424
528
|
setCommaCount(currentCommaCount);
|
|
425
529
|
}
|
|
426
530
|
var e = lastKeyDownEventRef.current;
|
|
427
|
-
if (!e)
|
|
531
|
+
if (!e) {
|
|
532
|
+
var cellEl_1 = refs.cellInput.current;
|
|
533
|
+
if (cellEl_1 && (((_b = cellEl_1.innerText) === null || _b === void 0 ? void 0 : _b.trim().startsWith("=")) || ((_c = cellEl_1.textContent) === null || _c === void 0 ? void 0 : _c.trim().startsWith("=")))) {
|
|
534
|
+
setContext(function (draftCtx) {
|
|
535
|
+
if (!isAllowEdit(draftCtx, draftCtx.luckysheet_select_save)) return;
|
|
536
|
+
rangeHightlightselected(draftCtx, cellEl_1);
|
|
537
|
+
});
|
|
538
|
+
}
|
|
539
|
+
return;
|
|
540
|
+
}
|
|
428
541
|
var kcode = e.keyCode;
|
|
429
542
|
if (!kcode) return;
|
|
430
543
|
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) {
|
|
@@ -480,7 +593,7 @@ var InputBox = function InputBox() {
|
|
|
480
593
|
zIndex: _.isEmpty(context.luckysheetCellUpdate) ? -1 : 19,
|
|
481
594
|
display: "block"
|
|
482
595
|
};
|
|
483
|
-
}, [firstSelection, (
|
|
596
|
+
}, [firstSelection, (_e = context.rangeDialog) === null || _e === void 0 ? void 0 : _e.show, context.luckysheetCellUpdate, refs.cellArea, isInputBoxActive, frozenPosition, context.scrollLeft, context.scrollTop]);
|
|
484
597
|
useEffect(function () {
|
|
485
598
|
var _a;
|
|
486
599
|
if (firstSelection && !((_a = context.rangeDialog) === null || _a === void 0 ? void 0 : _a.show) && !isInputBoxActive && !_.isEmpty(context.luckysheetCellUpdate)) {
|
|
@@ -496,7 +609,7 @@ var InputBox = function InputBox() {
|
|
|
496
609
|
setIsInputBoxActive(true);
|
|
497
610
|
}
|
|
498
611
|
}
|
|
499
|
-
}, [firstSelection, (
|
|
612
|
+
}, [firstSelection, (_f = context.rangeDialog) === null || _f === void 0 ? void 0 : _f.show, context.luckysheetCellUpdate, isInputBoxActive, context.scrollLeft, context.scrollTop, refs.cellArea]);
|
|
500
613
|
var getAddressIndicatorPosition = useCallback(function () {
|
|
501
614
|
var _a;
|
|
502
615
|
if (!firstSelection || ((_a = context.rangeDialog) === null || _a === void 0 ? void 0 : _a.show)) {
|
|
@@ -509,7 +622,7 @@ var InputBox = function InputBox() {
|
|
|
509
622
|
left: "0",
|
|
510
623
|
display: "block"
|
|
511
624
|
};
|
|
512
|
-
}, [firstSelection, (
|
|
625
|
+
}, [firstSelection, (_g = context.rangeDialog) === null || _g === void 0 ? void 0 : _g.show]);
|
|
513
626
|
var getCellAddress = useCallback(function () {
|
|
514
627
|
if (!firstSelection) return "";
|
|
515
628
|
var rowIndex = firstSelection.row_focus || 0;
|
|
@@ -559,10 +672,9 @@ var InputBox = function InputBox() {
|
|
|
559
672
|
};
|
|
560
673
|
});
|
|
561
674
|
setLinkSelectionHighlightRects(relative);
|
|
562
|
-
}, [(
|
|
675
|
+
}, [(_h = context.linkCard) === null || _h === void 0 ? void 0 : _h.applyToSelection, (_j = context.linkCard) === null || _j === void 0 ? void 0 : _j.selectionOffsets, (_k = context.linkCard) === null || _k === void 0 ? void 0 : _k.r, (_l = context.linkCard) === null || _l === void 0 ? void 0 : _l.c, context.luckysheetCellUpdate]);
|
|
563
676
|
var wraperGetCell = function wraperGetCell() {
|
|
564
677
|
var cell = getCellAddress();
|
|
565
|
-
placeRef.current = cell;
|
|
566
678
|
if (activeRefCell !== cell) {
|
|
567
679
|
setActiveRefCell(cell);
|
|
568
680
|
}
|
|
@@ -586,6 +698,7 @@ var InputBox = function InputBox() {
|
|
|
586
698
|
}, []);
|
|
587
699
|
var functionName = context.functionHint || getFunctionNameFromInput();
|
|
588
700
|
var fn = functionName ? context.formulaCache.functionlistMap[functionName] : null;
|
|
701
|
+
var inputBoxBaseSelection = isInputBoxActive && firstSelectionActiveCell ? firstSelectionActiveCell : firstSelection;
|
|
589
702
|
return /*#__PURE__*/React.createElement("div", {
|
|
590
703
|
className: "luckysheet-input-box",
|
|
591
704
|
id: "luckysheet-input-box",
|
|
@@ -596,16 +709,16 @@ var InputBox = function InputBox() {
|
|
|
596
709
|
onMouseUp: function onMouseUp(e) {
|
|
597
710
|
return e.stopPropagation();
|
|
598
711
|
}
|
|
599
|
-
}, firstSelection && !((
|
|
712
|
+
}, firstSelection && !((_m = context.rangeDialog) === null || _m === void 0 ? void 0 : _m.show) && (/*#__PURE__*/React.createElement("div", {
|
|
600
713
|
className: "luckysheet-cell-address-indicator",
|
|
601
714
|
style: getAddressIndicatorPosition()
|
|
602
715
|
}, wraperGetCell())), /*#__PURE__*/React.createElement("div", {
|
|
603
716
|
ref: inputBoxInnerRef,
|
|
604
717
|
className: "luckysheet-input-box-inner",
|
|
605
|
-
style:
|
|
718
|
+
style: inputBoxBaseSelection ? __assign({
|
|
606
719
|
position: "relative",
|
|
607
|
-
minWidth:
|
|
608
|
-
minHeight:
|
|
720
|
+
minWidth: inputBoxBaseSelection.width,
|
|
721
|
+
minHeight: inputBoxBaseSelection.height
|
|
609
722
|
}, inputBoxStyle) : {
|
|
610
723
|
position: "relative"
|
|
611
724
|
}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
export declare function moveCursorToEnd(editableDiv: HTMLDivElement): void;
|
|
2
2
|
export declare function getCursorPosition(editableDiv: HTMLDivElement): number;
|
|
3
|
+
export declare function setCursorPosition(editableDiv: HTMLDivElement, targetOffset: number): void;
|
|
4
|
+
export declare function buildFormulaSuggestionText(editableDiv: HTMLDivElement, formulaName: string): {
|
|
5
|
+
text: string;
|
|
6
|
+
caretOffset: number;
|
|
7
|
+
};
|
|
3
8
|
export declare function isLetterNumberPattern(str: string): boolean;
|
|
4
9
|
export declare function removeLastSpan(htmlString: string): string;
|
|
5
10
|
export declare function numberToColumn(colNumber: number): string;
|
|
@@ -18,6 +18,58 @@ export function getCursorPosition(editableDiv) {
|
|
|
18
18
|
preRange.setEnd(range.endContainer, range.endOffset);
|
|
19
19
|
return preRange.toString().length;
|
|
20
20
|
}
|
|
21
|
+
export function setCursorPosition(editableDiv, targetOffset) {
|
|
22
|
+
var _a, _b;
|
|
23
|
+
editableDiv.focus();
|
|
24
|
+
var selection = window.getSelection();
|
|
25
|
+
if (!selection) return;
|
|
26
|
+
var range = document.createRange();
|
|
27
|
+
var walker = document.createTreeWalker(editableDiv, NodeFilter.SHOW_TEXT);
|
|
28
|
+
var remaining = Math.max(0, targetOffset);
|
|
29
|
+
var node = walker.nextNode();
|
|
30
|
+
while (node) {
|
|
31
|
+
var textLength = (_b = (_a = node.textContent) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
|
|
32
|
+
if (remaining <= textLength) {
|
|
33
|
+
range.setStart(node, remaining);
|
|
34
|
+
range.collapse(true);
|
|
35
|
+
selection.removeAllRanges();
|
|
36
|
+
selection.addRange(range);
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
remaining -= textLength;
|
|
40
|
+
node = walker.nextNode();
|
|
41
|
+
}
|
|
42
|
+
range.selectNodeContents(editableDiv);
|
|
43
|
+
range.collapse(false);
|
|
44
|
+
selection.removeAllRanges();
|
|
45
|
+
selection.addRange(range);
|
|
46
|
+
}
|
|
47
|
+
export function buildFormulaSuggestionText(editableDiv, formulaName) {
|
|
48
|
+
var fullText = editableDiv.innerText || "";
|
|
49
|
+
var selection = window.getSelection();
|
|
50
|
+
var selectionInEditor = !!(selection === null || selection === void 0 ? void 0 : selection.rangeCount) && editableDiv.contains(selection.getRangeAt(0).startContainer);
|
|
51
|
+
var caretOffset = selectionInEditor ? getCursorPosition(editableDiv) : fullText.length;
|
|
52
|
+
var safeCaretOffset = Math.max(0, Math.min(caretOffset, fullText.length));
|
|
53
|
+
var beforeCaret = fullText.slice(0, safeCaretOffset);
|
|
54
|
+
var afterCaret = fullText.slice(safeCaretOffset);
|
|
55
|
+
var replaceStart = safeCaretOffset;
|
|
56
|
+
var tokenMatch = beforeCaret.match(/[A-Za-z_][A-Za-z0-9_]*$/);
|
|
57
|
+
if (tokenMatch) {
|
|
58
|
+
var token = tokenMatch[0];
|
|
59
|
+
var tokenStart = safeCaretOffset - token.length;
|
|
60
|
+
var charBeforeToken = tokenStart > 0 ? beforeCaret[tokenStart - 1] : "";
|
|
61
|
+
if (tokenStart === 0 || /[\s=(,+\-*/&^<>]$/.test(charBeforeToken)) {
|
|
62
|
+
replaceStart = tokenStart;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
var shouldAddOpeningParen = !afterCaret.startsWith("(");
|
|
66
|
+
var insertedText = "".concat(formulaName).concat(shouldAddOpeningParen ? "(" : "");
|
|
67
|
+
var nextText = fullText.slice(0, replaceStart) + insertedText + afterCaret;
|
|
68
|
+
return {
|
|
69
|
+
text: nextText,
|
|
70
|
+
caretOffset: replaceStart + insertedText.length
|
|
71
|
+
};
|
|
72
|
+
}
|
|
21
73
|
export function isLetterNumberPattern(str) {
|
|
22
74
|
var regex = /^[a-zA-Z]+\d+$/;
|
|
23
75
|
return regex.test(str);
|
|
@@ -94,13 +94,19 @@ var FxEditor = function FxEditor() {
|
|
|
94
94
|
return document.querySelector(".luckysheet-formula-search-item-active");
|
|
95
95
|
}, []);
|
|
96
96
|
var insertSelectedFormula = (0, _react.useCallback)(function (formulaName) {
|
|
97
|
-
var
|
|
98
|
-
|
|
97
|
+
var fxEditor = refs.fxInput.current;
|
|
98
|
+
if (!fxEditor) return;
|
|
99
99
|
var cellEditor = document.getElementById("luckysheet-rich-text-editor");
|
|
100
|
+
var _a = (0, _helper.buildFormulaSuggestionText)(fxEditor, formulaName),
|
|
101
|
+
text = _a.text,
|
|
102
|
+
caretOffset = _a.caretOffset;
|
|
103
|
+
var safeText = (0, _fortuneCore.escapeScriptTag)(text);
|
|
104
|
+
var html = safeText.startsWith("=") ? (0, _fortuneCore.functionHTMLGenerate)(safeText) : (0, _fortuneCore.escapeHTMLTag)(safeText);
|
|
105
|
+
fxEditor.innerHTML = html;
|
|
100
106
|
if (cellEditor) {
|
|
101
|
-
cellEditor.innerHTML =
|
|
107
|
+
cellEditor.innerHTML = html;
|
|
102
108
|
}
|
|
103
|
-
(0, _helper.
|
|
109
|
+
(0, _helper.setCursorPosition)(fxEditor, caretOffset);
|
|
104
110
|
setContext(function (draftCtx) {
|
|
105
111
|
draftCtx.functionCandidates = [];
|
|
106
112
|
draftCtx.defaultCandidates = [];
|
|
@@ -29,57 +29,59 @@ var __assign = void 0 && (void 0).__assign || function () {
|
|
|
29
29
|
return __assign.apply(this, arguments);
|
|
30
30
|
};
|
|
31
31
|
var InputBox = function InputBox() {
|
|
32
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
33
|
-
var
|
|
34
|
-
context =
|
|
35
|
-
setContext =
|
|
36
|
-
refs =
|
|
32
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
33
|
+
var _o = (0, _react.useContext)(_context.default),
|
|
34
|
+
context = _o.context,
|
|
35
|
+
setContext = _o.setContext,
|
|
36
|
+
refs = _o.refs;
|
|
37
37
|
var inputRef = (0, _react.useRef)(null);
|
|
38
38
|
var lastKeyDownEventRef = (0, _react.useRef)(null);
|
|
39
39
|
var prevCellUpdate = (0, _usePrevious.default)(context.luckysheetCellUpdate);
|
|
40
40
|
var prevSheetId = (0, _usePrevious.default)(context.currentSheetId);
|
|
41
|
-
var _o = (0, _react.useState)(false),
|
|
42
|
-
isHidenRC = _o[0],
|
|
43
|
-
setIsHidenRC = _o[1];
|
|
44
41
|
var _p = (0, _react.useState)(false),
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
var _q = (0, _react.useState)(
|
|
48
|
-
|
|
49
|
-
|
|
42
|
+
isHidenRC = _p[0],
|
|
43
|
+
setIsHidenRC = _p[1];
|
|
44
|
+
var _q = (0, _react.useState)(false),
|
|
45
|
+
isInputBoxActive = _q[0],
|
|
46
|
+
setIsInputBoxActive = _q[1];
|
|
50
47
|
var _r = (0, _react.useState)(""),
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
var _s = (0, _react.useState)(
|
|
48
|
+
activeCell = _r[0],
|
|
49
|
+
setActiveCell = _r[1];
|
|
50
|
+
var _s = (0, _react.useState)(""),
|
|
51
|
+
activeRefCell = _s[0],
|
|
52
|
+
setActiveRefCell = _s[1];
|
|
53
|
+
var _t = (0, _react.useState)({
|
|
54
54
|
left: 0,
|
|
55
55
|
top: 0
|
|
56
56
|
}),
|
|
57
|
-
frozenPosition =
|
|
58
|
-
setFrozenPosition =
|
|
57
|
+
frozenPosition = _t[0],
|
|
58
|
+
setFrozenPosition = _t[1];
|
|
59
59
|
var firstSelection = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0];
|
|
60
|
-
var
|
|
61
|
-
firstSelectionActiveCell =
|
|
62
|
-
setFirstSelectionActiveCell =
|
|
63
|
-
var
|
|
64
|
-
commaCount =
|
|
65
|
-
setCommaCount =
|
|
60
|
+
var _u = (0, _react.useState)({}),
|
|
61
|
+
firstSelectionActiveCell = _u[0],
|
|
62
|
+
setFirstSelectionActiveCell = _u[1];
|
|
63
|
+
var _v = (0, _react.useState)(0),
|
|
64
|
+
commaCount = _v[0],
|
|
65
|
+
setCommaCount = _v[1];
|
|
66
66
|
var hideFormulaHintLocal = localStorage.getItem("formulaMore") === "true";
|
|
67
|
-
var
|
|
68
|
-
showFormulaHint =
|
|
69
|
-
setShowFormulaHint =
|
|
70
|
-
var
|
|
71
|
-
showSearchHint =
|
|
72
|
-
setShowSearchHint =
|
|
67
|
+
var _w = (0, _react.useState)(!hideFormulaHintLocal),
|
|
68
|
+
showFormulaHint = _w[0],
|
|
69
|
+
setShowFormulaHint = _w[1];
|
|
70
|
+
var _x = (0, _react.useState)(false),
|
|
71
|
+
showSearchHint = _x[0],
|
|
72
|
+
setShowSearchHint = _x[1];
|
|
73
73
|
var row_index = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.row_focus;
|
|
74
74
|
var col_index = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.column_focus;
|
|
75
75
|
var preText = (0, _react.useRef)("");
|
|
76
|
-
var placeRef = (0, _react.useRef)("");
|
|
77
76
|
var isComposingRef = (0, _react.useRef)(false);
|
|
77
|
+
var formulaAnchorCellRef = (0, _react.useRef)(null);
|
|
78
|
+
var skipNextAnchorSelectionSyncRef = (0, _react.useRef)(false);
|
|
79
|
+
var lastHandledMouseDragSignatureRef = (0, _react.useRef)("");
|
|
78
80
|
var ZWSP = "\u200B";
|
|
79
81
|
var inputBoxInnerRef = (0, _react.useRef)(null);
|
|
80
|
-
var
|
|
81
|
-
linkSelectionHighlightRects =
|
|
82
|
-
setLinkSelectionHighlightRects =
|
|
82
|
+
var _y = (0, _react.useState)([]),
|
|
83
|
+
linkSelectionHighlightRects = _y[0],
|
|
84
|
+
setLinkSelectionHighlightRects = _y[1];
|
|
83
85
|
var ensureNotEmpty = function ensureNotEmpty() {
|
|
84
86
|
var el = inputRef.current;
|
|
85
87
|
if (!el) return;
|
|
@@ -176,6 +178,34 @@ var InputBox = function InputBox() {
|
|
|
176
178
|
}
|
|
177
179
|
}
|
|
178
180
|
}, [context.luckysheetCellUpdate]);
|
|
181
|
+
(0, _react.useEffect)(function () {
|
|
182
|
+
var _a;
|
|
183
|
+
if (_lodash.default.isEmpty(context.luckysheetCellUpdate) || !refs.cellInput.current) {
|
|
184
|
+
formulaAnchorCellRef.current = null;
|
|
185
|
+
lastHandledMouseDragSignatureRef.current = "";
|
|
186
|
+
return;
|
|
187
|
+
}
|
|
188
|
+
var inputText = ((_a = refs.cellInput.current.innerText) === null || _a === void 0 ? void 0 : _a.trim()) || "";
|
|
189
|
+
if (!inputText.startsWith("=")) {
|
|
190
|
+
formulaAnchorCellRef.current = null;
|
|
191
|
+
lastHandledMouseDragSignatureRef.current = "";
|
|
192
|
+
}
|
|
193
|
+
}, [context.luckysheetCellUpdate, refs.cellInput]);
|
|
194
|
+
(0, _react.useEffect)(function () {
|
|
195
|
+
if (_lodash.default.isEmpty(context.luckysheetCellUpdate) || _lodash.default.isEmpty(prevCellUpdate) || _lodash.default.isEqual(prevCellUpdate, context.luckysheetCellUpdate)) {
|
|
196
|
+
return;
|
|
197
|
+
}
|
|
198
|
+
setContext(function (ctx) {
|
|
199
|
+
ctx.formulaRangeHighlight = [];
|
|
200
|
+
ctx.formulaRangeSelect = undefined;
|
|
201
|
+
ctx.formulaCache.selectingRangeIndex = -1;
|
|
202
|
+
ctx.formulaCache.func_selectedrange = undefined;
|
|
203
|
+
ctx.formulaCache.rangestart = false;
|
|
204
|
+
ctx.formulaCache.rangedrag_column_start = false;
|
|
205
|
+
ctx.formulaCache.rangedrag_row_start = false;
|
|
206
|
+
ctx.formulaCache.rangechangeindex = undefined;
|
|
207
|
+
});
|
|
208
|
+
}, [context.luckysheetCellUpdate, prevCellUpdate, setContext]);
|
|
179
209
|
(0, _react.useEffect)(function () {
|
|
180
210
|
setIsHidenRC((0, _fortuneCore.isShowHidenCR)(context));
|
|
181
211
|
}, [context.luckysheet_select_save]);
|
|
@@ -185,61 +215,40 @@ var InputBox = function InputBox() {
|
|
|
185
215
|
setIsInputBoxActive(false);
|
|
186
216
|
}
|
|
187
217
|
}, [firstSelection, (_c = context.rangeDialog) === null || _c === void 0 ? void 0 : _c.show, context.luckysheetCellUpdate]);
|
|
218
|
+
(0, _react.useEffect)(function () {
|
|
219
|
+
if (isInputBoxActive) return;
|
|
220
|
+
setContext(function (ctx) {
|
|
221
|
+
if (_lodash.default.isEmpty(ctx.formulaRangeHighlight) && !ctx.formulaRangeSelect && ctx.formulaCache.selectingRangeIndex === -1 && !ctx.formulaCache.func_selectedrange) {
|
|
222
|
+
return;
|
|
223
|
+
}
|
|
224
|
+
ctx.formulaRangeHighlight = [];
|
|
225
|
+
ctx.formulaRangeSelect = undefined;
|
|
226
|
+
ctx.formulaCache.selectingRangeIndex = -1;
|
|
227
|
+
ctx.formulaCache.func_selectedrange = undefined;
|
|
228
|
+
ctx.formulaCache.rangestart = false;
|
|
229
|
+
ctx.formulaCache.rangedrag_column_start = false;
|
|
230
|
+
ctx.formulaCache.rangedrag_row_start = false;
|
|
231
|
+
ctx.formulaCache.rangechangeindex = undefined;
|
|
232
|
+
ctx.formulaCache.rangeSelectionActive = null;
|
|
233
|
+
});
|
|
234
|
+
}, [isInputBoxActive, setContext]);
|
|
188
235
|
var getActiveFormula = (0, _react.useCallback)(function () {
|
|
189
236
|
return document.querySelector(".luckysheet-formula-search-item-active");
|
|
190
237
|
}, []);
|
|
191
238
|
var insertSelectedFormula = (0, _react.useCallback)(function (formulaName) {
|
|
192
|
-
var
|
|
193
|
-
if (/^=[a-zA-Z]+$/.test(inputRef.current.innerText)) {
|
|
194
|
-
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>");
|
|
195
|
-
inputRef.current.innerHTML = ht;
|
|
196
|
-
var fxEditor = document.getElementById("luckysheet-functionbox-cell");
|
|
197
|
-
if (fxEditor) {
|
|
198
|
-
fxEditor.innerHTML = ht;
|
|
199
|
-
}
|
|
200
|
-
(0, _helper.moveCursorToEnd)(inputRef.current);
|
|
201
|
-
setContext(function (draftCtx) {
|
|
202
|
-
draftCtx.functionCandidates = [];
|
|
203
|
-
draftCtx.defaultCandidates = [];
|
|
204
|
-
draftCtx.functionHint = formulaName;
|
|
205
|
-
});
|
|
206
|
-
return;
|
|
207
|
-
}
|
|
208
|
-
var textEditor = document.getElementById("luckysheet-rich-text-editor");
|
|
239
|
+
var textEditor = inputRef.current;
|
|
209
240
|
if (!textEditor) return;
|
|
210
|
-
|
|
211
|
-
var
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
var searchTxt = ((_a = (0, _fortuneCore.getrangeseleciton)()) === null || _a === void 0 ? void 0 : _a.textContent) || "";
|
|
222
|
-
var deleteCount = searchTxt === "=" ? 0 : searchTxt.length;
|
|
223
|
-
if (deleteCount > 0 && range.startContainer.nodeType === Node.TEXT_NODE && textEditor.contains(range.startContainer)) {
|
|
224
|
-
var startOffset = Math.max(range.startOffset - deleteCount, 0);
|
|
225
|
-
var endOffset = range.startOffset;
|
|
226
|
-
range.setStart(range.startContainer, startOffset);
|
|
227
|
-
range.setEnd(range.startContainer, endOffset);
|
|
228
|
-
range.deleteContents();
|
|
229
|
-
}
|
|
230
|
-
textEditor.querySelectorAll(".luckysheet-formula-text-func, .luckysheet-formula-text-lpar").forEach(function (el) {
|
|
231
|
-
return el.remove();
|
|
232
|
-
});
|
|
233
|
-
var funcNode = new DOMParser().parseFromString("<span dir=\"auto\" class=\"luckysheet-formula-text-func\">".concat(formulaName, "</span>"), "text/html").body.firstChild;
|
|
234
|
-
var parNode = new DOMParser().parseFromString("<span dir=\"auto\" class=\"luckysheet-formula-text-lpar\">(</span>", "text/html").body.firstChild;
|
|
235
|
-
if (range && parNode && funcNode) {
|
|
236
|
-
range.insertNode(funcNode);
|
|
237
|
-
range.collapse(false);
|
|
238
|
-
range.insertNode(parNode);
|
|
239
|
-
range.collapse(false);
|
|
240
|
-
selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
|
|
241
|
-
selection === null || selection === void 0 ? void 0 : selection.addRange(range);
|
|
242
|
-
}
|
|
241
|
+
var fxEditor = document.getElementById("luckysheet-functionbox-cell");
|
|
242
|
+
var _a = (0, _helper.buildFormulaSuggestionText)(textEditor, formulaName),
|
|
243
|
+
text = _a.text,
|
|
244
|
+
caretOffset = _a.caretOffset;
|
|
245
|
+
var safeText = (0, _fortuneCore.escapeScriptTag)(text);
|
|
246
|
+
var html = safeText.startsWith("=") ? (0, _fortuneCore.functionHTMLGenerate)(safeText) : (0, _fortuneCore.escapeHTMLTag)(safeText);
|
|
247
|
+
textEditor.innerHTML = html;
|
|
248
|
+
if (fxEditor) {
|
|
249
|
+
fxEditor.innerHTML = html;
|
|
250
|
+
}
|
|
251
|
+
(0, _helper.setCursorPosition)(textEditor, caretOffset);
|
|
243
252
|
setContext(function (draftCtx) {
|
|
244
253
|
draftCtx.functionCandidates = [];
|
|
245
254
|
draftCtx.defaultCandidates = [];
|
|
@@ -279,10 +288,135 @@ var InputBox = function InputBox() {
|
|
|
279
288
|
event.stopPropagation();
|
|
280
289
|
event.preventDefault();
|
|
281
290
|
};
|
|
291
|
+
(0, _react.useEffect)(function () {
|
|
292
|
+
var _a;
|
|
293
|
+
var cellInputEl = refs.cellInput.current;
|
|
294
|
+
if (!((_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0]) || !cellInputEl) return;
|
|
295
|
+
setContext(function (ctx) {
|
|
296
|
+
var _a;
|
|
297
|
+
var currentSelection = (_a = ctx.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[ctx.luckysheet_select_save.length - 1];
|
|
298
|
+
if (!currentSelection) return;
|
|
299
|
+
var isMouseFormulaRangeDrag = !!ctx.formulaCache.func_selectedrange && (ctx.formulaCache.rangestart || ctx.formulaCache.rangedrag_column_start || ctx.formulaCache.rangedrag_row_start);
|
|
300
|
+
if (isMouseFormulaRangeDrag) {
|
|
301
|
+
return;
|
|
302
|
+
}
|
|
303
|
+
(0, _fortuneCore.israngeseleciton)(ctx);
|
|
304
|
+
var keyboardSyncRangeIndex = (0, _fortuneCore.getFormulaRangeIndexForKeyboardSync)(cellInputEl);
|
|
305
|
+
if (skipNextAnchorSelectionSyncRef.current && formulaAnchorCellRef.current) {
|
|
306
|
+
var _b = formulaAnchorCellRef.current,
|
|
307
|
+
anchorRow = _b[0],
|
|
308
|
+
anchorCol = _b[1];
|
|
309
|
+
var isAnchorSelection = currentSelection.row_focus === anchorRow && currentSelection.column_focus === anchorCol;
|
|
310
|
+
if (isAnchorSelection) {
|
|
311
|
+
skipNextAnchorSelectionSyncRef.current = false;
|
|
312
|
+
return;
|
|
313
|
+
}
|
|
314
|
+
}
|
|
315
|
+
var isFormulaMode = (0, _fortuneCore.isFormulaReferenceInputMode)(ctx);
|
|
316
|
+
if (!isFormulaMode) return;
|
|
317
|
+
if (keyboardSyncRangeIndex !== null) {
|
|
318
|
+
ctx.formulaCache.rangechangeindex = keyboardSyncRangeIndex;
|
|
319
|
+
ctx.formulaCache.rangestart = true;
|
|
320
|
+
ctx.formulaCache.rangedrag_column_start = false;
|
|
321
|
+
ctx.formulaCache.rangedrag_row_start = false;
|
|
322
|
+
} else {
|
|
323
|
+
ctx.formulaCache.rangechangeindex = undefined;
|
|
324
|
+
ctx.formulaCache.rangestart = false;
|
|
325
|
+
}
|
|
326
|
+
ctx.formulaCache.rangeSelectionActive = true;
|
|
327
|
+
_fortuneCore.rangeSetValue === null || _fortuneCore.rangeSetValue === void 0 ? void 0 : (0, _fortuneCore.rangeSetValue)(ctx, cellInputEl, {
|
|
328
|
+
row: currentSelection.row,
|
|
329
|
+
column: currentSelection.column
|
|
330
|
+
}, refs.fxInput.current);
|
|
331
|
+
(0, _fortuneCore.rangeHightlightselected)(ctx, cellInputEl);
|
|
332
|
+
if (!_lodash.default.isNil(ctx.formulaCache.rangechangeindex)) {
|
|
333
|
+
ctx.formulaCache.selectingRangeIndex = ctx.formulaCache.rangechangeindex;
|
|
334
|
+
(0, _fortuneCore.createRangeHightlight)(ctx, cellInputEl.innerHTML, ctx.formulaCache.rangechangeindex);
|
|
335
|
+
var rectFromSelection = (0, _fortuneCore.seletedHighlistByindex)(ctx, currentSelection.row[0], currentSelection.row[1], currentSelection.column[0], currentSelection.column[1]);
|
|
336
|
+
if (rectFromSelection) {
|
|
337
|
+
(0, _fortuneCore.createFormulaRangeSelect)(ctx, {
|
|
338
|
+
rangeIndex: ctx.formulaCache.rangechangeindex || 0,
|
|
339
|
+
left: rectFromSelection.left,
|
|
340
|
+
top: rectFromSelection.top,
|
|
341
|
+
width: rectFromSelection.width,
|
|
342
|
+
height: rectFromSelection.height
|
|
343
|
+
});
|
|
344
|
+
}
|
|
345
|
+
}
|
|
346
|
+
});
|
|
347
|
+
}, [context.luckysheet_select_save, (_d = context.rangeDialog) === null || _d === void 0 ? void 0 : _d.show]);
|
|
348
|
+
var formulaMouseDragSignature = function () {
|
|
349
|
+
var _a, _b, _c, _d;
|
|
350
|
+
var r = context.formulaCache.func_selectedrange;
|
|
351
|
+
if (!r) return "";
|
|
352
|
+
return [(_a = r.row) === null || _a === void 0 ? void 0 : _a[0], (_b = r.row) === null || _b === void 0 ? void 0 : _b[1], (_c = r.column) === null || _c === void 0 ? void 0 : _c[0], (_d = r.column) === null || _d === void 0 ? void 0 : _d[1], r.left_move, r.top_move, r.width_move, r.height_move].join(":");
|
|
353
|
+
}();
|
|
354
|
+
(0, _react.useEffect)(function () {
|
|
355
|
+
var _a;
|
|
356
|
+
if (!formulaMouseDragSignature) return;
|
|
357
|
+
if (lastHandledMouseDragSignatureRef.current === formulaMouseDragSignature) {
|
|
358
|
+
return;
|
|
359
|
+
}
|
|
360
|
+
if (!refs.cellInput.current) return;
|
|
361
|
+
var inputText = ((_a = refs.cellInput.current.innerText) === null || _a === void 0 ? void 0 : _a.trim()) || "";
|
|
362
|
+
if (!inputText.startsWith("=")) return;
|
|
363
|
+
var dragRange = context.formulaCache.func_selectedrange;
|
|
364
|
+
if (!dragRange) return;
|
|
365
|
+
lastHandledMouseDragSignatureRef.current = formulaMouseDragSignature;
|
|
366
|
+
setContext(function (ctx) {
|
|
367
|
+
ctx.luckysheet_select_save = [{
|
|
368
|
+
row: [dragRange.row[0], dragRange.row[1]],
|
|
369
|
+
column: [dragRange.column[0], dragRange.column[1]],
|
|
370
|
+
row_focus: _lodash.default.isNil(dragRange.row_focus) ? dragRange.row[0] : dragRange.row_focus,
|
|
371
|
+
column_focus: _lodash.default.isNil(dragRange.column_focus) ? dragRange.column[0] : dragRange.column_focus
|
|
372
|
+
}];
|
|
373
|
+
});
|
|
374
|
+
}, [formulaMouseDragSignature, context.formulaCache.func_selectedrange, refs.cellInput, setContext]);
|
|
282
375
|
var onKeyDown = (0, _react.useCallback)(function (e) {
|
|
283
376
|
var _a, _b;
|
|
284
377
|
lastKeyDownEventRef.current = new KeyboardEvent(e.type, e.nativeEvent);
|
|
285
378
|
preText.current = inputRef.current.innerText;
|
|
379
|
+
var currentInputText = ((_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.innerText) === null || _b === void 0 ? void 0 : _b.trim()) || "";
|
|
380
|
+
if ((e.key === "=" || currentInputText.startsWith("=")) && context.luckysheetCellUpdate.length === 2 && formulaAnchorCellRef.current == null) {
|
|
381
|
+
setContext(function (draftCtx) {
|
|
382
|
+
draftCtx.formulaCache.rangeSelectionActive = null;
|
|
383
|
+
});
|
|
384
|
+
formulaAnchorCellRef.current = [context.luckysheetCellUpdate[0], context.luckysheetCellUpdate[1]];
|
|
385
|
+
}
|
|
386
|
+
if (e.key === "(" && currentInputText.startsWith("=")) {
|
|
387
|
+
setContext(function (draftCtx) {
|
|
388
|
+
draftCtx.formulaCache.rangeSelectionActive = null;
|
|
389
|
+
});
|
|
390
|
+
}
|
|
391
|
+
if (e.key === "," && context.luckysheetCellUpdate.length > 0 && currentInputText.startsWith("=") && formulaAnchorCellRef.current) {
|
|
392
|
+
setContext(function (draftCtx) {
|
|
393
|
+
draftCtx.formulaCache.rangeSelectionActive = null;
|
|
394
|
+
});
|
|
395
|
+
var _c = formulaAnchorCellRef.current,
|
|
396
|
+
anchorRow_1 = _c[0],
|
|
397
|
+
anchorCol_1 = _c[1];
|
|
398
|
+
skipNextAnchorSelectionSyncRef.current = true;
|
|
399
|
+
setTimeout(function () {
|
|
400
|
+
setContext(function (draftCtx) {
|
|
401
|
+
draftCtx.luckysheetCellUpdate = [anchorRow_1, anchorCol_1];
|
|
402
|
+
draftCtx.luckysheet_select_save = [{
|
|
403
|
+
row: [anchorRow_1, anchorRow_1],
|
|
404
|
+
column: [anchorCol_1, anchorCol_1],
|
|
405
|
+
row_focus: anchorRow_1,
|
|
406
|
+
column_focus: anchorCol_1
|
|
407
|
+
}];
|
|
408
|
+
draftCtx.formulaRangeHighlight = [];
|
|
409
|
+
draftCtx.formulaRangeSelect = undefined;
|
|
410
|
+
draftCtx.formulaCache.selectingRangeIndex = -1;
|
|
411
|
+
draftCtx.formulaCache.func_selectedrange = undefined;
|
|
412
|
+
draftCtx.formulaCache.rangechangeindex = undefined;
|
|
413
|
+
draftCtx.formulaCache.rangestart = false;
|
|
414
|
+
draftCtx.formulaCache.rangedrag_column_start = false;
|
|
415
|
+
draftCtx.formulaCache.rangedrag_row_start = false;
|
|
416
|
+
(0, _fortuneCore.moveHighlightCell)(draftCtx, "down", 0, "rangeOfSelect");
|
|
417
|
+
});
|
|
418
|
+
}, 0);
|
|
419
|
+
}
|
|
286
420
|
if (e.metaKey && context.luckysheetCellUpdate.length > 0) {
|
|
287
421
|
if (e.code === "KeyB") {
|
|
288
422
|
(0, _fortuneCore.handleBold)(context, inputRef.current);
|
|
@@ -303,6 +437,7 @@ var InputBox = function InputBox() {
|
|
|
303
437
|
setCommaCount(currentCommaCount);
|
|
304
438
|
}
|
|
305
439
|
var allowListNavigation = true;
|
|
440
|
+
var isArrowKey = e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight";
|
|
306
441
|
if (e.key === "Delete" || e.key === "Backspace") {
|
|
307
442
|
if (isComposingRef.current) requestAnimationFrame(ensureNotEmpty);
|
|
308
443
|
if ((0, _helper.getCursorPosition)(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current.innerText.length)) {
|
|
@@ -311,39 +446,8 @@ var InputBox = function InputBox() {
|
|
|
311
446
|
}, 5);
|
|
312
447
|
}
|
|
313
448
|
}
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
refCell = (0, _helper.decrementRow)(placeRef.current);
|
|
317
|
-
} else if (e.key === "ArrowDown") {
|
|
318
|
-
refCell = (0, _helper.incrementRow)(placeRef.current);
|
|
319
|
-
} else if (e.key === "ArrowLeft") {
|
|
320
|
-
refCell = (0, _helper.decrementColumn)(placeRef.current);
|
|
321
|
-
} else if (e.key === "ArrowRight") {
|
|
322
|
-
refCell = (0, _helper.incrementColumn)(placeRef.current);
|
|
323
|
-
}
|
|
324
|
-
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")) {
|
|
325
|
-
var parser = new DOMParser();
|
|
326
|
-
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");
|
|
327
|
-
var spans = doc.querySelectorAll("span");
|
|
328
|
-
var lastSpan = spans[spans.length - 1];
|
|
329
|
-
var notFunctionInit = !((_b = document.getElementById("luckysheet-rich-text-editor")) === null || _b === void 0 ? void 0 : _b.innerText.includes("("));
|
|
330
|
-
var arrowRefNotAllowed = (lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText.includes(")")) || notFunctionInit && /^[a-zA-Z]+$/.test(lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText) && !_lodash.default.includes(["="], lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText);
|
|
331
|
-
if (((lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText) === "(" || (lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText) === "," || (lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText.includes(":")) || (lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText) !== ")") && !(lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText.includes('"')) && !(0, _helper.isLetterNumberPattern)(lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText) && !arrowRefNotAllowed && !/^[a-zA-Z]+$/.test(lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText)) {
|
|
332
|
-
allowListNavigation = false;
|
|
333
|
-
inputRef.current.innerHTML = "".concat(inputRef.current.innerHTML, "<span class=\"fortune-formula-functionrange-cell\" rangeindex=\"0\" dir=\"auto\" style=\"color:#c1232b;\">").concat(refCell, "</span>");
|
|
334
|
-
setTimeout(function () {
|
|
335
|
-
(0, _helper.moveCursorToEnd)(inputRef.current);
|
|
336
|
-
}, 1);
|
|
337
|
-
}
|
|
338
|
-
if ((0, _helper.isLetterNumberPattern)(lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText)) {
|
|
339
|
-
allowListNavigation = false;
|
|
340
|
-
var htmlR = (0, _helper.removeLastSpan)(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current.innerHTML);
|
|
341
|
-
inputRef.current.innerHTML = "".concat(htmlR, "<span class=\"fortune-formula-functionrange-cell\" rangeindex=\"0\" dir=\"auto\" style=\"color:#c1232b;\">").concat(refCell, "</span>");
|
|
342
|
-
(0, _helper.moveCursorToEnd)(inputRef.current);
|
|
343
|
-
setTimeout(function () {
|
|
344
|
-
(0, _helper.moveCursorToEnd)(inputRef.current);
|
|
345
|
-
}, 1);
|
|
346
|
-
}
|
|
449
|
+
if (isArrowKey && (0, _fortuneCore.isFormulaReferenceInputMode)(context)) {
|
|
450
|
+
allowListNavigation = false;
|
|
347
451
|
}
|
|
348
452
|
if (e.key === "Escape" && context.luckysheetCellUpdate.length > 0) {
|
|
349
453
|
setContext(function (draftCtx) {
|
|
@@ -420,7 +524,7 @@ var InputBox = function InputBox() {
|
|
|
420
524
|
}
|
|
421
525
|
};
|
|
422
526
|
var onChange = (0, _react.useCallback)(function (__, isBlur) {
|
|
423
|
-
var _a;
|
|
527
|
+
var _a, _b, _c;
|
|
424
528
|
if (context.isFlvReadOnly) return;
|
|
425
529
|
handleHideShowHint();
|
|
426
530
|
if (((_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.innerText.includes("=")) && /^=?[A-Za-z]*$/.test(getLastInputSpanText())) {
|
|
@@ -433,7 +537,16 @@ var InputBox = function InputBox() {
|
|
|
433
537
|
setCommaCount(currentCommaCount);
|
|
434
538
|
}
|
|
435
539
|
var e = lastKeyDownEventRef.current;
|
|
436
|
-
if (!e)
|
|
540
|
+
if (!e) {
|
|
541
|
+
var cellEl_1 = refs.cellInput.current;
|
|
542
|
+
if (cellEl_1 && (((_b = cellEl_1.innerText) === null || _b === void 0 ? void 0 : _b.trim().startsWith("=")) || ((_c = cellEl_1.textContent) === null || _c === void 0 ? void 0 : _c.trim().startsWith("=")))) {
|
|
543
|
+
setContext(function (draftCtx) {
|
|
544
|
+
if (!(0, _fortuneCore.isAllowEdit)(draftCtx, draftCtx.luckysheet_select_save)) return;
|
|
545
|
+
(0, _fortuneCore.rangeHightlightselected)(draftCtx, cellEl_1);
|
|
546
|
+
});
|
|
547
|
+
}
|
|
548
|
+
return;
|
|
549
|
+
}
|
|
437
550
|
var kcode = e.keyCode;
|
|
438
551
|
if (!kcode) return;
|
|
439
552
|
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) {
|
|
@@ -489,7 +602,7 @@ var InputBox = function InputBox() {
|
|
|
489
602
|
zIndex: _lodash.default.isEmpty(context.luckysheetCellUpdate) ? -1 : 19,
|
|
490
603
|
display: "block"
|
|
491
604
|
};
|
|
492
|
-
}, [firstSelection, (
|
|
605
|
+
}, [firstSelection, (_e = context.rangeDialog) === null || _e === void 0 ? void 0 : _e.show, context.luckysheetCellUpdate, refs.cellArea, isInputBoxActive, frozenPosition, context.scrollLeft, context.scrollTop]);
|
|
493
606
|
(0, _react.useEffect)(function () {
|
|
494
607
|
var _a;
|
|
495
608
|
if (firstSelection && !((_a = context.rangeDialog) === null || _a === void 0 ? void 0 : _a.show) && !isInputBoxActive && !_lodash.default.isEmpty(context.luckysheetCellUpdate)) {
|
|
@@ -505,7 +618,7 @@ var InputBox = function InputBox() {
|
|
|
505
618
|
setIsInputBoxActive(true);
|
|
506
619
|
}
|
|
507
620
|
}
|
|
508
|
-
}, [firstSelection, (
|
|
621
|
+
}, [firstSelection, (_f = context.rangeDialog) === null || _f === void 0 ? void 0 : _f.show, context.luckysheetCellUpdate, isInputBoxActive, context.scrollLeft, context.scrollTop, refs.cellArea]);
|
|
509
622
|
var getAddressIndicatorPosition = (0, _react.useCallback)(function () {
|
|
510
623
|
var _a;
|
|
511
624
|
if (!firstSelection || ((_a = context.rangeDialog) === null || _a === void 0 ? void 0 : _a.show)) {
|
|
@@ -518,7 +631,7 @@ var InputBox = function InputBox() {
|
|
|
518
631
|
left: "0",
|
|
519
632
|
display: "block"
|
|
520
633
|
};
|
|
521
|
-
}, [firstSelection, (
|
|
634
|
+
}, [firstSelection, (_g = context.rangeDialog) === null || _g === void 0 ? void 0 : _g.show]);
|
|
522
635
|
var getCellAddress = (0, _react.useCallback)(function () {
|
|
523
636
|
if (!firstSelection) return "";
|
|
524
637
|
var rowIndex = firstSelection.row_focus || 0;
|
|
@@ -568,10 +681,9 @@ var InputBox = function InputBox() {
|
|
|
568
681
|
};
|
|
569
682
|
});
|
|
570
683
|
setLinkSelectionHighlightRects(relative);
|
|
571
|
-
}, [(
|
|
684
|
+
}, [(_h = context.linkCard) === null || _h === void 0 ? void 0 : _h.applyToSelection, (_j = context.linkCard) === null || _j === void 0 ? void 0 : _j.selectionOffsets, (_k = context.linkCard) === null || _k === void 0 ? void 0 : _k.r, (_l = context.linkCard) === null || _l === void 0 ? void 0 : _l.c, context.luckysheetCellUpdate]);
|
|
572
685
|
var wraperGetCell = function wraperGetCell() {
|
|
573
686
|
var cell = getCellAddress();
|
|
574
|
-
placeRef.current = cell;
|
|
575
687
|
if (activeRefCell !== cell) {
|
|
576
688
|
setActiveRefCell(cell);
|
|
577
689
|
}
|
|
@@ -595,6 +707,7 @@ var InputBox = function InputBox() {
|
|
|
595
707
|
}, []);
|
|
596
708
|
var functionName = context.functionHint || getFunctionNameFromInput();
|
|
597
709
|
var fn = functionName ? context.formulaCache.functionlistMap[functionName] : null;
|
|
710
|
+
var inputBoxBaseSelection = isInputBoxActive && firstSelectionActiveCell ? firstSelectionActiveCell : firstSelection;
|
|
598
711
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
599
712
|
className: "luckysheet-input-box",
|
|
600
713
|
id: "luckysheet-input-box",
|
|
@@ -605,16 +718,16 @@ var InputBox = function InputBox() {
|
|
|
605
718
|
onMouseUp: function onMouseUp(e) {
|
|
606
719
|
return e.stopPropagation();
|
|
607
720
|
}
|
|
608
|
-
}, firstSelection && !((
|
|
721
|
+
}, firstSelection && !((_m = context.rangeDialog) === null || _m === void 0 ? void 0 : _m.show) && (/*#__PURE__*/_react.default.createElement("div", {
|
|
609
722
|
className: "luckysheet-cell-address-indicator",
|
|
610
723
|
style: getAddressIndicatorPosition()
|
|
611
724
|
}, wraperGetCell())), /*#__PURE__*/_react.default.createElement("div", {
|
|
612
725
|
ref: inputBoxInnerRef,
|
|
613
726
|
className: "luckysheet-input-box-inner",
|
|
614
|
-
style:
|
|
727
|
+
style: inputBoxBaseSelection ? __assign({
|
|
615
728
|
position: "relative",
|
|
616
|
-
minWidth:
|
|
617
|
-
minHeight:
|
|
729
|
+
minWidth: inputBoxBaseSelection.width,
|
|
730
|
+
minHeight: inputBoxBaseSelection.height
|
|
618
731
|
}, inputBoxStyle) : {
|
|
619
732
|
position: "relative"
|
|
620
733
|
}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
export declare function moveCursorToEnd(editableDiv: HTMLDivElement): void;
|
|
2
2
|
export declare function getCursorPosition(editableDiv: HTMLDivElement): number;
|
|
3
|
+
export declare function setCursorPosition(editableDiv: HTMLDivElement, targetOffset: number): void;
|
|
4
|
+
export declare function buildFormulaSuggestionText(editableDiv: HTMLDivElement, formulaName: string): {
|
|
5
|
+
text: string;
|
|
6
|
+
caretOffset: number;
|
|
7
|
+
};
|
|
3
8
|
export declare function isLetterNumberPattern(str: string): boolean;
|
|
4
9
|
export declare function removeLastSpan(htmlString: string): string;
|
|
5
10
|
export declare function numberToColumn(colNumber: number): string;
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
+
exports.buildFormulaSuggestionText = buildFormulaSuggestionText;
|
|
6
7
|
exports.countCommasBeforeCursor = countCommasBeforeCursor;
|
|
7
8
|
exports.decrementColumn = decrementColumn;
|
|
8
9
|
exports.decrementRow = decrementRow;
|
|
@@ -13,6 +14,7 @@ exports.isLetterNumberPattern = isLetterNumberPattern;
|
|
|
13
14
|
exports.moveCursorToEnd = moveCursorToEnd;
|
|
14
15
|
exports.numberToColumn = numberToColumn;
|
|
15
16
|
exports.removeLastSpan = removeLastSpan;
|
|
17
|
+
exports.setCursorPosition = setCursorPosition;
|
|
16
18
|
function moveCursorToEnd(editableDiv) {
|
|
17
19
|
editableDiv.focus();
|
|
18
20
|
var range = document.createRange();
|
|
@@ -33,6 +35,58 @@ function getCursorPosition(editableDiv) {
|
|
|
33
35
|
preRange.setEnd(range.endContainer, range.endOffset);
|
|
34
36
|
return preRange.toString().length;
|
|
35
37
|
}
|
|
38
|
+
function setCursorPosition(editableDiv, targetOffset) {
|
|
39
|
+
var _a, _b;
|
|
40
|
+
editableDiv.focus();
|
|
41
|
+
var selection = window.getSelection();
|
|
42
|
+
if (!selection) return;
|
|
43
|
+
var range = document.createRange();
|
|
44
|
+
var walker = document.createTreeWalker(editableDiv, NodeFilter.SHOW_TEXT);
|
|
45
|
+
var remaining = Math.max(0, targetOffset);
|
|
46
|
+
var node = walker.nextNode();
|
|
47
|
+
while (node) {
|
|
48
|
+
var textLength = (_b = (_a = node.textContent) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
|
|
49
|
+
if (remaining <= textLength) {
|
|
50
|
+
range.setStart(node, remaining);
|
|
51
|
+
range.collapse(true);
|
|
52
|
+
selection.removeAllRanges();
|
|
53
|
+
selection.addRange(range);
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
remaining -= textLength;
|
|
57
|
+
node = walker.nextNode();
|
|
58
|
+
}
|
|
59
|
+
range.selectNodeContents(editableDiv);
|
|
60
|
+
range.collapse(false);
|
|
61
|
+
selection.removeAllRanges();
|
|
62
|
+
selection.addRange(range);
|
|
63
|
+
}
|
|
64
|
+
function buildFormulaSuggestionText(editableDiv, formulaName) {
|
|
65
|
+
var fullText = editableDiv.innerText || "";
|
|
66
|
+
var selection = window.getSelection();
|
|
67
|
+
var selectionInEditor = !!(selection === null || selection === void 0 ? void 0 : selection.rangeCount) && editableDiv.contains(selection.getRangeAt(0).startContainer);
|
|
68
|
+
var caretOffset = selectionInEditor ? getCursorPosition(editableDiv) : fullText.length;
|
|
69
|
+
var safeCaretOffset = Math.max(0, Math.min(caretOffset, fullText.length));
|
|
70
|
+
var beforeCaret = fullText.slice(0, safeCaretOffset);
|
|
71
|
+
var afterCaret = fullText.slice(safeCaretOffset);
|
|
72
|
+
var replaceStart = safeCaretOffset;
|
|
73
|
+
var tokenMatch = beforeCaret.match(/[A-Za-z_][A-Za-z0-9_]*$/);
|
|
74
|
+
if (tokenMatch) {
|
|
75
|
+
var token = tokenMatch[0];
|
|
76
|
+
var tokenStart = safeCaretOffset - token.length;
|
|
77
|
+
var charBeforeToken = tokenStart > 0 ? beforeCaret[tokenStart - 1] : "";
|
|
78
|
+
if (tokenStart === 0 || /[\s=(,+\-*/&^<>]$/.test(charBeforeToken)) {
|
|
79
|
+
replaceStart = tokenStart;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
var shouldAddOpeningParen = !afterCaret.startsWith("(");
|
|
83
|
+
var insertedText = "".concat(formulaName).concat(shouldAddOpeningParen ? "(" : "");
|
|
84
|
+
var nextText = fullText.slice(0, replaceStart) + insertedText + afterCaret;
|
|
85
|
+
return {
|
|
86
|
+
text: nextText,
|
|
87
|
+
caretOffset: replaceStart + insertedText.length
|
|
88
|
+
};
|
|
89
|
+
}
|
|
36
90
|
function isLetterNumberPattern(str) {
|
|
37
91
|
var regex = /^[a-zA-Z]+\d+$/;
|
|
38
92
|
return regex.test(str);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fileverse-dev/fortune-react",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.11-input-ref",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"types": "lib/index.d.ts",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"tsc": "tsc"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@fileverse-dev/fortune-core": "1.3.
|
|
19
|
+
"@fileverse-dev/fortune-core": "1.3.11-input-ref",
|
|
20
20
|
"@fileverse/ui": "5.0.0",
|
|
21
21
|
"@tippyjs/react": "^4.2.6",
|
|
22
22
|
"@types/regenerator-runtime": "^0.13.6",
|