fix: Blinking in editor

Author: winverse

packages/markdown-editor/css/styles.css

@@ -164,6 +164,11 @@ input[type='search'] {
   font-family: initial;
 }
 
+.markdown-editor-codemirror {
+  transition: none;
+  will-change: auto;
+}
+
 @keyframes nextra-fadein {
   0% {
     opacity: 0;

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

@@ -1,5 +1,5 @@
 import { getDefaultExtensions } from './../lib/getDefaultExtensions'
-import { Annotation, EditorState, Extension, StateEffect } from '@codemirror/state'
+import { Annotation, EditorState, Extension } from '@codemirror/state'
 import { EditorView, ViewUpdate } from '@codemirror/view'
 import { useTheme } from 'next-themes'
 import { RefObject, useEffect, useState } from 'react'
@@ -150,7 +150,7 @@ export const useCodemirror = (container: RefObject<HTMLDivElement>, config: Conf
 
   useEffect(() => {
     if (!view) return
-    view.dispatch({ effects: StateEffect.reconfigure.of(extenstions) })
+    // view.dispatch({ effects: StateEffect.reconfigure.of(extenstions) })
   }, [container, config, extenstions])
 
   useEffect(() => {

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

@@ -91,7 +91,6 @@ export const getDefaultExtensions = (options: ExtensionOptions) => {
       { tag: tags.heading4, class: 'cm-heading4' },
       { tag: tags.heading5, class: 'cm-heading5' },
     ])
-
     getExtensions.push(syntaxHighlighting(headHighlightStyle))
   }
 

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

@@ -1,7 +1,5 @@
 import cn from 'clsx'
 
-const ToolbarSeparator = () => {
+export const ToolbarSeparator = () => {
   return <div className={cn('nx-w- items-center nx-flex  nx-w-1.5 nx-justify-center')}>|</div>
 }
-
-export default ToolbarSeparator

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

@@ -1,10 +1,10 @@
 import cn from 'clsx'
-import { isValidElement, RefObject, useEffect, useState } from 'react'
+import { isValidElement, useEffect, useState } from 'react'
 import { titles, bold, italic, strike, quote, link, image, code, save } from './commands'
 import { ToolbarCommand } from './commands/type'
 import { EditorSelection, EditorState } from '@codemirror/state'
 import { EditorView } from '@codemirror/view'
-import ToolbarSeparator from './toolbar-separator'
+import { ToolbarSeparator } from './toolbar-separator'
 import useClickImage from '@/hooks/use-click-img'
 import { useUpload } from '@/hooks/use-upload'
 

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

@@ -4,19 +4,10 @@ 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,
-  useState,
-  type ReactElement,
-  type ReactNode,
-} from 'react'
+import { useCallback, useEffect, useMemo, useRef, 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'
 
@@ -26,7 +17,6 @@ type MainProps = PageOpts & {
 
 export const Main = ({ frontMatter, headings, pageMap }: MainProps): ReactElement => {
   const fsPath = useFSRoute()
-  const { mdxSource } = useMarkdownEditor()
   const editorRef = useRef<ReactCodeMirrorRef>(null)
   const previewRef = useRef<HTMLDivElement>(null)
   const active = useRef<'editor' | 'preview'>('editor')
@@ -47,13 +37,9 @@ 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)
+  const previewScrollHandle = useCallback(() => {
+    // const target = event.target as HTMLDivElement
+    // const percent = target.scrollTop / target.scrollHeight
 
     if (active.current === 'editor' && previewRef.current) {
       const previewHeight = previewRef.current?.scrollHeight || 0