markdown view tab

packages/web/src/appobj/SavedFileAppObject.svelte

@@ -77,11 +77,25 @@
   $: folder = data?.folder;
   $: handler = HANDLERS[folder] as FileTypeHandler;
 
+  const showMarkdownPage = () => {
+    openNewTab({
+      title: data.file,
+      icon: 'img markdown',
+      tabComponent: 'MarkdownViewTab',
+      props: {
+        savedFile: data.file,
+        savedFolder: 'markdown',
+        savedFormat: 'text',
+      },
+    });
+  };
+
   function createMenu() {
     return [
       { text: 'Open', onClick: openTab },
       hasPermission(`files/${data.folder}/write`) && { text: 'Rename', onClick: handleRename },
       hasPermission(`files/${data.folder}/write`) && { text: 'Delete', onClick: handleDelete },
+      folder == 'markdown' && { text: 'Show page', onClick: showMarkdownPage },
     ];
   }
 

packages/web/src/tabs/MarkdownViewTab.svelte

@@ -0,0 +1,47 @@
+<script lang="ts" context="module">
+  export const allowAddToFavorites = props => true;
+</script>
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import LoadingInfo from '../elements/LoadingInfo.svelte';
+  import Markdown from '../elements/Markdown.svelte';
+
+  import axiosInstance from '../utility/axiosInstance';
+
+  export let savedFile;
+
+  let isLoading = false;
+  let text = null;
+
+  const handleLoad = async () => {
+    isLoading = true;
+    const resp = await axiosInstance.post('files/load', {
+      folder: 'markdown',
+      file: savedFile,
+      format: 'text',
+    });
+    text = resp.data;
+    isLoading = false;
+  };
+
+  onMount(() => {
+    handleLoad();
+  });
+</script>
+
+{#if isLoading}
+  <LoadingInfo message="Loading markdown page" />
+{:else}
+  <div>
+    <Markdown source={text || ''} />
+  </div>
+{/if}
+
+<style>
+  div {
+    padding: 10px;
+    overflow: auto;
+    flex: 1;
+  }
+</style>

packages/web/src/tabs/index.js

@@ -8,7 +8,7 @@ import * as FreeTableTab from './FreeTableTab.svelte';
 import * as PluginTab from './PluginTab.svelte';
 import * as ChartTab from './ChartTab.svelte';
 import * as MarkdownEditorTab from './MarkdownEditorTab.svelte';
-// import MarkdownViewTab from './MarkdownViewTab';
+import * as MarkdownViewTab from './MarkdownViewTab.svelte';
 // import MarkdownPreviewTab from './MarkdownPreviewTab';
 import * as FavoriteEditorTab from './FavoriteEditorTab.svelte';
 import * as QueryDesignTab from './QueryDesignTab.svelte';
@@ -24,7 +24,7 @@ export default {
   PluginTab,
   ChartTab,
   MarkdownEditorTab,
-  //   MarkdownViewTab,
+  MarkdownViewTab,
   //   MarkdownPreviewTab,
   FavoriteEditorTab,
   QueryDesignTab,