feat: sync scroll

Author: winverse

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

@@ -24,7 +24,7 @@ export const MarkdownPreview = forwardRef<HTMLDivElement, MarkdownPreviewProps>(
           '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-pt-6">
+        <main className="nx-mt-6 nx-w-full nx-min-w-0 nx-max-w-6xl nx-px-6 nx-pb-12 nx-pt-6">
           <MDXRemote
             compiledSource={mdxSource.compiledSource}
             frontmatter={mdxSource.frontmatter}

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

@@ -37,10 +37,11 @@ export const Main = ({ frontMatter, headings, pageMap }: MainProps): ReactElemen
   const direction = 'ltr'
   const mainHeight = 'calc(100vh - (var(--nextra-navbar-height)))'
 
-  const previewScrollHandle = useCallback(() => {
-    // const target = event.target as HTMLDivElement
-    // const percent = target.scrollTop / target.scrollHeight
+  const previewScrollHandle = useCallback((event: Event) => {
+    const target = event.target as HTMLDivElement
+    const percent = target.scrollTop / target.scrollHeight
 
+    console.log('percent', percent)
     if (active.current === 'editor' && previewRef.current) {
       const previewHeight = previewRef.current?.scrollHeight || 0
       previewRef.current.scrollTop = previewHeight