feat: improve plugin json error recovery

e2e/tests/plugin_metadata.crud-all-fields.spec.ts

@@ -75,8 +75,29 @@ test('should CRUD plugin metadata with all fields', async ({ page }) => {
     await expect(addPluginDialog).toBeVisible();
     await addPluginDialog.getByRole('tab', { name: 'JSON' }).click();
 
-    // Fill in comprehensive configuration with all available fields
     const pluginEditor = await uiGetMonacoEditor(page, addPluginDialog);
+    await page.evaluate(() => {
+      window.__monacoEditor__?.getModel()?.setValue('{');
+    });
+    await page.waitForFunction(
+      () => window.__monacoEditor__?.getModel()?.getValue() === '{'
+    );
+    await pluginEditor.blur();
+    await expect(pluginEditor.getByText('{')).toBeVisible();
+    await addPluginDialog.getByRole('button', { name: 'Add Plugin' }).click();
+    const jsonErrorAlert = addPluginDialog.getByRole('alert').filter({
+      hasText: /Invalid JSON:|JSON format is not valid/,
+    });
+    await expect(jsonErrorAlert).toBeVisible();
+    await expect(
+      addPluginDialog.getByRole('button', { name: 'Format JSON after error' })
+    ).toBeVisible();
+    await addPluginDialog
+      .getByRole('button', { name: 'Reset JSON after error' })
+      .click();
+    await expect(jsonErrorAlert).toBeHidden();
+
+    // Fill in comprehensive configuration with all available fields
     await uiFillMonacoEditor(
       page,
       pluginEditor,

src/components/form-slice/FormItemPlugins/PluginEditorDrawer.tsx

@@ -296,6 +296,27 @@ export const PluginEditorDrawer = (props: PluginEditorDrawerProps) => {
     setFormValue(nextValue);
     setSaveError(null);
   }, [config, methods, mode, schema]);
+  const saveErrorActions =
+    activeTab === 'json' && mode !== 'view' ? (
+      <Space wrap>
+        <Button
+          size="small"
+          icon={<IconFormatAlignLeft />}
+          onClick={formatJsonConfig}
+          aria-label="Format JSON after error"
+        >
+          Format JSON
+        </Button>
+        <Button
+          size="small"
+          icon={<IconRefresh />}
+          onClick={resetJsonConfig}
+          aria-label="Reset JSON after error"
+        >
+          Reset JSON
+        </Button>
+      </Space>
+    ) : undefined;
 
   const handleSave = methods.handleSubmit(
     async () => {
@@ -444,6 +465,17 @@ export const PluginEditorDrawer = (props: PluginEditorDrawerProps) => {
             </Tooltip>
           </Space>
         )}
+        {mode !== 'view' && saveError && (
+          <Alert
+            type="error"
+            showIcon
+            message={saveError}
+            action={saveErrorActions}
+            closable
+            onClose={() => setSaveError(null)}
+            style={{ marginBottom: 12, whiteSpace: 'pre-wrap' }}
+          />
+        )}
         <form>
           {canUseForm ? (
             <Tabs
@@ -461,17 +493,6 @@ export const PluginEditorDrawer = (props: PluginEditorDrawerProps) => {
             />
           )}
         </form>
-
-        {mode !== 'view' && saveError && (
-          <Alert
-            type="error"
-            showIcon
-            message={saveError}
-            closable
-            onClose={() => setSaveError(null)}
-            style={{ marginTop: 8, whiteSpace: 'pre-wrap' }}
-          />
-        )}
       </Drawer>
     </FormProvider>
   );

src/components/form/Editor.tsx

@@ -182,7 +182,7 @@ export const FormItemEditor = <T extends FieldValues>(
             trigger(props.name);
           }}
           onMount={(editor) => {
-            if (process.env.NODE_ENV === 'test') {
+            if (process.env.NODE_ENV === 'test' || import.meta.env.DEV) {
               window.__monacoEditor__ = editor;
             }
           }}