Merge branch '17-fr-image-column-type'

Author: RafaelGB

README.md

@@ -13,7 +13,7 @@ You can add a folder database y by right clicking on the folder where you want t
 ![AddDatabase.gif](docs/resources/AddDatabase.gif)
 
 ### How to use?
-Database has its own type of view. It will search all notes into the same folder of the database and show the columns that you specify. Check our [documentation](https://rafaelgb.github.io/obsidian-db-folder/) for more information.
+Database has its own type of view. It will search all notes into the same folder of the database and show the columns that you specify. Check our [documentation](https://rafaelgb.github.io/obsidian-db-folder/features/rows/) for more information.
 
 ![TablePresentation.gif](docs/resources/TablePresentation.gif)
 

src/components/Cell.tsx

@@ -9,7 +9,8 @@ import { CellContext } from "components/contexts/CellContext";
 import { c } from "helpers/StylesHelper";
 import CalendarPortal from "./portals/CalendarPortal";
 import { TableColumn } from "cdm/FolderModel";
-import CalendarTimePortal from "./portals/CalendarTimePortal";
+import CalendarTimePortal from "components/portals/CalendarTimePortal";
+import { renderMarkdown } from "components/markdown/MarkdownRenderer";
 
 export default function DefaultCell(cellProperties: Cell) {
   const dataDispatch = (cellProperties as any).dataDispatch;
@@ -54,13 +55,13 @@ export default function DefaultCell(cellProperties: Cell) {
 
   useEffect(() => {
     if (!dirtyCell && containerCellRef.current) {
+      renderMarkdown;
       //TODO - this is a hack. find why is layout effect called twice
       containerCellRef.current.innerHTML = "";
-      MarkdownRenderer.renderMarkdown(
+      renderMarkdown(
+        (cellProperties as any).initialState.view,
         contextValue.value,
-        containerCellRef.current,
-        note.getFile().path,
-        (cellProperties as any).initialState.view
+        containerCellRef.current
       );
     }
   }, [dirtyCell]);

src/components/markdown/MarkdownRenderer.tsx

@@ -0,0 +1,121 @@
+import { NormalizedPath } from "cdm/FolderModel";
+import { DatabaseView } from "DatabaseView";
+import { MediaExtensions } from "helpers/Constants";
+import { getNormalizedPath } from "helpers/VaultManagement";
+import { MarkdownRenderer, TFile } from "obsidian";
+import { LOGGER } from "services/Logger";
+
+export async function renderMarkdown(
+  view: DatabaseView,
+  markdownString: string,
+  domElement: HTMLDivElement
+): Promise<HTMLDivElement> {
+  try {
+    await MarkdownRenderer.renderMarkdown(
+      markdownString,
+      domElement,
+      view.file.path,
+      view
+    );
+
+    await handleEmbeds(domElement, view, 5);
+    // applyCheckboxIndexes(dom);
+    // findUnresolvedLinks(dom, view);
+  } catch (e) {
+    LOGGER.error(e);
+  }
+
+  return domElement;
+}
+
+function handleEmbeds(dom: HTMLDivElement, view: DatabaseView, depth: number) {
+  return Promise.all(
+    dom.findAll(".internal-embed").map(async (el) => {
+      const src = el.getAttribute("src");
+      const normalizedPath = getNormalizedPath(src);
+      const target =
+        typeof src === "string" &&
+        view.app.metadataCache.getFirstLinkpathDest(
+          normalizedPath.root,
+          view.file.path
+        );
+
+      if (!(target instanceof TFile)) {
+        return;
+      }
+
+      if (MediaExtensions.IMAGE.contains(target.extension)) {
+        return handleImage(el, target, view);
+      }
+
+      if (MediaExtensions.AUDIO.contains(target.extension)) {
+        return handleAudio(el, target, view);
+      }
+
+      if (MediaExtensions.VIDEO.contains(target.extension)) {
+        return handleVideo(el, target, view);
+      }
+
+      //   if (target.extension === "md") {
+      //     return await handleMarkdown(el, target, normalizedPath, view, depth);
+      //   }
+
+      //return handleUnknownFile(el, target);
+    })
+  );
+}
+
+function handleImage(el: HTMLElement, file: TFile, view: DatabaseView) {
+  el.empty();
+
+  el.createEl(
+    "img",
+    { attr: { src: view.app.vault.getResourcePath(file) } },
+    (img) => {
+      if (el.hasAttribute("width")) {
+        img.setAttribute("width", el.getAttribute("width"));
+      }
+
+      if (el.hasAttribute("height")) {
+        img.setAttribute("height", el.getAttribute("height"));
+      }
+
+      if (el.hasAttribute("alt")) {
+        img.setAttribute("alt", el.getAttribute("alt"));
+      }
+    }
+  );
+
+  el.addClasses(["image-embed", "is-loaded"]);
+}
+
+function handleAudio(el: HTMLElement, file: TFile, view: DatabaseView) {
+  el.empty();
+  el.createEl("audio", {
+    attr: { controls: "", src: view.app.vault.getResourcePath(file) },
+  });
+  el.addClasses(["media-embed", "is-loaded"]);
+}
+
+function handleVideo(el: HTMLElement, file: TFile, view: DatabaseView) {
+  el.empty();
+
+  el.createEl(
+    "video",
+    { attr: { controls: "", src: view.app.vault.getResourcePath(file) } },
+    (video) => {
+      const handleLoad = () => {
+        video.removeEventListener("loadedmetadata", handleLoad);
+
+        if (video.videoWidth === 0 && video.videoHeight === 0) {
+          el.empty();
+          handleAudio(el, file, view);
+        }
+      };
+
+      video.addEventListener("loadedmetadata", handleLoad);
+    }
+  );
+
+  el.addClasses(["media-embed", "is-loaded"]);
+}

src/helpers/Constants.ts

@@ -167,4 +167,10 @@ export function getOperatorFilterValue(keyToFind: string): string {
   return entry[1];
 }
 
+export const MediaExtensions = Object.freeze({
+  IMAGE: ['bmp', 'png', 'jpg', 'jpeg', 'gif', 'svg'],
+  VIDEO: ['mp4', 'webm', 'ogv'],
+  AUDIO: ['mp3', 'wav', 'm4a', '3gp', 'flac', 'ogg', 'oga']
+});
+
 export const YAML_INDENT = Object.freeze("  ");