haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-10 11:21:29 +00:00
Code Issues Releases Wiki Activity

optimize code (#7084)

Browse Source
This commit is contained in:
杨顺强
2024-11-22 15:50:53 +08:00
committed by GitHub
parent 0317bb2f54
commit 2ff5e91f98
2 changed files with 26 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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]);