ASTDiff: Fix SingleMonacoContent

Author: pouryafard75

src/main/java/gui/webdiff/viewers/monaco/SingleMonacoContent.java

@@ -1,10 +1,14 @@
 package gui.webdiff.viewers.monaco;
 
+import gui.webdiff.WebDiff;
+import org.rendersnake.DocType;
 import org.rendersnake.HtmlCanvas;
 import org.rendersnake.Renderable;
 
 import java.io.IOException;
 
+import static org.rendersnake.HtmlAttributesFactory.*;
+
 public class SingleMonacoContent implements Renderable {
 
     private final boolean isAdded;
@@ -18,28 +22,70 @@ public SingleMonacoContent(boolean isAdded, String path, String escapedContent)
     }
 
     @Override
-    public void renderOn(HtmlCanvas htmlCanvas) throws IOException {
-        htmlCanvas.write(singleMonaco(isAdded, path, escapedContent));
+    public void renderOn(HtmlCanvas html) throws IOException {
+        String boxColor = isAdded ? "#d4edda" : "#f8d7da";
+        String textColor = isAdded ? "#155724" : "#721c24";
+        String borderColor = isAdded ? "#c3e6cb" : "#f5c6cb";
+        String editorId = "monaco-editor-" + Math.abs(path.hashCode());
+
+        html
+                .render(DocType.HTML5)
+                .html(lang("en").class_("h-100"))
+                .render(new SingleMonacoHeader(path, isAdded))
+                .div(style("flex: 1 1 auto; width: 100%;"))
+                .div(id(editorId).style("width:100%; height:100%;"))
+                ._div()
+                ._div()
+                .div(style("height: 10px; flex-shrink: 0; background:#eee;"))
+                ._div()
+                .script().content(
+                        "loadSingleMonacoEditor({ id: '" + editorId + "', value: `" + escapedContent + "`, language: 'java' });"
+                )
+                ._body()
+                ._html();
     }
 
-    private static String singleMonaco(boolean isAdded, String path, String escapedContent) {
-        String boxColor = isAdded ? "#d4edda" : "#f8d7da";  // Green or red
-        String textColor = isAdded ? "#155724" : "#721c24"; // Dark green or dark red
-        String borderColor = isAdded ? "#c3e6cb" : "#f5c6cb";
+    private static class SingleMonacoHeader implements Renderable {
+        private final String path;
+        private final boolean isAdded;
 
-        String headerHtml = "<div style=\"background-color:" + boxColor + ";" +
-                            "color:" + textColor + ";" +
-                            "border: 1px solid " + borderColor + ";" +
-                            "padding: 10px; border-radius: 5px; font-weight: bold;\">" +
-                            path +
-                            "</div>";
-
-        return "<div style=\"padding:10px\">" +
-               headerHtml +
-               "<pre style=\"white-space: pre-wrap; background:#f8f8f8; padding:10px; border-radius:5px; margin-top:10px;\">" +
-               escapedContent +
-               "</pre>" +
-               "</div>";
+        public SingleMonacoHeader(String path, boolean isAdded) {
+            this.path = path;
+            this.isAdded = isAdded;
+        }
+
+        @Override
+        public void renderOn(HtmlCanvas html) throws IOException {
+            String boxColor = isAdded ? "#d4edda" : "#f8d7da";
+            String textColor = isAdded ? "#155724" : "#721c24";
+            String borderColor = isAdded ? "#c3e6cb" : "#f5c6cb";
+
+            html
+                    .head().macros().javascript("/dist/single-monaco.js")
+                    .meta(charset("utf8"))
+                    .meta(name("viewport").content("width=device-width, initial-scale=1.0"))
+                    .title().content("RefactoringMiner")
+                    .macros().stylesheet(WebDiff.BOOTSTRAP_CSS_URL)
+                    .macros().stylesheet("/dist/monaco.css")
+                    .macros().javascript(WebDiff.JQUERY_JS_URL)
+                    .macros().javascript("https://code.jquery.com/ui/1.12.1/jquery-ui.min.js")
+                    .macros().javascript(WebDiff.BOOTSTRAP_JS_URL)
+                    .macros().javascript("/monaco/min/vs/loader.js")
+                    .style().content(
+                            "html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }"
+                    )
+                    ._head()
+
+                    // Top bar with back button and file path
+                    .body(style("margin:0; height:100%; display:flex; flex-direction:column;"))
+                    .div(style("flex: 0 0 auto; padding: 10px; display: flex; align-items: center; gap: 10px;" +
+                               "background-color:" + boxColor + ";" +
+                               "color:" + textColor + ";" +
+                               "border-bottom: 1px solid " + borderColor + ";"))
+                    .a(href("javascript:history.back()").class_("btn btn-secondary btn-sm"))
+                    .content("← Back")
+                    .div(style("font-weight: bold;")).content(path)
+                    ._div();
+        }
     }
 }
-

src/main/resources/web/dist/single-monaco.js

@@ -0,0 +1,27 @@
+function loadSingleMonacoEditor({ id, value, language = 'java' }) {
+    if (!window.monaco) {
+        require.config({
+            paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.39.0/min/vs' }
+        });
+        require(['vs/editor/editor.main'], function () {
+            _createEditor(id, value, language);
+        });
+    } else {
+        _createEditor(id, value, language);
+    }
+}
+
+function _createEditor(id, value, language) {
+    const el = document.getElementById(id);
+    if (el) {
+        monaco.editor.create(el, {
+            value: value,
+            language: language,
+            readOnly: true,
+            automaticLayout: true,
+            theme: 'vs',
+            scrollBeyondLastLine: false,
+            minimap: { enabled: false },
+        });
+    }
+}