@yltrcc/vditor 0.3.1 → 0.3.2

package/src/ts/util/processCode.ts

@@ -56,6 +56,10 @@ export const processPasteCode = (html: string, text: string, type = "sv") => {
 };
 
 export const processCodeRender = (previewPanel: HTMLElement, vditor: IVditor) => {
+    console.log("===== Lute 返回的 HTML (预览前) =====");
+    console.log(previewPanel.outerHTML);
+    console.log("===== 结束 =====\n");
+
     if (!previewPanel) {
         return;
     }
@@ -102,5 +106,167 @@ export const processCodeRender = (previewPanel: HTMLElement, vditor: IVditor) =>
         }
     }
 
+    // 掘金风格代码块增强
+    enhanceCodeBlock(previewPanel, language);
+
     previewPanel.setAttribute("data-render", "1");
 };
+
+const enhanceCodeBlock = (previewPanel: HTMLElement, language: string) => {
+    // 检查是否已经增强过
+    if (previewPanel.getAttribute("data-enhanced") === "1") {
+        return;
+    }
+
+    const preElement = previewPanel.querySelector("pre");
+    if (!preElement) {
+        return;
+    }
+
+    const codeElement = preElement.querySelector("code");
+    if (!codeElement) {
+        return;
+    }
+
+    // 保存原始代码用于复制
+    const rawCode = codeElement.textContent || "";
+
+    // 添加行号
+    const codeLines = rawCode.split("\n");
+    const hasLineNumbers = codeElement.querySelector(".line-numbers");
+    if (!hasLineNumbers && codeLines.length > 0) {
+        const lineNumbersHTML = codeLines.map((_, index) => 
+            `<span class="line-number">${index + 1}</span>`
+        ).join("");
+
+        codeElement.innerHTML = `
+            <div style="display: table;">
+                <div class="line-numbers" style="display: table-cell; padding: 0 12px; text-align: right; border-right: 1px solid #3c3c3c; color: #6a6a6a; font-family: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";; font-size: 14px; line-height: 1.6; user-select: none; min-width: 3em; background: #252526;">
+                    ${codeLines.map((_, index) => `<div>${index + 1}</div>`).join("")}
+                </div>
+                <div class="code-content" style="display: table-cell; padding: 0 12px; font-family: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";; font-size: 14px; line-height: 1.6; color: #d4d4d4;">
+                    ${codeElement.innerHTML}
+                </div>
+            </div>
+        `;
+    }
+
+    // 创建标题栏
+    const headerElement = document.createElement("div");
+    headerElement.className = "vditor-code-header";
+    headerElement.style.cssText = `
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 12px;
+        background: #252526;
+        border-bottom: 1px solid #3c3c3c;
+    `;
+
+    // 左侧：折叠图标和标题
+    const leftElement = document.createElement("div");
+    leftElement.style.cssText = `
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: #9d9d9d;
+        font-size: 12px;
+    `;
+
+    const toggleIcon = document.createElement("span");
+    toggleIcon.textContent = "▼";
+    toggleIcon.style.cssText = `
+        cursor: pointer;
+        transition: transform 0.2s;
+        color: #9d9d9d;
+    `;
+    toggleIcon.title = "折叠/展开";
+
+    const titleElement = document.createElement("span");
+    titleElement.textContent = "代码标题";
+    titleElement.style.cssText = `
+        color: #9d9d9d;
+        font-size: 12px;
+    `;
+
+    leftElement.appendChild(toggleIcon);
+    leftElement.appendChild(titleElement);
+
+    // 右侧：语言标签和复制按钮
+    const rightElement = document.createElement("div");
+    rightElement.style.cssText = `
+        display: flex;
+        align-items: center;
+        gap: 12px;
+    `;
+
+    const langElement = document.createElement("span");
+    langElement.textContent = language || "text";
+    langElement.style.cssText = `
+        color: #4ec9b0;
+        font-weight: 500;
+        font-size: 12px;
+    `;
+
+    const copyButton = document.createElement("span");
+    copyButton.textContent = "复制";
+    copyButton.style.cssText = `
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        color: #9d9d9d;
+        font-size: 12px;
+        cursor: pointer;
+        padding: 4px 8px;
+        border-radius: 4px;
+        transition: all 0.2s;
+    `;
+    copyButton.title = "复制代码";
+
+    copyButton.addEventListener("mouseenter", () => {
+        copyButton.style.color = "#fff";
+        copyButton.style.background = "#3c3c3c";
+    });
+
+    copyButton.addEventListener("mouseleave", () => {
+        copyButton.style.color = "#9d9d9d";
+        copyButton.style.background = "transparent";
+    });
+
+    copyButton.addEventListener("click", () => {
+        navigator.clipboard.writeText(rawCode).then(() => {
+            const originalText = copyButton.textContent;
+            copyButton.textContent = "已复制!";
+            copyButton.style.color = "#4ec9b0";
+            setTimeout(() => {
+                copyButton.textContent = originalText;
+                copyButton.style.color = "#9d9d9d";
+            }, 2000);
+        }).catch(err => {
+            console.error("复制失败:", err);
+        });
+    });
+
+    // 折叠功能
+    let isCollapsed = false;
+    toggleIcon.addEventListener("click", () => {
+        isCollapsed = !isCollapsed;
+        const contentElement = preElement.querySelector("code");
+        if (contentElement) {
+            contentElement.style.display = isCollapsed ? "none" : "block";
+        }
+        toggleIcon.textContent = isCollapsed ? "▶" : "▼";
+    });
+
+    rightElement.appendChild(langElement);
+    rightElement.appendChild(copyButton);
+
+    headerElement.appendChild(leftElement);
+    headerElement.appendChild(rightElement);
+
+    // 插入标题栏
+    previewPanel.insertBefore(headerElement, previewPanel.firstChild);
+
+    // 标记已增强
+    previewPanel.setAttribute("data-enhanced", "1");
+};