Code formatting while saving (#382)

stijnpotters1 · Copilot · Daan0709 · web-flow · commit cb436e647732 · 2026-04-17T15:18:26.000+02:00
* fix: code formatting not every save, but on add

* fix: applied linting

* Apply suggestions from code review

Co-authored-by: Copilot &lt;175728472+Copilot@users.noreply.github.com&gt;
Signed-off-by: Stijn Potters &lt;stijn.potters1@gmail.com&gt;

* fix: exception error in controller

* Changed formatting to 3 spaces to be in line with backend formatting. Also formats configurations when a flow gets saved

* Moved function to outer scope

* Updated test

* fix: enhance XML configuration handling and formatting

* fix: update editor options for tab size and indentation settings

---------

Signed-off-by: Stijn Potters &lt;stijn.potters1@gmail.com&gt;
Co-authored-by: Copilot &lt;175728472+Copilot@users.noreply.github.com&gt;
Co-authored-by: Daan0709 &lt;daanvmaldegem@live.nl&gt;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/main/frontend/app/routes/editor/editor.tsx b/src/main/frontend/app/routes/editor/editor.tsx
@@ -1,5 +1,7 @@
 import RulerCrossPenIcon from '/icons/solar/Ruler Cross Pen.svg?react'
 import Editor, { type Monaco, type OnMount } from '@monaco-editor/react'
+import prettier from 'prettier/standalone'
+import prettierPluginXml from '@prettier/plugin-xml'
 type ITextModel = Monaco['editor']['ITextModel']
 type FindMatch = Monaco['editor']['FindMatch']
 type IModelDeltaDecoration = Monaco['editor']['IModelDeltaDecoration']
@@ -162,6 +164,14 @@ function isConfigurationFile(fileExtension: string) {
   return fileExtension === 'xml'
 }
 
+function prettierFormat(xml: string): Promise<string> {
+  return prettier.format(xml, {
+    parser: 'xml',
+    plugins: [prettierPluginXml],
+    tabWidth: 2,
+  })
+}
+  
 async function validateFlow(content: string, model: ITextModel): Promise<ValidationError[]> {
   const flowFragment = extractFlowElements(content)
   if (!flowFragment) return []
@@ -311,7 +321,6 @@ export default function CodeEditor() {
       if (isConfigurationFile(fileExtension ?? '')) {
         saveConfiguration(project.name, configPath, updatedContent)
           .then(({ xmlContent }) => {
-            setFileContent(xmlContent)
             contentCacheRef.current.set(activeTabFilePath, { type: 'xml', content: xmlContent })
             finishSaving()
             if (project.isGitRepository) refreshOpenDiffs(project.name)
@@ -384,6 +393,28 @@ export default function CodeEditor() {
     )
   }, [])
 
+  const runPrettierReformat = async () => {
+    const editor = editorReference.current
+    if (!editor) return
+    const model = editor.getModel()
+    if (!model) return
+    try {
+      const formattedValue = await prettierFormat(model.getValue())
+      if (formattedValue === model.getValue()) return
+
+      const selection = editor.getSelection()
+      editor.pushUndoStop()
+      editor.executeEdits(
+        'prettier-reformat',
+        [{ range: model.getFullModelRange(), text: formattedValue, forceMoveMarkers: true }],
+        selection ? [selection] : undefined,
+      )
+      editor.pushUndoStop()
+    } catch (error) {
+      console.error('Failed to reformat XML:', error)
+    }
+  }
+
   const runSchemaValidation = useCallback(
     async (content: string) => {
       const editor = editorReference.current
@@ -431,7 +462,6 @@ export default function CodeEditor() {
 
     xsdFeatures.addCompletion()
     xsdFeatures.addGenerateAction()
-    xsdFeatures.addReformatAction()
 
     fetchFrankConfigXsd()
       .then((xsdContent) => {
@@ -481,6 +511,19 @@ export default function CodeEditor() {
         }
       },
     })
+
+    editor.addAction({
+      id: 'reformat-xml-prettier',
+      label: 'Reformat',
+      contextMenuGroupId: 'navigation',
+      contextMenuOrder: 3,
+      keybindings: [
+        monacoReference.current.KeyMod.Alt |
+          monacoReference.current.KeyMod.Shift |
+          monacoReference.current.KeyCode.KeyF,
+      ],
+      run: runPrettierReformat,
+    })
   }
 
   useEffect(() => {
@@ -708,7 +751,7 @@ export default function CodeEditor() {
                       applyFlowHighlighter() // Real-time highlight updates
                     }
                   }}
-                  options={{ automaticLayout: true, quickSuggestions: false }}
+                  options={{ automaticLayout: true, quickSuggestions: false, tabSize: 2, insertSpaces: true, detectIndentation: false }}
                 />
               </div>
             </>
diff --git a/src/main/frontend/app/routes/studio/canvas/flow.tsx b/src/main/frontend/app/routes/studio/canvas/flow.tsx
@@ -173,7 +173,7 @@ function FlowCanvas() {
       await saveConfiguration(currentProject.name, configurationPath, updatedConfigXml)
       clearConfigurationCache(currentProject.name, configurationPath)
       useEditorTabStore.getState().refreshAllTabs()
-      if (currentProject.isGitRepository) refreshOpenDiffs(currentProject.name)
+      if (currentProject.isGitRepository) await refreshOpenDiffs(currentProject.name)
 
       setSaveStatus('saved')
       if (savedTimerRef.current) clearTimeout(savedTimerRef.current)
diff --git a/src/main/frontend/app/stores/shortcut-store.ts b/src/main/frontend/app/stores/shortcut-store.ts
@@ -111,6 +111,14 @@ export const ALL_SHORTCUTS: Omit<ShortcutDefinition, 'handler'>[] = [
     modifiers: { cmdOrCtrl: true, shift: true },
     displayOnly: true,
   },
+  {
+    id: 'editor.reformat',
+    label: 'Reformat XML',
+    scope: 'editor',
+    key: 'f',
+    modifiers: { alt: true, shift: true },
+    displayOnly: true,
+  },
   { id: 'editor.search', label: 'Find', scope: 'editor', key: 'f', modifiers: { cmdOrCtrl: true }, displayOnly: true },
   {
     id: 'editor.replace',
diff --git a/src/main/frontend/package.json b/src/main/frontend/package.json
@@ -61,6 +61,7 @@
     "eslint-plugin-sonarjs": "^3.0.7",
     "eslint-plugin-unicorn": "^62.0.0",
     "jsdom": "^27.4.0",
+    "@prettier/plugin-xml": "^3.4.1",
     "prettier": "^3.8.1",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "react-router-devtools": "^1.1.10",
diff --git a/src/main/java/org/frankframework/flow/adapter/AdapterService.java b/src/main/java/org/frankframework/flow/adapter/AdapterService.java
@@ -84,7 +84,6 @@ public boolean updateAdapter(Path configurationFile, String adapterName, String
 			String updatedXml = XmlConfigurationUtils.convertNodeToString(configDoc);
 			Files.writeString(absConfigFile, updatedXml, StandardCharsets.UTF_8, StandardOpenOption.TRUNCATE_EXISTING);
 			return true;
-
 		} catch (AdapterNotFoundException e) {
 			throw e;
 		} catch (Exception e) {
diff --git a/src/main/java/org/frankframework/flow/configuration/ConfigurationController.java b/src/main/java/org/frankframework/flow/configuration/ConfigurationController.java
@@ -52,7 +52,7 @@ public ResponseEntity<XmlDTO> updateConfiguration(
 	public ResponseEntity<XmlDTO> addConfiguration(
 			@PathVariable String projectName,
 			@RequestParam String name
-	) throws ApiException, IOException {
+	) throws ApiException, IOException, TransformerException, ParserConfigurationException, SAXException {
 		String content = configurationService.addConfiguration(projectName, name);
 		XmlDTO xmlDTO = new XmlDTO(content);
 		return ResponseEntity.ok(xmlDTO);
diff --git a/src/main/java/org/frankframework/flow/configuration/ConfigurationService.java b/src/main/java/org/frankframework/flow/configuration/ConfigurationService.java
@@ -49,14 +49,18 @@ public String updateConfiguration(String projectName, String filepath, String co
 			throw new ApiException("Invalid file path: " + filepath, HttpStatus.NOT_FOUND);
 		}
 
-		Document updatedDocument = XmlConfigurationUtils.insertFlowNamespace(content);
-		String updatedContent = XmlConfigurationUtils.convertNodeToString(updatedDocument);
 
-		fileSystemStorage.writeFile(absolutePath.toString(), updatedContent);
-		return updatedContent;
+		Document document = XmlConfigurationUtils.insertFlowNamespace(content);
+		if (document == null) {
+			throw new ApiException("Configuration content must not be blank", HttpStatus.BAD_REQUEST);
+		}
+
+		String formatted = XmlConfigurationUtils.convertNodeToString(document);
+		fileSystemStorage.writeFile(absolutePath.toString(), formatted);
+		return formatted;
 	}
 
-	public String addConfiguration(String projectName, String configurationName) throws IOException, ApiException {
+	public String addConfiguration(String projectName, String configurationName) throws IOException, ApiException, TransformerException, ParserConfigurationException, SAXException {
 		Project project =  projectService.getProject(projectName);
 		Path absProjectPath = fileSystemStorage.toAbsolutePath(project.getRootPath());
 		Path configDir = absProjectPath.resolve(CONFIGURATIONS_DIR).normalize();
@@ -71,8 +75,11 @@ public String addConfiguration(String projectName, String configurationName) thr
 		}
 
 		String defaultXml = loadDefaultConfigurationXml();
-		fileSystemStorage.writeFile(filePath.toString(), defaultXml);
-		return defaultXml;
+		Document updatedDocument = XmlConfigurationUtils.insertFlowNamespace(defaultXml);
+		String updatedContent = XmlConfigurationUtils.convertNodeToString(updatedDocument);
+		fileSystemStorage.writeFile(filePath.toString(), updatedContent);
+
+		return updatedContent;
 	}
 
 	private String loadDefaultConfigurationXml() throws IOException {
diff --git a/src/test/java/org/frankframework/flow/configuration/ConfigurationServiceTest.java b/src/test/java/org/frankframework/flow/configuration/ConfigurationServiceTest.java
@@ -2,6 +2,7 @@
 
 import static org.junit.jupiter.api.Assertions.*;
 import static org.mockito.ArgumentMatchers.anyString;
+import static org.mockito.ArgumentMatchers.eq;
 import static org.mockito.Mockito.*;
 
 import java.io.IOException;
@@ -111,8 +112,9 @@ void updateConfiguration_Success() throws Exception {
 
 		configurationService.updateConfiguration("test", file.toString(), "<new/>");
 
-		assertEquals("<new/>\n", Files.readString(file, StandardCharsets.UTF_8));
-		verify(fileSystemStorage).writeFile(file.toString(), "<new/>\n");
+		String result = Files.readString(file, StandardCharsets.UTF_8).trim();
+		assertEquals("<new/>", result);
+		verify(fileSystemStorage).writeFile(eq(file.toString()), anyString());
 	}
 
 	@Test
