custom markdown pages - basic concept

packages/web/src/tabs/MarkdownEditorTab.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import _ from 'lodash';
+import keycodes from '../utility/keycodes';
+import GenericEditor from '../sqleditor/GenericEditor';
+import MarkdownToolbar from '../charts/MarkdownToolbar';
+import useEditorData from '../utility/useEditorData';
+import SaveTabModal from '../modals/SaveTabModal';
+import useModalState from '../modals/useModalState';
+import LoadingInfo from '../widgets/LoadingInfo';
+
+export default function MarkdownEditorTab({ tabid, tabVisible, toolbarPortalRef, ...other }) {
+  const { editorData, setEditorData, isLoading } = useEditorData({ tabid });
+  const saveFileModalState = useModalState();
+
+  const handleKeyDown = (data, hash, keyString, keyCode, event) => {
+    if (keyCode == keycodes.f5) {
+      event.preventDefault();
+      // handlePreview();
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div>
+        <LoadingInfo message="Loading markdown page" />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <GenericEditor
+        value={editorData || ''}
+        onChange={setEditorData}
+        tabVisible={tabVisible}
+        onKeyDown={handleKeyDown}
+        mode="markdown"
+      />
+      {toolbarPortalRef &&
+        toolbarPortalRef.current &&
+        tabVisible &&
+        ReactDOM.createPortal(<MarkdownToolbar save={saveFileModalState.open} />, toolbarPortalRef.current)}
+      <SaveTabModal
+        modalState={saveFileModalState}
+        tabVisible={tabVisible}
+        data={editorData}
+        format="text"
+        folder="markdown"
+        tabid={tabid}
+      />
+    </>
+  );
+}

packages/web/src/tabs/MarkdownViewTab.js

@@ -0,0 +1,41 @@
+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;
+`;
+
+export default function MarkdownViewTab({ file }) {
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [text, setText] = React.useState(null);
+
+  const handleLoad = async () => {
+    setIsLoading(true);
+    const resp = await axios.post('files/load', { folder: 'markdown', file, format: 'text' });
+    setText(resp.data);
+    setIsLoading(false);
+  };
+
+  React.useEffect(() => {
+    handleLoad();
+  }, []);
+
+  if (isLoading) {
+    return (
+      <div>
+        <LoadingInfo message="Loading markdown page" />
+      </div>
+    );
+  }
+
+  return (
+    <Wrapper>
+      <Markdown>{text || ''}</Markdown>
+    </Wrapper>
+  );
+}

packages/web/src/tabs/ShellTab.js

@@ -7,7 +7,7 @@ import { VerticalSplitter } from '../widgets/Splitter';
 import keycodes from '../utility/keycodes';
 import { changeTab } from '../utility/common';
 import useSocket from '../utility/SocketProvider';
-import JavaScriptEditor from '../sqleditor/JavaScriptEditor';
+import GenericEditor from '../sqleditor/GenericEditor';
 import ShellToolbar from '../query/ShellToolbar';
 import RunnerOutputPane from '../query/RunnerOutputPane';
 import useShowModal from '../modals/showModal';
@@ -104,12 +104,13 @@ export default function ShellTab({ tabid, tabVisible, toolbarPortalRef, ...other
   return (
     <>
       <VerticalSplitter>
-        <JavaScriptEditor
+        <GenericEditor
           value={editorData || ''}
           onChange={setEditorData}
           tabVisible={tabVisible}
           onKeyDown={handleKeyDown}
           editorRef={editorRef}
+          mode="javascript"
         />
         <RunnerOutputPane runnerId={runnerId} executeNumber={executeNumber} />
       </VerticalSplitter>

packages/web/src/tabs/index.js

@@ -8,6 +8,8 @@ import ArchiveFileTab from './ArchiveFileTab';
 import FreeTableTab from './FreeTableTab';
 import PluginTab from './PluginTab';
 import ChartTab from './ChartTab';
+import MarkdownEditorTab from './MarkdownEditorTab';
+import MarkdownViewTab from './MarkdownViewTab';
 
 export default {
   TableDataTab,
@@ -20,4 +22,6 @@ export default {
   FreeTableTab,
   PluginTab,
   ChartTab,
+  MarkdownEditorTab,
+  MarkdownViewTab,
 };