form view

packages/web/src/tabs/MarkdownEditorTab.svelte

@@ -35,8 +35,10 @@
 
   import AceEditor from '../query/AceEditor.svelte';
   import useEditorData from '../query/useEditorData';
-  import { getActiveTabId } from '../stores';
+  import { getActiveTabId, openedTabs } from '../stores';
   import invalidateCommands from '../commands/invalidateCommands';
+  import openNewTab from '../utility/openNewTab';
+  import { setSelectedTab } from '../utility/common';
 
   export let tabid;
 
@@ -70,7 +72,25 @@
     return tabid;
   }
 
-  const { editorState, editorValue, setEditorData } = useEditorData({ tabid });
+  export async function preview() {
+    await saveToStorage();
+    const existing = ($openedTabs || []).find(x => x.props && x.props.sourceTabId == tabid && x.closedTime == null);
+    if (existing) {
+      setSelectedTab(existing.tabid);
+    } else {
+      const thisTab = ($openedTabs || []).find(x => x.tabid == tabid);
+      openNewTab({
+        title: thisTab.title,
+        icon: 'img preview',
+        tabComponent: 'MarkdownPreviewTab',
+        props: {
+          sourceTabId: tabid,
+        },
+      });
+    }
+  }
+
+  const { editorState, editorValue, setEditorData, saveToStorage } = useEditorData({ tabid });
 
   function createMenu() {
     return [

packages/web/src/tabs/MarkdownPreviewTab.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import LoadingInfo from '../elements/LoadingInfo.svelte';
+  import Markdown from '../elements/Markdown.svelte';
+
+  import useEditorData from '../query/useEditorData';
+
+  export let sourceTabId;
+  const tabVisible: any = getContext('tabVisible');
+  let data = null;
+
+  const { initialLoad, editorState } = useEditorData({
+    tabid: sourceTabId,
+    onInitialData: value => {
+      console.log('onInitialData', value);
+      data = value;
+    },
+  });
+
+  $: if ($tabVisible) initialLoad();
+</script>
+
+{#if $editorState.isLoading}
+  <div>
+    <LoadingInfo message="Loading markdown page" />
+  </div>
+{:else}
+  <div>
+    {#key data}
+      <Markdown source={data || ''} />
+    {/key}
+  </div>
+{/if}
+
+<style>
+  div {
+    padding: 10px;
+    overflow: auto;
+    flex: 1;
+  }
+</style>

packages/web/src/tabs/index.js

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