feat: Make the examples interactive in the documentation site #5376
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for mermaid-js ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
sidharthv96
force-pushed
the
sidv/editableExamples
branch
from
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 <[email protected]>
sidharthv96
force-pushed
the
sidv/editableExamples
branch
from
54af21f to
6422175
Compare
This was referenced Mar 11, 2024
aloisklink
requested changes
Mar 11, 2024
There was a problem hiding this comment.
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-nocodeblocks might be broken, e.g. look at at https://mermaid.js.org/community/contributing.html#initial-setup:
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 <[email protected]>
aloisklink
approved these changes
Mar 11, 2024
fuxingloh
referenced
this pull request
in fuxingloh/contented
May 15, 2024
[](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) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](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>
](https://renovatebot.com){kind=link}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📑 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_VERSIONis used for all new features.masterbranch