Collapse content in WYSIWYG editor based on Headers

Hi,

I found there were answers about the Markdown code sections, but apparently nothing with the WYSIWYG result.

Most notes apps can now collapse text based on Headers - that means no additional code.

In Joplin, it doesn’t exist.

  • some plugins make it possible, but only in the Markdown code editor
  • some seem to make it possible, but more like a “spoiler” thing, with additional code

The feature I’d like to request is to make this possible with no additional code, just based on Header structure. With long pages of structured notes, it’s something that really becomes handy to focus.

3 Likes

I’d love this too. Seems like a basic feature to have.

As a note, my plugin, Collapsible blocks, does add support for automatically making headers collapsible in the unreleased in-development version. It does so without any additional markdown, and is visually extremely unobtrusive.

I’ve additionally already had it on my todo list to investigate if I can make this work in the WYSIWYG editor - up until now I’ve completely ignored that editor in my plugins. I can’t guarantee success on that front, due to a total lack of familiarity with what it’s capable of, but we’ll see. I do not have a timeline for when I expect a release - my coding comes in inconsistent bursts and I’m easily distracted.

The header-based collapsing code is actually already working (in the webview), but I’m like 60-70% through a different feature that will continue to delay release for a bit longer. That other feature is allowing for the markdown-defined collapsible blocks to collapse in the editor as well as the webview - plus a bunch of polish and refactoring.


Out of curiosity, what’s your expectation for whether header-based collapsible sections should “remember” if you left them opened or closed when you leave the note then come back to it later? Should all header-based collapsibles always start open, or should they remember how you last left them?

I had been mulling over whether to add in a way for them to remember, but wasn’t really happy with any potential solutions I was able to come up with. Is that something I should give more thought to, or not really a big deal?

Also, apologies in advance if I fail when I move on to trying to get it all to work in the WYSIWYG editor. I don’t use that editor myself and don’t know its capabilities, and so far as I’m aware my blocks currently render in it, but aren’t functional.

1 Like

These developments sound very useful, look forward to see how it goes.

Thanks for the work.

1 Like

Unfortunately, I did make efforts to see if I could support the WYSIWYG editor, and I failed. I feel reasonably certain that it’s actually not possible to make a working collapsible block in that editor. If anyone can show otherwise I would be very interested in seeing.

The rest of the new stuff is very close to done, but I also hit a motivational brick wall and haven’t touched it in about 5 days - hopefully I’ll get back to it soon and finish it up for release.

2 Likes

I am very much looking forward to this enhancement. I hope it can remember open/closed status. And otherwise mirror how Obsidian handles it.

As of right now it does not remember open/closed status - I still don’t know a way to do that without doing something unfortunate like appending a :{}: to the end of the header line. I’ll continue to give it more thought though

I’ve never actually used Obsidian - how do they handle it? I do have it so collapsing one header will also collapse headers below it of a lesser tier, if that’s what you meant.

If you wanna test, I do have the in-development version on Github now here - you’d just need to download the .jpl file in the publish folder, and select it when choosing to install a plugin from file in Joplin, which you can access by clicking the cog near the ‘Manage your plugins’ text. Note though that I put no special effort into making these versions stable or polished or anything like that - it’s literally just wherever I left off when I was last working on it.

1 Like

Trying out your in-development version of the plugin here (I do understand it's not your finished work).

I'm so delighted with what you've done! Being able to collapse the headers in the rendered view, and also the content fenced by your plugin in the markdown editor (which I use heavily), makes it so much easier to focus on the content you need when navigating long notes. I'm finding both this and click to copy span really useful day to day. Great work.

Bravo! :clap:

1 Like

Assisted by Gemini:

Folding Headings and Lists: By default, Obsidian allows you to fold (collapse) content under a heading or an indented list. A small arrow appears next to the heading or list item, and clicking it hides or reveals the text below. You can also use the Command palette to "Fold all headings and lists" or "Unfold all headings and lists."

Obsidian remembers the fold (collapsed) status of your headings and lists by storing the information outside of the Markdown file itself.

Here is how the mechanism works:

Local Storage: The fold state is stored in the application's local storage, which is specific to the device and the Obsidian installation.

Data Structure: The information saved is generally a record of which line ranges or blocks in a specific file are currently folded. This data is associated with your note's file path.

Persistence: Because this data is stored in local storage, the fold status is remembered even if you close and re-open the note, or if you restart the Obsidian application on that same device.

Since this state is stored locally, the fold status does not automatically sync across different devices (like from your desktop to your mobile phone) even if you use Obsidian Sync or another cloud service to sync your vault files. The note's folding state is a device-specific setting.