From 0ca60318f8dfe979753dd3fbe48d65b6e6eae926 Mon Sep 17 00:00:00 2001 From: Ellpeck Date: Fri, 9 Aug 2024 19:24:10 +0200 Subject: [PATCH] improve async rendering code --- src/main.ts | 15 +++++---------- src/tracker.ts | 16 ++++++++-------- test-vault/test-markdown.md | 2 +- 3 files changed, 14 insertions(+), 19 deletions(-) diff --git a/src/main.ts b/src/main.ts index a4f5d61..422d233 100644 --- a/src/main.ts +++ b/src/main.ts @@ -21,28 +21,23 @@ export default class SimpleTimeTrackerPlugin extends Plugin { this.addSettingTab(new SimpleTimeTrackerSettingsTab(this.app, this)); - this.registerMarkdownCodeBlockProcessor("simple-time-tracker", (s, e, i) => { + this.registerMarkdownCodeBlockProcessor("simple-time-tracker", async (s, e, i) => { e.empty(); let component = new MarkdownRenderChild(e); let tracker = loadTracker(s); - // Initial file name + // Wrap file name in a function since it can change let filePath = i.sourcePath; - - // Getter passed to displayTracker since the file name can change const getFile = () => filePath; // Hook rename events to update the file path - const renameEventRef = this.app.vault.on("rename", (file, oldPath) => { + component.registerEvent(this.app.vault.on("rename", (file, oldPath) => { if (file instanceof TFile && oldPath === filePath) { filePath = file.path; } - }); + })); - // Register the event to remove on unload - component.registerEvent(renameEventRef); - - displayTracker(tracker, e, getFile, () => i.getSectionInfo(e), this.settings, component); + await displayTracker(tracker, e, getFile, () => i.getSectionInfo(e), this.settings, component); i.addChild(component); }); diff --git a/src/tracker.ts b/src/tracker.ts index 5970468..633c805 100644 --- a/src/tracker.ts +++ b/src/tracker.ts @@ -69,7 +69,7 @@ export async function loadAllTrackers(fileName: string): Promise<{ section: Mark type GetFile = () => string; -export function displayTracker(tracker: Tracker, element: HTMLElement, getFile: GetFile, getSectionInfo: () => MarkdownSectionInformation, settings: SimpleTimeTrackerSettings, component: MarkdownRenderChild): void { +export async function displayTracker(tracker: Tracker, element: HTMLElement, getFile: GetFile, getSectionInfo: () => MarkdownSectionInformation, settings: SimpleTimeTrackerSettings, component: MarkdownRenderChild): Promise { element.addClass("simple-time-tracker-container"); // add start/stop controls @@ -112,7 +112,7 @@ export function displayTracker(tracker: Tracker, element: HTMLElement, getFile: createEl("th")); for (let entry of orderedEntries(tracker.entries, settings)) - addEditableTableRow(tracker, entry, table, newSegmentNameBox, running, getFile, getSectionInfo, settings, 0, component); + await addEditableTableRow(tracker, entry, table, newSegmentNameBox, running, getFile, getSectionInfo, settings, 0, component); // add copy buttons let buttons = element.createEl("div", { cls: "simple-time-tracker-bottom" }); @@ -334,7 +334,7 @@ function createTableSection(entry: Entry, settings: SimpleTimeTrackerSettings): return ret; } -function addEditableTableRow(tracker: Tracker, entry: Entry, table: HTMLTableElement, newSegmentNameBox: TextComponent, trackerRunning: boolean, getFile: GetFile, getSectionInfo: () => MarkdownSectionInformation, settings: SimpleTimeTrackerSettings, indent: number, component: MarkdownRenderChild): void { +async function addEditableTableRow(tracker: Tracker, entry: Entry, table: HTMLTableElement, newSegmentNameBox: TextComponent, trackerRunning: boolean, getFile: GetFile, getSectionInfo: () => MarkdownSectionInformation, settings: SimpleTimeTrackerSettings, indent: number, component: MarkdownRenderChild): Promise { let entryRunning = getRunningEntry(tracker.entries) == entry; let row = table.createEl("tr"); @@ -344,7 +344,7 @@ function addEditableTableRow(tracker: Tracker, entry: Entry, table: HTMLTableEle row.createEl("td", { text: entry.endTime || entry.subEntries ? formatDuration(getDuration(entry), settings) : "" }); - renderNameAsMarkdown(nameField.label, getFile, component); + await renderNameAsMarkdown(nameField.label, getFile, component); let expandButton = new ButtonComponent(nameField.label) .setClass("clickable-icon") @@ -389,7 +389,7 @@ function addEditableTableRow(tracker: Tracker, entry: Entry, table: HTMLTableEle await saveTracker(tracker, getFile(), getSectionInfo()); editButton.setIcon("lucide-pencil"); - renderNameAsMarkdown(nameField.label, getFile, component); + await renderNameAsMarkdown(nameField.label, getFile, component); } else { nameField.beginEdit(entry.name); expandButton.buttonEl.style.display = "none"; @@ -421,7 +421,7 @@ function addEditableTableRow(tracker: Tracker, entry: Entry, table: HTMLTableEle if (entry.subEntries && !entry.collapsed) { for (let sub of orderedEntries(entry.subEntries, settings)) - addEditableTableRow(tracker, sub, table, newSegmentNameBox, trackerRunning, getFile, getSectionInfo, settings, indent + 1, component); + await addEditableTableRow(tracker, sub, table, newSegmentNameBox, trackerRunning, getFile, getSectionInfo, settings, indent + 1, component); } } @@ -432,8 +432,8 @@ function showConfirm(message: string): Promise { }); } -function renderNameAsMarkdown(label: HTMLSpanElement, getFile: GetFile, component: Component): void { - void MarkdownRenderer.renderMarkdown(label.innerHTML, label, getFile(), component); +async function renderNameAsMarkdown(label: HTMLSpanElement, getFile: GetFile, component: Component): Promise { + await MarkdownRenderer.renderMarkdown(label.innerHTML, label, getFile(), component); // rendering wraps it in a paragraph label.innerHTML = label.querySelector("p").innerHTML; } diff --git a/test-vault/test-markdown.md b/test-vault/test-markdown.md index ecabbee..663c1e7 100644 --- a/test-vault/test-markdown.md +++ b/test-vault/test-markdown.md @@ -1,5 +1,5 @@ Tested for #tag, *italic*, [link](test2), etc: ```simple-time-tracker -{"entries":[{"name":"`Segment 1`","startTime":"2022-09-27T19:51:18.000Z","endTime":"2022-09-27T19:51:24.000Z"},{"name":"Segment 2","startTime":"2022-09-27T19:51:25.000Z","endTime":"2022-09-27T19:51:26.000Z"},{"name":"#tag Seqment 3 *add* #tag1 text","startTime":null,"endTime":null,"subEntries":[{"name":"Part 1 #tagp1","startTime":"2024-03-17T11:16:00.382Z","endTime":"2024-03-17T11:16:15.966Z","subEntries":null},{"name":"Part 3","startTime":"2024-03-17T11:17:08.000Z","endTime":"2024-03-17T11:17:24.000Z","subEntries":null}],"collapsed":true},{"name":"#tag3 Segment 4","startTime":null,"endTime":null,"subEntries":[{"name":"Part 1 #tag4","startTime":"2024-03-17T12:22:04.000Z","endTime":"2024-03-17T12:22:16.000Z","subEntries":null},{"name":"#tag5 Part 2 *italic*","startTime":"2024-03-17T12:22:20.000Z","endTime":"2024-03-17T12:22:24.000Z","subEntries":null}]},{"name":"*italic* Segment 5 #tag6 [test2](test2)","startTime":"2024-03-17T12:40:37.000Z","endTime":"2024-03-17T12:40:45.000Z","subEntries":null},{"name":"Segment 6","startTime":"2024-03-27T13:20:56.000Z","endTime":"2024-08-09T16:27:18.029Z","subEntries":null}]} +{"entries":[{"name":"`Segment 1`","startTime":"2022-09-27T19:51:18.000Z","endTime":"2022-09-27T19:51:24.000Z"},{"name":"Segment 2","startTime":"2022-09-27T19:51:25.000Z","endTime":"2022-09-27T19:51:26.000Z"},{"name":"#tag Seqment 3 *add* #tag1 text","startTime":null,"endTime":null,"subEntries":[{"name":"Part 1 #tagp1","startTime":"2024-03-17T11:16:00.382Z","endTime":"2024-03-17T11:16:15.966Z","subEntries":null},{"name":"Part 3","startTime":"2024-03-17T11:17:08.000Z","endTime":"2024-03-17T11:17:24.000Z","subEntries":null}],"collapsed":true},{"name":"#tag3 Segment 4","startTime":null,"endTime":null,"subEntries":[{"name":"Part 1 #tag4","startTime":"2024-03-17T12:22:04.000Z","endTime":"2024-03-17T12:22:16.000Z","subEntries":null},{"name":"#tag5 Part 2 *italic*","startTime":"2024-03-17T12:22:20.000Z","endTime":"2024-03-17T12:22:24.000Z","subEntries":null}],"collapsed":true},{"name":"*italic* Segment 5 #tag6 [test2](test2)","startTime":"2024-03-17T12:40:37.000Z","endTime":"2024-03-17T12:40:45.000Z","subEntries":null},{"name":"Segment 6","startTime":"2024-03-27T13:20:56.000Z","endTime":"2024-08-09T16:27:18.029Z","subEntries":null}]} ```