markdown editor

packages/web/src/commands/stdCommands.ts

@@ -6,6 +6,7 @@ import ConnectionModal from '../modals/ConnectionModal.svelte';
 import { showModal } from '../modals/modalTools';
 import newQuery from '../query/newQuery';
 import saveTabFile, { saveTabEnabledStore } from '../utility/saveTabFile';
+import openNewTab from '../utility/openNewTab';
 
 function themeCommand(theme: ThemeDefinition) {
   return {
@@ -66,11 +67,39 @@ registerCommand({
   onClick: () => newQuery(),
 });
 
+registerCommand({
+  id: 'new.shell',
+  category: 'New',
+  icon: 'img shell',
+  name: 'JavaScript Shell',
+  onClick: () => {
+    openNewTab({
+      title: 'Shell #',
+      icon: 'img shell',
+      tabComponent: 'ShellTab',
+    });
+  },
+});
+
+registerCommand({
+  id: 'new.markdown',
+  category: 'New',
+  icon: 'img markdown',
+  name: 'Markdown page',
+  onClick: () => {
+    openNewTab({
+      title: 'Page #',
+      icon: 'img markdown',
+      tabComponent: 'MarkdownEditorTab',
+    });
+  },
+});
+
 export function registerFileCommands({
   idPrefix,
   category,
   editorStore,
-  editorStatusStore,
+  editorStatusStore = undefined,
   folder,
   format,
   fileExtension,

packages/web/src/tabs/MarkdownEditorTab.svelte

@@ -0,0 +1,108 @@
+<script lang="ts" context="module">
+  const lastFocusedEditor = writable(null);
+  const currentEditor = derived([lastFocusedEditor, activeTabId], ([editor, tabid]) =>
+    editor?.getTabId() == tabid ? editor : null
+  );
+
+  registerFileCommands({
+    idPrefix: 'markdown',
+    category: 'Markdown',
+    editorStore: currentEditor,
+    folder: 'markdown',
+    format: 'text',
+    fileExtension: 'md',
+
+    toggleComment: true,
+    findReplace: true,
+  });
+
+  registerCommand({
+    id: 'markdown.preview',
+    category: 'Markdown',
+    name: 'Preview',
+    icon: 'icon run',
+    toolbar: true,
+    keyText: 'F5 | Ctrl+Enter',
+    enabledStore: derived(currentEditor, query => query != null),
+    onClick: () => (get(currentEditor) as any).preview(),
+  });
+</script>
+
+<script lang="ts">
+  import { get_current_component } from 'svelte/internal';
+  import { getContext } from 'svelte';
+  import { get, derived, writable } from 'svelte/store';
+  import registerCommand from '../commands/registerCommand';
+  import { registerFileCommands } from '../commands/stdCommands';
+
+  import VerticalSplitter from '../elements/VerticalSplitter.svelte';
+  import AceEditor from '../query/AceEditor.svelte';
+  import RunnerOutputPane from '../query/RunnerOutputPane.svelte';
+  import useEditorData from '../query/useEditorData';
+  import { activeTabId, nullStore } from '../stores';
+  import axiosInstance from '../utility/axiosInstance';
+  import memberStore from '../utility/memberStore';
+  import socket from '../utility/socket';
+  import useEffect from '../utility/useEffect';
+
+  export let tabid;
+
+  const tabVisible: any = getContext('tabVisible');
+
+  let runnerId;
+
+  const instance = get_current_component();
+
+
+  let domEditor;
+
+
+  $: if ($tabVisible && domEditor) {
+    domEditor?.getEditor()?.focus();
+  }
+
+  export function getData() {
+    return $editorState.value || '';
+  }
+
+  export function toggleComment() {
+    domEditor.getEditor().execCommand('togglecomment');
+  }
+
+  export function find() {
+    domEditor.getEditor().execCommand('find');
+  }
+
+  export function replace() {
+    domEditor.getEditor().execCommand('replace');
+  }
+
+  export function getTabId() {
+    return tabid;
+  }
+
+  const { editorState, editorValue, setEditorData } = useEditorData({ tabid });
+
+  function createMenu() {
+    return [
+      { command: 'markdown.preview' },
+      { divider: true },
+      { command: 'markdown.toggleComment' },
+      { divider: true },
+      { command: 'markdown.save' },
+      { command: 'markdown.saveAs' },
+      { divider: true },
+      { command: 'markdown.find' },
+      { command: 'markdown.replace' },
+    ];
+  }
+</script>
+
+<AceEditor
+  value={$editorState.value || ''}
+  menu={createMenu()}
+  on:input={e => setEditorData(e.detail)}
+  on:focus={() => lastFocusedEditor.set(instance)}
+  bind:this={domEditor}
+  mode="markdown"
+/>

packages/web/src/tabs/QueryTab.svelte

@@ -1,22 +1,22 @@
 <script lang="ts" context="module">
-  const lastFocusedQuery = writable(null);
+  const lastFocusedEditor = writable(null);
-  const currentQuery = derived([lastFocusedQuery, activeTabId], ([query, tabid]) =>
+  const currentEditor = derived([lastFocusedEditor, activeTabId], ([editor, tabid]) =>
-    query?.getTabId() == tabid ? query : null
+    editor?.getTabId() == tabid ? editor : null
   );
-  const currentQueryStatus = memberStore(currentQuery, query => query?.getStatus() || nullStore);
+  const currentEditorStatus = memberStore(currentEditor, editor => editor?.getStatus() || nullStore);
 
   registerCommand({
     id: 'query.formatCode',
     category: 'Query',
     name: 'Format code',
-    enabledStore: derived(currentQuery, query => query != null),
+    enabledStore: derived(currentEditor, query => query != null),
-    onClick: () => get(currentQuery).formatCode(),
+    onClick: () => get(currentEditor).formatCode(),
   });
   registerFileCommands({
     idPrefix: 'query',
     category: 'Query',
-    editorStore: currentQuery,
+    editorStore: currentEditor,
-    editorStatusStore: currentQueryStatus,
+    editorStatusStore: currentEditorStatus,
     folder: 'sql',
     format: 'text',
     fileExtension: 'sql',
@@ -207,7 +207,7 @@
       value={$editorState.value || ''}
       menu={createMenu()}
       on:input={e => setEditorData(e.detail)}
-      on:focus={() => lastFocusedQuery.set(instance)}
+      on:focus={() => lastFocusedEditor.set(instance)}
       bind:this={domEditor}
     />
   </svelte:fragment>

packages/web/src/tabs/ShellTab.svelte

@@ -1,15 +1,15 @@
 <script lang="ts" context="module">
-  const lastFocusedShell = writable(null);
+  const lastFocusedEditor = writable(null);
-  const currentShell = derived([lastFocusedShell, activeTabId], ([shell, tabid]) =>
+  const currentEditor = derived([lastFocusedEditor, activeTabId], ([editor, tabid]) =>
-    shell?.getTabId() == tabid ? shell : null
+    editor?.getTabId() == tabid ? editor : null
   );
-  const currentShellStatus = memberStore(currentShell, shell => shell?.getStatus() || nullStore);
+  const currentEditorStatus = memberStore(currentEditor, editor => editor?.getStatus() || nullStore);
 
   registerFileCommands({
     idPrefix: 'shell',
     category: 'Shell',
-    editorStore: currentShell,
+    editorStore: currentEditor,
-    editorStatusStore: currentShellStatus,
+    editorStatusStore: currentEditorStatus,
     folder: 'shell',
     format: 'text',
     fileExtension: 'js',
@@ -165,7 +165,7 @@
       value={$editorState.value || ''}
       menu={createMenu()}
       on:input={e => setEditorData(e.detail)}
-      on:focus={() => lastFocusedShell.set(instance)}
+      on:focus={() => lastFocusedEditor.set(instance)}
       bind:this={domEditor}
       mode="javascript"
     />

packages/web/src/tabs/index.js

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