@windoc/react 0.2.2 → 0.2.3

package/dist/index.mjs

@@ -139,10 +139,10 @@ function useDropdown() {
 // src/utils/DropdownPortal.tsx
 import { createPortal } from "react-dom";
 import { jsx as jsx5 } from "react/jsx-runtime";
-function DropdownPortal({ isOpen, style, className, children }) {
+function DropdownPortal({ isOpen, style, className, wrapperClassName, children }) {
   if (!isOpen) return null;
   return createPortal(
-    /* @__PURE__ */ jsx5("div", { className: "menu-item", style, children: /* @__PURE__ */ jsx5("div", { className, children }) }),
+    /* @__PURE__ */ jsx5("div", { className: `menu-item menu-item-portal${wrapperClassName ? ` ${wrapperClassName}` : ""}`, style, children: /* @__PURE__ */ jsx5("div", { className, children }) }),
     document.body
   );
 }
@@ -165,7 +165,7 @@ function ColumnTool() {
   };
   return /* @__PURE__ */ jsxs("div", { className: "menu-item__column", ref: triggerRef, onClick: toggle, children: [
     /* @__PURE__ */ jsx6("span", { className: "select", title: "Column Layout", children: currentColumns === 1 ? "1 Column" : `${currentColumns} Columns` }),
-    /* @__PURE__ */ jsx6(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ jsxs("div", { onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx6(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__column", children: /* @__PURE__ */ jsxs("div", { onClick: (e) => e.stopPropagation(), children: [
       /* @__PURE__ */ jsxs("ul", { children: [
         /* @__PURE__ */ jsx6("li", { onClick: () => handleColumn(1), children: "1 Column" }),
         /* @__PURE__ */ jsx6("li", { onClick: () => handleColumn(2), children: "2 Columns" })
@@ -261,7 +261,7 @@ function TitleTool() {
   };
   return /* @__PURE__ */ jsxs3("div", { className: "menu-item__title", ref: triggerRef, onClick: toggle, children: [
     /* @__PURE__ */ jsx8("span", { className: "select", title: "Toggle Heading", children: activeLabel }),
-    /* @__PURE__ */ jsx8(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ jsx8("ul", { children: LEVELS.map(({ level, label }) => /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx8(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__title", children: /* @__PURE__ */ jsx8("ul", { children: LEVELS.map(({ level, label }) => /* @__PURE__ */ jsx8(
       "li",
       {
         className: activeLevel === level ? "active" : "",
@@ -290,7 +290,7 @@ function FontTool() {
   };
   return /* @__PURE__ */ jsxs4("div", { className: "menu-item__font", ref: triggerRef, onClick: toggle, children: [
     /* @__PURE__ */ jsx9("span", { className: "select", title: "Font", children: activeLabel }),
-    /* @__PURE__ */ jsx9(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ jsx9("ul", { children: FONTS.map(({ family, label }) => /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx9(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__font", children: /* @__PURE__ */ jsx9("ul", { children: FONTS.map(({ family, label }) => /* @__PURE__ */ jsx9(
       "li",
       {
         "data-family": family,
@@ -316,7 +316,7 @@ function FontSizeTool() {
   };
   return /* @__PURE__ */ jsxs5("div", { className: "menu-item__size", ref: triggerRef, onClick: toggle, children: [
     /* @__PURE__ */ jsx10("span", { className: "select", title: "Font Size", children: activeSize }),
-    /* @__PURE__ */ jsx10(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ jsx10("ul", { children: SIZES.map((size) => /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx10(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__size", children: /* @__PURE__ */ jsx10("ul", { children: SIZES.map((size) => /* @__PURE__ */ jsx10(
       "li",
       {
         className: activeSize === size ? "active" : "",
@@ -341,7 +341,7 @@ function LineHeightTool() {
   };
   return /* @__PURE__ */ jsxs6("div", { className: "menu-item__line-height", ref: triggerRef, onClick: toggle, children: [
     /* @__PURE__ */ jsx11("span", { className: "select", title: "Line Height", children: activeLabel }),
-    /* @__PURE__ */ jsx11(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ jsx11("ul", { children: LINE_HEIGHTS.map((h) => /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx11(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__line-height", children: /* @__PURE__ */ jsx11("ul", { children: LINE_HEIGHTS.map((h) => /* @__PURE__ */ jsx11(
       "li",
       {
         className: String(activeMargin) === h || activeLabel === h ? "active" : "",
@@ -380,7 +380,7 @@ function ColorTool() {
     /* @__PURE__ */ jsx12(Baseline, { size: 16 }),
     /* @__PURE__ */ jsx12("span", { style: { backgroundColor: activeColor } }),
     /* @__PURE__ */ jsx12("input", { id: "color", type: "color", readOnly: true, tabIndex: -1 }),
-    /* @__PURE__ */ jsx12(DropdownPortal, { isOpen: visible, style: portalStyle, className: "color-palette-dropdown", children: /* @__PURE__ */ jsxs7("div", { onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx12(DropdownPortal, { isOpen: visible, style: portalStyle, className: "color-palette-dropdown", wrapperClassName: "menu-item__color", children: /* @__PURE__ */ jsxs7("div", { onClick: (e) => e.stopPropagation(), children: [
       /* @__PURE__ */ jsxs7("button", { className: "color-palette-reset", onClick: handleReset, children: [
         /* @__PURE__ */ jsx12(RotateCcw, { size: 12 }),
         "Reset"
@@ -426,7 +426,7 @@ function HighlightTool() {
     /* @__PURE__ */ jsx13(Highlighter, { size: 16 }),
     /* @__PURE__ */ jsx13("span", { style: { backgroundColor: activeColor || "#ffff00" } }),
     /* @__PURE__ */ jsx13("input", { id: "highlight", type: "color", readOnly: true, tabIndex: -1 }),
-    /* @__PURE__ */ jsx13(DropdownPortal, { isOpen: visible, style: portalStyle, className: "color-palette-dropdown", children: /* @__PURE__ */ jsxs8("div", { onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx13(DropdownPortal, { isOpen: visible, style: portalStyle, className: "color-palette-dropdown", wrapperClassName: "menu-item__highlight", children: /* @__PURE__ */ jsxs8("div", { onClick: (e) => e.stopPropagation(), children: [
       /* @__PURE__ */ jsxs8("button", { className: "color-palette-reset", onClick: handleReset, children: [
         /* @__PURE__ */ jsx13(RotateCcw2, { size: 12 }),
         "None"
@@ -474,7 +474,7 @@ function UnderlineTool() {
   return /* @__PURE__ */ jsxs9("div", { className: `menu-item__underline ${isActive ? "active" : ""}`, ref: triggerRef, title: `Underline(${isApple ? "\u2318" : "Ctrl"}+U)`, children: [
     /* @__PURE__ */ jsx16(UnderlineIcon, { size: 16, onClick: () => editorRef.current?.command.executeUnderline(), style: { cursor: "pointer" } }),
     /* @__PURE__ */ jsx16("span", { className: "select", onClick: toggle }),
-    /* @__PURE__ */ jsx16(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ jsx16("ul", { children: STYLES.map((style) => /* @__PURE__ */ jsx16("li", { "data-decoration-style": style, onClick: () => {
+    /* @__PURE__ */ jsx16(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__underline", children: /* @__PURE__ */ jsx16("ul", { children: STYLES.map((style) => /* @__PURE__ */ jsx16("li", { "data-decoration-style": style, onClick: () => {
       editorRef.current?.command.executeUnderline({ style });
     }, children: /* @__PURE__ */ jsx16("i", {}) }, style)) }) })
   ] });
@@ -579,7 +579,7 @@ function ListTool() {
   };
   return /* @__PURE__ */ jsxs10("div", { ref: triggerRef, className: `menu-item__list ${isActive ? "active" : ""}`, title: `List(${isApple ? "\u2318" : "Ctrl"}+Shift+U)`, children: [
     /* @__PURE__ */ jsx22(List, { size: 16, onClick: toggle, style: { cursor: "pointer" } }),
-    /* @__PURE__ */ jsx22(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ jsxs10("div", { style: { padding: "8px", width: "320px" }, children: [
+    /* @__PURE__ */ jsx22(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__list", children: /* @__PURE__ */ jsxs10("div", { style: { padding: "8px", width: "320px" }, children: [
       /* @__PURE__ */ jsxs10("div", { style: { display: "flex", gap: "4px", marginBottom: "8px" }, children: [
         /* @__PURE__ */ jsx22(
           "button",
@@ -678,7 +678,7 @@ function SeparatorTool() {
   };
   return /* @__PURE__ */ jsxs12("div", { className: "menu-item__separator", ref: triggerRef, title: "Separator", children: [
     /* @__PURE__ */ jsx24(Minus, { size: 16, onClick: toggle, style: { cursor: "pointer" } }),
-    /* @__PURE__ */ jsx24(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ jsxs12("div", { style: { padding: "8px 10px 10px", width: "200px" }, children: [
+    /* @__PURE__ */ jsx24(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__separator", children: /* @__PURE__ */ jsxs12("div", { style: { padding: "8px 10px 10px", width: "200px" }, children: [
       /* @__PURE__ */ jsx24("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: DASH_STYLES.map(({ label, dashArray }) => /* @__PURE__ */ jsxs12(
         "li",
         {
@@ -747,7 +747,7 @@ function InsertElementTool() {
   };
   return /* @__PURE__ */ jsxs13("div", { className: "menu-item__insert-element", ref: triggerRef, onClick: toggle, children: [
     /* @__PURE__ */ jsx25("i", { title: "Insert Element" }),
-    /* @__PURE__ */ jsx25(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ jsx25("ul", { children: /* @__PURE__ */ jsx25("li", { onClick: handleHeader, children: "Add Header" }) }) })
+    /* @__PURE__ */ jsx25(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__insert-element", children: /* @__PURE__ */ jsx25("ul", { children: /* @__PURE__ */ jsx25("li", { onClick: handleHeader, children: "Add Header" }) }) })
   ] });
 }
 
@@ -770,7 +770,7 @@ function PageBreakTool() {
       onClick: toggle,
       children: [
         /* @__PURE__ */ jsx26("i", { title: "Break" }),
-        /* @__PURE__ */ jsx26(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ jsxs14("ul", { children: [
+        /* @__PURE__ */ jsx26(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__page-break", children: /* @__PURE__ */ jsxs14("ul", { children: [
           /* @__PURE__ */ jsx26("li", { onClick: handlePageBreak, children: "Page Break" }),
           /* @__PURE__ */ jsx26("li", { onClick: handleColumnBreak, children: "Column Break" })
         ] }) })