@windoc/react 0.2.2 → 0.2.4

package/dist/index.js

@@ -217,10 +217,10 @@ function useDropdown() {
 // src/utils/DropdownPortal.tsx
 var import_react_dom = require("react-dom");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function DropdownPortal({ isOpen, style, className, children }) {
+function DropdownPortal({ isOpen, style, className, wrapperClassName, children }) {
   if (!isOpen) return null;
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "menu-item", style, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, children }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `menu-item menu-item-portal${wrapperClassName ? ` ${wrapperClassName}` : ""}`, style, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, children }) }),
     document.body
   );
 }
@@ -243,7 +243,7 @@ function ColumnTool() {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "menu-item__column", ref: triggerRef, onClick: toggle, children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "select", title: "Column Layout", children: currentColumns === 1 ? "1 Column" : `${currentColumns} Columns` }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__column", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("ul", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { onClick: () => handleColumn(1), children: "1 Column" }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { onClick: () => handleColumn(2), children: "2 Columns" })
@@ -339,7 +339,7 @@ function TitleTool() {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "menu-item__title", ref: triggerRef, onClick: toggle, children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "select", title: "Toggle Heading", children: activeLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { children: LEVELS.map(({ level, label }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__title", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { children: LEVELS.map(({ level, label }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "li",
       {
         className: activeLevel === level ? "active" : "",
@@ -368,7 +368,7 @@ function FontTool() {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "menu-item__font", ref: triggerRef, onClick: toggle, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "select", title: "Font", children: activeLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { children: FONTS.map(({ family, label }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__font", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { children: FONTS.map(({ family, label }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "li",
       {
         "data-family": family,
@@ -394,7 +394,7 @@ function FontSizeTool() {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "menu-item__size", ref: triggerRef, onClick: toggle, children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "select", title: "Font Size", children: activeSize }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { children: SIZES.map((size) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__size", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { children: SIZES.map((size) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "li",
       {
         className: activeSize === size ? "active" : "",
@@ -419,7 +419,7 @@ function LineHeightTool() {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "menu-item__line-height", ref: triggerRef, onClick: toggle, children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "select", title: "Line Height", children: activeLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ul", { children: LINE_HEIGHTS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__line-height", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ul", { children: LINE_HEIGHTS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "li",
       {
         className: String(activeMargin) === h || activeLabel === h ? "active" : "",
@@ -458,7 +458,7 @@ function ColorTool() {
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.Baseline, { size: 16 }),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { backgroundColor: activeColor } }),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { id: "color", type: "color", readOnly: true, tabIndex: -1 }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownPortal, { isOpen: visible, style: portalStyle, className: "color-palette-dropdown", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownPortal, { isOpen: visible, style: portalStyle, className: "color-palette-dropdown", wrapperClassName: "menu-item__color", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", { className: "color-palette-reset", onClick: handleReset, children: [
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.RotateCcw, { size: 12 }),
         "Reset"
@@ -504,7 +504,7 @@ function HighlightTool() {
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react5.Highlighter, { size: 16 }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { backgroundColor: activeColor || "#ffff00" } }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { id: "highlight", type: "color", readOnly: true, tabIndex: -1 }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropdownPortal, { isOpen: visible, style: portalStyle, className: "color-palette-dropdown", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropdownPortal, { isOpen: visible, style: portalStyle, className: "color-palette-dropdown", wrapperClassName: "menu-item__highlight", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("button", { className: "color-palette-reset", onClick: handleReset, children: [
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react5.RotateCcw, { size: 12 }),
         "None"
@@ -552,7 +552,7 @@ function UnderlineTool() {
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: `menu-item__underline ${isActive ? "active" : ""}`, ref: triggerRef, title: `Underline(${isApple ? "\u2318" : "Ctrl"}+U)`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react8.Underline, { size: 16, onClick: () => editorRef.current?.command.executeUnderline(), style: { cursor: "pointer" } }),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "select", onClick: toggle }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { children: STYLES.map((style) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { "data-decoration-style": style, onClick: () => {
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__underline", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { children: STYLES.map((style) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { "data-decoration-style": style, onClick: () => {
       editorRef.current?.command.executeUnderline({ style });
     }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("i", {}) }, style)) }) })
   ] });
@@ -657,7 +657,7 @@ function ListTool() {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { ref: triggerRef, className: `menu-item__list ${isActive ? "active" : ""}`, title: `List(${isApple ? "\u2318" : "Ctrl"}+Shift+U)`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.List, { size: 16, onClick: toggle, style: { cursor: "pointer" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { padding: "8px", width: "320px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__list", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { padding: "8px", width: "320px" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "flex", gap: "4px", marginBottom: "8px" }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "button",
@@ -756,7 +756,7 @@ function SeparatorTool() {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "menu-item__separator", ref: triggerRef, title: "Separator", children: [
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.Minus, { size: 16, onClick: toggle, style: { cursor: "pointer" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { padding: "8px 10px 10px", width: "200px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__separator", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { padding: "8px 10px 10px", width: "200px" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: DASH_STYLES.map(({ label, dashArray }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
         "li",
         {
@@ -825,7 +825,7 @@ function InsertElementTool() {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "menu-item__insert-element", ref: triggerRef, onClick: toggle, children: [
     /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("i", { title: "Insert Element" }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { onClick: handleHeader, children: "Add Header" }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__insert-element", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { onClick: handleHeader, children: "Add Header" }) }) })
   ] });
 }
 
@@ -848,7 +848,7 @@ function PageBreakTool() {
       onClick: toggle,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("i", { title: "Break" }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("ul", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__page-break", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("ul", { children: [
           /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("li", { onClick: handlePageBreak, children: "Page Break" }),
           /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("li", { onClick: handleColumnBreak, children: "Column Break" })
         ] }) })