#111 - Insert image into the contents of the page

package.json

@@ -63,6 +63,7 @@
     "onCommand:frontMatter.preview",
     "onCommand:frontMatter.dashboard",
     "onCommand:frontMatter.promoteSettings",
+    "onCommand:frontMatter.insertImage",
     "onView:frontMatter.explorer"
   ],
   "main": "./dist/extension",
@@ -477,6 +478,12 @@
         "title": "Insert categories",
         "category": "Front matter"
       },
+      {
+        "command": "frontMatter.insertImage",
+        "title": "Insert image into article",
+        "category": "Front matter",
+        "icon": "$(device-camera)"
+      },
       {
         "command": "frontMatter.insertTags",
         "title": "Insert tags",
@@ -514,6 +521,13 @@
       }
     ],
     "menus": {
+      "editor/title": [
+        {
+          "when": "resourceLangId == markdown",
+          "command": "frontMatter.insertImage",
+          "group": "navigation"
+        }
+      ],
       "explorer/context": [
         {
           "command": "frontMatter.createFromTemplate",
@@ -634,4 +648,4 @@
   "dependencies": {
     "@docsearch/js": "^3.0.0-alpha.40"
   }
-}
+}

src/commands/Article.ts

@@ -7,10 +7,13 @@ import { ArticleHelper, Settings, SlugHelper } from '../helpers';
 import matter = require('gray-matter');
 import { Notifications } from '../helpers/Notifications';
 import { extname, basename } from 'path';
-import { DefaultFields } from '../constants';
+import { COMMAND_NAME, DefaultFields } from '../constants';
+import { DashboardData } from '../models/DashboardData';
+import { ExplorerView } from '../explorerView/ExplorerView';
 
 
 export class Article {
+	
   private static prevContent = "";
 
   /**
@@ -247,6 +250,30 @@ export class Article {
     }
   }
 
+  /**
+   * Insert an image from the media dashboard into the article
+   */
+  public static async insertImage() {
+		let editor = vscode.window.activeTextEditor;
+    if (!editor) {
+      return;
+    }
+
+    const position = editor.selection.active;
+
+    await vscode.commands.executeCommand(COMMAND_NAME.dashboard, {
+      type: "media",
+      data: {
+        filePath: editor.document.uri.fsPath,
+        fieldName: basename(editor.document.uri.fsPath),
+        position
+      }
+    } as DashboardData);
+
+    // Let the editor panel know you are selecting an image
+    ExplorerView.getInstance().getMediaSelection();
+	}
+
   /**
    * Get the current article
    */

src/commands/Dashboard.ts

@@ -2,7 +2,7 @@ import { SETTINGS_CONTENT_STATIC_FOLDERS, SETTING_DATE_FIELD, SETTING_SEO_DESCRI
 import { ArticleHelper } from './../helpers/ArticleHelper';
 import { basename, dirname, extname, join } from "path";
 import { existsSync, statSync, unlinkSync, writeFileSync } from "fs";
-import { commands, Uri, ViewColumn, Webview, WebviewPanel, window, workspace, env } from "vscode";
+import { commands, Uri, ViewColumn, Webview, WebviewPanel, window, workspace, env, Position } from "vscode";
 import { Settings as SettingsHelper } from '../helpers';
 import { TaxonomyType } from '../models';
 import { Folders } from './Folders';
@@ -170,18 +170,42 @@ export class Dashboard {
           Dashboard.deleteFile(msg?.data);
           break;
         case DashboardMessage.insertPreviewImage:
-          if (msg.data?.file && msg.data?.image) {
-            await commands.executeCommand(`workbench.view.extension.frontmatter-explorer`);
-            await EditorHelper.showFile(msg.data.file);
-            Dashboard._viewData = undefined;
-            const panel = ExplorerView.getInstance(extensionUri);
-            panel.getMediaSelection();
-            panel.updateMetadata({field: msg.data.fieldName, value: msg.data.image});
-          }
+          Dashboard.insertImage(msg?.data);
           break;
       }
     });
   }
+  
+  /**
+   * Insert an image into the front matter or contents
+   * @param data 
+   */
+  private static async insertImage(data: any) {
+    if (data?.file && data?.image) {
+      if (!data?.position) {
+        await commands.executeCommand(`workbench.view.extension.frontmatter-explorer`);
+      }
+
+      await EditorHelper.showFile(data.file);
+      Dashboard._viewData = undefined;
+      
+      const extensionUri = Extension.getInstance().extensionPath;
+      const panel = ExplorerView.getInstance(extensionUri);
+
+      if (data?.position) {
+        const editor = window.activeTextEditor;
+        const line = data.position.line;
+        const character = data.position.character;
+        if (line) {
+          await editor?.edit(builder => builder.insert(new Position(line, character), data.image));
+        }
+        panel.getMediaSelection();
+      } else {
+        panel.getMediaSelection();
+        panel.updateMetadata({field: data.fieldName, value: data.image});
+      }
+    }
+  }
 
   /**
    * Retrieve the settings for the dashboard

src/constants/Extension.ts

@@ -30,4 +30,5 @@ export const COMMAND_NAME = {
   preview: getCommandName("preview"),
   dashboard: getCommandName("dashboard"),
   promote: getCommandName("promoteSettings"),
+  insertImage: getCommandName("insertImage"),
 };

src/dashboardWebView/components/Media/Item.tsx

@@ -58,7 +58,8 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
     Messenger.send(DashboardMessage.insertPreviewImage, {
       image: parseWinPath(relPath) || "",
       file: viewData?.data?.filePath,
-      fieldName: viewData?.data?.fieldName
+      fieldName: viewData?.data?.fieldName,
+      position: viewData?.data?.position || null
     });
   };
 

src/extension.ts

@@ -32,7 +32,6 @@ export async function activate(context: vscode.ExtensionContext) {
 	
 	SettingsHelper.init();
 	extension.migrateSettings();
-	
 
 	collection = vscode.languages.createDiagnosticCollection('frontMatter');
 
@@ -165,6 +164,9 @@ export async function activate(context: vscode.ExtensionContext) {
 	Preview.init();
 	subscriptions.push(vscode.commands.registerCommand(COMMAND_NAME.preview, () => Preview.open(extensionPath) ));
 
+	// Inserting an image in Markdown
+	subscriptions.push(vscode.commands.registerCommand(COMMAND_NAME.insertImage, Article.insertImage));
+
 	// Subscribe all commands
 	subscriptions.push(
 		insertTags,