Tags/contexts/projects not rendering in Task view

I've encountered a bug in this extension that causes any contexts, tags, or projects to not render correctly in the Tasks view.

Here is a screenshot of the problem:

Version: 1.61.2
Commit: 6cba118ac49a1b88332f312a8f67186f7f3c1643
Date: 2021-10-19T14:58:13.605Z
Electron: 13.5.1
Chrome: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Linux x64 4.19.0-18-amd64
TodoMD version: v2.8.2

Here is the same Task view rendered correctly.

Version: 1.61.2
Commit: 6cba118ac49a1b88332f312a8f67186f7f3c1643
Date: 2021-10-19T14:58:13.605Z
Electron: 13.5.1
Chrome: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Linux x64 5.4.0-89-generic
TodoMD version: v2.8.2

Everything looks fine in the Webview on both distros.

As mentioned in my previous issue, I'm not very well versed in CSS/JS etc. I have Googled the issue extensively, and tried some of the various fixes I've found, but haven't found a solution yet.

Any help would be appreciated.

Tree views don't support Bold/Italic, or ... anything. But there are hacks to use different symbols, like https://yaytext.com/bold-italic/

That's basically what this extension is trying to do:

vscode-todo-md/src/utils/utils.ts

Lines 18 to 46 in 2dc37ae

    
           /** 
        
            * Replace english letters with their bold `utf-8` variant (hack). 
        
            */ 
        
           export function fancyLetterBold(str: string) { 
        
           	const enum Unicode { 
        
           		lowercaseLetterA = 65, 
        
           		lowercaseLetterZ = 90, 
        
           		uppercaseLetterA = 97, 
        
           		uppercaseLetterZ = 122, 
        
           		lowercaseBoldLetterA = 120276, 
        
           		uppercaseBoldLetterA = 120302, 
        
           	} 
        
           	let result = ''; 
        
           	for (const letter of str) { 
        
           		const codePoint = letter.codePointAt(0); 
        
           		if (!codePoint) { 
        
           			continue; 
        
           		} 
        
           		if (codePoint >= Unicode.lowercaseLetterA && codePoint <= Unicode.lowercaseLetterZ) { 
        
           			result += String.fromCodePoint(codePoint + Unicode.lowercaseBoldLetterA - Unicode.lowercaseLetterA); 
        
           		} else if (codePoint >= Unicode.uppercaseLetterA && codePoint <= Unicode.uppercaseLetterZ) { 
        
           			result += String.fromCodePoint(codePoint + Unicode.uppercaseBoldLetterA - Unicode.uppercaseLetterA); 
        
           		} else { 
        
           			result += letter; 
        
           		} 
        
           	} 
        
           	return result; 
        
           }

Looks like this:

I'm thinking of adding a setting to disable this hack.

From the next extension version:

"todomd.useBoldTextInLabels": false,

	/**
	* Replace english letters with their bold `utf-8` variant (hack).
	*/
	export function fancyLetterBold(str: string) {
	const enum Unicode {
	lowercaseLetterA = 65,
	lowercaseLetterZ = 90,
	uppercaseLetterA = 97,
	uppercaseLetterZ = 122,

	lowercaseBoldLetterA = 120276,
	uppercaseBoldLetterA = 120302,
	}
	let result = '';
	for (const letter of str) {
	const codePoint = letter.codePointAt(0);
	if (!codePoint) {
	continue;
	}
	if (codePoint >= Unicode.lowercaseLetterA && codePoint <= Unicode.lowercaseLetterZ) {
	result += String.fromCodePoint(codePoint + Unicode.lowercaseBoldLetterA - Unicode.lowercaseLetterA);
	} else if (codePoint >= Unicode.uppercaseLetterA && codePoint <= Unicode.uppercaseLetterZ) {
	result += String.fromCodePoint(codePoint + Unicode.uppercaseBoldLetterA - Unicode.uppercaseLetterA);
	} else {
	result += letter;
	}
	}
	return result;
	}