Plugin: Collapsible Sections

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

New dev release :slightly_smiling_face:

It’s getting close now. This fixes a lot of inconsistencies and off-by-one errors that existed previously, and fixes the issues with headings inside of collapsible blocks. It also changes the color scheme for nested blocks.

I am aware that on mobile, headings currently don’t work in the webview at all unless you first open then back out of the editor. I am also aware that a couple of the settings don’t function properly - like if you have the option to remember the state of blocks enabled, but the option to keep the webview and editor in sync disabled, then it won’t remember the state of blocks. Any issues beyond those, I am very eager to hear about.

I don’t have colors enabled myself, so I’m open to feedback on the new default color scheme. I’m also somewhat considering removing the option to not keep the editor and webview in sync with each other… Kinda feels like I made a web of options that keeps getting tangled.

I’ve learned my lesson about giving any sort of ETA - I know what’s causing the mobile issue but fixing it in an adequate way may prove challenging. And then just trying out every combination of settings to make sure everything works how it should will take a while. And the readme will need a huge revision. Then there’s my extremely inconsistent cadence on working on this. But this is definitely feeling close to me.

1 Like

Looking forward to installing this today. Thanks for your continuing work on it! :glowing_star:

For me at any rate keeping the two views in sync is not a key feature. And if it untangles your code and makes it easier to maintain and work on, it does seem a good way to go?

1 Like

Welcome :grin: It’s actually the opposite I was considering - keeping them in sync by default with no option to not keep them in sync. It’s an option that only mostly just matters on desktop in split view. But a good portion of the code I consider jankiest is there to support that feature in particular, so removing it would probably be easier - but something about opening or closing a section in one view and having the other view mirror it just feels really good to me.

I’ll figure that out when I start trying to untangle the settings web though - it’s mostly an issue because I focused on getting things to work without connecting them to the settings until now. Maybe it won’t be so bad?

The mobile issue, on the other hand, I still don’t even have a plan of attack for yet :eyes:

Ah! I missed that crucial word not! I don't use split view here, but keyboard shortcut back and forward between markdown and rendered view. I can see how the mirroring would be a nice thing for users of split view, probably not critical since they can still collapse either view easily. I'm not sure why anyone would set the sync preference to 'don't sync' (unless to resolve an issue)?

A final thought, headers inside blocks are not essential, as nested collapsible blocks serve organisation within blocks very well? Headers outside are already collapsible with your plugin—so it might not be a great loss if it was specified for the plugin not to use headers within the blocks, possibly might simplify the complexities you encounter?

The previous dev version I've been using day to day, and it works pretty well and is extremely useful. I'll see how I get on with this latest.

All good stuff, thanks for all your work!

(Oh, the change in colours of nested blocks is for the better and seems a good choice)

1 Like

Headers inside of blocks are actually already fully fixed in this update so far as I know :blush: Though that particular fix is what led to the current mobile issue. I do really like that capability, in any case - it lets each block kind of act like it’s own little note in some sense. It’s definitely here to stay.

I might have a fix in mind for mobile at this point. I’ll test it out at some point in the coming days, unless I think of a better way in the mean time.

1 Like

Another dev release

This one fixes all of the known mobile issues - all that’s really left on the todo list is sorting out the issues with settings, and redoing the readme. I would have skipped this dev release and waited until those things were done for the full release - but it’s been so long since desktop and mobile both worked all the way at the same time, I didn’t want to risk the remaining changes breaking one of them again. Enjoy!

1 Like