2 files changed, 13 insertions, 2 deletions

diff --git a/language-web/src/main/js/editor/EditorButtons.tsx b/language-web/src/main/js/editor/EditorButtons.tsx
index 09ce33dd..150aa00d 100644
--- a/language-web/src/main/js/editor/EditorButtons.tsx
+++ b/language-web/src/main/js/editor/EditorButtons.tsx
@@ -7,6 +7,7 @@ import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import CheckIcon from '@mui/icons-material/Check';
 import ErrorIcon from '@mui/icons-material/Error';
 import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
+import FormatPaint from '@mui/icons-material/FormatPaint';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import RedoIcon from '@mui/icons-material/Redo';
 import SearchIcon from '@mui/icons-material/Search';
@@ -47,7 +48,6 @@ export const EditorButtons = observer(() => {
           disabled={!editorStore.canUndo}
           onClick={() => editorStore.undo()}
           aria-label="Undo"
-          value="undo"
         >
           <UndoIcon fontSize="small" />
         </IconButton>
@@ -55,7 +55,6 @@ export const EditorButtons = observer(() => {
           disabled={!editorStore.canRedo}
           onClick={() => editorStore.redo()}
           aria-label="Redo"
-          value="redo"
         >
           <RedoIcon fontSize="small" />
         </IconButton>
@@ -88,6 +87,12 @@ export const EditorButtons = observer(() => {
           {getLintIcon(editorStore.highestDiagnosticLevel)}
         </ToggleButton>
       </ToggleButtonGroup>
+      <IconButton
+        onClick={() => editorStore.formatText()}
+        aria-label="Automatic format"
+      >
+        <FormatPaint fontSize="small" />
+      </IconButton>
     </Stack>
   );
 });
diff --git a/language-web/src/main/js/editor/EditorStore.ts b/language-web/src/main/js/editor/EditorStore.ts
index 059233f4..5760de28 100644
--- a/language-web/src/main/js/editor/EditorStore.ts
+++ b/language-web/src/main/js/editor/EditorStore.ts
@@ -115,6 +115,7 @@ export class EditorStore {
         lineNumbers(),
         foldGutter(),
         keymap.of([
+          { key: 'Mod-Shift-f', run: () => this.formatText() },
           ...closeBracketsKeymap,
           ...commentKeymap,
           ...completionKeymap,
@@ -280,4 +281,9 @@ export class EditorStore {
   toggleLintPanel(): void {
     this.setLintPanelOpen(!this.showLintPanel);
   }
+
+  formatText(): boolean {
+    this.client.formatText();
+    return true;
+  }
 }