BoostIO/Boostnote

Do you want to work on this issue?

You can request for a bounty in order to promote it!


1 active bounty request

$40.00
Solve someone else's bounty request by clicking on it and completing the funding to earn additional credits

Add collapsible code blocks #2425

ReK42 posted onGitHub

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.


@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?

posted by daiyam over 6 years ago

@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!"
\```
%>
posted by ReK42 over 6 years ago

@ReK42 Yes, prefaced by %> like blockquotes.

posted by daiyam over 6 years ago

@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.

posted by ReK42 over 6 years ago

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.

posted by ReK42 over 6 years ago

@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?

posted by daiyam over 6 years ago

@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

posted by ReK42 over 6 years ago

@ReK42 what do you think of the following preferences ?

screenshot

screenshot

posted by daiyam over 6 years ago

@daiyam yes, that looks great!

posted by ReK42 over 6 years ago

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

posted by daiyam over 6 years ago

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

posted by ReK42 over 6 years ago

Killer feature for me. Any progress?

posted by thorro over 6 years ago

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

posted by daiyam over 6 years ago

@boostio has funded $60.00 to this issue.


posted by IssueHuntBot almost 6 years ago

What I nice feature to have, please.

posted by matheusfaustino almost 6 years ago

Fund this Issue

$60.00
Funded
Only logged in users can fund an issue

Pull requests

Recent activities

daiyam submitted an output to  BoostIo/ Boostnote# 2425
almost 6 years ago
boostio funded 60.00 for BoostIo/Boostnote# 2425
almost 6 years ago