@windoc/react 0.2.11 → 0.3.0

package/dist/index.mjs

@@ -529,24 +529,29 @@ function ListTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
   const optionsRef = useRef10(null);
   const isActive = !!rangeStyle?.listType;
+  const close = () => optionsRef.current?.classList.remove("visible");
   const handleList = (type, style) => {
     editorRef.current?.command.executeList(type, style);
+    close();
   };
   const handlePreset = (type, preset) => {
     const style = type === "ol" ? "decimal" : "disc";
     editorRef.current?.command.executeListWithPreset(type, style, preset);
+    close();
   };
   const handleIndent = (e) => {
     e.stopPropagation();
     editorRef.current?.command.executeListIndent();
+    close();
   };
   const handleOutdent = (e) => {
     e.stopPropagation();
     editorRef.current?.command.executeListOutdent();
+    close();
   };
   return /* @__PURE__ */ jsxs10("div", { className: `menu-item__list ${isActive ? "active" : ""}`, title: `List(${isApple ? "\u2318" : "Ctrl"}+Shift+U)`, children: [
     /* @__PURE__ */ jsx21(List, { size: 16, onClick: () => optionsRef.current?.classList.toggle("visible"), style: { cursor: "pointer" } }),
-    /* @__PURE__ */ jsx21("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ jsxs10("div", { style: { padding: "8px", width: "320px" }, children: [
+    /* @__PURE__ */ jsx21("div", { className: "options", ref: optionsRef, style: { width: "320px" }, children: /* @__PURE__ */ jsxs10("div", { style: { padding: "8px" }, children: [
       /* @__PURE__ */ jsxs10("div", { style: { display: "flex", gap: "4px", marginBottom: "8px" }, children: [
         /* @__PURE__ */ jsx21(
           "button",
@@ -640,16 +645,18 @@ function SeparatorTool() {
   const optionsRef = useRef11(null);
   const [selectedWidth, setSelectedWidth] = useState5(1);
   const lineColor = "#344054";
-  const handleSeparator = (dashArray) => {
+  const handleSeparator = (e, dashArray) => {
+    e.stopPropagation();
     editorRef.current?.command.executeSeparator(dashArray, { lineWidth: selectedWidth });
+    optionsRef.current?.classList.remove("visible");
   };
-  return /* @__PURE__ */ jsxs12("div", { className: "menu-item__separator", title: "Separator", children: [
-    /* @__PURE__ */ jsx23(Minus, { size: 16, onClick: () => optionsRef.current?.classList.toggle("visible"), style: { cursor: "pointer" } }),
-    /* @__PURE__ */ jsx23("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ jsxs12("div", { style: { padding: "8px 10px 10px", width: "200px" }, children: [
+  return /* @__PURE__ */ jsx23("div", { className: "menu-item", title: "Separator", children: /* @__PURE__ */ jsxs12("span", { className: "menu-item__separator", onClick: () => optionsRef.current?.classList.toggle("visible"), style: { display: "flex", alignItems: "center", justifyContent: "center", width: "28px", height: "28px", cursor: "pointer", margin: "0 2px", borderRadius: "8px", color: "#475467", transition: "all 0.2s", position: "relative" }, children: [
+    /* @__PURE__ */ jsx23(Minus, { size: 16 }),
+    /* @__PURE__ */ jsx23("div", { className: "options", ref: optionsRef, style: { width: "220px", height: "auto" }, children: /* @__PURE__ */ jsxs12("div", { style: { padding: "8px 10px 10px" }, children: [
       /* @__PURE__ */ jsx23("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: DASH_STYLES.map(({ label, dashArray }) => /* @__PURE__ */ jsxs12(
         "li",
         {
-          onClick: () => handleSeparator(dashArray),
+          onClick: (e) => handleSeparator(e, dashArray),
           style: { display: "flex", alignItems: "center", gap: "10px", padding: "5px 6px", cursor: "pointer", borderRadius: "4px" },
           children: [
             /* @__PURE__ */ jsx23("svg", { style: { flex: 1, minWidth: 0, overflow: "hidden" }, height: "8", children: /* @__PURE__ */ jsx23(
@@ -695,7 +702,7 @@ function SeparatorTool() {
         )) })
       ] })
     ] }) })
-  ] });
+  ] }) });
 }
 
 // src/toolbar/WatermarkTool.tsx