@fileverse-dev/fortune-react 1.2.64-patch-5 → 1.2.64-patch-7

package/es/components/ConditionFormat/ConditionRules.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import "./index.css";
+import "./formating.css";
 declare const ConditionRules: React.FC<{
     type?: string;
     context?: any;

package/es/components/ConditionFormat/ConditionRules.js

@@ -1,9 +1,11 @@
-import React, { useCallback, useContext, useEffect, useState } from "react";
+import React, { useRef, useCallback, useContext, useEffect, useState } from "react";
 import "./index.css";
+import { cn } from "@fileverse/ui";
 import { locale, setConditionRules, getSheetIndex } from "@fileverse-dev/fortune-core";
 import { numberToColumn } from "../SheetOverlay/helper";
+import "./formating.css";
 import produce from "immer";
-import { Button, Checkbox, Divider, IconButton, LucideIcon, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, TextField } from "@fileverse/ui";
+import { Button, IconButton, LucideIcon, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, TextField } from "@fileverse/ui";
 import WorkbookContext from "../../context";
 import { useDialog } from "../../hooks/useDialog";
 import { getDisplayedRangeTxt } from "../DataVerification/getDisplayedRangeTxt";
@@ -18,6 +20,7 @@ var ConditionRules = function ConditionRules(_a) {
   var _c = useState(false),
     create = _c[0],
     setCreate = _c[1];
+  var buttonClickCreateRef = useRef(false);
   var _d = useState([]),
     matchedConditionFormatKey = _d[0],
     setMatchedConditionFormatKey = _d[1];
@@ -37,28 +40,30 @@ var ConditionRules = function ConditionRules(_a) {
     }),
     colorRules = _g[0],
     setColorRules = _g[1];
+  var _h = useState(false),
+    bold = _h[0],
+    setBold = _h[1];
+  var _j = useState(false),
+    italic = _j[0],
+    setItalic = _j[1];
+  var _k = useState(false),
+    underline = _k[0],
+    setUnderline = _k[1];
+  var _l = useState(false),
+    strikethrough = _l[0],
+    setStrikethrough = _l[1];
   useEffect(function () {
-    console.log("c=======why", context);
+    var _a, _b, _c;
     var index = getSheetIndex(context, context === null || context === void 0 ? void 0 : context.currentSheetId) || 0;
     var allCondition = context.luckysheetfile[index].luckysheet_conditionformat_save;
-    console.log("====whyallCondition", allCondition);
-  }, [context]);
-  useEffect(function () {
-    var _a, _b, _c, _d;
-    var index = getSheetIndex(context, context === null || context === void 0 ? void 0 : context.currentSheetId) || 0;
-    var allCondition = context.luckysheetfile[index].luckysheet_conditionformat_save;
-    if (allCondition && (allCondition === null || allCondition === void 0 ? void 0 : allCondition.length) === (allConditionFormats === null || allConditionFormats === void 0 ? void 0 : allConditionFormats.length)) return;
     setAllConditionFormats(allCondition);
-    console.log("allConditionFormats", allCondition, (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0], context);
-    console.log("typed", context);
-    var selectionColumn = (_b = context.luckysheet_select_save) === null || _b === void 0 ? void 0 : _b[0].column;
-    var selectionRow = (_c = context.luckysheet_select_save) === null || _c === void 0 ? void 0 : _c[0].row;
+    var selectionColumn = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0].column;
+    var selectionRow = (_b = context.luckysheet_select_save) === null || _b === void 0 ? void 0 : _b[0].row;
     var matchedCondition = [];
     if (allCondition) {
       for (var key in allCondition) {
         var conditionFormat = allCondition[key];
-        var range = (_d = conditionFormat.cellrange) === null || _d === void 0 ? void 0 : _d[0];
-        console.log("rangeObj", conditionFormat, range);
+        var range = (_c = conditionFormat.cellrange) === null || _c === void 0 ? void 0 : _c[0];
         if (!range || !selectionColumn || !selectionRow) continue;
         var rangeColumns = range.column;
         var rangeRows = range.row;
@@ -70,9 +75,8 @@ var ConditionRules = function ConditionRules(_a) {
       }
       setMatchedConditionFormatKey(matchedCondition);
     }
-    console.log("kkkkk", matchedConditionFormatKey, matchedCondition);
+    if (buttonClickCreateRef.current) return;
     if (matchedCondition.length === 0) {
-      console.log('whyyyyyyy');
       setCreate(true);
     } else if (matchedCondition.length > 0) {
       setCreate(false);
@@ -91,15 +95,26 @@ var ConditionRules = function ConditionRules(_a) {
   }, [colorRules.cellColor, colorRules.textColor, hideDialog, setContext]);
   var close = useCallback(function (closeType) {
     if (closeType === "confirm") {
+      buttonClickCreateRef.current = false;
+      setCreate(false);
       setContext(function (ctx) {
         ctx.conditionRules.textColor.color = colorRules.textColor;
         ctx.conditionRules.cellColor.color = colorRules.cellColor;
+        ctx.conditionRules.font = {
+          bold: bold,
+          italic: italic,
+          underline: underline,
+          strikethrough: strikethrough
+        };
         setConditionRules(ctx, protection, generalDialog, conditionformat, ctx.conditionRules);
       });
+    } else {
+      buttonClickCreateRef.current = true;
+      setCreate(false);
     }
     setContext(function (ctx) {
       ctx.conditionRules = {
-        rulesType: "",
+        rulesType: "greaterThan",
         rulesValue: "",
         textColor: {
           check: true,
@@ -109,6 +124,12 @@ var ConditionRules = function ConditionRules(_a) {
           check: true,
           color: "#000000"
         },
+        font: {
+          bold: false,
+          italic: false,
+          underline: false,
+          strikethrough: false
+        },
         betweenValue: {
           value1: "",
           value2: ""
@@ -119,16 +140,7 @@ var ConditionRules = function ConditionRules(_a) {
       };
     });
     hideDialog();
-  }, [colorRules, conditionformat, generalDialog, hideDialog, protection, setContext]);
-  useEffect(function () {
-    console.log("add mouseDown listener", window);
-    window.addEventListener("mouseDown", function (e) {
-      var _a, _b;
-      var selectionColumn = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0].column;
-      var selectionRow = (_b = context.luckysheet_select_save) === null || _b === void 0 ? void 0 : _b[0].row;
-      console.log("mouseDown", selectionColumn, selectionRow, context);
-    });
-  }, [type]);
+  }, [colorRules, conditionformat, generalDialog, hideDialog, protection, setContext, bold, italic, underline, strikethrough]);
   useEffect(function () {
     setContext(function (ctx) {
       ctx.conditionRules.rulesType = type;
@@ -153,6 +165,12 @@ var ConditionRules = function ConditionRules(_a) {
             check: true,
             color: "#000000"
           },
+          font: {
+            bold: false,
+            italic: false,
+            underline: false,
+            strikethrough: false
+          },
           betweenValue: {
             value1: "",
             value2: ""
@@ -229,46 +247,123 @@ var ConditionRules = function ConditionRules(_a) {
   var titleType = type === "top10_percent" ? "top10" : type === "last10_percent" ? "last10" : type;
   return /*#__PURE__*/React.createElement("div", {
     className: "condition-rules"
-  }, !create ? (/*#__PURE__*/React.createElement("div", null, matchedConditionFormatKey.map(function (key) {
+  }, !create ? (/*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: "16px"
+    }
+  }, matchedConditionFormatKey.map(function (key) {
     var _a, _b;
     return /*#__PURE__*/React.createElement("div", {
-      className: "flex items-center gap-6 py-6 border-b border-gray-200 last:border-b-0",
+      className: "group flex items-center border-b border-gray-200 last:border-b-0 condition-list-parent",
       key: key
     }, /*#__PURE__*/React.createElement("div", {
-      className: "flex items-center justify-center !w-40 !h-40 rounded-3xl !bg-[".concat(allConditionFormats[key].format.cellColor || "", "]"),
+      className: "condition-list-pill",
       style: {
-        backgroundColor: allConditionFormats[key].format.cellColor || "",
-        width: '44px',
-        height: '56px'
+        backgroundColor: allConditionFormats[key].format.cellColor || ""
       }
     }, /*#__PURE__*/React.createElement("span", {
-      className: "text-6xl font-bold !text-[".concat(allConditionFormats[key].format.textColor || "", "] pb-1")
+      className: "condition-list-text",
+      style: {
+        color: allConditionFormats[key].format.textColor || ""
+      }
     }, "123")), /*#__PURE__*/React.createElement("div", {
-      className: "flex flex-col"
+      className: "flex flex-col",
+      style: {
+        width: '200px',
+        padding: '8px 0px'
+      }
     }, /*#__PURE__*/React.createElement("h3", {
-      className: "text-4xl font-normal text-gray-900 mb-2"
+      className: "condition-list-type"
     }, conditionformat[allConditionFormats[key].conditionName], ' ', (_a = allConditionFormats[key].conditionValue) === null || _a === void 0 ? void 0 : _a[0]), /*#__PURE__*/React.createElement("p", {
-      className: "text-3xl text-gray-400"
+      className: "condition-list-range"
     }, (_b = allConditionFormats[key].cellrange) === null || _b === void 0 ? void 0 : _b.map(function (range) {
       var startCol = numberToColumn(range.column[0] + 1);
       var endCol = numberToColumn(range.column[1] + 1);
       var startRow = range.row[0] + 1;
       var endRow = range.row[1] + 1;
       return "".concat(startCol).concat(startRow, ":").concat(endCol).concat(endRow);
-    }).join(", "))));
-  }), /*#__PURE__*/React.createElement(Button, {
+    }).join(", "))), /*#__PURE__*/React.createElement("div", {
+      className: "opacity-0 group-hover:opacity-100 transition-opacity"
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      elevation: 1,
+      icon: "Trash2",
+      size: "md",
+      variant: "secondary",
+      style: {
+        border: '0px',
+        boxShadow: 'none',
+        color: 'hsl(var(--color-icon-secondary))'
+      },
+      onClick: function onClick() {
+        setContext(function (ctx) {
+          var index = getSheetIndex(ctx, ctx.currentSheetId);
+          var ruleArr = ctx.luckysheetfile[index].luckysheet_conditionformat_save || [];
+          ruleArr.splice(ruleArr.findIndex(function (item) {
+            return item.type === key;
+          }), 1);
+          ctx.luckysheetfile[index].luckysheet_conditionformat_save = ruleArr;
+          return ctx;
+        });
+      }
+    })));
+  })), /*#__PURE__*/React.createElement(Button, {
     size: "md",
     variant: "secondary",
     onClick: function onClick() {
       setCreate(true);
+      buttonClickCreateRef.current = true;
     }
-  }, "Create New Condition Format"))) : (/*#__PURE__*/React.createElement(React.Fragment, null, !["aboveAverage", "belowAverage"].includes(type) && (/*#__PURE__*/React.createElement("div", {
+  }, "Create New Condition Format"))) : (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "flex flex-col"
   }, /*#__PURE__*/React.createElement("div", {
     className: "condition-rules-value text-heading-xsm"
-  }, conditionformat["conditionformat_".concat(titleType, "_title")]), (type === "greaterThan" || type === "greaterThanOrEqual" || type === "lessThan" || type === "lessThanOrEqual" || type === "equal" || type === "textContains") && (/*#__PURE__*/React.createElement("div", {
+  }, conditionformat.applyRange, " range"), /*#__PURE__*/React.createElement(TextField, {
+    rightIcon: /*#__PURE__*/React.createElement(LucideIcon, {
+      name: "Grid2x2",
+      size: "sm",
+      onClick: function onClick() {
+        dataSelectRange("conditionRules".concat(type));
+      }
+    }),
+    "aria-hidden": "true",
+    readOnly: true,
+    placeholder: conditionformat.selectRange,
+    value: getDisplayedRangeTxt(context),
+    onClick: function onClick() {
+      dataSelectRange("conditionRules".concat(type));
+    }
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "condition-rules-value text-heading-xsm"
+  }, "Format cells if"), /*#__PURE__*/React.createElement(Select, {
+    value: type,
+    onValueChange: function onValueChange(value) {
+      setType(value);
+    }
+  }, /*#__PURE__*/React.createElement(SelectTrigger, null, /*#__PURE__*/React.createElement(SelectValue, null, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React.createElement("span", null, conditionformat[type])))), /*#__PURE__*/React.createElement(SelectContent, {
+    position: "popper",
+    side: "bottom",
+    align: "start",
+    sideOffset: 4,
+    className: "z-[100]",
+    "data-dropdown-content": "true"
+  }, conditionList.map(function (option) {
+    return /*#__PURE__*/React.createElement(SelectItem, {
+      key: option.value,
+      value: option.text
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "flex items-center gap-2"
+    }, /*#__PURE__*/React.createElement("span", null, conditionformat[option.text])));
+  })))), !["aboveAverage", "belowAverage"].includes(type) && (/*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col"
+  }, (type === "greaterThan" || type === "greaterThanOrEqual" || type === "lessThan" || type === "lessThanOrEqual" || type === "equal" || type === "textContains") && (/*#__PURE__*/React.createElement("div", {
     className: "w-full"
   }, /*#__PURE__*/React.createElement(TextField, {
+    placeholder: "Value",
+    onKeyDown: function onKeyDown(e) {
+      e.stopPropagation();
+    },
     value: context.conditionRules.rulesValue,
     onChange: function onChange(e) {
       var value = e.target.value;
@@ -281,6 +376,9 @@ var ConditionRules = function ConditionRules(_a) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "w-full"
   }, /*#__PURE__*/React.createElement(TextField, {
+    onKeyDown: function onKeyDown(e) {
+      e.stopPropagation();
+    },
     placeholder: "From",
     value: context.conditionRules.betweenValue.value1,
     onChange: function onChange(e) {
@@ -292,6 +390,9 @@ var ConditionRules = function ConditionRules(_a) {
   })), /*#__PURE__*/React.createElement("div", {
     className: "w-full"
   }, /*#__PURE__*/React.createElement(TextField, {
+    onKeyDown: function onKeyDown(e) {
+      e.stopPropagation();
+    },
     placeholder: "To",
     value: context.conditionRules.betweenValue.value2,
     onChange: function onChange(e) {
@@ -343,6 +444,10 @@ var ConditionRules = function ConditionRules(_a) {
       });
     }
   }), /*#__PURE__*/React.createElement(TextField, {
+    placeholder: "Value",
+    onKeyDown: function onKeyDown(e) {
+      e.stopPropagation();
+    },
     className: "condition-rules-project-input pr-0",
     type: "number",
     min: 1,
@@ -370,74 +475,99 @@ var ConditionRules = function ConditionRules(_a) {
         ctx.conditionRules.projectValue = String(current + 1);
       });
     }
-  })))))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: "condition-rules-value text-heading-xsm"
-  }, "Cell(s) format if"), /*#__PURE__*/React.createElement(Select, {
-    value: type,
-    onValueChange: function onValueChange(value) {
-      console.log(value);
-      setType(value);
-    }
-  }, /*#__PURE__*/React.createElement(SelectTrigger, null, /*#__PURE__*/React.createElement(SelectValue, null, /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center gap-2"
-  }, /*#__PURE__*/React.createElement("span", null, conditionformat[type])))), /*#__PURE__*/React.createElement(SelectContent, {
-    position: "popper",
-    side: "bottom",
-    align: "start",
-    sideOffset: 4,
-    className: "z-[100]",
-    "data-dropdown-content": "true"
-  }, conditionList.map(function (option) {
-    return /*#__PURE__*/React.createElement(SelectItem, {
-      key: option.value,
-      value: option.text
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "flex items-center gap-2"
-    }, /*#__PURE__*/React.createElement("span", null, conditionformat[option.text])));
-  })))), /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "condition-rules-value text-heading-xsm"
-  }, conditionformat.applyRange), /*#__PURE__*/React.createElement(TextField, {
-    rightIcon: /*#__PURE__*/React.createElement(LucideIcon, {
-      name: "Grid2x2",
-      size: "sm",
-      onClick: function onClick() {
-        dataSelectRange("conditionRules".concat(type));
-      }
-    }),
-    "aria-hidden": "true",
-    readOnly: true,
-    placeholder: conditionformat.selectRange,
-    value: getDisplayedRangeTxt(context),
-    onClick: function onClick() {
-      dataSelectRange("conditionRules".concat(type));
-    }
-  })), /*#__PURE__*/React.createElement("div", {
+  })))))), /*#__PURE__*/React.createElement("div", {
     className: "flex flex-col"
   }, /*#__PURE__*/React.createElement("div", {
     className: "condition-rules-set-title text-heading-xsm"
-  }, "".concat(conditionformat.setAs, "\uFF1A")), /*#__PURE__*/React.createElement("div", {
-    className: "condition-rules-setbox"
+  }, "Formatting styles"), /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-container"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "condition-rules-set"
+    className: "toolbar-header"
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: "toolbar-title"
+  }, "Formatting styles preview")), /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-content"
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost",
+    onClick: function onClick() {
+      return setBold(!bold);
+    },
+    className: cn("fortune-toolbar-combo-button !min-w-fit !px-0", {}),
+    style: {
+      width: 30,
+      height: 30,
+      backgroundColor: bold ? "hsl(var(--color-bg-default-selected))" : ""
+    }
+  }, /*#__PURE__*/React.createElement(LucideIcon, {
+    name: "Bold"
+  })), /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost",
+    onClick: function onClick() {
+      return setItalic(!italic);
+    },
+    className: cn("fortune-toolbar-combo-button !min-w-fit !px-0", {}),
+    style: {
+      width: 30,
+      height: 30
+    }
+  }, /*#__PURE__*/React.createElement(LucideIcon, {
+    name: "Italic"
+  })), /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost",
+    onClick: function onClick() {
+      return setUnderline(!underline);
+    },
+    className: cn("fortune-toolbar-combo-button !min-w-fit !px-0", {}),
+    style: {
+      width: 30,
+      height: 30
+    }
+  }, /*#__PURE__*/React.createElement(LucideIcon, {
+    name: "Underline"
+  })), /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost",
+    onClick: function onClick() {
+      return setStrikethrough(!strikethrough);
+    },
+    className: cn("fortune-toolbar-combo-button !min-w-fit !px-0", {}),
+    style: {
+      width: 30,
+      height: 30
+    }
+  }, /*#__PURE__*/React.createElement(LucideIcon, {
+    name: "Strikethrough"
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost",
+    className: cn("fortune-toolbar-combo-button !min-w-fit !px-0", {}),
+    style: {
+      width: 30,
+      height: 30
+    }
   }, /*#__PURE__*/React.createElement("div", {
-    className: "condition-rules-color"
-  }, /*#__PURE__*/React.createElement("span", {
-    id: "checkTextColor"
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    className: "border-2",
-    checked: context.conditionRules.textColor.check,
-    onCheckedChange: function onCheckedChange(e) {
-      var checked = e.target.checked;
-      setContext(function (ctx) {
-        ctx.conditionRules.textColor.check = checked;
-      });
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center'
     }
-  })), /*#__PURE__*/React.createElement("label", {
-    htmlFor: "checkTextColor",
-    className: "condition-rules-label"
-  }, conditionformat.textColor), /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    className: "lucide lucide-spell-check2-icon lucide-spell-check-2"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "m5 18 6-12 6 12"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M7 14h8"
+  })), /*#__PURE__*/React.createElement("input", {
+    style: {
+      marginBottom: "4px"
+    },
     type: "color",
     className: "condition-rules-select-color",
     value: colorRules.textColor,
@@ -447,25 +577,21 @@ var ConditionRules = function ConditionRules(_a) {
         draft.textColor = value;
       }));
     }
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "condition-rules-set"
+  })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost",
+    className: cn("fortune-toolbar-combo-button !min-w-fit !px-0", {}),
+    style: {
+      width: 30,
+      height: 30
+    }
   }, /*#__PURE__*/React.createElement("div", {
-    className: "condition-rules-color"
-  }, /*#__PURE__*/React.createElement("span", {
-    id: "checkCellColor"
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    className: "border-2",
-    checked: context.conditionRules.cellColor.check,
-    onCheckedChange: function onCheckedChange(e) {
-      var checked = e.target.checked;
-      setContext(function (ctx) {
-        ctx.conditionRules.cellColor.check = checked;
-      });
+    style: {
+      display: 'flex',
+      flexDirection: 'column'
     }
-  })), /*#__PURE__*/React.createElement("label", {
-    htmlFor: "checkCellColor",
-    className: "condition-rules-label"
-  }, conditionformat.cellColor), /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/React.createElement(LucideIcon, {
+    name: "PaintBucket"
+  }), /*#__PURE__*/React.createElement("input", {
     type: "color",
     className: "condition-rules-select-color",
     value: colorRules.cellColor,
@@ -475,10 +601,11 @@ var ConditionRules = function ConditionRules(_a) {
         draft.cellColor = value;
       }));
     }
-  }))))), /*#__PURE__*/React.createElement(Divider, {
-    className: "w-full border-t-[1px]"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "flex gap-2 justify-end"
+  }))))))), /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-2 justify-end",
+    style: {
+      marginTop: "8px"
+    }
   }, /*#__PURE__*/React.createElement(Button, {
     variant: "secondary",
     style: {
@@ -497,6 +624,6 @@ var ConditionRules = function ConditionRules(_a) {
       close("confirm");
     },
     tabIndex: 0
-  }, button.apply)))));
+  }, "Create rule")))));
 };
 export default ConditionRules;

package/es/components/ConditionFormat/formating.css

@@ -0,0 +1,103 @@
+.toolbar-container {
+  width: 100%;
+  max-width: 896px;
+  background-color: white;
+  border-radius: 4px;
+  border: 1px solid hsl(var(--color-border-default, #E8EBEC));
+  overflow: hidden;
+}
+
+.toolbar-header {
+  background-color: #dcfce7;
+  padding: 4px 16px;
+  border-radius: var(--border-radius-sm, 4px) var(--border-radius-sm, 4px) var(--border-radius-none, 0) var(--border-radius-none, 0);
+border-bottom: 1px solid hsl(var(--color-border-default, #E8EBEC));
+background: hsl(var(--color-bg-success-light, #DDFBDF));
+}
+
+.toolbar-title {
+  color: hsl(var(--color-text-success, #177E23));
+font-family: "Helvetica Neue";
+font-size: 14px;
+font-style: normal;
+font-weight: 400;
+line-height: 20px;
+}
+
+.toolbar-content {
+  padding: 4px;
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.toolbar-button {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 0;
+}
+
+.toolbar-button:hover {
+  background-color: #f9fafb;
+  border-color: #d1d5db;
+}
+
+.toolbar-button:active {
+  transform: scale(0.95);
+}
+
+.button-text {
+  font-size: 24px;
+  color: #1f2937;
+  font-weight: 500;
+}
+
+.button-text.bold {
+  font-weight: 700;
+}
+
+.button-text.italic {
+  font-style: italic;
+  font-family: Georgia, serif;
+}
+
+.button-text.underline {
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 2px;
+}
+
+.button-text.strikethrough {
+  text-decoration: line-through;
+  text-decoration-thickness: 2px;
+}
+
+.button-text.color-button {
+  position: relative;
+  color: #16a34a;
+}
+
+.button-text.color-button::after {
+  content: "";
+  position: absolute;
+  bottom: -4px;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background-color: #16a34a;
+  border-radius: 2px;
+}
+
+.button-icon {
+  width: 24px;
+  height: 24px;
+  color: #1f2937;
+}