From c73b7868d73d3dad792c80a36507ce92234443d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B9=90=E5=B9=B3?= <leping086@vip.qq.com>
Date: Thu, 22 Aug 2024 19:38:39 +0800
Subject: [PATCH] feat: add more customization options (#274)

Co-authored-by: wangleping <wangleping@xiaohongshu.com>
---
 src/Repl.vue                 | 11 +++++++++++
 src/editor/MessageToggle.vue |  6 +++++-
 src/output/Preview.vue       |  4 ++--
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/Repl.vue b/src/Repl.vue
index 30e0bc20..3520a8df 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -28,6 +28,11 @@ export interface Props {
       importCode?: string
       useCode?: string
     }
+    showRuntimeError?: boolean
+    showRuntimeWarning?: boolean
+  }
+  editorOptions?: {
+    ShowErrorText?: string
   }
 }
 
@@ -51,8 +56,13 @@ const props = withDefaults(defineProps<Props>(), {
       importCode: '',
       useCode: '',
     },
+    showRuntimeError: true,
+    showRuntimeWarning: true,
   }),
   layout: 'horizontal',
+  editorOptions: () => ({
+    ShowErrorText: 'Show Error',
+  }),
 })
 
 if (!props.editor) {
@@ -73,6 +83,7 @@ provide('import-map', toRef(props, 'showImportMap'))
 provide('tsconfig', toRef(props, 'showTsConfig'))
 provide('clear-console', toRef(props, 'clearConsole'))
 provide('preview-options', props.previewOptions)
+provide('editor-options', props.editorOptions)
 provide('theme', toRef(props, 'theme'))
 provide('preview-theme', toRef(props, 'previewTheme'))
 provide('preview-ref', () => outputRef.value?.previewRef?.container)
diff --git a/src/editor/MessageToggle.vue b/src/editor/MessageToggle.vue
index 7c7943cf..107ff665 100644
--- a/src/editor/MessageToggle.vue
+++ b/src/editor/MessageToggle.vue
@@ -1,10 +1,14 @@
 <script setup lang="ts">
+import { inject } from 'vue'
+import type { Props } from '../Repl.vue'
+
+const editorOptions = inject<Props['editorOptions']>('editor-options')
 const visible = defineModel<boolean>()
 </script>
 
 <template>
   <div class="wrapper" @click="visible = !visible">
-    <span>Show Error</span>
+    <span>{{ editorOptions?.ShowErrorText }}</span>
     <div class="toggle" :class="[{ active: modelValue }]">
       <div class="indicator" />
     </div>
diff --git a/src/output/Preview.vue b/src/output/Preview.vue
index a86eb827..793ee957 100644
--- a/src/output/Preview.vue
+++ b/src/output/Preview.vue
@@ -296,8 +296,8 @@ defineExpose({ reload, container })
     class="iframe-container"
     :class="{ [theme]: previewTheme }"
   />
-  <Message :err="runtimeError" />
-  <Message v-if="!runtimeError" :warn="runtimeWarning" />
+  <Message :err="runtimeError && previewOptions?.showRuntimeError" />
+  <Message v-if="!runtimeError && previewOptions?.showRuntimeWarning" :warn="runtimeWarning" />
 </template>
 
 <style scoped>