Fix flickering when switch file

package.json

@@ -23,6 +23,7 @@
     "build:local": "electron-vite build"
   },
   "dependencies": {
+    "@codemirror/commands": "^6.8.1",
     "@codemirror/lang-markdown": "^6.3.2",
     "@codemirror/language-data": "^6.5.1",
     "@codemirror/state": "^6.5.2",

src/renderer/src/App.tsx

@@ -15,6 +15,7 @@ export default function App(): JSX.Element {
   const [focus, setFocus] = useState<FocusTarget>('fileList')
   const [currentListItem, setCurrentListItem] = useState<string | null>(null)
   const [current, setCurrent] = useState<string | null>(null)
+  const [editorExtensions, setEditorExtensions] = useState([])
 
   const toggleFocus = (value): void => {
     if (value === focus) {
@@ -36,7 +37,9 @@ export default function App(): JSX.Element {
           isVisible: isEditorVisible,
           setIsVisible: setIsEditorVisible,
           current,
-          setCurrent
+          setCurrent,
+          setEditorExtensions,
+          editorExtensions
         }}
       >
         <FocusContext.Provider

src/renderer/src/components/BodyField.tsx

@@ -23,7 +23,7 @@ interface Props {
 window.EditContext = false
 
 export default function BodyField({ value, onChange, onKeyDownCapture }: Props): JSX.Element {
-  const { bodyEditor, isVisible } = useContext(EditorContext)
+  const { bodyEditor, isVisible, setEditorExtensions, editorExtensions } = useContext(EditorContext)
 
   const insertImage = useCallback(
     (name, pos): void => {
@@ -40,27 +40,30 @@ export default function BodyField({ value, onChange, onKeyDownCapture }: Props):
     [bodyEditor]
   )
 
-  const handleFileDrop = (e): void => {
-    e.preventDefault()
+  const handleFileDrop = useCallback(
+    (e): void => {
+      e.preventDefault()
 
-    const items = e.dataTransfer!.items!
-    for (let i = 0; i < items.length; i++) {
-      const item = items[i].webkitGetAsEntry()
-      if (item && item.isFile) {
-        new Promise<File>((resolve, reject) => {
-          ;(item as FileSystemFileEntry).file(resolve, reject)
-        }).then((file) => {
-          window.api.copyFile(file).then(() => {
-            const pos = bodyEditor?.current?.view?.posAtCoords({
-              x: e.pageX,
-              y: e.pageY
+      const items = e.dataTransfer!.items!
+      for (let i = 0; i < items.length; i++) {
+        const item = items[i].webkitGetAsEntry()
+        if (item && item.isFile) {
+          new Promise<File>((resolve, reject) => {
+            ;(item as FileSystemFileEntry).file(resolve, reject)
+          }).then((file) => {
+            window.api.copyFile(file).then(() => {
+              const pos = bodyEditor?.current?.view?.posAtCoords({
+                x: e.pageX,
+                y: e.pageY
+              })
+              insertImage(item.name, pos)
             })
-            insertImage(item.name, pos)
           })
-        })
+        }
       }
-    }
-  }
+    },
+    [bodyEditor, insertImage]
+  )
 
   const theme = useMemo(() => {
     if (
@@ -78,6 +81,27 @@ export default function BodyField({ value, onChange, onKeyDownCapture }: Props):
     return thememirror[window.textZenInternal.config.view.theme!]
   }, [])
 
+  useEffect(() => {
+    setEditorExtensions([
+      markdown({ base: markdownLanguage, codeLanguages: languages }),
+      hyperLink,
+      EditorView.lineWrapping,
+      markdownImagePlugin,
+      internalLink,
+      ...highlights,
+      autocompletion({
+        override: [internalLinkCompletion]
+      }),
+      EditorView.domEventHandlers({
+        drop: handleFileDrop
+      }),
+      theme,
+      mermaidPlugin,
+      tablePreviewPlugin,
+      mathFormulaPlugin
+    ])
+  }, [handleFileDrop, setEditorExtensions, theme])
+
   useEffect(() => {
     window.textZen.codemirror.view = bodyEditor?.current?.view
     window.textZen.codemirror.state = bodyEditor?.current?.state
@@ -91,24 +115,7 @@ export default function BodyField({ value, onChange, onKeyDownCapture }: Props):
   return (
     <CodeMirror
       value={value}
-      extensions={[
-        markdown({ base: markdownLanguage, codeLanguages: languages }),
-        hyperLink,
-        EditorView.lineWrapping,
-        markdownImagePlugin,
-        internalLink,
-        ...highlights,
-        autocompletion({
-          override: [internalLinkCompletion]
-        }),
-        EditorView.domEventHandlers({
-          drop: handleFileDrop
-        }),
-        theme,
-        mermaidPlugin,
-        tablePreviewPlugin,
-        mathFormulaPlugin
-      ]}
+      extensions={editorExtensions}
       onChange={onChange}
       ref={bodyEditor}
       basicSetup={{

src/renderer/src/components/Editor.tsx

@@ -5,6 +5,8 @@ import { File } from './Page'
 import { useDebouncedCallback } from 'use-debounce'
 import { EditorContext } from '@renderer/contexts/editorContext'
 import { FocusContext } from '@renderer/contexts/FocusContext'
+import { EditorState } from '@codemirror/state'
+import { historyField } from '@codemirror/commands'
 
 interface Props {
   currentFile: File
@@ -23,9 +25,8 @@ export default function Editor({
   currentTitle,
   onBodyChange
 }: Props): JSX.Element {
-  const [editorVisible, setEditorVisible] = useState(true)
   const [currentBody, setCurrentBody] = useState('')
-  const { bodyEditor, titleEditor } = useContext(EditorContext)
+  const { bodyEditor, titleEditor, editorExtensions } = useContext(EditorContext)
   const { setFocus } = useContext(FocusContext)
 
   const writeFile = useDebouncedCallback(async (t, b, target) => {
@@ -115,15 +116,28 @@ export default function Editor({
     }
   }
 
-  // エディタの編集履歴をリセットする
   useEffect(() => {
     if (!currentFile) {
       return
     }
     window.api.getBody(currentFile.id).then(setCurrentBody)
-    setEditorVisible(false)
-    setTimeout(() => setEditorVisible(true), 1)
-  }, [currentFile, setCurrentTitle])
+
+    if (!bodyEditor?.current?.view?.state) {
+      return
+    }
+
+    bodyEditor?.current?.view?.setState(
+      EditorState.fromJSON(
+        {
+          ...bodyEditor?.current?.view.state.toJSON({ history: historyField }),
+          history
+        },
+        {
+          extensions: editorExtensions
+        }
+      )
+    )
+  }, [bodyEditor, currentFile, setCurrentTitle])
 
   useEffect(() => {
     setCurrentTitle(currentFile.title)
@@ -136,13 +150,11 @@ export default function Editor({
         onChange={handleTitleChange}
         onKeyDown={handleTitleKeyDown}
       />
-      {editorVisible && (
-        <BodyField
-          value={currentBody}
-          onChange={handleUpdate}
-          onKeyDownCapture={handleBodyKeyDownCapture as (keyboardEvent) => void}
-        />
-      )}
+      <BodyField
+        value={currentBody}
+        onChange={handleUpdate}
+        onKeyDownCapture={handleBodyKeyDownCapture as (keyboardEvent) => void}
+      />
     </div>
   )
 }

src/renderer/src/contexts/editorContext.ts

@@ -1,4 +1,4 @@
-import { ReactCodeMirrorRef } from '@uiw/react-codemirror'
+import { Extension, ReactCodeMirrorRef } from '@uiw/react-codemirror'
 import { createContext, Dispatch, SetStateAction } from 'react'
 
 interface ContextType {
@@ -8,6 +8,8 @@ interface ContextType {
   setIsVisible: (value: boolean) => void
   current: string | null
   setCurrent: Dispatch<SetStateAction<string | null>>
+  setEditorExtensions: (Extension) => void
+  editorExtensions: Extension[]
 }
 
 export const EditorContext = createContext<ContextType>({
@@ -16,5 +18,7 @@ export const EditorContext = createContext<ContextType>({
   isVisible: true,
   setIsVisible: () => {},
   current: null,
-  setCurrent: () => {}
+  setCurrent: () => {},
+  setEditorExtensions: () => {},
+  editorExtensions: []
 })