define virtual fk

packages/web/src/tabs/JsonEditorTab.svelte

@@ -0,0 +1,83 @@
+<script lang="ts" context="module">
+  const getCurrentEditor = () => getActiveComponent('JsonEditorTab');
+
+  registerFileCommands({
+    idPrefix: 'json',
+    category: 'Json',
+    getCurrentEditor,
+    folder: 'yaml',
+    format: 'text',
+    fileExtension: 'json',
+
+    toggleComment: true,
+    findReplace: true,
+  });
+</script>
+
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import { registerFileCommands } from '../commands/stdCommands';
+
+  import AceEditor from '../query/AceEditor.svelte';
+  import useEditorData from '../query/useEditorData';
+  import invalidateCommands from '../commands/invalidateCommands';
+  import createActivator, { getActiveComponent } from '../utility/createActivator';
+
+  export let tabid;
+
+  const tabVisible: any = getContext('tabVisible');
+
+  export const activator = createActivator('JsonEditorTab', false);
+
+  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, saveToStorage } = useEditorData({ tabid });
+
+  function createMenu() {
+    return [
+      { command: 'json.toggleComment' },
+      { divider: true },
+      { command: 'json.save' },
+      { command: 'json.saveAs' },
+      { divider: true },
+      { command: 'json.find' },
+      { command: 'json.replace' },
+    ];
+  }
+</script>
+
+<AceEditor
+  value={$editorState.value || ''}
+  menu={createMenu()}
+  on:input={e => setEditorData(e.detail)}
+  on:focus={() => {
+    activator.activate();
+    invalidateCommands();
+  }}
+  bind:this={domEditor}
+  mode="json"
+/>

packages/web/src/tabs/YamlEditorTab.svelte

@@ -31,7 +31,7 @@
 
   const tabVisible: any = getContext('tabVisible');
 
-  export const activator = createActivator('MarkdownEditorTab', false);
+  export const activator = createActivator('YamlEditorTab', false);
 
   let domEditor;
 
@@ -63,8 +63,6 @@
 
   function createMenu() {
     return [
-      { command: 'yaml.preview' },
-      { divider: true },
       { command: 'yaml.toggleComment' },
       { divider: true },
       { command: 'yaml.save' },

packages/web/src/tabs/index.js

@@ -15,6 +15,7 @@ import * as FavoriteEditorTab from './FavoriteEditorTab.svelte';
 import * as QueryDesignTab from './QueryDesignTab.svelte';
 import * as CommandListTab from './CommandListTab.svelte';
 import * as YamlEditorTab from './YamlEditorTab.svelte';
+import * as JsonEditorTab from './JsonEditorTab.svelte';
 import * as CompareModelTab from './CompareModelTab.svelte';
 import * as JsonTab from './JsonTab.svelte';
 import * as ChangelogTab from './ChangelogTab.svelte';
@@ -38,6 +39,7 @@ export default {
   QueryDesignTab,
   CommandListTab,
   YamlEditorTab,
+  JsonEditorTab,
   CompareModelTab,
   JsonTab,
   ChangelogTab,