Persistent text folding in editor

Plugins
1

Hi

This quick plugin allows to fold markdown text by headers:

Peek 2021-03-28 18-29

Update:
v1.2.4

  • Ctrl(or Cmd) + Alt + F to fold all
  • Ctrl(or Cmd) + Alt + U to unfold all

This version fixes bugs and introduces fold/unfold all shortcuts.

v1.2.0 has a way to persist folding !
As for now, it adds dot (".") at the end of header to mark
it as to be fold on load of note.

v1.2.0, should be available soon in Plugins search menu.
Manual download:

25 Likes
2

This will only happen, if the plugin is on npm. And right now it isn't.

1 Like
3

Hi @ambert, this plugin will be very useful regardless of not remembering state when switching to another note and back.

At the minute I can see the arrows by the headers to collapse them, and on mouse-over it changes the mouse pointer to a hand, but on click the headings don't collapse.

Thanks for your other plugin work too, particularly Embed Search

1 Like
4

I'm sure i published it on npm yesterday, maybe there was some dealy.
Screenshot from 2021-03-28 18-39-32

5

Update:
v1.2.0 persists folding. As for now, it automatically adds dot (".") at the end of header to mark it as to be fold on load of note, and removes it when unfolded.

Dot is arbitrary choice, mostly because it occupies little of the visible part of a heading.

1 Like
6

I still can't find it and neither can the script that builds the plugin repo.

https://www.npmjs.com/search?q=joplin-plugin-fold-cm yields no result.

image
image812×304 7.05 KB

7

@ambrt, plugin (1.2.0) working flawlessly here, including remembering state.

In case this information might be useful to you: my previous issue was tracked down to an adjustment I'd made to userchrome.css to limit the width of lines in CodeMirror. Commenting it out allowed the plugin to function as expected.

/*LIMIT NOTE WIDTH WRAP AT 580PX AND CENTRE:::::::::::*/
.CodeMirror-sizer {
  margin-right: auto !important;
  margin-left: auto !important;
  max-width: 580px !important;
}
1 Like
8

I've opened a ticket with npm: npm Status - Packages missing from search results

1 Like
9

Thanks for looking into it.

There are few things on left side of header line that have to be aligned for plugin to know that folding click was made.
So anything that modifies with left margin or left padding might render plugin not usable.

Thanks again for solving it.

1 Like
10

Thanks for opening issue at npm.
Status page says that they have resolved it.

11

@ambrt Good work, thank you!

What do you think of creating a keyboard shortcut or menu icon to expand/restore all collapsed sections for the selected note?

I guess, it also would be nice to have a config option to only temporarily collapse sections in the manner of navigating through a longer note. And when you leave the note, no collapse is persisted.

1 Like
12

Couple of things...

For me (without any custom css I believe) when I open a note that I have folded headings, the arrows in the left gutter all point down. The first time I click on one to unfold it, that one stays pointing down, but the others suddenly point to the right. I am using the CodeMirror Line Numbers v1.0.0 plugin. Joplin 1.7.11 (prod, win32)

Unrelated (I assume) I got the following error
joplynCrash.txt (3.0 KB)
I was in the middle of solving a different problem so I can't be 100% sure, but I believe it happended when I was trying to fold a heading. Also, I was running in safe mode at the time.

Thanks for the plugin!! It's great. Should be a core feature if you ask me.

13

I agree with the shortcut for folding all sections idea, it'll be awesome!

14

Yes, i noted too that plugin works on demo but not for more complicated examples.

And the crash is related to this plugin.

Both things will be addressed in next version (1.2.4) not yet released.

I'm working on new way of auto folding since previous version didn't work on longer notes and had few other collisions.

1 Like
15

I will see what i can do. If there is a way to bind shortcut to CodeMirror plugin it should be doable.

16

@ambrt you can use defineExtension in your content script to create a function that will fold all. Then inside index.ts you will register a command that uses editor.execCommand to call the CodeMirror function to collapse all.
This command can be assigned a hotkey and will be available in the command palette.

1 Like
17

Thanks John, there is an good example

(in case if other developers might wonder how to implement this too)

So just pushed new (1.2.4) version to repository with bug fixed (hopefully) and keyboard shortcuts:

  • Ctrl(or Cmd) + Alt + F to fold all
  • Ctrl(or Cmd) + Alt + U to unfold all

The problem i see with those un/fold all is that i will remove existing structure.
I'm not sure how it will work if someone would want to go back after un/folding.

But it's working :slight_smile:

3 Likes
18

1.2.4 installed and working well. Thanks for a very useful plugin.

I don't know about others, but I wouldn't mind if the arrows were a bit bigger for those times when I need to fold/unfold a specific section.

1 Like
19

I was actually going to mention that as well. The symbol itself is a small triangle. This works for me to make it larger. In userchrome.css:

.CodeMirror-guttermarker-subtle {
	font-size:1.5em;
}

If you add !important you can change the colour as well.

3 Likes
20

Thanks. I got it to be bigger by using 2.5em and functionally it's fine. But visually, it looks a bit odd because the triangle is on top of the "#". Is it possible to make the triangle not overlap at all with the "#"?

Also, can you show me what needs to be written so that the triangle is yellow? Thanks.