From 32ca0b97fc0c08bf1f13b215b624cacc8aaf1eca Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 11 Mar 2024 14:07:41 +0530 Subject: [PATCH 1/3] feat: Make the examples interactive in the documentation site. Ctrl/Cmd + Enter and a run button is added. The feature was first implemented in https://github.com/mermaid-js/mermaid/pull/5330. This is a simplified version without introducing additional dependencies. Co-authored-by: Anton --- .../docs/.vitepress/mermaid-markdown-all.ts | 15 +---- .../src/docs/.vitepress/theme/Mermaid.vue | 64 +++++++++++++++++-- 2 files changed, 60 insertions(+), 19 deletions(-) diff --git a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts index 30f044d988..643ce395e9 100644 --- a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts +++ b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts @@ -18,20 +18,7 @@ const MermaidExample = async (md: MarkdownRenderer) => { 'Missing MarkdownIt highlight function (should be automatically created by vitepress' ); } - - // doing ```mermaid-example {line-numbers=5 highlight=14-17} is not supported - const langAttrs = ''; - return ` -
Code:
-
- - mermaid - ${ - // html is pre-escaped by the highlight function - // (it also adds `v-pre` to ignore Vue template syntax) - md.options.highlight(token.content, 'mermaid', langAttrs) - } -
`; + return ''; } else if (token.info.trim() === 'mermaid') { const key = index; return ` diff --git a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue index 5012d30679..ee99bc8841 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue +++ b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue @@ -1,4 +1,14 @@ @@ -18,15 +28,29 @@ const props = defineProps({ }); const svg = ref(''); +const code = ref(decodeURIComponent(props.graph)); +const ctrlSymbol = ref(navigator.platform.includes('Mac') ? '⌘' : 'Ctrl'); +const editableContent = ref(null); + let mut = null; +const updateCode = (event) => { + code.value = event.target.innerText; +}; + onMounted(async () => { mut = new MutationObserver(() => renderChart()); mut.observe(document.documentElement, { attributes: true }); + + // Set the initial value of the contenteditable element + // We cannot bind using `{{ code }}` because it will rerender the whole component + // when the value changes, shifting the cursor when enter is used + editableContent.value.textContent = code.value; + await renderChart(); //refresh images on first render - const hasImages = //.exec(decodeURIComponent(props.graph))?.length > 0; + const hasImages = //.exec(code.value)?.length > 0; if (hasImages) setTimeout(() => { let imgElements = document.getElementsByTagName('img'); @@ -51,16 +75,14 @@ onMounted(async () => { onUnmounted(() => mut.disconnect()); const renderChart = async () => { - console.log('rendering chart' + props.id + props.graph); + console.log('rendering chart' + props.id + code.value); const hasDarkClass = document.documentElement.classList.contains('dark'); const mermaidConfig = { securityLevel: 'loose', startOnLoad: false, theme: hasDarkClass ? 'dark' : 'default', }; - - console.log({ mermaidConfig }); - let svgCode = await render(props.id, decodeURIComponent(props.graph), mermaidConfig); + let svgCode = await render(props.id, code.value, mermaidConfig); // This is a hack to force v-html to re-render, otherwise the diagram disappears // when **switching themes** or **reloading the page**. // The cause is that the diagram is deleted during rendering (out of Vue's knowledge). @@ -70,3 +92,35 @@ const renderChart = async () => { svg.value = `${svgCode} ${salt}`; }; + + From 6422175ef24eb4435967e7bac063c09123e0ced6 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 11 Mar 2024 14:52:08 +0530 Subject: [PATCH 2/3] Change run symbol --- packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue index ee99bc8841..59a5bbba97 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue +++ b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue @@ -6,7 +6,7 @@
{{ ctrlSymbol }} + Enter| - +
From 08a7f662ea305c19efb950b893933f6b0f0350f9 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 11 Mar 2024 17:03:26 +0530 Subject: [PATCH 3/3] Address review comments Support ctrl+enter Support mermaid-nocode Use `contenteditable="plaintext-only"` Co-authored-by: Alois Klink --- packages/mermaid/scripts/docs.mts | 5 +-- .../docs/.vitepress/mermaid-markdown-all.ts | 32 ++++++------------- .../src/docs/.vitepress/theme/Mermaid.vue | 32 ++++++++++++------- 3 files changed, 32 insertions(+), 37 deletions(-) diff --git a/packages/mermaid/scripts/docs.mts b/packages/mermaid/scripts/docs.mts index 42e299c54f..31d2a7c8fd 100644 --- a/packages/mermaid/scripts/docs.mts +++ b/packages/mermaid/scripts/docs.mts @@ -252,11 +252,12 @@ export function transformMarkdownAst({ node.lang = MERMAID_KEYWORD; return [node]; } else if (MERMAID_EXAMPLE_KEYWORDS.includes(node.lang)) { - // Return 2 nodes: + // If Vitepress, return only the original node with the language now set to 'mermaid-example' (will be rendered using custom renderer) + // Else Return 2 nodes: // 1. the original node with the language now set to 'mermaid-example' (will be rendered as code), and // 2. a copy of the original node with the language set to 'mermaid' (will be rendered as a diagram) node.lang = MERMAID_CODE_ONLY_KEYWORD; - return [node, Object.assign({}, node, { lang: MERMAID_KEYWORD })]; + return vitepress ? [node] : [node, Object.assign({}, node, { lang: MERMAID_KEYWORD })]; } // Transform these blocks into block quotes. diff --git a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts index 643ce395e9..64a069b4c2 100644 --- a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts +++ b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts @@ -9,22 +9,15 @@ const MermaidExample = async (md: MarkdownRenderer) => { md.renderer.rules.fence = (tokens, index, options, env, slf) => { const token = tokens[index]; - - if (token.info.trim() === 'mermaid-example') { - if (!md.options.highlight) { - // this function is always created by vitepress, but we need to check it - // anyway to make TypeScript happy - throw new Error( - 'Missing MarkdownIt highlight function (should be automatically created by vitepress' - ); - } - return ''; - } else if (token.info.trim() === 'mermaid') { + const language = token.info.trim(); + if (language.startsWith('mermaid')) { const key = index; return ` `; - } - if (token.info.trim() === 'warning') { + } else if (language === 'warning') { return `

WARNING

${token.content}}

`; - } - - if (token.info.trim() === 'note') { + } else if (language === 'note') { return `

NOTE

${token.content}}

`; - } - - if (token.info.trim() === 'regexp') { + } else if (language === 'regexp') { // shiki doesn't yet support regexp code blocks, but the javascript // one still makes RegExes look good token.info = 'javascript'; // use trimEnd to move trailing `\n` outside if the JavaScript regex `/` block token.content = `/${token.content.trimEnd()}/\n`; return defaultRenderer(tokens, index, options, env, slf); - } - - if (token.info.trim() === 'jison') { + } else if (language === 'jison') { return `
jison diff --git a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue index 59a5bbba97..a4fb9bf049 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue +++ b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue @@ -1,12 +1,14 @@