Add convert single line button to code block with sql language (#1033)

Author: LJW21-02

src/.vuepress/client.ts

@@ -18,6 +18,7 @@
 
 import { defineDocSearchConfig } from '@vuepress/plugin-docsearch/client';
 import { computed } from 'vue';
+import { onMounted, nextTick } from 'vue';
 import {
   defineClientConfig,
   usePageData,
@@ -52,6 +53,93 @@ export default defineClientConfig({
       lastTo = to.fullPath;
     });
 
+    function addConvertSingleLineButton() {
+      if (typeof document === 'undefined') return;
+
+      const blocks = document.querySelectorAll<HTMLElement>('div[class*="language-sql"] pre');
+      const copyIcon = `<svg t="1773227012571" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7157" width="18px" height="18px"><path d="M860.253405 512.000461a431.238022 431.238022 0 0 0-139.308875-316.862415A40.958141 40.958141 0 1 0 665.702238 255.448908a348.144194 348.144194 0 0 1-202.691598 603.108619l30.718605-30.718605a41.019578 41.019578 0 0 0-57.904571-58.109362l-81.301909 81.301909a56.317443 56.317443 0 0 0 0 79.663583l81.301909 81.301909a40.97862 40.97862 0 0 0 57.955769-57.955769l-14.847326-14.796128A430.674847 430.674847 0 0 0 860.253405 512.000461zM350.01737 254.271362a40.958141 40.958141 0 0 0 57.955768 0l81.301909-81.301909a56.317443 56.317443 0 0 0 0-79.663583L407.973138 12.003961a40.97862 40.97862 0 0 0-57.955768 57.955768l16.74164 16.690443a430.060475 430.060475 0 0 0-227.31768 742.366296A40.958141 40.958141 0 0 0 194.683622 768.552013 348.144194 348.144194 0 0 1 378.688068 167.696092l-28.670698 28.619501a40.958141 40.958141 0 0 0 0 57.955769z" fill="#ffffff" p-id="7158"></path></svg>`;
+      const tipContent = pageData.value.lang === 'zh-CN' ? '已转换为单行' : 'Converted as single line';
+      const hoverTipContent = pageData.value.lang === 'zh-CN' ? '转换为单行' : 'Convert as single line';
+      const copyTipContent = pageData.value.lang === 'zh-CN' ? '复制内容' : 'Copy content';
+
+      blocks.forEach((pre) => {
+        if (pre.querySelector('.copy-one-line-btn')) return;
+
+        const parentEl = pre.parentElement;
+        if (!parentEl) return;
+        const lineNumbers = parentEl.querySelector('div[class="line-numbers"]');
+        if (!lineNumbers) return;
+        const copyBtn = parentEl.querySelector<HTMLElement>('button[class*="vp-copy-code-button"]');
+        if (!copyBtn) return;
+        copyBtn.title = copyTipContent;
+
+        const code = pre.querySelector('code');
+        if (!code) return;
+
+        const copiedTooltip = document.createElement('div');
+        copiedTooltip.className = 'copy-one-line-tooltip';
+        pre.appendChild(copiedTooltip);
+
+        const btn = document.createElement('button');
+        btn.innerHTML = copyIcon;
+        btn.className = 'copy-one-line-btn';
+        btn.title = hoverTipContent;
+
+        btn.onclick = () => {
+          const text = code.innerText;
+          const lines = text.split('\n');
+          
+          const single = lines
+            .map((line, i) => {
+              const trimmed = line.trim();
+              if (!trimmed || trimmed === '') return '';
+              console.log('line', trimmed);
+              if (i === lines.length - 1) return trimmed;
+              if (trimmed.endsWith(';')) {
+                return trimmed + '\n';
+              }
+              if (trimmed.endsWith('\\')) {
+                return trimmed.slice(0, -1) + ' ';
+              }
+              return trimmed + ' ';
+            })
+            .join('');
+
+          const convertedSpan = single.split('\n').map((line) => `<span class="line"><span>${line}\n</span></span>`).join('');  
+          const counter = single.split('\n').length;
+          code.innerHTML = convertedSpan;
+          if (lineNumbers) {
+            const childCount = lineNumbers.children.length;
+            for (let i = counter; i < childCount; i++) {
+              const child = lineNumbers.children[0];
+              lineNumbers.removeChild(child);
+            }
+          }
+
+          btn.style.opacity = '80';
+          btn.style.backgroundColor = 'rgb(47, 53, 66)';
+          copiedTooltip.style.opacity = '100';
+          copiedTooltip.innerText = tipContent;
+
+          setTimeout(() => {
+            btn.style.backgroundColor = '';
+            copiedTooltip.innerText = '';
+            btn.style.visibility = 'hidden';
+            copiedTooltip.style.visibility = 'hidden';
+          }, 1500);
+        };
+        pre.appendChild(btn);
+      });
+    }
+
+    onMounted(() => {
+      nextTick(() => addConvertSingleLineButton());
+    });
+
+    router.afterEach(() => {
+      nextTick(() => addConvertSingleLineButton());
+    });
+
     const docSearchConfig = computed(() => ({
       appId: 'JLT9R2YGAE',
       apiKey: 'f1f30c0df04d74534e066d07786bce05',

src/.vuepress/styles/index.scss

@@ -16,6 +16,56 @@
  * limitations under the License.
  */
 
+.copy-one-line-tooltip {
+  position: absolute;
+  right: 95px;
+  top: 8px;
+  padding: 10px 10px 7px;
+  background-color: rgb(47, 53, 66);
+  border-radius: 8px;
+  opacity: 0;
+  font-family: var(--vp-font);
+  font-size: 13px;
+}
+
+.copy-one-line-btn {
+  position: absolute;
+  right: 50px;
+  top: 8px;
+  padding: 10px 10px 7px;
+  background-color: transparent;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+} 
+
+ .copy-one-line-btn:hover::before {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 4px 8px;
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    font-size: 12px;
+    border-radius: 4px;
+    white-space: nowrap;
+    margin-bottom: 6px;
+    pointer-events: none;
+    z-index: 1000;
+  }
+
+.language-sql pre:hover .copy-one-line-btn {
+  opacity: 0.8;
+}
+
+.copy-one-line-btn:hover {
+  background-color: rgb(47, 53, 66);
+}
+
 #main-description {
   max-width: 55rem;
 }