diff --git a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/utils/formatter/MarkdownToJsxString.ts b/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/utils/formatter/MarkdownToJsxString.ts index 8e14be44b0..7706a06573 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/utils/formatter/MarkdownToJsxString.ts +++ b/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/utils/formatter/MarkdownToJsxString.ts @@ -17,7 +17,7 @@ class MarkdownToJsxString implements IFormatter { .use(remarkParse) .use(remarkGfm) // support GitHub Flavored Markdown .use(remarkRedisCode) // Add custom component for Redis code block - .use(remarkImage) // Add custom component for Redis code block + .use(remarkImage, config ? { history: config.history } : undefined) // Add custom component for Redis code block .use(remarkRehype, { allowDangerousHtml: true }) // Pass raw HTML strings through. .use(rehypeLinks, config ? { history: config.history } : undefined) // Customise links .use(MarkdownToJsxString.rehypeWrapSymbols) // Wrap special symbols inside curly braces for JSX parse diff --git a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/utils/remarkImage.ts b/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/utils/remarkImage.ts index d661be14c8..e9b22c37ab 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/utils/remarkImage.ts +++ b/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/utils/remarkImage.ts @@ -1,10 +1,26 @@ import { visit } from 'unist-util-visit' import { IS_ABSOLUTE_PATH } from 'uiSrc/constants/regex' import { RESOURCES_BASE_URL } from 'uiSrc/services/resourcesService' +import { ApiEndpoints } from 'uiSrc/constants' +import { IFormatterConfig } from './formatter/formatter.interfaces' -export const remarkImage = (): (tree: Node) => void => (tree: any) => { +const getSourcelPath = (search?: string) => { + switch (true) { + case search?.indexOf(ApiEndpoints.GUIDES_PATH) !== -1: + return 'static/guides/' + case search?.indexOf(ApiEndpoints.TUTORIALS_PATH) !== -1: + return 'static/tutorials/' + default: + return '' + } +} + +const updateUrl = (url: string) => url.replace(/^\//, '') + +export const remarkImage = (config?: IFormatterConfig): (tree: Node) => void => (tree: any) => { + const sourcePath = getSourcelPath(config?.history?.location?.search) // Find img node in syntax tree visit(tree, 'image', (node) => { - node.url = IS_ABSOLUTE_PATH.test(node.url || '') ? node.url : `${RESOURCES_BASE_URL}${node.url.replace(/^\//, '')}` + node.url = IS_ABSOLUTE_PATH.test(node.url || '') ? node.url : `${RESOURCES_BASE_URL}${sourcePath}${updateUrl(node.url)}` }) }