@fileverse-dev/fortune-react 1.0.2-mod-13 → 1.0.2-mod-15

package/dist/index.js

@@ -2373,7 +2373,8 @@ var NotationBoxes = function NotationBoxes() {
   var _useContext = React.useContext(WorkbookContext),
     context = _useContext.context,
     setContext = _useContext.setContext,
-    refs = _useContext.refs;
+    refs = _useContext.refs,
+    settings = _useContext.settings;
   var flowdata = fortuneCore.getFlowdata(context);
   React.useEffect(function () {
     if (flowdata) {
@@ -2401,8 +2402,8 @@ var NotationBoxes = function NotationBoxes() {
   }, ___default['default'].concat((_context$commentBoxes = context.commentBoxes) === null || _context$commentBoxes === void 0 ? void 0 : _context$commentBoxes.filter(function (v) {
     var _context$editingComme;
     return (v === null || v === void 0 ? void 0 : v.rc) !== ((_context$editingComme = context.editingCommentBox) === null || _context$editingComme === void 0 ? void 0 : _context$editingComme.rc);
-  }), [context.editingCommentBox, context.hoveredCommentBox]).map(function (commentBox) {
-    var _context$editingComme2;
+  }), [context.editingCommentBox, context.hoveredCommentBox]).map(function (commentBox, index) {
+    var _context$editingComme2, _settings$getCommentC;
     if (!commentBox) return null;
     var r = commentBox.r,
       c = commentBox.c,
@@ -2417,7 +2418,7 @@ var NotationBoxes = function NotationBoxes() {
     var isEditing = ((_context$editingComme2 = context.editingCommentBox) === null || _context$editingComme2 === void 0 ? void 0 : _context$editingComme2.rc) === rc;
     var commentId = "comment-box-".concat(rc);
     return /*#__PURE__*/React__default['default'].createElement("div", {
-      key: rc
+      key: rc + index
     }, /*#__PURE__*/React__default['default'].createElement("canvas", {
       id: "arrowCanvas-".concat(rc),
       className: "arrowCanvas",
@@ -2461,72 +2462,12 @@ var NotationBoxes = function NotationBoxes() {
         e.stopPropagation();
       }
     }, /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "luckysheet-postil-dialog-move"
-    }, ["t", "r", "b", "l"].map(function (v) {
-      return /*#__PURE__*/React__default['default'].createElement("div", {
-        key: v,
-        className: "luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-".concat(v),
-        "data-type": v
-      });
-    })), isEditing && (/*#__PURE__*/React__default['default'].createElement("div", {
-      className: "luckysheet-postil-dialog-resize"
-    }, ["lt", "mt", "lm", "rm", "rt", "lb", "mb", "rb"].map(function (v) {
-      return /*#__PURE__*/React__default['default'].createElement("div", {
-        key: v,
-        className: "luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-".concat(v),
-        "data-type": v,
-        onMouseDown: function onMouseDown(e) {
-          var nativeEvent = e.nativeEvent;
-          fortuneCore.onCommentBoxResizeStart(context, refs.globalCache, nativeEvent, {
-            r: r,
-            c: c,
-            rc: rc
-          }, commentId, v);
-          e.stopPropagation();
-        }
-      });
-    }))), /*#__PURE__*/React__default['default'].createElement("div", {
       style: {
         width: "100%",
         height: "100%",
         overflow: "hidden"
       }
-    }, /*#__PURE__*/React__default['default'].createElement(ContentEditable, {
-      id: "comment-editor-".concat(rc),
-      autoFocus: autoFocus,
-      style: {
-        width: "100%",
-        height: "100%",
-        lineHeight: "20px",
-        boxSizing: "border-box",
-        textAlign: "center",
-        wordBreak: "break-all",
-        outline: "none"
-      },
-      allowEdit: context.allowEdit,
-      spellCheck: false,
-      "data-r": r,
-      "data-c": c,
-      onKeyDown: function onKeyDown(e) {
-        return e.stopPropagation();
-      },
-      onFocus: function onFocus(e) {
-        if (context.allowEdit === false) return;
-        refs.globalCache.editingCommentBoxEle = e.target;
-      },
-      onMouseDown: function onMouseDown(e) {
-        setContext(function (draftContext) {
-          if (flowdata) {
-            fortuneCore.setEditingComment(draftContext, flowdata, r, c);
-          }
-        });
-        e.stopPropagation();
-      },
-      onDoubleClick: function onDoubleClick(e) {
-        e.stopPropagation();
-      },
-      initialContent: value
-    }))));
+    }, (_settings$getCommentC = settings.getCommentCellUI) === null || _settings$getCommentC === void 0 ? void 0 : _settings$getCommentC.call(settings, r, c))));
   }));
 };
 
@@ -7618,6 +7559,27 @@ var ContextMenu = function ContextMenu() {
         key: "divider-".concat(i)
       });
     }
+    if (name === "comment") {
+      return /*#__PURE__*/React__default['default'].createElement(Menu, {
+        key: name,
+        onClick: function onClick() {
+          setContext(function (draftCtx) {
+            fortuneCore.newComment(draftCtx, refs.globalCache, selection === null || selection === void 0 ? void 0 : selection.row_focus, selection === null || selection === void 0 ? void 0 : selection.column_focus);
+            draftCtx.contextMenu = {};
+          });
+        }
+      }, /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+        name: "comment-flv",
+        width: 18,
+        height: 18,
+        style: {
+          marginTop: "4px",
+          marginRight: "4px"
+        }
+      }), /*#__PURE__*/React__default['default'].createElement("p", null, "Comment")));
+    }
     if (name === "copy") {
       return /*#__PURE__*/React__default['default'].createElement(Menu, {
         key: name,
@@ -7633,7 +7595,16 @@ var ContextMenu = function ContextMenu() {
             draftCtx.contextMenu = {};
           });
         }
-      }, rightclick.copy);
+      }, /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+        name: "copy-flv",
+        width: 22,
+        height: 22,
+        style: {
+          marginTop: "4px"
+        }
+      }), /*#__PURE__*/React__default['default'].createElement("p", null, rightclick.copy)));
     }
     if (name === "paste" && regeneratorRuntime__default['default']) {
       return /*#__PURE__*/React__default['default'].createElement(Menu, {
@@ -7663,7 +7634,16 @@ var ContextMenu = function ContextMenu() {
           }
           return onClick;
         }()
-      }, rightclick.paste);
+      }, /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+        name: "paste-flv",
+        width: 16,
+        height: 16,
+        style: {
+          marginRight: "8px"
+        }
+      }), /*#__PURE__*/React__default['default'].createElement("p", null, rightclick.paste)));
     }
     if (name === "insert-column") {
       return (selection === null || selection === void 0 ? void 0 : selection.row_select) ? null : ["left", "right"].map(function (dir) {
@@ -7671,13 +7651,10 @@ var ContextMenu = function ContextMenu() {
         return /*#__PURE__*/React__default['default'].createElement(Menu, {
           key: "add-col-".concat(dir),
           onClick: function onClick(e) {
-            var _context$luckysheet_s2, _context$luckysheet_s3, _context$luckysheet_s4, _e$target$querySelect;
+            var _context$luckysheet_s2, _context$luckysheet_s3, _context$luckysheet_s4;
             var position = (_context$luckysheet_s2 = context.luckysheet_select_save) === null || _context$luckysheet_s2 === void 0 ? void 0 : (_context$luckysheet_s3 = _context$luckysheet_s2[0]) === null || _context$luckysheet_s3 === void 0 ? void 0 : (_context$luckysheet_s4 = _context$luckysheet_s3.column) === null || _context$luckysheet_s4 === void 0 ? void 0 : _context$luckysheet_s4[0];
             if (position == null) return;
-            var countStr = (_e$target$querySelect = e.target.querySelector("input")) === null || _e$target$querySelect === void 0 ? void 0 : _e$target$querySelect.value;
-            if (countStr == null) return;
-            var count = parseInt(countStr, 10);
-            if (count < 1) return;
+            var count = 1;
             var direction = dir === "left" ? "lefttop" : "rightbottom";
             var insertRowColOp = {
               type: "column",
@@ -7698,23 +7675,20 @@ var ContextMenu = function ContextMenu() {
               insertRowColOp: insertRowColOp
             });
           }
-        }, /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, ___default['default'].startsWith((_context$lang = context.lang) !== null && _context$lang !== void 0 ? _context$lang : "", "zh") && (/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, rightclick.to, /*#__PURE__*/React__default['default'].createElement("span", {
+        }, /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+          name: "insert-flv",
+          width: 18,
+          height: 18,
+          style: {
+            marginRight: "8px",
+            position: "relative",
+            top: "3px"
+          }
+        }), ___default['default'].startsWith((_context$lang = context.lang) !== null && _context$lang !== void 0 ? _context$lang : "", "zh") && (/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, rightclick.to, /*#__PURE__*/React__default['default'].createElement("span", {
           className: "luckysheet-cols-rows-shift-".concat(dir)
-        }, rightclick[dir]))), "".concat(rightclick.insert, "  "), /*#__PURE__*/React__default['default'].createElement("input", {
-          onClick: function onClick(e) {
-            return e.stopPropagation();
-          },
-          onKeyDown: function onKeyDown(e) {
-            return e.stopPropagation();
-          },
-          tabIndex: 0,
-          type: "text",
-          className: "luckysheet-mousedown-cancel",
-          placeholder: rightclick.number,
-          defaultValue: "1"
-        }), /*#__PURE__*/React__default['default'].createElement("span", {
+        }, rightclick[dir]))), "".concat(rightclick.insert, "  "), "1", /*#__PURE__*/React__default['default'].createElement("span", {
           className: "luckysheet-cols-rows-shift-word luckysheet-mousedown-cancel"
-        }, "".concat(rightclick.column, "  ")), !___default['default'].startsWith((_context$lang2 = context.lang) !== null && _context$lang2 !== void 0 ? _context$lang2 : "", "zh") && (/*#__PURE__*/React__default['default'].createElement("span", {
+        }, " ".concat(rightclick.column, "  ")), !___default['default'].startsWith((_context$lang2 = context.lang) !== null && _context$lang2 !== void 0 ? _context$lang2 : "", "zh") && (/*#__PURE__*/React__default['default'].createElement("span", {
           className: "luckysheet-cols-rows-shift-".concat(dir)
         }, rightclick[dir]))));
       });
@@ -7725,13 +7699,10 @@ var ContextMenu = function ContextMenu() {
         return /*#__PURE__*/React__default['default'].createElement(Menu, {
           key: "add-row-".concat(dir),
           onClick: function onClick(e, container) {
-            var _context$luckysheet_s5, _context$luckysheet_s6, _context$luckysheet_s7, _container$querySelec;
+            var _context$luckysheet_s5, _context$luckysheet_s6, _context$luckysheet_s7;
             var position = (_context$luckysheet_s5 = context.luckysheet_select_save) === null || _context$luckysheet_s5 === void 0 ? void 0 : (_context$luckysheet_s6 = _context$luckysheet_s5[0]) === null || _context$luckysheet_s6 === void 0 ? void 0 : (_context$luckysheet_s7 = _context$luckysheet_s6.row) === null || _context$luckysheet_s7 === void 0 ? void 0 : _context$luckysheet_s7[0];
             if (position == null) return;
-            var countStr = (_container$querySelec = container.querySelector("input")) === null || _container$querySelec === void 0 ? void 0 : _container$querySelec.value;
-            if (countStr == null) return;
-            var count = parseInt(countStr, 10);
-            if (count < 1) return;
+            var count = 1;
             var direction = dir === "top" ? "lefttop" : "rightbottom";
             var insertRowColOp = {
               type: "row",
@@ -7752,23 +7723,20 @@ var ContextMenu = function ContextMenu() {
               insertRowColOp: insertRowColOp
             });
           }
-        }, /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, ___default['default'].startsWith((_context$lang3 = context.lang) !== null && _context$lang3 !== void 0 ? _context$lang3 : "", "zh") && (/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, rightclick.to, /*#__PURE__*/React__default['default'].createElement("span", {
+        }, /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+          name: "insert-flv",
+          width: 18,
+          height: 18,
+          style: {
+            marginRight: "8px",
+            position: "relative",
+            top: "3px"
+          }
+        }), ___default['default'].startsWith((_context$lang3 = context.lang) !== null && _context$lang3 !== void 0 ? _context$lang3 : "", "zh") && (/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, rightclick.to, /*#__PURE__*/React__default['default'].createElement("span", {
           className: "luckysheet-cols-rows-shift-".concat(dir)
-        }, rightclick[dir]))), "".concat(rightclick.insert, "  "), /*#__PURE__*/React__default['default'].createElement("input", {
-          onClick: function onClick(e) {
-            return e.stopPropagation();
-          },
-          onKeyDown: function onKeyDown(e) {
-            return e.stopPropagation();
-          },
-          tabIndex: 0,
-          type: "text",
-          className: "luckysheet-mousedown-cancel",
-          placeholder: rightclick.number,
-          defaultValue: "1"
-        }), /*#__PURE__*/React__default['default'].createElement("span", {
+        }, rightclick[dir]))), "".concat(rightclick.insert, "  "), "1", /*#__PURE__*/React__default['default'].createElement("span", {
           className: "luckysheet-cols-rows-shift-word luckysheet-mousedown-cancel"
-        }, "".concat(rightclick.row, "  ")), !___default['default'].startsWith((_context$lang4 = context.lang) !== null && _context$lang4 !== void 0 ? _context$lang4 : "", "zh") && (/*#__PURE__*/React__default['default'].createElement("span", {
+        }, " ".concat(rightclick.row, "  ")), !___default['default'].startsWith((_context$lang4 = context.lang) !== null && _context$lang4 !== void 0 ? _context$lang4 : "", "zh") && (/*#__PURE__*/React__default['default'].createElement("span", {
           className: "luckysheet-cols-rows-shift-".concat(dir)
         }, rightclick[dir]))));
       });
@@ -7911,8 +7879,8 @@ var ContextMenu = function ContextMenu() {
       })) ? (/*#__PURE__*/React__default['default'].createElement(Menu, {
         key: "set-row-height",
         onClick: function onClick(e, container) {
-          var _container$querySelec2;
-          var targetRowHeight = (_container$querySelec2 = container.querySelector("input")) === null || _container$querySelec2 === void 0 ? void 0 : _container$querySelec2.value;
+          var _container$querySelec;
+          var targetRowHeight = (_container$querySelec = container.querySelector("input")) === null || _container$querySelec === void 0 ? void 0 : _container$querySelec.value;
           setContext(function (draftCtx) {
             if (___default['default'].isUndefined(targetRowHeight) || targetRowHeight === "" || parseInt(targetRowHeight, 10) <= 0 || parseInt(targetRowHeight, 10) > 545) {
               showAlert(info.tipRowHeightLimit, "ok");
@@ -7960,8 +7928,8 @@ var ContextMenu = function ContextMenu() {
       })) ? (/*#__PURE__*/React__default['default'].createElement(Menu, {
         key: "set-column-width",
         onClick: function onClick(e, container) {
-          var _container$querySelec3;
-          var targetColWidth = (_container$querySelec3 = container.querySelector("input")) === null || _container$querySelec3 === void 0 ? void 0 : _container$querySelec3.value;
+          var _container$querySelec2;
+          var targetColWidth = (_container$querySelec2 = container.querySelector("input")) === null || _container$querySelec2 === void 0 ? void 0 : _container$querySelec2.value;
           setContext(function (draftCtx) {
             if (___default['default'].isUndefined(targetColWidth) || targetColWidth === "" || parseInt(targetColWidth, 10) <= 0 || parseInt(targetColWidth, 10) > 2038) {
               showAlert(info.tipColumnWidthLimit, "ok");
@@ -8021,7 +7989,16 @@ var ContextMenu = function ContextMenu() {
             fortuneCore.jfrefreshgrid(draftCtx, null, undefined);
           });
         }
-      }, rightclick.clearContent);
+      }, /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+        name: "clear-flv",
+        width: 18,
+        height: 18,
+        style: {
+          marginRight: "8px"
+        }
+      }), /*#__PURE__*/React__default['default'].createElement("p", null, rightclick.clearContent)));
     }
     if (name === "orderAZ") {
       return /*#__PURE__*/React__default['default'].createElement(Menu, {
@@ -9636,13 +9613,89 @@ var SVGDefines = function SVGDefines(_ref) {
     d: "M163.396608 289.168384c-40.577024 0-66.526208 54.183936-35.44064 85.25824L477.217792 723.704832c20.031488 20.031488 49.82272 20.031488 69.853184 0l349.274112-349.278208c30.30528-30.294016 6.677504-85.25824-34.927616-85.25824L163.396608 289.168384z",
     "p-id": "2683"
   })), /*#__PURE__*/React__default['default'].createElement("symbol", {
-    viewBox: "0 0 1024 1024",
-    fill: "#272636",
-    id: "headDownArrow"
-  }, /*#__PURE__*/React__default['default'].createElement("path", {
-    d: "M0 511.976727C0 229.678545 229.725091 0 511.976727 0s511.976727 229.632 511.976727 511.976727c0 282.391273-229.725091 511.976727-511.976727 511.976727C229.725091 1024 0 794.368 0 511.976727M955.717818 511.976727c0-244.898909-199.121455-444.206545-443.741091-444.206545-244.666182 0-443.694545 199.307636-443.694545 444.206545 0 244.945455 199.121455 444.253091 443.694545 444.253091C756.642909 956.276364 955.717818 756.968727 955.717818 511.976727M230.027636 419.025455c0-6.562909 2.420364-13.102545 7.563636-18.059636 9.914182-9.960727 26.042182-9.960727 36.096 0l238.289455 236.916364L750.312727 401.105455c9.960727-9.914182 26.135273-9.914182 36.305455 0 9.914182 9.960727 9.914182 26.042182 0 35.956364L511.976727 709.678545 237.474909 436.922182C232.424727 432.104727 230.027636 425.588364 230.027636 419.025455",
-    "p-id": "5142"
+    id: "headDownArrow",
+    viewBox: "0 0 14 14"
+  }, /*#__PURE__*/React__default['default'].createElement("rect", {
+    width: "14",
+    height: "14",
+    rx: "4",
+    fill: "black",
+    "fill-opacity": "0.1"
+  }), /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M6.64653 8.97978L3.7703 6.10355C3.45532 5.78857 3.6784 5.25 4.12385 5.25H9.87631C10.3218 5.25 10.5448 5.78857 10.2299 6.10355L7.35363 8.97978C7.15837 9.17504 6.84179 9.17504 6.64653 8.97978Z",
+    fill: "#363B3F"
   })), /*#__PURE__*/React__default['default'].createElement("symbol", {
+    id: "copy-flv",
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React__default['default'].createElement("svg", {
+    width: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default['default'].createElement("g", {
+    "clip-path": "url(#clip0_1714_87221)"
+  }, /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M2.25 3C2.25 2.58921 2.58921 2.25 3 2.25H10.5C10.9108 2.25 11.25 2.58921 11.25 3C11.25 3.41421 11.5858 3.75 12 3.75C12.4142 3.75 12.75 3.41421 12.75 3C12.75 1.76079 11.7392 0.75 10.5 0.75H3C1.76079 0.75 0.75 1.76079 0.75 3V10.5C0.75 11.7392 1.76079 12.75 3 12.75C3.41421 12.75 3.75 12.4142 3.75 12C3.75 11.5858 3.41421 11.25 3 11.25C2.58921 11.25 2.25 10.9108 2.25 10.5V3Z",
+    fill: "#363B3F"
+  }), /*#__PURE__*/React__default['default'].createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M7.5 5.25C6.25736 5.25 5.25 6.25736 5.25 7.5V15C5.25 16.2426 6.25736 17.25 7.5 17.25H15C16.2426 17.25 17.25 16.2426 17.25 15V7.5C17.25 6.25736 16.2426 5.25 15 5.25H7.5ZM6.75 7.5C6.75 7.08579 7.08579 6.75 7.5 6.75H15C15.4142 6.75 15.75 7.08579 15.75 7.5V15C15.75 15.4142 15.4142 15.75 15 15.75H7.5C7.08579 15.75 6.75 15.4142 6.75 15V7.5Z",
+    fill: "#363B3F"
+  })), /*#__PURE__*/React__default['default'].createElement("defs", null, /*#__PURE__*/React__default['default'].createElement("clipPath", {
+    id: "clip0_1714_87221"
+  }, /*#__PURE__*/React__default['default'].createElement("rect", {
+    width: "24",
+    height: "24",
+    fill: "white"
+  }))))), /*#__PURE__*/React__default['default'].createElement("symbol", {
+    id: "paste-flv",
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React__default['default'].createElement("svg", {
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default['default'].createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M6.75 0.75C5.92157 0.75 5.25 1.42157 5.25 2.25H4.5C3.90326 2.25 3.33097 2.48705 2.90901 2.90901C2.48705 3.33097 2.25 3.90326 2.25 4.5V15C2.25 15.5967 2.48705 16.169 2.90901 16.591C3.33097 17.0129 3.90326 17.25 4.5 17.25H13.5C14.0967 17.25 14.669 17.0129 15.091 16.591C15.5129 16.169 15.75 15.5967 15.75 15V4.5C15.75 3.90326 15.5129 3.33097 15.091 2.90901C14.669 2.48705 14.0967 2.25 13.5 2.25H12.75C12.75 1.42157 12.0784 0.75 11.25 0.75H6.75ZM12.75 3.75C12.75 4.57843 12.0784 5.25 11.25 5.25H6.75C5.92157 5.25 5.25 4.57843 5.25 3.75H4.5C4.30109 3.75 4.11032 3.82902 3.96967 3.96967C3.82902 4.11032 3.75 4.30109 3.75 4.5V15C3.75 15.1989 3.82902 15.3897 3.96967 15.5303C4.11032 15.671 4.30109 15.75 4.5 15.75H13.5C13.6989 15.75 13.8897 15.671 14.0303 15.5303C14.171 15.3897 14.25 15.1989 14.25 15V4.5C14.25 4.30109 14.171 4.11032 14.0303 3.96967C13.8897 3.82902 13.6989 3.75 13.5 3.75H12.75ZM6.75 3.75H11.25V2.25H6.75V3.75Z",
+    fill: "#363B3F"
+  }))), /*#__PURE__*/React__default['default'].createElement("symbol", {
+    id: "insert-flv",
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React__default['default'].createElement("svg", {
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M9.75 3.75C9.75 3.33579 9.41421 3 9 3C8.58579 3 8.25 3.33579 8.25 3.75V8.25H3.75C3.33579 8.25 3 8.58579 3 9C3 9.41421 3.33579 9.75 3.75 9.75H8.25V14.25C8.25 14.6642 8.58579 15 9 15C9.41421 15 9.75 14.6642 9.75 14.25V9.75H14.25C14.6642 9.75 15 9.41421 15 9C15 8.58579 14.6642 8.25 14.25 8.25H9.75V3.75Z",
+    fill: "#363B3F"
+  }))), /*#__PURE__*/React__default['default'].createElement("symbol", {
+    id: "clear-flv",
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React__default['default'].createElement("svg", {
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M8.69336 2.24495C9.7149 1.2235 11.3274 1.1765 12.3164 2.25764L16.5039 6.44514C17.525 7.46664 17.572 9.07929 16.4912 10.0682L11.5586 14.9998H16.498C16.9122 14.9998 17.2479 15.3357 17.248 15.7498C17.248 16.164 16.9123 16.4998 16.498 16.4998H5.24804L5.17187 16.4959C5.11573 16.4902 5.06253 16.4752 5.01074 16.4578C4.99425 16.4523 4.97708 16.4489 4.96093 16.4422C4.93739 16.4324 4.91581 16.4191 4.89355 16.4071C4.83108 16.3733 4.77055 16.3329 4.71777 16.2801L1.49316 13.0555C0.47162 12.034 0.424681 10.4205 1.50586 9.43147L8.69336 2.24495ZM2.55371 10.5057C2.54459 10.5148 2.53497 10.5234 2.52539 10.5321C2.12282 10.8944 2.08021 11.5214 2.55371 11.9949L5.55859 14.9998H9.4375L3.74804 9.31037L2.55371 10.5057ZM11.2158 3.27717C10.8535 2.87463 10.2274 2.83209 9.7539 3.30549L4.80859 8.24983L10.498 13.9393L15.4434 8.99495C15.4526 8.98568 15.4619 8.97637 15.4717 8.9676C15.8741 8.60538 15.9164 7.97912 15.4434 7.50569L11.2432 3.30549C11.2339 3.29628 11.2245 3.28686 11.2158 3.27717Z",
+    fill: "#363B3F"
+  }))), /*#__PURE__*/React__default['default'].createElement("symbol", {
+    id: "comment-flv",
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React__default['default'].createElement("svg", {
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M9 4.5C9.41421 4.5 9.75 4.83579 9.75 5.25V6.75H11.25C11.6642 6.75 12 7.08579 12 7.5C12 7.91421 11.6642 8.25 11.25 8.25H9.75V9.75C9.75 10.1642 9.41421 10.5 9 10.5C8.58579 10.5 8.25 10.1642 8.25 9.75V8.25H6.75C6.33579 8.25 6 7.91421 6 7.5C6 7.08579 6.33579 6.75 6.75 6.75H8.25V5.25C8.25 4.83579 8.58579 4.5 9 4.5Z",
+    fill: "#363B3F"
+  }), /*#__PURE__*/React__default['default'].createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M3.75 1.5C3.15326 1.5 2.58097 1.73705 2.15901 2.15901C1.73705 2.58097 1.5 3.15326 1.5 3.75V15.75C1.5 16.0533 1.68273 16.3268 1.96299 16.4429C2.24324 16.559 2.56583 16.4948 2.78033 16.2803L5.56066 13.5H14.25C14.8467 13.5 15.419 13.2629 15.841 12.841C16.2629 12.419 16.5 11.8467 16.5 11.25V3.75C16.5 3.15326 16.2629 2.58097 15.841 2.15901C15.419 1.73705 14.8467 1.5 14.25 1.5H3.75ZM3.21967 3.21967C3.36032 3.07902 3.55109 3 3.75 3H14.25C14.4489 3 14.6397 3.07902 14.7803 3.21967C14.921 3.36032 15 3.55109 15 3.75V11.25C15 11.4489 14.921 11.6397 14.7803 11.7803C14.6397 11.921 14.4489 12 14.25 12H5.25C5.05109 12 4.86032 12.079 4.71967 12.2197L3 13.9393V3.75C3 3.55109 3.07902 3.36032 3.21967 3.21967Z",
+    fill: "#363B3F"
+  }))), /*#__PURE__*/React__default['default'].createElement("symbol", {
     viewBox: "0 0 1024 1024",
     id: "tab"
   }, /*#__PURE__*/React__default['default'].createElement("path", {
@@ -10049,6 +10102,11 @@ function generateAPIs(context, setContext, handleUndo, handleRedo, settings, cel
         }
       });
     },
+    initializeComment: function initializeComment(row, column) {
+      setContext(function (ctx) {
+        fortuneCore.newComment(ctx, undefined, row, column);
+      });
+    },
     setCellValue: function setCellValue(row, column, value) {
       var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
       return setContext(function (draftCtx) {

package/dist/index.umd.css

@@ -2980,8 +2980,8 @@ label {
   box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.15);
   transition: opacity 0.218s;
   background: #fff;
-  border: 1px solid #ccc;
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  border: 1px solid #E8EBEC;
+  border: 1px solid #E8EBEC;
   cursor: default;
   font-size: 13px;
   margin: 0;
@@ -2993,8 +2993,21 @@ label {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  max-width: 250px;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.08);
+  color: #363B3F;
+  line-height: 20px;
+}
+
+.context-item {
+  display: flex;
+  align-items: center;
+  height: 20px;
 }
 
+
 .fortune-context-menu input.luckysheet-mousedown-cancel {
   width: 35px;
   text-align: center;
@@ -3039,7 +3052,7 @@ label {
   cursor: pointer;
   list-style: none;
   margin: 0;
-  padding: 6px 7em 6px 30px;
+  padding: 6px 10px 6px 10px !important;
   white-space: nowrap;
   -webkit-user-select: none;
      -moz-user-select: none;