feat: sync scroll

Author: winverse

packages/markdown-editor/css/nextra/scrollbar.css

@@ -1,10 +1,10 @@
-.nextra-scrollbar {
+.markdown-editor-scrollbar {
   scrollbar-width: thin; /* Firefox */
   scrollbar-color: oklch(55.55% 0 0 / 40%) transparent; /* Firefox */
 
   scrollbar-gutter: stable;
   &::-webkit-scrollbar {
-    @apply nx-w-3 nx-h-3;
+    @apply nx-h-3 nx-w-3;
   }
   &::-webkit-scrollbar-track {
     @apply nx-bg-transparent;

packages/markdown-editor/css/styles.css

@@ -59,7 +59,7 @@ summary {
     contain: layout style;
     backface-visibility: hidden;
 
-    & > .nextra-scrollbar {
+    & > .markdown-editor-scrollbar {
       mask-image: linear-gradient(to bottom, transparent, #000 20px),
         linear-gradient(to left, #000 10px, transparent 10px);
     }

packages/markdown-editor/package.json

@@ -58,6 +58,7 @@
     "@theguild/remark-mermaid": "0.0.6",
     "@theguild/remark-npm2yarn": "0.2.0",
     "@uiw/codemirror-extensions-basic-setup": "^4.22.1",
+    "@uiw/codemirror-extensions-events": "^4.23.0",
     "@uiw/codemirror-extensions-hyper-link": "^4.22.1",
     "@uiw/codemirror-themes": "^4.22.1",
     "@uiw/codemirror-themes-all": "^4.22.1",

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

@@ -53,6 +53,7 @@ export function Head(): ReactElement {
           --nextra-navbar-height: 4rem;
           --nextra-menu-height: 3.75rem;
           --nextra-banner-height: 2.5rem;
+          --nextra-editor-toolbar-height: 3rem;
         }
         
         .dark {

packages/markdown-editor/src/components/markdown-editor/hooks/useCodemirror.ts

@@ -1,8 +1,8 @@
 import { getDefaultExtensions } from './../lib/getDefaultExtensions'
-import { Annotation, EditorState, StateEffect } from '@codemirror/state'
+import { Annotation, EditorState, Extension, StateEffect } from '@codemirror/state'
 import { EditorView, ViewUpdate } from '@codemirror/view'
 import { useTheme } from 'next-themes'
-import { ForwardedRef, RefObject, useEffect, useState } from 'react'
+import { RefObject, useEffect, useState } from 'react'
 import { useMarkdownEditor } from '../../../contexts/markdown-editor'
 import { getEditorStat } from '../lib/getEditorStat'
 import { hyperLink } from '@uiw/codemirror-extensions-hyper-link'
@@ -20,11 +20,12 @@ type Config = {
   width?: string | null
   minWidth?: string | null
   maxWidth?: string | null
+  extension?: Extension[]
 }
 
 const External = Annotation.define<boolean>()
 
-export const useCodemirror = (container: ForwardedRef<HTMLDivElement>, config: Config = {}) => {
+export const useCodemirror = (container: RefObject<HTMLDivElement>, config: Config = {}) => {
   const { theme: currentTheme } = useTheme()
   const { value, setValue, setStat } = useMarkdownEditor()
   const [state, setState] = useState<EditorState | null>(null)
@@ -38,6 +39,7 @@ export const useCodemirror = (container: ForwardedRef<HTMLDivElement>, config: C
     width = null,
     minWidth = null,
     maxWidth = null,
+    extension = [],
   } = config
 
   const eventHandlers = EditorView.domEventHandlers({
@@ -56,7 +58,7 @@ export const useCodemirror = (container: ForwardedRef<HTMLDivElement>, config: C
       maxWidth,
     },
     '& .cm-editor': {
-      // height: '100%',
+      height: '100%',
     },
     '& .cm-scroller': {
       width: '100%',
@@ -98,6 +100,7 @@ export const useCodemirror = (container: ForwardedRef<HTMLDivElement>, config: C
     defaultThemeOption,
     eventHandlers,
     ...defaultExtensions,
+    ...extension,
   ]
 
   // create state

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

@@ -1,35 +1,57 @@
-import { forwardRef, useEffect } from 'react'
+import cn from 'clsx'
+import { forwardRef, useEffect, useRef } from 'react'
 import { useCodemirror } from './hooks/useCodemirror'
 import { Toolbar } from './toolbar'
+import { ReactCodeMirrorRef } from '@/types'
+import { Extension } from '@codemirror/state'
 
-export const MarkdownEditor = forwardRef<HTMLDivElement>(({}, container) => {
-  const containerHeight = 'calc(100vh - (var(--nextra-navbar-height)))'
-  const { state, view } = useCodemirror(container, {
-    autoFocus: true,
-    minHeight: '100%',
-    maxHeight: '100%',
-  })
+interface MarkdownEditorProps {
+  codeMirrorExtensions?: Extension[]
+}
 
-  const onClick = () => {
-    console.log('clicked!')
-    view?.focus()
-  }
+export const MarkdownEditor = forwardRef<ReactCodeMirrorRef, MarkdownEditorProps>(
+  ({ codeMirrorExtensions = [] }, editorRef) => {
+    const codemirror = useRef<HTMLDivElement | null>(null)
+    const { state, view } = useCodemirror(codemirror, {
+      autoFocus: true,
+      minHeight: '100%',
+      maxHeight: '100%',
+      extension: codeMirrorExtensions,
+    })
 
-  useEffect(() => {
-    onClick()
-  }, [])
+    useEffect(() => {
+      if (!codemirror.current) return
+      if (!view || !state) return
+      if (typeof editorRef === 'function') {
+        editorRef({ editor: codemirror.current, view, state })
+      } else if (editorRef && 'current' in editorRef) {
+        editorRef.current = {
+          editor: codemirror.current,
+          view,
+          state,
+        }
+      }
+    }, [editorRef, view, state])
 
-  return (
-    <>
-      <Toolbar state={state} view={view} />
-      <div onClick={onClick}>
+    const onClick = () => {
+      view?.focus()
+    }
+
+    return (
+      <>
+        <Toolbar state={state} view={view} />
         <div
-          ref={container}
-          style={{ height: containerHeight }}
+          className={cn('markdown-editor-codemirror')}
+          onClick={onClick}
+          ref={codemirror}
           suppressHydrationWarning={true}
           suppressContentEditableWarning={true}
+          style={{
+            height:
+              'calc(100vh - (var(--nextra-navbar-height)) - var(--nextra-editor-toolbar-height))',
+          }}
         />
-      </div>
-    </>
-  )
-})
+      </>
+    )
+  },
+)

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

@@ -114,7 +114,7 @@ export const Toolbar = ({ state, view }: Props) => {
   }
 
   return (
-    <div className={cn('nx-flex nx-flex-row nx-items-center')}>
+    <div className={cn('markdown-editor-toolbar nx-flex nx-flex-row nx-items-center')}>
       {commands.map((command, index) => {
         const key = `${command.name}-${index}`
         if (!isValidElement(command.icon)) {

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

@@ -8,7 +8,7 @@ import { useMarkdownEditor } from '@/contexts/markdown-editor'
 interface MarkdownPreviewProps {}
 
 export const MarkdownPreview = forwardRef<HTMLDivElement, MarkdownPreviewProps>(
-  ({}, ref): ReactElement => {
+  (props, ref): ReactElement => {
     const config = useConfig()
     const { mdxSource } = useMarkdownEditor()
 
@@ -20,7 +20,8 @@ export const MarkdownPreview = forwardRef<HTMLDivElement, MarkdownPreviewProps>(
       <div
         ref={ref}
         className={cn(
-          'nextra-scrollbar nx-h-screen nx-overflow-y-auto nx-break-words nx-pb-16',
+          '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-pt-6">

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

@@ -223,7 +223,7 @@ export function Search({
       >
         <ul
           className={cn(
-            'nextra-scrollbar',
+            'markdown-editor-scrollbar',
             // Using bg-white as background-color when the browser didn't support backdrop-filter
             'nx-border nx-border-gray-200 nx-bg-white nx-text-gray-100 dark:nx-border-neutral-800 dark:nx-bg-neutral-900',
             'nx-absolute nx-top-full nx-z-20 nx-mt-2 nx-overflow-auto nx-overscroll-contain nx-rounded-xl nx-py-2.5 nx-shadow-xl',

packages/markdown-editor/src/components/sidebar/sortable-tree/sortable-tree.tsx

@@ -308,7 +308,7 @@ export function SortableTree({ items, sidebarRef, showSidebar, onItemsChanged }:
               'nx-overflow-y-auto',
               'nx-grow nx-px-4 md:nx-h-[calc(100vh-var(--nextra-navbar-height)-var(--nextra-menu-height))]',
               'nx-pb-4',
-              showSidebar ? 'nextra-scrollbar' : 'no-scrollbar',
+              showSidebar ? 'markdown-editor-scrollbar' : 'no-scrollbar',
             )}
             ref={sidebarRef}
           >

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

@@ -51,7 +51,7 @@ export function TOC({ headings, filePath }: TOCProps): ReactElement {
     <div
       ref={tocRef}
       className={cn(
-        'nextra-scrollbar nx-sticky nx-top-16 nx-overflow-y-auto nx-pr-4 nx-pt-6 nx-text-sm [hyphens:auto]',
+        'markdown-editor-scrollbar nx-sticky nx-top-16 nx-overflow-y-auto nx-pr-4 nx-pt-6 nx-text-sm [hyphens:auto]',
         'nx-max-h-[calc(100vh-var(--nextra-navbar-height)-env(safe-area-inset-bottom))] ltr:-nx-mr-4 rtl:-nx-ml-4',
       )}
     >

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

@@ -4,31 +4,32 @@ import { ActiveAnchorProvider } from '@/contexts'
 import { useFSRoute } from '@/nextra/hooks'
 import { normalizePages } from '@/nextra/normalize-pages'
 import type { PageOpts } from '@/nextra/types'
-import { useEffect, useMemo, useRef, useState, type ReactElement, type ReactNode } from 'react'
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from 'react'
 import { Banner, Head, Header, Sidebar } from '@/components'
 import { MarkdownPreview } from '@/components/markdown-preview'
 import { MarkdownEditor } from '@/components/markdown-editor'
+import { useMarkdownEditor } from '@/contexts/markdown-editor'
+import { ReactCodeMirrorRef } from '@/types'
+import * as events from '@uiw/codemirror-extensions-events'
 
 type MainProps = PageOpts & {
   children: ReactNode
 }
 
 export const Main = ({ frontMatter, headings, pageMap }: MainProps): ReactElement => {
   const fsPath = useFSRoute()
-  const editorRef = useRef<HTMLDivElement>(null)
+  const { mdxSource } = useMarkdownEditor()
+  const editorRef = useRef<ReactCodeMirrorRef>(null)
   const previewRef = useRef<HTMLDivElement>(null)
-
-  const rerender = useState({})[1]
-
-  useEffect(() => {
-    const trigger = () => rerender({})
-    trigger()
-  }, [])
-
-  useEffect(() => {
-    console.log('editorRef:', editorRef)
-    console.log('previewRef:', previewRef)
-  }, [editorRef, previewRef])
+  const active = useRef<'editor' | 'preview'>('editor')
 
   const { activeThemeContext, docsDirectories, flatDirectories, directories, topLevelNavbarItems } =
     useMemo(
@@ -46,6 +47,48 @@ export const Main = ({ frontMatter, headings, pageMap }: MainProps): ReactElemen
   const direction = 'ltr'
   const mainHeight = 'calc(100vh - (var(--nextra-navbar-height)))'
 
+  const previewScrollHandle = useCallback((event: Event) => {
+    const target = event.target as HTMLDivElement
+
+    const percent = target.scrollTop / target.scrollHeight
+
+    console.log('percent', percent)
+    console.log('active.current', active.current)
+
+    if (active.current === 'editor' && previewRef.current) {
+      const previewHeight = previewRef.current?.scrollHeight || 0
+      previewRef.current.scrollTop = previewHeight
+    }
+    // else if (editorRef.current && editorRef.current.view) {
+    //   const editorScrollDom = editorRef.current.view.scrollDOM
+    //   const editorScrollHeihgt = editorRef.current.view.scrollDOM.scrollHeight || 0
+    //   editorScrollDom.scrollTop = editorScrollHeihgt * percent
+    // }
+  }, [])
+
+  const mouseoverHandle = () => (active.current = 'preview')
+  const mouseleaveHandle = () => (active.current = 'editor')
+  useEffect(() => {
+    const $preview = previewRef.current
+    if ($preview) {
+      console.log('add event listener')
+      $preview.addEventListener('mouseover', mouseoverHandle, false)
+      $preview.addEventListener('mouseleave', mouseleaveHandle, false)
+      $preview.addEventListener('scroll', previewScrollHandle, false)
+    }
+    return () => {
+      if ($preview) {
+        $preview.removeEventListener('mouseover', mouseoverHandle)
+        $preview.removeEventListener('mouseleave', mouseoverHandle)
+        $preview.addEventListener('mouseleave', previewScrollHandle, false)
+      }
+    }
+  }, [previewRef, previewScrollHandle])
+
+  const scrollExtensions = events.scroll({
+    scroll: previewScrollHandle,
+  })
+
   return (
     <div
       dir={direction}
@@ -75,10 +118,10 @@ export const Main = ({ frontMatter, headings, pageMap }: MainProps): ReactElemen
             includePlaceholder={themeContext.layout === 'default'}
           />
           <div className={cn('nx-flex nx-overflow-hidden')} style={{ width: 'calc(100% - 320px)' }}>
-            <div className={cn('nextra-editor-container nx-w-1/2')}>
-              <MarkdownEditor ref={editorRef} />
+            <div className={cn('nextra-editor-container nx-h-[100%] nx-w-1/2')}>
+              <MarkdownEditor ref={editorRef} codeMirrorExtensions={[scrollExtensions]} />
             </div>
-            <div className={cn('nextra-preview-container nx-w-1/2')}>
+            <div className={cn('nextra-preview-container nx-h-[100%] nx-w-1/2')}>
               <MarkdownPreview ref={previewRef} />
             </div>
           </div>

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

@@ -224,7 +224,7 @@ export const getComponents = ({
     ),
     a: Link,
     table: (props) => (
-      <Table className="nextra-scrollbar nx-mt-6 nx-p-0 first:nx-mt-0" {...props} />
+      <Table className="markdown-editor-scrollbar nx-mt-6 nx-p-0 first:nx-mt-0" {...props} />
     ),
     p: (props) => <p className="nx-mt-6 nx-leading-7 first:nx-mt-0" {...props} />,
     tr: Tr,

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

@@ -78,7 +78,7 @@ function _Tabs({
       defaultIndex={defaultIndex}
       onChange={handleChange}
     >
-      <div className="nextra-scrollbar nx-overflow-x-auto nx-overflow-y-hidden nx-overscroll-x-contain">
+      <div className="markdown-editor-scrollbar nx-overflow-x-auto nx-overflow-y-hidden nx-overscroll-x-contain">
         <HeadlessTab.List className="nx-mt-4 nx-flex nx-w-max nx-min-w-full nx-border-b nx-border-gray-200 nx-pb-px dark:nx-border-neutral-800">
           {items.map((item, index) => {
             const disabled = isTabObjectItem(item) && item.disabled

packages/markdown-editor/src/types.ts

@@ -4,6 +4,8 @@ import type { DocsThemeConfig } from './constants'
 import type { ProcessorOptions } from '@mdx-js/mdx'
 import type { UniqueIdentifier } from '@dnd-kit/core'
 import type { PageItem, SortableItem } from './nextra/normalize-pages'
+import type { EditorState } from '@codemirror/state'
+import type { EditorView } from 'codemirror'
 
 export type Context = {
   pageOpts: PageOpts
@@ -163,3 +165,9 @@ export type ItemChangedReason<T = PageItem> =
        */
       item: TreeItem<T>
     }
+
+export interface ReactCodeMirrorRef {
+  editor?: HTMLDivElement | null
+  state?: EditorState
+  view?: EditorView
+}

packages/markdown-editor/style.css

@@ -1,7 +1,7 @@
 import { defineConfig } from 'tsup'
 
 export default defineConfig({
-  name: 'nextra-editor',
+  name: 'markdown-editor',
   entry: ['src/index.tsx'],
   format: 'esm',
   dts: true,