Plugin: Collapsible blocks

Already it's very useful! And thanks for your goodwill in sharing!

A killer feature for me in the latest version was the ability to collapse headers in rendered view. That's a feature I never found elsewhere. I went back to the stable version, as code rendering in the blocks was mis-rendering as markdown.

Still daily using your Copy-Span and Collapsible-Blocks, very nice additions to Joplin!

Look after yourself :waving_hand:

1 Like

Could you give an example of what was causing this bug? I wasn’t able to reproduce it just now, but it sounds similar to a bug I remember encountering a few months ago, that I forgot to write down and then forgot how to reproduce :eyes: I may not be the most organized.

I do have plans to make the headers (have the option to) remember whether they were opened/closed, as was requested by someone in another thread. I haven’t started on that yet though, and I’m expecting the solution I have in mind to only work on desktop, not mobile, which I don’t like but it’s better than nothing. I’d also like to make the headers collapsible in the editor. Honestly I can’t say I’m super pleased with the current state of the plugin, and I’ve considered just starting it over from scratch - but that seems like a good way to make sure the next release just never happens at all.

The only workaround is use Joplin mobile web app as PWA instead of the app from damn App Store.

Joplin Mobile web app (app.joplincloud.com/) (as PWA through Safari).

Here I describe one of known limitations of such approach:

Hi @ntczkjfg

I meant in your dev version in the webview the little arrow added to right of headers, giving the ability to collapse header content by clicking on the headers—that was an excellent aid in navigation long notes in the reading view! :glowing_star:

The bug seems to be caused by any header appearing before a code block with content bounded by your fences. Here is a note to demonstrate:

Collapsible Block 1.9.0 - header breaks following code blocks.md (478 Bytes)

Happy to test any changes you make as time goes by. :waving_hand:

1 Like

@johano Thanks for the test note :blush: I’m on the wrong machine to test this right now but it should be super useful later on. I’m thinking I might release the next version as a bugfixed version of the dev version you tried so something is out, then see if I can get through some major rewrites after that. Maybe I should finish up letting headers collapse in the editor and remember their state, as well.

@executed That’s not quite what I meant about issues with mobile - I use Android and don’t have an iOS device. But the solution I had in mind for remembering if headings were left open or not, without adding any extra data to notes, was to save an external file that stored that information. I remembered earlier in this plugin’s development that the API offers some functionality like that, and I very briefly tested it out, before finding it didn’t work on mobile, at which point I moved on to other things.

But… Rereading the API now, I don’t think I noticed the joplin.data.userDataGet options before, and they seem perfectly up to the task - I’ll have to test out if that works on mobile.

Blockquote

1 Like

I've pushed another dev release, the first in a while. As a reminder, no special care is put toward making these releases stable.

Changelog from previous dev release:

  • Makes headings collapsible in the editor (they already were in the webview) (this doesn’t yet have its own setting, but can be toggled with the ā€˜Allow collapsing blocks within the markdown editor as well’ setting)
  • Fixes the bug reported by @johano where lines starting with # within code blocks appearing after headers were interpreted as headers in the webview
  • Fixes a different bug where collapsible sections could be formed within code blocks in the editor
  • Fixes a different different bug where headers with just text above them would get swallowed by the paragraph rule in the webview

I'm a little hopeful that I might continue with it this time - most of the remaining work is on the collapsible headings. I'd like to connect them up between the editor and webview the same way the regular collapsible blocks are, and add the capability to remember if they were left opened or closed. It probably needs a lot of bug testing too. After this update is complete I do still plan to freeze any future feature releases until I’ve had a chance to majorly refactor basically everything to a state that doesn’t make me sad.

2 Likes

Looking forward to checking this out. :slightly_smiling_face:

1 Like

Let me know if you find any issues :slightly_smiling_face: The note you sent about the last bug was instrumental. I don’t want to promise anything but I’m hoping to keep the momentum up and finish things relatively quickly now that I’ve started again.

First thanks for this further development :heart:

Feedback on latest dev version:

It's working very well with the desktop app. Even with complicated long notes, I haven't seen issues. With the improvements over the last stable version, this is workable day to day for me. I will leave it installed unless some unforeseen bug comes to light. I've given it a bit of a stress test and it's held up well! :slightly_smiling_face:

I used to use a lot the closing }:}: fence, but am finding it redundant now as the in-development plugin does a very job at respecting collpased/expanded state, and remembering that state—whether set in the markdown editor or the webview, and keeps it across quitting and reopening Joplin.

This are the settings I'm finding optimal for now:

Settings

āœ“ Color blocks in the editor
āœ“ Color blocks in the webview

Start and end tokens: defaults

āœ“ Remember when collapsible blocks are left opened or closed in the webview

Editor Block indentation level: 15

Number of nested layers: 5 (in practice I've never used more than 3)

āœ“ Enable header-based collapsing
āœ“ Allow collapsing blocks within the markdown editor as well
āœ“ Match editor folding to webview folding on initial note load
āœ“ Keep editor and webview folding in sync

With the Android app (on Pixel 7) in the markdown editor the collapse and expand arrows show, but:

  • When clicked they raise the keyboard and remain in the same state
  • If the states are changed in the webview, on returning to the markdown editor the arrows indicating state have not changed to reflect the state in the webview

Simply disabling the Allow collapsing blocks in the markdown editor as well allows continued use without any other issue so far. Being able to collapse the headers in the webview definitely make it worthwhile keeping it installed instead of the last stable version.

Great work!

Joplin Desktop Details

Joplin 3.5.6 (prod, linux)

Device: linux, Intel(R) Core(TM) i3-7020U CPU @ 2.30GHz
Client ID: 615c7880d02145c5a89371d6264bdcb9
Sync Version: 3
Profile Version: 49
Keychain Supported: No
Alternative instance ID: -

Revision: ffb3276

Backup: 1.4.4
Bidirectional Links: 0.2.1
Chat GPT Search: 1.0.0
Click to copy: 1.4.1
CodeMirror 6 snippets: 0.1.0
Collapsible blocks: 1.9.0
Conflict Resolution: 1.2.3
Copy as HTML: 1.4.2
Copy Code Blocks: 2.1.0
Create and go to tags and @notebooks: 1.3.7
Csv Import: 1.0.1
Cursor Sync: 2.1.0
Diff view: 0.3.1
Embed Search: 2.0.0
Enhancement: 1.2.1
Extra Markdown editor settings: 1.11.0
Freehand Drawing: 3.1.0
Github Alerts: 1.0.5
Home Note: 2.1.2
Hotfolder: 1.2.2
Inline tags: 1.3.0
Insert YouTube Video: 1.3.0
Joplin Batch: 0.2.2
Joplin Calendar: 1.2.0
Joplin DDDot: 0.4.4
Joplin debug tool: 0.3.0
joplin-note-email: 1.0.5
Markdown Emoji Autocomplete: 1.1.0
Markdown Prettier: 0.1.0
Markdown Table: Colorize: 1.2.0
Markdown Table: Sortable: 1.3.0
Markmap: 1.7.0
Note Tabs: 1.4.0
Outline: 1.5.15
Paste as Markdown: 1.1.1
Persistent Editor Layout: 2.2.0
PlantUML2: 1.11.0
Reset Checkboxes: 1.1.2
Tagging: 1.0.3
Templates: 3.0.0
VS-Code Style Note Search: 0.2.2

Joplin Android Details

Joplin Mobile 3.4.7 (prod, android)

Device: android
Client ID: 7511d24ec46c464896b2bfd962a61b8d
Sync Version: 3
Profile Version: 48
Keychain Supported: No
Alternative instance ID: -

Revision: 44ac26130 (release-3.4)

Bidirectional Links: 0.2.1
Click to copy: 1.4.1
CodeMirror 6 snippets: 0.1.0
Collapsible blocks: 1.9.0
Copy Code Blocks: 2.1.0
Diff view: 0.3.1
Editor Themes: 1.0.2
Embed Search: 2.0.0
Extra Markdown editor settings: 1.11.0
Github Alerts: 1.0.5
Inline tags: 1.3.0
Joplin Batch: 0.2.2
Joplin Calendar: 1.2.0
Markdown Table: Colorize: 1.2.0
Outline: 1.5.15
Reset Checkboxes: 1.1.2
Templates: 3.0.0

Android API level: 36
WebView version: 142.0.7444.102
WebView package: com.google.android.webview
FTS enabled: 1
Hermes enabled: 1

1 Like

I’ve pushed another dev release - as a warning, I would consider this release more feature-complete than the last one, but probably less stable (I might’ve even missed removing some testing code - I tried to get it all though). Things have been progressing and I see no reason to expect a multi-month delay this time around.

This update connects the headings up to three new options in Settings to control whether they appear in the editor, whether they appear in the webview, and whether their open/closed state is remembered. They do not have their own option to sync between the two views, and will instead follow the pre-existing option for that. This is mostly because I wanted to avoid overcrowding the settings page and I figured nobody would want to have one type of collapsible sync but not the other type.

I also removed the option for regular collapsible blocks to sync between the editor and webview only on initial note load. There was honestly no real reason I removed this other than that it seemed super niche and the settings page was kinda crowded - if anyone used and really liked this option just let me know, but I’ve got a feeling probably literally nobody used it.

The main blockers at this point are the mobile issues @johano reported - thanks for how thorough you were. I’ve spent a lot of time investigating those issues and haven’t fully figured out or solved them but I have made some bits of progress.

I also haven’t done the promised recoloring yet for when colors are enabled.

Once I fix the mobile issues I intend to move on to polish and bug-seeking for a bit then release. I am aware there’s a little bit of jank in some situations when closing headings in the editor, and for whatever reason the setting to remember heading states doesn’t 100% update when changed, until Joplin is restarted.

2 Likes

@ntczkjfg, using your latest dev version for the last several days, on both a phone and Linux desktop. All options are enabled on the desktop, but with the collapsible feature in the markdown editor disabled on Android.

Appears stable, with no surprises.

:+1:

1 Like

Hey that’s great to hear, thanks :slightly_smiling_face:

In the mean time I’ve actually (mostly) fixed the Android issues, but doing so required a surprising amount of changes so now I’m working on fixing some regressions. But I think things are trending in the right direction for sure.

1 Like

I'm finding your plugin extremely useful day to day.

It was a pleasant surprised to see in the markdown editor, that markdown headers also could be collapsed and expanded within your fenced blocks (I don't think that was in the previous dev version, if I'm remembering correctly)—that their state is not remembered is of little consequence, it is of good help when editing rambling notes with long collapsible blocks embedded. :slightly_smiling_face:

The state of the fenced blocks created by your plugin are remembered well and that seems pretty solid.

Look forward to any future work you may do!

1 Like

That’s actually not something I coded in on purpose, nor is it something that occurred to me - and on testing it out, doing so actually seems to break the containing block in the webview

That said I like the feature too so I’ll aim to polish it up for sure - including making sure the collapsible heading does not extend beyond the bounds of the collapsible block it’s contained within. I could see a lot of edge cases here, hopefully they won’t take too long

1 Like