@windoc/react 0.2.5 → 0.2.7

package/README.md

@@ -1,6 +1,5 @@
 <div align="center">
-  <img src="https://raw.githubusercontent.com/aliansyahFirdaus/windoc/main/docs/static/img/logo-text-white.png#gh-light-mode-only" alt="Windoc" height="120">
-  <img src="https://raw.githubusercontent.com/aliansyahFirdaus/windoc/main/docs/static/img/logo-text-black.png#gh-dark-mode-only" alt="Windoc" height="120">
+  <img src="https://raw.githubusercontent.com/aliansyahFirdaus/windoc/main/docs/static/img/og.png" alt="Windoc — Canvas document editor for the web" width="720">
 </div>
 
 # @windoc/react

package/dist/index.js

@@ -182,7 +182,7 @@ var import_react3 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function ColumnTool() {
   const { editorRef } = useEditor();
-  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
+  const optionsRef = (0, import_react3.useRef)(null);
   const [currentColumns, setCurrentColumns] = (0, import_react3.useState)(1);
   const [gap, setGap] = (0, import_react3.useState)(20);
   const handleColumn = (col) => {
@@ -194,9 +194,9 @@ function ColumnTool() {
     setGap(clampedValue);
     editorRef.current?.command.executeColumnGap(clampedValue);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "menu-item__column", onClick: () => setIsOpen(!isOpen), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "menu-item__column", onClick: () => optionsRef.current?.classList.toggle("visible"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "select", title: "Column Layout", children: currentColumns === 1 ? "1 Column" : `${currentColumns} Columns` }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("ul", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { onClick: () => handleColumn(1), children: "1 Column" }),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { onClick: () => handleColumn(2), children: "2 Columns" })
@@ -285,15 +285,15 @@ var LEVELS = [
 ];
 function TitleTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
+  const optionsRef = (0, import_react5.useRef)(null);
   const activeLevel = rangeStyle?.level || null;
   const activeLabel = LEVELS.find((l) => l.level === activeLevel)?.label || "Body";
   const handleTitle = (level) => {
     editorRef.current?.command.executeTitle(level);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "menu-item__title", onClick: () => setIsOpen(!isOpen), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "menu-item__title", onClick: () => optionsRef.current?.classList.toggle("visible"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "select", title: "Toggle Heading", children: activeLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { children: LEVELS.map(({ level, label }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { children: LEVELS.map(({ level, label }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "li",
       {
         className: activeLevel === level ? "active" : "",
@@ -315,15 +315,15 @@ var FONTS = [
 ];
 function FontTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
+  const optionsRef = (0, import_react6.useRef)(null);
   const activeFont = rangeStyle?.font || "Arial";
   const activeLabel = FONTS.find((f) => f.family === activeFont)?.label || activeFont;
   const handleFont = (family) => {
     editorRef.current?.command.executeFont(family);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "menu-item__font", onClick: () => setIsOpen(!isOpen), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "menu-item__font", onClick: () => optionsRef.current?.classList.toggle("visible"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "select", title: "Font", children: activeLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { children: FONTS.map(({ family, label }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { children: FONTS.map(({ family, label }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "li",
       {
         "data-family": family,
@@ -343,14 +343,14 @@ var import_jsx_runtime9 = require("react/jsx-runtime");
 var SIZES = [56, 48, 34, 32, 29, 24, 21, 20, 18, 16, 14, 12, 10, 8];
 function FontSizeTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const [isOpen, setIsOpen] = (0, import_react7.useState)(false);
+  const optionsRef = (0, import_react7.useRef)(null);
   const activeSize = rangeStyle?.size ?? 16;
   const handleSize = (size) => {
     editorRef.current?.command.executeSize(size);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "menu-item__size", onClick: () => setIsOpen(!isOpen), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "menu-item__size", onClick: () => optionsRef.current?.classList.toggle("visible"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "select", title: "Font Size", children: activeSize }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { children: SIZES.map((size) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { children: SIZES.map((size) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "li",
       {
         className: activeSize === size ? "active" : "",
@@ -368,15 +368,15 @@ var import_jsx_runtime10 = require("react/jsx-runtime");
 var LINE_HEIGHTS = ["1.0", "1.15", "1.5", "2.0", "2.5"];
 function LineHeightTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
+  const optionsRef = (0, import_react8.useRef)(null);
   const activeMargin = rangeStyle?.rowMargin ?? 1;
   const activeLabel = Number.isInteger(activeMargin) ? `${activeMargin}.0` : String(activeMargin);
   const handleLineHeight = (value) => {
     editorRef.current?.command.executeRowMargin(Number(value));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "menu-item__line-height", onClick: () => setIsOpen(!isOpen), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "menu-item__line-height", onClick: () => optionsRef.current?.classList.toggle("visible"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "select", title: "Line Height", children: activeLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { children: LINE_HEIGHTS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { children: LINE_HEIGHTS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "li",
       {
         className: String(activeMargin) === h || activeLabel === h ? "active" : "",
@@ -404,7 +404,7 @@ var COLOR_PALETTE = [
 ];
 function ColorTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const [visible, setVisible] = (0, import_react9.useState)(false);
+  const dropdownRef = (0, import_react9.useRef)(null);
   const activeColor = rangeStyle?.color || "#000000";
   const handleColor = (color) => {
     editorRef.current?.command.executeColor(color);
@@ -412,11 +412,11 @@ function ColorTool() {
   const handleReset = () => {
     editorRef.current?.command.executeColor(null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "menu-item__color", title: "Font Color", onClick: () => setVisible(!visible), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "menu-item__color", title: "Font Color", onClick: () => dropdownRef.current?.classList.toggle("visible"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Baseline, { size: 16 }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { backgroundColor: activeColor } }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { id: "color", type: "color", readOnly: true, tabIndex: -1 }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "color-palette-dropdown" + (visible ? " visible" : ""), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "color-palette-dropdown", ref: dropdownRef, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
       /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("button", { className: "color-palette-reset", onClick: handleReset, children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.RotateCcw, { size: 12 }),
         "Reset"
@@ -451,7 +451,7 @@ var HIGHLIGHT_PALETTE = [
 ];
 function HighlightTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const [visible, setVisible] = (0, import_react10.useState)(false);
+  const dropdownRef = (0, import_react10.useRef)(null);
   const activeColor = rangeStyle?.highlight || "";
   const handleColor = (color) => {
     editorRef.current?.command.executeHighlight(color);
@@ -459,11 +459,11 @@ function HighlightTool() {
   const handleReset = () => {
     editorRef.current?.command.executeHighlight(null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "menu-item__highlight", title: "Highlight", onClick: () => setVisible(!visible), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "menu-item__highlight", title: "Highlight", onClick: () => dropdownRef.current?.classList.toggle("visible"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.Highlighter, { size: 16 }),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { backgroundColor: activeColor || "#ffff00" } }),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { id: "highlight", type: "color", readOnly: true, tabIndex: -1 }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "color-palette-dropdown" + (visible ? " visible" : ""), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "color-palette-dropdown", ref: dropdownRef, 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_react5.RotateCcw, { size: 12 }),
         "None"
@@ -507,12 +507,12 @@ var import_jsx_runtime15 = require("react/jsx-runtime");
 var STYLES = ["solid", "double", "dashed", "dotted", "wavy"];
 function UnderlineTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
-  const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
+  const optionsRef = (0, import_react11.useRef)(null);
   const isActive = rangeStyle?.underline === true;
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: `menu-item__underline ${isActive ? "active" : ""}`, title: `Underline(${isApple ? "\u2318" : "Ctrl"}+U)`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react8.Underline, { size: 16, onClick: () => editorRef.current?.command.executeUnderline(), style: { cursor: "pointer" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "select", onClick: () => setIsOpen(!isOpen) }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { children: STYLES.map((style) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("li", { "data-decoration-style": style, onClick: () => {
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "select", onClick: () => optionsRef.current?.classList.toggle("visible") }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { children: STYLES.map((style) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("li", { "data-decoration-style": style, onClick: () => {
       editorRef.current?.command.executeUnderline({ style });
     }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("i", {}) }, style)) }) })
   ] });
@@ -599,7 +599,7 @@ function PresetCell({ option, onClick }) {
 }
 function ListTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
-  const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
+  const optionsRef = (0, import_react12.useRef)(null);
   const isActive = !!rangeStyle?.listType;
   const handleList = (type, style) => {
     editorRef.current?.command.executeList(type, style);
@@ -617,8 +617,8 @@ function ListTool() {
     editorRef.current?.command.executeListOutdent();
   };
   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: () => setIsOpen(!isOpen), style: { cursor: "pointer" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { padding: "8px", width: "320px" }, 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.jsxs)("div", { style: { display: "flex", gap: "4px", marginBottom: "8px" }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "button",
@@ -709,15 +709,15 @@ var LINE_WIDTHS = [
 ];
 function SeparatorTool() {
   const { editorRef } = useEditor();
-  const [isOpen, setIsOpen] = (0, import_react13.useState)(false);
+  const optionsRef = (0, import_react13.useRef)(null);
   const [selectedWidth, setSelectedWidth] = (0, import_react13.useState)(1);
   const lineColor = "#344054";
   const handleSeparator = (dashArray) => {
     editorRef.current?.command.executeSeparator(dashArray, { lineWidth: selectedWidth });
   };
   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: () => setIsOpen(!isOpen), style: { cursor: "pointer" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { padding: "8px 10px 10px", width: "200px" }, 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: [
       /* @__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",
         {
@@ -775,7 +775,7 @@ var import_react14 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function InsertElementTool() {
   const { editorRef } = useEditor();
-  const [isOpen, setIsOpen] = (0, import_react14.useState)(false);
+  const optionsRef = (0, import_react14.useRef)(null);
   const handleHeader = () => {
     if (!editorRef.current) return;
     const options = editorRef.current.command.getOptions();
@@ -785,9 +785,9 @@ function InsertElementTool() {
     }
     editorRef.current.command.executeSetZone("header");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "menu-item__insert-element", onClick: () => setIsOpen(!isOpen), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "menu-item__insert-element", onClick: () => optionsRef.current?.classList.toggle("visible"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("i", { title: "Insert Element" }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { onClick: handleHeader, children: "Add Header" }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { onClick: handleHeader, children: "Add Header" }) }) })
   ] });
 }
 
@@ -796,7 +796,7 @@ var import_react15 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function PageBreakTool() {
   const { editorRef } = useEditor();
-  const [isOpen, setIsOpen] = (0, import_react15.useState)(false);
+  const optionsRef = (0, import_react15.useRef)(null);
   const handlePageBreak = () => {
     editorRef.current?.command.executePageBreak();
   };
@@ -807,10 +807,10 @@ function PageBreakTool() {
     "div",
     {
       className: "menu-item__page-break",
-      onClick: () => setIsOpen(!isOpen),
+      onClick: () => optionsRef.current?.classList.toggle("visible"),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("i", { title: "Break" }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("ul", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("ul", { children: [
           /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { onClick: handlePageBreak, children: "Page Break" }),
           /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { onClick: handleColumnBreak, children: "Column Break" })
         ] }) })