feat: add formatter to sandbox

components/CodeMirrorEditor.vue

@@ -87,6 +87,48 @@
 };
 
 
+const format = async () => {
+  if (!view) {
+    return;
+  }
+
+
+  const code = view.state.doc.toString();
+  try {
+    const [prettier, prettierPluginBabel, prettierPluginEstree] = await Promise.all([
+      import('prettier/standalone'),
+      import('prettier/plugins/babel'),
+      import('prettier/plugins/estree'),
+    ]);
+
+
+    const formatted = await prettier.format(code, {
+      parser: language === 'json' ? 'json' : 'babel',
+      plugins: [
+        prettierPluginBabel.default || prettierPluginBabel,
+        prettierPluginEstree.default || prettierPluginEstree,
+      ],
+      printWidth: 120,
+      semi: false,
+      singleQuote: true,
+      trailingComma: 'all',
+    });
+
+
+    if (formatted !== code) {
+      view.dispatch({
+        changes: { from: 0, insert: formatted, to: view.state.doc.length },
+      });
+    }
+  } catch (err) {
+    console.error('Format error:', err);
+  }
+};
+
+
+defineExpose({ format });
+
+
 onMounted(() => {
   const extensions = [
     basicSetup,

components/TesterContent.vue

@@ -8,13 +8,19 @@
     </div>
 
     <div class="field">
-      <h2 class="tester-subTitle">Schema:</h2>
-      <CodeMirrorEditor v-model="schema" :joi-version="version" />
+      <div class="field-header">
+        <h2 class="tester-subTitle">Schema:</h2>
+        <button class="format-button" @click="schemaEditor.format()">Format</button>
+      </div>
+      <CodeMirrorEditor ref="schemaEditor" v-model="schema" :joi-version="version" />
     </div>
 
     <div class="field">
-      <h2 class="tester-subTitle">Data To Validate:</h2>
-      <CodeMirrorEditor v-model="validate" language="json" />
+      <div class="field-header">
+        <h2 class="tester-subTitle">Data To Validate:</h2>
+        <button class="format-button" @click="validateEditor.format()">Format</button>
+      </div>
+      <CodeMirrorEditor ref="validateEditor" v-model="validate" language="json" />
     </div>
 
     <div class="actions">
@@ -114,6 +120,10 @@ const { copy, copied: isCopied } = useClipboard();
 const showResetConfirm = ref(false);
 
 
+const schemaEditor = ref(null);
+const validateEditor = ref(null);
+
+
 const loadJoi = async (v) => {
   if (!v) {
     return;
@@ -304,6 +314,35 @@ const onShareClick = async () => {
   margin-bottom: 20px;
 }
 
+.field-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.field-header .tester-subTitle {
+  margin-bottom: 0;
+}
+
+.format-button {
+  border-radius: 6px;
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+  padding: 2px 10px;
+  font-size: 0.9em;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.format-button:hover {
+  border-color: var(--vp-c-brand-1);
+  color: var(--vp-c-brand-1);
+  background: var(--vp-c-bg);
+}
+
 .tester-subTitle {
   font-size: 1.5em;
   margin-bottom: 5px;

package.json

@@ -26,6 +26,7 @@
     "@codemirror/state": "^6.6.0",
     "@codemirror/view": "^6.40.0",
     "@lezer/highlight": "^1.2.3",
+    "@standard-schema/spec": "^1.1.0",
     "@typescript/vfs": "^1.6.4",
     "@uiw/codemirror-theme-darcula": "^4.25.8",
     "@uiw/codemirror-theme-eclipse": "^4.25.8",
@@ -34,7 +35,7 @@
     "es-toolkit": "^1.45.1",
     "joi-17": "npm:joi@17.13.3",
     "joi-18": "npm:joi@18.0.2",
-    "@standard-schema/spec": "^1.1.0",
+    "prettier": "^3.8.1",
     "semver": "^7.7.4",
     "vitepress-plugin-group-icons": "^1.7.1",
     "vue": "^3.5.30"