Boostnote: Add collapsible code blocks

[ReK42]

I do network recon and use Boostnote to track the progress and results. That often involves pasting command line output and device config files into the note as code blocks. These blocks, especially the configs, can be hundreds of lines long.

It would make the note much more readable if code blocks were collapsible when viewing the note, especially if blocks over a certain length (10-15 lines) defaulted to being collapsed.

There is a $60.00 open bounty on this issue. Add more on Issuehunt.

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on Issuehunt to raise funds.

[daiyam]

@ReK42 I'm also in need of collapsible block so I will implement that today or tomorrow...

Here the syntax I plan to use:

%>## Title
%>
%>foobar
%>
%>```
%> print "Hello world!"
%>```

What do you think?

[ReK42]

@daiyam so each line would need to be prefaced with "%>"? Would it be possible to do it as a block instead, so each line does not need to be modifed? Something like:

%>
## Title

foobar

\```
print "Hello world!"
\```
%>

[daiyam]

@ReK42 Yes, prefaced by %> like blockquotes.

[ReK42]

@daiyam is a syntax change required at all? I envisioned this as a UI change when the markdown is rendered: all code blocks are collapsible and either all, or just ones with >10 lines, default to being collapsed.

As mentioned, these blocks can reach hundreds of lines. Requiring the user to add a couple characters to the beginning of every line is a significant burden. If a syntax change is required, can a start/end tag be used instead, like how the triple backtick for code blocks currently works?

Edit: Another alternative would be to limit the size of rendered code blocks to 10-15 lines and include a vertical scrollbar to navigate within them.

[ReK42]

Looking into it, it appears you're using CodeMirror to render these blocks. CodeMirror has built-in support for dynamic height. Right now the height is always set to auto, which will show the full contents. The collapsing could be implemented by adding a collapse icon above/next to the block and having the onclick toggle the height between auto and a fixed value. There should probably also be a hidden overlay that becomes visible when collapsed and provides a visual hint to the user that there is more content.

[daiyam]

@ReK42 sorry, we are talking about 2 different features, my bad 😢
You are looking to collapse all or a part of only the code blocks.
That wouldn't need any syntax changes; only some extra settings.
Do you have an example/code of what you are looking for?

[ReK42]

@daiyam I've attached a quick PoC I drew up. The important bits are all in index.html:

• The style element at line 12285
• The script element at line 12343
• The added button element inside the span.filename element of the code block, at line 12382

boostnote-poc.zip

[daiyam]

@ReK42 what do you think of the following preferences ?

[ReK42]

@daiyam yes, that looks great!

[daiyam]

@ReK42 I've implemented it in the PR #2471.

[ReK42]

@daiyam thanks! I've tested it and posted a few issues in the PR thread.

[thorro]

Killer feature for me. Any progress?

[daiyam]

@thorro I would need to split my PR to just collapse code blocks.

[IssueHuntBot]

@boostio has funded $60.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[matheusfaustino]

What I nice feature to have, please.