Feature Request | Better Semi-Fold | My code attached

[LeCheenaX]

Issue Description

In the original semi-fold rules, the code blocks without enough lines will be completely folded.

• If your code block doesn't have minimum required lines, then it will fold as until now.
• If your code block does have the minimum required line (count of visible lines + 4 for fading effect), then it will semi-fold.

This seems to be brief in some cases, however, it may introduce difficulty reading some simple codes:

• Collapsed codes
  
• Uncollapsed codes
  
  Personally, I would prefer the latter uncollapsed code than the former.

Targets Description

Under some circumstances, I want these simple codes to be readable (unfolded) while the lengthy codes to be semi-folded.

• If my code block doesn't have minimum required lines, then it will not be folded at all.
• If my code block does have the minimum required line (count of visible lines + 4 for fading effect), then it will semi-fold.
  

Of course, I can manually add unfold on these simple code blocks to achieve my goal.

But it would be much better if we can add a user choice to decide if we want the simple codes to be folded or not.

Workaround 1

Manually add unfold on these short code blocks to achieve my goal. But this is not the best approach.

Workaround 2

I manually modified the main.js to achieve my goal. However, I will not submit a pull request because it will externally changed the behavior of semi-fold.

It would be best if we can have an additional setting to control the behavior to semi-fold on short codeblocks.

Below is the code I modified, all modified place has a comment that contains Lex Test:

1. On line 27573, change behavior from collapsed to semi-collapsed

      if (codeblockLineCount >= visibleLines + fadeOutLineCount) {
        preElements.classList.add(`codeblock-customizer-codeblock-semi-collapsed`);
     } else
        preElements.classList.add(`codeblock-customizer-codeblock-semi-collapsed`); // Lex Test0, change collapsed to semi collapsed. 

2. On line 28255, change behavior from collapsed to semi-collapsed

      if (linesLength >= visibleLines + fadeOutLineCount) {
        preElement == null ? void 0 : preElement.classList.add("codeblock-customizer-codeblock-semi-collapsed");
      } else
        preElement == null ? void 0 : preElement.classList.add("codeblock-customizer-codeblock-semi-collapsed"); // Lex Test0, change collapsed to semi collapsed. 

3. On line 28263, change behavior from collapsed to semi-collapsed

      if (linesLength >= visibleLines + fadeOutLineCount) {
        preElement == null ? void 0 : preElement.classList.remove("codeblock-customizer-codeblock-semi-collapsed");
      } else
        preElement == null ? void 0 : preElement.classList.remove("codeblock-customizer-codeblock-semi-collapsed"); // Lex Test0, change collapsed to semi collapsed. 

4. On line 29942, deleted addFolderDecoration behavior of default state

      if (lineCount >= settings.SelectedTheme.settings.semiFold.visibleLines + fadeOutLineCount + 2) {
        const ranges = getRanges(state, start.from, end.to, settings.SelectedTheme.settings.semiFold.visibleLines);
        const decos = addFadeOutEffect(null, state, ranges, settings.SelectedTheme.settings.semiFold.visibleLines, null);
        for (const { from, to, decoration } of decos || []) {
          builder.add(from, to, decoration);
        }
      } else {
         //Do nothing, this controls to collapse code, modified by Lex Test. Original behavior: addFoldDecoration(start.from, end.to)
      }

5. On line 30182, added the situation that does nothing when Semi-Fold is enabled but the lines are short.

      if (fold || settings2.SelectedTheme.settings.codeblock.inverseFold && !isDefaultUnFold) {
        if (enableSemiFold && lineCount >= visibleLines + fadeOutLineCount + 2) {
          const ranges = getRanges(view.state, start.from, end.to, settings2.SelectedTheme.settings.semiFold.visibleLines);
          const Pos = view.domAtPos(start.from);
          let headerElement = null;
          if (Pos) {
            headerElement = Pos.node.previousElementSibling;
          }
          addFadeOutEffect(headerElement, view.state, ranges, settings2.SelectedTheme.settings.semiFold.visibleLines, view);
        } else if (enableSemiFold) {
        }// Do nothing Modified by Lex Test
          else{
          changes.push(Collapse.of(import_view.Decoration.replace({ block: true }).range(start.from, end.to)));
        }

I am not a very professional coder so my modification may be imperfect. Below is the attachment of modified file.
main_js.zip

[mugiwara85]

Sorry for the late reply. Please do not edit the main.js file itself. That is a compiled file from the actual source code (.ts files).
I don't really understand what your proposed Workaround 2 should do? What is the problem with unfold? That is an option which everyone can decide to use or not? Can you describe what do you want to achieve?

[mugiwara85]

Did not receive any reply....