feat(web): xtext formatter client

Uses the xtext formatted on the server to format the document.

Also adds the capability to take (delta) changes from the server and
apply them before any pending local changes, then replay the changes.
This means that the server-side formatter is effectively acting as a
second user who is editing the document.

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;
+  }
 }