fix: update of correction value

Author: Col0ring

frontend/pro/monaco-editor/diff-editor/monaco-editor.diff-editor.tsx

@@ -5,17 +5,21 @@ import {
 } from '@monaco-editor/react';
 import { ReactSlot } from '@svelte-preprocess-react/react-slot';
 import { sveltify } from '@svelte-preprocess-react/sveltify';
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import { useFunction } from '@utils/hooks/useFunction';
 import { Spin } from 'antd';
+import { isNumber } from 'lodash-es';
 import type { editor, IDisposable } from 'monaco-editor';
 
+import { useValueChange } from '../useValueChange';
+
 import '../monaco-editor.less';
 
 export interface MonacoDiffEditorProps extends DiffEditorProps {
   themeMode?: string;
   height?: string | number;
   children?: React.ReactNode;
+  readOnly?: boolean;
   value?: string;
   onValueChange: (value: string | undefined) => void;
   onChange?: (
@@ -24,6 +28,7 @@ export interface MonacoDiffEditorProps extends DiffEditorProps {
   ) => void;
   onValidate?: OnValidate;
   afterMount?: DiffEditorProps['onMount'];
+  line?: number;
 }
 
 export const MonacoDiffEditor = sveltify<MonacoDiffEditorProps, ['loading']>(
@@ -40,22 +45,35 @@ export const MonacoDiffEditor = sveltify<MonacoDiffEditorProps, ['loading']>(
     onChange,
     onValueChange,
     onValidate,
-    value,
+    value: valueProp,
     modified,
+    options,
+    readOnly,
+    line,
     ...props
   }) => {
     const beforeMountFunction = useFunction(beforeMount);
     const afterMountFunction = useFunction(afterMount);
-    const disposablesRef = React.useRef<IDisposable[]>([]);
-
+    const disposablesRef = useRef<IDisposable[]>([]);
+    const editorRef = useRef<editor.IStandaloneDiffEditor | null>(null);
+    const [isEditorReady, setIsEditorReady] = React.useState(false);
+    const [value, setValue] = useValueChange({
+      onValueChange,
+      value: valueProp,
+    });
     const handleEditorMount: MonacoDiffEditorProps['onMount'] = (
       editor,
       monaco
     ) => {
+      editorRef.current = editor;
+      if (isNumber(line)) {
+        editor.revealLine(line);
+      }
+      setIsEditorReady(true);
       const modifiedEditor = editor.getModifiedEditor();
       const mountDisposable = modifiedEditor.onDidChangeModelContent((e) => {
         const newValue = modifiedEditor.getValue();
-        onValueChange(newValue);
+        setValue(newValue);
         onChange?.(newValue, e);
       });
 
@@ -84,6 +102,13 @@ export const MonacoDiffEditor = sveltify<MonacoDiffEditorProps, ['loading']>(
         });
       };
     }, []);
+
+    useEffect(() => {
+      if (isEditorReady && isNumber(line)) {
+        editorRef.current?.revealLine(line);
+      }
+    }, [line, isEditorReady]);
+
     return (
       <>
         <div style={{ display: 'none' }}>{children}</div>
@@ -96,6 +121,13 @@ export const MonacoDiffEditor = sveltify<MonacoDiffEditorProps, ['loading']>(
         >
           <DiffEditor
             {...props}
+            options={useMemo(
+              () => ({
+                readOnly,
+                ...(options || {}),
+              }),
+              [options, readOnly]
+            )}
             modified={value || modified}
             beforeMount={beforeMountFunction}
             onMount={(editor, monaco) => {
@@ -107,14 +139,12 @@ export const MonacoDiffEditor = sveltify<MonacoDiffEditorProps, ['loading']>(
               slots.loading ? (
                 <ReactSlot slot={slots.loading} />
               ) : (
-                props.loading || (
-                  <Spin
-                    tip="Editor is Loading..."
-                    wrapperClassName="ms-gr-pro-monaco-editor-spin"
-                  >
-                    <div />
-                  </Spin>
-                )
+                <Spin
+                  tip={props.loading}
+                  wrapperClassName="ms-gr-pro-monaco-editor-spin"
+                >
+                  <div />
+                </Spin>
               )
             }
             theme={themeMode === 'dark' ? 'vs-dark' : 'light'}

frontend/pro/monaco-editor/monaco-editor.tsx

@@ -1,15 +1,18 @@
 import { Editor, type EditorProps } from '@monaco-editor/react';
 import { ReactSlot } from '@svelte-preprocess-react/react-slot';
 import { sveltify } from '@svelte-preprocess-react/sveltify';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useFunction } from '@utils/hooks/useFunction';
 import { Spin } from 'antd';
 
+import { useValueChange } from './useValueChange';
+
 import './monaco-editor.less';
 
 export interface MonacoEditorProps extends EditorProps {
   themeMode?: string;
   height?: string | number;
+  readOnly?: boolean;
   onValueChange: (value: string | undefined) => void;
   children?: React.ReactNode;
   afterMount?: EditorProps['onMount'];
@@ -18,7 +21,7 @@ export interface MonacoEditorProps extends EditorProps {
 export const MonacoEditor = sveltify<MonacoEditorProps, ['loading']>(
   ({
     height,
-    value,
+    value: valueProp,
     className,
     style,
     themeMode,
@@ -29,10 +32,16 @@ export const MonacoEditor = sveltify<MonacoEditorProps, ['loading']>(
     afterMount,
     children,
     onMount,
+    options,
+    readOnly,
     ...props
   }) => {
     const beforeMountFunction = useFunction(beforeMount);
     const afterMountFunction = useFunction(afterMount);
+    const [value, setValue] = useValueChange({
+      onValueChange,
+      value: valueProp,
+    });
 
     return (
       <>
@@ -52,22 +61,27 @@ export const MonacoEditor = sveltify<MonacoEditorProps, ['loading']>(
               onMount?.(...args);
               afterMountFunction?.(...args);
             }}
+            options={useMemo(
+              () => ({
+                readOnly,
+                ...(options || {}),
+              }),
+              [options, readOnly]
+            )}
             loading={
               slots.loading ? (
                 <ReactSlot slot={slots.loading} />
               ) : (
-                props.loading || (
-                  <Spin
-                    tip="Editor is Loading..."
-                    wrapperClassName="ms-gr-pro-monaco-editor-spin"
-                  >
-                    <div />
-                  </Spin>
-                )
+                <Spin
+                  tip={props.loading}
+                  wrapperClassName="ms-gr-pro-monaco-editor-spin"
+                >
+                  <div />
+                </Spin>
               )
             }
             onChange={(v, ev) => {
-              onValueChange(v);
+              setValue(v);
               onChange?.(v, ev);
             }}
             theme={themeMode === 'dark' ? 'vs-dark' : 'light'}

frontend/pro/monaco-editor/useValueChange.ts

@@ -0,0 +1,43 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useMemoizedFn } from '@utils/hooks/useMemoizedFn';
+
+export function useValueChange(options: {
+  value: string | undefined;
+  onValueChange: (value: string | undefined) => void;
+}) {
+  const { value: valueProp, onValueChange } = options;
+  const [typing, setTyping] = useState(false);
+  const [displayValue, setDisplayValue] = useState(valueProp);
+  const typingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const onValueChangeMemoized = useMemoizedFn(onValueChange);
+
+  const setValue = useCallback(
+    (value: string | undefined) => {
+      typingTimerRef.current && clearTimeout(typingTimerRef.current);
+      setTyping(true);
+      typingTimerRef.current = setTimeout(() => {
+        setTyping(false);
+      }, 100);
+      onValueChangeMemoized(value);
+    },
+    [onValueChangeMemoized]
+  );
+
+  useEffect(() => {
+    // if not typing, use the cache value
+    if (!typing) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setDisplayValue(valueProp);
+    }
+  }, [typing, valueProp]);
+
+  useEffect(() => {
+    return () => {
+      if (typingTimerRef.current) {
+        clearTimeout(typingTimerRef.current);
+        typingTimerRef.current = null;
+      }
+    };
+  }, []);
+  return [displayValue, setValue] as const;
+}