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/MarkdownToolbar.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import useHasPermission from '../utility/useHasPermission';
+import ToolbarButton from '../widgets/ToolbarButton';
+
+export default function MarkdownToolbar({ save }) {
+  const hasPermission = useHasPermission();
+
+  return (
+    <>
+      {hasPermission('files/markdown/write') && (
+        <ToolbarButton onClick={save} icon="icon save">
+          Save
+        </ToolbarButton>
+      )}
+    </>
+  );
+}

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>
+  );
+}