Merge branch '136-bug-embedding-local-images-doesnt-work'

docs/docs/changelog.md

@@ -1,3 +1,6 @@
+## 1.7.2
+### No longer broken
+- add new rows hotfix. Was broken in 1.7.1 with refactor of datadispatch
 ## 1.7.1
 ### Shiny new things
 - Create your columns easily with 2 new options. Choose a file as template or just take all the avaliable fields in your source! [ISSUE#39](https://github.com/RafaelGB/obsidian-db-folder/issues/39)

package.json

@@ -40,7 +40,7 @@
 		"eslint": "8.15.0",
 		"jest": "27.5.1",
 		"jest-mock-extended": "2.0.6",
-		"obsidian": "0.14.8",
+		"obsidian": "0.15.1",
 		"rollup": "2.75.5",
 		"rollup-plugin-typescript2": "0.32.0",
 		"rollup-plugin-terser": "7.0.2",
@@ -56,7 +56,7 @@
 		"immutability-helper": "3.1.1",
 		"monkey-around": "2.3.0",
 		"pkg.json": "2.0.8",
-		"obsidian-dataview": "0.5.29",
+		"obsidian-dataview": "0.5.36",
 		"react": "17.0.2",
 		"react-beautiful-dnd": "13.1.0",
 		"react-dom": "17.0.2",

src/DatabaseView.tsx

@@ -144,7 +144,6 @@ export class DatabaseView extends TextFileView implements HoverParent {
         view: this,
         stateManager: this.plugin.getStateManager(this.file),
         initialState: initialState,
-        cellSize: this.diskConfig.yaml.config.cell_size,
       };
 
       // Render database

src/cdm/FolderModel.ts

@@ -87,7 +87,6 @@ export type TableDataType = {
     stateManager: StateManager,
     dispatch?: Dispatch<any>,
     initialState?: InitialState,
-    cellSize: string,
 }
 export interface DatabaseHeaderProps {
     columns: any,

src/components/Cell.tsx

@@ -18,7 +18,7 @@ import { DataviewService } from "services/DataviewService";
 export default function DefaultCell(cellProperties: Cell) {
   const dataDispatch = (cellProperties as any).dataDispatch;
   /** Initial state of cell */
-  const initialValue = cellProperties.value;
+  const cellValue = cellProperties.value;
   /** Columns information */
   const columns = (cellProperties as any).columns;
   /** Type of cell */
@@ -31,7 +31,7 @@ export default function DefaultCell(cellProperties: Cell) {
   const taskRef = useRef<HTMLDivElement>();
   /** state of cell value */
   const [contextValue, setContextValue] = useState({
-    value: initialValue,
+    value: cellValue,
     update: false,
   });
   /** state for keeping the timeout to trigger the editior */
@@ -48,23 +48,24 @@ export default function DefaultCell(cellProperties: Cell) {
   // set contextValue when cell is loaded
   useEffect(() => {
     LOGGER.debug(
-      `default useEffect. dataType:${dataType} - value: ${contextValue.value} initialValue: ${initialValue}`
+      `default useEffect. dataType:${dataType} - value: ${contextValue.value} cellValue: ${cellValue}`
     );
     switch (dataType) {
       case DataTypes.TASK:
-        //TODO - this is a hack. find why is layout effect called twice
-        taskRef.current.innerHTML = "";
+        // Check if there are tasks in the cell
+        if (contextValue.value === "") break;
         DataviewService.getDataviewAPI().taskList(
           contextValue.value,
           false,
           taskRef.current,
           tableData.view,
           tableData.view.file.path
         );
+
         break;
       case DataTypes.MARKDOWN:
         containerCellRef.current.innerHTML = "";
-        renderMarkdown(cellProperties, initialValue, containerCellRef.current);
+        renderMarkdown(cellProperties, cellValue, containerCellRef.current, 5);
         break;
       default:
       // do nothing
@@ -89,12 +90,11 @@ export default function DefaultCell(cellProperties: Cell) {
       LOGGER.debug(
         `useEffect hooked with dirtyCell. Value:${contextValue.value}`
       );
-      //TODO - this is a hack. find why is layout effect called twice
-      containerCellRef.current.innerHTML = "";
       renderMarkdown(
         cellProperties,
         contextValue.value,
-        containerCellRef.current
+        containerCellRef.current,
+        5
       );
     }
   }, [dirtyCell]);
@@ -185,9 +185,9 @@ export default function DefaultCell(cellProperties: Cell) {
 
       /** Markdown option */
       case DataTypes.MARKDOWN:
-        if (initialValue !== contextValue.value.toString()) {
+        if (cellValue !== contextValue.value.toString()) {
           setContextValue({
-            value: initialValue,
+            value: cellValue,
             update: false,
           });
         }

src/components/Table.tsx

@@ -241,7 +241,7 @@ export function Table(tableData: TableDataType) {
         })}
         className={`${c(
           "table noselect cell_size_" +
-            tableData.cellSize +
+            tableData.view.diskConfig.yaml.config.cell_size +
             (tableData.view.diskConfig.yaml.config.sticky_first_column
               ? " sticky_first_column"
               : "")

src/components/markdown/MarkdownRenderer.tsx

@@ -1,40 +1,63 @@
 import { DatabaseColumn } from "cdm/DatabaseModel";
 import { DatabaseView } from "DatabaseView";
 import { MediaExtensions } from "helpers/Constants";
+import { c } from "helpers/StylesHelper";
 import { getNormalizedPath } from "helpers/VaultManagement";
-import { MarkdownRenderer, TFile } from "obsidian";
+import { MarkdownRenderer, MarkdownPreviewView, TFile } from "obsidian";
 import { Cell } from "react-table";
 import { LOGGER } from "services/Logger";
 
 export async function renderMarkdown(
   cell: Cell,
   markdownString: string,
-  domElement: HTMLDivElement
-): Promise<HTMLDivElement> {
+  domElement: HTMLDivElement,
+  depth: number
+) {
   try {
     const view: DatabaseView = (cell as any).tableData.view;
     const column = cell.column as unknown as DatabaseColumn;
     const { media_height, media_width, enable_media_view } = column.config;
     if (enable_media_view && isValidHttpUrl(markdownString)) {
-      // TODO option to generate Iframes
-      //markdownString = `<div class=iframe-container> <iframe width="427" height="240" src="${markdownString}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>`;
       markdownString = `![embedded link|${media_height}x${media_width}](${markdownString})`;
     }
-    await MarkdownRenderer.renderMarkdown(
-      markdownString,
-      domElement,
-      view.file.path,
-      view
-    );
-
-    await handleEmbeds(domElement, view, 5);
-    // applyCheckboxIndexes(dom);
-    // findUnresolvedLinks(dom, view);
+    domElement.empty();
+    const dom = domElement.createDiv();
+
+    dom.addClasses(["markdown-preview-view", c("markdown-preview-view")]);
+    dom.createDiv(c("embed-link-wrapper"), (wrapper) => {
+      wrapper.createEl(
+        "a",
+        {
+          href: domElement.getAttr("src") || view.file.basename,
+          cls: `internal-link ${c("embed-link")}`,
+        },
+        (link) => {
+          link.setAttr("aria-label", view.file.basename);
+        }
+      );
+    });
+    if (markdownString.startsWith("![[") && markdownString.endsWith("]]")) {
+      MarkdownPreviewView.renderMarkdown(
+        markdownString,
+        dom.createDiv(),
+        view.file.path,
+        view
+      );
+    } else {
+      await MarkdownRenderer.renderMarkdown(
+        markdownString,
+        dom.createDiv(),
+        view.file.path,
+        view
+      );
+    }
+    domElement.addClass("is-loaded");
+    if (depth > 0) {
+      await handleEmbeds(dom, view, --depth);
+    }
   } catch (e) {
     LOGGER.error(e);
   }
-
-  return domElement;
 }
 
 function handleEmbeds(dom: HTMLDivElement, view: DatabaseView, depth: number) {

src/services/MarkdownPostProcessorService.ts

@@ -48,7 +48,7 @@ export class PreviewDatabaseModeService {
         //then I want to hide all embedded items as these will be
         //transcluded text element or some other transcluded content inside the Database file
         //in reading mode these elements should be hidden
-        if (Object.prototype.hasOwnProperty.call(ctx.frontmatter, DatabaseCore.FRONTMATTER_KEY)) {
+        if (ctx.frontmatter !== undefined && Object.prototype.hasOwnProperty.call(ctx.frontmatter, DatabaseCore.FRONTMATTER_KEY)) {
             el.style.display = "none";
             return;
         }