fix(theme): plugin-preview should hide the toc

e2e/fixtures/plugin-preview/doc/index.mdx

@@ -1,5 +1,7 @@
 # Guide
 
+## Iframe
+
 ```jsx
 export default function HelloWorld() {
   return <div>Hello World Internal</div>;

e2e/fixtures/plugin-preview/doc/prop.mdx → e2e/fixtures/plugin-preview/doc/mixed.mdx

@@ -1,4 +1,6 @@
-# Props
+# Mixed
+
+## Internal mixed with fixed
 
 ```tsx file="./component.jsx"
 

e2e/fixtures/plugin-preview/index.test.ts

@@ -50,7 +50,7 @@ test.describe('plugin test', async () => {
   });
 
   test('```tsx internal preview', async ({ page }) => {
-    await page.goto(`http://localhost:${appPort}/prop`, {
+    await page.goto(`http://localhost:${appPort}/mixed`, {
       waitUntil: 'networkidle',
     });
     const externalDemoCodePreview = await page

packages/plugin-preview/static/global-components/DemoBlock.css

@@ -6,18 +6,18 @@
   --rp-demo-block-bg: #1a1a1a;
 }
 
-.rspress-demo-block {
+.rp-demo-block {
   padding-bottom: 12px;
   background-color: var(--rp-demo-block-bg);
 }
 
-.rspress-demo-block-title {
+.rp-demo-block-title {
   padding: 12px 12px 8px;
   color: #697b8c;
   font-size: 14px;
 }
 
-.rspress-demo-block-main {
+.rp-demo-block-main {
   border-right: none;
   border-left: none;
 }

packages/plugin-preview/static/global-components/DemoBlock.tsx

@@ -8,9 +8,9 @@ interface Props {
 export default (props: Props) => {
   const { title, children } = props;
   return (
-    <div className="rspress-demo-block">
-      <div className="rspress-demo-block-title">{title}</div>
-      <div className="rspress-demo-block-main">{children}</div>
+    <div className="rp-demo-block">
+      <div className="rp-demo-block-title">{title}</div>
+      <div className="rp-demo-block-main">{children}</div>
     </div>
   );
 };

packages/plugin-preview/static/global-components/Device.css

@@ -1,11 +1,11 @@
-.fixed-device {
+.rp-fixed-device {
   display: none;
   position: fixed;
   top: calc(var(--rp-nav-height) + var(--rp-preview-padding));
   overflow: hidden;
 }
 
-.fixed-iframe {
+.rp-fixed-iframe {
   height: var(--rp-device-height);
   max-height: calc(
     100vh - var(--rp-preview-padding) * 2 - var(--rp-nav-height)
@@ -17,7 +17,7 @@
   border: var(--rp-device-border);
 }
 
-.fixed-operation {
+.rp-fixed-operation {
   border: var(--rp-device-border);
   border-top: 0;
   border-radius: 0 0 var(--rp-device-border-radius)
@@ -32,15 +32,15 @@
 }
 
 @media (min-width: 960px) {
-  .fixed-device {
+  .rp-fixed-device {
     display: inline;
     left: calc(1280px - var(--rp-device-width) - var(--rp-preview-padding));
     right: auto;
   }
 }
 
 @media (min-width: 1280px) {
-  .fixed-device {
+  .rp-fixed-device {
     display: inline;
     right: var(--rp-preview-padding);
     left: auto;

packages/plugin-preview/static/global-components/Device.tsx

@@ -1,10 +1,5 @@
-import {
-  NoSSR,
-  usePageData,
-  useWindowSize,
-  withBase,
-} from '@rspress/core/runtime';
-import { useCallback, useEffect, useState } from 'react';
+import { NoSSR, usePageData, withBase } from '@rspress/core/runtime';
+import { useCallback, useState } from 'react';
 // @ts-expect-error
 import { normalizeId } from '../../dist/utils';
 import MobileOperation from './common/mobile-operation';
@@ -27,48 +22,26 @@ export default () => {
     // Do nothing in ssr
     return '';
   };
-  const { width: innerWidth } = useWindowSize();
   const [iframeKey, setIframeKey] = useState(0);
   const refresh = useCallback(() => {
     setIframeKey(Math.random());
   }, []);
 
-  useEffect(() => {
-    const node = document.querySelector('.rspress-doc-container');
-    if (haveDemos) {
-      if (innerWidth > 1280) {
-        node?.setAttribute(
-          'style',
-          'padding-right: calc(var(--rp-device-width) + var(--rp-preview-padding) * 2)',
-        );
-      } else if (innerWidth > 960) {
-        node?.setAttribute(
-          'style',
-          `padding-right: calc(${
-            innerWidth - 1280
-          }px + var(--rp-device-width) + var(--rp-preview-padding) * 2)`,
-        );
-      } else {
-        node?.removeAttribute('style');
-      }
-    } else {
-      node?.removeAttribute('style');
-    }
-  }, [haveDemos, innerWidth]);
-
   return haveDemos ? (
-    <div className="fixed-device">
+    <div className="rp-fixed-device">
+      {/* hide the outline */}
+      <style>{`.rp-doc-layout__outline { display: none;}`}</style>
       <NoSSR>
         <iframe
           // refresh when load the iframe, then remove NoSSR
           src={getPageUrl(url)}
-          className="fixed-iframe"
+          className="rp-fixed-iframe"
           key={iframeKey}
         ></iframe>
       </NoSSR>
       <MobileOperation
         url={getPageUrl(url)}
-        className="fixed-operation"
+        className="rp-fixed-operation"
         refresh={refresh}
       />
     </div>