Merge branch 'main' into fix-export-prefetch-lock

Author: tangly1024

lib/db/notion/getPageTableOfContents.js

@@ -3,17 +3,26 @@ import { getTextContent } from 'notion-utils'
 const indentLevels = {
   header: 0,
   sub_header: 1,
-  sub_sub_header: 2
+  sub_sub_header: 2,
+  heading_1: 0,
+  heading_2: 1,
+  heading_3: 2
 }
 
+const unknownHeadingStats = new Map()
+
 /**
  * @see https://github.com/NotionX/react-notion-x/blob/master/packages/notion-utils/src/get-page-table-of-contents.ts
  * Gets the metadata for a table of contents block by parsing the page's
  * H1, H2, and H3 elements.
  */
 export const getPageTableOfContents = (page, recordMap) => {
+  const pageId = page?.id
+  if (process.env.NODE_ENV !== 'production' && pageId) {
+    unknownHeadingStats.set(pageId, 0)
+  }
   const contents = page.content ?? []
-  const toc = getBlockHeader(contents, recordMap)
+  const toc = getBlockHeader(contents, recordMap, [], pageId)
   const indentLevelStack = [
     {
       actual: -1,
@@ -25,11 +34,18 @@ export const getPageTableOfContents = (page, recordMap) => {
   // This is a little tricky, but the key is that when increasing indent levels,
   // they should never jump more than one at a time.
   for (const tocItem of toc) {
-    const { indentLevel } = tocItem
-    const actual = indentLevel
+    const actual = Number.isInteger(tocItem.indentLevel) ? tocItem.indentLevel : 0
 
     do {
       const prevIndent = indentLevelStack[indentLevelStack.length - 1]
+      if (!prevIndent) {
+        tocItem.indentLevel = 0
+        indentLevelStack.push({
+          actual,
+          effective: 0
+        })
+        break
+      }
       const { actual: prevActual, effective: prevEffective } = prevIndent
 
       if (actual > prevActual) {
@@ -49,13 +65,21 @@ export const getPageTableOfContents = (page, recordMap) => {
     } while (true)
   }
 
+  if (process.env.NODE_ENV !== 'production' && pageId) {
+    const unknownCount = unknownHeadingStats.get(pageId) || 0
+    if (unknownCount > 0) {
+      console.warn('[TOC] unknown heading summary', { pageId, unknownCount })
+    }
+    unknownHeadingStats.delete(pageId)
+  }
+
   return toc
 }
 
 /**
  * 重写获取目录方法
  */
-function getBlockHeader(contents, recordMap, toc) {
+function getBlockHeader(contents, recordMap, toc, pageId) {
   if (!toc) {
     toc = []
   }
@@ -69,27 +93,55 @@ function getBlockHeader(contents, recordMap, toc) {
       continue
     }
     const { type } = block
+    const isHeading =
+      typeof type === 'string' &&
+      (type.indexOf('header') >= 0 || /^heading_[123]$/.test(type))
+
     if (block.content?.length > 0) {
-      getBlockHeader(block.content, recordMap, toc)
+      getBlockHeader(block.content, recordMap, toc, pageId)
     } else {
-      if (type.indexOf('header') >= 0) {
+      if (isHeading) {
         const existed = toc.find(e => e.id === blockId)
+        const indentLevel = indentLevels[type]
+        if (!Number.isInteger(indentLevel)) {
+          // Emit debug signal only in development for quick reproduction.
+          if (process.env.NODE_ENV !== 'production') {
+            if (pageId) {
+              unknownHeadingStats.set(
+                pageId,
+                (unknownHeadingStats.get(pageId) || 0) + 1
+              )
+            }
+            console.warn('[TOC] unknown heading type', {
+              pageId,
+              blockId,
+              type,
+              title: getTextContent(block.properties?.title),
+              parentId: block.parent_id
+            })
+          }
+          continue
+        }
         if (!existed) {
           toc.push({
             id: blockId,
             type,
             text: getTextContent(block.properties?.title),
-            indentLevel: indentLevels[type]
+            indentLevel
           })
         }
-      } else if (type === 'transclusion_reference') {
+      } else if (
+        type === 'transclusion_reference' &&
+        block.format?.transclusion_reference_pointer?.id
+      ) {
         getBlockHeader(
           [block.format.transclusion_reference_pointer.id],
           recordMap,
-          toc
+          toc,
+          pageId
         )
       } else if (type === 'transclusion_container') {
-          getBlockHeader(block.content, recordMap, toc)
+        getBlockHeader(block.content, recordMap, toc, pageId)
       }
     }
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "notion-next",
-  "version": "4.9.4.2",
+  "version": "4.9.4.3",
   "homepage": "https://github.com/tangly1024/NotionNext.git",
   "license": "MIT",
   "engines": {

themes/proxio/components/MenuItem.js

@@ -7,17 +7,23 @@ import { useState } from 'react'
  * @param {*} param0
  * @returns
  */
-export const MenuItem = ({ link }) => {
+export const MenuItem = ({ link, isOpen, toggleOpen }) => {
   const hasSubMenu = link?.subMenus?.length > 0
   const router = useRouter()
 
   // 管理子菜单的展开状态
   const [isSubMenuOpen, setIsSubMenuOpen] = useState(false)
 
   const toggleSubMenu = () => {
-    setIsSubMenuOpen(prev => !prev) // 切换子菜单状态
+    if (toggleOpen) {
+      toggleOpen()
+    } else {
+      setIsSubMenuOpen(prev => !prev) // 切换子菜单状态
+    }
   }
 
+  const open = isOpen !== undefined ? isOpen : isSubMenuOpen
+
   return (
     <>
       {/* 普通 MenuItem */}
@@ -66,7 +72,7 @@ export const MenuItem = ({ link }) => {
           {/* 子菜单 */}
           <div
             className={`submenu dark:border-gray-600 relative left-0 top-full w-[250px] rounded-sm bg-white p-4 transition-all duration-300 dark:bg-dark-2 lg:absolute lg:shadow-lg ${
-              isSubMenuOpen
+              open
                 ? 'block opacity-100 visible'
                 : 'hidden opacity-0 invisible'
             }`}>

themes/proxio/components/MenuList.js

@@ -2,7 +2,7 @@ import BLOG from '@/blog.config'
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import { MenuItem } from './MenuItem'
 
 /**
@@ -13,7 +13,10 @@ export const MenuList = props => {
   const { locale } = useGlobal()
 
   const [showMenu, setShowMenu] = useState(false) // 控制菜单展开/收起状态
+  const [openSubMenuIdx, setOpenSubMenuIdx] = useState(null) // 控制哪个子菜单处于展开状态
   const router = useRouter()
+  const menuRef = useRef(null) // 监听点击外部区域
+
 
   let links = [
     {
@@ -57,14 +60,28 @@ export const MenuList = props => {
 
   useEffect(() => {
     setShowMenu(false)
+    setOpenSubMenuIdx(null)
   }, [router])
 
+  // 监听点击外部区域，收起子菜单
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setOpenSubMenuIdx(null)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [])
+
   if (!links || links.length === 0) {
     return null
   }
 
   return (
-    <div>
+    <div ref={menuRef}>
       {/* 移动端菜单切换按钮 */}
       <button
         id='navbarToggler'
@@ -84,7 +101,12 @@ export const MenuList = props => {
         }`}>
         <ul className='blcok lg:flex 2xl:ml-20'>
           {links?.map((link, index) => (
-            <MenuItem key={index} link={link} />
+            <MenuItem 
+              key={index} 
+              link={link} 
+              isOpen={openSubMenuIdx === index}
+              toggleOpen={() => setOpenSubMenuIdx(openSubMenuIdx === index ? null : index)}
+            />
           ))}
         </ul>
       </nav>