Ensure unique Monaco models for diff sources

Kevinjil · Kevinjil · commit 46e5d5837095 · 2025-09-16T20:27:06.000+02:00
Monaco stores source code in a global service. The URIs of every source
must be unique. As we are not editing the diff files anyway, we can make
sure to only render them once and share them between diff viewers to
reduce overhead.
diff --git a/webapp/src/Twig/TwigExtension.php b/webapp/src/Twig/TwigExtension.php
@@ -43,6 +43,9 @@
 
 class TwigExtension extends AbstractExtension implements GlobalsInterface
 {
+    /**
+     * @param array<int, bool> $renderedSources
+     */
     public function __construct(
         protected readonly DOMJudgeService $dj,
         protected readonly ConfigurationService $config,
@@ -55,7 +58,8 @@ public function __construct(
         protected readonly AuthorizationCheckerInterface $authorizationChecker,
         protected readonly RouterInterface $router,
         #[Autowire('%kernel.project_dir%')]
-        protected readonly string $projectDir
+        protected readonly string $projectDir,
+        protected array $renderedSources = []
     ) {}
 
     public function getFunctions(): array
@@ -917,23 +921,48 @@ public function codeEditor(
                            sprintf($editor, $code, $editable ? 'false' : 'true', $mode, $extraForEdit));
     }
 
+    /**
+     * Gets the JavaScript to get a Monaco model instance for the submission file.
+     * Renders the source code of the file as Monaco model, if not already rendered.
+     * @param SubmissionFile $file The submission file to render
+     * @return string The JavaScript source assignable to a model variable.
+     */
+    public function getMonacoModel(SubmissionFile $file): string
+    {
+        if (array_key_exists($file->getSubmitfileid(), $this->renderedSources)) {
+            return sprintf(
+                <<<JS
+monaco.editor.getModel(monaco.Uri.parse("diff/%d/%s"));
+JS,
+                $file->getSubmitfileid(),
+                $file->getFilename(),
+            );
+        }
+        $this->renderedSources[$file->getSubmitfileid()] = true;
+
+        return sprintf(
+            <<<JS
+monaco.editor.createModel(
+    "%s",
+    undefined,
+    monaco.Uri.parse("diff/%d/%s")
+);
+JS,
+            $this->twig->getRuntime(EscaperRuntime::class)->escape($file->getSourcecode(), 'js'),
+            $file->getSubmitfileid(),
+            $file->getFilename(),
+        );
+    }
+
     public function showDiff(string $id, SubmissionFile $newFile, SubmissionFile $oldFile): string
     {
         $editor = <<<HTML
 <div class="editor" id="__EDITOR__"></div>
 <script>
 $(function() {
     require(['vs/editor/editor.main'], function () {
-        const originalModel = monaco.editor.createModel(
-            "%s",
-            undefined,
-            monaco.Uri.parse("diff-old/%s")
-        );
-        const modifiedModel = monaco.editor.createModel(
-            "%s",
-            undefined,
-            monaco.Uri.parse("diff-new/%s")
-        );
+        const originalModel = %s
+        const modifiedModel = %s
 
         const initialDiffMode = getDiffMode();
         const radios = $("#diffselect-__EDITOR__ > input[name='__EDITOR__-mode']");
@@ -988,10 +1017,8 @@ public function showDiff(string $id, SubmissionFile $newFile, SubmissionFile $ol
 
         return sprintf(
             str_replace('__EDITOR__', $id, $editor),
-            $this->twig->getRuntime(EscaperRuntime::class)->escape($oldFile->getSourcecode(), 'js'),
-            $oldFile->getFilename(),
-            $this->twig->getRuntime(EscaperRuntime::class)->escape($newFile->getSourcecode(), 'js'),
-            $newFile->getFilename(),
+            $this->getMonacoModel($oldFile),
+            $this->getMonacoModel($newFile),
         );
     }
 
