fix: options issue

README.md

@@ -49,6 +49,7 @@ Language support: `angular` | `react` | `react-ts` | `vanilla` | `vanilla-ts` |
   import { defineConfig } from 'vitepress';
   import container from 'markdown-it-container';
   import { renderSandbox } from 'vitepress-plugin-sandpack';
+  import 'vitepress-plugin-sandpack/dist/style.css';
 
   // rule of 'html tag name' to 'component name'
   // 'sanbox' -> 'Sandbox'

docs/docs/custom-usage/custom-options.md

@@ -99,6 +99,7 @@ export default {
 import { defineConfig } from 'vitepress';
 import container from 'markdown-it-container';
 import { renderSandbox } from 'vitepress-plugin-sandpack';
+import 'vitepress-plugin-sandpack/dist/style.css';
 
 // rule of 'html tag name' to 'component name'
 // 'sanbox' -> 'Sandbox'

docs/docs/custom-usage/custom.md

@@ -101,6 +101,7 @@ export default {
 import { defineConfig } from 'vitepress';
 import container from 'markdown-it-container';
 import { renderSandbox } from 'vitepress-plugin-sandpack';
+import 'vitepress-plugin-sandpack/dist/style.css';
 
 // rule of 'html tag name' to 'component name'
 // 'sanbox' -> 'Sandbox'

docs/docs/get-started/install.md

@@ -42,6 +42,7 @@ We recommend converting your config to ESM `by either`:
 ```diff
 import DefaultTheme from 'vitepress/theme';
 +import { Sandbox } from 'vitepress-plugin-sandpack';
++import 'vitepress-plugin-sandpack/dist/style.css';
 
 export default {
   ...DefaultTheme,
@@ -60,6 +61,7 @@ export default {
 import { defineConfig } from 'vitepress';
 import container from 'markdown-it-container';
 import { renderSandbox } from 'vitepress-plugin-sandpack';
+import 'vitepress-plugin-sandpack/dist/style.css';
 
 // rule of 'html tag name' to 'component name'
 // 'sanbox' -> 'Sandbox'

docs/package.json

@@ -10,6 +10,6 @@
   },
   "devDependencies": {
     "highlight.js": "^11.9.0",
-    "vitepress": "^1.0.0-rc.21"
+    "vitepress": "^1.0.0-rc.22"
   }
 }

package.json

@@ -53,7 +53,6 @@
     "docs"
   ],
   "scripts": {
-    "postinstall": "patch-package",
     "build": "vite build",
     "docs": "npm run docs:dev -w docs",
     "build:docs": "npm run docs:build -w docs",
@@ -70,10 +69,10 @@
     "sandpack-vue3": "^3.1.9"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.7.2",
-    "@commitlint/config-conventional": "^17.7.0",
-    "@typescript-eslint/eslint-plugin": "^6.7.5",
-    "@typescript-eslint/parser": "^6.7.5",
+    "@commitlint/cli": "^17.8.0",
+    "@commitlint/config-conventional": "^17.8.0",
+    "@typescript-eslint/eslint-plugin": "^6.8.0",
+    "@typescript-eslint/parser": "^6.8.0",
     "@vitejs/plugin-vue": "^4.4.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "babel-loader": "^9.1.3",
@@ -85,8 +84,7 @@
     "eslint-plugin-vue": "^9.17.0",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",
-    "npm": "^10.2.0",
-    "patch-package": "^8.0.0",
+    "npm": "^10.2.1",
     "typescript": "^5.2.2",
     "vite-plugin-dts": "^3.6.0",
     "vue-tsc": "^1.8.19"

src/components/Sandbox.vue

@@ -20,13 +20,15 @@ const props = defineProps(sandboxProps);
 
 const files = ref<SandpackFiles>({});
 
-const editorVisible = computed(() => parsedBoolean(props.hideEditor) ? 'none' : 'flex');
+const getOpt = (propName: string) => props[propName] || props?.options?.[propName];
 
-const previewHeight = computed(() => isNaN(Number(props.previewHeight)) ? undefined : Number(props.previewHeight));
+const editorVisible = computed(() => parsedBoolean(getOpt('hideEditor')) ? 'none' : 'flex');
+
+const previewHeight = computed(() => isNaN(Number(getOpt('previewHeight'))) ? undefined : Number(getOpt('previewHeight')));
 const previewHeightStyle =
   computed(() => previewHeight.value ? `${previewHeight.value}px` : 'var(--sp-layout-height)');
 
-const coderHeight = computed(() => isNaN(Number(props.coderHeight)) ? undefined : Number(props.coderHeight));
+const coderHeight = computed(() => isNaN(Number(getOpt('coderHeight'))) ? undefined : Number(getOpt('coderHeight')));
 const coderHeightStyle =
   computed(() => coderHeight.value ? `${coderHeight.value}px` : 'var(--sp-layout-height)');
 
@@ -36,8 +38,8 @@ const isDark = ref(false);
 
 const docsTheme = computed(
   () => isDark.value
-    ? (allThemes[props.darkTheme as Theme] || 'dark')
-    : (allThemes[props.lightTheme as Theme] || 'light'),
+    ? (allThemes[getOpt('darkTheme') as Theme] || 'dark')
+    : (allThemes[getOpt('lightTheme') as Theme] || 'light'),
 );
 
 const resolveFiles = async () => {