Skip to content

fix (components): Navie now properly renders indented code blocks #2287

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 30, 2025

Conversation

dustinbyrne
Copy link
Contributor

This pull request addresses an issue where code blocks enclosed in triple backticks (```) were not rendered correctly if the entire block, including the opening and closing fences, was indented.

Problem:

The previous implementation of stripCodeFences did not account for leading whitespace before the code fences. This resulted in the indentation being incorrectly included as part of the code content, disrupting formatting.

Solution:

The stripCodeFences utility has been refactored to correctly handle indented code blocks:

  1. It now detects the specific amount of leading whitespace (indentation) present on the line with the opening code fence (```).
  2. It removes the opening and closing fence lines.
  3. It then removes the exact indentation detected in step 1 from the beginning of each line within the code block's content. This preserves relative indentation within the block while removing the block's overall indentation relative to its container.
  4. The logic has been broken down into smaller, testable helper functions for clarity and robustness.

Testing:

Comprehensive unit tests have been added for the updated utility and its helper functions, covering various scenarios including:

  • Blocks with and without fences.
  • Differing levels of indentation on opening/closing fences and content lines.
  • Empty blocks or blocks with only fences.
  • Edge cases like single-line inputs and empty strings.
  • Preservation of internal empty lines and relative indentation.

@dustinbyrne dustinbyrne changed the title fix: Navie now properly renders indented code blocks fix (components): Navie now properly renders indented code blocks Apr 28, 2025
@dustinbyrne dustinbyrne requested a review from Copilot April 30, 2025 17:15
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR fixes an issue whereby code blocks indented along with their fences were rendered with extra indentation. The changes refactor the stripCodeFences utility into smaller helper functions and add comprehensive tests for various edge cases.

  • Refactored and documented stripCodeFences, removeFenceLines, and dedentLines.
  • Improved test coverage for code block parsing.
  • Minor test file cleanups in the MermaidDiagram component.

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File Description
packages/components/tests/unit/lib/stripCodeFences.spec.js Added extensive tests for the new code fence parsing logic.
packages/components/tests/unit/chat/MermaidDiagram.spec.js Removed unused import and updated expected values for external links.
packages/components/src/lib/stripCodeFences.ts Refactored utility functions with added documentation and updated logic to properly handle indented code fences.
Comments suppressed due to low confidence (1)

packages/components/src/lib/stripCodeFences.ts:25

  • [nitpick] Consider refactoring the closing fence detection logic into a separate, clearly named function or adding extra inline comments to clarify the conditions used, which can improve readability and future maintainability.
const closingMatch = (lines.length > 1 || !openingMatch) ? lines[lines.length - 1].match(fenceRegex) : null;

@github-advanced-security
Copy link

This pull request sets up GitHub code scanning for this repository. Once the scans have completed and the checks have passed, the analysis results for this pull request branch will appear on this overview. Once you merge this pull request, the 'Security' tab will show more code scanning analysis results (for example, for the default branch). Depending on your configuration and choice of analysis tool, future pull requests will be annotated with code scanning analysis results. For more information about GitHub code scanning, check out the documentation.

@dustinbyrne dustinbyrne merged commit 4c295e9 into main Apr 30, 2025
29 checks passed
@dustinbyrne dustinbyrne deleted the fix/render-indented-codeblocks branch April 30, 2025 18:14
@appland-release
Copy link
Contributor

🎉 This PR is included in version @appland/components-v4.46.4 🎉

The release is available on:

  • @appland/components-v4.46.4
  • GitHub release
  • @appland/components-v4.46.4

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants