feat: focus text editor on double click

close #59

Author: gera2ld

src/app.ts

@@ -38,6 +38,21 @@ const handlers = {
       ...defaultOptions,
       ...deriveOptions(data.jsonOptions),
     });
+    mm.g
+      .selectAll<SVGGElement, INode>(function () {
+        const nodes = Array.from(this.childNodes) as Element[];
+        return nodes.filter((el) => el.tagName === 'g') as SVGGElement[];
+      })
+      .on(
+        'dblclick.focus',
+        (e, d) => {
+          const lines = d.payload?.lines as string | undefined;
+          const line = +lines?.split(',')[0];
+          if (!isNaN(line))
+            vscode.postMessage({ type: 'setFocus', data: line });
+        },
+        true,
+      );
     activeNodeOptions.placement = data.jsonOptions?.activeNode?.placement;
     if (firstTime) {
       await mm.fit();

src/extension.ts

@@ -6,6 +6,9 @@ import {
   ColorThemeKind,
   CustomTextEditorProvider,
   ExtensionContext,
+  Position,
+  Selection,
+  TabInputText,
   TextDocument,
   Uri,
   ViewColumn,
@@ -123,6 +126,7 @@ class MarkmapEditor implements CustomTextEditorProvider {
     };
     let globalOptions: IMarkmapJSONOptions & {
       autoExpand?: boolean;
+      htmlParser?: unknown;
     };
     let customCSS: string;
     const updateOptions = () => {
@@ -288,6 +292,22 @@ class MarkmapEditor implements CustomTextEditorProvider {
         const filePath = Utils.joinPath(Utils.dirname(document.uri), relPath);
         commands.executeCommand('vscode.open', filePath);
       },
+      async setFocus(line: number) {
+        const viewColumn = vscodeWindow.tabGroups.all
+          .flatMap((group) => group.tabs)
+          .find(
+            (tab) =>
+              tab.input instanceof TabInputText &&
+              tab.group &&
+              tab.input.uri.toString() === document.uri.toString(),
+          )?.group.viewColumn;
+        const editor = await vscodeWindow.showTextDocument(document, {
+          viewColumn,
+        });
+        const pos = new Position(line, 0);
+        editor.selection = new Selection(pos, pos);
+        editor.revealRange(editor.selection);
+      },
       log(data: string) {
         logger.appendLine(data);
       },

src/postbuild.ts

@@ -19,10 +19,10 @@ async function fetchAssets() {
   transformer.urlBuilder.provider = provider;
   const paths = [
     ...(assets.scripts?.map(
-      (item) => (item.type === 'script' && item.data.src) || ''
+      (item) => (item.type === 'script' && item.data.src) || '',
     ) || []),
     ...(assets.styles?.map(
-      (item) => (item.type === 'stylesheet' && item.data.href) || ''
+      (item) => (item.type === 'stylesheet' && item.data.href) || '',
     ) || []),
   ]
     .filter((url) => url.startsWith(ASSETS_PREFIX))
@@ -32,9 +32,9 @@ async function fetchAssets() {
     paths.map((path) =>
       downloadAsset(
         resolve(ASSETS_PREFIX, path),
-        transformer.urlBuilder.getFullUrl(path, fastest)
-      )
-    )
+        transformer.urlBuilder.getFullUrl(path, fastest),
+      ),
+    ),
   );
 }
 
@@ -52,8 +52,8 @@ async function downloadAsset(fullPath: string, url: string) {
   await mkdir(dirname(fullPath), { recursive: true });
   await finished(
     Readable.fromWeb(res.body as ReadableStream).pipe(
-      createWriteStream(fullPath)
-    )
+      createWriteStream(fullPath),
+    ),
   );
 }
 

src/util.ts

@@ -1,5 +1,10 @@
 import { buildCSSItem, buildJSItem } from 'markmap-common';
-import { builtInPlugins, IAssets, ITransformPlugin, Transformer } from 'markmap-lib';
+import {
+  builtInPlugins,
+  IAssets,
+  ITransformPlugin,
+  Transformer,
+} from 'markmap-lib';
 import { baseJsPaths } from 'markmap-render';
 
 const TOOLBAR_VERSION = process.env.TOOLBAR_VERSION;