markdown manifest

packages/web/src/markdown/MarkdownExtendedView.js

@@ -2,6 +2,7 @@ import React from 'react';
 import Markdown from 'markdown-to-jsx';
 import styled from 'styled-components';
 import OpenChartLink from './OpenChartLink';
+import MarkdownLink from './MarkdownLink';
 
 const Wrapper = styled.div`
   padding: 10px;
@@ -18,6 +19,7 @@ export default function MarkdownExtendedView({ children }) {
             OpenChartLink: {
               component: OpenChartLink,
             },
+            a: MarkdownLink,
           },
         }}
       >

packages/web/src/markdown/MarkdownLink.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import useTheme from '../theme/useTheme';
+import { StyledThemedLink } from '../widgets/FormStyledButton';
+
+export default function MarkdownLink({ href, title, children }) {
+  const theme = useTheme();
+
+  return (
+    <StyledThemedLink theme={theme} href={href} title={title} target="_blank">
+      {children}
+    </StyledThemedLink>
+  );
+}

packages/web/src/markdown/MarkdownToolbar.js

@@ -2,7 +2,7 @@ import React from 'react';
 import useHasPermission from '../utility/useHasPermission';
 import ToolbarButton from '../widgets/ToolbarButton';
 
-export default function MarkdownToolbar({ save }) {
+export default function MarkdownToolbar({ save, showPreview }) {
   const hasPermission = useHasPermission();
 
   return (
@@ -12,6 +12,9 @@ export default function MarkdownToolbar({ save }) {
           Save
         </ToolbarButton>
       )}
+      <ToolbarButton onClick={showPreview} icon="icon preview">
+        Preview
+      </ToolbarButton>
     </>
   );
 }

packages/web/src/markdown/OpenChartLink.js

@@ -1,18 +1,9 @@
 import React from 'react';
 import { useCurrentDatabase, useSetOpenedTabs } from '../utility/globalState';
-import styled from 'styled-components';
 import { openNewTab } from '../utility/common';
 import axios from '../utility/axios';
 import useTheme from '../theme/useTheme';
-
-const StyledLink = styled.a`
-  text-decoration: none;
-  cursor: pointer;
-  color: ${(props) => props.theme.main_background_blue[7]};
-  &:hover {
-    text-decoration: underline;
-  }
-`;
+import { StyledThemedLink } from '../widgets/FormStyledButton';
 
 export default function OpenChartLink({ file, children }) {
   const setOpenedTabs = useSetOpenedTabs();
@@ -37,8 +28,8 @@ export default function OpenChartLink({ file, children }) {
   };
 
   return (
-    <StyledLink theme={theme} onClick={handleClick}>
+    <StyledThemedLink theme={theme} onClick={handleClick}>
       {children}
-    </StyledLink>
+    </StyledThemedLink>
   );
 }