Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

HTML escape included mermaid files to handle embedded tags #1580

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

Open
mgranell wants to merge 4 commits into docsifyjs:develop
base: develop
Choose a base branch
Loading
from mgranell:fix-embed-mermaid

Conversation

Copy link

@mgranell mgranell commented May 27, 2021 •
edited by trusktr
Loading

Summary

Fixes an issue where included mermaid files that had embedded tags failed to render, due to the file being included verbatim into the <div> tag, and embedded html within the mermaid file "breaking out" of the div.

e.g. the following mermaid file will fail:

graph TB
 linkStyle default fill:#ffffff
 14["&lt;div style='font-weight: bold'&gt;This will break&lt;/div&gt;&lt;div style='font-size: 70%; margin-top: 0px'&gt;[Software System]&lt;/div&gt;&lt;div style='font-size: 80%; margin-top:10px'&gt;Description&lt;br /&gt;with HTML&lt;/div&gt;"]

What kind of change does this PR introduce?

Bugfix

For any code change,

  • Related documentation has been updated if needed
  • Related tests have been updated or tests have been added
    There are no tests that test in the include functionality

Does this PR introduce a breaking change? (check one)

  • Yes
  • No

Related issue, if any:

Tested in the following browsers:

  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE

Copy link

vercel bot commented May 27, 2021 •
edited
Loading

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/docsify-core/docsify-preview/BuaUAwE3i6YbCAWXNVXXgEERWosw
✅ Preview: https://docsify-preview-git-fork-mgranell-fix-embed-ac6ebc-docsify-core.vercel.app

Copy link

codesandbox-ci bot commented May 27, 2021 •
edited
Loading

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit c539b25:

Sandbox Source
docsify-template Configuration

@sy-records sy-records requested a review from a team May 27, 2021 07:59
Copy link
Author

Test failed due to timeout, not related to change

Copy link
Member

Hi, @mgranell
Can you provide a screenshot of the before and after comparison?
I test here there is no difference.

text: `<div class="mermaid">\n${text
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/"/g, '&quot;')}\n</div>`,
Copy link
Member

@trusktr trusktr Aug 2, 2021

Choose a reason for hiding this comment

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

Maybe we should use a more robust solution like described in the following SO question so that it accounts for other characters, not just those specific ones?

https://stackoverflow.com/questions/18749591/encode-html-entities-in-javascript

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@trusktr trusktr trusktr requested changes

Requested changes must be addressed to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

AltStyle によって変換されたページ (->オリジナル) /