trying to improve markdown render

Author: RafaelGB

package.json

@@ -42,6 +42,7 @@
 		"obsidian": "0.14.6",
 		"obsidian-dataview": "0.5.20",
 		"rollup": "2.72.0",
+		"rollup-plugin-typescript2": "0.31.2",
 		"ts-jest": "27.1.4",
 		"tslib": "2.4.0",
 		"typescript": "4.6.4",

rollup.config.js

@@ -1,24 +1,40 @@
-import typescript from "@rollup/plugin-typescript";
 import { nodeResolve } from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
 import json from "@rollup/plugin-json";
-
+import typescript2 from "rollup-plugin-typescript2";
 const isProd = (process.env.BUILD === 'production');
 
-export default (commandLineArgs) => ({
-    input: 'src/main.ts',
+const BASE_CONFIG = {
+    input: "src/main.ts",
+    external: ["obsidian","obsidian-dataview/lib/data-model/value"],
+    onwarn: (warning, warn) => {
+        // Sorry rollup, but we're using eval...
+        if (/Use of eval is strongly discouraged/.test(warning.message)) return;
+        warn(warning);
+    },
+};
+
+const getRollupPlugins = (tsconfig, ...plugins) =>
+    [
+        typescript2(tsconfig),
+        nodeResolve({ browser: true }),
+        json(),
+        commonjs(),
+    ].concat(plugins);
+
+const PROD_PLUGIN_CONFIG = {
+    ...BASE_CONFIG,
     output: {
         dir: 'dist',
         sourcemap: 'inline',
         sourcemapExcludeSources: isProd,
-        format: 'cjs',
-        exports: 'default',
+        format: "cjs",
+        exports: "default",
+        name: "Database Folder (Production)",
     },
-    external: ['obsidian'],
-  plugins: [
-    typescript(),
-    nodeResolve({browser: true}),
-    commonjs(),
-    json(),
-  ]
-  });
+    plugins: getRollupPlugins(),
+};
+let configs = [];
+configs.push(PROD_PLUGIN_CONFIG);
+
+export default configs;

src/components/Cell.tsx

@@ -11,22 +11,6 @@ import { c } from "helpers/StylesHelper";
 import CalendarPortal from "./portals/CalendarPortal";
 import { TableColumn } from "cdm/FolderModel";
 
-/**
- * Obtain the path of the file inside cellValue
- * i.e. if cellValue is "[[path/to/file.md|File Name]]" then return "path/to/file.md"
- * i.e. if cellValue is "[[path/to/file.md]]" then return "path/to/file.md"
- * i.e. if cellValue is "[[file.md]]" then return "file.md"
- * @param cellValue
- */
-function getFilePath(cellValue: string): string {
-  const regex = /\[\[(.*)\]\]/;
-  const matches = regex.exec(cellValue);
-  if (matches && matches.length > 1) {
-    return matches[1];
-  }
-  return "";
-}
-
 export default function DefaultCell(cellProperties: Cell) {
   const dataDispatch = (cellProperties as any).dataDispatch;
   /** Initial state of cell */
@@ -37,6 +21,8 @@ export default function DefaultCell(cellProperties: Cell) {
   const dataType = (cellProperties.column as any).dataType;
   /** Note info of current Cell */
   const note: NoteInfo = (cellProperties.row.original as any).note;
+  /** Ref to cell container */
+  const containerCellRef = useRef<HTMLDivElement>();
   /** state of cell value */
   const [contextValue, setContextValue] = useState({
     value: initialValue,
@@ -59,6 +45,19 @@ export default function DefaultCell(cellProperties: Cell) {
     }
   }, []);
 
+  useLayoutEffect(() => {
+    if (!dirtyCell && containerCellRef.current) {
+      //TODO - this is a hack. find why is layout effect called twice
+      containerCellRef.current.innerHTML = "";
+      MarkdownRenderer.renderMarkdown(
+        contextValue.value,
+        containerCellRef.current,
+        note.getFile().path,
+        null
+      );
+    }
+  }, [dirtyCell]);
+
   const handleKeyDown = (event: any) => {
     if (event.key === "Enter") {
       event.target.blur();
@@ -95,49 +94,43 @@ export default function DefaultCell(cellProperties: Cell) {
     setDirtyCell(false);
   }
 
-  function obsidianMarkdownContainer(mdContain: string) {
-    const containerRef = useRef<HTMLElement>();
-    useLayoutEffect(() => {
-      MarkdownRenderer.renderMarkdown(
-        initialValue,
-        containerRef.current,
-        mdContain,
-        null
-      );
-    });
-    return <span ref={containerRef} className={`${c("md_cell")}`}></span>;
-  }
-
-  function contentEditableContainer(className: string) {
-    return (
-      <ContentEditable
-        html={(contextValue.value && contextValue.value.toString()) || ""}
-        onChange={handleOnChange}
-        onKeyDown={handleKeyDown}
-        onBlur={() =>
-          setContextValue((old) => ({ value: old.value, update: true }))
-        }
-        className={className}
-      />
-    );
-  }
-
   function getCellElement() {
     switch (dataType) {
       /** Plain text option */
       case DataTypes.TEXT:
         return (cellProperties.column as any).isMetadata ? (
           <span className="data-input">{contextValue.value.toString()}</span>
         ) : (
-          contentEditableContainer("data-input")
+          <ContentEditable
+            html={(contextValue.value && contextValue.value.toString()) || ""}
+            onChange={handleOnChange}
+            onKeyDown={handleKeyDown}
+            onBlur={() =>
+              setContextValue((old) => ({ value: old.value, update: true }))
+            }
+            className={"data-input"}
+            innerRef={containerCellRef}
+          />
         );
       /** Number option */
       case DataTypes.NUMBER:
-        return contentEditableContainer("data-input text-align-right");
+        return (
+          <ContentEditable
+            html={(contextValue.value && contextValue.value.toString()) || ""}
+            onChange={handleOnChange}
+            onKeyDown={handleKeyDown}
+            onBlur={() =>
+              setContextValue((old) => ({ value: old.value, update: true }))
+            }
+            className="data-input text-align-right"
+          />
+        );
 
       /** Markdown option */
       case DataTypes.MARKDOWN:
-        return obsidianMarkdownContainer(getFilePath(initialValue));
+        return (
+          <span ref={containerCellRef} className={`${c("md_cell")}`}></span>
+        );
       /** Selector option */
       case DataTypes.SELECT:
         return (

src/components/portals/CalendarPortal.tsx

@@ -29,14 +29,7 @@ const CalendarPortal = (calendarProps: CalendarProps) => {
 
   /** Note info of current Cell */
   const note: NoteInfo = (cellProperties.row.original as any).note;
-  const [calendarState, setCalendarState] = useState(
-    (
-      DataviewService.parseLiteral(
-        cellProperties.value,
-        DataTypes.CALENDAR
-      ) as DateTime
-    ).toJSDate()
-  );
+  const [calendarState, setCalendarState] = useState(null);
 
   function handleCalendarChange(date: Date) {
     const newValue = DateTime.fromJSDate(date);
@@ -67,6 +60,12 @@ const CalendarPortal = (calendarProps: CalendarProps) => {
         portalActive.focus();
         portalActive.blur();
       }
+      // Check value when click on calendar to parse it if its not a date
+      setCalendarState(
+        DateTime.isDateTime(contextValue.value)
+          ? contextValue.value.toJSDate()
+          : new Date()
+      );
       setShowCalendar(!showCalendar);
     }
   }

src/helpers/VaultManagement.ts

@@ -17,7 +17,7 @@ const noBreakSpace = /\u00A0/g;
  * @param data 
  * @returns 
  */
-function hasFrontmatterKey(data: string): boolean {
+export function hasFrontmatterKey(data: string): boolean {
   const frontmatterRegex = /^---\n+.*---\n/g
   return frontmatterRegex.test(data);
 }

src/services/DataviewService.ts

@@ -62,24 +62,35 @@ class DataviewProxy {
     }
 
     parseLiteral(literal: Literal | NoteInfo, dataTypeDst: string): Literal | NoteInfo {
-        let parsedLiteral: Literal | NoteInfo;
+        if (literal === null || literal === undefined) return "";
+        let parsedLiteral: Literal | NoteInfo = literal;
         // Check empty or undefined literals
         switch (dataTypeDst) {
             case DataTypes.CALENDAR:
-                // Check if original literal is a date. If not convert to current date
-                parsedLiteral = DateTime.isDateTime(literal) ? literal : DateTime.now();
+                switch (typeof literal) {
+                    case "string":
+                        parsedLiteral = DateTime.fromISO(literal);
+                        break;
+                }
                 break;
             case DataTypes.NUMBER:
                 parsedLiteral = isNaN(literal as any) ? ""
                     : Number.parseInt(literal as string);
                 break;
             default:
-                parsedLiteral = DateTime.isDateTime(literal) ? literal.toFormat("yyyy-MM-dd")
-                    : literal;
-
+                // TODO Values of dataview fails when Obsidian is loaded
+                switch (typeof literal) {
+                    case 'object':
+                        if (DateTime.isDateTime(literal) && typeof literal.toFormat === 'function') {
+                            parsedLiteral = literal.toFormat("yyyy-MM-dd");
+                        } else {
+                            parsedLiteral = literal.toString();
+                        }
+                }
         }
         return parsedLiteral;
     }
+
     /**
      * Singleton instance
      * @returns {VaultManager}

tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
       "baseUrl": "src",
-      "inlineSourceMap": true,
       "inlineSources": true,
+      "sourceMap": true,
       "module": "ESNext",
       "target": "es6",
       "allowJs": true,