@zhenliang/sheet 0.2.5-beta.8 → 0.2.5-beta.9

package/dist/core/editor/InputOptionsEditor/index.d.ts

@@ -1,18 +1,5 @@
 import type { SheetType } from "../../../type";
-import { InputNumberProps } from 'antd';
 import './index.less';
-export interface OptionItem {
-    label: string;
-    value: string;
-    info?: string;
-    children?: OptionItem[];
-}
-type inputProps = Partial<Pick<InputNumberProps, 'max' | 'min' | 'addonBefore' | 'addonAfter' | 'precision'> & {
-    warnMethod?: (record: any) => void;
-    rangeMethod?: (record: any) => {
-        max?: number;
-        min?: number;
-    };
-}>;
+import { OptionItem, inputProps } from './utils';
 export declare const getFormulaInputEditor: (options: OptionItem[], replaceIndex?: string, extraProps?: inputProps, getExtraProps?: ((props: SheetType.CellEditorProps) => inputProps) | undefined, choseEditor?: ((record: any) => boolean) | undefined) => SheetType.CellEditor;
 export default getFormulaInputEditor;

package/dist/core/editor/InputOptionsEditor/index.js

@@ -18,22 +18,28 @@ import { get, head, isEmpty, isNil } from 'lodash';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { formulaString } from "../numberEditor";
 import "./index.less";
-import { flattenOptions, getCursorPositionInSpan, getStringDiff, replaceLabelsWithValues, replaceLongestDiff, replaceValuesWithLabels, tokenize, validateVariables } from "./utils";
+import { flattenOptions, getCursorPositionInSpan, getSpanAtCursor, getStringDiff, moveCursorToSpan, replaceLabelsWithValues, replaceLongestDiff, replaceValuesWithLabels, tokenize, validateVariables } from "./utils";
 import validateCalculationExpr from "./vaildFormula";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var OPERATORS = ['=', '+', '-', '*', '/'];
-
-// 获取光标所在的 span
-var getSpanAtCursor = function getSpanAtCursor(startContainer) {
-  if (startContainer.nodeType === Node.TEXT_NODE) {
-    return startContainer.parentElement;
-  }
-  if (startContainer.nodeType === Node.ELEMENT_NODE) {
-    return startContainer;
-  }
-  return null;
-};
+var OPERATORS = ['=', '+', '-', '*', '/', '('];
+
+// // 创建 label span
+// const createLabelSpan = (label: string): HTMLElement => {
+//   const span = document.createElement('span');
+//   span.className = 'formula-editor-token-label';
+//   span.textContent = label;
+//   return span;
+// };
+
+// // 创建 empty other span
+// const createEmptyOtherSpan = (): HTMLElement => {
+//   const span = document.createElement('span');
+//   span.className = 'formula-editor-token-other';
+//   span.textContent = '';
+//   return span;
+// };
+
 export var getFormulaInputEditor = function getFormulaInputEditor(options, replaceIndex, extraProps, getExtraProps, choseEditor) {
   var _ref = extraProps || {},
     warnMethod = _ref.warnMethod,
@@ -158,14 +164,7 @@ export var getFormulaInputEditor = function getFormulaInputEditor(options, repla
           _targetSpan.textContent = '';
           replacedSpan.after(_targetSpan);
         }
-        var _selection = window.getSelection();
-        if (_selection && _selection.rangeCount > 0) {
-          var _newRange = document.createRange();
-          _newRange.selectNodeContents(_targetSpan);
-          _newRange.collapse(true);
-          _selection.removeAllRanges();
-          _selection.addRange(_newRange);
-        }
+        moveCursorToSpan(_targetSpan);
 
         // 更新 containerValue
         var newValue = container.textContent || '';
@@ -235,13 +234,7 @@ export var getFormulaInputEditor = function getFormulaInputEditor(options, repla
         targetSpan.textContent = '';
         labelSpan.after(targetSpan);
       }
-
-      // 将光标移到目标 span 的开头
-      var newRange = document.createRange();
-      newRange.selectNodeContents(targetSpan);
-      newRange.collapse(true);
-      selection.removeAllRanges();
-      selection.addRange(newRange);
+      moveCursorToSpan(targetSpan);
     }, [inputAfterDropDownShow]);
 
     // 处理输入变化
@@ -350,7 +343,7 @@ export var getFormulaInputEditor = function getFormulaInputEditor(options, repla
           selection.addRange(newRange);
         }
       }
-    }, [closeDorpDown]);
+    }, [closeDorpDown, setOffsetX, setOpen]);
     var handleKeyDown = useCallback(function (e) {
       var _currentSpan$textCont, _currentSpan$textCont2;
       if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
@@ -388,39 +381,27 @@ export var getFormulaInputEditor = function getFormulaInputEditor(options, repla
           if (targetIndex < allSpans.length && targetIndex !== currentIndex + 1) {
             e.preventDefault();
             var targetSpan = allSpans[targetIndex];
-            var newRange = document.createRange();
-            newRange.selectNodeContents(targetSpan);
-            newRange.collapse(true);
-            selection.removeAllRanges();
-            selection.addRange(newRange);
+            moveCursorToSpan(targetSpan);
           }
-        } else if (e.key === 'ArrowLeft' && isAtStart) {
+        } else if (e.key === 'ArrowRight' && isAlmostEnd) {
           closeDorpDown();
-          // 向左 + 在开头 -> 跳到上一个 span 的末尾（跳过 label span）
-          var _targetIndex = currentIndex - 1;
-          while (_targetIndex >= 0 && allSpans[_targetIndex].classList.contains('formula-editor-token-label')) {
-            _targetIndex--;
-          }
-          if (_targetIndex >= 0 && _targetIndex !== currentIndex - 1) {
+          var _targetIndex = currentIndex + 1;
+          if (_targetIndex < allSpans.length && !allSpans[_targetIndex].classList.contains('formula-editor-token-label')) {
             e.preventDefault();
             var _targetSpan2 = allSpans[_targetIndex];
-            var _newRange2 = document.createRange();
-            _newRange2.selectNodeContents(_targetSpan2);
-            _newRange2.collapse(false);
-            selection.removeAllRanges();
-            selection.addRange(_newRange2);
+            moveCursorToSpan(_targetSpan2);
           }
-        } else if (e.key === 'ArrowRight' && isAlmostEnd) {
+        } else if (e.key === 'ArrowLeft' && isAtStart) {
           closeDorpDown();
-          var _targetIndex2 = currentIndex + 1;
-          if (_targetIndex2 < allSpans.length && !allSpans[_targetIndex2].classList.contains('formula-editor-token-label')) {
+          // 向左 + 在开头 -> 跳到上一个 span 的末尾（跳过 label span）
+          var _targetIndex2 = currentIndex - 1;
+          while (_targetIndex2 >= 0 && allSpans[_targetIndex2].classList.contains('formula-editor-token-label')) {
+            _targetIndex2--;
+          }
+          if (_targetIndex2 >= 0 && _targetIndex2 !== currentIndex - 1) {
             e.preventDefault();
             var _targetSpan3 = allSpans[_targetIndex2];
-            var _newRange3 = document.createRange();
-            _newRange3.selectNodeContents(_targetSpan3);
-            _newRange3.collapse(true);
-            selection.removeAllRanges();
-            selection.addRange(_newRange3);
+            moveCursorToSpan(_targetSpan3, false);
           }
         } else if (e.key === 'ArrowLeft' && isAlmostStart) {
           closeDorpDown();
@@ -428,11 +409,7 @@ export var getFormulaInputEditor = function getFormulaInputEditor(options, repla
           if (_targetIndex3 >= 0 && !allSpans[_targetIndex3].classList.contains('formula-editor-token-label')) {
             e.preventDefault();
             var _targetSpan4 = allSpans[_targetIndex3];
-            var _newRange4 = document.createRange();
-            _newRange4.selectNodeContents(_targetSpan4);
-            _newRange4.collapse(false);
-            selection.removeAllRanges();
-            selection.addRange(_newRange4);
+            moveCursorToSpan(_targetSpan4, false);
           }
         }
         return;
@@ -461,12 +438,12 @@ export var getFormulaInputEditor = function getFormulaInputEditor(options, repla
           e.preventDefault();
           e.stopPropagation();
           prevSpan.remove();
-          var _newRange5 = document.createRange();
+          var newRange = document.createRange();
 
           // 如果当前 span 有内容，光标放在开头；否则找最近的有内容的 span
           if (currentSpan.textContent !== '') {
-            _newRange5.selectNodeContents(currentSpan);
-            _newRange5.collapse(true);
+            newRange.selectNodeContents(currentSpan);
+            newRange.collapse(true);
           } else {
             // 找前一个最近的有内容的 span
             var _targetSpan5;
@@ -477,15 +454,15 @@ export var getFormulaInputEditor = function getFormulaInputEditor(options, repla
               }
             }
             if (_targetSpan5) {
-              _newRange5.selectNodeContents(_targetSpan5);
-              _newRange5.collapse(false);
+              newRange.selectNodeContents(_targetSpan5);
+              newRange.collapse(false);
             } else {
-              _newRange5.selectNodeContents(div);
-              _newRange5.collapse(true);
+              newRange.selectNodeContents(div);
+              newRange.collapse(true);
             }
           }
           selection.removeAllRanges();
-          selection.addRange(_newRange5);
+          selection.addRange(newRange);
           return;
         }
       }
@@ -501,11 +478,11 @@ export var getFormulaInputEditor = function getFormulaInputEditor(options, repla
           if (prevText.length > 0) {
             _prevSpan.textContent = prevText.slice(0, -1);
           }
-          var _newRange6 = document.createRange();
-          _newRange6.selectNodeContents(_prevSpan);
-          _newRange6.collapse(false);
+          var _newRange = document.createRange();
+          _newRange.selectNodeContents(_prevSpan);
+          _newRange.collapse(false);
           selection.removeAllRanges();
-          selection.addRange(_newRange6);
+          selection.addRange(_newRange);
         }
       }
 
@@ -533,29 +510,29 @@ export var getFormulaInputEditor = function getFormulaInputEditor(options, repla
             var labelIndex = allSpansNow.indexOf(_targetSpan6);
             if (labelIndex < allSpansNow.length - 1) {
               var nextSpan = allSpansNow[labelIndex + 1];
-              var _newRange7 = document.createRange();
-              _newRange7.selectNodeContents(nextSpan);
-              _newRange7.collapse(true);
+              var _newRange2 = document.createRange();
+              _newRange2.selectNodeContents(nextSpan);
+              _newRange2.collapse(true);
               selection.removeAllRanges();
-              selection.addRange(_newRange7);
+              selection.addRange(_newRange2);
               return;
             }
           }
 
           // 否则把光标放在找到的 span 的末尾
           if (_targetSpan6) {
-            var _newRange8 = document.createRange();
-            _newRange8.selectNodeContents(_targetSpan6);
-            _newRange8.collapse(false);
+            var _newRange3 = document.createRange();
+            _newRange3.selectNodeContents(_targetSpan6);
+            _newRange3.collapse(false);
             selection.removeAllRanges();
-            selection.addRange(_newRange8);
+            selection.addRange(_newRange3);
             return;
           }
         }
         if (!currentSpanNow || currentSpanNow === div) return;
         if (currentSpanNow.textContent === '') {
           var currentIndexNow = allSpansNow.indexOf(currentSpanNow);
-          var _newRange9 = document.createRange();
+          var _newRange4 = document.createRange();
           if (currentIndexNow > 0) {
             // 移到前一个 span 的末尾，但如果前一个 span 是 label，则移到后一个 span 的开头
             var _targetSpan7 = allSpansNow[currentIndexNow - 1];
@@ -563,30 +540,30 @@ export var getFormulaInputEditor = function getFormulaInputEditor(options, repla
               // 移到 label span 的后一个 span 的开头
               if (currentIndexNow < allSpansNow.length - 1) {
                 var _nextSpan = allSpansNow[currentIndexNow + 1];
-                _newRange9.selectNodeContents(_nextSpan);
-                _newRange9.collapse(true);
+                _newRange4.selectNodeContents(_nextSpan);
+                _newRange4.collapse(true);
               } else {
-                _newRange9.selectNodeContents(div);
-                _newRange9.collapse(false);
+                _newRange4.selectNodeContents(div);
+                _newRange4.collapse(false);
               }
             } else {
-              _newRange9.selectNodeContents(_targetSpan7);
-              _newRange9.collapse(false);
+              _newRange4.selectNodeContents(_targetSpan7);
+              _newRange4.collapse(false);
             }
             currentSpanNow.remove();
           } else if (allSpansNow.length > 1) {
             // 第一个 span 为空，移到下一个 span 的开头
             var _nextSpan2 = allSpansNow[currentIndexNow + 1];
-            _newRange9.selectNodeContents(_nextSpan2);
-            _newRange9.collapse(true);
+            _newRange4.selectNodeContents(_nextSpan2);
+            _newRange4.collapse(true);
             currentSpanNow.remove();
           } else {
             // 只有一个空 span，保持空
-            _newRange9.selectNodeContents(div);
-            _newRange9.collapse(true);
+            _newRange4.selectNodeContents(div);
+            _newRange4.collapse(true);
           }
           selection.removeAllRanges();
-          selection.addRange(_newRange9);
+          selection.addRange(_newRange4);
         }
       }, 0);
     }, []);

package/dist/core/editor/InputOptionsEditor/utils.d.ts

@@ -1,3 +1,4 @@
+import { InputNumberProps } from "antd";
 export declare const OPERATORS: string[];
 export declare const VARIABLE_REGEX: RegExp;
 export declare const NUMBER_REGEX: RegExp;
@@ -57,3 +58,18 @@ export declare const longestCommonSubsequence: (arr1: string, arr2: string) => s
 export declare const getStringDiff: (str1: any, str2: any, mode?: string) => any;
 export declare const replaceLongestDiff: (a: string, str: string, position: number) => string;
 export declare const getCursorPositionInSpan: (span: any) => any;
+export interface OptionItem {
+    label: string;
+    value: string;
+    info?: string;
+    children?: OptionItem[];
+}
+export type inputProps = Partial<Pick<InputNumberProps, 'max' | 'min' | 'addonBefore' | 'addonAfter' | 'precision'> & {
+    warnMethod?: (record: any) => void;
+    rangeMethod?: (record: any) => {
+        max?: number;
+        min?: number;
+    };
+}>;
+export declare const getSpanAtCursor: (startContainer: any) => HTMLElement | null;
+export declare const moveCursorToSpan: (targetSpan: HTMLElement, atStart?: boolean) => void;

package/dist/core/editor/InputOptionsEditor/utils.js

@@ -338,4 +338,26 @@ export var getCursorPositionInSpan = function getCursorPositionInSpan(span) {
   preCaretRange.selectNodeContents(span);
   preCaretRange.setEnd(range.startContainer, range.startOffset);
   return preCaretRange.toString().length;
+};
+// 获取光标所在的 span
+export var getSpanAtCursor = function getSpanAtCursor(startContainer) {
+  if (startContainer.nodeType === Node.TEXT_NODE) {
+    return startContainer.parentElement;
+  }
+  if (startContainer.nodeType === Node.ELEMENT_NODE) {
+    return startContainer;
+  }
+  return null;
+};
+
+// 将光标移到目标 span 的开头或末尾
+export var moveCursorToSpan = function moveCursorToSpan(targetSpan) {
+  var atStart = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var selection = window.getSelection();
+  if (!selection) return;
+  var newRange = document.createRange();
+  newRange.selectNodeContents(targetSpan);
+  newRange.collapse(atStart);
+  selection.removeAllRanges();
+  selection.addRange(newRange);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhenliang/sheet",
-  "version": "0.2.5-beta.8",
+  "version": "0.2.5-beta.9",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",