@trafica/editor 1.0.24 → 1.0.26

package/dist/index.js

@@ -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;