From bd185f3b171525c5b5aa8f8e151febd363bf8a59 Mon Sep 17 00:00:00 2001
From: Lars Reimann <mail@larsreimann.com>
Date: Fri, 1 Jul 2022 15:04:17 +0200
Subject: [PATCH 1/2] fix(gui): external links in documentation

---
 .../selectionView/DocumentationText.tsx       | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/api-editor/gui/src/features/packageData/selectionView/DocumentationText.tsx b/api-editor/gui/src/features/packageData/selectionView/DocumentationText.tsx
index 2be994d56..cfce47c91 100644
--- a/api-editor/gui/src/features/packageData/selectionView/DocumentationText.tsx
+++ b/api-editor/gui/src/features/packageData/selectionView/DocumentationText.tsx
@@ -2,6 +2,7 @@ import {
     Code,
     Flex,
     HStack,
+    Icon,
     IconButton,
     Link as ChakraLink,
     Stack,
@@ -10,7 +11,7 @@ import {
 } from '@chakra-ui/react';
 import 'katex/dist/katex.min.css';
 import React, { ClassAttributes, FunctionComponent, HTMLAttributes, useState } from 'react';
-import { FaChevronDown, FaChevronRight } from 'react-icons/fa';
+import { FaChevronDown, FaChevronRight, FaExternalLinkAlt } from 'react-icons/fa';
 import ReactMarkdown from 'react-markdown';
 import {
     CodeComponent,
@@ -40,11 +41,21 @@ type ParagraphComponent = FunctionComponent<
 type LinkComponent = ComponentType<ComponentPropsWithoutRef<'a'> & ReactMarkdownProps>;
 
 const CustomLink: LinkComponent = function ({ className, children, href }) {
-    return (
-        <ChakraLink as={RouterLink} to={href ?? '#'} className={className} textDecoration="underline">
-            {children}
-        </ChakraLink>
-    );
+    const to = href ?? "#"
+    if (to.startsWith("http")) {
+        return (
+            <ChakraLink href={to} isExternal>
+                {children} <Icon as={FaExternalLinkAlt} />
+            </ChakraLink>
+        )
+    } else {
+        return (
+            <ChakraLink as={RouterLink} to={to} className={className} textDecoration="underline">
+                {children}
+            </ChakraLink>
+        );
+    }
+
 };
 
 const CustomCode: CodeComponent = function ({ className, children }) {

From 34e3783baf0fc1cff0b50496caae5ea8ce8a4455 Mon Sep 17 00:00:00 2001
From: lars-reimann <lars-reimann@users.noreply.github.com>
Date: Fri, 1 Jul 2022 13:11:11 +0000
Subject: [PATCH 2/2] style: apply automatic fixes of linters

---
 .../packageData/selectionView/DocumentationText.tsx        | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/api-editor/gui/src/features/packageData/selectionView/DocumentationText.tsx b/api-editor/gui/src/features/packageData/selectionView/DocumentationText.tsx
index cfce47c91..f851697ab 100644
--- a/api-editor/gui/src/features/packageData/selectionView/DocumentationText.tsx
+++ b/api-editor/gui/src/features/packageData/selectionView/DocumentationText.tsx
@@ -41,13 +41,13 @@ type ParagraphComponent = FunctionComponent<
 type LinkComponent = ComponentType<ComponentPropsWithoutRef<'a'> & ReactMarkdownProps>;
 
 const CustomLink: LinkComponent = function ({ className, children, href }) {
-    const to = href ?? "#"
-    if (to.startsWith("http")) {
+    const to = href ?? '#';
+    if (to.startsWith('http')) {
         return (
             <ChakraLink href={to} isExternal>
                 {children} <Icon as={FaExternalLinkAlt} />
             </ChakraLink>
-        )
+        );
     } else {
         return (
             <ChakraLink as={RouterLink} to={to} className={className} textDecoration="underline">
@@ -55,7 +55,6 @@ const CustomLink: LinkComponent = function ({ className, children, href }) {
             </ChakraLink>
         );
     }
-
 };
 
 const CustomCode: CodeComponent = function ({ className, children }) {