#RI-4318 tutorials images

Author: Artem

redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/LazyInternalPage/LazyInternalPage.tsx

@@ -64,7 +64,7 @@ const LazyInternalPage = ({ onClose, title, path, sourcePath, manifest, manifest
       const { data, status } = await fetchService.get<string>(path)
       if (isStatusSuccessful(status)) {
         dispatch(setWorkbenchEASearch(search))
-        const contentData = await formatter.format(data, { history })
+        const contentData = await formatter.format({ data, path }, { history })
         setPageData((prevState) => ({ ...prevState, content: contentData }))
         setLoading(false)
       }

redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/utils/formatter/MarkdownToJsxString.ts

@@ -11,13 +11,14 @@ import { remarkRedisCode } from '../transform/remarkRedisCode'
 import { remarkImage } from '../transform/remarkImage'
 
 class MarkdownToJsxString implements IFormatter {
-  format(data: any, config?: IFormatterConfig): Promise<string> {
+  format(input: any, config?: IFormatterConfig): Promise<string> {
+    const { data, path } = input
     return new Promise((resolve, reject) => {
       unified()
         .use(remarkParse)
         .use(remarkGfm) // support GitHub Flavored Markdown
         .use(remarkRedisCode) // Add custom component for Redis code block
-        .use(remarkImage, config ? { history: config.history } : undefined) // Add custom component for Redis code block
+        .use(remarkImage, path) // 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

redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/utils/transform/remarkImage.ts

@@ -1,26 +1,11 @@
 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'
 
-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)
+export const remarkImage = (path: string): (tree: Node) => void => (tree: any) => {
   // Find img node in syntax tree
   visit(tree, 'image', (node) => {
-    node.url = IS_ABSOLUTE_PATH.test(node.url || '') ? node.url : `${RESOURCES_BASE_URL}${sourcePath}${updateUrl(node.url)}`
+    const pathURL = new URL(path, RESOURCES_BASE_URL)
+    const url = new URL(node.url, pathURL)
+    node.url = url.toString()
   })
 }