diff --git a/frontend/src/pages/wiki2/index.js b/frontend/src/pages/wiki2/index.js index 89d98ae6d7..ec546305a6 100644 --- a/frontend/src/pages/wiki2/index.js +++ b/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({ - config: new WikiConfig(wikiConfig), - isUpdateBySide, - }); - if (isUpdateBySide) { - setTimeout(() => { - this.setState({ isUpdateBySide: false }); - }, 300); - } + // nothing todo }).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) => { diff --git a/frontend/src/pages/wiki2/wiki-right-header/page-title-editor.js b/frontend/src/pages/wiki2/wiki-right-header/page-title-editor.js index dd5a7e9a2d..a534af0306 100644 --- a/frontend/src/pages/wiki2/wiki-right-header/page-title-editor.js +++ b/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); - delayUpdate(id, pageConfig); + onUpdatePage(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); - delayUpdate(id, pageConfig); + onUpdatePage(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]);