-
-
Notifications
You must be signed in to change notification settings - Fork 6.7k
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
feat: Make the examples interactive in the documentation site #5376
Conversation
✅ Deploy Preview for mermaid-js ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
9624b8f
to
6bc88e8
Compare
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #5376 +/- ##
===========================================
+ Coverage 44.67% 77.29% +32.62%
===========================================
Files 25 175 +150
Lines 5341 14531 +9190
Branches 27 868 +841
===========================================
+ Hits 2386 11232 +8846
- Misses 2954 3091 +137
- Partials 1 208 +207
Flags with carried forward coverage won't be shown. Click here to find out more. |
Ctrl/Cmd + Enter and a run button is added. The feature was first implemented in #5330. This is a simplified version without introducing additional dependencies. Co-authored-by: Anton <m@antonz.org>
54af21f
to
6422175
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I love this change! It looks great, and I bet it will really help users of the docs experiment (I know it will help me!).
Two issues:
- CTRL + ENTER doesn't seem to do anything (see comment), and
- it looks like
```mermaid-nocode
blocks might be broken, e.g. look at```mermaid-nocode
Current behaviour
Using ```mermaid-nocode
doesn't show the source code of the mermaid diagram:
New behaviour
```mermaid-nocode
shows the source code of a diagram.
IMO, we could even completely remove the ```mermaid-nocode
blocks if you want. I do like them, but if we let users see the source-code of those diagrams, it is additional examples for them.
Support ctrl+enter Support mermaid-nocode Use `contenteditable="plaintext-only"` Co-authored-by: Alois Klink <alois@aloisklink.com>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, thanks for making those changes!
[![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [mermaid](https://togithub.com/mermaid-js/mermaid) | [`10.9.0` -> `10.9.1`](https://renovatebot.com/diffs/npm/mermaid/10.9.0/10.9.1) | [![age](https://developer.mend.io/api/mc/badges/age/npm/mermaid/10.9.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/mermaid/10.9.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/mermaid/10.9.0/10.9.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/mermaid/10.9.0/10.9.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>mermaid-js/mermaid (mermaid)</summary> ### [`v10.9.1`](https://togithub.com/mermaid-js/mermaid/releases/tag/v10.9.1) [Compare Source](https://togithub.com/mermaid-js/mermaid/compare/v10.9.0...v10.9.1) #### What's Changed #### BugFixes - Cleaning of labels in Block diagram by [@​knsv](https://togithub.com/knsv) #### Docs - docs(integrations): update link to Mermaid app for Slack by [@​JackuB](https://togithub.com/JackuB) in [https://github.com/mermaid-js/mermaid/pull/5370](https://togithub.com/mermaid-js/mermaid/pull/5370) - Update new diagram doc to reflect focus on Langium by [@​sidharthv96](https://togithub.com/sidharthv96) in [https://github.com/mermaid-js/mermaid/pull/5372](https://togithub.com/mermaid-js/mermaid/pull/5372) - feat: Make the examples interactive in the documentation site by [@​sidharthv96](https://togithub.com/sidharthv96) in [https://github.com/mermaid-js/mermaid/pull/5376](https://togithub.com/mermaid-js/mermaid/pull/5376) - DOCS: add latest blog posts by [@​huynhicode](https://togithub.com/huynhicode) in [https://github.com/mermaid-js/mermaid/pull/5368](https://togithub.com/mermaid-js/mermaid/pull/5368) - DOCS: update Announcement bar link by [@​huynhicode](https://togithub.com/huynhicode) in [https://github.com/mermaid-js/mermaid/pull/5394](https://togithub.com/mermaid-js/mermaid/pull/5394) - DOCS: Add Press Release by [@​huynhicode](https://togithub.com/huynhicode) in [https://github.com/mermaid-js/mermaid/pull/5400](https://togithub.com/mermaid-js/mermaid/pull/5400) - DOCS: add Turing machine blog post by [@​huynhicode](https://togithub.com/huynhicode) in [https://github.com/mermaid-js/mermaid/pull/5425](https://togithub.com/mermaid-js/mermaid/pull/5425) - DOCS: update latest news by [@​huynhicode](https://togithub.com/huynhicode) in [https://github.com/mermaid-js/mermaid/pull/5455](https://togithub.com/mermaid-js/mermaid/pull/5455) - 📝🐛 fix schema link by [@​dudeofawesome](https://togithub.com/dudeofawesome) in [https://github.com/mermaid-js/mermaid/pull/5456](https://togithub.com/mermaid-js/mermaid/pull/5456) - DOCS: Add AI in Software Diagramming blog post by [@​huynhicode](https://togithub.com/huynhicode) in [https://github.com/mermaid-js/mermaid/pull/5492](https://togithub.com/mermaid-js/mermaid/pull/5492) - DOCS: update Mermaid Chart page by [@​huynhicode](https://togithub.com/huynhicode) in [https://github.com/mermaid-js/mermaid/pull/5495](https://togithub.com/mermaid-js/mermaid/pull/5495) - DOCS: Add blog post - Documentation Software by [@​huynhicode](https://togithub.com/huynhicode) in [https://github.com/mermaid-js/mermaid/pull/5519](https://togithub.com/mermaid-js/mermaid/pull/5519) #### New Contributors - [@​dudeofawesome](https://togithub.com/dudeofawesome) made their first contribution in [https://github.com/mermaid-js/mermaid/pull/5456](https://togithub.com/mermaid-js/mermaid/pull/5456) **Full Changelog**: mermaid-js/mermaid@v10.9.0...v10.9.1 </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/fuxingloh/contented). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4zNTEuMiIsInVwZGF0ZWRJblZlciI6IjM3LjM1MS4yIiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6W119--> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
📑 Summary
Ctrl/Cmd + Enter and a run button is added.
📏 Design Decisions
The feature was first implemented in #5330 by @nalgeon.
This is a simplified version without introducing additional dependencies.
📋 Tasks
Make sure you
MERMAID_RELEASE_VERSION
is used for all new features.master
branch