From 30c29ba8f8f8071834b6fd05d25da7d086ab8ac8 Mon Sep 17 00:00:00 2001
From: seven <zilisheng1996@gmail.com>
Date: Sat, 11 Jan 2025 15:03:30 +0800
Subject: [PATCH] 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 <zilisheng1996@gmail.com>
---
 docs/index.md                    |  3 +++
 src/common/monaco/lexerRules.ts  |  4 ++++
 src/common/monaco/tokenlizer.ts  |  7 +++++--
 src/components/VersionDetect.vue |  2 +-
 src/views/editor/index.vue       | 34 +++++++++++++++++++++++---------
 5 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/docs/index.md b/docs/index.md
index 092e8faf..2f1a0a89 100644
--- a/docs/index.md
+++ b/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
diff --git a/src/common/monaco/lexerRules.ts b/src/common/monaco/lexerRules.ts
index 5d6bf06a..fd0c17cd 100644
--- a/src/common/monaco/lexerRules.ts
+++ b/src/common/monaco/lexerRules.ts
@@ -179,5 +179,9 @@ export const search = {
       { open: `'`, close: `'` },
       { open: '"', close: '"' },
     ],
+    comments: {
+      lineComment: '//',
+      blockComment: ['/*', '*/'],
+    },
   },
 };
diff --git a/src/common/monaco/tokenlizer.ts b/src/common/monaco/tokenlizer.ts
index 03810c9d..07ff25d3 100644
--- a/src/common/monaco/tokenlizer.ts
+++ b/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);
   }
diff --git a/src/components/VersionDetect.vue b/src/components/VersionDetect.vue
index a79c38be..90378ad7 100644
--- a/src/components/VersionDetect.vue
+++ b/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 () => {
diff --git a/src/views/editor/index.vue b/src/views/editor/index.vue
index 0b86ef30..2316c46d 100644
--- a/src/views/editor/index.vue
+++ b/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>