markdown manifest

packages/web/src/tabs/MarkdownEditorTab.js

@@ -8,15 +8,42 @@ import useEditorData from '../utility/useEditorData';
 import SaveTabModal from '../modals/SaveTabModal';
 import useModalState from '../modals/useModalState';
 import LoadingInfo from '../widgets/LoadingInfo';
+import { useOpenedTabs, useSetOpenedTabs } from '../utility/globalState';
+import { openNewTab } from '../utility/common';
 
 export default function MarkdownEditorTab({ tabid, tabVisible, toolbarPortalRef, ...other }) {
-  const { editorData, setEditorData, isLoading } = useEditorData({ tabid });
+  const { editorData, setEditorData, isLoading, saveToStorage } = useEditorData({ tabid });
   const saveFileModalState = useModalState();
+  const openedTabs = useOpenedTabs();
+  const setOpenedTabs = useSetOpenedTabs();
 
   const handleKeyDown = (data, hash, keyString, keyCode, event) => {
     if (keyCode == keycodes.f5) {
       event.preventDefault();
-      // handlePreview();
+      showPreview();
+    }
+  };
+
+  const showPreview = async () => {
+    await saveToStorage();
+    const existing = (openedTabs || []).find((x) => x.props && x.props.sourceTabId == tabid && x.closedTime == null);
+    if (existing) {
+      setOpenedTabs((tabs) =>
+        tabs.map((x) => ({
+          ...x,
+          selected: x.tabid == existing.tabid,
+        }))
+      );
+    } else {
+      const thisTab = (openedTabs || []).find((x) => x.tabid == tabid);
+      openNewTab(setOpenedTabs, {
+        title: thisTab.title,
+        icon: 'img preview',
+        tabComponent: 'MarkdownPreviewTab',
+        props: {
+          sourceTabId: tabid,
+        },
+      });
     }
   };
 
@@ -40,7 +67,10 @@ export default function MarkdownEditorTab({ tabid, tabVisible, toolbarPortalRef,
       {toolbarPortalRef &&
         toolbarPortalRef.current &&
         tabVisible &&
-        ReactDOM.createPortal(<MarkdownToolbar save={saveFileModalState.open} />, toolbarPortalRef.current)}
+        ReactDOM.createPortal(
+          <MarkdownToolbar save={saveFileModalState.open} showPreview={showPreview} />,
+          toolbarPortalRef.current
+        )}
       <SaveTabModal
         modalState={saveFileModalState}
         tabVisible={tabVisible}

packages/web/src/tabs/MarkdownPreviewTab.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import LoadingInfo from '../widgets/LoadingInfo';
+import MarkdownExtendedView from '../markdown/MarkdownExtendedView';
+import useEditorData from '../utility/useEditorData';
+
+export default function MarkdownPreviewTab({ sourceTabId, tabVisible }) {
+  const [reloadToken, setReloadToken] = React.useState(0);
+  const { editorData, isLoading } = useEditorData({ tabid: sourceTabId, reloadToken });
+
+  React.useEffect(() => {
+    if (tabVisible) setReloadToken((x) => x + 1);
+  }, [tabVisible]);
+
+  if (isLoading) {
+    return (
+      <div>
+        <LoadingInfo message="Loading markdown page" />
+      </div>
+    );
+  }
+
+  return <MarkdownExtendedView>{editorData || ''}</MarkdownExtendedView>;
+}

packages/web/src/tabs/index.js

@@ -10,6 +10,7 @@ import PluginTab from './PluginTab';
 import ChartTab from './ChartTab';
 import MarkdownEditorTab from './MarkdownEditorTab';
 import MarkdownViewTab from './MarkdownViewTab';
+import MarkdownPreviewTab from './MarkdownPreviewTab';
 
 export default {
   TableDataTab,
@@ -24,4 +25,5 @@ export default {
   ChartTab,
   MarkdownEditorTab,
   MarkdownViewTab,
+  MarkdownPreviewTab,
 };