Hi. I am building a plugin for Notion-Like tables. The goal of my plugin is to have a table that renders in preview mode from markdown on the same leaf as existing text. For example, if I have a markdown file called Test.md with the contents:
This is some text
This is some text
| Column 1 |
|---|
| Table row |
This is some text
This some text
I want the table to be rendered in preview mode and retain the text surrounding it. I notice that the Obsidian plugin tutorial suggests using an ItemView but this won’t work for the purpose that I am desiring since it doesn’t support live preview.
To achieve this functionality, currently I am using registerMarkdownPostProcessor and replacing the HTML element with an element that renders a React.JS table.
Here is some pseudo code:
class MyPlugin extends Plugin {
async onload(){
this.registerMarkdownPostProcessor((element, context) => {
const table = element.getElementsByTagName("table");
if (table.length === 1) {
context.addChild(
new Table(table[0])
);
}
});
}
}
class Table extends MarkdownRenderChild {
el: HTMLElement;
constructor(containerEl: HTMLElement){
super(containerEl);
}
async onload(){
this.el = this.containerEl.createEl("div");
ReactDOM.render(
<App/>,
this.el
);
}
this.containerEl.replaceWith(this.el);
}
}
I got things working but there are several issues I cannot solve.
#1. If a user has a markdown table like I wrote above and enables my plugin, nothing will update until the user edits their file. Is there a way to make the post processor run the first time the plugin is loaded?
#2 When I disable my plugin, it appears that registerMarkdownPostProcessor doesn’t fully clean up. The CSS is gone but my components are still being rendered. The components will go away once I edit the text.
#3 For live preview functionality, I would like clicking on my table to not return to markdown, unless I click the “Edit This Block” button. Is there a way that I can add this functionality?
#4 My plugin also uses app.vault.modify(file, content) to edit the file the markdown while a user uses the interface. I notice with live preview that doing this will cause the table to jump back to markdown mode but I would like it to still render my table. Is there a way to disable this?
EDIT:
I am now thinking that for #1 and #2 I could write to the file onload and unload to force the hook to run, although I think that is kind of hacky.
