javalent / markdown-attributes

Add attributes to elements in Obsidian
MIT License
94 stars 7 forks source link

Embeds with classes applied via Markdown Attributes cause hang in Live Preview mode #14

Closed efrec closed 2 years ago

efrec commented 2 years ago

Describe the bug Minor bug that impacts Live Preview and embeds.

When a CSS class is applied to an embedded internal link, Obsidian locks up when switching to Live Preview mode.

This occurs when switching from either Reading or Source mode and when opening a file when Obsidian remembers being in Live Preview mode. I can avoid the bug happening again after relaunch by changing my default Editor mode back to Source.

Other plugins don't seem to influence this behavior. I can replicate the same problem with all other plugins (except Core) disabled.

Markdown Source I create search queries, dataview tables, etc. in their own files, then embed them inside the notes that need them. The same chart may get reused in different situations, so I add CSS classes to the embeds (via this plugin) rather than on the code notes. This works really, really well except for this bug.

e.g. I have a note with embedded views, @tracking/Habit Tracker.md:

# Yearly Habits | <%+ tp.date.now("YYYY") %>
![[views/Habits - Yearly#^embed]] { .habit-tracker-yearly }

# Weekly Habits | <%+ tp.date.now("[w]WW") %>
![[views/Habits - Weekly#^embed]] { .habit-tracker-weekly }

Which are kept in my views folder and look like:

```dataviewjs
// some code that outputs a single table, graph, etc.

^embed


Here's the CSS, as well.

/ Dataview - Tables /

/ Habit Tracker - Weekly Habits / .internal-embed.habit-tracker-weekly .markdown-embed-link { height: 40px; width: 80px; } .internal-embed.habit-tracker-weekly .table-view-table > thead > tr > th { font-size: smaller !important; } .internal-embed.habit-tracker-weekly .table-view-table

thead tr th .small-text { font-size: x-small !important; font-family: var(--font-monospace) !important; color: var(--text-accent) !important; } .internal-embed.habit-tracker-weekly .table-view-table { max-width: 760px; }

/ Heatmap Calendar /

/ Habit Tracker - Yearly Habits / .internal-embed.habit-tracker-yearly .markdown-embed-link { height: 40px; width: 80px; } .internal-embed.habit-tracker-yearly .heatmap-calendar-graph { height: 115px; min-width: 125px; max-width: 760px; line-height: 1.2em; }



**Screenshots**
Screenshots don't help much w/ a frozen vault. I didn't find an easy way to capture logs of the hang, either.
efrec commented 2 years ago

Just saw the PR. This issue applies to app v0.15.9.

efrec commented 2 years ago

Tested this again following the 1.0 release of Obsidian. Live Preview does seem to behave oddly w/ this plugin, even when it does not cause a hang or a crash, by creating deeply nested spans.

Markdown Attributes Test.md

---
frontmatter: yup
---

# Heading1 {.has-subtitle}

Subtitle
{.subtitle}

# Heading2

Subtitle

View w/ dev console: image

valentine195 commented 2 years ago

hi, this should be fixed in the latest release