@trafica/editor 1.0.20 → 1.0.21

package/dist/index.js

@@ -2,6 +2,7 @@
 
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
 
 // src/editor/core/DocumentModel.ts
 function isTextNode(node) {
@@ -5532,9 +5533,11 @@ function SpecialCharactersButton({
     null
   );
   const [focusedIdx, setFocusedIdx] = react.useState(-1);
-  const containerRef = react.useRef(null);
+  const buttonRef = react.useRef(null);
+  const popupRef = react.useRef(null);
   const searchRef = react.useRef(null);
   const gridRef = react.useRef(null);
+  const [popupPos, setPopupPos] = react.useState({ top: 0, left: 0 });
   const filtered = react.useMemo(() => {
     const q = search.toLowerCase();
     return SPECIAL_CHARACTERS.filter(
@@ -5542,6 +5545,12 @@ function SpecialCharactersButton({
     );
   }, [category, search]);
   const openModal = () => {
+    if (buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      const popupWidth = 340;
+      const left = Math.min(rect.left, window.innerWidth - popupWidth - 8);
+      setPopupPos({ top: rect.bottom + 4, left: Math.max(8, left) });
+    }
     setOpen(true);
     setSearch("");
     setFocusedIdx(-1);
@@ -5554,9 +5563,11 @@ function SpecialCharactersButton({
   react.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        closeModal();
-      }
+      var _a, _b;
+      const target = e.target;
+      const insidePopup = (_a = popupRef.current) == null ? void 0 : _a.contains(target);
+      const insideButton = (_b = buttonRef.current) == null ? void 0 : _b.contains(target);
+      if (!insidePopup && !insideButton) closeModal();
     };
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
@@ -5604,10 +5615,11 @@ function SpecialCharactersButton({
     const cell = gridRef.current.children[focusedIdx];
     cell == null ? void 0 : cell.focus();
   }, [focusedIdx]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "relative", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
+        ref: buttonRef,
         type: "button",
         title: "Special Characters",
         "aria-label": "Insert special character",
@@ -5615,7 +5627,11 @@ function SpecialCharactersButton({
         "aria-expanded": open,
         onMouseDown: (e) => {
           e.preventDefault();
-          open ? closeModal() : openModal();
+          if (open) {
+            closeModal();
+          } else {
+            openModal();
+          }
         },
         className: [
           "flex items-center justify-center w-8 h-8 rounded text-sm font-medium transition-colors",
@@ -5624,127 +5640,131 @@ function SpecialCharactersButton({
         children: /* @__PURE__ */ jsxRuntime.jsx(OmegaIcon, {})
       }
     ),
-    open && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        role: "dialog",
-        "aria-label": "Special characters",
-        "aria-modal": "true",
-        className: "absolute top-full left-0 mt-1 z-50 bg-white  border border-gray-200  rounded-lg shadow-2xl flex flex-col",
-        style: { width: 340, maxHeight: 420 },
-        onKeyDown: (e) => {
-          if (e.key === "Escape") closeModal();
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 pt-3 pb-2 border-b border-gray-100 ", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-gray-500  uppercase tracking-wide", children: "Special Characters" }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: closeModal,
-                  "aria-label": "Close",
-                  className: "text-gray-400 hover:text-gray-600  p-0.5 rounded",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {})
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                ref: searchRef,
-                type: "search",
-                placeholder: "Search characters\u2026",
-                value: search,
-                onChange: (e) => {
-                  setSearch(e.target.value);
-                  setFocusedIdx(-1);
-                },
-                onKeyDown: (e) => {
-                  var _a, _b;
-                  if (e.key === "Escape") closeModal();
-                  if (e.key === "ArrowDown") {
-                    e.preventDefault();
-                    setFocusedIdx(0);
-                    (_b = (_a = gridRef.current) == null ? void 0 : _a.children[0]) == null ? void 0 : _b.dispatchEvent(
-                      new Event("focus")
-                    );
+    open && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: popupRef,
+          role: "dialog",
+          "aria-label": "Special characters",
+          "aria-modal": "true",
+          className: "bg-white border border-gray-200 rounded-lg shadow-2xl flex flex-col",
+          style: { position: "fixed", top: popupPos.top, left: popupPos.left, width: 340, maxHeight: 420, zIndex: 9999 },
+          onKeyDown: (e) => {
+            if (e.key === "Escape") closeModal();
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 pt-3 pb-2 border-b border-gray-100 ", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-gray-500  uppercase tracking-wide", children: "Special Characters" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: closeModal,
+                    "aria-label": "Close",
+                    className: "text-gray-400 hover:text-gray-600  p-0.5 rounded",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {})
                   }
-                },
-                className: "w-full border border-gray-200  rounded px-2.5 py-1.5 text-sm bg-white  text-gray-900  placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 mt-2", children: CATEGORIES.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onMouseDown: (e) => {
-                  e.preventDefault();
-                  setCategory(cat);
-                  setFocusedIdx(-1);
-                },
-                className: [
-                  "px-2 py-0.5 rounded text-xs font-medium transition-colors",
-                  category === cat ? "bg-blue-600 text-white" : "bg-gray-100  text-gray-600  hover:bg-gray-200 "
-                ].join(" "),
-                children: cat
-              },
-              cat
-            )) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              ref: gridRef,
-              role: "grid",
-              "aria-label": "Character grid",
-              className: "flex-1 overflow-y-auto p-2",
-              style: {
-                display: "grid",
-                gridTemplateColumns: "repeat(8, 1fr)",
-                gap: 2
-              },
-              onKeyDown: handleGridKeyDown,
-              children: filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
                 {
-                  className: "col-span-8 text-center py-8 text-sm text-gray-400 ",
-                  role: "status",
-                  children: "No characters found"
+                  ref: searchRef,
+                  type: "search",
+                  placeholder: "Search characters\u2026",
+                  value: search,
+                  onChange: (e) => {
+                    setSearch(e.target.value);
+                    setFocusedIdx(-1);
+                  },
+                  onKeyDown: (e) => {
+                    var _a, _b;
+                    if (e.key === "Escape") closeModal();
+                    if (e.key === "ArrowDown") {
+                      e.preventDefault();
+                      setFocusedIdx(0);
+                      (_b = (_a = gridRef.current) == null ? void 0 : _a.children[0]) == null ? void 0 : _b.dispatchEvent(
+                        new Event("focus")
+                      );
+                    }
+                  },
+                  className: "w-full border border-gray-200  rounded px-2.5 py-1.5 text-sm bg-white  text-gray-900  placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
                 }
-              ) : filtered.map((c, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 mt-2", children: CATEGORIES.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   type: "button",
-                  role: "gridcell",
-                  tabIndex: focusedIdx === idx ? 0 : -1,
-                  "aria-label": c.name,
-                  title: c.name,
                   onMouseDown: (e) => {
                     e.preventDefault();
-                    insertChar(c.char);
+                    setCategory(cat);
+                    setFocusedIdx(-1);
                   },
-                  onMouseEnter: () => setHovered({ char: c.char, name: c.name }),
-                  onMouseLeave: () => setHovered(null),
-                  onFocus: () => setHovered({ char: c.char, name: c.name }),
-                  onBlur: () => setHovered(null),
                   className: [
-                    "flex items-center justify-center rounded text-base h-8 w-full transition-colors cursor-pointer select-none",
-                    focusedIdx === idx ? "bg-blue-100  text-blue-700  ring-2 ring-blue-500" : "text-gray-800  hover:bg-blue-50  hover:text-blue-700 "
+                    "px-2 py-0.5 rounded text-xs font-medium transition-colors",
+                    category === cat ? "bg-blue-600 text-white" : "bg-gray-100  text-gray-600  hover:bg-gray-200 "
                   ].join(" "),
-                  children: c.char
+                  children: cat
                 },
-                c.char + c.name
-              ))
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 border-t border-gray-100  flex items-center gap-3 min-h-[40px]", children: hovered ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-2xl leading-none text-gray-800  w-8 text-center", children: hovered.char }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-500  truncate", children: hovered.name })
-          ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400 ", children: "Hover or use arrow keys to preview" }) })
-        ]
-      }
+                cat
+              )) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                ref: gridRef,
+                role: "grid",
+                "aria-label": "Character grid",
+                className: "flex-1 overflow-y-auto p-2",
+                style: {
+                  display: "grid",
+                  gridTemplateColumns: "repeat(8, 1fr)",
+                  gap: 2
+                },
+                onKeyDown: handleGridKeyDown,
+                children: filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "col-span-8 text-center py-8 text-sm text-gray-400 ",
+                    role: "status",
+                    children: "No characters found"
+                  }
+                ) : filtered.map((c, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    role: "gridcell",
+                    tabIndex: focusedIdx === idx ? 0 : -1,
+                    "aria-label": c.name,
+                    title: c.name,
+                    onMouseDown: (e) => {
+                      e.preventDefault();
+                      insertChar(c.char);
+                    },
+                    onMouseEnter: () => setHovered({ char: c.char, name: c.name }),
+                    onMouseLeave: () => setHovered(null),
+                    onFocus: () => setHovered({ char: c.char, name: c.name }),
+                    onBlur: () => setHovered(null),
+                    className: [
+                      "flex items-center justify-center rounded text-base h-8 w-full transition-colors cursor-pointer select-none",
+                      focusedIdx === idx ? "bg-blue-100  text-blue-700  ring-2 ring-blue-500" : "text-gray-800  hover:bg-blue-50  hover:text-blue-700 "
+                    ].join(" "),
+                    children: c.char
+                  },
+                  c.char + c.name
+                ))
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 border-t border-gray-100  flex items-center gap-3 min-h-[40px]", children: hovered ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-2xl leading-none text-gray-800  w-8 text-center", children: hovered.char }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-500  truncate", children: hovered.name })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400 ", children: "Hover or use arrow keys to preview" }) })
+          ]
+        }
+      ),
+      document.body
     )
   ] });
 }