@fileverse-dev/fortune-react 1.3.11-input-ref → 1.3.11-input-ref-2
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 +296 -55
- package/es/components/SheetOverlay/FormulaHint/index.js +46 -25
- package/es/components/SheetOverlay/FormulaSearch/index.d.ts +3 -1
- package/es/components/SheetOverlay/FormulaSearch/index.js +58 -29
- package/es/components/SheetOverlay/InputBox.js +164 -69
- package/es/components/SheetOverlay/helper.d.ts +2 -0
- package/es/components/SheetOverlay/helper.js +43 -0
- package/es/components/SheetOverlay/index.css +4 -4
- package/es/components/SheetOverlay/index.js +9 -2
- 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 +28 -0
- package/lib/components/ContextMenu/index.js +1 -1
- package/lib/components/FxEditor/index.js +294 -53
- package/lib/components/SheetOverlay/FormulaHint/index.js +45 -24
- package/lib/components/SheetOverlay/FormulaSearch/index.d.ts +3 -1
- package/lib/components/SheetOverlay/FormulaSearch/index.js +57 -28
- package/lib/components/SheetOverlay/InputBox.js +162 -67
- package/lib/components/SheetOverlay/helper.d.ts +2 -0
- package/lib/components/SheetOverlay/helper.js +45 -0
- package/lib/components/SheetOverlay/index.css +4 -4
- package/lib/components/SheetOverlay/index.js +8 -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 +34 -0
- package/package.json +2 -2
|
@@ -336,9 +336,9 @@
|
|
|
336
336
|
overflow: hidden;
|
|
337
337
|
white-space: pre-wrap;
|
|
338
338
|
outline: none;
|
|
339
|
-
-webkit-box-shadow: 0 2px 5px rgb(0 0 0 / 40%);
|
|
340
|
-
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
|
|
341
|
-
box-shadow: 0 2px 5px rgb(0 0 0 / 40%);
|
|
339
|
+
/* -webkit-box-shadow: 0 2px 5px rgb(0 0 0 / 40%);
|
|
340
|
+
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); */
|
|
341
|
+
/* box-shadow: 0 2px 5px rgb(0 0 0 / 40%); */
|
|
342
342
|
word-wrap: break-word;
|
|
343
343
|
background-color: rgb(255, 255, 255);
|
|
344
344
|
font-size: 13px;
|
|
@@ -356,7 +356,7 @@
|
|
|
356
356
|
}
|
|
357
357
|
|
|
358
358
|
.luckysheet-formula-text-color {
|
|
359
|
-
color:
|
|
359
|
+
color: darkred;
|
|
360
360
|
}
|
|
361
361
|
|
|
362
362
|
.luckysheet-formula-text-string {
|
|
@@ -10,7 +10,7 @@ var __assign = this && this.__assign || function () {
|
|
|
10
10
|
};
|
|
11
11
|
import React, { useContext, useCallback, useRef, useEffect, useLayoutEffect, useMemo } from "react";
|
|
12
12
|
import "./index.css";
|
|
13
|
-
import { locale, drawArrow, handleCellAreaDoubleClick, handleCellAreaMouseDown, handleContextMenu, handleOverlayMouseMove, handleOverlayMouseUp, selectAll, handleOverlayTouchEnd, handleOverlayTouchStart, createDropCellRange, getCellRowColumn, getCellHyperlink, showLinkCard, isAllowEdit, onCellsMoveStart, insertRowCol, getSheetIndex, fixRowStyleOverflowInFreeze, fixColumnStyleOverflowInFreeze, handleKeydownForZoom } from "@fileverse-dev/fortune-core";
|
|
13
|
+
import { locale, drawArrow, handleCellAreaDoubleClick, handleCellAreaMouseDown, handleContextMenu, handleOverlayMouseMove, handleOverlayMouseUp, selectAll, handleOverlayTouchEnd, handleOverlayTouchStart, createDropCellRange, getCellRowColumn, getCellHyperlink, showLinkCard, isAllowEdit, israngeseleciton, onCellsMoveStart, insertRowCol, getSheetIndex, fixRowStyleOverflowInFreeze, fixColumnStyleOverflowInFreeze, handleKeydownForZoom } from "@fileverse-dev/fortune-core";
|
|
14
14
|
import _ from "lodash";
|
|
15
15
|
import WorkbookContext from "../../context";
|
|
16
16
|
import ColumnHeader from "./ColumnHeader";
|
|
@@ -49,6 +49,7 @@ var SheetOverlay = function SheetOverlay() {
|
|
|
49
49
|
setContext(function (draftCtx) {
|
|
50
50
|
var _a;
|
|
51
51
|
handleCellAreaMouseDown(draftCtx, refs.globalCache, nativeEvent, refs.cellInput.current, refs.cellArea.current, refs.fxInput.current, refs.canvas.current.getContext("2d"));
|
|
52
|
+
var keepFormulaBarFocused = draftCtx.luckysheetCellUpdate.length > 0 && draftCtx.formulaCache.formulaEditorOwner === "fx" && (draftCtx.formulaCache.rangestart || draftCtx.formulaCache.rangedrag_column_start || draftCtx.formulaCache.rangedrag_row_start || israngeseleciton(draftCtx));
|
|
52
53
|
if (!_.isEmpty((_a = draftCtx.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0]) && refs.cellInput.current) {
|
|
53
54
|
if (!isAllowEdit(draftCtx)) {
|
|
54
55
|
setTimeout(function () {
|
|
@@ -60,7 +61,13 @@ var SheetOverlay = function SheetOverlay() {
|
|
|
60
61
|
} else {
|
|
61
62
|
setTimeout(function () {
|
|
62
63
|
var _a;
|
|
63
|
-
(
|
|
64
|
+
if (keepFormulaBarFocused && refs.fxInput.current) {
|
|
65
|
+
refs.fxInput.current.focus({
|
|
66
|
+
preventScroll: true
|
|
67
|
+
});
|
|
68
|
+
} else {
|
|
69
|
+
(_a = refs.cellInput.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
70
|
+
}
|
|
64
71
|
});
|
|
65
72
|
}
|
|
66
73
|
}
|
|
@@ -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,28 @@
|
|
|
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) {
|
|
7
|
+
return function () {};
|
|
8
|
+
}
|
|
9
|
+
var onSelectionChange = function onSelectionChange() {
|
|
10
|
+
var _a, _b;
|
|
11
|
+
var el = editorRef.current;
|
|
12
|
+
if (!el) return;
|
|
13
|
+
var text = (_b = (_a = el.innerText) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : "";
|
|
14
|
+
if (!text.startsWith("=")) return;
|
|
15
|
+
var sel = window.getSelection();
|
|
16
|
+
if (!(sel === null || sel === void 0 ? void 0 : sel.rangeCount) || !el.contains(sel.getRangeAt(0).startContainer)) {
|
|
17
|
+
return;
|
|
18
|
+
}
|
|
19
|
+
bump(function (n) {
|
|
20
|
+
return n + 1;
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
document.addEventListener("selectionchange", onSelectionChange);
|
|
24
|
+
return function () {
|
|
25
|
+
document.removeEventListener("selectionchange", onSelectionChange);
|
|
26
|
+
};
|
|
27
|
+
}, [editSessionActive, editorRef]);
|
|
28
|
+
}
|
|
@@ -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) {
|