Adds monospace formatting in commit messages

Author: nzaytsev

CHANGELOG.md

@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 ### Added
 
 - Adds [Cursor](https://cursor.so) support — closes [#3222](https://github.com/gitkraken/vscode-gitlens/issues/3222)
+- Adds monospace formatting in commit messages — closes [#2350](https://github.com/gitkraken/vscode-gitlens/issues/2350)
 
 ### Changed
 

package.json

@@ -17951,6 +17951,7 @@
 		"@swc/core": "1.7.28",
 		"@twbs/fantasticon": "3.0.0",
 		"@types/eslint__js": "8.42.3",
+		"@types/markdown-it": "^14.1.2",
 		"@types/mocha": "10.0.8",
 		"@types/node": "18.15.0",
 		"@types/react": "17.0.82",

src/git/formatters/commitFormatter.ts

@@ -692,7 +692,7 @@ export class CommitFormatter extends Formatter<GitCommit, CommitFormatOptions> {
 			message = encodeHtmlWeak(message);
 		}
 		if (outputFormat === 'markdown') {
-			message = escapeMarkdown(message, { quoted: true });
+			message = escapeMarkdown(message, { quoted: true, inlineBackticks: true });
 		}
 
 		if (this._options.messageAutolinks) {

src/system/markdown.ts

@@ -0,0 +1,44 @@
+/**
+ * escapes markdown code blocks
+ */
+function escapeTripleBackticks(s: string) {
+	const tripleBackticks = '```';
+	const escapedTripleBackticks = '\\`\\`\\`';
+	let str = '';
+	let allowed = true;
+	let quotesOpened = false;
+	let buffer = '';
+
+	for (let i = 0; i < s.length; i += 1) {
+		const char = s[i];
+		const chain = s.substring(i, i + 3);
+		if (char === '\n' && quotesOpened) {
+			allowed = false;
+		}
+		if (chain === tripleBackticks) {
+			if (quotesOpened) {
+				quotesOpened = false;
+				if (allowed) {
+					str += `${tripleBackticks}${buffer}${tripleBackticks}`;
+				} else {
+					str += `${escapedTripleBackticks}${buffer}${escapedTripleBackticks}`;
+					allowed = true;
+				}
+				buffer = '';
+			} else {
+				quotesOpened = true;
+			}
+			// skip chain
+			i += 2;
+			continue;
+		}
+		if (quotesOpened) {
+			buffer += char;
+		} else {
+			str += char;
+		}
+	}
+	return str;
+}
+
+export { escapeTripleBackticks };

src/system/string.ts

@@ -6,6 +6,7 @@ import type {
 } from '@gk-nzaytsev/fast-string-truncated-width';
 import getTruncatedStringWidth from '@gk-nzaytsev/fast-string-truncated-width';
 import { CharCode } from '../constants';
+import { escapeTripleBackticks } from './markdown';
 
 export { fromBase64, base64 } from '@env/base64';
 
@@ -130,22 +131,28 @@ export function encodeHtmlWeak(s: string | undefined): string | undefined {
 	});
 }
 
-const escapeMarkdownRegex = /[\\`*_{}[\]()#+\-.!]/g;
+const escapeMarkdownRegex = /[\\*_{}[\]()#+\-.!]/g;
 const unescapeMarkdownRegex = /\\([\\`*_{}[\]()#+\-.!])/g;
 
 const escapeMarkdownHeaderRegex = /^===/gm;
 const unescapeMarkdownHeaderRegex = /^\u200b===/gm;
 
 // const sampleMarkdown = '## message `not code` *not important* _no underline_ \n> don\'t quote me \n- don\'t list me \n+ don\'t list me \n1. don\'t list me \nnot h1 \n=== \nnot h2 \n---\n***\n---\n___';
 const markdownQuotedRegex = /\r?\n/g;
+const markdownBacktickRegex = /`/g;
 
-export function escapeMarkdown(s: string, options: { quoted?: boolean } = {}): string {
+export function escapeMarkdown(s: string, options: { quoted?: boolean; inlineBackticks?: boolean } = {}): string {
 	s = s
 		// Escape markdown
 		.replace(escapeMarkdownRegex, '\\$&')
 		// Escape markdown header (since the above regex won't match it)
 		.replace(escapeMarkdownHeaderRegex, '\u200b===');
 
+	if (options.inlineBackticks) {
+		s = escapeTripleBackticks(s);
+	} else {
+		s = s.replace(markdownBacktickRegex, '\\$&');
+	}
 	if (!options.quoted) return s;
 
 	// Keep under the same block-quote but with line breaks

src/webviews/apps/plus/graph/GraphWrapper.tsx

@@ -83,6 +83,7 @@ import type { SearchNavigationEventDetail } from '../../shared/components/search
 import type { DateTimeFormat } from '../../shared/date';
 import { formatDate, fromNow } from '../../shared/date';
 import { GlGraphHover } from './hover/graphHover.react';
+import { Markdown } from './markdown/markdown';
 import type { GraphMinimapDaySelectedEventDetail } from './minimap/minimap';
 import { GlGraphMinimapContainer } from './minimap/minimap-container.react';
 import { GlGraphSideBar } from './sidebar/sidebar.react';
@@ -1604,6 +1605,8 @@ export function GraphWrapper({
 							avatarUrlByEmail={avatars}
 							columnsSettings={columns}
 							contexts={context}
+							// @ts-expect-error returnType of formatCommitMessage callback expects to be string, but it works fine with react element
+							formatCommitMessage={e => <Markdown>{e}</Markdown>}
 							cssVariables={styleProps?.cssVariables}
 							dimMergeCommits={graphConfig?.dimMergeCommits}
 							downstreamsByUpstream={downstreams}

src/webviews/apps/plus/graph/markdown/markdown.tsx

@@ -0,0 +1,32 @@
+import markdownit from 'markdown-it';
+import React, { useEffect, useState } from 'react';
+
+const mdRules = [
+	'text',
+	'linkify',
+	'newline',
+	'escape',
+	'backticks',
+	'strikethrough',
+	'emphasis',
+	'link',
+	'image',
+	'autolink',
+	'html_inline',
+	'entity',
+];
+
+const md = markdownit();
+md.disable(mdRules);
+md.enable(['backticks']);
+
+export const Markdown = ({ children }: { children: string }) => {
+	const [span, setSpan] = useState<HTMLSpanElement | null>(null);
+	useEffect(() => {
+		if (!span) {
+			return;
+		}
+		span.setHTMLUnsafe(md.renderInline(children));
+	}, [children, span]);
+	return <span ref={setSpan}></span>;
+};