luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat(toc): add scroll active item

Browse Source
This commit is contained in:
tzhangchi
2022-08-26 21:53:45 +08:00
parent 8df4ac7f14
commit aac9eee6e2
2 changed files with 19 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx
View File

@@ -16,8 +16,8 @@ import {
getContentByAsyncBlocks, getContentByAsyncBlocks,
getPageTOC, getPageTOC,
} from './toc-util'; } from './toc-util';
import './toc.css';
import type { ListenerMap, TOCType } from './types'; import type { ListenerMap, TOCType } from './types';
const StyledTOCItem = styled('a')<{ type?: string; isActive?: boolean }>( const StyledTOCItem = styled('a')<{ type?: string; isActive?: boolean }>(
({ type, isActive }) => { ({ type, isActive }) => {
const common = { const common = {
@@ -168,6 +168,11 @@ export const TOC = () => {
const onClick = async (blockId?: string) => { const onClick = async (blockId?: string) => {
setActiveBlockId(blockId); setActiveBlockId(blockId);
const block = await editor.getBlockById(blockId);
block.dom.classList.add('toc-scroll-item');
setTimeout(() => {
block.dom.classList.remove('toc-scroll-item');
}, 1000);
await editor.scrollManager.scrollIntoViewByBlockId(blockId); await editor.scrollManager.scrollIntoViewByBlockId(blockId);
}; };

13
apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css Normal file
View File

@@ -0,0 +1,13 @@
.toc-scroll-item {
animation: blinker 1s linear;
animation-delay: 1s;
}
@keyframes blinker {
0% {
background: rgba(152, 172, 189, 0.1);
}
100% {
background: rgba(152, 172, 189, 0.1);
}
}