@trafica/editor 1.0.20 → 1.0.22

package/dist/index.d.mts

@@ -665,6 +665,10 @@ declare function replaceAllMatches(matches: SearchMatch[], replacement: string):
  *
  * Tab         → move cursor to next cell (adds row if on last cell)
  * Shift+Tab   → move cursor to previous cell (no-op on first cell)
+ * ArrowRight  → move to next cell when at end of current cell
+ * ArrowLeft   → move to previous cell when at start of current cell
+ * ArrowDown   → move to cell below when on bottom line
+ * ArrowUp     → move to cell above when on top line
  *
  * Enter inside a cell is handled by the default handleEnter command because
  * findContentBlockPath correctly resolves to the paragraph inside the cell

package/dist/index.d.ts

@@ -665,6 +665,10 @@ declare function replaceAllMatches(matches: SearchMatch[], replacement: string):
  *
  * Tab         → move cursor to next cell (adds row if on last cell)
  * Shift+Tab   → move cursor to previous cell (no-op on first cell)
+ * ArrowRight  → move to next cell when at end of current cell
+ * ArrowLeft   → move to previous cell when at start of current cell
+ * ArrowDown   → move to cell below when on bottom line
+ * ArrowUp     → move to cell above when on top line
  *
  * Enter inside a cell is handled by the default handleEnter command because
  * findContentBlockPath correctly resolves to the paragraph inside the cell

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
     )
   ] });
 }
@@ -8609,6 +8629,53 @@ function prettyPrintHTML(html) {
 }
 
 // src/editor/table/TablePlugin.ts
+function getCellDOMElement(cellPathJson) {
+  return document.querySelector(`[data-block-path='${cellPathJson}']`);
+}
+function isCaretAtContainerStart(container) {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0 || !sel.isCollapsed) return false;
+  const range = sel.getRangeAt(0);
+  if (range.startOffset !== 0) return false;
+  let node = range.startContainer;
+  while (node && node !== container) {
+    if (node.previousSibling) return false;
+    node = node.parentNode;
+  }
+  return node === container;
+}
+function isCaretAtContainerEnd(container) {
+  var _a, _b;
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0 || !sel.isCollapsed) return false;
+  const range = sel.getRangeAt(0);
+  const endNode = range.endContainer;
+  const endOffset = range.endOffset;
+  const len = endNode.nodeType === Node.TEXT_NODE ? (_b = (_a = endNode.textContent) == null ? void 0 : _a.length) != null ? _b : 0 : endNode.childNodes.length;
+  if (endOffset !== len) return false;
+  let node = endNode;
+  while (node && node !== container) {
+    if (node.nextSibling) return false;
+    node = node.parentNode;
+  }
+  return node === container;
+}
+function isCaretOnEdgeLine(container, direction) {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0 || !sel.isCollapsed) return false;
+  const caretRange = sel.getRangeAt(0).cloneRange();
+  caretRange.collapse(true);
+  const caretRects = caretRange.getClientRects();
+  if (!caretRects.length) return true;
+  const caretRect = caretRects[0];
+  const containerRect = container.getBoundingClientRect();
+  const lineHeight = parseFloat(getComputedStyle(container).lineHeight) || 20;
+  if (direction === "up") {
+    return caretRect.top < containerRect.top + lineHeight;
+  } else {
+    return caretRect.bottom > containerRect.bottom - lineHeight;
+  }
+}
 var TablePlugin = {
   name: "table",
   keyBindings: {
@@ -8659,6 +8726,125 @@ var TablePlugin = {
       engine.dispatch(tr);
       return true;
     },
+    "ArrowRight": (engine) => {
+      var _a;
+      const state = engine.getState();
+      const sel = state.selection;
+      if (!sel) return false;
+      const cellPos = findCellPosition(state.doc, sel.anchor.path);
+      if (!cellPos) return false;
+      const { tablePath, row, col } = cellPos;
+      const cellPath = [...tablePath, row, col];
+      const cellEl = getCellDOMElement(JSON.stringify(cellPath));
+      if (!cellEl || !isCaretAtContainerEnd(cellEl)) return false;
+      const table = getNodeAtPath(state.doc, tablePath);
+      const { rows, cols } = getTableDimensions(table);
+      let nextRow = row;
+      let nextCol = col + 1;
+      while (nextRow < rows) {
+        if (nextCol >= cols) {
+          nextCol = 0;
+          nextRow++;
+          continue;
+        }
+        const c = getNodeAtPath(state.doc, [...tablePath, nextRow, nextCol]);
+        if (!((_a = c == null ? void 0 : c.attrs) == null ? void 0 : _a.covered)) break;
+        nextCol++;
+      }
+      if (nextRow >= rows) return true;
+      const pos = getCellFirstPosition(state.doc, tablePath, nextRow, nextCol);
+      if (!pos) return false;
+      const tr = createTransaction();
+      tr.steps.push(tr_setSelection(makeCollapsedSelection(pos)));
+      engine.dispatch(tr);
+      return true;
+    },
+    "ArrowLeft": (engine) => {
+      var _a;
+      const state = engine.getState();
+      const sel = state.selection;
+      if (!sel) return false;
+      const cellPos = findCellPosition(state.doc, sel.anchor.path);
+      if (!cellPos) return false;
+      const { tablePath, row, col } = cellPos;
+      const cellPath = [...tablePath, row, col];
+      const cellEl = getCellDOMElement(JSON.stringify(cellPath));
+      if (!cellEl || !isCaretAtContainerStart(cellEl)) return false;
+      const table = getNodeAtPath(state.doc, tablePath);
+      const { cols } = getTableDimensions(table);
+      let prevRow = row;
+      let prevCol = col - 1;
+      while (prevRow >= 0) {
+        if (prevCol < 0) {
+          prevCol = cols - 1;
+          prevRow--;
+          continue;
+        }
+        const c = getNodeAtPath(state.doc, [...tablePath, prevRow, prevCol]);
+        if (!((_a = c == null ? void 0 : c.attrs) == null ? void 0 : _a.covered)) break;
+        prevCol--;
+      }
+      if (prevRow < 0) return true;
+      const pos = getCellLastPosition(state.doc, tablePath, prevRow, prevCol);
+      if (!pos) return false;
+      const tr = createTransaction();
+      tr.steps.push(tr_setSelection(makeCollapsedSelection(pos)));
+      engine.dispatch(tr);
+      return true;
+    },
+    "ArrowDown": (engine) => {
+      var _a;
+      const state = engine.getState();
+      const sel = state.selection;
+      if (!sel) return false;
+      const cellPos = findCellPosition(state.doc, sel.anchor.path);
+      if (!cellPos) return false;
+      const { tablePath, row, col } = cellPos;
+      const cellPath = [...tablePath, row, col];
+      const cellEl = getCellDOMElement(JSON.stringify(cellPath));
+      if (!cellEl || !isCaretOnEdgeLine(cellEl, "down")) return false;
+      const table = getNodeAtPath(state.doc, tablePath);
+      const { rows, cols } = getTableDimensions(table);
+      let nextRow = row + 1;
+      while (nextRow < rows) {
+        const c = getNodeAtPath(state.doc, [...tablePath, nextRow, col]);
+        if (c && !((_a = c.attrs) == null ? void 0 : _a.covered)) break;
+        nextRow++;
+      }
+      if (nextRow >= rows) return false;
+      const pos = getCellFirstPosition(state.doc, tablePath, nextRow, col < cols ? col : 0);
+      if (!pos) return false;
+      const tr = createTransaction();
+      tr.steps.push(tr_setSelection(makeCollapsedSelection(pos)));
+      engine.dispatch(tr);
+      return true;
+    },
+    "ArrowUp": (engine) => {
+      var _a;
+      const state = engine.getState();
+      const sel = state.selection;
+      if (!sel) return false;
+      const cellPos = findCellPosition(state.doc, sel.anchor.path);
+      if (!cellPos) return false;
+      const { tablePath, row, col } = cellPos;
+      const cellPath = [...tablePath, row, col];
+      const cellEl = getCellDOMElement(JSON.stringify(cellPath));
+      if (!cellEl || !isCaretOnEdgeLine(cellEl, "up")) return false;
+      let prevRow = row - 1;
+      while (prevRow >= 0) {
+        const c = getNodeAtPath(state.doc, [...tablePath, prevRow, col]);
+        if (c && !((_a = c.attrs) == null ? void 0 : _a.covered)) break;
+        prevRow--;
+      }
+      if (prevRow < 0) return false;
+      const { cols } = getTableDimensions(getNodeAtPath(state.doc, tablePath));
+      const pos = getCellLastPosition(state.doc, tablePath, prevRow, col < cols ? col : 0);
+      if (!pos) return false;
+      const tr = createTransaction();
+      tr.steps.push(tr_setSelection(makeCollapsedSelection(pos)));
+      engine.dispatch(tr);
+      return true;
+    },
     "Shift+Tab": (engine) => {
       var _a;
       const state = engine.getState();