New useExtensibility hook + extensibility points

src/dashboardWebView/components/Contents/Item.tsx

@@ -11,6 +11,7 @@ import { useEffect, useMemo, useState } from 'react';
 import useThemeColors from '../../hooks/useThemeColors';
 import { Status } from './Status';
 import * as React from 'react';
+import useExtensibility from '../../hooks/useExtensibility';
 
 export interface IItemProps extends Page { }
 
@@ -28,8 +29,14 @@ export const Item: React.FunctionComponent<IItemProps> = ({
   const settings = useRecoilValue(SettingsSelector);
   const draftField = useMemo(() => settings?.draftField, [settings]);
   const cardFields = useMemo(() => settings?.dashboardState?.contents?.cardFields, [settings?.dashboardState?.contents?.cardFields]);
-  const [imageHtml, setImageHtml] = useState<string | undefined>(undefined);
-  const [footerHtml, setFooterHtml] = useState<string | undefined>(undefined);
+  const { titleHtml, imageHtml, footerHtml } = useExtensibility({
+    fmFilePath,
+    date,
+    title,
+    description,
+    type,
+    pageData
+  });
   const { getColors } = useThemeColors();
 
   const escapedTitle = useMemo(() => {
@@ -106,42 +113,6 @@ export const Item: React.FunctionComponent<IItemProps> = ({
     return cardFields && (cardFields.state || cardFields.date);
   }, [cardFields]);
 
-  useEffect(() => {
-    if (window.fmExternal && window.fmExternal.getCardFooter) {
-      window.fmExternal.getCardFooter(fmFilePath, {
-        fmFilePath,
-        date,
-        title,
-        description,
-        type,
-        ...pageData
-      }).then(htmlContent => {
-        if (htmlContent) {
-          setFooterHtml(htmlContent);
-        } else {
-          setFooterHtml(undefined);
-        }
-      });
-    }
-
-    if (window.fmExternal && window.fmExternal.getCardImage) {
-      window.fmExternal.getCardImage(fmFilePath, {
-        fmFilePath,
-        date,
-        title,
-        description,
-        type,
-        ...pageData
-      }).then(htmlContent => {
-        if (htmlContent) {
-          setImageHtml(htmlContent);
-        } else {
-          setImageHtml(undefined);
-        }
-      });
-    }
-  }, []);
-
   if (view === DashboardViewType.Grid) {
     return (
       <li className="relative">
@@ -207,9 +178,13 @@ export const Item: React.FunctionComponent<IItemProps> = ({
             />
 
             <button onClick={openFile} className={`text-left block`}>
-              <h2 className="mb-2 font-bold">
-                {escapedTitle}
-              </h2>
+              {
+                titleHtml ? titleHtml : (
+                  <h2 className="mb-2 font-bold">
+                    {escapedTitle}
+                  </h2>
+                )
+              }
             </button>
 
             <button onClick={openFile} className={`text-left block`}>

src/dashboardWebView/hooks/index.ts

@@ -0,0 +1,6 @@
+export * from './useExtensibility';
+export * from './useMedia';
+export * from './useMessages';
+export * from './usePages';
+export * from './usePagination';
+export * from './useThemeColors';

src/dashboardWebView/hooks/useExtensibility.tsx

@@ -0,0 +1,78 @@
+import { useState, useEffect } from 'react';
+
+export default function useExtensibility(options: {
+  fmFilePath: string;
+  date: string | Date;
+  title: string;
+  description: string;
+  type: string;
+  pageData: any;
+}) {
+  const [titleHtml, setTitleHtml] = useState<string | undefined>(undefined);
+  const [imageHtml, setImageHtml] = useState<string | undefined>(undefined);
+  const [footerHtml, setFooterHtml] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    console.log('useExtensibility', window.fmExternal);
+    if (!window.fmExternal || !options || !options.fmFilePath) {
+      return;
+    }
+
+    if (window.fmExternal.getCardFooter) {
+      window.fmExternal.getCardFooter(options.fmFilePath, {
+        fmFilePath: options.fmFilePath,
+        date: options.date,
+        title: options.title,
+        description: options.description,
+        type: options.type,
+        ...options.pageData
+      }).then(htmlContent => {
+        if (htmlContent) {
+          setFooterHtml(htmlContent);
+        } else {
+          setFooterHtml(undefined);
+        }
+      });
+    }
+
+    if (window.fmExternal.getCardImage) {
+      window.fmExternal.getCardImage(options.fmFilePath, {
+        fmFilePath: options.fmFilePath,
+        date: options.date,
+        title: options.title,
+        description: options.description,
+        type: options.type,
+        ...options.pageData
+      }).then(htmlContent => {
+        if (htmlContent) {
+          setImageHtml(htmlContent);
+        } else {
+          setImageHtml(undefined);
+        }
+      });
+    }
+
+    if (window.fmExternal.getCardTitle) {
+      window.fmExternal.getCardTitle(options.fmFilePath, {
+        fmFilePath: options.fmFilePath,
+        date: options.date,
+        title: options.title,
+        description: options.description,
+        type: options.type,
+        ...options.pageData
+      }).then(htmlContent => {
+        if (htmlContent) {
+          setTitleHtml(htmlContent);
+        } else {
+          setTitleHtml(undefined);
+        }
+      });
+    }
+  }, [options]);
+
+  return {
+    titleHtml,
+    imageHtml,
+    footerHtml
+  };
+}

src/dashboardWebView/index.tsx

@@ -29,6 +29,12 @@ declare global {
       getPanelView: (data: any) => Promise<CustomPanelViewResult | undefined>;
       getCardImage: (filePath: string, data: any) => Promise<string | undefined>;
       getCardFooter: (filePath: string, data: any) => Promise<string | undefined>;
+      // 8.5.0 extension points
+      getCardTitle: (filePath: string, data: any) => Promise<string | undefined>;
+      getcardDescription: (filePath: string, data: any) => Promise<string | undefined>;
+      getCardTags: (filePath: string, data: any) => Promise<string | undefined>;
+      getCardDate: (filePath: string, data: any) => Promise<string | undefined>;
+      getCardStatus: (filePath: string, data: any) => Promise<string | undefined>;
     }
   }
 }