Render commit messages with markdown

gitbutlerapp · Feb 21, 2025 · 9a1236b · 9a1236b
1 parent 7ceff72
commit 9a1236b
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 21 deletions.
diff --git a/apps/desktop/package.json b/apps/desktop/package.json
@@ -66,6 +66,7 @@
 		"postcss-nesting": "^12.1.5",
 		"postcss-pxtorem": "^6.1.0",
 		"posthog-js": "1.136.4",
+		"marked": "catalog:",
 		"reflect-metadata": "^0.2.2",
 		"svelte": "catalog:svelte",
 		"svelte-check": "catalog:svelte",

diff --git a/apps/desktop/src/components/CommitCard.svelte b/apps/desktop/src/components/CommitCard.svelte
@@ -28,6 +28,7 @@
 	import PopoverActionsContainer from '@gitbutler/ui/popoverActions/PopoverActionsContainer.svelte';
 	import PopoverActionsItem from '@gitbutler/ui/popoverActions/PopoverActionsItem.svelte';
 	import { getTimeAgo } from '@gitbutler/ui/utils/timeAgo';
+	import { marked } from 'marked';
 	import { type Snippet } from 'svelte';
 
 	const userService = getContext(UserService);
@@ -377,7 +378,7 @@
 				<div class="commit__details">
 					{#if commit.descriptionBody}
 						<span class="commit__description text-12 text-body">
-							{commit.descriptionBody}
+							{@html marked(commit.descriptionBody)}
 						</span>
 					{/if}
 

diff --git a/apps/desktop/src/components/v3/StackDetailsCommitHeader.svelte b/apps/desktop/src/components/v3/StackDetailsCommitHeader.svelte
@@ -10,6 +10,7 @@
 	import Modal from '@gitbutler/ui/Modal.svelte';
 	import Tooltip from '@gitbutler/ui/Tooltip.svelte';
 	import { getTimeAgo } from '@gitbutler/ui/utils/timeAgo';
+	import { marked } from 'marked';
 	import type { Commit, WorkspaceBranch } from '$lib/branches/v3';
 
 	interface Props {
@@ -68,7 +69,7 @@
 </script>
 
 <div class="wrapper">
-	<div class="message text-12">{commitMessage}</div>
+	<div class="message text-12">{@html marked(commitMessage)}</div>
 	<div class="metadata text-11 text-semibold">
 		{#if commit.hasConflicts}
 			<Tooltip

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -45,7 +45,7 @@
 		"@types/tryghost__content-api": "^1.3.17",
 		"dayjs": "^1.11.13",
 		"highlight.js": "^11.10.0",
-		"marked": "^10.0.0",
+		"marked": "catalog:",
 		"satori": "^0.12.1",
 		"satori-html": "^0.3.2"
 	}

diff --git a/apps/web/src/routes/projects/[projectId]/branches/[branchId]/stack/[changeId]/+page.svelte b/apps/web/src/routes/projects/[projectId]/branches/[branchId]/stack/[changeId]/+page.svelte
@@ -59,7 +59,7 @@
 					// render markdowns
 					let markdowns = document.querySelectorAll('.markdown');
 					markdowns.forEach((markdown) => {
-						markdown.innerHTML = marked(markdown.innerHTML);
+						markdown.innerHTML = marked(markdown.innerHTML, { async: false });
 					});
 				}, 10);
 			});

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -62,14 +62,13 @@
 		"@terrazzo/parser": "0.6.0",
 		"@terrazzo/plugin-css": "0.6.0",
 		"@types/diff-match-patch": "^1.0.36",
-		"@types/marked": "^5.0.2",
 		"@types/postcss-pxtorem": "^6.1.0",
 		"@vitest/browser": "^3.0.3",
 		"autoprefixer": "^10.4.20",
 		"cpy-cli": "^5.0.0",
 		"dayjs": "^1.11.13",
 		"diff-match-patch": "^1.0.5",
-		"marked": "^10.0.0",
+		"marked": "catalog:",
 		"playwright": "1.47.0",
 		"postcss": "^8.4.49",
 		"postcss-cli": "^11.0.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -7,6 +7,7 @@ catalog:
   'vite': '6.1.0'
   'vitest': '3.0.5'
   '@vitest/ui': '3.0.5'
+  'marked': '15.0.7'
 catalogs:
   svelte:
     'svelte': '5.19.7'