#111 #112 - media insert + snippet support

CHANGELOG.md

@@ -11,6 +11,8 @@
 - [#107](https://github.com/estruyf/vscode-front-matter/issues/107): Number field support added in content type fields
 - [#108](https://github.com/estruyf/vscode-front-matter/issues/108): Choice field support added in content type fields
 - [#109](https://github.com/estruyf/vscode-front-matter/issues/109): JSON Config script added to automate the JSON schema
+- [#111](https://github.com/estruyf/vscode-front-matter/issues/111): Insert media into the markdown contents
+- [#112](https://github.com/estruyf/vscode-front-matter/issues/112): Add snippet support for media insertion
 
 ## [3.1.0] - 2021-09-10
 

package.json

@@ -161,6 +161,16 @@
           },
           "scope": "Custom scripts"
         },
+        "frontMatter.dashboard.mediaSnippet": {
+          "type": "array",
+          "default": [],
+          "markdownDescription": "Specify the prefix you want to add for your new article filenames. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.dashboard.mediaSnippet)",
+          "items": {
+            "type": "string",
+            "description": "The parts of your snippet. Use `{mediaUrl}` as placeholder where the path of the image needs to be inserted."
+          },
+          "scope": "dashboard"
+        },
         "frontMatter.dashboard.openOnStart": {
           "type": [
             "boolean",

src/commands/Dashboard.ts

@@ -1,4 +1,4 @@
-import { SETTINGS_CONTENT_STATIC_FOLDERS, SETTING_DATE_FIELD, SETTING_SEO_DESCRIPTION_FIELD, SETTINGS_DASHBOARD_OPENONSTART } from './../constants/settings';
+import { SETTINGS_CONTENT_STATIC_FOLDERS, SETTING_DATE_FIELD, SETTING_SEO_DESCRIPTION_FIELD, SETTINGS_DASHBOARD_OPENONSTART, SETTINGS_DASHBOARD_MEDIA_SNIPPET } from './../constants/settings';
 import { ArticleHelper } from './../helpers/ArticleHelper';
 import { basename, dirname, extname, join } from "path";
 import { existsSync, statSync, unlinkSync, writeFileSync } from "fs";
@@ -197,7 +197,7 @@ export class Dashboard {
         const line = data.position.line;
         const character = data.position.character;
         if (line) {
-          await editor?.edit(builder => builder.insert(new Position(line, character), data.image));
+          await editor?.edit(builder => builder.insert(new Position(line, character), data.snippet || `![](${data.image})`));
         }
         panel.getMediaSelection();
       } else {
@@ -226,7 +226,8 @@ export class Dashboard {
         categories: SettingsHelper.getTaxonomy(TaxonomyType.Category),
         openOnStart: SettingsHelper.get(SETTINGS_DASHBOARD_OPENONSTART),
         versionInfo: ext.getVersion(),
-        pageViewType: await ext.getState<ViewType | undefined>(EXTENSION_STATE_PAGES_VIEW)
+        pageViewType: await ext.getState<ViewType | undefined>(EXTENSION_STATE_PAGES_VIEW),
+        mediaSnippet: SettingsHelper.get<string[]>(SETTINGS_DASHBOARD_MEDIA_SNIPPET) || [],
       } as Settings
     });
   }

src/constants/settings.ts

@@ -40,6 +40,7 @@ export const SETTINGS_CONTENT_STATIC_FOLDERS = "content.publicFolder";
 export const SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT = "content.fmHighlight";
 
 export const SETTINGS_DASHBOARD_OPENONSTART = "dashboard.openOnStart";
+export const SETTINGS_DASHBOARD_MEDIA_SNIPPET = "dashboard.mediaSnippet";
 
 /**
  * @deprecated

src/dashboardWebView/components/Media/Item.tsx

@@ -1,5 +1,5 @@
 import { Messenger } from '@estruyf/vscode/dist/client';
-import { CheckCircleIcon, ClipboardCopyIcon, PhotographIcon, TrashIcon } from '@heroicons/react/outline';
+import { CheckCircleIcon, ClipboardCopyIcon, CodeIcon, PhotographIcon, TrashIcon } from '@heroicons/react/outline';
 import { basename, dirname } from 'path';
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
@@ -63,6 +63,17 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
     });
   };
 
+  const insertSnippet = () => {
+    const relPath = getRelPath();
+    Messenger.send(DashboardMessage.insertPreviewImage, {
+      image: parseWinPath(relPath) || "",
+      file: viewData?.data?.filePath,
+      fieldName: viewData?.data?.fieldName,
+      position: viewData?.data?.position || null,
+      snippet: settings?.mediaSnippet.join("\n").replace("{mediaUrl}", parseWinPath(relPath) || "")
+    });
+  };
+
   const deleteMedia = () => {
     setShowAlert(true);
   };
@@ -104,13 +115,26 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
           <div className={`absolute top-4 right-4 flex flex-col space-y-2`}>
             {
               viewData?.data?.filePath ? (
-                <button 
+                <>
+                  <button 
                     title={`Insert into your article`} 
                     className={`hover:text-teal-900 focus:outline-none`} 
                     onClick={insertToArticle}>
-                  <CheckCircleIcon className={`h-5 w-5`} />
-                  <span className={`sr-only`}>Insert into your article</span>
-                </button>
+                    <CheckCircleIcon className={`h-5 w-5`} />
+                    <span className={`sr-only`}>Insert into your article</span>
+                  </button>
+                  {
+                    (viewData?.data?.position && settings?.mediaSnippet && settings?.mediaSnippet.length > 0) && (
+                      <button 
+                        title={`Insert your media snippet`} 
+                        className={`hover:text-teal-900 focus:outline-none`} 
+                        onClick={insertSnippet}>
+                        <CodeIcon className={`h-5 w-5`} />
+                        <span className={`sr-only`}>Insert your media snippet</span>
+                      </button>
+                    )
+                  }
+                </>
               ) : (
                 <>
                   <button title={`Copy media path`} 

src/dashboardWebView/models/Settings.ts

@@ -13,4 +13,5 @@ export interface Settings {
   openOnStart: boolean | null;
   versionInfo: VersionInfo;
   pageViewType: ViewType | undefined;
+  mediaSnippet: string[];
 }