@rspress/plugin-preview 1.0.0-beta.2 → 1.0.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rspress/plugin-preview",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "description": "A plugin for rspress to preview the code block in markdown/mdx file.",
   "bugs": "https://github.com/web-infra-dev/rspress/issues",
   "repository": {
@@ -24,7 +24,9 @@
     "@modern-js/utils": "2.35.1",
     "qrcode.react": "^3.1.0",
     "remark-gfm": "3.0.1",
-    "@rspress/shared": "1.0.0-beta.2"
+    "rspack-plugin-virtual-module": "0.1.12",
+    "codesandbox": "2.2.3",
+    "@rspress/shared": "1.0.0-beta.3"
   },
   "devDependencies": {
     "@types/mdast": "^3.0.10",
@@ -36,7 +38,6 @@
     "react": "^18",
     "react-dom": "^18",
     "react-router-dom": "^6.8.1",
-    "rspack-plugin-virtual-module": "0.1.11",
     "typescript": "^5",
     "unified": "^10.1.2",
     "unist-util-visit": "^4.1.1"
@@ -44,7 +45,7 @@
   "peerDependencies": {
     "react": ">=17",
     "react-router-dom": "^6.8.1",
-    "@rspress/core": "1.0.0-beta.2"
+    "@rspress/core": "1.0.0-beta.3"
   },
   "files": [
     "dist",

package/static/global-components/Container.scss

@@ -42,9 +42,8 @@
     &.web {
       display: flex;
       justify-content: center;
-      position: absolute;
-      top: calc(50% - 14px);
-      right: 16px;
+      align-items: center;
+      flex: none;
     }
   }
 
@@ -58,6 +57,7 @@
     position: relative;
     border: 1px solid #e6e6e6;
     border-radius: 8px;
+    display: flex;
   }
 
   &-qrcode {

package/static/global-components/Container.tsx

@@ -1,17 +1,23 @@
 import { useCallback, useState } from 'react';
 import { withBase, useLang, NoSSR } from '@rspress/core/runtime';
+import { getParameters } from 'codesandbox/lib/api/define';
 import MobileOperation from './common/mobile-operation';
 import IconCode from './icons/Code';
+import IconCodesandbox from './icons/Codesandbox';
 import './Container.scss';
 
 type ContainerProps = {
   children: React.ReactNode[];
   isMobile: 'true' | 'false';
+  enableCodesandbox: 'true' | 'false';
   url: string;
+  content: string;
+  packageName: string;
 };
 
 const Container: React.FC<ContainerProps> = props => {
-  const { children, isMobile, url } = props;
+  const { children, isMobile, url, content, packageName, enableCodesandbox } =
+    props;
   const [showCode, setShowCode] = useState(false);
   const lang = useLang();
 
@@ -34,6 +40,54 @@ const Container: React.FC<ContainerProps> = props => {
     setIframeKey(Math.random());
   }, []);
 
+  const gotoCodeSandBox = () => {
+    const sandBoxConfig = {
+      files: {
+        'package.json': {
+          isBinary: false,
+          content: JSON.stringify({
+            dependencies: {
+              react: '18',
+              'react-dom': '18',
+              [packageName]: 'latest',
+            },
+          }),
+        },
+        [`demo.tsx`]: {
+          isBinary: false,
+          content,
+        },
+        [`index.tsx`]: {
+          isBinary: false,
+          content: [
+            `import React from 'react'`,
+            `import ReactDOM from 'react-dom'`,
+            `import Demo from './demo'`,
+            `ReactDOM.render(<Demo />, document.getElementById('root'))`,
+          ].join('\n'),
+        },
+      },
+    };
+
+    // to specific demo file
+    const query = `file=/demo.tsx`;
+    const form = document.createElement('form');
+    form.action = `https://codesandbox.io/api/v1/sandboxes/define?query=${encodeURIComponent(
+      query,
+    )}`;
+    form.target = '_blank';
+    form.method = 'POST';
+    form.style.display = 'none';
+    const field = document.createElement('input');
+    field.name = 'parameters';
+    field.type = 'hidden';
+    field.setAttribute('value', getParameters(sandBoxConfig));
+    form.appendChild(field);
+    document.body.appendChild(form);
+    form.submit();
+    document.body.removeChild(form);
+  };
+
   return (
     <NoSSR>
       <div className="rspress-preview">
@@ -42,7 +96,13 @@ const Container: React.FC<ContainerProps> = props => {
             <div className="rspress-preview-code">{children?.[0]}</div>
             <div className="rspress-preview-device">
               <iframe src={getPageUrl()} key={iframeKey}></iframe>
-              <MobileOperation url={url} refresh={refresh} />
+              <MobileOperation
+                url={url}
+                refresh={refresh}
+                gotoCodeSandBox={
+                  enableCodesandbox === 'true' ? gotoCodeSandBox : undefined
+                }
+              />
             </div>
           </div>
         ) : (
@@ -51,16 +111,28 @@ const Container: React.FC<ContainerProps> = props => {
               <div
                 style={{
                   overflow: 'auto',
-                  marginRight: '44px',
+                  flex: 'auto',
                 }}
               >
                 {children?.[1]}
               </div>
               <div className="rspress-preview-operations web">
+                {enableCodesandbox === 'true' && (
+                  <button
+                    onClick={gotoCodeSandBox}
+                    aria-label={
+                      lang === 'zh'
+                        ? '在 Codesandbox 打开'
+                        : 'Open in Codesandbox'
+                    }
+                  >
+                    <IconCodesandbox />
+                  </button>
+                )}
                 <button
                   onClick={toggleCode}
-                  aria-label={lang === 'zh' ? '收起代码' : ''}
-                  className={showCode ? 'button-expanded' : 'Collapse Code'}
+                  aria-label={lang === 'zh' ? '收起代码' : 'Collapse Code'}
+                  className={showCode ? 'button-expanded' : ''}
                 >
                   <IconCode />
                 </button>

package/static/global-components/common/mobile-operation.tsx

@@ -4,15 +4,18 @@ import { withBase, useLang } from '@rspress/core/runtime';
 import IconLaunch from '../icons/Launch';
 import IconQrcode from '../icons/Qrcode';
 import IconRefresh from '../icons/Refresh';
+import IconCodesandbox from '../icons/Codesandbox';
 
 const locales = {
   zh: {
     refresh: '刷新页面',
     open: '在新页面打开',
+    codesandbox: '在 Codesandbox 打开',
   },
   en: {
-    refresh: 'refresh',
+    refresh: 'Refresh',
     open: 'Open in new page',
+    codesandbox: 'Open in Codesandbox',
   },
 };
 
@@ -20,9 +23,10 @@ export default (props: {
   url: string;
   className?: string;
   refresh: () => void;
+  gotoCodeSandBox?: () => void;
 }) => {
   const [showQRCode, setShowQRCode] = useState(false);
-  const { url, className = '', refresh } = props;
+  const { url, className = '', refresh, gotoCodeSandBox } = props;
   const lang = useLang();
   const triggerRef = useRef(null);
   const t = lang === 'zh' ? locales.zh : locales.en;
@@ -85,6 +89,11 @@ export default (props: {
 
   return (
     <div className={`rspress-preview-operations mobile ${className}`}>
+      {gotoCodeSandBox && (
+        <button onClick={gotoCodeSandBox} aria-label={t.codesandbox}>
+          <IconCodesandbox />
+        </button>
+      )}
       <button onClick={refresh} aria-label={t.refresh}>
         <IconRefresh />
       </button>

package/static/global-components/icons/Codesandbox.tsx

@@ -0,0 +1,22 @@
+const Codesandbox = ({ color = 'currentColor', ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 48 48"
+    fill="none"
+    stroke={color}
+    strokeWidth="4"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M25.0016 1.5998L42.9016 11.8998C43.5016 12.2998 43.9016 12.8998 43.9016 13.5998V34.2998C43.9016 34.9998 43.5016 35.6998 42.9016 35.9998L25.0016 46.3998C24.4016 46.7998 23.6016 46.7998 23.0016 46.3998L5.10156 36.0998C4.50156 35.6998 4.10156 35.0998 4.10156 34.3998V13.6998C4.10156 12.9998 4.50156 12.2998 5.10156 11.9998L23.0016 1.5998C23.6016 1.1998 24.4016 1.1998 25.0016 1.5998ZM38.5016 13.9998L30.6016 9.49981L24.0016 13.9998L17.5016 9.9998L10.2016 14.2998L24.0016 22.9998L38.5016 13.9998ZM22.0016 40.3998V26.2998L8.00156 17.3998V25.2998L16.0016 30.7998V36.9998L22.0016 40.3998ZM26.0016 40.3998L32.0016 36.8998V31.6998L40.0016 26.1998V17.2998L26.0016 26.1998V40.3998Z"
+      fill="currentColor"
+      stroke="none"
+      stroke-width="none"
+      stroke-linecap="butt"
+    ></path>
+  </svg>
+);
+
+export default Codesandbox;