chore: update TocItem

Author: SoonIter

packages/theme-default/package.json

@@ -32,7 +32,7 @@
   ],
   "scripts": {
     "build": "rslib build",
-    "dev": "rslib build -w",
+    "dev": "IS_DEV=1 rslib build -w",
     "reset": "rimraf ./**/node_modules"
   },
   "dependencies": {

packages/theme-default/rslib.config.ts

@@ -55,6 +55,7 @@ export default defineConfig({
         },
       },
       output: {
+        cleanDistPath: process.env.IS_DEV === '1',
         target: 'web',
         externals: COMMON_EXTERNALS,
         cssModules: {

packages/theme-default/src/components/Aside/TocItem.scss

@@ -1,15 +1,20 @@
 .rp-aside__toc-item {
-  display: flex;
-  line-height: 24px;
+  display: block;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 10px;
   align-self: stretch;
   border-radius: 6px;
   position: relative;
   color: var(--rp-c-text-2);
+
   font-weight: 400;
   font-size: 14px;
+  line-height: 24px;
+
+  &__text {
+    overflow-wrap: break-word;
+  }
 
   &--active {
     color: var(--rp-c-link);

packages/theme-default/src/components/Aside/TocItem.tsx

@@ -17,22 +17,20 @@ export const TocItem = ({
   active: boolean;
 }) => {
   return (
-    <li>
-      <Link
-        href={`#${header.id}`}
-        title={parseInlineMarkdownText(header.text)}
-        className={clsx('rp-aside__toc-item', {
-          'rp-aside__toc-item--active': active,
-        })}
-        style={{
-          paddingLeft: (header.depth - baseHeaderLevel) * 12,
-        }}
-      >
-        <span
-          className="rp-aside__toc-text"
-          {...renderInlineMarkdown(header.text)}
-        ></span>
-      </Link>
-    </li>
+    <Link
+      href={`#${header.id}`}
+      title={parseInlineMarkdownText(header.text)}
+      className={clsx('rp-aside__toc-item', {
+        'rp-aside__toc-item--active': active,
+      })}
+      style={{
+        paddingLeft: (header.depth - baseHeaderLevel) * 12,
+      }}
+    >
+      <span
+        className="rp-aside__toc-item__text"
+        {...renderInlineMarkdown(header.text)}
+      ></span>
+    </Link>
   );
 };

packages/theme-default/src/components/Aside/index.tsx

@@ -60,17 +60,15 @@ export function Aside() {
         {outlineTitle}
         <ProgressCircle percent={readPercent} size={14} strokeWidth={2} />
       </div>
-      <nav>
-        <ul className="rp-aside__toc">
-          {headers.map((header, index) => (
-            <TocItem
-              key={`${header.depth}_${header.text}_${header.id}_${index}`}
-              baseHeaderLevel={baseHeaderLevel}
-              header={header}
-              active={activeAnchorId === header.id}
-            />
-          ))}
-        </ul>
+      <nav className="rp-aside__toc">
+        {headers.map((header, index) => (
+          <TocItem
+            key={`${header.depth}_${header.text}_${header.id}_${index}`}
+            baseHeaderLevel={baseHeaderLevel}
+            header={header}
+            active={activeAnchorId === header.id}
+          />
+        ))}
       </nav>
 
       <div style={{ display: readPercent !== 0 ? '' : 'none' }}>