@rspress/plugin-preview 1.46.1 → 1.46.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rspress/plugin-preview",
-  "version": "1.46.1",
+  "version": "1.46.2",
   "description": "A plugin for rspress to preview the code block in markdown/mdx file.",
   "bugs": "https://github.com/web-infra-dev/rspress/issues",
   "repository": {
@@ -25,8 +25,8 @@
     "@rsbuild/plugin-solid": "~1.0.5",
     "lodash": "4.17.21",
     "qrcode.react": "^3.2.0",
-    "@rspress/shared": "1.46.1",
-    "@rspress/theme-default": "1.46.1"
+    "@rspress/shared": "1.46.2",
+    "@rspress/theme-default": "1.46.2"
   },
   "devDependencies": {
     "@rslib/core": "~0.6.9",
@@ -45,7 +45,7 @@
     "unist-util-visit": "^4.1.2"
   },
   "peerDependencies": {
-    "@rspress/core": "^1.46.1",
+    "@rspress/core": "^1.46.2",
     "react": ">=17.0.0",
     "react-router-dom": "^6.8.1"
   },

package/static/global-components/ContainerFixedPerComp.tsx

@@ -27,8 +27,6 @@ const MobileContainerFixedPerComp: React.FC<ContainerProps> = props => {
 
   const setIframeUrl = () => {
     const url = getPageUrl();
-    const fixedIframe = document.querySelector('.rspress-fixed-iframe');
-    fixedIframe?.setAttribute('src', url);
     publishIframeUrl(url);
   };
 

package/static/global-components/Device.scss

@@ -1,7 +1,10 @@
 .rspress-fixed-device {
   display: none;
   position: fixed;
-  top: calc(var(--rp-nav-height) + var(--rp-preview-padding));
+  top: calc(
+    var(--rp-nav-height) + var(--rp-preview-padding) +
+      var(--rp-sidebar-menu-height)
+  );
   overflow: hidden;
 }
 
@@ -32,17 +35,8 @@
 }
 
 @media (min-width: 960px) {
-  .rspress-fixed-device {
-    display: inline;
-    left: calc(1280px - var(--rp-device-width) - var(--rp-preview-padding));
-    right: auto;
-  }
-}
-
-@media (min-width: 1280px) {
   .rspress-fixed-device {
     display: inline;
     right: var(--rp-preview-padding);
-    left: auto;
   }
 }

package/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-ignore
 import { normalizeId } from '../../dist/utils';
 import MobileOperation from './common/mobile-operation';
@@ -21,58 +16,29 @@ export default () => {
     if (page?.devPort) {
       return `http://localhost:${page.devPort}/${demoId}`;
     }
-    if (typeof window !== 'undefined') {
-      return `${window.location.origin}${withBase(url)}`;
-    }
-    // Do nothing in ssr
-    return '';
+    return withBase(url);
   };
-  const [asideWidth, setAsideWidth] = useState('0px');
-  const { width: innerWidth } = useWindowSize();
   const [iframeKey, setIframeKey] = useState(0);
   const refresh = useCallback(() => {
     setIframeKey(Math.random());
   }, []);
 
-  // get default value from root
-  // listen resize and re-render
-  useEffect(() => {
-    const root = document.querySelector(':root');
-    if (root) {
-      const defaultAsideWidth =
-        getComputedStyle(root).getPropertyValue('--rp-aside-width');
-      setAsideWidth(defaultAsideWidth);
-    }
-  }, []);
-
-  useEffect(() => {
-    const node = document.querySelector('.rspress-doc-container');
-    const { style } = document.documentElement;
-    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');
-      }
-      style.setProperty('--rp-aside-width', '0px');
-    } else {
-      node?.removeAttribute('style');
-      style.setProperty('--rp-aside-width', asideWidth);
-    }
-  }, [haveDemos, asideWidth, innerWidth]);
-
   return haveDemos ? (
     <div className="rspress-fixed-device">
+      <style>
+        {`
+            body {
+              --rp-aside-width: 0px;
+            }
+            @media (min-width: 960px) {
+              .rspress-doc-container {
+                padding-right: calc(var(--rp-device-width) + var(--rp-preview-padding) * 2);
+              }
+            }
+          `
+          .split('\n')
+          .join(' ')}
+      </style>
       <NoSSR>
         <iframe
           // refresh when load the iframe, then remove NoSSR

package/static/global-components/DeviceFixedPerComp.tsx

@@ -1,9 +1,4 @@
-import {
-  NoSSR,
-  usePageData,
-  useWindowSize,
-  withBase,
-} from '@rspress/core/runtime';
+import { NoSSR, usePageData, withBase } from '@rspress/core/runtime';
 import { useCallback, useEffect, useState } from 'react';
 // @ts-ignore
 import { normalizeId } from '../../dist/utils';
@@ -22,11 +17,7 @@ export default () => {
     if (page?.devPort) {
       return `http://localhost:${page.devPort}/${demoId}`;
     }
-    if (typeof window !== 'undefined') {
-      return `${window.location.origin}${withBase(url)}`;
-    }
-    // Do nothing in ssr
-    return '';
+    return withBase(url);
   };
 
   const initialUrl = getPageUrl(url);
@@ -35,58 +26,33 @@ export default () => {
 
   const resetIframeUrl = useCallback(() => {
     publishIframeUrl(initialUrl);
-  }, [initialUrl, url]);
+  }, [initialUrl]);
 
   useEffect(() => {
     publishIframeUrl(initialUrl);
-  }, []);
+  }, [initialUrl]);
 
-  const [asideWidth, setAsideWidth] = useState('0px');
-  const { width: innerWidth } = useWindowSize();
   const [iframeKey, setIframeKey] = useState(0);
   const refresh = useCallback(() => {
     setIframeKey(Math.random());
   }, []);
 
-  // get default value from root
-  // listen resize and re-render
-  useEffect(() => {
-    const root = document.querySelector(':root');
-    if (root) {
-      const defaultAsideWidth =
-        getComputedStyle(root).getPropertyValue('--rp-aside-width');
-      setAsideWidth(defaultAsideWidth);
-    }
-  }, []);
-
-  useEffect(() => {
-    const node = document.querySelector('.rspress-doc-container');
-    const { style } = document.documentElement;
-    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');
-      }
-      style.setProperty('--rp-aside-width', '0px');
-    } else {
-      node?.removeAttribute('style');
-      style.setProperty('--rp-aside-width', asideWidth);
-    }
-  }, [haveDemos, asideWidth, innerWidth]);
-
   return haveDemos ? (
     <div className="rspress-fixed-device">
+      <style>
+        {`
+            body {
+              --rp-aside-width: 0px;
+            }
+            @media (min-width: 960px) {
+              .rspress-doc-container {
+                padding-right: calc(var(--rp-device-width) + var(--rp-preview-padding) * 2);
+              }
+            }
+          `
+          .split('\n')
+          .join(' ')}
+      </style>
       <NoSSR>
         <iframe
           // refresh when load the iframe, then remove NoSSR

package/static/global-styles/entry.css

@@ -3,11 +3,11 @@
   --rp-iframe-nav-bg: #ffffff;
 }
 
-/* TODO: support dark mode */
-/* .dark {
+.dark {
+  /* TODO: support sync dark mode state */
   --rp-iframe-bg: #242424;
   --rp-iframe-nav-bg: #191d24;
-} */
+}
 
 body {
   background-color: var(--rp-iframe-bg) !important;

package/static/global-styles/iframe.css

@@ -7,25 +7,3 @@
 :root {
   --rp-preview-padding: 32px;
 }
-
-@media (min-width: 1280px) {
-  .rspress-doc-layout {
-    width: calc(100% - var(--rp-preview-padding));
-    margin-left: var(--rp-preview-padding);
-  }
-
-  .rspress-sidebar {
-    margin-left: var(--rp-preview-padding);
-  }
-
-  .rspress-doc-nav-container {
-    max-width: 100%;
-    margin-left: var(--rp-preview-padding);
-  }
-
-  .rspress-doc {
-    width: 100%;
-    padding-left: var(--rp-preview-padding);
-    padding-right: var(--rp-preview-padding);
-  }
-}