feat: scorll to top: 0 after collapse all

Author: winverse

packages/nextra-editor/src/components/sidebar/index.tsx

@@ -51,7 +51,7 @@ export function Sidebar({
 
   const anchors = useMemo(() => headings.filter((v) => v.depth === 2), [headings])
   const sidebarRef = useRef<HTMLDivElement>(null)
-  const containerRef = useRef<HTMLDivElement>(null)
+  const sortableTreeRef = useRef<HTMLDivElement>(null)
   const mounted = useMounted()
 
   useEffect(() => {
@@ -63,15 +63,14 @@ export function Sidebar({
   }, [menu])
 
   useEffect(() => {
-    const activeElement = sidebarRef.current?.querySelector('li.active')
-
+    const activeElement = sortableTreeRef.current?.querySelector('li.active')
     if (activeElement && (window.innerWidth > 767 || menu)) {
       const scroll = () => {
         scrollIntoView(activeElement, {
           block: 'center',
           inline: 'center',
           scrollMode: 'always',
-          boundary: containerRef.current,
+          boundary: sidebarRef.current,
         })
       }
       if (menu) {
@@ -93,6 +92,7 @@ export function Sidebar({
     setFocusedItem(null)
     setIsFolding(false)
     setMenu(false)
+    sortableTreeRef.current?.scrollTo({ top: 0, behavior: 'smooth' })
   }, [isFolding])
 
   const hasI18n = config.i18n.length > 0
@@ -136,7 +136,7 @@ export function Sidebar({
             ? 'max-md:[transform:translate3d(0,0,0)]'
             : 'max-md:[transform:translate3d(0,-100%,0)]',
         )}
-        ref={containerRef}
+        ref={sidebarRef}
       >
         <div className="nx-px-4 nx-pt-4 md:nx-hidden">
           {renderComponent(config.search.component, {
@@ -147,7 +147,7 @@ export function Sidebar({
           items={sortableItems}
           onItemsChanged={setSortableItems}
           showSidebar={showSidebar}
-          sidebarRef={sidebarRef}
+          sidebarRef={sortableTreeRef}
         />
         {mounted && window.innerWidth < 768 && (
           <Menu

packages/nextra-editor/src/components/sidebar/sidebar-controller/control-icon.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import { useSidebar } from '@/contexts/sidebar'
 import { NewFolderIcon } from '@/nextra/icons/new-folder'
 import { useUrlSlug } from '@/hooks/use-url-slug'

packages/nextra-editor/src/components/sidebar/sidebar-controller/control-input.tsx

@@ -34,6 +34,8 @@ function ControlInput({ type }: Props): ReactElement {
       setError(`${typeName} 이름에 사용해서는 안 되는 기호가 포함되어 있습니다.`)
     } else if (title === '') {
       setError(`${typeName} 이름을 입력해야 합니다.`)
+    } else if (title.startsWith(' ')) {
+      setError(`${typeName} 이름은 공백으로 시작할 수 없습니다.`)
     } else {
       setError('')
     }
@@ -53,7 +55,12 @@ function ControlInput({ type }: Props): ReactElement {
   }
 
   const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === ' ') {
+    if (e.key === ' ' && title === null) {
+      e.preventDefault()
+      return
+    }
+
+    if (e.key === ' ' && title !== null) {
       e.preventDefault()
       setTitle((title) => `${title} `)
       return