feat: makes markdown preview rendering is optional

src/BelyalovCommanderPlugin.ts

@@ -5,13 +5,15 @@ import FileManager from "./FileManager.ts";
 import { BelyalovCommanderSettingTab } from "./Settings.ts";
 
 interface BelyalovCommanderSetting {
+  renderMarkdown: boolean;
   unfinishedChars: string;
   maxRecentFiles: number;
 }
 
 const DEFAULT_SETTINGS: Partial<BelyalovCommanderSetting> = {
   unfinishedChars: " /",
-  maxRecentFiles: 50
+  maxRecentFiles: 50,
+  renderMarkdown: false
 };
 
 export default class BelyalovCommanderPlugin extends Plugin  {
@@ -34,7 +36,7 @@ export default class BelyalovCommanderPlugin extends Plugin  {
 
     this.registerView(
       VIEW_TYPE,
-      (leaf: WorkspaceLeaf) => new BelyalovCommanderView(leaf, this.fileManager, this.openFile)
+      (leaf: WorkspaceLeaf) => new BelyalovCommanderView(leaf, this.fileManager, this.openFile, this.settings.renderMarkdown)
     );
 
     this.registerCommands();

src/BelyalovCommanderView.tsx

@@ -17,16 +17,19 @@ export default class FileManagementView extends ItemView {
   private readonly fileManager;
   private state: State = {'query': '', 'type': 'directory'};
   focusFile: (tfile: TFile, event: MouseEvent) => void;
+  renderMarkdown: boolean;
 
   constructor(
     leaf: WorkspaceLeaf,
     fileManager: FileManager,
-    focusFile: (tfile: TFile, event: MouseEvent) => void
+    focusFile: (tfile: TFile, event: MouseEvent) => void,
+    renderMarkdown: boolean
   ) {
     super(leaf);
 
     this.fileManager = fileManager;
     this.focusFile = focusFile;
+    this.renderMarkdown = renderMarkdown;
   }
 
   override getIcon(): string {
@@ -114,6 +117,7 @@ export default class FileManagementView extends ItemView {
           handleDragFile={this.handleDrag}
           openFile={this.focusFile}
           handleDragFiles={this.handleDragFiles}
+          renderMarkdown={this.renderMarkdown}
         />
       );
     }

src/components/FileCard.tsx

@@ -2,7 +2,6 @@ import "./FileCard.css";
 import "../other.css";
 
 import React, { MouseEventHandler } from "react";
-import Markdown from 'markdown-to-jsx'
 import { Icon } from "./Icon.tsx";
 import { Tag } from "./Tag.tsx";
 import { FileData } from '../FileManager.ts'
@@ -13,6 +12,7 @@ type Props = {
   handleClick: MouseEventHandler;
   selected: boolean;
   className: string;
+  preview: Function;
 };
 
 // const ToC = ({ headings }) => {
@@ -39,7 +39,7 @@ type Props = {
 // };
 
 export const FileCard = (props: Props) => {
-  const { handleClick, handleDrag, file, selected, className } = props;
+  const { handleClick, handleDrag, file, selected, className, preview } = props;
 
   return (
     <div
@@ -54,13 +54,7 @@ export const FileCard = (props: Props) => {
         <div className="created-date">{file.updatedDate.fromNow()}</div>
       </div>
       <div className="body">
-        {/* <pre
-          className="content"
-          dangerouslySetInnerHTML={{ __html: file.content.trim().substring(0, 300) }}
-        ></pre> */}
-        <div className="content">
-          <Markdown>{ file.content.trim().substring(0, 300) }</Markdown>
-        </div>
+        {preview(file)}
         {file.imgSrc && <img className="image" alt="Image" src={file.imgSrc} />}
       </div>
       <div className="footer">

src/components/ListView.tsx

@@ -1,5 +1,6 @@
 
 import * as React from "react";
+import Markdown from 'markdown-to-jsx'
 import { FileCard as FileCard } from "./FileCard.tsx";
 import { useState, useEffect, SyntheticEvent, useMemo } from "react";
 import "./ListView.css";
@@ -14,6 +15,7 @@ type Props = {
   // onDragOver: Function;
   handleDragFiles: Function;
   openFile: Function;
+  renderMarkdown: boolean;
 };
 
 export function ListView({
@@ -23,6 +25,7 @@ export function ListView({
   handleDragFile,
   handleDragFiles,
   openFile,
+  renderMarkdown,
 }: Props) {
   if (filesWithContent.length === 0) {
     return <h1>No files here</h1>;
@@ -122,6 +125,26 @@ export function ListView({
               file={file}
               handleDrag={(event: SyntheticEvent) => onDrag(event, file)}
               handleClick={(event: any): void => onClick(event, file)}
+            preview={(file: FileData) => {
+              const content = file.content.trim().substring(0, 300)
+
+              if (renderMarkdown) {
+                return (
+                  <div className="content">
+                    <Markdown>{content}</Markdown>
+                  </div>
+                );
+              } else {
+                return (
+                  <pre
+                    className="content"
+                    dangerouslySetInnerHTML={{
+                      __html: content,
+                    }}
+                  ></pre>
+                );
+              }
+            }}
           />
         ))}
       </div>