feat: sync scorll by preview

Author: winverse

packages/markdown-editor/src/components/markdown-editor/events/handle-scroll.ts

@@ -1,29 +1,32 @@
 import { EditorView } from 'codemirror'
 import { throttle } from 'throttle-debounce'
 
-export const handleScroll = throttle(100, (event: Event, view: EditorView): void => {
-  if (!event.target) return
-  const preview = document.getElementById('markdown-editor-preview')
-  if (!preview) return
+export const handleScroll = throttle(
+  150,
+  (event: Event, view: EditorView, isEditorActive): void => {
+    if (!isEditorActive) return
+    if (!event.target) return
+    const preview = document.getElementById('markdown-editor-preview')
+    if (!preview) return
 
-  if (view.scrollDOM.scrollTop < 200) {
-    preview.scrollTop = 0
-    return
-  }
+    if (view.scrollDOM.scrollTop < 200) {
+      preview.scrollTop = 0
+      return
+    }
 
-  const head = view.state.selection.main.head
-  const cursorLine = view.state.doc.lineAt(head).number
-  const lastLine = view.state.doc.lineAt(view.state.doc.length).number
-  if (lastLine - cursorLine < 15) {
-    return
-  }
+    // const head = view.state.selection.main.head
+    // const cursorLine = view.state.doc.lineAt(head).number
+    // const lastLine = view.state.doc.lineAt(view.state.doc.length).number
 
-  const previewScrollHeight = preview.scrollHeight - preview.clientHeight
-  const editorScrollHeight = view.scrollDOM.scrollHeight - view.scrollDOM.clientHeight
+    // if (lastLine - cursorLine < 5) return
 
-  // editor 영역에서 스크롤 비율 구하기
-  const percent = view.scrollDOM.scrollTop / editorScrollHeight
+    const previewScrollHeight = preview.scrollHeight - preview.clientHeight
+    const editorScrollHeight = view.scrollDOM.scrollHeight - view.scrollDOM.clientHeight
 
-  // preview 영역에 스크롤 위치 설정
-  preview.scrollTop = percent * previewScrollHeight
-})
+    // editor 영역에서 스크롤 비율 구하기
+    const percent = view.scrollDOM.scrollTop / editorScrollHeight
+
+    // preview 영역에 스크롤 위치 설정
+    preview.scrollTop = percent * previewScrollHeight
+  },
+)

packages/markdown-editor/src/components/markdown-editor/markdown-editor.tsx

@@ -3,11 +3,9 @@ import { useRef } from 'react'
 import { Toolbar } from './toolbar'
 import { useCodemirror } from '@/hooks'
 
-interface MarkdownEditorProps {
-  height: string
-}
+interface MarkdownEditorProps {}
 
-export const MarkdownEditor = ({ height }: MarkdownEditorProps) => {
+export const MarkdownEditor = ({}: MarkdownEditorProps) => {
   const codemirror = useRef<HTMLDivElement | null>(null)
   const { state, view } = useCodemirror(codemirror, {
     autoFocus: true,
@@ -23,12 +21,16 @@ export const MarkdownEditor = ({ height }: MarkdownEditorProps) => {
     <>
       <Toolbar state={state} view={view} />
       <div
+        id="markdown-editor-codemirror"
         className={cn('markdown-editor-codemirror')}
         onClick={onClick}
         ref={codemirror}
         suppressHydrationWarning={true}
         suppressContentEditableWarning={true}
-        style={{ height }}
+        style={{
+          height:
+            'calc(100vh - (var(--nextra-navbar-height)) - var(--nextra-editor-toolbar-height))',
+        }}
       />
     </>
   )

packages/markdown-editor/src/components/markdown-preview/markdown-preview.tsx

@@ -1,32 +1,75 @@
 import cn from 'clsx'
 import { useConfig } from '@/contexts'
-import { type ReactElement } from 'react'
+import { useEffect, useRef, useState, type ReactElement } from 'react'
 import { MDXRemote } from 'next-mdx-remote'
 import { getComponents } from '@/mdx-components'
 import { useMarkdownEditor } from '@/contexts/markdown-editor'
+import { throttle } from 'throttle-debounce'
 
-interface MarkdownPreviewProps {
-  height: string
-}
+interface MarkdownPreviewProps {}
 
-export const MarkdownPreview = ({ height }: MarkdownPreviewProps): ReactElement => {
+export const MarkdownPreview = ({}: MarkdownPreviewProps): ReactElement => {
   const config = useConfig()
-  const { mdxSource } = useMarkdownEditor()
 
-  if (!mdxSource) {
-    return <div>Mdx source Loading...</div>
-  }
+  const { mdxSource, setActive, active } = useMarkdownEditor()
+  const preview = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const onScroll = throttle(150, (event: Event) => {
+      if (active !== 'preview') return
+      if (!preview.current) return
+      if (!event.target) return
+
+      const editor = document.querySelector('.cm-scroller')
+      if (!editor) return
+
+      const editorScrollHeight = editor.scrollHeight - editor.clientHeight
+      const previewScrollHeight = preview.current.scrollHeight - preview.current.clientHeight
+      const percent = preview.current.scrollTop / previewScrollHeight
+      editor.scrollTop = percent * editorScrollHeight
+    })
+
+    if (!preview.current) return
+    preview.current.addEventListener('scroll', onScroll)
+
+    return () => {
+      if (!preview.current) return
+      preview.current.removeEventListener('scroll', onScroll)
+    }
+  }, [preview.current, active])
+
+  const onMouseOver = throttle(200, () => {
+    setActive('preview')
+  })
+
+  const onMouseLeave = throttle(200, () => {
+    setActive('editor')
+  })
+
+  useEffect(() => {
+    if (!preview.current) return
+    preview.current.addEventListener('mouseover', onMouseOver)
+    preview.current.addEventListener('mouseleave', onMouseLeave)
+
+    return () => {
+      if (!preview.current) return
+      preview.current.removeEventListener('mouseover', onMouseOver)
+      preview.current.removeEventListener('mouseleave', onMouseLeave)
+    }
+  }, [preview.current])
 
   return (
-    <>
-      <div
-        id="markdown-editor-preview"
-        className={cn(
-          'markdown-editor-preview',
-          'markdown-editor-scrollbar nx-h-screen nx-overflow-y-auto nx-scroll-smooth nx-break-words',
-        )}
-        style={{ height }}
-      >
+    <div
+      ref={preview}
+      id="markdown-editor-preview"
+      className={cn(
+        'markdown-editor-preview',
+        'markdown-editor-scrollbar nx-h-screen nx-overflow-y-auto nx-scroll-smooth nx-break-words',
+      )}
+      style={{ height: '100%', paddingBottom: '10rem' }}
+    >
+      {!mdxSource && <div>Mdx source Loading...</div>}
+      {mdxSource && (
         <main className="nx-w-full nx-px-6 ">
           <MDXRemote
             compiledSource={mdxSource.compiledSource}
@@ -38,7 +81,7 @@ export const MarkdownPreview = ({ height }: MarkdownPreviewProps): ReactElement
             })}
           />
         </main>
-      </div>
-    </>
+      )}
+    </div>
   )
 }

packages/markdown-editor/src/contexts/markdown-editor.tsx

@@ -11,6 +11,8 @@ type MarkdownEditorContext = {
   setMdxSource: (value: MDXRemoteSerializeResult | null) => void
   stat: Statistics | null
   setStat: (value: Statistics) => void
+  active: 'editor' | 'preview'
+  setActive: (value: 'editor' | 'preview') => void
 }
 
 const MarkdownEditorConext = createContext<MarkdownEditorContext>({
@@ -20,6 +22,8 @@ const MarkdownEditorConext = createContext<MarkdownEditorContext>({
   setMdxSource: () => {},
   stat: null,
   setStat: () => {},
+  active: 'editor',
+  setActive: () => {},
 })
 
 export function useMarkdownEditor() {
@@ -38,6 +42,7 @@ export const MarkdownEditorProvider = ({ children, value: { editorValue } }: Pro
   const [isError, setIsError] = useState<boolean>(false)
   const [mdxSource, setMdxSource] = useState<MDXRemoteSerializeResult | null>(null)
   const [stat, setStat] = useState<Statistics | null>(null)
+  const [active, setActive] = useState<'editor' | 'preview'>('editor')
 
   useEffect(() => {
     setValue(editorValue)
@@ -74,6 +79,8 @@ export const MarkdownEditorProvider = ({ children, value: { editorValue } }: Pro
     setMdxSource,
     stat,
     setStat,
+    active,
+    setActive,
   }
 
   return <MarkdownEditorConext.Provider value={context}>{children}</MarkdownEditorConext.Provider>

packages/markdown-editor/src/hooks/use-codemirror.ts

@@ -30,7 +30,7 @@ const External = Annotation.define<boolean>()
 
 export const useCodemirror = (container: RefObject<HTMLDivElement>, config: Config = {}) => {
   const { theme: currentTheme } = useTheme()
-  const { value, setValue, setStat } = useMarkdownEditor()
+  const { value, setValue, setStat, active } = useMarkdownEditor()
   const [state, setState] = useState<EditorState | null>(null)
   const [view, setView] = useState<EditorView | null>(null)
 
@@ -51,10 +51,10 @@ export const useCodemirror = (container: RefObject<HTMLDivElement>, config: Conf
       EditorView.domEventHandlers({
         paste: (event, view) => handlePaste(event, view, upload),
         drop: (event, view) => handleDrop(event, view, upload),
-        scroll: handleScroll,
+        scroll: (event, view) => handleScroll(event, view, active === 'editor'),
         keydown: handleKeydown,
       }),
-    [upload],
+    [upload, active],
   )
 
   const defaultThemeOption = useMemo(

packages/markdown-editor/src/layouts/main.tsx

@@ -31,7 +31,6 @@ export const Main = ({ frontMatter, headings, pageMap }: MainProps): ReactElemen
   const themeContext = { ...activeThemeContext, ...frontMatter }
   const direction = 'ltr'
   const mainHeight = 'calc(100vh - (var(--nextra-navbar-height)))'
-  const height = 'calc(100vh - (var(--nextra-navbar-height)) - var(--nextra-editor-toolbar-height))'
   return (
     <div
       dir={direction}
@@ -64,10 +63,10 @@ export const Main = ({ frontMatter, headings, pageMap }: MainProps): ReactElemen
             <div
               className={cn('markdown-editor-container nx-relative nx-flex nx-w-1/2 nx-flex-col')}
             >
-              <MarkdownEditor height={height} />
+              <MarkdownEditor  />
             </div>
             <div className={cn('markdown-preview-container nx-flex nx-w-1/2')}>
-              <MarkdownPreview height={height} />
+              <MarkdownPreview />
             </div>
           </main>
         </ActiveAnchorProvider>