update: 增加对正则 Flag 的匹配

src/diagram/index.ts

@@ -38,7 +38,7 @@ export default function useDiagram(context: ExtensionContext) {
     const position = editor?.selection.active;
     const line = editor?.document.lineAt(position?.line!);
     const text = editor?.document.getText(new Range(line?.range.start!, line?.range.end!));
-    const regex = /(?<!\\)\/(.+?)(?<!\\)\//g;
+    const regex = /(?<!\\)\/(.+?)(?<!\\)\/([gmiyus]{0,6})/g;
     const regexpList: string[] = []; // text?.match(/(?<!\\)\/(.+?)(?<!\\)\//g);
     let matches;
     while ((matches = regex.exec(text)) !== null) {
@@ -46,8 +46,10 @@ export default function useDiagram(context: ExtensionContext) {
       if (matches.index === regex.lastIndex) {
         regex.lastIndex++;
       }
+      console.log(matches);
       regexpList.push(matches[1]);
     }
+    if (regexpList.length) {
       const panel = window.createWebviewPanel(
         'Diagram',
         'Diagram',
@@ -61,5 +63,8 @@ export default function useDiagram(context: ExtensionContext) {
       panel.webview.postMessage({
         regexpGroups: regexpList,
       });
+    } else {
+      window.showWarningMessage('未找到正则表达式');
+    }
   });
 }

src/diagram/webview/components/Diagram.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { parse, visualize, Raphael } from 'regulex-cjs';
 import { useEffect } from 'react';
 
-interface IDiagramProps {
+interface IDiagramProps extends React.HTMLAttributes<HTMLDivElement> {
   regexp: string | RegExp;
 }
 

src/diagram/webview/views/RegexpDiagram.tsx

@@ -8,7 +8,7 @@ export const RegexpDiagramView: React.FC = () => {
   return (
     <>
       <div>
-        {regexpGroups.map((regexp: string) => <RegExpDiagram regexp={new RegExp(regexp)} />)}
+        {regexpGroups.map((regexp: string) => <RegExpDiagram className="regexp-diagram" regexp={new RegExp(regexp)} />)}
       </div>
     </>
   );