@zero-library/common 2.4.2 → 2.4.4

package/dist/index.cjs.js

@@ -2476,6 +2476,7 @@ var HorizontalRule = TiptapHorizontalRule__default.default.extend({
 // src/components/MarkdownEditor/pageNo/constant.ts
 var PAGE_NO_TAG = "page-no";
 var PAGE_NO_KEY = "PageNo";
+var SCROLL_TOP_OFFSET = 80;
 
 // src/components/MarkdownEditor/pageNo/pageNoMark.ts
 var pageNoMark_default = core.Node.create({
@@ -2605,7 +2606,7 @@ var PageNoExtension = core.Extension.create({
             pageNos.forEach((node) => {
               const rect = node.getBoundingClientRect();
               const top = rect.top - containerTop;
-              if (Math.abs(top) <= 80) {
+              if (Math.abs(top) <= SCROLL_TOP_OFFSET) {
                 closestNode = node;
                 closestTopDiff = 0;
               } else if (top < 0 && top > closestTopDiff) {
@@ -3670,13 +3671,45 @@ function scrollEditorViewToPosInNextFrame(view, pos, options) {
   const { align = "start", behavior = "auto", offset: offset3 = 0 } = options || {};
   requestAnimationFrame(() => {
     try {
-      const result = view.domAtPos(pos);
-      if (!result) return;
-      const el = result.node.nodeType === Node.TEXT_NODE ? result.node.parentElement : result.node;
-      if (!el) return;
       const scrollParent = getScrollParent(view.dom);
+      if (!scrollParent) return;
       const parentRect = scrollParent.getBoundingClientRect();
-      const targetRect = el.getBoundingClientRect();
+      if (!parentRect.height) return;
+      let el = null;
+      const nodeDom = view.nodeDOM?.(pos);
+      if (nodeDom) {
+        el = nodeDom.nodeType === Node.TEXT_NODE ? nodeDom.parentElement : nodeDom;
+      }
+      if (!el) {
+        const result = view.domAtPos(pos);
+        if (result) {
+          if (result.node.nodeType === Node.TEXT_NODE) {
+            el = result.node.parentElement;
+          } else {
+            const container = result.node;
+            const nodeAtOffset = container.childNodes?.[result.offset];
+            const nodeBeforeOffset = container.childNodes?.[result.offset - 1];
+            if (nodeAtOffset?.nodeType === Node.ELEMENT_NODE) {
+              el = nodeAtOffset;
+            } else if (nodeBeforeOffset?.nodeType === Node.ELEMENT_NODE) {
+              el = nodeBeforeOffset;
+            } else {
+              el = container;
+            }
+          }
+        }
+      }
+      let targetRect = null;
+      if (el) {
+        targetRect = el.getBoundingClientRect();
+      } else {
+        try {
+          const coords = view.coordsAtPos(pos);
+          targetRect = new DOMRect(coords.left, coords.top, coords.right - coords.left, coords.bottom - coords.top);
+        } catch {
+          return;
+        }
+      }
       let delta = 0;
       if (align === "start") {
         delta = targetRect.top - parentRect.top;
@@ -3685,8 +3718,10 @@ function scrollEditorViewToPosInNextFrame(view, pos, options) {
       } else if (align === "end") {
         delta = targetRect.bottom - parentRect.bottom;
       }
+      const maxTop = Math.max(0, scrollParent.scrollHeight - scrollParent.clientHeight);
+      const nextTop = Math.max(0, Math.min(scrollParent.scrollTop + delta - offset3, maxTop));
       scrollParent.scrollTo({
-        top: scrollParent.scrollTop + delta - offset3,
+        top: nextTop,
         behavior
       });
     } catch (e) {
@@ -8526,6 +8561,55 @@ var SearchAndReplace = core.Extension.create({
   }
 });
 var searchAndReplace_default = SearchAndReplace;
+var usePageNo = (pageNoConfig) => {
+  const [editor, setEditor] = React.useState(null);
+  const lastScrollToPageNoRef = React.useRef(void 0);
+  const setPageNoEditor = (newEditor) => {
+    setEditor(newEditor);
+  };
+  const onPageChange = useDebounce_default((pageNo = 1) => {
+    lastScrollToPageNoRef.current = pageNo;
+    pageNoConfig?.onScrollPage?.(pageNo);
+  }, 300);
+  React.useEffect(() => {
+    if (!editor) return;
+    if (!pageNoConfig?.enabled) return;
+    const targetPageNo = pageNoConfig?.pageNo;
+    if (isNullOrUnDef(targetPageNo)) return;
+    if (lastScrollToPageNoRef.current === targetPageNo) return;
+    let rafId = 0;
+    const targetPageNoStr = String(targetPageNo);
+    const findTargetPos = () => {
+      let foundPos = null;
+      editor.state.doc.descendants((node, pos) => {
+        if (!isNullOrUnDef(foundPos)) return false;
+        if (node.type.name !== PAGE_NO_KEY) return true;
+        if (String(node.attrs?.[PAGE_NO_TAG]) === targetPageNoStr) {
+          foundPos = pos;
+          return false;
+        }
+        return true;
+      });
+      return foundPos;
+    };
+    let tries = 0;
+    const tryScroll = () => {
+      const foundPos = findTargetPos();
+      if (!isNullOrUnDef(foundPos)) {
+        scrollEditorViewToPosInNextFrame(editor.view, foundPos, { align: "start", offset: SCROLL_TOP_OFFSET });
+        return;
+      }
+      tries += 1;
+      if (tries < 10) rafId = requestAnimationFrame(tryScroll);
+    };
+    rafId = requestAnimationFrame(tryScroll);
+    return () => cancelAnimationFrame(rafId);
+  }, [editor, pageNoConfig?.enabled, pageNoConfig?.pageNo]);
+  return {
+    setPageNoEditor,
+    onPageChange
+  };
+};
 var MarkdownEditor_default = ({
   value = ``,
   onChange,
@@ -8542,9 +8626,7 @@ var MarkdownEditor_default = ({
 }) => {
   const isMobile = useIsBreakpoint();
   const lastContentRef = React.useRef("");
-  const onPageChange = useDebounce_default((pageIndex) => {
-    pageNoConfig?.onScrollPage?.(pageIndex ?? 0);
-  }, 300);
+  const { setPageNoEditor, onPageChange } = usePageNo(pageNoConfig);
   const {
     setAnnotationEditor,
     annotations,
@@ -8680,6 +8762,7 @@ var MarkdownEditor_default = ({
     if (!editor) return;
     setAnnotationEditor(editor);
     setCollectionEditor(editor);
+    setPageNoEditor(editor);
   }, [editor]);
   React.useEffect(() => {
     if (!editor) return;