Ensure unique Monaco models for diff sources

Kevinjil · Kevinjil · commit 80b6f55a05c0 · 2025-09-16T20:15:38.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
@@ -55,7 +55,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 +918,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 +1014,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),
         );
     }
 
