markdown viewer

packages/web/src/markdown/MarkdownExtendedView.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import Markdown from 'markdown-to-jsx';
+import styled from 'styled-components';
+import OpenChartLink from './OpenChartLink';
+
+const Wrapper = styled.div`
+  padding: 10px;
+  overflow: auto;
+  flex: 1;
+`;
+
+export default function MarkdownExtendedView({ children }) {
+  return (
+    <Wrapper>
+      <Markdown
+        options={{
+          overrides: {
+            OpenChartLink: {
+              component: OpenChartLink,
+            },
+          },
+        }}
+      >
+        {children || ''}
+      </Markdown>
+    </Wrapper>
+  );
+}

packages/web/src/markdown/OpenChartLink.js

@@ -0,0 +1,44 @@
+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;
+  }
+`;
+
+export default function OpenChartLink({ file, children }) {
+  const setOpenedTabs = useSetOpenedTabs();
+  const currentDb = useCurrentDatabase();
+  const theme = useTheme();
+
+  const handleClick = async () => {
+    const resp = await axios.post('files/load', { folder: 'charts', file, format: 'json' });
+    openNewTab(
+      setOpenedTabs,
+      {
+        title: file,
+        icon: 'img chart',
+        tabComponent: 'ChartTab',
+        props: {
+          conid: currentDb && currentDb.connection && currentDb.connection._id,
+          database: currentDb && currentDb.name,
+        },
+      },
+      resp.data
+    );
+  };
+
+  return (
+    <StyledLink theme={theme} onClick={handleClick}>
+      {children}
+    </StyledLink>
+  );
+}

packages/web/src/modals/AboutModal.js

@@ -28,6 +28,9 @@ const StyledLink = styled.a`
   text-decoration: none;
   cursor: pointer;
   color: ${(props) => props.theme.main_background_blue[7]};
+  &:hover {
+    text-decoration: underline;
+  }
 `;
 
 function Line({ label, children }) {

packages/web/src/tabs/MarkdownEditorTab.js

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import _ from 'lodash';
 import keycodes from '../utility/keycodes';
 import GenericEditor from '../sqleditor/GenericEditor';
-import MarkdownToolbar from '../charts/MarkdownToolbar';
+import MarkdownToolbar from '../markdown/MarkdownToolbar';
 import useEditorData from '../utility/useEditorData';
 import SaveTabModal from '../modals/SaveTabModal';
 import useModalState from '../modals/useModalState';

packages/web/src/tabs/MarkdownViewTab.js

@@ -1,14 +1,7 @@
 import React from 'react';
 import axios from '../utility/axios';
 import LoadingInfo from '../widgets/LoadingInfo';
-import Markdown from 'markdown-to-jsx';
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  padding: 10px;
-  overflow: auto;
-  flex: 1;
-`;
+import MarkdownExtendedView from '../markdown/MarkdownExtendedView';
 
 export default function MarkdownViewTab({ file }) {
   const [isLoading, setIsLoading] = React.useState(false);
@@ -33,9 +26,5 @@ export default function MarkdownViewTab({ file }) {
     );
   }
 
-  return (
-    <Wrapper>
-      <Markdown>{text || ''}</Markdown>
-    </Wrapper>
-  );
+  return <MarkdownExtendedView>{text || ''}</MarkdownExtendedView>;
 }