@trafica/editor 1.0.25 → 1.0.27

package/dist/index.js

@@ -1685,7 +1685,7 @@ function serializeBlock(node, idCounts = /* @__PURE__ */ new Map()) {
       return "<hr />";
     case "table": {
       const rows = node.children.map((c) => serializeBlock(c)).join("");
-      return `<table><tbody>${rows}</tbody></table>`;
+      return `<div style="overflow-x:auto;margin:0.75em 0;"><table style="border-collapse:collapse;table-layout:fixed;width:100%;font-size:inherit;font-family:inherit;"><tbody>${rows}</tbody></table></div>`;
     }
     case "table_row": {
       const cells = node.children.map((c) => serializeBlock(c)).join("");
@@ -1695,13 +1695,13 @@ function serializeBlock(node, idCounts = /* @__PURE__ */ new Map()) {
       if ((_p = node.attrs) == null ? void 0 : _p.covered) return "";
       const cs = ((_q = node.attrs) == null ? void 0 : _q.colspan) > 1 ? ` colspan="${(_r = node.attrs) == null ? void 0 : _r.colspan}"` : "";
       const rs = ((_s = node.attrs) == null ? void 0 : _s.rowspan) > 1 ? ` rowspan="${(_t = node.attrs) == null ? void 0 : _t.rowspan}"` : "";
-      return `<td${cs}${rs}>${serializeChildren(node.children)}</td>`;
+      return `<td${cs}${rs} style="border:1px solid #d1d5db;padding:0.5em 0.75em;vertical-align:top;min-width:40px;word-break:break-word;">${serializeChildren(node.children)}</td>`;
     }
     case "table_header": {
       if ((_u = node.attrs) == null ? void 0 : _u.covered) return "";
       const cs = ((_v = node.attrs) == null ? void 0 : _v.colspan) > 1 ? ` colspan="${(_w = node.attrs) == null ? void 0 : _w.colspan}"` : "";
       const rs = ((_x = node.attrs) == null ? void 0 : _x.rowspan) > 1 ? ` rowspan="${(_y = node.attrs) == null ? void 0 : _y.rowspan}"` : "";
-      return `<th${cs}${rs}>${serializeChildren(node.children)}</th>`;
+      return `<th${cs}${rs} style="border:1px solid #d1d5db;padding:0.5em 0.75em;vertical-align:top;min-width:40px;word-break:break-word;background:#f9fafb;font-weight:600;text-align:left;">${serializeChildren(node.children)}</th>`;
     }
     default:
       return `<p>${serializeChildren(node.children)}</p>`;
@@ -7830,6 +7830,43 @@ function EditorCore({
 }) {
   const containerRef = react.useRef(null);
   const isRenderingRef = react.useRef(false);
+  const scrollCaretIntoView = react.useCallback(() => {
+    var _a, _b;
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    const range = sel.getRangeAt(0).cloneRange();
+    range.collapse(true);
+    const caretRect = range.getBoundingClientRect();
+    let rect = caretRect;
+    if (!rect || rect.top === 0 && rect.bottom === 0 && rect.left === 0) {
+      const node = range.startContainer;
+      const el = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+      if (el) rect = el.getBoundingClientRect();
+    }
+    if (!rect || rect.bottom === 0) return;
+    let scrollEl = (_b = (_a = containerRef.current) == null ? void 0 : _a.parentElement) != null ? _b : null;
+    while (scrollEl) {
+      const style = window.getComputedStyle(scrollEl);
+      const overflow = style.overflow + style.overflowY;
+      if (/auto|scroll/.test(overflow)) break;
+      scrollEl = scrollEl.parentElement;
+    }
+    const PADDING = 24;
+    if (scrollEl) {
+      const containerRect = scrollEl.getBoundingClientRect();
+      if (rect.bottom > containerRect.bottom - PADDING) {
+        scrollEl.scrollBy({ top: rect.bottom - containerRect.bottom + PADDING, behavior: "smooth" });
+      } else if (rect.top < containerRect.top + PADDING) {
+        scrollEl.scrollBy({ top: rect.top - containerRect.top - PADDING, behavior: "smooth" });
+      }
+    } else {
+      if (rect.bottom > window.innerHeight - PADDING) {
+        window.scrollBy({ top: rect.bottom - window.innerHeight + PADDING, behavior: "smooth" });
+      } else if (rect.top < PADDING) {
+        window.scrollBy({ top: rect.top - PADDING, behavior: "smooth" });
+      }
+    }
+  }, []);
   const isComposingRef = react.useRef(false);
   const stateRef = react.useRef(engine.getState());
   const [selectedImagePath, setSelectedImagePath] = react.useState(null);
@@ -7892,6 +7929,7 @@ function EditorCore({
     }
     if (state.selection) {
       restoreSelection(container, state.selection);
+      scrollCaretIntoView();
     }
     isRenderingRef.current = false;
     if (onHTMLChange) {
@@ -7905,6 +7943,7 @@ function EditorCore({
     const container = containerRef.current;
     if (!container || !state.selection) return;
     restoreSelection(container, state.selection);
+    scrollCaretIntoView();
   }, [state.selection]);
   react.useEffect(() => {
     const container = containerRef.current;