✨ use viewState to hold TFile in PreviewView

src/export.ts

@@ -1,14 +1,13 @@
 import { exec } from 'child_process';
-import { normalizePath, Notice } from 'obsidian';
-import { fileState } from './fileState';
+import { normalizePath, Notice, TFile } from 'obsidian';
 
 export async function exportSlide(
+  file: TFile,
   ext: 'html' | 'pdf' | 'pptx',
   basePath: string,
   themeDir: string,
 ) {
   const exportDir = normalizePath(`${process.env.USERPROFILE}/Downloads`);
-  const file = fileState.getFile();
   if (!file) return;
   const filePath = normalizePath(`${basePath}/${file.path}`);
   const cmd = `npx -y @marp-team/marp-cli@latest --stdin false --theme-set "${themeDir}" -o "${exportDir}/${file.basename}.${ext}" -- "${filePath}"`;

src/main.ts

@@ -1,5 +1,10 @@
-import { FileSystemAdapter, normalizePath, Notice, Plugin } from 'obsidian';
-import { fileState } from './fileState';
+import {
+  FileSystemAdapter,
+  normalizePath,
+  Notice,
+  Plugin,
+  TFile,
+} from 'obsidian';
 import { MARP_DEFAULT_SETTINGS, MarpPluginSettings } from './settings';
 import { MARP_PREVIEW_VIEW_TYPE, PreviewView } from './preview';
 import { MarpSettingTab } from './settingTab';
@@ -11,26 +16,24 @@ export default class MarpPlugin extends Plugin {
 
   async onload() {
     await this.loadSettings();
-    this.addRibbonIcon('presentation', 'Marp: Open Preview', _ => {
+    this.addRibbonIcon('presentation', 'Marp: Open Preview', async _ => {
       const file = this.app.workspace.activeEditor?.file;
       if (!file)
         return new Notice(
           'Please select the tab for the file you want to view in Marp , and then click this button again.',
           10000,
         );
-      fileState.setFile(file);
-      this.activateView();
+      await this.activateView(file);
     });
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const that = this;
     this.addCommand({
       id: 'open-preview',
       name: 'Open Preview',
-      editorCallback(_editor, ctx) {
+      async editorCallback(_editor, ctx) {
         const file = ctx.file;
         if (!file) return;
-        fileState.setFile(file);
-        that.activateView();
+        await that.activateView(file);
       },
     });
     this.registerView(
@@ -69,21 +72,25 @@ export default class MarpPlugin extends Plugin {
     this.app.workspace.detachLeavesOfType(MARP_PREVIEW_VIEW_TYPE);
   }
 
-  async activateView() {
+  async activateView(file: TFile) {
     this.app.workspace.detachLeavesOfType(MARP_PREVIEW_VIEW_TYPE);
 
     if (this.settings.createNewSplitTab) {
       // create a preview on a new split tab
-      this.app.workspace.getLeaf('split').setViewState({
+      const leaf = this.app.workspace.getLeaf('split');
+      await leaf.setViewState({
         type: MARP_PREVIEW_VIEW_TYPE,
         active: true,
       });
+      await (leaf.view as PreviewView).setState({ file }, {});
     } else {
       // do not create new split tab, just a new tab
-      this.app.workspace.getLeaf('tab').setViewState({
+      const leaf = this.app.workspace.getLeaf('tab');
+      await leaf.setViewState({
         type: MARP_PREVIEW_VIEW_TYPE,
         active: true,
       });
+      await (leaf.view as PreviewView).setState({ file }, {});
     }
   }
 

src/preview.ts

@@ -2,19 +2,26 @@ import {
   FileSystemAdapter,
   ItemView,
   normalizePath,
+  TFile,
+  ViewStateResult,
   WorkspaceLeaf,
 } from 'obsidian';
 import { exportSlide } from './export';
-import { fileState } from './fileState';
 import { marp } from './marp';
 import { MarpPluginSettings } from './settings';
 
 export const MARP_PREVIEW_VIEW_TYPE = 'marp-preview-view';
 
-export class PreviewView extends ItemView {
+interface PreviewViewState {
+  file: TFile | null;
+}
+
+export class PreviewView extends ItemView implements PreviewViewState {
+  file: TFile | null;
   settings: MarpPluginSettings;
   constructor(leaf: WorkspaceLeaf, settings: MarpPluginSettings) {
     super(leaf);
+    this.file = null;
     this.settings = settings;
   }
 
@@ -27,9 +34,8 @@ export class PreviewView extends ItemView {
   }
 
   async renderPreview() {
-    const file = fileState.getFile();
-    if (!file) return;
-    const content = await this.app.vault.cachedRead(file);
+    if (!this.file) return;
+    const content = await this.app.vault.cachedRead(this.file);
     const { html, css } = marp.render(content);
     const doc = new DOMParser().parseFromString(html, 'text/html');
     const container = this.containerEl.children[1];
@@ -38,23 +44,31 @@ export class PreviewView extends ItemView {
     container.createEl('style', { text: css });
   }
 
-  async onOpen() {
-    this.registerEvent(this.app.vault.on('modify', this.onChange.bind(this)));
+  addActions() {
     const basePath = (
       this.app.vault.adapter as FileSystemAdapter
     ).getBasePath();
     const themeDir = normalizePath(`${basePath}/${this.settings.themeDir}`);
-
     this.addAction('download', 'Export as PDF', () => {
-      exportSlide('pdf', basePath, themeDir);
+      if (this.file) {
+        exportSlide(this.file, 'pdf', basePath, themeDir);
+      }
     });
     this.addAction('image', 'Export as PPTX', () => {
-      exportSlide('pptx', basePath, themeDir);
+      if (this.file) {
+        exportSlide(this.file, 'pptx', basePath, themeDir);
+      }
     });
     this.addAction('code-glyph', 'Export as HTML', () => {
-      exportSlide('html', basePath, themeDir);
+      if (this.file) {
+        exportSlide(this.file, 'html', basePath, themeDir);
+      }
     });
-    await this.renderPreview();
+  }
+
+  async onOpen() {
+    this.registerEvent(this.app.vault.on('modify', this.onChange.bind(this)));
+    this.addActions();
   }
 
   async onClose() {
@@ -65,4 +79,18 @@ export class PreviewView extends ItemView {
     if (!this.settings.autoReload) return;
     this.renderPreview();
   }
+
+  async setState(state: PreviewViewState, result: ViewStateResult) {
+    if (state.file) {
+      this.file = state.file;
+    }
+    await this.renderPreview();
+    return super.setState(state, result);
+  }
+
+  getState(): PreviewViewState {
+    return {
+      file: this.file,
+    };
+  }
 }