Add a toggle to enable side-by-side diff viewer

Kevinjil · Kevinjil · commit 678d7a0b9beb · 2024-12-14T15:02:20.000Z
Store the last toggled diff viewer state in the local storage. The way
diffs are viewed is mostly a user preference, but depending on the file
and type of changes, the option to quickly toggle it can come in handy.

Note that for multi-file submissions, a per-file toggle is included in
the tab, but on reload all tabs will have the state of the last toggled
switch.
diff --git a/webapp/public/js/domjudge.js b/webapp/public/js/domjudge.js
@@ -124,6 +124,20 @@ function applyEditorTheme(theme = undefined, isExternal = false)
     });
 }
 
+function isDiffSideBySide()
+{
+    let sideBySide = localStorage.getItem('domjudge_editor_side_by_side');
+    if (sideBySide === undefined) {
+        return true;
+    }
+    return sideBySide == 'true';
+}
+
+function setDiffSideBySide(value)
+{
+    localStorage.setItem('domjudge_editor_side_by_side', value);
+}
+
 // Send a notification if notifications have been enabled.
 // The options argument is passed to the Notification constructor,
 // except that the following tags (if found) are interpreted and
diff --git a/webapp/src/Twig/TwigExtension.php b/webapp/src/Twig/TwigExtension.php
@@ -929,6 +929,10 @@ protected function parseSourceDiff(string $difftext): string
     public function showDiff(string $id, SubmissionFile $newFile, SubmissionFile $oldFile): string
     {
         $editor = <<<HTML
+<div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" id="__EDITOR__SBS">
+    <label class="form-check-label" for="__EDITOR__SBS">Use side-by-side diff viewer</label>
+</div>
 <div class="editor" id="__EDITOR__"></div>
 <script>
 $(function() {
@@ -943,6 +947,17 @@ public function showDiff(string $id, SubmissionFile $newFile, SubmissionFile $ol
             undefined,
             monaco.Uri.parse("diff-new/%s")
         );
+
+        const sideBySide = isDiffSideBySide()
+        sideBySideSwitch = $("#__EDITOR__SBS");
+        sideBySideSwitch.prop('checked', sideBySide);
+        sideBySideSwitch.change(function(e) {
+            setDiffSideBySide(e.target.checked);
+            diffEditor.updateOptions({
+                renderSideBySide: e.target.checked,
+            });
+        });
+
         const diffEditor = monaco.editor.createDiffEditor(
             document.getElementById("__EDITOR__"), {
             scrollbar: {
@@ -952,6 +967,7 @@ public function showDiff(string $id, SubmissionFile $newFile, SubmissionFile $ol
             scrollBeyondLastLine: false,
             automaticLayout: true,
             readOnly: true,
+            renderSideBySide: sideBySide,
             theme: getCurrentEditorTheme(),
         });
         diffEditor.setModel({
