text file model editing

packages/web/src/appobj/ArchiveFileAppObject.svelte

@@ -12,15 +12,17 @@
     });
   }
 
-  async function openSqlFile(fileName, fileType, folderName) {
+  async function openTextFile(fileName, fileType, folderName, tabComponent, icon, wantConnection) {
     const connProps: any = {};
     let tooltip = undefined;
 
+    if (wantConnection) {
       const connection = _.get(getCurrentDatabase(), 'connection') || {};
       const database = _.get(getCurrentDatabase(), 'name');
       connProps.conid = connection._id;
       connProps.database = database;
       tooltip = `${getConnectionLabel(connection)}\n${database}`;
+    }
     const resp = await axiosInstance.post('files/load', {
       folder: 'archive:' + folderName,
       file: fileName + '.' + fileType,
@@ -30,8 +32,8 @@
     openNewTab(
       {
         title: fileName,
-        icon: 'img sql-file',
+        icon,
-        tabComponent: 'QueryTab',
+        tabComponent,
         tooltip,
         props: {
           savedFile: fileName + '.' + fileType,
@@ -68,7 +70,6 @@
   import axiosInstance from '../utility/axiosInstance';
   import createQuickExportMenu from '../utility/createQuickExportMenu';
   import { exportElectronFile } from '../utility/exportElectronFile';
-  import { openSqliteFile } from '../utility/openElectronFile';
   import openNewTab from '../utility/openNewTab';
   import AppObjectCore from './AppObjectCore.svelte';
   import getConnectionLabel from '../utility/getConnectionLabel';
@@ -101,10 +102,18 @@
   };
   const handleClick = () => {
     if (data.fileType == 'jsonl') openArchive(data.fileName, data.folderName);
-    if (data.fileType.endsWith('.sql')) openSqlFile(data.fileName, data.fileType, data.folderName);
+    if (data.fileType.endsWith('.sql')) {
+      handleOpenSqlFile();
+    }
+    if (data.fileType.endsWith('.yaml')) {
+      handleOpenYamlFile();
+    }
   };
   const handleOpenSqlFile = () => {
-    openSqlFile(data.fileName, data.fileType, data.folderName);
+    openTextFile(data.fileName, data.fileType, data.folderName, 'QueryTab', 'img sql-file', true);
+  };
+  const handleOpenYamlFile = () => {
+    openTextFile(data.fileName, data.fileType, data.folderName, 'YamlEditorTab', 'img yaml', true);
   };
 
   function createMenu() {
@@ -139,6 +148,7 @@
         },
       },
       data.fileType.endsWith('.sql') && { text: 'Open SQL', onClick: handleOpenSqlFile },
+      data.fileType.endsWith('.yaml') && { text: 'Open YAML', onClick: handleOpenYamlFile },
     ];
   }
 </script>

packages/web/src/icons/FontIcon.svelte

@@ -96,6 +96,7 @@
     'img preview': 'mdi mdi-file-find color-icon-red',
     'img favorite': 'mdi mdi-star color-icon-yellow',
     'img query-design': 'mdi mdi-vector-polyline-edit color-icon-red',
+    'img yaml': 'mdi mdi-code-brackets color-icon-red',
 
     'img free-table': 'mdi mdi-table color-icon-green',
     'img macro': 'mdi mdi-hammer-wrench',

packages/web/src/query/AceEditor.svelte

@@ -10,6 +10,7 @@
   import 'ace-builds/src-noconflict/mode-sqlserver';
   import 'ace-builds/src-noconflict/mode-json';
   import 'ace-builds/src-noconflict/mode-javascript';
+  import 'ace-builds/src-noconflict/mode-yaml';
   import 'ace-builds/src-noconflict/mode-markdown';
   import 'ace-builds/src-noconflict/ext-searchbox';
   import 'ace-builds/src-noconflict/ext-language_tools';

packages/web/src/tabs/YamlEditorTab.svelte

@@ -0,0 +1,89 @@
+<script lang="ts" context="module">
+  const getCurrentEditor = () => getActiveComponent('YamlEditorTab');
+
+  registerFileCommands({
+    idPrefix: 'yaml',
+    category: 'Yaml',
+    getCurrentEditor,
+    folder: 'yaml',
+    format: 'text',
+    fileExtension: 'yaml',
+
+    toggleComment: true,
+    findReplace: true,
+  });
+</script>
+
+<script lang="ts">
+  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 { openedTabs } from '../stores';
+  import invalidateCommands from '../commands/invalidateCommands';
+  import openNewTab from '../utility/openNewTab';
+  import { setSelectedTab } from '../utility/common';
+  import createActivator, { getActiveComponent } from '../utility/createActivator';
+
+  export let tabid;
+
+  const tabVisible: any = getContext('tabVisible');
+
+  export const activator = createActivator('MarkdownEditorTab', 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: 'yaml.preview' },
+      { divider: true },
+      { command: 'yaml.toggleComment' },
+      { divider: true },
+      { command: 'yaml.save' },
+      { command: 'yaml.saveAs' },
+      { divider: true },
+      { command: 'yaml.find' },
+      { command: 'yaml.replace' },
+    ];
+  }
+</script>
+
+<AceEditor
+  value={$editorState.value || ''}
+  menu={createMenu()}
+  on:input={e => setEditorData(e.detail)}
+  on:focus={() => {
+    activator.activate();
+    invalidateCommands();
+  }}
+  bind:this={domEditor}
+  mode="yaml"
+/>

packages/web/src/tabs/index.js

@@ -14,6 +14,7 @@ import * as MarkdownPreviewTab from './MarkdownPreviewTab.svelte';
 import * as FavoriteEditorTab from './FavoriteEditorTab.svelte';
 import * as QueryDesignTab from './QueryDesignTab.svelte';
 import * as CommandListTab from './CommandListTab.svelte';
+import * as YamlEditorTab from './YamlEditorTab.svelte';
 
 export default {
   TableDataTab,
@@ -32,4 +33,5 @@ export default {
   FavoriteEditorTab,
   QueryDesignTab,
   CommandListTab,
+  YamlEditorTab,
 };

packages/web/src/widgets/ArchiveWidget.svelte

@@ -8,10 +8,10 @@
 </script>
 
 <WidgetColumnBar>
-  <WidgetColumnBarItem title="Archive folders" name="folders" height="50%">
+  <WidgetColumnBarItem title="Archive folders, DB models" name="folders" height="50%">
     <ArchiveFolderList />
   </WidgetColumnBarItem>
-  <WidgetColumnBarItem title="Archive files" name="files">
+  <WidgetColumnBarItem title="Files, Tables, Views, Functions" name="files">
     <ArchiveFilesList />
   </WidgetColumnBarItem>
 </WidgetColumnBar>