feat: render/highlight error syntax (#98)

feat: render/highlight error syntax with json5 enabled, to highlight invalid tokens with different colors to improve user experience Refs: #57 #42 --------- Signed-off-by: seven <zilisheng1996@gmail.com>
geek-fun · Sep 5, 2024 · 9875ed9 · 9875ed9
1 parent b523f18
commit 9875ed9
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 24 deletions.
diff --git a/src/common/monaco/completion.ts b/src/common/monaco/completion.ts
@@ -86,7 +86,6 @@ const provideQDSLCompletionItems = (
 
   const queryTreePath = getQueryTreePath(actionBlockContent);
   const dsqlSubTree = getSubDsqlTree(queryAction, queryTreePath);
-  console.log('dsqlSubTree', { queryAction, queryTreePath, dsqlSubTree });
   if (!dsqlSubTree) {
     return;
   }
@@ -155,17 +154,5 @@ const searchCompletionProvider = (model: monaco.editor.ITextModel, position: mon
     return keywordCompletions;
   }
 };
-//
-// const searchResolveCompletionItem = (item: monaco.languages.CompletionItem) => {
-//   console.log('searchResolveCompletionItem', item);
-//   if (item.insertTextRules !== monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet) {
-//     return item;
-//   }
-//
-//   return {
-//     ...item,
-//     insertText: `${item.insertText}: {\n\t$0\n},`,
-//   };
-// };
 
 export { searchCompletionProvider };
diff --git a/src/common/monaco/keywords.ts b/src/common/monaco/keywords.ts
@@ -36,12 +36,8 @@ const paths = [
   '_shards:',
 ];
 
-const _search_sort = ['type', 'order', 'mode', 'missing', 'nested', '_script'];
-
 const dsqlKeywords = getKeywordsFromDsqlTree(dsqlTree);
 
-const keywords = Array.from(
-  new Set([...methods, ...paths, ...dsqlKeywords, ..._search_sort]),
-).filter(Boolean);
+const keywords = Array.from(new Set([...methods, ...paths, ...dsqlKeywords])).filter(Boolean);
 
 export { keywords, paths };
diff --git a/src/common/monaco/lexerRules.ts b/src/common/monaco/lexerRules.ts
@@ -33,7 +33,7 @@ export const search = {
           regex: '{',
           action: {
             token: 'paren.lparen',
-            next: 'xjson',
+            next: 'json5',
           },
         },
         { include: 'common' },
@@ -54,9 +54,9 @@ export const search = {
         // whitespace
         { include: '@whitespace' },
         // json block
-        { include: '@xjson' },
+        { include: '@json5' },
       ],
-      xjson: [
+      json5: [
         [
           /["']?(.*_?script|inline|source)["']?(\s*?)(:)(\s*?)("""|''')/,
           [
@@ -109,7 +109,6 @@ export const search = {
           },
         ],
         { include: '@whitespace' },
-        [/.+?/, { token: 'text' }],
         [/\/\/.*$/, { token: 'invalid' }],
       ],
 

diff --git a/src/views/editor/index.vue b/src/views/editor/index.vue
@@ -62,11 +62,11 @@ let searchTokens: SearchAction[] = [];
 let executeDecorations: Array<Decoration | string> = [];
 
 const refreshActionMarks = (editor: Editor, searchTokens: SearchAction[]) => {
-  const freshedDecorations = getActionMarksDecorations(searchTokens);
+  const freshDecorations = getActionMarksDecorations(searchTokens);
   // @See https://github.com/Microsoft/monaco-editor/issues/913#issuecomment-396537569
   executeDecorations = editor.deltaDecorations(
     executeDecorations as Array<string>,
-    freshedDecorations,
+    freshDecorations,
   ) as unknown as Decoration[];
 };
 
@@ -384,4 +384,11 @@ listen('saveFile', async event => {
 :deep(.mtk22) {
   color: #c80a68;
 }
+
+:deep(.mtk11) {
+  color: #cd3131;
+  text-decoration: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: #cd3131;
+}
 </style>