feat: support relative links in markdown for docs (usebruno#2375)

Co-authored-by: Anoop M D <anoop.md1421@gmail.com>
Its-treason · Aug 24, 2024 · 5a1191b · 5a1191b
1 parent 21d12be
commit 5a1191b
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 7 deletions.
diff --git a/packages/bruno-app/package.json b/packages/bruno-app/package.json
@@ -48,6 +48,7 @@
  "markdown-it": "^14.1.0",
  "monaco-editor": "^0.50.0",
  "monaco-themes": "^0.4.4",
+ "markdown-it-replace-link": "^1.2.1",
  "mousetrap": "^1.6.5",
  "nanoid": "3.3.4",
  "path": "^0.12.7",

diff --git a/packages/bruno-app/src/components/CollectionSettings/Docs/index.js b/packages/bruno-app/src/components/CollectionSettings/Docs/index.js
@@ -62,7 +62,7 @@ const Docs = ({ collection }) => {
  />
  )
  ) : (
- <Markdown onDoubleClick={toggleViewMode} content={docs} />
+ <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={docs} />
  )}
  </StyledWrapper>
  );

diff --git a/packages/bruno-app/src/components/Documentation/index.js b/packages/bruno-app/src/components/Documentation/index.js
@@ -61,7 +61,7 @@ const Documentation = ({ item, collection }) => {
  <CodeEditor value={docs || ''} onChange={onEdit} onSave={onSave} mode="markdown" height={'100%'} />
  )
  ) : (
- <Markdown onDoubleClick={toggleViewMode} content={docs} />
+ <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={docs} />
  )}
  </StyledWrapper>
  );

diff --git a/packages/bruno-app/src/components/MarkDown/index.jsx b/packages/bruno-app/src/components/MarkDown/index.jsx
@@ -1,10 +1,21 @@
 import MarkdownIt from 'markdown-it';
+import * as MarkdownItReplaceLink from 'markdown-it-replace-link';
 import StyledWrapper from './StyledWrapper';
-import React from 'react';
+import { useMemo } from 'react';
 
-const md = new MarkdownIt();
+const Markdown = ({ collectionPath, onDoubleClick, content }) => {
+ htmlFromMarkdown = useMemo(() => {
+ const markdownItOptions = {
+ replaceLink: function (link) {
+ return link.replace(/^\./, collectionPath);
+ }
+ };
+
+ const md = new MarkdownIt(markdownItOptions).use(MarkdownItReplaceLink);
+
+ return md.render(content || '');
+ });
 
-const Markdown = ({ onDoubleClick, content }) => {
  const handleClick = (event) => {
  if (event.target.href) {
  event.preventDefault();
@@ -17,8 +28,6 @@ const Markdown = ({ onDoubleClick, content }) => {
  }
  };
 
- const htmlFromMarkdown = md.render(content || '');
-
  return (
  <StyledWrapper>
  <div className="markdown-body" dangerouslySetInnerHTML={{ __html: htmlFromMarkdown }} onClick={handleClick} />