Add comment suggestions

Author: JRoy

bun.lock

@@ -12,7 +12,9 @@
         "chroma-js": "^3.1.2",
         "date-fns": "^4.1.0",
         "diff": "^8.0.2",
+        "dompurify": "^3.2.6",
         "luxon": "^3.6.1",
+        "marked": "^16.0.0",
         "runed": "^0.28.0",
         "shiki": "^3.4.2",
         "svelte-toolbelt": "^0.9.1",
@@ -30,7 +32,9 @@
         "@sveltejs/vite-plugin-svelte": "^5.1.0",
         "@tailwindcss/vite": "^4.1.8",
         "@types/chroma-js": "^3.1.1",
+        "@types/dompurify": "^3.2.0",
         "@types/luxon": "^3.6.2",
+        "@types/marked": "^6.0.0",
         "@types/wicg-file-system-access": "^2023.10.6",
         "eslint": "^9.28.0",
         "eslint-config-prettier": "^10.1.5",
@@ -365,6 +369,8 @@
 
     "@types/deep-eql": ["@types/[email protected]", "", {}, "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw=="],
 
+    "@types/dompurify": ["@types/[email protected]", "", { "dependencies": { "dompurify": "*" } }, "sha512-Fgg31wv9QbLDA0SpTOXO3MaxySc4DKGLi8sna4/Utjo4r3ZRPdCt4UQee8BWr+Q5z21yifghREPJGYaEOEIACg=="],
+
     "@types/estree": ["@types/[email protected]", "", {}, "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ=="],
 
     "@types/hast": ["@types/[email protected]", "", { "dependencies": { "@types/unist": "*" } }, "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ=="],
@@ -373,10 +379,14 @@
 
     "@types/luxon": ["@types/[email protected]", "", {}, "sha512-R/BdP7OxEMc44l2Ex5lSXHoIXTB2JLNa3y2QISIbr58U/YcsffyQrYW//hZSdrfxrjRZj3GcUoxMPGdO8gSYuw=="],
 
+    "@types/marked": ["@types/[email protected]", "", { "dependencies": { "marked": "*" } }, "sha512-jmjpa4BwUsmhxcfsgUit/7A9KbrC48Q0q8KvnY107ogcjGgTFDlIL3RpihNpx2Mu1hM4mdFQjoVc4O6JoGKHsA=="],
+
     "@types/mdast": ["@types/[email protected]", "", { "dependencies": { "@types/unist": "*" } }, "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA=="],
 
     "@types/node": ["@types/[email protected]", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-LNdjOkUDlU1RZb8e1kOIUpN1qQUlzGkEtbVNo53vbrwDg5om6oduhm4SiUaPW5ASTXhAiP0jInWG8Qx9fVlOeQ=="],
 
+    "@types/trusted-types": ["@types/[email protected]", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],
+
     "@types/unist": ["@types/[email protected]", "", {}, "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="],
 
     "@types/webextension-polyfill": ["@types/[email protected]", "", {}, "sha512-F58aDVSeN/MjUGazXo/cPsmR76EvqQhQ1v4x23hFjUX0cfAJYE+JBWwiOGW36/VJGGxoH74sVlRIF3z7SJCKyg=="],
@@ -523,6 +533,8 @@
 
     "diff": ["[email protected]", "", {}, "sha512-sSuxWU5j5SR9QQji/o2qMvqRNYRDOcBTgsJ/DeCf4iSN4gW+gNMXM7wFIP+fdXZxoNiAnHUTGjCr+TSWXdRDKg=="],
 
+    "dompurify": ["[email protected]", "", { "optionalDependencies": { "@types/trusted-types": "^2.0.7" } }, "sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ=="],
+
     "enhanced-resolve": ["[email protected]", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.2.0" } }, "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg=="],
 
     "es-module-lexer": ["[email protected]", "", {}, "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA=="],
@@ -691,6 +703,8 @@
 
     "magic-string": ["[email protected]", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0" } }, "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA=="],
 
+    "marked": ["[email protected]", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-MUKMXDjsD/eptB7GPzxo4xcnLS6oo7/RHimUMHEDRhUooPwmN9BEpMl7AEOJv3bmso169wHI2wUF9VQgL7zfmA=="],
+
     "mdast-util-to-hast": ["[email protected]", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "@ungap/structured-clone": "^1.0.0", "devlop": "^1.0.0", "micromark-util-sanitize-uri": "^2.0.0", "trim-lines": "^3.0.0", "unist-util-position": "^5.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0" } }, "sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA=="],
 
     "merge2": ["[email protected]", "", {}, "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="],

web/package.json

@@ -27,7 +27,9 @@
         "@sveltejs/vite-plugin-svelte": "^5.1.0",
         "@tailwindcss/vite": "^4.1.8",
         "@types/chroma-js": "^3.1.1",
+        "@types/dompurify": "^3.2.0",
         "@types/luxon": "^3.6.2",
+        "@types/marked": "^6.0.0",
         "@types/wicg-file-system-access": "^2023.10.6",
         "eslint": "^9.28.0",
         "eslint-config-prettier": "^10.1.5",
@@ -50,7 +52,9 @@
         "chroma-js": "^3.1.2",
         "date-fns": "^4.1.0",
         "diff": "^8.0.2",
+        "dompurify": "^3.2.6",
         "luxon": "^3.6.1",
+        "marked": "^16.0.0",
         "runed": "^0.28.0",
         "shiki": "^3.4.2",
         "svelte-toolbelt": "^0.9.1",

web/src/lib/components/diff/CommentDisplay.svelte

@@ -2,6 +2,7 @@
     import type { GithubPRComment } from "$lib/github.svelte";
     import { formatDistance } from "date-fns";
     import { CommentDisplayState } from "./comment-state.svelte";
+    import MarkdownRenderer from "./MarkdownRenderer.svelte";
 
     interface Props {
         comment: GithubPRComment;
@@ -10,9 +11,11 @@
         repo: string;
         onCommentUpdated?: (comment: GithubPRComment) => void;
         onCommentDeleted?: (commentId: number) => void;
+        originalContentForSuggestion?: string;
+        startLine?: number;
     }
 
-    let { comment, isReply = false, owner, repo, onCommentUpdated, onCommentDeleted }: Props = $props();
+    let { comment, isReply = false, owner, repo, onCommentUpdated, onCommentDeleted, originalContentForSuggestion, startLine }: Props = $props();
 
     const displayState = new CommentDisplayState(comment, owner, repo, onCommentUpdated, onCommentDeleted);
 
@@ -71,7 +74,13 @@
 
     {#if displayState.isEditing}
         <div class="edit-form">
-            <textarea bind:value={displayState.editText} class="edit-textarea" rows="3" disabled={displayState.isSubmitting} onkeydown={displayState.handleKeyDown}></textarea>
+            <textarea
+                bind:value={displayState.editText}
+                class="edit-textarea"
+                rows="3"
+                disabled={displayState.isSubmitting}
+                onkeydown={displayState.handleKeyDown}
+            ></textarea>
             <div class="edit-actions">
                 <div class="edit-hint">
                     <span class="iconify octicon--info-16"></span>
@@ -92,7 +101,7 @@
         </div>
     {:else}
         <div class="comment-body">
-            <p>{comment.body}</p>
+            <MarkdownRenderer content={comment.body} originalContentForSuggestion={originalContentForSuggestion ?? ""} {startLine} />
         </div>
     {/if}
 </div>
@@ -307,13 +316,6 @@
         margin-bottom: 4px;
     }
 
-    .comment-body p {
-        margin: 0;
-        line-height: 1.2;
-        white-space: pre-wrap;
-        font-size: 0.75rem;
-    }
-
     .github-link {
         display: flex;
         justify-content: flex-end;