WIP: sync scroll

Author: winverse

packages/markdown-editor/package.json

@@ -58,7 +58,6 @@
     "@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/markdown-editor/events/drop.ts renamed to packages/markdown-editor/src/components/markdown-editor/events/handle-drop.ts

@@ -0,0 +1,17 @@
+import { EditorView } from 'codemirror'
+
+export const handleKeydown = (event: Event, view: EditorView): void => {
+  // handle preview scroll
+  const preview = document.getElementById('markdown-editor-preview')
+  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) {
+    const previewHeight = preview.scrollHeight ?? 0
+    preview.scrollTop = previewHeight
+  }
+}

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

@@ -0,0 +1,13 @@
+import { EditorView } from 'codemirror'
+
+export const handleScroll = (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
+  }
+}

packages/markdown-editor/src/components/markdown-editor/events/paste.ts renamed to packages/markdown-editor/src/components/markdown-editor/events/handle-paste.ts

@@ -0,0 +1,4 @@
+export { handleDrop } from './handle-drop'
+export { handlePaste } from './handle-paste'
+export { handleScroll } from './handle-scroll'
+export { handleKeydown } from './handle-keydown'

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

@@ -3,7 +3,7 @@ import { EditorView, keymap, placeholder } from '@codemirror/view'
 import { indentWithTab } from '@codemirror/commands'
 import { tags } from '@lezer/highlight'
 import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
-import { darkTheme, lightTheme } from './theme'
+import { darkTheme, lightTheme } from './editor-theme'
 import { basicSetup, type BasicSetupOptions } from '@uiw/codemirror-extensions-basic-setup'
 import { codeKeymap } from '../toolbar/commands/code'
 import { boldKeymap } from '../toolbar/commands/bold'

packages/markdown-editor/src/components/markdown-editor/events/index.ts

@@ -0,0 +1,3 @@
+export { lightTheme, darkTheme } from './editor-theme'
+export { getDefaultExtensions } from './get-default-extensions'
+export { getEditorStat } from './get-editor-stat'

packages/markdown-editor/src/components/markdown-editor/lib/theme.ts renamed to packages/markdown-editor/src/components/markdown-editor/lib/editor-theme.ts

@@ -1,58 +1,36 @@
 import cn from 'clsx'
-import { forwardRef, useEffect, useRef } from 'react'
-
+import {  useRef } from 'react'
 import { Toolbar } from './toolbar'
-import { ReactCodeMirrorRef } from '@/types'
-import { Extension } from '@codemirror/state'
 import { useCodemirror } from '@/hooks'
 
-interface MarkdownEditorProps {
-  codeMirrorExtensions?: Extension[]
-}
-
-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,
-    })
+interface MarkdownEditorProps {}
 
-    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])
+export const MarkdownEditor = ({}: MarkdownEditorProps) => {
+  const codemirror = useRef<HTMLDivElement | null>(null)
+  const { state, view } = useCodemirror(codemirror, {
+    autoFocus: true,
+    minHeight: '100%',
+    maxHeight: '100%',
+  })
 
-    const onClick = () => {
-      view?.focus()
-    }
+  const onClick = () => {
+    view?.focus()
+  }
 
-    return (
-      <>
-        <Toolbar state={state} view={view} />
-        <div
-          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))',
-          }}
-        />
-      </>
-    )
-  },
-)
+  return (
+    <>
+      <Toolbar state={state} view={view} />
+      <div
+        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))',
+        }}
+      />
+    </>
+  )
+}

packages/markdown-editor/src/components/markdown-editor/lib/getDefaultExtensions.ts renamed to packages/markdown-editor/src/components/markdown-editor/lib/get-default-extensions.ts

@@ -1,41 +1,39 @@
 import cn from 'clsx'
 import { useConfig } from '@/contexts'
-import { forwardRef, type ReactElement } from 'react'
+import { type ReactElement } from 'react'
 import { MDXRemote } from 'next-mdx-remote'
 import { getComponents } from '@/mdx-components'
 import { useMarkdownEditor } from '@/contexts/markdown-editor'
 
 interface MarkdownPreviewProps {}
 
-export const MarkdownPreview = forwardRef<HTMLDivElement, MarkdownPreviewProps>(
-  (props, ref): ReactElement => {
-    const config = useConfig()
-    const { mdxSource } = useMarkdownEditor()
+export const MarkdownPreview = ({}: MarkdownPreviewProps): ReactElement => {
+  const config = useConfig()
+  const { mdxSource } = useMarkdownEditor()
 
-    if (!mdxSource) {
-      return <div>Mdx source Loading...</div>
-    }
+  if (!mdxSource) {
+    return <div>Mdx source Loading...</div>
+  }
 
-    return (
-      <div
-        ref={ref}
-        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>
-    )
-  },
-)
+  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>
+  )
+}

packages/markdown-editor/src/components/markdown-editor/lib/getEditorStat.ts renamed to packages/markdown-editor/src/components/markdown-editor/lib/get-editor-stat.ts

@@ -1,7 +1,7 @@
 import { MDXRemoteSerializeResult } from 'next-mdx-remote'
 import React, { createContext, useContext, useEffect, useState } from 'react'
 import { mdxCompiler } from '../mdx-compiler'
-import { Statistics } from '../components/markdown-editor/lib/getEditorStat'
+import { Statistics } from '../components/markdown-editor/lib/get-editor-stat'
 import { ViewUpdate } from '@codemirror/view'
 
 type MarkdownEditorContext = {

packages/markdown-editor/src/components/markdown-editor/lib/index.ts

@@ -1,17 +1,19 @@
-import { getDefaultExtensions } from '../components/markdown-editor/lib/getDefaultExtensions'
+import { getDefaultExtensions, getEditorStat } from '../components/markdown-editor/lib'
 import { Annotation, EditorState, Extension, StateEffect } from '@codemirror/state'
 import { EditorView, ViewUpdate } from '@codemirror/view'
 import { useTheme } from 'next-themes'
 import { RefObject, useEffect, useMemo, useState } from 'react'
 import { useMarkdownEditor } from '../contexts/markdown-editor'
-import { getEditorStat } from '../components/markdown-editor/lib/getEditorStat'
 import { hyperLink } from '@uiw/codemirror-extensions-hyper-link'
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown'
 import { languages } from '@codemirror/language-data'
-import { handlePaste } from '../components/markdown-editor/events/paste'
-
-import { handleDrop } from '../components/markdown-editor/events/drop'
 import { useUpload } from './use-upload'
+import {
+  handlePaste,
+  handleDrop,
+  handleScroll,
+  handleKeydown,
+} from '@/components/markdown-editor/events'
 
 type Config = {
   autoFocus?: boolean
@@ -49,6 +51,8 @@ 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,
+        keydown: handleKeydown,
       }),
     [upload],
   )

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

@@ -4,26 +4,17 @@ import { ActiveAnchorProvider } from '@/contexts'
 import { useFSRoute } from '@/nextra/hooks'
 import { normalizePages } from '@/nextra/normalize-pages'
 import type { PageOpts } from '@/nextra/types'
-import { useCallback, useEffect, useMemo, useRef, type ReactElement, type ReactNode } from 'react'
+import { useMemo, 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 { 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<ReactCodeMirrorRef>(null)
-  const previewRef = useRef<HTMLDivElement>(null)
-  const active = useRef<'editor' | 'preview'>('editor')
-
-  useEffect(() => {
-    console.log('editorRef', editorRef)
-  }, [editorRef])
 
   const { activeThemeContext, docsDirectories, flatDirectories, directories, topLevelNavbarItems } =
     useMemo(
@@ -41,50 +32,6 @@ export const Main = ({ frontMatter, headings, pageMap }: MainProps): ReactElemen
   const direction = 'ltr'
   const mainHeight = 'calc(100vh - (var(--nextra-navbar-height)))'
 
-  const onPreviewScroll = useCallback((event: Event) => {
-    // const target = event.target as HTMLDivElement
-    // const percent = target.scrollTop / target.scrollHeight
-
-    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 onMouseOver = () => {
-    console.log('onMouseOver')
-    active.current = 'preview'
-  }
-  const onMouseLeave = () => {
-    console.log('onMouseLeave')
-    active.current = 'editor'
-  }
-
-  useEffect(() => {
-    const $preview = previewRef.current
-    if (!$preview) return
-    console.log('previewRef', $preview)
-    console.log('add event listener')
-    $preview.addEventListener('mouseover', onMouseOver)
-    $preview.addEventListener('mouseleave', onMouseLeave)
-    $preview.addEventListener('scroll', onPreviewScroll)
-
-    return () => {
-      $preview.removeEventListener('mouseover', onMouseOver)
-      $preview.removeEventListener('mouseleave', onMouseLeave)
-      $preview.addEventListener('scroll', onPreviewScroll)
-    }
-  }, [previewRef, onPreviewScroll])
-
-  const scrollExtensions = events.scroll({
-    scroll: onPreviewScroll,
-  })
-
   return (
     <div
       dir={direction}
@@ -115,10 +62,10 @@ export const Main = ({ frontMatter, headings, pageMap }: MainProps): ReactElemen
           />
           <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 ref={editorRef} codeMirrorExtensions={[scrollExtensions]} />
+              <MarkdownEditor />
             </div>
             <div className={cn('nextra-preview-container nx-h-[100%] nx-w-1/2')}>
-              <MarkdownPreview ref={previewRef} />
+              <MarkdownPreview />
             </div>
           </div>
         </ActiveAnchorProvider>