@leankylin-sheet/react 6.0.0 → 6.0.2

package/dist/components/Workbook/api.d.ts

@@ -93,6 +93,7 @@ export declare function generateAPIs(context: Context, setContext: (recipe: (ctx
         hyperlink?: Record<string, {
             linkType: string;
             linkAddress: string;
+            payload?: Record<string, any> | undefined;
         }> | undefined;
         dynamicArray_compute?: any;
         dynamicArray?: any[] | undefined;

package/dist/components/Workbook/index.d.ts

@@ -101,6 +101,7 @@ declare const Workbook: React.ForwardRefExoticComponent<Settings & AdditionalPro
         hyperlink?: Record<string, {
             linkType: string;
             linkAddress: string;
+            payload?: Record<string, any> | undefined;
         }> | undefined;
         dynamicArray_compute?: any;
         dynamicArray?: any[] | undefined;

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { defaultContext, defaultSettings, getSheetIndex, colLocationByIndex, fixPositionOnFrozenCells, colLocation, getFlowdata, isAllowEdit, handleColumnHeaderMouseDown, handleColSizeHandleMouseDown, handleColFreezeHandleMouseDown, handleContextMenu, selectTitlesMap, selectTitlesRange, fixColumnStyleOverflowInFreeze, rowLocationByIndex, rowLocation, handleRowHeaderMouseDown, handleRowSizeHandleMouseDown, handleRowFreezeHandleMouseDown, fixRowStyleOverflowInFreeze, functionHTMLGenerate, locale, getCellValue, createRangeHightlight, isInlineStringCell, getInlineStringHTML, valueShowEs, escapeHTMLTag, escapeScriptTag, isShowHidenCR, cancelNormalSelected, moveHighlightCell, updateCell, israngeseleciton, handleFormulaInput, onSearchDialogMoveStart, replaceAll, replace, searchAll, searchNext, changeSheet, normalizeSelection, scrollToHighlightCell, chatatABC, isLinkValid, getRangetxt, goToLink, replaceHtml, removeHyperlink, onRangeSelectionModalMoveStart, saveHyperlink, createFilterOptions, onImageMoveStart, onImageResizeStart, showComments, setEditingComment, onCommentBoxMoveStart, onCommentBoxResizeStart, confirmMessage, getRangeByTxt, getDropdownList, setCellValue, setConditionRules, mergeBorder, setDropcownValue, handleCellAreaMouseDown, handleCellAreaMouseMove, handleCellAreaDragOver, handleCellDrop, handleCellAreaDoubleClick, selectAll, showLinkCard, getCellRowColumn, getCellHyperlink, handleOverlayMouseMove, handleOverlayMouseUp, handleKeydownForZoom, handleOverlayTouchStart, handleOverlayTouchMove, handleOverlayTouchEnd, onCellsMoveStart, createDropCellRange, handleDropCellDoubleClick, updateContextWithSheetData, updateContextWithCanvas, initFreeze, Canvas, handleGlobalWheel, setCaretPosition, getDataArr, updateMoreCell, getRegStr, getOptionValue, getSelectRange, applyLocation, updateItem, update, normalizedCellAttr, updateFormat, handleTextSize, handleHorizontalAlign, handleVerticalAlign, handleScreenShot, showImgChooser, insertImage, editComment, deleteComment, showHideComment, showHideAllComments, newComment, handleSum, autoSelectionFormula, handleMerge, handleBorder, handleFreeze, handleSort, createFilter, clearFilter, toolbarItemSelectedFunc, toolbarItemClickHandler, handleTextColor, handleTextBackground, getDataBySelectionNoCopy, getInlineStringNoStyle, rangeHightlightselected, editSheetName, setNextSheet, MAX_ZOOM_RATIO, MIN_ZOOM_RATIO, addSheet, indexToColumnChar, sortSelection, handleCopy, insertRowCol, deleteRowCol, hideSelected, showSelected, api, removeActiveImage, deleteSelectedCellText, jfrefreshgrid, handleLink, deleteSheet, opToPatch, orderbydatafiler, getFilterColumnValues, getFilterColumnColors, saveFilter, cancelActiveImgItem, patchToOp, filterPatch, inverseRowColOptions, ensureSheetIndex, initSheetIndex, handleGlobalKeyDown, handlePasteByLeanklin, groupValuesRefresh } from '@leankylin-sheet/core';
+import { defaultContext, defaultSettings, getSheetIndex, colLocationByIndex, fixPositionOnFrozenCells, colLocation, getFlowdata, isAllowEdit, handleColumnHeaderMouseDown, handleColSizeHandleMouseDown, handleColFreezeHandleMouseDown, handleContextMenu, selectTitlesMap, selectTitlesRange, fixColumnStyleOverflowInFreeze, rowLocationByIndex, rowLocation, handleRowHeaderMouseDown, handleRowSizeHandleMouseDown, handleRowFreezeHandleMouseDown, fixRowStyleOverflowInFreeze, functionHTMLGenerate, locale, getCellValue, createRangeHightlight, isInlineStringCell, getInlineStringHTML, valueShowEs, escapeHTMLTag, escapeScriptTag, isShowHidenCR, cancelNormalSelected, moveHighlightCell, updateCell, israngeseleciton, handleFormulaInput, onSearchDialogMoveStart, replaceAll, replace, searchAll, searchNext, changeSheet, normalizeSelection, scrollToHighlightCell, chatatABC, getCellHyperlink, isLinkValid, getRangetxt, goToLink, replaceHtml, removeHyperlink, onRangeSelectionModalMoveStart, saveHyperlink, createFilterOptions, onImageMoveStart, onImageResizeStart, showComments, setEditingComment, onCommentBoxMoveStart, onCommentBoxResizeStart, confirmMessage, getRangeByTxt, getDropdownList, setCellValue, setConditionRules, mergeBorder, setDropcownValue, handleCellAreaMouseDown, handleCellAreaMouseMove, handleCellAreaDragOver, handleCellDrop, handleCellAreaDoubleClick, selectAll, showLinkCard, getCellRowColumn, handleOverlayMouseMove, handleOverlayMouseUp, handleKeydownForZoom, handleOverlayTouchStart, handleOverlayTouchMove, handleOverlayTouchEnd, onCellsMoveStart, createDropCellRange, handleDropCellDoubleClick, updateContextWithSheetData, updateContextWithCanvas, initFreeze, Canvas, handleGlobalWheel, setCaretPosition, getDataArr, updateMoreCell, getRegStr, getOptionValue, getSelectRange, applyLocation, updateItem, update, normalizedCellAttr, updateFormat, handleTextSize, handleHorizontalAlign, handleVerticalAlign, handleScreenShot, showImgChooser, insertImage, editComment, deleteComment, showHideComment, showHideAllComments, newComment, handleSum, autoSelectionFormula, handleMerge, handleBorder, handleFreeze, handleSort, createFilter, clearFilter, toolbarItemSelectedFunc, toolbarItemClickHandler, handleTextColor, handleTextBackground, getDataBySelectionNoCopy, getInlineStringNoStyle, rangeHightlightselected, editSheetName, setNextSheet, MAX_ZOOM_RATIO, MIN_ZOOM_RATIO, addSheet, indexToColumnChar, sortSelection, handleCopy, insertRowCol, deleteRowCol, hideSelected, showSelected, api, removeActiveImage, deleteSelectedCellText, jfrefreshgrid, handleLink, deleteSheet, opToPatch, orderbydatafiler, getFilterColumnValues, getFilterColumnColors, saveFilter, cancelActiveImgItem, patchToOp, filterPatch, inverseRowColOptions, ensureSheetIndex, initSheetIndex, handleGlobalKeyDown, handlePasteByLeanklin, groupValuesRefresh } from '@leankylin-sheet/core';
 import { useInViewport, useMemoizedFn, useThrottleFn } from 'ahooks';
 import React, { useContext, useRef, useState, useMemo, useCallback, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
 import produce, { applyPatches, enablePatches, produceWithPatches } from 'immer';
@@ -2263,7 +2263,7 @@ var LinkEditCard = function LinkEditCard(_ref) {
     c = _ref.c,
     rc = _ref.rc,
     originText = _ref.originText,
-    originType = _ref.originType,
+    _originType = _ref.originType,
     originAddress = _ref.originAddress,
     isEditing = _ref.isEditing,
     position = _ref.position,
@@ -2271,7 +2271,8 @@ var LinkEditCard = function LinkEditCard(_ref) {
   var _useContext = useContext(WorkbookContext),
     context = _useContext.context,
     setContext = _useContext.setContext,
-    refs = _useContext.refs;
+    refs = _useContext.refs,
+    settings = _useContext.settings;
   var _useState = useState(originText),
     _useState2 = _slicedToArray(_useState, 2),
     linkText = _useState2[0],
@@ -2280,10 +2281,19 @@ var LinkEditCard = function LinkEditCard(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     linkAddress = _useState4[0],
     setLinkAddress = _useState4[1];
+  var originType = _originType || settings.detailLinkType || "webpage";
   var _useState5 = useState(originType),
     _useState6 = _slicedToArray(_useState5, 2),
     linkType = _useState6[0],
     setLinkType = _useState6[1];
+  var _useState7 = useState(function () {
+      var _origin$payload;
+      var origin = getCellHyperlink(context, r, c);
+      return (_origin$payload = origin === null || origin === void 0 ? void 0 : origin.payload) !== null && _origin$payload !== void 0 ? _origin$payload : {};
+    }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    customPayload = _useState8[0],
+    setCustomPayload = _useState8[1];
   var _locale = locale(context),
     insertLink = _locale.insertLink,
     linkTypeList = _locale.linkTypeList,
@@ -2294,9 +2304,65 @@ var LinkEditCard = function LinkEditCard(_ref) {
   }]));
   var skipCellRangeSet = useRef(true);
   var isLinkAddressValid = isLinkValid(context, linkType, linkAddress);
-  var tooltip = /*#__PURE__*/React.createElement("div", {
-    className: "validation-input-tip"
-  }, isLinkAddressValid.tooltip);
+  var mergedLinkTypeList = useMemo(function () {
+    var _settings$customLinkT;
+    var customs = (_settings$customLinkT = settings === null || settings === void 0 ? void 0 : settings.customLinkTypes) !== null && _settings$customLinkT !== void 0 ? _settings$customLinkT : [];
+    if (customs.length === 0) return linkTypeList;
+    var builtinTypes = new Set(linkTypeList.map(function (it) {
+      return it.value;
+    }));
+    var extra = customs.filter(function (it) {
+      return it.type && !builtinTypes.has(it.type);
+    }).map(function (it) {
+      return {
+        text: it.text,
+        value: it.type
+      };
+    });
+    return [].concat(_toConsumableArray(extra), _toConsumableArray(linkTypeList));
+  }, [settings === null || settings === void 0 ? void 0 : settings.customLinkTypes, linkTypeList]);
+  var customLinkTypeMap = useMemo(function () {
+    var _settings$customLinkT2;
+    var m = {};
+    ((_settings$customLinkT2 = settings === null || settings === void 0 ? void 0 : settings.customLinkTypes) !== null && _settings$customLinkT2 !== void 0 ? _settings$customLinkT2 : []).forEach(function (it) {
+      if (it.type) m[it.type] = it;
+    });
+    return m;
+  }, [settings === null || settings === void 0 ? void 0 : settings.customLinkTypes]);
+  var currentCustomConfig = customLinkTypeMap[linkType];
+  var isCustomTypeValid = useMemo(function () {
+    if (!currentCustomConfig) return true;
+    if (!currentCustomConfig.onSave) return true;
+    var next = currentCustomConfig.onSave({
+      linkText: linkText,
+      linkAddress: linkAddress,
+      position: {
+        r: r,
+        c: c
+      },
+      origin: function () {
+        var o = getCellHyperlink(context, r, c);
+        return o ? {
+          linkType: o.linkType,
+          linkAddress: o.linkAddress,
+          payload: o.payload
+        } : undefined;
+      }()
+    });
+    return next !== undefined;
+  }, [currentCustomConfig, linkText, linkAddress, r, c, context]);
+  var canSubmit = !currentCustomConfig || isCustomTypeValid ? isLinkAddressValid.isValid : false;
+  var tooltip = function () {
+    var text;
+    if (currentCustomConfig) {
+      text = isCustomTypeValid ? "" : insertLink.tooltipInfo1 || "";
+    } else {
+      text = isLinkAddressValid.tooltip;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: "validation-input-tip"
+    }, text);
+  }();
   var hideLinkCard = useCallback(function () {
     _.set(refs.globalCache, "linkCard.mouseEnter", false);
     setContext(function (draftCtx) {
@@ -2358,10 +2424,13 @@ var LinkEditCard = function LinkEditCard(_ref) {
     }));
   }, []);
   useLayoutEffect(function () {
+    var _origin$payload2;
     setLinkAddress(originAddress);
     setLinkText(originText);
     setLinkType(originType);
-  }, [rc, originAddress, originText, originType]);
+    var origin = getCellHyperlink(context, r, c);
+    setCustomPayload((_origin$payload2 = origin === null || origin === void 0 ? void 0 : origin.payload) !== null && _origin$payload2 !== void 0 ? _origin$payload2 : {});
+  }, [rc, originAddress, originText, originType, r, c, context]);
   useLayoutEffect(function () {
     if (selectingCellRange) {
       skipCellRangeSet.current = true;
@@ -2380,6 +2449,7 @@ var LinkEditCard = function LinkEditCard(_ref) {
     }
   }, [context, selectingCellRange]);
   if (!isEditing) {
+    var toolbarCustomConfig = customLinkTypeMap[originType];
     return /*#__PURE__*/React.createElement("div", _objectSpread2(_objectSpread2({}, containerEvent), {}, {
       onKeyDown: function onKeyDown(e) {
         e.stopPropagation();
@@ -2391,16 +2461,35 @@ var LinkEditCard = function LinkEditCard(_ref) {
       }
     }), /*#__PURE__*/React.createElement("div", {
       className: "link-content",
-      onClick: function onClick() {
+      onClick: function onClick(reactEvent) {
+        var _getCellHyperlink, _toolbarCustomConfig$, _settings$hooks, _settings$hooks$onHyp;
+        var payload = (_getCellHyperlink = getCellHyperlink(context, r, c)) === null || _getCellHyperlink === void 0 ? void 0 : _getCellHyperlink.payload;
+        var clickInfo = {
+          linkType: originType,
+          linkAddress: originAddress,
+          payload: payload,
+          position: {
+            r: r,
+            c: c,
+            sheetId: context.currentSheetId
+          },
+          event: reactEvent
+        };
+        var userResult = toolbarCustomConfig === null || toolbarCustomConfig === void 0 ? void 0 : (_toolbarCustomConfig$ = toolbarCustomConfig.onClick) === null || _toolbarCustomConfig$ === void 0 ? void 0 : _toolbarCustomConfig$.call(toolbarCustomConfig, clickInfo);
+        settings === null || settings === void 0 ? void 0 : (_settings$hooks = settings.hooks) === null || _settings$hooks === void 0 ? void 0 : (_settings$hooks$onHyp = _settings$hooks.onHyperlinkClick) === null || _settings$hooks$onHyp === void 0 ? void 0 : _settings$hooks$onHyp.call(_settings$hooks, clickInfo);
+        if (userResult === false) {
+          hideLinkCard();
+          return;
+        }
         setContext(function (draftCtx) {
-          return goToLink(draftCtx, r, c, linkType, linkAddress, refs.scrollbarX.current, refs.scrollbarY.current);
+          return goToLink(draftCtx, r, c, originType, originAddress, refs.scrollbarX.current, refs.scrollbarY.current);
         });
       }
-    }, linkType === "webpage" ? insertLink.openLink : replaceHtml(insertLink.goTo, {
-      linkAddress: linkAddress
+    }, originType === "webpage" ? insertLink.openLink : replaceHtml(insertLink.goTo, {
+      linkAddress: originAddress
     })), context.allowEdit === true && /*#__PURE__*/React.createElement("div", {
       className: "divider"
-    }), context.allowEdit === true && linkType === "webpage" && renderToolbarButton("copy", function () {
+    }), context.allowEdit === true && originType === "webpage" && renderToolbarButton("copy", function () {
       navigator.clipboard.writeText(originAddress);
       hideLinkCard();
     }), context.allowEdit === true && renderToolbarButton("pencil", function () {
@@ -2479,18 +2568,23 @@ var LinkEditCard = function LinkEditCard(_ref) {
     className: "leankylin-link-modify-select",
     value: linkType,
     onChange: function onChange(e) {
-      if (e.target.value === "sheet") {
+      var next = e.target.value;
+      var nextCustomConfig = customLinkTypeMap[next];
+      if (next === "sheet") {
         if (!linkText) {
           setLinkText(context.luckysheetfile[0].name);
         }
         setLinkAddress(context.luckysheetfile[0].name);
+      } else if (nextCustomConfig) {
+        setLinkAddress("");
+        setCustomPayload({});
       } else {
         setLinkAddress("");
       }
-      if (e.target.value === "cellrange") setRangeModalVisible(true);
-      setLinkType(e.target.value);
+      if (next === "cellrange") setRangeModalVisible(true);
+      setLinkType(next);
     }
-  }, linkTypeList.map(function (type) {
+  }, mergedLinkTypeList.map(function (type) {
     return /*#__PURE__*/React.createElement("option", {
       key: type.value,
       value: type.value
@@ -2536,11 +2630,63 @@ var LinkEditCard = function LinkEditCard(_ref) {
       key: sheet.id,
       value: sheet.name
     }, sheet.name);
+  })), tooltip)), currentCustomConfig && ( /*#__PURE__*/React.createElement(React.Fragment, null, currentCustomConfig.render ? currentCustomConfig.render({
+    value: linkAddress,
+    position: {
+      r: r,
+      c: c
+    },
+    onChange: function onChange(v) {
+      return setLinkAddress(v);
+    },
+    setPayload: function setPayload(next) {
+      setCustomPayload(function (prev) {
+        return typeof next === "function" ? next(prev) : next;
+      });
+    },
+    payload: customPayload,
+    ctx: {
+      context: context,
+      setContext: setContext,
+      settings: settings
+    }
+  }) : ( /*#__PURE__*/React.createElement("input", {
+    className: "leankylin-link-modify-input ".concat(canSubmit ? "" : "error-input"),
+    spellCheck: "false",
+    value: linkAddress,
+    onChange: function onChange(e) {
+      return setLinkAddress(e.target.value);
+    }
   })), tooltip))), /*#__PURE__*/React.createElement("div", {
     className: "modal-footer"
   }, renderBottomButton(function () {
-    if (!isLinkAddressValid.isValid) return;
+    if (!canSubmit) return;
     _.set(refs.globalCache, "linkCard.mouseEnter", false);
+    if (currentCustomConfig === null || currentCustomConfig === void 0 ? void 0 : currentCustomConfig.onSave) {
+      var origin = function () {
+        var o = getCellHyperlink(context, r, c);
+        return o ? {
+          linkType: o.linkType,
+          linkAddress: o.linkAddress,
+          payload: o.payload
+        } : undefined;
+      }();
+      var saved = currentCustomConfig.onSave({
+        linkText: linkText,
+        linkAddress: linkAddress,
+        position: {
+          r: r,
+          c: c
+        },
+        origin: origin
+      });
+      if (!saved) return;
+      setContext(function (draftCtx) {
+        var _saved$payload;
+        return saveHyperlink(draftCtx, r, c, linkText || saved.linkAddress, saved.linkType, saved.linkAddress, _objectSpread2(_objectSpread2({}, customPayload), (_saved$payload = saved.payload) !== null && _saved$payload !== void 0 ? _saved$payload : {}));
+      });
+      return;
+    }
     setContext(function (draftCtx) {
       return saveHyperlink(draftCtx, r, c, linkText, linkType, linkAddress);
     });
@@ -4417,10 +4563,30 @@ var SheetOverlay = function SheetOverlay() {
     if (link == null) {
       debouncedShowLinkCard(globalCache, rc.r, rc.c, false);
     } else {
+      var _settings$customLinkT, _customConfig$onHover, _settings$hooks, _settings$hooks$onHyp;
       showLinkCard(ctx, rc.r, rc.c, false);
       debouncedShowLinkCard(globalCache, rc.r, rc.c, false, true);
+      var payload = link.payload;
+      var customConfigMap = ((_settings$customLinkT = settings === null || settings === void 0 ? void 0 : settings.customLinkTypes) !== null && _settings$customLinkT !== void 0 ? _settings$customLinkT : []).reduce(function (acc, it) {
+        if (it.type) acc[it.type] = it;
+        return acc;
+      }, {});
+      var customConfig = customConfigMap[link.linkType];
+      var hoverInfo = {
+        linkType: link.linkType,
+        linkAddress: link.linkAddress,
+        payload: payload,
+        position: {
+          r: rc.r,
+          c: rc.c,
+          sheetId: ctx.currentSheetId
+        },
+        event: e
+      };
+      customConfig === null || customConfig === void 0 ? void 0 : (_customConfig$onHover = customConfig.onHover) === null || _customConfig$onHover === void 0 ? void 0 : _customConfig$onHover.call(customConfig, hoverInfo);
+      settings === null || settings === void 0 ? void 0 : (_settings$hooks = settings.hooks) === null || _settings$hooks === void 0 ? void 0 : (_settings$hooks$onHyp = _settings$hooks.onHyperlinkHover) === null || _settings$hooks$onHyp === void 0 ? void 0 : _settings$hooks$onHyp.call(_settings$hooks, hoverInfo);
     }
-  }, [debouncedShowLinkCard]);
+  }, [debouncedShowLinkCard, settings]);
   var lastHoverCellRef = useRef(null);
   var onMouseMove = useCallback(function (nativeEvent) {
     var _gc$commentBox, _gc$commentBox2, _gc$searchDialog, _gc$linkCard;

package/dist/index.js

@@ -2273,7 +2273,7 @@ var LinkEditCard = function LinkEditCard(_ref) {
     c = _ref.c,
     rc = _ref.rc,
     originText = _ref.originText,
-    originType = _ref.originType,
+    _originType = _ref.originType,
     originAddress = _ref.originAddress,
     isEditing = _ref.isEditing,
     position = _ref.position,
@@ -2281,7 +2281,8 @@ var LinkEditCard = function LinkEditCard(_ref) {
   var _useContext = React.useContext(WorkbookContext),
     context = _useContext.context,
     setContext = _useContext.setContext,
-    refs = _useContext.refs;
+    refs = _useContext.refs,
+    settings = _useContext.settings;
   var _useState = React.useState(originText),
     _useState2 = _slicedToArray(_useState, 2),
     linkText = _useState2[0],
@@ -2290,10 +2291,19 @@ var LinkEditCard = function LinkEditCard(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     linkAddress = _useState4[0],
     setLinkAddress = _useState4[1];
+  var originType = _originType || settings.detailLinkType || "webpage";
   var _useState5 = React.useState(originType),
     _useState6 = _slicedToArray(_useState5, 2),
     linkType = _useState6[0],
     setLinkType = _useState6[1];
+  var _useState7 = React.useState(function () {
+      var _origin$payload;
+      var origin = core.getCellHyperlink(context, r, c);
+      return (_origin$payload = origin === null || origin === void 0 ? void 0 : origin.payload) !== null && _origin$payload !== void 0 ? _origin$payload : {};
+    }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    customPayload = _useState8[0],
+    setCustomPayload = _useState8[1];
   var _locale = core.locale(context),
     insertLink = _locale.insertLink,
     linkTypeList = _locale.linkTypeList,
@@ -2304,9 +2314,65 @@ var LinkEditCard = function LinkEditCard(_ref) {
   }]));
   var skipCellRangeSet = React.useRef(true);
   var isLinkAddressValid = core.isLinkValid(context, linkType, linkAddress);
-  var tooltip = /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "validation-input-tip"
-  }, isLinkAddressValid.tooltip);
+  var mergedLinkTypeList = React.useMemo(function () {
+    var _settings$customLinkT;
+    var customs = (_settings$customLinkT = settings === null || settings === void 0 ? void 0 : settings.customLinkTypes) !== null && _settings$customLinkT !== void 0 ? _settings$customLinkT : [];
+    if (customs.length === 0) return linkTypeList;
+    var builtinTypes = new Set(linkTypeList.map(function (it) {
+      return it.value;
+    }));
+    var extra = customs.filter(function (it) {
+      return it.type && !builtinTypes.has(it.type);
+    }).map(function (it) {
+      return {
+        text: it.text,
+        value: it.type
+      };
+    });
+    return [].concat(_toConsumableArray(extra), _toConsumableArray(linkTypeList));
+  }, [settings === null || settings === void 0 ? void 0 : settings.customLinkTypes, linkTypeList]);
+  var customLinkTypeMap = React.useMemo(function () {
+    var _settings$customLinkT2;
+    var m = {};
+    ((_settings$customLinkT2 = settings === null || settings === void 0 ? void 0 : settings.customLinkTypes) !== null && _settings$customLinkT2 !== void 0 ? _settings$customLinkT2 : []).forEach(function (it) {
+      if (it.type) m[it.type] = it;
+    });
+    return m;
+  }, [settings === null || settings === void 0 ? void 0 : settings.customLinkTypes]);
+  var currentCustomConfig = customLinkTypeMap[linkType];
+  var isCustomTypeValid = React.useMemo(function () {
+    if (!currentCustomConfig) return true;
+    if (!currentCustomConfig.onSave) return true;
+    var next = currentCustomConfig.onSave({
+      linkText: linkText,
+      linkAddress: linkAddress,
+      position: {
+        r: r,
+        c: c
+      },
+      origin: function () {
+        var o = core.getCellHyperlink(context, r, c);
+        return o ? {
+          linkType: o.linkType,
+          linkAddress: o.linkAddress,
+          payload: o.payload
+        } : undefined;
+      }()
+    });
+    return next !== undefined;
+  }, [currentCustomConfig, linkText, linkAddress, r, c, context]);
+  var canSubmit = !currentCustomConfig || isCustomTypeValid ? isLinkAddressValid.isValid : false;
+  var tooltip = function () {
+    var text;
+    if (currentCustomConfig) {
+      text = isCustomTypeValid ? "" : insertLink.tooltipInfo1 || "";
+    } else {
+      text = isLinkAddressValid.tooltip;
+    }
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "validation-input-tip"
+    }, text);
+  }();
   var hideLinkCard = React.useCallback(function () {
     ___default['default'].set(refs.globalCache, "linkCard.mouseEnter", false);
     setContext(function (draftCtx) {
@@ -2368,10 +2434,13 @@ var LinkEditCard = function LinkEditCard(_ref) {
     }));
   }, []);
   React.useLayoutEffect(function () {
+    var _origin$payload2;
     setLinkAddress(originAddress);
     setLinkText(originText);
     setLinkType(originType);
-  }, [rc, originAddress, originText, originType]);
+    var origin = core.getCellHyperlink(context, r, c);
+    setCustomPayload((_origin$payload2 = origin === null || origin === void 0 ? void 0 : origin.payload) !== null && _origin$payload2 !== void 0 ? _origin$payload2 : {});
+  }, [rc, originAddress, originText, originType, r, c, context]);
   React.useLayoutEffect(function () {
     if (selectingCellRange) {
       skipCellRangeSet.current = true;
@@ -2390,6 +2459,7 @@ var LinkEditCard = function LinkEditCard(_ref) {
     }
   }, [context, selectingCellRange]);
   if (!isEditing) {
+    var toolbarCustomConfig = customLinkTypeMap[originType];
     return /*#__PURE__*/React__default['default'].createElement("div", _objectSpread2(_objectSpread2({}, containerEvent), {}, {
       onKeyDown: function onKeyDown(e) {
         e.stopPropagation();
@@ -2401,16 +2471,35 @@ var LinkEditCard = function LinkEditCard(_ref) {
       }
     }), /*#__PURE__*/React__default['default'].createElement("div", {
       className: "link-content",
-      onClick: function onClick() {
+      onClick: function onClick(reactEvent) {
+        var _getCellHyperlink, _toolbarCustomConfig$, _settings$hooks, _settings$hooks$onHyp;
+        var payload = (_getCellHyperlink = core.getCellHyperlink(context, r, c)) === null || _getCellHyperlink === void 0 ? void 0 : _getCellHyperlink.payload;
+        var clickInfo = {
+          linkType: originType,
+          linkAddress: originAddress,
+          payload: payload,
+          position: {
+            r: r,
+            c: c,
+            sheetId: context.currentSheetId
+          },
+          event: reactEvent
+        };
+        var userResult = toolbarCustomConfig === null || toolbarCustomConfig === void 0 ? void 0 : (_toolbarCustomConfig$ = toolbarCustomConfig.onClick) === null || _toolbarCustomConfig$ === void 0 ? void 0 : _toolbarCustomConfig$.call(toolbarCustomConfig, clickInfo);
+        settings === null || settings === void 0 ? void 0 : (_settings$hooks = settings.hooks) === null || _settings$hooks === void 0 ? void 0 : (_settings$hooks$onHyp = _settings$hooks.onHyperlinkClick) === null || _settings$hooks$onHyp === void 0 ? void 0 : _settings$hooks$onHyp.call(_settings$hooks, clickInfo);
+        if (userResult === false) {
+          hideLinkCard();
+          return;
+        }
         setContext(function (draftCtx) {
-          return core.goToLink(draftCtx, r, c, linkType, linkAddress, refs.scrollbarX.current, refs.scrollbarY.current);
+          return core.goToLink(draftCtx, r, c, originType, originAddress, refs.scrollbarX.current, refs.scrollbarY.current);
         });
       }
-    }, linkType === "webpage" ? insertLink.openLink : core.replaceHtml(insertLink.goTo, {
-      linkAddress: linkAddress
+    }, originType === "webpage" ? insertLink.openLink : core.replaceHtml(insertLink.goTo, {
+      linkAddress: originAddress
     })), context.allowEdit === true && /*#__PURE__*/React__default['default'].createElement("div", {
       className: "divider"
-    }), context.allowEdit === true && linkType === "webpage" && renderToolbarButton("copy", function () {
+    }), context.allowEdit === true && originType === "webpage" && renderToolbarButton("copy", function () {
       navigator.clipboard.writeText(originAddress);
       hideLinkCard();
     }), context.allowEdit === true && renderToolbarButton("pencil", function () {
@@ -2489,18 +2578,23 @@ var LinkEditCard = function LinkEditCard(_ref) {
     className: "leankylin-link-modify-select",
     value: linkType,
     onChange: function onChange(e) {
-      if (e.target.value === "sheet") {
+      var next = e.target.value;
+      var nextCustomConfig = customLinkTypeMap[next];
+      if (next === "sheet") {
         if (!linkText) {
           setLinkText(context.luckysheetfile[0].name);
         }
         setLinkAddress(context.luckysheetfile[0].name);
+      } else if (nextCustomConfig) {
+        setLinkAddress("");
+        setCustomPayload({});
       } else {
         setLinkAddress("");
       }
-      if (e.target.value === "cellrange") setRangeModalVisible(true);
-      setLinkType(e.target.value);
+      if (next === "cellrange") setRangeModalVisible(true);
+      setLinkType(next);
     }
-  }, linkTypeList.map(function (type) {
+  }, mergedLinkTypeList.map(function (type) {
     return /*#__PURE__*/React__default['default'].createElement("option", {
       key: type.value,
       value: type.value
@@ -2546,11 +2640,63 @@ var LinkEditCard = function LinkEditCard(_ref) {
       key: sheet.id,
       value: sheet.name
     }, sheet.name);
+  })), tooltip)), currentCustomConfig && ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, currentCustomConfig.render ? currentCustomConfig.render({
+    value: linkAddress,
+    position: {
+      r: r,
+      c: c
+    },
+    onChange: function onChange(v) {
+      return setLinkAddress(v);
+    },
+    setPayload: function setPayload(next) {
+      setCustomPayload(function (prev) {
+        return typeof next === "function" ? next(prev) : next;
+      });
+    },
+    payload: customPayload,
+    ctx: {
+      context: context,
+      setContext: setContext,
+      settings: settings
+    }
+  }) : ( /*#__PURE__*/React__default['default'].createElement("input", {
+    className: "leankylin-link-modify-input ".concat(canSubmit ? "" : "error-input"),
+    spellCheck: "false",
+    value: linkAddress,
+    onChange: function onChange(e) {
+      return setLinkAddress(e.target.value);
+    }
   })), tooltip))), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "modal-footer"
   }, renderBottomButton(function () {
-    if (!isLinkAddressValid.isValid) return;
+    if (!canSubmit) return;
     ___default['default'].set(refs.globalCache, "linkCard.mouseEnter", false);
+    if (currentCustomConfig === null || currentCustomConfig === void 0 ? void 0 : currentCustomConfig.onSave) {
+      var origin = function () {
+        var o = core.getCellHyperlink(context, r, c);
+        return o ? {
+          linkType: o.linkType,
+          linkAddress: o.linkAddress,
+          payload: o.payload
+        } : undefined;
+      }();
+      var saved = currentCustomConfig.onSave({
+        linkText: linkText,
+        linkAddress: linkAddress,
+        position: {
+          r: r,
+          c: c
+        },
+        origin: origin
+      });
+      if (!saved) return;
+      setContext(function (draftCtx) {
+        var _saved$payload;
+        return core.saveHyperlink(draftCtx, r, c, linkText || saved.linkAddress, saved.linkType, saved.linkAddress, _objectSpread2(_objectSpread2({}, customPayload), (_saved$payload = saved.payload) !== null && _saved$payload !== void 0 ? _saved$payload : {}));
+      });
+      return;
+    }
     setContext(function (draftCtx) {
       return core.saveHyperlink(draftCtx, r, c, linkText, linkType, linkAddress);
     });
@@ -4427,10 +4573,30 @@ var SheetOverlay = function SheetOverlay() {
     if (link == null) {
       debouncedShowLinkCard(globalCache, rc.r, rc.c, false);
     } else {
+      var _settings$customLinkT, _customConfig$onHover, _settings$hooks, _settings$hooks$onHyp;
       core.showLinkCard(ctx, rc.r, rc.c, false);
       debouncedShowLinkCard(globalCache, rc.r, rc.c, false, true);
+      var payload = link.payload;
+      var customConfigMap = ((_settings$customLinkT = settings === null || settings === void 0 ? void 0 : settings.customLinkTypes) !== null && _settings$customLinkT !== void 0 ? _settings$customLinkT : []).reduce(function (acc, it) {
+        if (it.type) acc[it.type] = it;
+        return acc;
+      }, {});
+      var customConfig = customConfigMap[link.linkType];
+      var hoverInfo = {
+        linkType: link.linkType,
+        linkAddress: link.linkAddress,
+        payload: payload,
+        position: {
+          r: rc.r,
+          c: rc.c,
+          sheetId: ctx.currentSheetId
+        },
+        event: e
+      };
+      customConfig === null || customConfig === void 0 ? void 0 : (_customConfig$onHover = customConfig.onHover) === null || _customConfig$onHover === void 0 ? void 0 : _customConfig$onHover.call(customConfig, hoverInfo);
+      settings === null || settings === void 0 ? void 0 : (_settings$hooks = settings.hooks) === null || _settings$hooks === void 0 ? void 0 : (_settings$hooks$onHyp = _settings$hooks.onHyperlinkHover) === null || _settings$hooks$onHyp === void 0 ? void 0 : _settings$hooks$onHyp.call(_settings$hooks, hoverInfo);
     }
-  }, [debouncedShowLinkCard]);
+  }, [debouncedShowLinkCard, settings]);
   var lastHoverCellRef = React.useRef(null);
   var onMouseMove = React.useCallback(function (nativeEvent) {
     var _gc$commentBox, _gc$commentBox2, _gc$searchDialog, _gc$linkCard;