favorite editor json tab

packages/web/src/commands/stdCommands.ts

@@ -190,30 +190,33 @@ export function registerFileCommands({
   folder,
   format,
   fileExtension,
+  save = true,
   execute = false,
   toggleComment = false,
   findReplace = false,
   undoRedo = false,
 }) {
-  registerCommand({
-    id: idPrefix + '.save',
-    group: 'save',
-    category,
-    name: 'Save',
-    // keyText: 'Ctrl+S',
-    icon: 'icon save',
-    toolbar: true,
-    testEnabled: () => getCurrentEditor() != null,
-    onClick: () => saveTabFile(getCurrentEditor(), false, folder, format, fileExtension),
-  });
-  registerCommand({
-    id: idPrefix + '.saveAs',
-    group: 'saveAs',
-    category,
-    name: 'Save As',
-    testEnabled: () => getCurrentEditor() != null,
-    onClick: () => saveTabFile(getCurrentEditor(), true, folder, format, fileExtension),
-  });
+  if (save) {
+    registerCommand({
+      id: idPrefix + '.save',
+      group: 'save',
+      category,
+      name: 'Save',
+      // keyText: 'Ctrl+S',
+      icon: 'icon save',
+      toolbar: true,
+      testEnabled: () => getCurrentEditor() != null,
+      onClick: () => saveTabFile(getCurrentEditor(), false, folder, format, fileExtension),
+    });
+    registerCommand({
+      id: idPrefix + '.saveAs',
+      group: 'saveAs',
+      category,
+      name: 'Save As',
+      testEnabled: () => getCurrentEditor() != null,
+      onClick: () => saveTabFile(getCurrentEditor(), true, folder, format, fileExtension),
+    });
+  }
 
   if (execute) {
     registerCommand({

packages/web/src/tabs/FavoriteEditorTab.svelte

@@ -0,0 +1,125 @@
+<script lang="ts" context="module">
+  let lastFocusedEditor = null;
+  const getCurrentEditor = () =>
+    lastFocusedEditor?.getTabId && lastFocusedEditor?.getTabId() == getActiveTabId() ? lastFocusedEditor : null;
+
+  registerFileCommands({
+    idPrefix: 'favoriteJsonEditor',
+    category: 'Favorite JSON editor',
+    getCurrentEditor,
+    folder: null,
+    format: null,
+    fileExtension: null,
+
+    save: false,
+    findReplace: true,
+  });
+  registerCommand({
+    id: 'favoriteJsonEditor.save',
+    group: 'save',
+    name: 'Save',
+    category: 'Favorite JSON editor',
+    testEnabled: () => getCurrentEditor() != null,
+    onClick: () => getCurrentEditor().save(),
+  });
+  registerCommand({
+    id: 'favoriteJsonEditor.preview',
+    name: 'Preview',
+    category: 'Favorite JSON editor',
+    keyText: 'F5 | Ctrl+Enter',
+    testEnabled: () => getCurrentEditor() != null,
+    onClick: () => getCurrentEditor().preview(),
+  });
+</script>
+
+<script lang="ts">
+  import { get_current_component } from 'svelte/internal';
+  import { getContext } from 'svelte';
+  import registerCommand from '../commands/registerCommand';
+  import { registerFileCommands } from '../commands/stdCommands';
+
+  import AceEditor from '../query/AceEditor.svelte';
+  import useEditorData from '../query/useEditorData';
+  import { getActiveTabId } from '../stores';
+  import invalidateCommands from '../commands/invalidateCommands';
+  import axiosInstance from '../utility/axiosInstance';
+  import { showModal } from '../modals/modalTools';
+  import ErrorMessageModal from '../modals/ErrorMessageModal.svelte';
+  import { openFavorite } from '../appobj/FavoriteFileAppObject.svelte';
+
+  export let tabid;
+  export let savedFile;
+
+  const tabVisible: any = getContext('tabVisible');
+
+  const instance = get_current_component();
+
+  let domEditor;
+
+  $: if ($tabVisible && domEditor) {
+    domEditor?.getEditor()?.focus();
+  }
+
+  export function getData() {
+    return $editorState.value || '';
+  }
+
+  export function find() {
+    domEditor.getEditor().execCommand('find');
+  }
+
+  export function replace() {
+    domEditor.getEditor().execCommand('replace');
+  }
+
+  export function getTabId() {
+    return tabid;
+  }
+
+  export function preview() {
+    try {
+      const data = JSON.parse(getData());
+      openFavorite(data);
+    } catch (err) {
+      showModal(ErrorMessageModal, { message: err.message, title: 'Error parsing JSON' });
+    }
+  }
+
+  const { editorState, editorValue, setEditorData } = useEditorData({ tabid });
+
+  function createMenu() {
+    return [
+      { command: 'favoriteJsonEditor.save' },
+      { command: 'favoriteJsonEditor.preview' },
+      { divider: true },
+      { command: 'favoriteJsonEditor.find' },
+      { command: 'favoriteJsonEditor.replace' },
+    ];
+  }
+
+  export function save() {
+    try {
+      const data = JSON.parse(getData());
+      axiosInstance.post('files/save', {
+        file: savedFile,
+        folder: 'favorites',
+        format: 'json',
+        data,
+      });
+    } catch (err) {
+      showModal(ErrorMessageModal, { message: err.message, title: 'Error parsing JSON' });
+    }
+  }
+</script>
+
+<AceEditor
+  value={$editorState.value || ''}
+  menu={createMenu()}
+  on:input={e => setEditorData(e.detail)}
+  on:focus={() => {
+    lastFocusedEditor = instance;
+    invalidateCommands();
+  }}
+  bind:this={domEditor}
+  mode="json"
+/>

packages/web/src/tabs/index.js

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