From f406dd8777d5daba29ee4fc6f8d8bb5c1427bf73 Mon Sep 17 00:00:00 2001
From: Seth Miers <seth.miers@infleqtion.com>
Date: Wed, 26 Nov 2025 22:14:40 -0700
Subject: [PATCH] Added support for changing the codeblock Language name, this
 is helpful when integrating with sphinx

---
 .prettierrc       |   7 ++
 manifest.json     |   4 +-
 package.json      |   1 +
 src/main.ts       | 124 ++++++++++++++++-----------
 src/processors.ts | 213 +++++++++++++++++++++++++---------------------
 src/setting.ts    | 119 ++++++++++++++++----------
 src/suggesters.ts | 142 ++++++++++++++-----------------
 7 files changed, 336 insertions(+), 274 deletions(-)
 create mode 100644 .prettierrc

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..76f73ba
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "tabWidth": 4
+}
diff --git a/manifest.json b/manifest.json
index 402ab79..6337d0d 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,10 +1,10 @@
 {
   "id": "obsidian-graphviz",
   "name": "Obsidian Graphviz",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "minAppVersion": "0.11.5",
   "description": "Render Graphviz Diagrams",
-  "author": "Feng Peng",
+  "author": "Feng Peng, Seth Miers",
   "authorUrl": "https://QAMichaelPeng.github.io",
   "isDesktopOnly": true
 }
diff --git a/package.json b/package.json
index c646903..4a7b010 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "eslint": "7.20.0",
     "eslint-plugin-json": "2.1.2",
     "obsidian": "^0.15.9",
+    "prettier": "^3.6.2",
     "tmp": "0.2.1",
     "tslib": "2.3.1",
     "typescript": "4.4.4"
diff --git a/src/main.ts b/src/main.ts
index be3ec8e..62ef4dd 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,56 +1,82 @@
-import { Plugin } from 'obsidian';
+import { Plugin, MarkdownPostProcessorContext } from 'obsidian';
 import { DEFAULT_SETTINGS, GraphvizSettings, GraphvizSettingsTab } from './setting';
 import { Processors } from './processors';
 import { Suggesters } from './suggesters';
 
-// Remember to rename these classes and interfaces!
+export default class GraphvizPlugin extends Plugin {
+    settings: GraphvizSettings;
 
+    registeredProcessors: (() => void)[] = [];
 
-export default class GraphvizPlugin extends Plugin {
-  settings: GraphvizSettings;
-
-  async onload() {
-    console.debug('Load graphviz plugin');
-    await this.loadSettings();
-    this.addSettingTab(new GraphvizSettingsTab(this));
-    const processors = new Processors(this);
-    const suggesters = new Suggesters(this);
-    const d3Sources = ['https://d3js.org/d3.v5.min.js',
-      'https://unpkg.com/@hpcc-js/wasm@0.3.11/dist/index.min.js',
-      'https://unpkg.com/d3-graphviz@3.0.5/build/d3-graphviz.js'];
-
-
-    this.app.workspace.onLayoutReady(() => {
-      switch (this.settings.renderer) {
-        case 'd3_graphviz':
-          for (const src of d3Sources) {
-            const script = document.createElement('script');
-            script.src = src;
-            (document.head || document.documentElement).appendChild(script);
-          }
-          this.registerMarkdownCodeBlockProcessor('dot', processors.d3graphvizProcessor.bind(processors));
-          break;
-        default:
-          this.registerMarkdownCodeBlockProcessor('dot', processors.imageProcessor.bind(processors));
-      }
-
-      this.registerEditorSuggest(new Suggesters(this.app, this));
-    });
-  }
-
-
-
-  onunload() {
-    console.debug('Unload graphviz plugin');
-  }
-
-  async loadSettings(): Promise<void> {
-    this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
-    return Promise.resolve();
-  }
-
-
-  async saveSettings() {
-    await this.saveData(this.settings);
-  }
+    async onload() {
+        console.debug('Load graphviz plugin');
+        await this.loadSettings();
+        this.addSettingTab(new GraphvizSettingsTab(this));
+
+        const d3Sources = [
+            'https://d3js.org/d3.v5.min.js',
+            'https://unpkg.com/@hpcc-js/wasm@0.3.11/dist/index.min.js',
+            'https://unpkg.com/d3-graphviz@3.0.5/build/d3-graphviz.js',
+        ];
+
+        this.app.workspace.onLayoutReady(() => {
+            for (const src of d3Sources) {
+                const script = document.createElement('script');
+                script.src = src;
+                (document.head || document.documentElement).appendChild(script);
+            }
+
+            this.reloadProcessors();
+
+            this.registerEditorSuggest(new Suggesters(this.app, this));
+        });
+    }
+
+    reloadProcessors() {
+        // unregister old processors
+        this.registeredProcessors.forEach((unreg) => unreg());
+        this.registeredProcessors = [];
+
+        const processors = new Processors(this);
+        const targetLang = this.settings.codeblockLanguage;
+
+        // Wrap the processor to check both lang and label
+        const wrappedProcessor = async (source: string, el: HTMLElement, ctx: MarkdownPostProcessorContext) => {
+            const section = ctx.getSectionInfo(el);
+            if (!section) return;
+
+            const firstLine = section.text.split('\n')[section.lineStart];
+            const match = firstLine.match(/^```(?<lang>[^\s^{]+)?\s*(?:{(?<label>[^}]+)})?/);
+
+            if (!match) return;
+
+            const lang = match.groups?.lang ?? '';
+            const label = match.groups?.label ?? '';
+
+            if (lang === targetLang || label === targetLang) {
+                if (this.settings.renderer === 'd3_graphviz') {
+                    await processors.d3graphvizProcessor(source, el, ctx);
+                } else {
+                    await processors.imageProcessor(source, el, ctx);
+                }
+            }
+        };
+
+        // Register a "catch-all" codeblock processor
+        const unreg = this.registerMarkdownCodeBlockProcessor(targetLang, wrappedProcessor);
+        this.registeredProcessors.push(unreg);
+    }
+
+    onunload() {
+        console.debug('Unload graphviz plugin');
+    }
+
+    async loadSettings(): Promise<void> {
+        this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
+        return Promise.resolve();
+    }
+
+    async saveSettings() {
+        await this.saveData(this.settings);
+    }
 }
diff --git a/src/processors.ts b/src/processors.ts
index 7ecd224..dc550ed 100644
--- a/src/processors.ts
+++ b/src/processors.ts
@@ -7,116 +7,133 @@ import GraphvizPlugin from './main';
 // import {graphviz} from 'd3-graphviz'; => does not work, ideas how to embed d3 into the plugin?
 
 export class Processors {
-  plugin: GraphvizPlugin;
+    plugin: GraphvizPlugin;
 
-  constructor(plugin: GraphvizPlugin) {
-    this.plugin = plugin;
-  }
-  
-  imageMimeType = new Map<string, string>([
+    constructor(plugin: GraphvizPlugin) {
+        this.plugin = plugin;
+    }
+
+    imageMimeType = new Map<string, string>([
         ['png', 'image/png'],
-        ['svg', 'image/svg+xml']
+        ['svg', 'image/svg+xml'],
     ]);
 
-  private async writeDotFile(sourceFile: string): Promise<Uint8Array> {
-    return new Promise<Uint8Array>((resolve, reject) => {
-      const cmdPath = this.plugin.settings.dotPath;
-      const imageFormat = this.plugin.settings.imageFormat;
-      const parameters = [ `-T${imageFormat}`, `-Gbgcolor=transparent`, `-Gstylesheet=obs-gviz.css`, sourceFile ];
+    private async writeDotFile(sourceFile: string): Promise<Uint8Array> {
+        return new Promise<Uint8Array>((resolve, reject) => {
+            const cmdPath = this.plugin.settings.dotPath;
+            const imageFormat = this.plugin.settings.imageFormat;
+            const parameters = [
+                `-T${imageFormat}`,
+                '-Gbgcolor=transparent',
+                '-Gstylesheet=obs-gviz.css',
+                sourceFile,
+            ];
 
-      console.debug(`Starting dot process ${cmdPath}, ${parameters}`);
-      const dotProcess = spawn(cmdPath, parameters);
-      const outData: Array<Uint8Array> = [];
-      let errData = '';
+            console.debug(`Starting dot process ${cmdPath}, ${parameters}`);
+            const dotProcess = spawn(cmdPath, parameters);
+            const outData: Array<Uint8Array> = [];
+            let errData = '';
 
-      dotProcess.stdout.on('data', function (data) {
-        outData.push(data);
-      });
-      dotProcess.stderr.on('data', function (data) {
-        errData += data;
-      });
-      dotProcess.stdin.end();
-      dotProcess.on('exit', function (code) {
-        if (code !== 0) {
-          reject(`"${cmdPath} ${parameters}" failed, error code: ${code}, stderr: ${errData}`);
-        } else {
-          resolve(Buffer.concat(outData));
-        }
-      });
-      dotProcess.on('error', function (err: Error) {
-        reject(`"${cmdPath} ${parameters}" failed, ${err}`);
-      });
-    });
-  }
+            dotProcess.stdout.on('data', function (data) {
+                outData.push(data);
+            });
+            dotProcess.stderr.on('data', function (data) {
+                errData += data;
+            });
+            dotProcess.stdin.end();
+            dotProcess.on('exit', function (code) {
+                if (code !== 0) {
+                    reject(
+                        `"${cmdPath} ${parameters}" failed, error code: ${code}, stderr: ${errData}`
+                    );
+                } else {
+                    resolve(Buffer.concat(outData));
+                }
+            });
+            dotProcess.on('error', function (err: Error) {
+                reject(`"${cmdPath} ${parameters}" failed, ${err}`);
+            });
+        });
+    }
 
-  private async convertToImage(source: string): Promise<Uint8Array> {
-    const self = this;
-    return new Promise<Uint8Array>((resolve, reject) => {
-      tmp.file(function (err, tmpPath, fd, _/* cleanupCallback */) {
-        if (err) reject(err);
+    private async convertToImage(source: string): Promise<Uint8Array> {
+        const self = this;
+        return new Promise<Uint8Array>((resolve, reject) => {
+            tmp.file(function (err, tmpPath, fd, _ /* cleanupCallback */) {
+                if (err) reject(err);
 
-        fs.write(fd, source, function (err) {
-          if (err) {
-            reject(`write to ${tmpPath} error ${err}`);
-            return;
-          }
-          fs.close(fd,
-            function (err) {
-              if (err) {
-                reject(`close ${tmpPath} error ${err}`);
-                return;
-              }
-              return self.writeDotFile(tmpPath).then(data => resolve(data)).catch(message => reject(message));
-            }
-          );
+                fs.write(fd, source, function (err) {
+                    if (err) {
+                        reject(`write to ${tmpPath} error ${err}`);
+                        return;
+                    }
+                    fs.close(fd, function (err) {
+                        if (err) {
+                            reject(`close ${tmpPath} error ${err}`);
+                            return;
+                        }
+                        return self
+                            .writeDotFile(tmpPath)
+                            .then((data) => resolve(data))
+                            .catch((message) => reject(message));
+                    });
+                });
+            });
         });
-      });
-    });
-  }
+    }
 
-  public async imageProcessor(source: string, el: HTMLElement, _: MarkdownPostProcessorContext): Promise<void> {
-    const stringBeforeBrace = source.split("{", 1)[0]?.trim() || "";
-    const wordsBeforeBrace = stringBeforeBrace.split();
+    public async imageProcessor(
+        source: string,
+        el: HTMLElement,
+        _: MarkdownPostProcessorContext
+    ): Promise<void> {
+        const stringBeforeBrace = source.split('{', 1)[0]?.trim() || '';
+        const wordsBeforeBrace = stringBeforeBrace.split();
 
-    try {
-      console.debug('Call image processor');
-      //make sure url is defined. once the setting gets reset to default, an empty string will be returned by settings
-      const imageData = await this.convertToImage(source);
-      const blob = new Blob([ imageData ], {'type': this.imageMimeType.get(this.plugin.settings.imageFormat)});
-      const url = window.URL || window.webkitURL;
-      const blobUrl = url.createObjectURL(blob);
-      const img = document.createElement('img');
-      img.setAttribute("class", "graphviz " + wordsBeforeBrace.join(" "));
-      img.setAttribute("src", blobUrl);
-      el.appendChild(img);
-    } catch (errMessage) {
-      console.error('convert to image error', errMessage);
-      const pre = document.createElement('pre');
-      const code = document.createElement('code');
-      pre.appendChild(code);
-      code.setText(errMessage);
-      el.appendChild(pre);
+        try {
+            console.debug('Call image processor');
+            //make sure url is defined. once the setting gets reset to default, an empty string will be returned by settings
+            const imageData = await this.convertToImage(source);
+            const blob = new Blob([imageData], {
+                type: this.imageMimeType.get(this.plugin.settings.imageFormat),
+            });
+            const url = window.URL || window.webkitURL;
+            const blobUrl = url.createObjectURL(blob);
+            const img = document.createElement('img');
+            img.setAttribute('class', 'graphviz ' + wordsBeforeBrace.join(' '));
+            img.setAttribute('src', blobUrl);
+            el.appendChild(img);
+        } catch (errMessage) {
+            console.error('convert to image error', errMessage);
+            const pre = document.createElement('pre');
+            const code = document.createElement('code');
+            pre.appendChild(code);
+            code.setText(errMessage);
+            el.appendChild(pre);
+        }
     }
-  }
-  
-  public async d3graphvizProcessor(source: string, el: HTMLElement, _: MarkdownPostProcessorContext): Promise<void> {
-    console.debug('Call d3graphvizProcessor');
 
-    const stringBeforeBrace = source.split("{", 1)[0]?.trim() || "";
-    const wordsBeforeBrace = stringBeforeBrace.split();
+    public async d3graphvizProcessor(
+        source: string,
+        el: HTMLElement,
+        _: MarkdownPostProcessorContext
+    ): Promise<void> {
+        console.debug('Call d3graphvizProcessor');
 
-    const div = document.createElement('div');
-    const graphId = 'd3graph_' + createHash('md5').update(source).digest('hex').substring(0, 6);
-    div.setAttr('id', graphId);
-    div.setAttr('style', 'text-align: center');
-    div.setAttr('class', 'graphviz ' + wordsBeforeBrace.join(" "));
-    el.appendChild(div);
-    const script = document.createElement('script');
-    // graphviz(graphId).renderDot(source); => does not work, ideas how to use it?
-    // Besides, sometimes d3 is undefined, so there must be a proper way to integrate d3.
-    const escapedSource = source.replaceAll('\\', '\\\\').replaceAll('`','\\`');
-    script.text =
-      `if( typeof d3 != 'undefined') { 
+        const stringBeforeBrace = source.split('{', 1)[0]?.trim() || '';
+        const wordsBeforeBrace = stringBeforeBrace.split();
+
+        const div = document.createElement('div');
+        const graphId = 'd3graph_' + createHash('md5').update(source).digest('hex').substring(0, 6);
+        div.setAttr('id', graphId);
+        div.setAttr('style', 'text-align: center');
+        div.setAttr('class', 'graphviz ' + wordsBeforeBrace.join(' '));
+        el.appendChild(div);
+        const script = document.createElement('script');
+        // graphviz(graphId).renderDot(source); => does not work, ideas how to use it?
+        // Besides, sometimes d3 is undefined, so there must be a proper way to integrate d3.
+        const escapedSource = source.replaceAll('\\', '\\\\').replaceAll('`', '\\`');
+        script.text = `if( typeof d3 != 'undefined') { 
         d3.select("#${graphId}").graphviz()
         .onerror(d3error)
        .renderDot(\`${escapedSource}\`);
@@ -125,6 +142,6 @@ export class Processors {
         d3.select("#${graphId}").html(\`<div class="d3graphvizError"> d3.graphviz(): \`+err.toString()+\`</div>\`);
         console.error('Caught error on ${graphId}: ', err);
     }`;
-    el.appendChild(script);
-  }
+        el.appendChild(script);
+    }
 }
diff --git a/src/setting.ts b/src/setting.ts
index 6245b3b..c209de0 100644
--- a/src/setting.ts
+++ b/src/setting.ts
@@ -2,63 +2,88 @@ import { PluginSettingTab, Setting } from 'obsidian';
 import GraphvizPlugin from './main';
 
 export interface GraphvizSettings {
-  dotPath: string;
-  renderer: string;
-  imageFormat: string;
+    dotPath: string;
+    codeblockLanguage: string;
+    renderer: string;
+    imageFormat: string;
 }
 
 export const DEFAULT_SETTINGS: GraphvizSettings = {
-  dotPath: 'dot',
-  renderer: 'dot',
-  imageFormat: 'png'
+    dotPath: 'dot',
+    codeblockLanguage: 'dot',
+    renderer: 'dot',
+    imageFormat: 'png',
 };
 
 export class GraphvizSettingsTab extends PluginSettingTab {
-  plugin: GraphvizPlugin;
+    plugin: GraphvizPlugin;
 
-  constructor(plugin: GraphvizPlugin) {
-    super(plugin.app, plugin);
-    this.plugin = plugin;
-  }
+    constructor(plugin: GraphvizPlugin) {
+        super(plugin.app, plugin);
+        this.plugin = plugin;
+    }
 
-  display(): void {
-    const {containerEl} = this;
+    display(): void {
+        const { containerEl } = this;
 
-    containerEl.empty();
+        containerEl.empty();
 
-    new Setting(containerEl)
-    .setName('Graphviz renderer')
-    .setDesc('Please choose the Graphviz renderer, after that, you will need to restart obsidian.')
-    .addDropdown(dropdown => dropdown
-      .addOption('dot', 'dot')
-      .addOption('d3_graphviz', 'D3 Graphviz (experimental)')
-      .setValue(this.plugin.settings.renderer)
-      .onChange(async (value) => {
-        this.plugin.settings.renderer = value;
-        await this.plugin.saveSettings();
-      }));
+        new Setting(containerEl)
+            .setName('Graphviz renderer')
+            .setDesc(
+                'Please choose the Graphviz renderer, after that, you will need to restart obsidian.'
+            )
+            .addDropdown((dropdown) =>
+                dropdown
+                    .addOption('dot', 'dot')
+                    .addOption('d3_graphviz', 'D3 Graphviz (experimental)')
+                    .setValue(this.plugin.settings.renderer)
+                    .onChange(async (value) => {
+                        this.plugin.settings.renderer = value;
+                        await this.plugin.saveSettings();
+                    })
+            );
 
-    new Setting(containerEl).setName('Dot Path')
-      .setDesc('Dot executable path')
-      .addText(text => text.setPlaceholder(DEFAULT_SETTINGS.dotPath)
-        .setValue(this.plugin.settings.dotPath)
-        .onChange(async (value) => {
-            this.plugin.settings.dotPath = value;
-            await this.plugin.saveSettings();
-          }
-        )
-      );
+        new Setting(containerEl)
+            .setName('Dot Path')
+            .setDesc('Dot executable path')
+            .addText((text) =>
+                text
+                    .setPlaceholder(DEFAULT_SETTINGS.dotPath)
+                    .setValue(this.plugin.settings.dotPath)
+                    .onChange(async (value) => {
+                        this.plugin.settings.dotPath = value;
+                        await this.plugin.saveSettings();
+                    })
+            );
 
-	new Setting(containerEl)
-    .setName('Image format')
-    .setDesc('Graphviz output format.')
-    .addDropdown(dropdown => dropdown
-      .addOption('png', 'png')
-      .addOption('svg', 'svg')
-      .setValue(this.plugin.settings.imageFormat)
-      .onChange(async (value) => {
-        this.plugin.settings.imageFormat = value;
-        await this.plugin.saveSettings();
-      }));
-  }
+        new Setting(containerEl)
+            .setName('Codeblock Language')
+            .setDesc('The text used after 3 backticks')
+            .addText((text) =>
+                text
+                    .setPlaceholder(DEFAULT_SETTINGS.codeblockLanguage)
+                    .setValue(this.plugin.settings.codeblockLanguage)
+                    .onChange(async (value) => {
+                        this.plugin.settings.codeblockLanguage = value;
+                        await this.plugin.saveSettings();
+                        // re-register codeblock processors immediately
+                        this.plugin.reloadProcessors();
+                    })
+            );
+
+        new Setting(containerEl)
+            .setName('Image format')
+            .setDesc('Graphviz output format.')
+            .addDropdown((dropdown) =>
+                dropdown
+                    .addOption('png', 'png')
+                    .addOption('svg', 'svg')
+                    .setValue(this.plugin.settings.imageFormat)
+                    .onChange(async (value) => {
+                        this.plugin.settings.imageFormat = value;
+                        await this.plugin.saveSettings();
+                    })
+            );
+    }
 }
diff --git a/src/suggesters.ts b/src/suggesters.ts
index 01d0035..55abb26 100644
--- a/src/suggesters.ts
+++ b/src/suggesters.ts
@@ -1,96 +1,82 @@
 import {
-  App,
-  Editor,
-  EditorPosition,
-  EditorSuggest,
-  EditorSuggestContext,
-  EditorSuggestTriggerInfo,
-  TFile,
-} from "obsidian";
-import type GraphvizPlugin from "src/main";
+    App,
+    Editor,
+    EditorPosition,
+    EditorSuggest,
+    EditorSuggestContext,
+    EditorSuggestTriggerInfo,
+    TFile,
+} from 'obsidian';
+import type GraphvizPlugin from 'src/main';
 
 interface IGraphCompletion {
-  label: string;
+    label: string;
 }
 
 export class Suggesters extends EditorSuggest<IGraphCompletion> {
-  app: App;
-  private plugin: GraphvizPlugin;
-
-  constructor(app: App, plugin: GraphvizPlugin) {
-    super(app);
-    this.app = app;
-    this.plugin = plugin;
-
-    // @ts-ignore
-    this.scope.register(["Shift"], "Enter", (evt: KeyboardEvent) => {
-      // @ts-ignore
-      this.suggestions.useSelectedItem(evt);
-      return false;
-    });
-  }
-
-  getSuggestions(context: EditorSuggestContext): IGraphCompletion[] {
-    const suggestions = this.getGraphSuggestions(context);
-    if (suggestions.length) {
-      return suggestions;
+    app: App;
+    private plugin: GraphvizPlugin;
+
+    constructor(app: App, plugin: GraphvizPlugin) {
+        super(app);
+        this.app = app;
+        this.plugin = plugin;
+
+        this.scope.register(['Shift'], 'Enter', (evt: KeyboardEvent) => {
+            this.suggestions.useSelectedItem(evt);
+            return false;
+        });
     }
-    return [];
-  }
 
-  getGraphSuggestions(context: EditorSuggestContext): IGraphCompletion[] {
-    const line = context.editor.getLine(context.end.line);
-    return "dot/neato/fdp/sfdp/circo/osage/patchwork"
-        .split("/")
-        .map((app) => ({ label: `${app}` }));
-  }
-
-  renderSuggestion(suggestion: IGraphCompletion, el: HTMLElement): void {
-    el.setText("insert " + suggestion.label + " example");
-  }
+    getSuggestions(context: EditorSuggestContext): IGraphCompletion[] {
+        const suggestions = this.getGraphSuggestions(context);
+        return suggestions.length ? suggestions : [];
+    }
 
-  selectSuggestion(suggestion: IGraphCompletion, event: KeyboardEvent | MouseEvent): void {
-    const { editor } = this.context;
+    getGraphSuggestions(context: EditorSuggestContext): IGraphCompletion[] {
+        context.editor.getLine(context.end.line); // side effect if needed
+        return 'dot/neato/fdp/sfdp/circo/osage/patchwork'.split('/').map((app) => ({ label: app }));
+    }
 
-    const hints = new Map();
-    hints.set("dot", [ "/*", "a -> b -> a;", "a [color=blue];", "*/" ]);
-    hints.set("neato", [ `mode="major";  // KK/sgd/hier/ipsep`, "/* a -- b -- c; */" ]);
-    hints.set("patchwork", [ `/* "foo" [area=100 fillcolor=gold] */` ]);
+    renderSuggestion(suggestion: IGraphCompletion, el: HTMLElement): void {
+        el.setText('insert ' + suggestion.label + ' example');
+    }
 
-    const grouping = (suggestion.label.startsWith("dot")) ? "digraph" : "graph";
-    const result = `
-${grouping} ${suggestion.label[0]} {
-    layout=${suggestion.label};
-` + ((hints.get(suggestion.label) || []).map((l) => `    ${l}`).join("\n"));
+    selectSuggestion(suggestion: IGraphCompletion, _event: KeyboardEvent | MouseEvent): void {
+        const { editor } = this.context;
 
-    editor.replaceRange(result + "\n\n}", this.context.end);
-  }
+        const hints = new Map<string, string[]>();
+        hints.set('dot', ['/*', 'a -> b -> a;', 'a [color=blue];', '*/']);
+        hints.set('neato', ['mode="major";  // KK/sgd/hier/ipsep', '/* a -- b -- c; */']);
+        hints.set('patchwork', ['/* "foo" [area=100 fillcolor=gold] */']);
 
-  onTrigger(
-    cursor: EditorPosition,
-    editor: Editor,
-    file: TFile
-  ): EditorSuggestTriggerInfo {
-    const triggerPhrase = "```dot";
-    const startPos = this.context?.start || {
-      line: cursor.line,
-      ch: cursor.ch - triggerPhrase.length,
-    };
+        const grouping = suggestion.label.startsWith('dot') ? 'digraph' : 'graph';
+        const result =
+            `${grouping} ${suggestion.label[0]} {\n    layout=${suggestion.label};\n` +
+            (hints.get(suggestion.label) || []).map((l) => '    ' + l).join('\n');
 
-    if (!editor.getRange(startPos, cursor).startsWith(triggerPhrase)) {
-      return null;
+        editor.replaceRange(result + '\n\n}', this.context.end);
     }
 
-    console.dir(editor.getLine(cursor.line + 1));
-
-    if (editor.getLine(cursor.line + 1) != "```") {
-      return null;
+    onTrigger(cursor: EditorPosition, editor: Editor, _file: TFile): EditorSuggestTriggerInfo {
+        const triggerPhrase = '```dot';
+        const startPos = this.context?.start || {
+            line: cursor.line,
+            ch: cursor.ch - triggerPhrase.length,
+        };
+
+        if (!editor.getRange(startPos, cursor).startsWith(triggerPhrase)) {
+            return null;
+        }
+
+        if (editor.getLine(cursor.line + 1) !== '```') {
+            return null;
+        }
+
+        return {
+            start: startPos,
+            end: cursor,
+            query: editor.getRange(startPos, cursor).substring(triggerPhrase.length),
+        };
     }
-
-    return {
-      start: startPos,
-      end: cursor,
-      query: editor.getRange(startPos, cursor).substring(triggerPhrase.length),
-    };
-  }
 }