Part of text goes missing when nested inside panel(s)

[damithc]

I noticed the following when I was checking for regressions in v6.

In v5:

In v6, the last part of this section goes missing:

If I access the page directly (https://nus-cs2103-ay2425s2.github.io/website/book/uml/classDiagrams/associations/roles/) there is no issue in both v5 and v6.

I can reproduce the problem with the following minimal code.

This code works:

<box>

aaa
</box>

<box>

bbb

</box>

But if I enclose aaa inside a fenced code block (as shown below), the second box goes missing.

I expect this will be particularly nasty to debug :-p

[damithc]

Another case of the same issue:

[gerteck]

#2684

Seems to be related to the two plugins for the copy and wrap code block, will investigate further.

[gerteck]

See TLDR last line.

Interestingly, on some investigation, this seems to be an issue with the live-server package used to serve the website on development. Live-server is used in MarkBind for markbind serve, particularly for it's hot reload functionality.

I am noticing the exact same issue that was posted on live-server repo in 2018 (See github.com/tapio/live-server/issues/272, copy and paste the link). The issue notes that when there are multiple inline svg's (in this case are the svg's from the code copy and code wrap text block, both icons being svgs), the live-server injects code and somehow causes the returned code to be cut off.

This seems to be the reason why retriever.vue gets this cut-off html content, leading to the panel being cut off.

Here are two interesting test examples to that are relevant:

1. I deployed the page on github here (LEFT) and also served the same site locally with markbind serve (RIGHT). Notice that the one hosted on github pages has no issue with the cut-off content. However, the one served locally has the content cut off. Both have the same source code here. This suggests the issue is present when running locally with hot-reload, but does not occur when hosted online.

2. If I remove one of the two plugins (E.g. either codeBlockCopyButtons, or WrapButtons, or both), then there will not be 'multiple' inline SVG's, and the issue of cut off content is not present anymore when running locally. This corroborates with the issue description posted in live-server.

TLDR: Bug seems to be because of a known, posted bug/issue from live-server dependency used in markbind serve for hot reload, which has not been fixed since 2018.

• Can explore workaround / further investigate to determine what is the best way to fix this.

[damithc]

Thanks for looking into this, @gerteck
The fact that the problem doesn't occur in the deployed version reduces the severity of the bug somewhat. Given the bug seems to originate outside of MarkBind means it will be hard for us to fix it 'properly'.

But yes, it may still be useful if we can find a workaround. Otherwise authors will need to deploy a version 'seemingly broken' version and hope it works. It will also be hard for them to author without a way to preview -- i.e., use in a 'deploy to preview' workflow.

I wonder if disabling one of the problematic plugins in preview mode is a viable workaround. For example, copy-code-block plugin is not that useful while a user is authoring a site.

[gerteck]

Yeap! I think that as the issue is coming from a dependency it is a bit tough to fix properly.

One workaround I thought of could possibly be to fork the package, merging in the fix (since there seems to already be a working PR fix for it, but it is not being merged in), and publishing a scoped version to npm. Then, test to see if it resolves the issue and temporarily use the scoped package until the fix is merged in the original package repository.

Disabling something like the copy-code-block plugin in preview mode could also be possible, I was also thinking about finding out what change was made during v5->v6 that triggered this issue as it wasn't an issue before (like a git bisect 😆) to craft some workaround, but that may not resolve the root cause.

Edit: Actually, I am not sure if the PR will fix the issue, will investigate
Edit2: I realized that MarkBind has its own patch for live-server in the code
Edit3: I realized that we can patch the internal version of the live-server that is being used, without affecting any current dependencies, which should resolve the issue. (``packages\cli\src\lib\live-server\index.js`)

@AgentHagu are you familiar with how the live-server markbind patch works, as you did some recent changes to file?
I tried this fix 9dee154 and it seemed to work and fix the issue.

[AgentHagu]

@AgentHagu are you familiar with how the live-server markbind patch works, as you did some recent changes to file?
I tried this fix 9dee154 and it seemed to work and fix the issue.

Hi, regarding the fix, I've tested it on my end and it seems to fix the issue. If we need to push an urgent fix, we can go with that for now. I'm still investigating the issue myself to better understand how the injection is affecting the content.

EDIT: After investigating, it just looks like es.replace(from, to) replaces all occurrences of from with to rather than just the first occurrence, which leads to the Content-Length being wrong. The fix you suggested should directly address the root cause of the issue by counting the number of <svg> and hence injections to accurately adjust the Content-Length header.

Great job on finding and fixing the root cause of the issue!