Updates to latest Graph component

 - Adapts to new formatCommit callback

Author: eamodio

package.json

@@ -26099,7 +26099,7 @@
 		"vscode:prepublish": "pnpm run bundle"
 	},
 	"dependencies": {
-		"@gitkraken/gitkraken-components": "13.0.0-vnext.10",
+		"@gitkraken/gitkraken-components": "13.0.0-vnext.15",
 		"@gitkraken/provider-apis": "0.29.7",
 		"@gitkraken/shared-web-components": "0.1.1-rc.15",
 		"@gk-nzaytsev/fast-string-truncated-width": "1.1.0",

pnpm-lock.yaml

@@ -21,6 +21,7 @@ import type { ReactElement } from 'react';
 import React, { createElement, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { getPlatform } from '@env/platform';
 import type { DateStyle } from '../../../../../config';
+import { splitCommitMessage } from '../../../../../git/utils/commit.utils';
 import type { DateTimeFormat } from '../../../../../system/date';
 import { formatDate, fromNow } from '../../../../../system/date';
 import { first, groupByFilterMap } from '../../../../../system/iterable';
@@ -566,14 +567,22 @@ export const GlGraphReact = memo((initProps: GraphWrapperInitProps) => {
 	const emptyConfig = useMemo(() => ({}) as unknown as NonNullable<typeof props.config>, []);
 	const config = useMemo(() => props.config ?? emptyConfig, [props.config, emptyConfig]);
 
+	const formatCommitMessage = (commitMessage: string) => {
+		const { summary, body } = splitCommitMessage(commitMessage);
+
+		return {
+			summary: <GlMarkdown markdown={summary} inline></GlMarkdown>,
+			body: body ? <GlMarkdown markdown={body} inline></GlMarkdown> : undefined,
+		};
+	};
+
 	return (
 		<GraphContainer
 			ref={graphRef}
 			avatarUrlByEmail={props.avatars}
 			columnsSettings={props.columns}
 			contexts={context}
-			// @ts-expect-error returnType of formatCommitMessage callback expects to be string, but it works fine with react element
-			formatCommitMessage={e => <GlMarkdown markdown={e}></GlMarkdown>}
+			formatCommitMessage={formatCommitMessage}
 			cssVariables={props.theming?.cssVariables}
 			dimMergeCommits={config.dimMergeCommits}
 			downstreamsByUpstream={props.downstreams}

src/webviews/apps/plus/graph/graph-wrapper/gl-graph.react.tsx

@@ -13,6 +13,8 @@ export class GlMarkdown extends LitElement {
 		ruleStyles,
 		css`
 			:host {
+				display: contents;
+
 				--markdown-compact-block-spacing: 8px;
 				--markdown-list-spacing: 20px;
 			}
@@ -105,34 +107,55 @@ export class GlMarkdown extends LitElement {
 			li > ul {
 				margin-top: 0;
 			}
-		`,
+=		`,
 	];
 
 	@property({ type: String })
-	private markdown = '';
+	markdown = '';
 
 	@property({ type: String, reflect: true })
 	density: 'compact' | 'document' = 'compact';
 
+	@property({ type: Boolean, reflect: true })
+	inline = false;
+
 	override render(): unknown {
 		return html`${this.markdown ? until(this.renderMarkdown(this.markdown), 'Loading...') : ''}`;
 	}
 
 	private async renderMarkdown(markdown: string) {
-		marked.setOptions({
-			gfm: true,
-			// smartypants: true,
-			// langPrefix: 'language-',
-		});
+		marked.setOptions({ gfm: true });
 
-		marked.use({ renderer: getMarkdownRenderer() });
+		const renderer = this.inline ? getInlineMarkdownRenderer() : getMarkdownRenderer();
+		marked.use({ renderer: renderer });
 
 		let rendered = await marked.parse(markdownEscapeEscapedIcons(markdown));
 		rendered = renderThemeIconsWithinText(rendered);
 		return unsafeHTML(rendered);
 	}
 }
 
+const escapeReplacements: { [index: string]: string } = {
+	'&': '&',
+	'<': '&lt;',
+	'>': '&gt;',
+	'"': '&quot;',
+	"'": '&#39;',
+};
+const getEscapeReplacement = (ch: string) => escapeReplacements[ch];
+
+export function escape(html: string, encode?: boolean) {
+	if (encode) {
+		if (/[&<>"']/.test(html)) {
+			return html.replace(/[&<>"']/g, getEscapeReplacement);
+		}
+	} else if (/[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/.test(html)) {
+		return html.replace(/[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/g, getEscapeReplacement);
+	}
+
+	return html;
+}
+
 function getMarkdownRenderer(): RendererObject {
 	return {
 		image: function (this: RendererThis, { href, title, text }: Tokens.Image): string {
@@ -157,37 +180,69 @@ function getMarkdownRenderer(): RendererObject {
 			const text = this.parser.parseInline(tokens);
 			return `<p>${text}</p>`;
 		},
-		link: function (this: RendererThis, { href, title, tokens }: Tokens.Link): string | false {
-			if (typeof href !== 'string') return '';
-
-			// Remove markdown escapes. Workaround for https://github.com/chjj/marked/issues/829
-			let text = this.parser.parseInline(tokens);
-			if (href === text) {
-				// raw link case
-				text = removeMarkdownEscapes(text);
-			}
-
-			title = typeof title === 'string' ? escapeDoubleQuotes(removeMarkdownEscapes(title)) : '';
+		html: function (this: RendererThis, { text }: Tokens.HTML | Tokens.Tag): string {
+			const match = text.match(/^(<span[^>]+>)|(<\/\s*span>)$/);
+			return match ? text : '';
+		},
+	};
+}
 
-			// HTML Encode href
-			href = removeMarkdownEscapes(href)
-				.replace(/&/g, '&amp;')
-				.replace(/</g, '&lt;')
-				.replace(/>/g, '&gt;')
-				.replace(/"/g, '&quot;')
-				.replace(/'/g, '&#39;');
+function getInlineMarkdownRenderer(): RendererObject {
+	let listIndex = 0;
+	let isOrderedList = false;
+
+	const renderListItem = function (this: RendererThis, item: Tokens.ListItem): string {
+		// In inline mode, render list item with symbol prefix
+		const text = this.parser.parse(item.tokens, Boolean(item.loose));
+		// Get the symbol: task checkbox, number for ordered, bullet for unordered
+		let symbol: string;
+		if (item.task) {
+			symbol = item.checked ? '☑' : '☐';
+		} else if (isOrderedList) {
+			symbol = `${listIndex}.`;
+			listIndex++;
+		} else {
+			symbol = '•';
+		}
+		return `${symbol} ${text.trim()} `;
+	};
 
-			return `<a href="${href}" title="${title || href}" draggable="false">${text}</a>`;
+	return {
+		image: function (this: RendererThis, { text }: Tokens.Image): string {
+			// In inline mode, use alt text if available, otherwise skip
+			return text || '';
+		},
+		paragraph: function (this: RendererThis, { tokens }: Tokens.Paragraph): string {
+			const text = this.parser.parseInline(tokens);
+			return text;
 		},
-		code: function (this: RendererThis, { text, lang }: Tokens.Code): string {
-			// Remote code may include characters that need to be escaped to be visible in HTML
-			text = text.replace(/</g, '&lt;');
-			return `<pre class="language-${lang}"><code>${text}</code></pre>`;
+		list: function (this: RendererThis, token: Tokens.List): string {
+			// In inline mode, render list items separated by spaces with their symbols
+			isOrderedList = token.ordered;
+			listIndex = typeof token.start === 'number' ? token.start : 1;
+			let body = '';
+			for (const item of token.items) {
+				body += renderListItem.call(this, item);
+			}
+			return body;
+		},
+		listitem: renderListItem,
+		link: function (this: RendererThis, { tokens }: Tokens.Link): string | false {
+			const text = this.parser.parseInline(tokens);
+			return text;
 		},
-		codespan: function (this: RendererThis, { text }: Tokens.Codespan): string {
-			// Remote code may include characters that need to be escaped to be visible in HTML
-			text = text.replace(/</g, '&lt;');
-			return `<code>${text}</code>`;
+		code: function (this: RendererThis, { text }: Tokens.Code): string {
+			// In inline mode, wrap in code tag but without pre block formatting
+			return `<code>${escape(text, true)}</code>`;
+		},
+
+		br: function (): string {
+			// In inline mode, render as a space instead of line break
+			return ' ';
+		},
+		html: function (): string {
+			// In inline mode, skip HTML tags
+			return '';
 		},
 	};
 }
@@ -264,10 +319,3 @@ function renderThemeIcon(icon: ThemeIcon): string {
 function escapeDoubleQuotes(input: string) {
 	return input.replace(/"/g, '&quot;');
 }
-
-function removeMarkdownEscapes(text: string): string {
-	if (!text) {
-		return text;
-	}
-	return text.replace(/\\([\\`*_{}[\]()#+\-.!~])/g, '$1');
-}