diff --git a/webview-ui/src/components/common/MarkdownBlock.tsx b/webview-ui/src/components/common/MarkdownBlock.tsx index 37a0278991..91e129ceb2 100644 --- a/webview-ui/src/components/common/MarkdownBlock.tsx +++ b/webview-ui/src/components/common/MarkdownBlock.tsx @@ -50,6 +50,44 @@ const remarkUrlToLink = () => { } } +/** + * Custom remark plugin that prevents filenames with extensions from being parsed as bold text + * For example: __init__.py should not be rendered as bold "init" followed by ".py" + * Solves https://github.com/cline/cline/issues/1028 + */ +const remarkPreventBoldFilenames = () => { + return (tree: any) => { + visit(tree, "strong", (node: any, index: number | undefined, parent: any) => { + // Only process if there's a next node (potential file extension) + if (!parent || typeof index === "undefined" || index === parent.children.length - 1) return + + const nextNode = parent.children[index + 1] + + // Check if next node is text and starts with . followed by extension + if (nextNode.type !== "text" || !nextNode.value.match(/^\.[a-zA-Z0-9]+/)) return + + // If the strong node has multiple children, something weird is happening + if (node.children?.length !== 1) return + + // Get the text content from inside the strong node + const strongContent = node.children?.[0]?.value + if (!strongContent || typeof strongContent !== "string") return + + // Validate that the strong content is a valid filename + if (!strongContent.match(/^[a-zA-Z0-9_-]+$/)) return + + // Combine into a single text node + const newNode = { + type: "text", + value: `__${strongContent}__${nextNode.value}`, + } + + // Replace both nodes with the combined text node + parent.children.splice(index, 2, newNode) + }) + } +} + const StyledMarkdown = styled.div` pre { background-color: ${CODE_BLOCK_BG_COLOR}; @@ -160,6 +198,7 @@ const MarkdownBlock = memo(({ markdown }: MarkdownBlockProps) => { const { theme } = useExtensionState() const [reactContent, setMarkdown] = useRemark({ remarkPlugins: [ + remarkPreventBoldFilenames, remarkUrlToLink, () => { return (tree) => {