@windoc/react 0.2.11 → 0.3.0

package/dist/index.js

@@ -607,24 +607,29 @@ function ListTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
   const optionsRef = (0, import_react12.useRef)(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__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `menu-item__list ${isActive ? "active" : ""}`, title: `List(${isApple ? "\u2318" : "Ctrl"}+Shift+U)`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.List, { size: 16, onClick: () => optionsRef.current?.classList.toggle("visible"), style: { cursor: "pointer" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { padding: "8px", width: "320px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "options", ref: optionsRef, style: { width: "320px" }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { padding: "8px" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", gap: "4px", marginBottom: "8px" }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "button",
@@ -718,16 +723,18 @@ function SeparatorTool() {
   const optionsRef = (0, import_react13.useRef)(null);
   const [selectedWidth, setSelectedWidth] = (0, import_react13.useState)(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__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "menu-item__separator", title: "Separator", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react16.Minus, { size: 16, onClick: () => optionsRef.current?.classList.toggle("visible"), style: { cursor: "pointer" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { padding: "8px 10px 10px", width: "200px" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "menu-item", title: "Separator", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("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__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react16.Minus, { size: 16 }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "options", ref: optionsRef, style: { width: "220px", height: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { padding: "8px 10px 10px" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: DASH_STYLES.map(({ label, dashArray }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
         "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__ */ (0, import_jsx_runtime23.jsx)("svg", { style: { flex: 1, minWidth: 0, overflow: "hidden" }, height: "8", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -773,7 +780,7 @@ function SeparatorTool() {
         )) })
       ] })
     ] }) })
-  ] });
+  ] }) });
 }
 
 // src/toolbar/WatermarkTool.tsx