fix rename page logic

frontend/src/pages/wiki2/wiki-right-header/page-title.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Input } from 'reactstrap';
@@ -16,18 +16,55 @@ const propTypes = {
 
 const PageTitle = ({ currentPageConfig, onUpdatePage }) => {
   const [isShowController, setIsShowController] = useState(false);
+  const [pageName, setPageName] = useState(currentPageConfig.name);
+  const isChineseInput = useRef(false);
+  const isTyping = useRef(false);
+  const timer = useRef(null);
 
-  const handleRenameDocument = useCallback((e) => {
-    const { nativeEvent: { isComposing } } = e;
-    if (isComposing) return;
+  useEffect(() => {
+    if (pageName !== currentPageConfig.name && isTyping.current === false) {
+      setPageName(currentPageConfig.name);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentPageConfig.name]);
 
+  const onKeyDown = useCallback(() => {
+    isTyping.current = true;
+    if (timer.current) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+  }, []);
+
+  const onKeyUp = useCallback(() => {
+    timer.current = setTimeout(() => {
+      isTyping.current = false;
+    }, 500);
+  }, []);
+
+  const onCompositionStart = useCallback(() => {
+    isChineseInput.current = true;
+  }, []);
+
+  const onCompositionEnd = useCallback((e) => {
+    isChineseInput.current = false;
     const newName = e.target.value.trim();
-    const { id, name, icon } = currentPageConfig;
-    if (newName === name) return;
+    const { id, icon } = currentPageConfig;
     const pageConfig = { name: newName, icon };
     onUpdatePage && onUpdatePage(id, pageConfig);
   }, [currentPageConfig, onUpdatePage]);
 
+  const onChange = useCallback((e) => {
+    setPageName(e.target.value);
+    if (isChineseInput.current === false) {
+      const newName = e.target.value.trim();
+      if (newName === pageName) return;
+      const { id, icon } = currentPageConfig;
+      const pageConfig = { name: newName, icon };
+      onUpdatePage && onUpdatePage(id, pageConfig);
+    }
+  }, [currentPageConfig, onUpdatePage, pageName]);
+
   const onMouseEnter = useCallback(() => {
     setIsShowController(true);
   }, []);
@@ -79,7 +116,16 @@ const PageTitle = ({ currentPageConfig, onUpdatePage }) => {
           </div>
         )}
       </div>
-      <Input className='wiki-sdoc-title' onCompositionEnd={handleRenameDocument} bsSize="lg" onChange={handleRenameDocument} defaultValue={currentPageConfig.name} />
+      <Input
+        className='wiki-sdoc-title'
+        bsSize="lg"
+        onCompositionStart={onCompositionStart}
+        onCompositionEnd={onCompositionEnd}
+        onKeyDown={onKeyDown}
+        onKeyUp={onKeyUp}
+        onChange={onChange}
+        value={pageName}
+      />
     </div>
   );
 };