Add Markdown rendering for commit messages

apps/desktop/src/components/CommitDetails.svelte

@@ -8,7 +8,7 @@
 	import { rejoinParagraphs, truncate } from '$lib/utils/string';
 	import { inject } from '@gitbutler/core/context';
 
-	import { Avatar, Icon, TestId, TimeAgo, Tooltip } from '@gitbutler/ui';
+	import { Avatar, Icon, Markdown, TestId, TimeAgo, Tooltip } from '@gitbutler/ui';
 	import { pxToRem } from '@gitbutler/ui/utils/pxToRem';
 
 	type Props = {
@@ -83,19 +83,28 @@
 	</div>
 
 	{#if description && description.trim()}
-		<p
+		<div
 			class="description"
 			class:expanded
+			class:commit-markdown={rewrap}
 			style:--commit-message-font={$rewrapCommitMessage
 				? 'var(--fontfamily-default)'
 				: 'var(--fontfamily-mono)'}
 			bind:clientWidth={messageWidth}
 			data-testid={TestId.CommitDrawerDescription}
 		>
-			{#if expanded}
-				{description}
+			{#if rewrap}
+				{#if expanded}
+					<Markdown content={description} />
+				{:else}
+					<Markdown content={abbreviated} />
+				{/if}
 			{:else}
-				{abbreviated}
+				{#if expanded}
+					{description}
+				{:else}
+					{abbreviated}
+				{/if}
 			{/if}
 			{#if isAbbrev}
 				<button onclick={() => (expanded = !expanded)} type="button" class="readmore text-bold">
@@ -106,7 +115,7 @@
 					{/if}
 				</button>
 			{/if}
-		</p>
+		</div>
 	{/if}
 </div>
 
@@ -141,7 +150,21 @@
 		font-size: 13px;
 		line-height: var(--text-lineheight-body);
 		font-family: var(--commit-message-font);
-		white-space: pre-line;
+
+		/* Preserve original formatting when not in markdown mode */
+		&:not(.commit-markdown) {
+			white-space: pre-line;
+		}
+	}
+
+	/* Tone down markdown headers to not dominate the UI */
+	:global(.commit-markdown h1),
+	:global(.commit-markdown h2),
+	:global(.commit-markdown h3),
+	:global(.commit-markdown h4) {
+		font-size: 1.1em !important;
+		font-weight: 600;
+		margin-bottom: 0.4em;
 	}
 
 	.readmore {

apps/desktop/src/components/CommitTitle.svelte

@@ -1,18 +1,37 @@
 <script lang="ts">
 	import { splitMessage } from '$lib/utils/commitMessage';
-	import { TestId, Tooltip } from '@gitbutler/ui';
+	import { MarkdownContent, TestId, Tooltip } from '@gitbutler/ui';
+	import { Lexer } from 'marked';
 
 	type Props = {
 		truncate?: boolean;
 		commitMessage: string;
 		className?: string;
 		editable?: boolean;
+		rewrap?: boolean;
 	};
 
-	const { commitMessage, truncate, className, editable }: Props = $props();
+	const { commitMessage, truncate, className, editable, rewrap }: Props = $props();
 
 	const title = $derived(splitMessage(commitMessage).title);
 
+	const markdownOptions = {
+		async: false,
+		breaks: true,
+		gfm: true,
+		pedantic: false,
+		renderer: null,
+		silent: false,
+		tokenizer: null,
+		walkTokens: null
+	};
+
+	const tokens = $derived.by(() => {
+		if (!title) return [];
+		const lexer = new Lexer(markdownOptions);
+		return lexer.lex(title);
+	});
+
 	function getTitle() {
 		if (title) {
 			return title;
@@ -25,9 +44,33 @@
 	<h3
 		data-testid={TestId.CommitDrawerTitle}
 		class="{className} commit-title"
+		class:commit-title-markdown={rewrap}
 		class:truncate
 		class:clr-text-3={!title}
 	>
-		{getTitle()}
+		{#if title && tokens.length > 0 && rewrap}
+			<MarkdownContent type="init" {tokens} />
+		{:else}
+			{getTitle()}
+		{/if}
 	</h3>
 </Tooltip>
+
+<style>
+	/* Make paragraphs inline in commit titles to avoid invalid HTML nesting */
+	:global(.commit-title-markdown p) {
+		display: inline;
+		margin: 0;
+	}
+
+	/* Tone down markdown headers in titles */
+	:global(.commit-title-markdown h1),
+	:global(.commit-title-markdown h2),
+	:global(.commit-title-markdown h3),
+	:global(.commit-title-markdown h4) {
+		display: inline;
+		font-size: inherit !important;
+		font-weight: 600;
+		margin: 0;
+	}
+</style>

apps/desktop/src/components/CommitView.svelte

@@ -167,6 +167,7 @@
 					commitMessage={commit.message}
 					className="text-14 text-semibold text-body"
 					editable={!isReadOnly}
+					rewrap={$rewrapCommitMessage}
 				/>
 			{/snippet}
 

apps/desktop/src/components/UnappliedCommitView.svelte

@@ -30,6 +30,7 @@
 					truncate
 					commitMessage={commit.message}
 					className="text-14 text-semibold text-body"
+					rewrap={$rewrapCommitMessage}
 				/>
 			{/snippet}