fix: can not sync title in head when new page

This commit is contained in:
QiShaoXuan
2022-12-13 15:37:42 +08:00
parent c753a23a98
commit 27453f39fe
@@ -15,51 +15,56 @@ import { useModal } from '@/providers/global-modal-provider';
import Header from './header';
export const PageHeader = () => {
const [title, setTitle] = useState('Untitled');
const [title, setTitle] = useState('');
const [isHover, setIsHover] = useState(false);
const { editor } = useEditor();
const { triggerQuickSearchModal } = useModal();
useEffect(() => {
if (editor?.model) {
setTitle(editor.model.title ?? '');
setTitle(editor.model.title || 'Untitled');
editor.model.propsUpdated.on(() => {
setTitle(editor.model.title);
});
}
return () => {
editor?.model?.propsUpdated.dispose();
};
}, [editor]);
return (
<Header>
<StyledTitle
onMouseEnter={() => {
setIsHover(true);
}}
onMouseLeave={() => {
setIsHover(false);
}}
>
<StyledTitleWrapper>
<StyledSwitchWrapper>
<EditorModeSwitch
isHover={isHover}
style={{
marginRight: '12px',
}}
/>
</StyledSwitchWrapper>
<Content ellipsis={true}>{title}</Content>
<StyledSearchArrowWrapper>
<IconButton
onClick={() => {
triggerQuickSearchModal();
}}
>
<MiddleIconArrowDownSmallIcon />
</IconButton>
</StyledSearchArrowWrapper>
</StyledTitleWrapper>
</StyledTitle>
{title && (
<StyledTitle
onMouseEnter={() => {
setIsHover(true);
}}
onMouseLeave={() => {
setIsHover(false);
}}
>
<StyledTitleWrapper>
<StyledSwitchWrapper>
<EditorModeSwitch
isHover={isHover}
style={{
marginRight: '12px',
}}
/>
</StyledSwitchWrapper>
<Content ellipsis={true}>{title}</Content>
<StyledSearchArrowWrapper>
<IconButton
onClick={() => {
triggerQuickSearchModal();
}}
>
<MiddleIconArrowDownSmallIcon />
</IconButton>
</StyledSearchArrowWrapper>
</StyledTitleWrapper>
</StyledTitle>
)}
</Header>
);
};