Fix multiple `<svg>` and missing content issue #2722

AgentHagu · 2025-05-30T09:14:15Z

What is the purpose of this pull request?

Overview of changes:
Fixes #2715

The code updates MarkBind's existing patch of live-server to account for the number of <svg>s in the HTML file and adjusts the Content-Length header accordingly.

Anything you'd like to highlight/discuss:
Thanks to @gerteck for finding the root cause and a fix for it.

The root cause of the issue was the code injection within the live-server package. It would normally detect <body>, <svg> or <head> and inject the <script> for live-server there. It would also increase the Content-Length by the length of the injected code.

The issue came about because of the use of es.replace(). According to the event-stream npm page, rather than replacing just the first occurrence, it replaces all matching occurrences. This meant that when a file had multiple <svg>s, it would inject code into all of them but only increase the Content-Length once. This lead to the resulting HTML response being cutoff and causing missing content.

Testing instructions:

Run npm run build:backend
Create a panel such as

<panel src="./test.md" />

In the file test.md, include a codeblock, such as:

```
Test
```

You should see this

Add the codeBlockCopyButtons and codeBlockWrapButtons plugins (or replace the codeblock with >2 <svg>s)
Verify that all content is shown as expected after the codeblock (or <svg>s)

Proposed commit message: (wrap lines at 72 characters)
Fix multiple <svg> and missing content issue

live-server injects code into every <svg> occurrence but only
increases the Content-Length value once. This commit fixes this
issue by counting the number of <svg> and increasing the
Content-Length accordingly, ensuring that all content is properly
sent.

Checklist: ☑️

Updated the documentation for feature additions and enhancements
Added tests for bug fixes or features
Linked all related issues
No unrelated changes

Reviewer checklist:

Indicate the SEMVER impact of the PR:

Major (when you make incompatible API changes)
Minor (when you add functionality in a backward compatible manner)
Patch (when you make backward compatible bug fixes)

At the end of the review, please label the PR with the appropriate label: r.Major, r.Minor, r.Patch.

Breaking change release note preparation (if applicable):

To be included in the release note for any feature that is made obsolete/breaking

Give a brief explanation note about:

what was the old feature that was made obsolete

any replacement feature (if any), and

how the author should modify his website to migrate from the old feature to the replacement feature (if possible).

codecov · 2025-05-30T09:16:59Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 52.84%. Comparing base (9c33eb4) to head (c51d973).
Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff            @@
##           master    #2722    +/-   ##
========================================
  Coverage   52.84%   52.84%            
========================================
  Files         130      130            
  Lines        7162     7162            
  Branches     1503     1572    +69     
========================================
  Hits         3785     3785            
- Misses       3072     3222   +150     
+ Partials      305      155   -150

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copilot

Pull Request Overview

This PR fixes an issue with multiple elements triggering redundant code injection, resulting in an incorrect Content-Length header that causes missing content in HTML responses.

Adjusts the regex for matching tags to count all occurrences
Corrects the Content-Length calculation by multiplying the injection code length by the number of matches

packages/cli/src/lib/live-server/index.js

gerteck

This PR addresses the cause of HTML content being cut-off when being served by live-server, specifically in the case where there are more than 1 <svg> files.

Some things to perhaps consider beyond the scope of this PR or project:

If my understanding is correct, the original package implementation only intended to inject the svg script once, but inadvertently injected multiple duplicate scripts. This fix accounts for this side effect of duplicate injection, but does not inherently resolve the duplicate injection.
- (Which could have performance impacts in some small edge cases, e.g. 999x <svg> served in a html file)
In the event that the original package is updated to resolve this issue, it will have to manually updated through MarkBind's patch in this file, which should be made known to future maintainers that may read this PR.

Overall, this PR successfully resolves the bug through the existing patch of the live-server package. LGTM. Thank you for your help! @AgentHagu

packages/cli/src/lib/live-server/index.js

damithc · 2025-06-15T06:23:06Z

@AgentHagu @gerteck Thanks for this fix. Shall we do release a minor version including this fix (and any other recent/ready fixes)? I'm still waiting to upgrade to V6 due to this issue.

gerteck · 2025-06-15T15:06:58Z

@AgentHagu @gerteck Thanks for this fix. Shall we do release a minor version including this fix (and any other recent/ready fixes)? I'm still waiting to upgrade to V6 due to this issue.

Will follow up on this! I think I will need to get the appropriate permissions on NPM to make a new release

damithc · 2025-06-18T12:12:24Z

I think I will need to get the appropriate permissions on NPM to make a new release

@lhw-1 @tlylt Can help with this?

damithc · 2025-06-19T07:45:15Z

Tried v6.0.1. #2715 seems to be fixed now. Thanks everyone!

Fix bug with mulitple svgs

bedd5e9

AgentHagu changed the title ~~Fix issue of multiple <svg>s and missing content~~ Fix multiple <svg> and missing content issue May 30, 2025

damithc requested a review from Copilot May 30, 2025 13:13

Copilot AI reviewed May 30, 2025

View reviewed changes

packages/cli/src/lib/live-server/index.js Outdated Show resolved Hide resolved

packages/cli/src/lib/live-server/index.js Outdated Show resolved Hide resolved

Clean up small nits

c51d973

gerteck approved these changes Jun 1, 2025

View reviewed changes

packages/cli/src/lib/live-server/index.js Show resolved Hide resolved

packages/cli/src/lib/live-server/index.js Show resolved Hide resolved

packages/cli/src/lib/live-server/index.js Show resolved Hide resolved

packages/cli/src/lib/live-server/index.js Show resolved Hide resolved

gerteck merged commit 1014aad into MarkBind:master Jun 3, 2025
11 checks passed

github-actions bot added the r.Patch Version resolver: increment by 0.0.1 label Jun 3, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix multiple `<svg>` and missing content issue #2722

Fix multiple `<svg>` and missing content issue #2722

Uh oh!

AgentHagu commented May 30, 2025 •

edited by gerteck

Loading

Uh oh!

codecov bot commented May 30, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

gerteck left a comment •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

damithc commented Jun 15, 2025

Uh oh!

gerteck commented Jun 15, 2025

Uh oh!

damithc commented Jun 18, 2025

Uh oh!

damithc commented Jun 19, 2025

Uh oh!

Uh oh!

Fix multiple <svg> and missing content issue #2722

Fix multiple <svg> and missing content issue #2722

Uh oh!

Conversation

AgentHagu commented May 30, 2025 • edited by gerteck Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented May 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

Uh oh!

gerteck left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

damithc commented Jun 15, 2025

Uh oh!

gerteck commented Jun 15, 2025

Uh oh!

damithc commented Jun 18, 2025

Uh oh!

damithc commented Jun 19, 2025

Uh oh!

Uh oh!

Fix multiple `<svg>` and missing content issue #2722

Fix multiple `<svg>` and missing content issue #2722

AgentHagu commented May 30, 2025 •

edited by gerteck

Loading

codecov bot commented May 30, 2025 •

edited

Loading

gerteck left a comment •

edited

Loading