diff --git a/web/src/components/MarkdownViewer/MarkdownViewer.tsx b/web/src/components/MarkdownViewer/MarkdownViewer.tsx index 17e0f8bf0..6ae09b6b8 100644 --- a/web/src/components/MarkdownViewer/MarkdownViewer.tsx +++ b/web/src/components/MarkdownViewer/MarkdownViewer.tsx @@ -1,5 +1,5 @@ import { useHistory } from 'react-router-dom' -import React, { useCallback, useMemo, useState } from 'react' +import React, { useCallback, useMemo, useRef, useState } from 'react' import { Container } from '@harness/uicore' import cx from 'classnames' import MarkdownPreview from '@uiw/react-markdown-preview' @@ -21,17 +21,17 @@ export function MarkdownViewer({ source, className, maxHeight }: MarkdownViewerP const [zoomLevel, setZoomLevel] = useState(INITIAL_ZOOM_LEVEL) const [imgEvent, setImageEvent] = useState([]) const refRootHref = useMemo(() => document.getElementById('repository-ref-root')?.getAttribute('href'), []) + const ref = useRef() + const interceptClickEventOnViewerContainer = useCallback( event => { + const imgTags = ref?.current?.querySelector('.wmde-markdown')?.querySelectorAll("img") const { target } = event - const imgPattern = /!\[.*?\]\((.*?)\)/; - const imageArray = source.split('\n').filter(string => imgPattern.test(string)) - const imageStringArray = imageArray.map(string => { - const match = string.match(imgPattern); - return match ? match[1] : ''; - }) - - setImageEvent(imageStringArray) + if (imgTags) { + const imageArray = Array.from(imgTags) + const imageStringArray = imageArray.filter(object => object.src && !object.className).map(img => img.src) + setImageEvent(imageStringArray) + } if (target?.tagName?.toLowerCase() === 'a') { const href = target.getAttribute('href') @@ -67,7 +67,8 @@ export function MarkdownViewer({ source, className, maxHeight }: MarkdownViewerP 0 })} onClick={interceptClickEventOnViewerContainer} - style={{ maxHeight: maxHeight }}> + style={{ maxHeight: maxHeight }} + ref={ref}>