fix: output toggle button

src/Repl.vue

@@ -40,6 +40,11 @@ export interface Props {
     showErrorText?: string
     monacoOptions?: monaco.editor.IStandaloneEditorConstructionOptions
   }
+  splitPaneOptions?: {
+    CodeTogglerButtonText?: string
+    OutputTogglerButtonText?: string
+  }
+  isEmbedMode?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -57,6 +62,11 @@ const props = withDefaults(defineProps<Props>(), {
   layout: 'horizontal',
   previewOptions: () => ({}),
   editorOptions: () => ({}),
+  splitPaneOptions: () => ({
+    CodeTogglerButtonText: '< Code',
+    OutputTogglerButtonText: 'Output >',
+  }),
+  isEmbedMode: false
 })
 
 if (!props.editor) {

src/SplitPane.vue

@@ -9,7 +9,7 @@ const container = ref()
 const previewRef = inject(injectKeyPreviewRef)!
 
 // mobile only
-const { store } = inject(injectKeyProps)!
+const { store, splitPaneOptions, isEmbedMode } = inject(injectKeyProps)!
 const showOutput = computed(() => store.value.showOutput)
 
 const state = reactive({
@@ -68,6 +68,7 @@ function changeViewSize() {
       dragging: state.dragging,
       'show-output': showOutput,
       vertical: isVertical,
+      'is-embed-mode': isEmbedMode,
     }"
     @mousemove="dragMove"
     @mouseup="dragEnd"
@@ -90,8 +91,12 @@ function changeViewSize() {
       <slot name="right" />
     </div>
 
-    <button class="toggler" @click="showOutput = !showOutput">
-      {{ showOutput ? '< Code' : 'Output >' }}
+    <button class="toggler" @click="store.showOutput = !showOutput">
+      {{
+        showOutput
+          ? splitPaneOptions?.CodeTogglerButtonText
+          : splitPaneOptions?.OutputTogglerButtonText
+      }}
     </button>
   </div>
 </template>
@@ -215,4 +220,35 @@ function changeViewSize() {
     pointer-events: none;
   }
 }
+
+/* embed mode */
+.is-embed-mode .left,
+.is-embed-mode .right {
+  position: absolute;
+  inset: 0;
+  width: auto !important;
+  height: auto !important;
+}
+.is-embed-mode .dragger {
+  display: none;
+}
+.is-embed-mode.split-pane .toggler {
+  display: block;
+}
+.is-embed-mode.split-pane .right {
+  z-index: -1;
+  pointer-events: none;
+}
+.is-embed-mode.split-pane .left {
+  z-index: 0;
+  pointer-events: all;
+}
+.is-embed-mode.split-pane.show-output .right {
+  z-index: 0;
+  pointer-events: all;
+}
+.is-embed-mode.split-pane.show-output .left {
+  z-index: -1;
+  pointer-events: none;
+}
 </style>

test/main.ts

@@ -67,6 +67,11 @@ const App = {
         },
         // showCompileOutput: false,
         // showImportMap: false
+        // splitPaneOptions: {
+        //   CodeTogglerButtonText: '< 代码',
+        //   OutputTogglerButtonText: '输出 >',
+        // },
+        // isEmbedMode: true,
         editorOptions: {
           monacoOptions: {
             // wordWrap: 'on',