feat: implement comment shortcut (#155)

feat: implement comment shortcut
changes include:
- [x] editor comment line, comment selected block with shortcut cmd + /
- [x]  update the  download link to the official download page
- [x]  autosave file content

Refs: #150

---------

Signed-off-by: seven <[email protected]>

docs/index.md

@@ -1,3 +1,6 @@
 # Index page
 this docs folder contains the documentation for the project.
 
+
+## Useful links
+Monaco-editor actions: https://stackoverflow.com/questions/64430041/get-a-list-of-monaco-commands-actions-ids

src/common/monaco/lexerRules.ts

@@ -179,5 +179,9 @@ export const search = {
       { open: `'`, close: `'` },
       { open: '"', close: '"' },
     ],
+    comments: {
+      lineComment: '//',
+      blockComment: ['/*', '*/'],
+    },
   },
 };

src/common/monaco/tokenlizer.ts

@@ -134,19 +134,22 @@ const replaceTripleQuotes = (value: string) =>
   value
     .replace(/'''(.*?)'''/gs, (_, match) => JSON.stringify(match))
     .replace(/"""(.*?)"""/gs, (_, match) => JSON.stringify(match));
+const replaceComments = (value: string) => value.replace(/\/\/.*/g, '').trim();
 
 export const transformQDSL = ({ path, qdsl }: Pick<SearchAction, 'path' | 'qdsl'>) => {
   try {
+    const puredDsl = replaceTripleQuotes(replaceComments(qdsl));
     const bulkAction = path.includes('_bulk');
     if (bulkAction) {
-      const bulkQdsl = qdsl
+      const bulkQdsl = puredDsl
         .split('\n')
         .map(line => JSON.stringify(JSON5.parse(line)))
         .join('\n');
       return `${bulkQdsl}\n`;
     }
+    console.log('qdsl', replaceComments(qdsl).trim());
 
-    return qdsl ? JSON.stringify(JSON5.parse(replaceTripleQuotes(qdsl)), null, 2) : undefined;
+    return puredDsl ? JSON.stringify(JSON5.parse(puredDsl), null, 2) : undefined;
   } catch (err) {
     throw new CustomError(400, (err as Error).message);
   }

src/components/VersionDetect.vue

@@ -65,7 +65,7 @@ const getLatestReleaseInfo = async (): Promise<{
   return { version: data.tag_name, assets };
 };
 const getLatestLink = async () => {
-  return 'https://github.com/geek-fun/dockit/releases';
+  return 'https://dockit.geekfun.club/download.html';
 };
 
 onMounted(async () => {

src/views/editor/index.vue

@@ -65,6 +65,7 @@ const displayEditorRef = ref();
 
 let executeDecorations: Array<Decoration | string> = [];
 let currentAction: SearchAction | undefined = undefined;
+let saveInterval: NodeJS.Timeout;
 
 const refreshActionMarks = (editor: Editor, searchTokens: SearchAction[]) => {
   const freshDecorations = getActionMarksDecorations(searchTokens);
@@ -258,6 +259,11 @@ const setupQueryEditor = (code: string) => {
     }
   });
 
+  // comments/uncomment line or block
+  queryEditor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Slash, () => {
+    queryEditor!.trigger('keyboard', 'editor.action.commentLine', {});
+  });
+
   // Auto indent current request
   queryEditor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyI, () => {
     const { position } = getAction(queryEditor!.getPosition()) || {};
@@ -331,7 +337,7 @@ const setupQueryEditor = (code: string) => {
   });
 
   // Open the documentation for the current action
-  queryEditor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Slash, () => {
+  queryEditor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyD, () => {
     const docLink = getActionApiDoc(
       EngineType.ELASTICSEARCH,
       'current',
@@ -341,6 +347,23 @@ const setupQueryEditor = (code: string) => {
       open(docLink);
     }
   });
+
+  // Set up autosave interval
+  saveInterval = setInterval(async () => {
+    const model = queryEditor?.getModel();
+    if (!model) {
+      return;
+    }
+    const position = queryEditor?.getPosition();
+    const currentContent = model.getValue();
+
+    if (currentContent !== fileContent.value) {
+      await saveSourceToFile(currentContent);
+      if (position) {
+        queryEditor?.setPosition(position);
+      }
+    }
+  }, 5000);
 };
 
 const queryEditorSize = ref(1);
@@ -361,14 +384,6 @@ const saveFileListener = async () => {
   });
 };
 
-watch(
-  () => fileContent.value,
-  async () => {
-    if (queryEditor) {
-      queryEditor.setValue(fileContent.value);
-    }
-  },
-);
 onMounted(async () => {
   await readSourceFromFile(route.params.filePath as string);
   const code = fileContent.value;
@@ -383,6 +398,7 @@ onUnmounted(() => {
   if (unlistenSaveFile?.value) {
     unlistenSaveFile.value();
   }
+  clearInterval(saveInterval);
 });
 </script>