diff --git a/.github/label-commenter-config.yml b/.github/label-commenter-config.yml index 19a196b..bedaa3b 100644 --- a/.github/label-commenter-config.yml +++ b/.github/label-commenter-config.yml @@ -25,7 +25,7 @@ labels: - name: Wontfix labeled: issue: - body: This will not be worked on but we appreciate your contribution. + body: There wasn't enough interest from the team or community to implement this change. Thanks for contributing and we appreciate your understanding. action: close - name: Configurations labeled: diff --git a/source/js/third-party/tags/mermaid.js b/source/js/third-party/tags/mermaid.js index bf45625..06443df 100644 --- a/source/js/third-party/tags/mermaid.js +++ b/source/js/third-party/tags/mermaid.js @@ -7,11 +7,17 @@ document.addEventListener('page:loaded', () => { condition: window.mermaid }).then(() => { mermaidElements.forEach(element => { + const box = document.createElement('div'); + box.className = 'code-container'; const newElement = document.createElement('div'); newElement.innerHTML = element.innerHTML; - newElement.className = element.className; + newElement.className = 'mermaid'; + box.appendChild(newElement); + if (CONFIG.copycode.enable) { + NexT.utils.registerCopyButton(box, box, element.innerText); + } const parent = element.parentNode; - parent.parentNode.replaceChild(newElement, parent); + parent.parentNode.replaceChild(box, parent); }); mermaid.initialize({ theme : CONFIG.darkmode && window.matchMedia('(prefers-color-scheme: dark)').matches ? CONFIG.mermaid.theme.dark : CONFIG.mermaid.theme.light, diff --git a/source/js/utils.js b/source/js/utils.js index 7209139..ce45851 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -39,6 +39,45 @@ NexT.utils = { }); }, + registerCopyButton(target, element, code) { + // One-click copy code support. + target.insertAdjacentHTML('beforeend', '
'); + const button = target.querySelector('.copy-btn'); + button.addEventListener('click', () => { + if (navigator.clipboard) { + // https://caniuse.com/mdn-api_clipboard_writetext + navigator.clipboard.writeText(code).then(() => { + button.querySelector('i').className = 'fa fa-check-circle fa-fw'; + }, () => { + button.querySelector('i').className = 'fa fa-times-circle fa-fw'; + }); + } else { + const ta = document.createElement('textarea'); + ta.style.top = window.scrollY + 'px'; // Prevent page scrolling + ta.style.position = 'absolute'; + ta.style.opacity = '0'; + ta.readOnly = true; + ta.value = code; + document.body.append(ta); + ta.select(); + ta.setSelectionRange(0, code.length); + ta.readOnly = false; + const result = document.execCommand('copy'); + button.querySelector('i').className = result ? 'fa fa-check-circle fa-fw' : 'fa fa-times-circle fa-fw'; + ta.blur(); // For iOS + button.blur(); + document.body.removeChild(ta); + } + }); + // If copycode.style is not mac, element is larger than target + // So we need to accept both of them as parameters + element.addEventListener('mouseleave', () => { + setTimeout(() => { + button.querySelector('i').className = 'fa fa-copy fa-fw'; + }, 300); + }); + }, + registerCodeblock(element) { const inited = !!element; let figure; @@ -48,6 +87,8 @@ NexT.utils = { figure = document.querySelectorAll('pre'); } figure.forEach(element => { + // Skip pre > .mermaid for folding and copy button + if (element.querySelector('.mermaid')) return; if (!inited) { let span = element.querySelectorAll('.code .line span'); if (span.length === 0) { @@ -61,9 +102,7 @@ NexT.utils = { }); } const height = parseInt(window.getComputedStyle(element).height, 10); - // Skip pre > .mermaid for folding but keep the copy button - // Note that it only works before mermaid.js loaded (race condition) - const needFold = CONFIG.fold.enable && (height > CONFIG.fold.height) && !element.querySelector('.mermaid'); + const needFold = CONFIG.fold.enable && (height > CONFIG.fold.height); if (!needFold && !CONFIG.copycode.enable) return; let target; if (CONFIG.hljswrap && CONFIG.copycode.style === 'mac') { @@ -91,43 +130,10 @@ NexT.utils = { target.classList.add('unfold'); }); } - if (inited || !CONFIG.copycode.enable) return; - // One-click copy code support. - target.insertAdjacentHTML('beforeend', '
'); - const button = target.querySelector('.copy-btn'); - button.addEventListener('click', () => { + if (!inited && CONFIG.copycode.enable) { const lines = element.querySelector('.code') || element.querySelector('code'); - const code = lines.innerText; - if (navigator.clipboard) { - // https://caniuse.com/mdn-api_clipboard_writetext - navigator.clipboard.writeText(code).then(() => { - button.querySelector('i').className = 'fa fa-check-circle fa-fw'; - }, () => { - button.querySelector('i').className = 'fa fa-times-circle fa-fw'; - }); - } else { - const ta = document.createElement('textarea'); - ta.style.top = window.scrollY + 'px'; // Prevent page scrolling - ta.style.position = 'absolute'; - ta.style.opacity = '0'; - ta.readOnly = true; - ta.value = code; - document.body.append(ta); - ta.select(); - ta.setSelectionRange(0, code.length); - ta.readOnly = false; - const result = document.execCommand('copy'); - button.querySelector('i').className = result ? 'fa fa-check-circle fa-fw' : 'fa fa-times-circle fa-fw'; - ta.blur(); // For iOS - button.blur(); - document.body.removeChild(ta); - } - }); - element.addEventListener('mouseleave', () => { - setTimeout(() => { - button.querySelector('i').className = 'fa fa-copy fa-fw'; - }, 300); - }); + this.registerCopyButton(target, element, lines.innerText); + } }); }, @@ -162,12 +168,12 @@ NexT.utils = { }, updateActiveNav() { - if (!Array.isArray(NexT.utils.sections)) return; - let index = NexT.utils.sections.findIndex(element => { + if (!Array.isArray(this.sections)) return; + let index = this.sections.findIndex(element => { return element && element.getBoundingClientRect().top > 10; }); if (index === -1) { - index = NexT.utils.sections.length - 1; + index = this.sections.length - 1; } else if (index > 0) { index--; }