feat: sync scroll, editor & preview area

Author: winverse

packages/markdown-editor/css/editor.css

@@ -1,6 +1,6 @@
-.nextra-editor-container {
+.markdown-editor-container {
   display: none;
   @media (min-width: 1024px) {
-    display: block;
+    display: flex;
   }
 }

packages/markdown-editor/package.json

@@ -92,6 +92,7 @@
     "scroll-into-view-if-needed": "^3.1.0",
     "shiki": "^0.14.3",
     "slash": "3.0.0",
+    "throttle-debounce": "^5.0.0",
     "title": "3.5.3",
     "tsx": "^4.11.2",
     "unist-util-remove": "^4.0.0",
@@ -109,6 +110,7 @@
     "@types/mdast": "3.0.12",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
+    "@types/throttle-debounce": "^5.0.1",
     "@types/title": "^3.4.3",
     "@typescript-eslint/eslint-plugin": "^7.11.0",
     "@typescript-eslint/parser": "^7.11.0",

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

@@ -75,7 +75,7 @@ export function Header({ flatDirectories, items }: NavBarProps): ReactElement {
   const { menu, setMenu } = useMenu()
 
   return (
-    <div className="nextra-header-container nx-w-full">
+    <div className="nextra-header-container nx-flex nx-w-full">
       <div
         className={cn(
           'nextra-header-container-blur',

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

@@ -6,11 +6,10 @@ export const handleKeydown = (event: Event, view: EditorView): void => {
   if (!preview) 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 < 5) {
+  if (lastLine - cursorLine < 15) {
     const previewHeight = preview.scrollHeight ?? 0
     preview.scrollTop = previewHeight
   }

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

@@ -1,13 +1,29 @@
 import { EditorView } from 'codemirror'
+import { throttle } from 'throttle-debounce'
 
-export const handleScroll = (event: Event, view: EditorView): void => {
+export const handleScroll = throttle(100, (event: Event, view: EditorView): void => {
   if (!event.target) return
   const preview = document.getElementById('markdown-editor-preview')
   if (!preview) return
-  // TODO: 비율에 따라서 스크롤 위치를 조정해야함
 
-  if (view.scrollDOM.scrollTop > 100) {
-    const previewHeight = preview.scrollHeight ?? 0
-    preview.scrollTop = previewHeight
+  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 previewScrollHeight = preview.scrollHeight - preview.clientHeight
+  const editorScrollHeight = view.scrollDOM.scrollHeight - view.scrollDOM.clientHeight
+
+  // editor 영역에서 스크롤 비율 구하기
+  const percent = view.scrollDOM.scrollTop / editorScrollHeight
+
+  // preview 영역에 스크롤 위치 설정
+  preview.scrollTop = percent * previewScrollHeight
+})

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

@@ -1,11 +1,13 @@
 import cn from 'clsx'
-import {  useRef } from 'react'
+import { useRef } from 'react'
 import { Toolbar } from './toolbar'
 import { useCodemirror } from '@/hooks'
 
-interface MarkdownEditorProps {}
+interface MarkdownEditorProps {
+  height: string
+}
 
-export const MarkdownEditor = ({}: MarkdownEditorProps) => {
+export const MarkdownEditor = ({ height }: MarkdownEditorProps) => {
   const codemirror = useRef<HTMLDivElement | null>(null)
   const { state, view } = useCodemirror(codemirror, {
     autoFocus: true,
@@ -26,10 +28,7 @@ export const MarkdownEditor = ({}: MarkdownEditorProps) => {
         ref={codemirror}
         suppressHydrationWarning={true}
         suppressContentEditableWarning={true}
-        style={{
-          height:
-            'calc(100vh - (var(--nextra-navbar-height)) - var(--nextra-editor-toolbar-height))',
-        }}
+        style={{ height }}
       />
     </>
   )

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

@@ -5,9 +5,11 @@ import { MDXRemote } from 'next-mdx-remote'
 import { getComponents } from '@/mdx-components'
 import { useMarkdownEditor } from '@/contexts/markdown-editor'
 
-interface MarkdownPreviewProps {}
+interface MarkdownPreviewProps {
+  height: string
+}
 
-export const MarkdownPreview = ({}: MarkdownPreviewProps): ReactElement => {
+export const MarkdownPreview = ({ height }: MarkdownPreviewProps): ReactElement => {
   const config = useConfig()
   const { mdxSource } = useMarkdownEditor()
 
@@ -16,24 +18,27 @@ export const MarkdownPreview = ({}: MarkdownPreviewProps): ReactElement => {
   }
 
   return (
-    <div
-      id="markdown-editor-preview"
-      className={cn(
-        'markdown-editor-preview',
-        'markdown-editor-scrollbar nx-h-screen nx-overflow-y-auto nx-break-words nx-pb-16',
-      )}
-    >
-      <main className="nx-mt-6 nx-w-full nx-min-w-0 nx-max-w-6xl nx-px-6 nx-pb-[8rem] nx-pt-6">
-        <MDXRemote
-          compiledSource={mdxSource.compiledSource}
-          frontmatter={mdxSource.frontmatter}
-          scope={mdxSource.scope}
-          components={getComponents({
-            isRawLayout: false,
-            components: config.components,
-          })}
-        />
-      </main>
-    </div>
+    <>
+      <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 }}
+      >
+        <main className="nx-w-full nx-px-6 ">
+          <MDXRemote
+            compiledSource={mdxSource.compiledSource}
+            frontmatter={mdxSource.frontmatter}
+            scope={mdxSource.scope}
+            components={getComponents({
+              isRawLayout: false,
+              components: config.components,
+            })}
+          />
+        </main>
+      </div>
+    </>
   )
 }

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

@@ -79,6 +79,7 @@ export const useCodemirror = (container: RefObject<HTMLDivElement>, config: Conf
           scrollbarColor: 'oklch(55.55% 0 0 / 40%) transparent',
           scrollbarGutter: 'stable',
           'overflow-x': 'hidden',
+          'scroll-behavior': 'smooth',
         },
         '.cm-heading1': { fontSize: '24px' },
         '.cm-heading2': { fontSize: '20px' },

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

@@ -31,7 +31,7 @@ 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}
@@ -60,14 +60,16 @@ export const Main = ({ frontMatter, headings, pageMap }: MainProps): ReactElemen
             asPopover={false}
             includePlaceholder={themeContext.layout === 'default'}
           />
-          <div className={cn('nx-flex nx-overflow-hidden')} style={{ width: 'calc(100% - 320px)' }}>
-            <div className={cn('nextra-editor-container nx-h-[100%] nx-w-1/2')}>
-              <MarkdownEditor />
+          <main className={cn('markdown-main nx-flex nx-w-full nx-overflow-hidden')}>
+            <div
+              className={cn('markdown-editor-container nx-relative nx-flex nx-w-1/2 nx-flex-col')}
+            >
+              <MarkdownEditor height={height} />
             </div>
-            <div className={cn('nextra-preview-container nx-h-[100%] nx-w-1/2')}>
-              <MarkdownPreview />
+            <div className={cn('markdown-preview-container nx-flex nx-w-1/2')}>
+              <MarkdownPreview height={height} />
             </div>
-          </div>
+          </main>
         </ActiveAnchorProvider>
       </div>
     </div>