optimize code (#7084)

frontend/src/pages/wiki2/index.js

@@ -14,6 +14,7 @@ import PageUtils from './wiki-nav/page-utils';
 import LocalStorage from '../../utils/local-storage-utils';
 import { DEFAULT_PAGE_NAME } from './constant';
 import { eventBus } from '../../components/common/event-bus';
+import { throttle } from './utils';
 
 import '../../css/layout.css';
 import '../../css/side-panel.css';
@@ -117,21 +118,28 @@ class Wiki extends Component {
     this.setState({ config: new WikiConfig(wikiConfig || {}) });
   };
 
-  saveWikiConfig = (wikiConfig, isUpdateBySide = false) => {
+  updatePageNameToServer = throttle((wikiConfig) => {
     wikiAPI.updateWiki2Config(wikiId, JSON.stringify(wikiConfig)).then(res => {
-      this.setState({
+      // nothing todo
-        config: new WikiConfig(wikiConfig),
-        isUpdateBySide,
-      });
-      if (isUpdateBySide) {
-        setTimeout(() => {
-          this.setState({ isUpdateBySide: false });
-        }, 300);
-      }
     }).catch((error) => {
       let errorMsg = Utils.getErrorMsg(error);
       toaster.danger(errorMsg);
     });
+  }, 1000);
+
+  saveWikiConfig = (wikiConfig, isUpdateBySide = false) => {
+    this.setState({
+      config: new WikiConfig(wikiConfig),
+      isUpdateBySide,
+    }, () => {
+      this.updatePageNameToServer(wikiConfig);
+    });
+
+    if (isUpdateBySide) {
+      setTimeout(() => {
+        this.setState({ isUpdateBySide: false });
+      }, 300);
+    }
   };
 
   getFirstPageId = (config) => {

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

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { throttle } from '../utils';
 import { wikiPermission } from '../../../utils/constants';
 
 function PageTitleEditor({ isUpdateBySide, currentPageConfig, onUpdatePage }) {
@@ -8,33 +7,6 @@ function PageTitleEditor({ isUpdateBySide, currentPageConfig, onUpdatePage }) {
   const [pageName, setPageName] = useState(currentPageConfig.name);
   const isChineseInput = useRef(false);
   const contentEditableRef = useRef(null);
-  const selectionRef = useRef(null);
-
-  const saveSelection = () => {
-    const sel = window.getSelection();
-    if (sel.rangeCount > 0) {
-      const range = sel.getRangeAt(0);
-      selectionRef.current = {
-        startContainer: range.startContainer,
-        startOffset: range.startOffset,
-        endContainer: range.endContainer,
-        endOffset: range.endOffset
-      };
-    }
-  };
-
-  const restoreSelection = () => {
-    if (selectionRef.current) {
-      const { startContainer, startOffset, endContainer, endOffset } = selectionRef.current;
-      const range = window.document.createRange();
-      range.setStart(startContainer, startOffset);
-      range.setEnd(endContainer, endOffset);
-
-      const selection = window.getSelection();
-      selection.removeAllRanges();
-      selection.addRange(range);
-    }
-  };
 
   const onKeyDown = (event) => {
     if (event.keyCode === 13) {
@@ -50,17 +22,14 @@ function PageTitleEditor({ isUpdateBySide, currentPageConfig, onUpdatePage }) {
   const onCompositionEnd = useCallback((e) => {
     isChineseInput.current = false;
     setPageName(e.target.innerText);
-    saveSelection();
 
     const newName = e.target.innerText.trim();
     const { id, icon } = currentPageConfig;
     const pageConfig = { name: newName, icon };
-    const delayUpdate = throttle(onUpdatePage, 500);
+    onUpdatePage(id, pageConfig);
-    delayUpdate(id, pageConfig);
   }, [currentPageConfig, onUpdatePage]);
 
   const handleInput = useCallback((e) => {
-    saveSelection();
     if (isChineseInput.current === false) {
       setPageName(e.target.innerText);
 
@@ -69,21 +38,24 @@ function PageTitleEditor({ isUpdateBySide, currentPageConfig, onUpdatePage }) {
       const { id, icon } = currentPageConfig;
       const pageConfig = { name: newName, icon };
 
-      const delayUpdate = throttle(onUpdatePage, 500);
+      onUpdatePage(id, pageConfig);
-      delayUpdate(id, pageConfig);
     }
   }, [currentPageConfig, onUpdatePage, pageName]);
 
   useEffect(() => {
     if (pageName !== currentPageConfig.name && isUpdateBySide) {
       setPageName(currentPageConfig.name);
-      selectionRef.current = null;
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentPageConfig.name, isUpdateBySide]);
 
   useEffect(() => {
-    restoreSelection();
+    const range = document.createRange();
+    const selection = window.getSelection();
+    range.selectNodeContents(contentEditableRef.current);
+    range.collapse(false);
+    selection.removeAllRanges();
+    selection.addRange(range);
   }, [pageName]);