From aac9eee6e29c4c6e19a5d496eb438e332419c9a4 Mon Sep 17 00:00:00 2001
From: tzhangchi <terry.zhangchi@outlook.com>
Date: Fri, 26 Aug 2022 21:53:45 +0800
Subject: [PATCH] feat(toc): add scroll active item

---
 .../src/pages/workspace/docs/components/toc/TOC.tsx |  7 ++++++-
 .../src/pages/workspace/docs/components/toc/toc.css | 13 +++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css

diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx
index 6e416a8b6b..877a17d480 100644
--- a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx
+++ b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx
@@ -16,8 +16,8 @@ import {
     getContentByAsyncBlocks,
     getPageTOC,
 } from './toc-util';
+import './toc.css';
 import type { ListenerMap, TOCType } from './types';
-
 const StyledTOCItem = styled('a')<{ type?: string; isActive?: boolean }>(
     ({ type, isActive }) => {
         const common = {
@@ -168,6 +168,11 @@ export const TOC = () => {
 
     const onClick = async (blockId?: string) => {
         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);
     };
 
diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css
new file mode 100644
index 0000000000..44364012dc
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css
@@ -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);
+    }
+}