diff --git a/packages/plugin-ext/src/main/browser/style/tree.css b/packages/plugin-ext/src/main/browser/style/tree.css index 5adf0d4dd0856..c2e684781adb0 100644 --- a/packages/plugin-ext/src/main/browser/style/tree.css +++ b/packages/plugin-ext/src/main/browser/style/tree.css @@ -44,3 +44,7 @@ .theia-tree-view .theia-TreeNode:not(:hover):not(.theia-mod-selected) .theia-tree-view-inline-action { display: none; } + +.codicon.icon-inline { + font-size: var(--theia-ui-font-size1); +} diff --git a/packages/plugin-ext/src/main/browser/view/tree-view-widget.tsx b/packages/plugin-ext/src/main/browser/view/tree-view-widget.tsx index 2a8fbf424ee94..2dd9909bb5e64 100644 --- a/packages/plugin-ext/src/main/browser/view/tree-view-widget.tsx +++ b/packages/plugin-ext/src/main/browser/view/tree-view-widget.tsx @@ -36,7 +36,7 @@ import { import { MenuPath, MenuModelRegistry, ActionMenuNode } from '@theia/core/lib/common/menu'; import * as React from '@theia/core/shared/react'; import { PluginSharedStyle } from '../plugin-shared-style'; -import { ACTION_ITEM, Widget } from '@theia/core/lib/browser/widgets/widget'; +import { ACTION_ITEM, codicon, Widget } from '@theia/core/lib/browser/widgets/widget'; import { Emitter, Event } from '@theia/core/lib/common/event'; import { MessageService } from '@theia/core/lib/common/message-service'; import { View } from '../../../common/plugin-protocol'; @@ -44,6 +44,7 @@ import CoreURI from '@theia/core/lib/common/uri'; import { ContextKeyService } from '@theia/core/lib/browser/context-key-service'; import * as markdownit from '@theia/core/shared/markdown-it'; import { isMarkdownString } from '../../../plugin/markdown-string'; +import { LabelParser } from '@theia/core/lib/browser/label-parser'; export const TREE_NODE_HYPERLINK = 'theia-TreeNodeHyperlink'; export const VIEW_ITEM_CONTEXT_MENU: MenuPath = ['view-item-context-menu']; @@ -250,18 +251,35 @@ export class TreeViewWidget extends TreeViewWelcomeWidget { @inject(TooltipService) protected readonly tooltipService: TooltipService; + @inject(LabelParser) + protected readonly labelParser: LabelParser; + + protected readonly markdownIt = markdownit(); + @postConstruct() protected override init(): void { super.init(); this.id = this.identifier.id; this.addClass('theia-tree-view'); this.node.style.height = '100%'; - + this.markdownItPlugin(); this.model.onDidChangeWelcomeState(this.update, this); this.toDispose.push(this.model.onDidChangeWelcomeState(this.update, this)); this.toDispose.push(this.onDidChangeVisibilityEmitter); } + protected markdownItPlugin(): void { + this.markdownIt.renderer.rules.text = (tokens, idx) => { + const content = tokens[idx].content; + return this.labelParser.parse(content).map(chunk => { + if (typeof chunk === 'string') { + return chunk; + } + return `<i class="${codicon(chunk.name)} ${chunk.animation ? `fa-${chunk.animation}` : ''} icon-inline"></i>`; + }).join(''); + }; + } + protected override renderIcon(node: TreeNode, props: NodeProps): React.ReactNode { const icon = this.toNodeIcon(node); if (icon) { @@ -285,7 +303,7 @@ export class TreeViewWidget extends TreeViewWelcomeWidget { if (node.tooltip && isMarkdownString(node.tooltip)) { // Render markdown in custom tooltip - const tooltip = markdownit().render(node.tooltip.value); + const tooltip = this.markdownIt.render(node.tooltip.value); attrs = { ...attrs,