From cd19cec4f760f0978da6a830b0aebd230817c987 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 21 Apr 2022 09:01:30 +0200
Subject: [PATCH] #308 - Updates to media insertion + title metadata

---
 src/dashboardWebView/DashboardMessage.ts      |  2 +-
 .../components/Media/DetailsSlideOver.tsx     | 86 +++++++++++++------
 .../components/Media/Item.tsx                 | 23 +++--
 src/helpers/MediaHelpers.ts                   |  4 +-
 src/listeners/dashboard/MediaListener.ts      |  2 +-
 src/models/MediaPaths.ts                      |  1 +
 6 files changed, 83 insertions(+), 35 deletions(-)

diff --git a/src/dashboardWebView/DashboardMessage.ts b/src/dashboardWebView/DashboardMessage.ts
index 8fb42fbc..1272bd05 100644
--- a/src/dashboardWebView/DashboardMessage.ts
+++ b/src/dashboardWebView/DashboardMessage.ts
@@ -22,7 +22,7 @@ export enum DashboardMessage {
   uploadMedia = 'uploadMedia',
   deleteMedia = 'deleteMedia',
   revealMedia = 'revealMedia',
-  insertPreviewImage = 'insertPreviewImage',
+  insertMedia = 'insertMedia',
   updateMediaMetadata = 'updateMediaMetadata',
   createMediaFolder = 'createMediaFolder',
   insertFile = 'insertFile',
diff --git a/src/dashboardWebView/components/Media/DetailsSlideOver.tsx b/src/dashboardWebView/components/Media/DetailsSlideOver.tsx
index 19a25d21..a37b2507 100644
--- a/src/dashboardWebView/components/Media/DetailsSlideOver.tsx
+++ b/src/dashboardWebView/components/Media/DetailsSlideOver.tsx
@@ -3,7 +3,7 @@ import { PencilAltIcon, XIcon } from '@heroicons/react/outline';
 import { format } from 'date-fns';
 import { basename } from 'path';
 import * as React from 'react';
-import { Fragment, useMemo } from 'react';
+import { Fragment, useCallback, useMemo } from 'react';
 import { DateHelper } from '../../../helpers/DateHelper';
 import { MediaInfo } from '../../../models';
 import { Messenger } from '@estruyf/vscode/dist/client';
@@ -27,6 +27,7 @@ export interface IDetailsSlideOverProps {
 export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> = ({ imgSrc, size, dimensions, media, folder, showForm, onEdit, onEditClose, onDismiss, isImageFile }: React.PropsWithChildren<IDetailsSlideOverProps>) => {
   const [ filename, setFilename ] = React.useState<string>(media.filename);
   const [ caption, setCaption ] = React.useState<string | undefined>(media.caption);
+  const [ title, setTitle ] = React.useState<string | undefined>(media.title);
   const [ alt, setAlt ] = React.useState(media.alt);
   const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
   const page = useRecoilValue(PageSelector);
@@ -38,20 +39,22 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
   const extension = fileInfo?.pop();
   const name = fileInfo?.join('.');
 
-  const onSubmitMetadata = () => {
+  const onSubmitMetadata = useCallback(() => {
     Messenger.send(DashboardMessage.updateMediaMetadata, {
       file: media.fsPath,
       filename,
       caption,
       alt,
+      title,
       folder: selectedFolder,
       page
     });
     
     onEditClose();
-  };
+  }, [media, filename, caption, alt, title, selectedFolder, page])
 
   React.useEffect(() => {
+    setTitle(media.title);
     setAlt(media.alt);
     setCaption(media.caption);
     setFilename(media.filename);
@@ -133,31 +136,51 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                                     </div>
                                   </div>
                                 </div>
+
                                 <div>
                                   <label className="block text-sm font-medium text-gray-700 dark:text-whisper-900">
-                                    Caption
-                                  </label>
-                                  <div className="mt-1">
-                                    <textarea
-                                      rows={3}
-                                      className="py-1 px-2 sm:text-sm bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none w-full"
-                                      value={caption || ''}
-                                      onChange={(e) => setCaption(e.target.value)}
-                                    />
-                                  </div>
-                                </div>
-                                <div>
-                                  <label className="block text-sm font-medium text-gray-700 dark:text-whisper-900">
-                                    Alt tag value
+                                    Title
                                   </label>
                                   <div className="mt-1">
                                     <input
                                       className="py-1 px-2 sm:text-sm bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none w-full"
-                                      value={alt || ''}
-                                      onChange={(e) => setAlt(e.target.value)}
+                                      value={title || ''}
+                                      onChange={(e) => setTitle(e.target.value)}
                                     />
                                   </div>
                                 </div>
+
+                                {
+                                  isImageFile && (
+                                    <>
+                                      <div>
+                                        <label className="block text-sm font-medium text-gray-700 dark:text-whisper-900">
+                                          Caption
+                                        </label>
+                                        <div className="mt-1">
+                                          <textarea
+                                            rows={3}
+                                            className="py-1 px-2 sm:text-sm bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none w-full"
+                                            value={caption || ''}
+                                            onChange={(e) => setCaption(e.target.value)}
+                                          />
+                                        </div>
+                                      </div>
+                                      <div>
+                                        <label className="block text-sm font-medium text-gray-700 dark:text-whisper-900">
+                                          Alt tag value
+                                        </label>
+                                        <div className="mt-1">
+                                          <input
+                                            className="py-1 px-2 sm:text-sm bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none w-full"
+                                            value={alt || ''}
+                                            onChange={(e) => setAlt(e.target.value)}
+                                          />
+                                        </div>
+                                      </div>
+                                    </>
+                                  )
+                                }
                               </div>
 
                               <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
@@ -197,16 +220,27 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                                   <dt className="text-vulcan-100 dark:text-whisper-900">Filename</dt>
                                   <dd className="text-vulcan-300 dark:text-whisper-500 text-right">{media.filename}</dd>
                                 </div>
-                                
+
                                 <div className="py-3 flex justify-between text-sm font-medium">
-                                  <dt className="text-vulcan-100 dark:text-whisper-900">Caption</dt>
-                                  <dd className="text-vulcan-300 dark:text-whisper-500 text-right">{media.caption || ""}</dd>
+                                  <dt className="text-vulcan-100 dark:text-whisper-900">Title</dt>
+                                  <dd className="text-vulcan-300 dark:text-whisper-500 text-right">{media.title}</dd>
                                 </div>
                                 
-                                <div className="py-3 flex justify-between text-sm font-medium">
-                                  <dt className="text-vulcan-100 dark:text-whisper-900">Alternate text</dt>
-                                  <dd className="text-vulcan-300 dark:text-whisper-500 text-right">{media.alt || ""}</dd>
-                                </div>
+                                {
+                                  isImageFile && (
+                                    <>
+                                      <div className="py-3 flex justify-between text-sm font-medium">
+                                        <dt className="text-vulcan-100 dark:text-whisper-900">Caption</dt>
+                                        <dd className="text-vulcan-300 dark:text-whisper-500 text-right">{media.caption || ""}</dd>
+                                      </div>
+                                      
+                                      <div className="py-3 flex justify-between text-sm font-medium">
+                                        <dt className="text-vulcan-100 dark:text-whisper-900">Alternate text</dt>
+                                        <dd className="text-vulcan-300 dark:text-whisper-500 text-right">{media.alt || ""}</dd>
+                                      </div>
+                                    </>
+                                  )
+                                }
                               </dl>
                             </>
                           )
diff --git a/src/dashboardWebView/components/Media/Item.tsx b/src/dashboardWebView/components/Media/Item.tsx
index becee39a..95724c32 100644
--- a/src/dashboardWebView/components/Media/Item.tsx
+++ b/src/dashboardWebView/components/Media/Item.tsx
@@ -83,10 +83,11 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
         multiple: viewData?.data?.multiple,
         value: viewData?.data?.value,
         position: viewData?.data?.position || null,
-        blockData: typeof viewData?.data?.blockData !== "undefined" ? viewData?.data?.blockData : undefined
+        blockData: typeof viewData?.data?.blockData !== "undefined" ? viewData?.data?.blockData : undefined,
+        title: media.title
       });
     } else {
-      Messenger.send(DashboardMessage.insertPreviewImage, {
+      Messenger.send(DashboardMessage.insertMedia, {
         relPath: parseWinPath(relPath) || "",
         file: viewData?.data?.filePath,
         fieldName: viewData?.data?.fieldName,
@@ -96,30 +97,32 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
         position: viewData?.data?.position || null,
         blockData: typeof viewData?.data?.blockData !== "undefined" ? viewData?.data?.blockData : undefined,
         alt: alt || "",
-        caption: caption || ""
+        caption: caption || "",
+        title: media.title || ""
       });
     }
   };
 
-  const insertSnippet = () => {
+  const insertSnippet = useCallback(() => {
     const relPath = getRelPath();
     let snippet = settings?.mediaSnippet.join("\n");
 
     snippet = snippet?.replace("{mediaUrl}", parseWinPath(relPath) || "");
     snippet = snippet?.replace("{alt}", alt || "");
     snippet = snippet?.replace("{caption}", caption || "");
+    snippet = snippet?.replace("{title}", media.title || "");
     snippet = snippet?.replace("{filename}", basename(relPath || ""));
     snippet = snippet?.replace("{mediaWidth}", media?.dimensions?.width?.toString() || "");
     snippet = snippet?.replace("{mediaHeight}", media?.dimensions?.height?.toString() || "");
 
-    Messenger.send(DashboardMessage.insertPreviewImage, {
+    Messenger.send(DashboardMessage.insertMedia, {
       relPath: parseWinPath(relPath) || "",
       file: viewData?.data?.filePath,
       fieldName: viewData?.data?.fieldName,
       position: viewData?.data?.position || null,
       snippet
     });
-  };
+  }, [alt, caption, media, settings, viewData]);
 
   const deleteMedia = () => {
     setShowAlert(true);
@@ -398,6 +401,14 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
           <p className="text-sm dark:text-whisper-900 font-bold pointer-events-none flex items-center break-all">
             {basename(parseWinPath(media.fsPath) || "")}
           </p>
+          {
+            !isImageFile && media.title && (
+              <p className="mt-2 text-xs dark:text-whisper-900 font-medium pointer-events-none flex flex-col items-start">
+                <b className={`mr-2`}>Title:</b>
+                <span className={`block mt-1 dark:text-whisper-500 text-xs`}>{media.title}</span>
+              </p>
+            )
+          }
           {
             media.caption && (
               <p className="mt-2 text-xs dark:text-whisper-900 font-medium pointer-events-none flex flex-col items-start">
diff --git a/src/helpers/MediaHelpers.ts b/src/helpers/MediaHelpers.ts
index 9c3e85f2..45ca114b 100644
--- a/src/helpers/MediaHelpers.ts
+++ b/src/helpers/MediaHelpers.ts
@@ -326,7 +326,9 @@ export class MediaHelpers {
               isFile = !mimeType.startsWith('image');
             }
 
-            const snippet = data.snippet || `${isFile ? "" : "!"}[${data.alt || data.caption || ""}](${relPath})`;
+            const caption = isFile ? `${data.title || ""}` : `${data.alt || data.caption || ""}`;
+
+            const snippet = data.snippet || `${isFile ? "" : "!"}[${caption}](${relPath})`;
             if (selection !== undefined) {
               builder.replace(selection, snippet);
             } else {
diff --git a/src/listeners/dashboard/MediaListener.ts b/src/listeners/dashboard/MediaListener.ts
index f4037d24..cd940b7c 100644
--- a/src/listeners/dashboard/MediaListener.ts
+++ b/src/listeners/dashboard/MediaListener.ts
@@ -36,7 +36,7 @@ export class MediaListener extends BaseListener {
       case DashboardMessage.revealMedia:
         this.openFileInFinder(msg?.data?.file);
         break;
-      case DashboardMessage.insertPreviewImage:
+      case DashboardMessage.insertMedia:
         Telemetry.send(TelemetryEvent.insertMediaToContent);
         MediaHelpers.insertMediaToMarkdown(msg?.data);
         break;
diff --git a/src/models/MediaPaths.ts b/src/models/MediaPaths.ts
index cf81e782..03104007 100644
--- a/src/models/MediaPaths.ts
+++ b/src/models/MediaPaths.ts
@@ -12,6 +12,7 @@ export interface MediaInfo {
   fsPath: string; 
   vsPath: string | undefined;
   dimensions?: ISizeCalculationResult | undefined;
+  title?: string | undefined;
   caption?: string | undefined;
   alt?: string | undefined;
   mimeType?: string | undefined;