@yltrcc/vditor 0.3.1 → 0.3.2

package/dist/index.css

@@ -1,5 +1,5 @@
 /*!
- * Vditor v0.3.1 - A markdown editor written in TypeScript.
+ * Vditor v0.3.2 - A markdown editor written in TypeScript.
  *
  * MIT License
  *
@@ -25,7 +25,7 @@
  *
  */
 /*!
- * Vditor v0.3.1 - A markdown editor written in TypeScript.
+ * Vditor v0.3.2 - A markdown editor written in TypeScript.
  *
  * MIT License
  *
@@ -1399,67 +1399,98 @@
 .vditor-wysiwyg__block {
   position: relative;
 }
-.vditor-wysiwyg__block pre:first-child {
-  display: none;
+.vditor-wysiwyg__block--editing .vditor-wysiwyg__preview {
+  display: none !important;
+}
+.vditor-wysiwyg__block--editing .vditor-wysiwyg__pre {
+  display: block;
   position: relative;
-  margin: 0;
-  padding: 1em;
-  background-color: rgba(0, 0, 0, 0.03);
-  border-radius: 4px;
+  margin: 12px 0;
+  padding: 12px;
+  background-color: #1e1e1e;
+  border-radius: 8px;
   overflow-x: auto;
   cursor: text;
   white-space: initial;
   min-height: 27px;
-  background-size: 20px 20px;
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AgMAAABHkjHhAAAACVBMVEWAgIBaWlo+Pj7rTFvWAAAAA3RSTlMHCAw+VhR4AAAA+klEQVQoz4WSMW7EQAhFPxKWNh2FCx+HkaZI6RRb5DYbyVfIJXLKDCFoMbaTKSw/8ZnPAPjaH2xgZcUNUDADD7D9LtDBCLZ45fbkvo/30K8yeI64pPwl6znd/3n/Oe93P3ho9qeh72btTFzqkz0rsJle8Zr81OLEwZ1dv/713uWqvu2pl+k0fy7MWtj9r/tN5q/02z89qa/L4Dc2LvM93kezPfXlME/O86EbY/V9GB9ePX8G1/6W+/9h1dq/HGfTfzT3j/xNo7522Bfnqe5jO/fvhVthlfk434v3iO9zG/UOphyPeinPl1J8Gtaa7xPTa/Dk+RIs4deMvwGvcGsmsCvJ0AAAAABJRU5ErkJggg==);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
 }
-.vditor-wysiwyg__block pre:first-child code {
+.vditor-wysiwyg__block--editing .vditor-wysiwyg__pre code {
   margin: 0;
-  font-family: var(--code-font-family);
-  font-size: var(--code-font-size);
-  line-height: var(--code-line-height);
-  padding: 0;
-  background-color: transparent !important;
+  padding: 0 !important;
+  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;
+  background-color: transparent;
   border-radius: 0;
-  display: inline;
+  display: block;
   overflow: visible;
   white-space: pre;
   word-break: initial;
   word-wrap: normal;
 }
-.vditor-wysiwyg__block pre:first-child::before {
+.vditor-wysiwyg__block--editing .vditor-wysiwyg__pre::before {
   content: attr(data-language);
   position: absolute;
   top: 0;
   right: 0;
-  padding: 2px 8px;
+  padding: 8px 12px;
   font-size: 12px;
-  color: var(--second-color);
-  background-color: var(--panel-background-color);
-  border-radius: 0 4px 0 4px;
+  color: #4ec9b0;
+  background-color: #252526;
+  border-radius: 0 8px 0 0;
+  border-bottom: 1px solid #3c3c3c;
   z-index: 1;
+  font-weight: 500;
 }
-.vditor-wysiwyg__block pre:first-child:hover {
-  box-shadow: 0 0 0 2px var(--blurColor);
-}
-.vditor-wysiwyg__block pre:first-child:focus {
-  outline: none;
-}
-.vditor-wysiwyg__block pre:last-child {
-  margin-bottom: 1em;
+.vditor-wysiwyg__block:not(.vditor-wysiwyg__block--editing) .vditor-wysiwyg__pre {
+  display: none;
 }
-.vditor-wysiwyg__block--editing pre:first-child {
+.vditor-wysiwyg__block:not(.vditor-wysiwyg__block--editing) .vditor-wysiwyg__preview {
   display: block;
+  position: relative;
+  margin: 12px 0;
+  padding: 12px;
+  background-color: #1e1e1e;
+  border-radius: 8px;
+  overflow-x: auto;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+}
+.vditor-wysiwyg__block:not(.vditor-wysiwyg__block--editing) .vditor-wysiwyg__preview > code {
   margin: 0;
+  padding: 0 !important;
+  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;
+  background: transparent;
+  display: block;
+  white-space: pre;
 }
-.vditor-wysiwyg__block--editing .vditor-wysiwyg__preview {
+.vditor-wysiwyg__block:not(.vditor-wysiwyg__block--editing) .vditor-wysiwyg__preview .vditor-copy {
   display: none;
 }
+.vditor-wysiwyg__block:not(.vditor-wysiwyg__block--editing) .vditor-wysiwyg__preview::before {
+  content: attr(data-language);
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 8px 12px;
+  font-size: 12px;
+  color: #4ec9b0;
+  background-color: #252526;
+  border-radius: 0 8px 0 0;
+  border-bottom: 1px solid #3c3c3c;
+  z-index: 1;
+  font-weight: 500;
+}
 .vditor-wysiwyg__preview {
   cursor: pointer;
   white-space: initial;
   min-height: 27px;
   display: block;
+  margin: 0;
 }
 .vditor-wysiwyg__preview pre {
   margin: 0;
@@ -1467,12 +1498,16 @@
   background-color: var(--code-background-color);
   border-radius: 4px;
   overflow-x: auto;
+  box-sizing: border-box;
 }
 .vditor-wysiwyg__preview pre code {
-  font-family: var(--code-font-family);
-  font-size: var(--code-font-size);
   line-height: var(--code-line-height);
   background-color: transparent !important;
+  display: block;
+  white-space: pre;
+  word-break: initial;
+  word-wrap: normal;
+  box-sizing: border-box;
 }
 .vditor-wysiwyg__preview::before {
   content: attr(data-language);
@@ -1488,6 +1523,25 @@
 .vditor-wysiwyg__preview:hover {
   box-shadow: 0 0 0 2px var(--blurColor);
 }
+.vditor-wysiwyg__pre {
+  margin: 0;
+  padding: 12px;
+  border-radius: 4px;
+  line-height: var(--code-line-height);
+  background-color: var(--panel-background-color);
+}
+.vditor-wysiwyg__pre code {
+  margin: 0;
+  line-height: var(--code-line-height);
+  padding: 0;
+  background-color: transparent !important;
+  border-radius: 0;
+  display: inline;
+  overflow: visible;
+  white-space: pre;
+  word-break: initial;
+  word-wrap: normal;
+}
 .vditor-wysiwyg > .vditor-reset > h1:before,
 .vditor-wysiwyg > .vditor-reset > h2:before,
 .vditor-wysiwyg > .vditor-reset > h3:before,
@@ -1829,6 +1883,48 @@
     content: none;
   }
 }
+/* 掘金风格代码块样式 */
+.vditor-ir .vditor-ir__node[data-type="code-block"] {
+  background: #1e1e1e;
+  border-radius: 8px;
+  overflow: hidden;
+  margin: 12px 0;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+}
+.vditor-ir .vditor-ir__node[data-type="code-block"]::before,
+.vditor-ir .vditor-ir__node[data-type="code-block"]::after {
+  display: none !important;
+}
+.vditor-ir .vditor-ir__node[data-type="code-block"] .vditor-ir__marker {
+  display: none !important;
+}
+.vditor-ir .vditor-ir__node[data-type="code-block"] pre[data-type="code-block-info"],
+.vditor-ir .vditor-ir__node[data-type="code-block"] pre[data-type="code-block-marker"] {
+  display: none !important;
+}
+.vditor-ir .vditor-ir__node[data-type="code-block"] .vditor-ir__preview {
+  display: block;
+  padding: 0;
+  margin: 0;
+  border-radius: 0;
+  position: relative;
+}
+.vditor-ir .vditor-ir__node[data-type="code-block"] .vditor-ir__preview pre {
+  margin: 0;
+  padding: 12px;
+  border-radius: 0;
+  background: transparent;
+  overflow-x: auto;
+}
+.vditor-ir .vditor-ir__node[data-type="code-block"] .vditor-ir__preview code {
+  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;
+  background: transparent;
+  display: block;
+  white-space: pre;
+}
 .vditor-sv {
   font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
   margin: 0 1px 0 0;

package/dist/index.js

@@ -1,5 +1,5 @@
 /*!
- * Vditor v0.3.1 - A markdown editor written in TypeScript.
+ * Vditor v0.3.2 - A markdown editor written in TypeScript.
  *
  * MIT License
  *
@@ -1267,7 +1267,7 @@ var looseJsonParse = function (text) {
 /* harmony export */   Y: () => (/* binding */ Constants),
 /* harmony export */   g: () => (/* binding */ _VDITOR_VERSION)
 /* harmony export */ });
-var _VDITOR_VERSION = "0.3.1";
+var _VDITOR_VERSION = "0.3.2";
 
 var Constants = /** @class */ (function () {
     function Constants() {
@@ -1315,7 +1315,7 @@ var Constants = /** @class */ (function () {
         // 别名
         "js", "ts", "html", "toml", "c#", "bat"
     ];
-    Constants.CDN = "https://unpkg.com/@yltrcc/vditor@".concat("0.3.1");
+    Constants.CDN = "https://unpkg.com/@yltrcc/vditor@".concat("0.3.2");
     Constants.MARKDOWN_OPTIONS = {
         autoSpace: false,
         gfmAutoLink: true,
@@ -5460,6 +5460,9 @@ var processPasteCode = function (html, text, type) {
     return false;
 };
 var processCodeRender = function (previewPanel, vditor) {
+    console.log("===== Lute 返回的 HTML (预览前) =====");
+    console.log(previewPanel.outerHTML);
+    console.log("===== 结束 =====\n");
     if (!previewPanel) {
         return;
     }
@@ -5514,8 +5517,100 @@ var processCodeRender = function (previewPanel, vditor) {
             (0,codeRender/* codeRender */.o)(previewPanel, vditor.options.preview.hljs);
         }
     }
+    // 掘金风格代码块增强
+    enhanceCodeBlock(previewPanel, language);
     previewPanel.setAttribute("data-render", "1");
 };
+var enhanceCodeBlock = function (previewPanel, language) {
+    // 检查是否已经增强过
+    if (previewPanel.getAttribute("data-enhanced") === "1") {
+        return;
+    }
+    var preElement = previewPanel.querySelector("pre");
+    if (!preElement) {
+        return;
+    }
+    var codeElement = preElement.querySelector("code");
+    if (!codeElement) {
+        return;
+    }
+    // 保存原始代码用于复制
+    var rawCode = codeElement.textContent || "";
+    // 添加行号
+    var codeLines = rawCode.split("\n");
+    var hasLineNumbers = codeElement.querySelector(".line-numbers");
+    if (!hasLineNumbers && codeLines.length > 0) {
+        var lineNumbersHTML = codeLines.map(function (_, index) {
+            return "<span class=\"line-number\">".concat(index + 1, "</span>");
+        }).join("");
+        codeElement.innerHTML = "\n            <div style=\"display: table;\">\n                <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;\">\n                    ".concat(codeLines.map(function (_, index) { return "<div>".concat(index + 1, "</div>"); }).join(""), "\n                </div>\n                <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;\">\n                    ").concat(codeElement.innerHTML, "\n                </div>\n            </div>\n        ");
+    }
+    // 创建标题栏
+    var headerElement = document.createElement("div");
+    headerElement.className = "vditor-code-header";
+    headerElement.style.cssText = "\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 8px 12px;\n        background: #252526;\n        border-bottom: 1px solid #3c3c3c;\n    ";
+    // 左侧：折叠图标和标题
+    var leftElement = document.createElement("div");
+    leftElement.style.cssText = "\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        color: #9d9d9d;\n        font-size: 12px;\n    ";
+    var toggleIcon = document.createElement("span");
+    toggleIcon.textContent = "▼";
+    toggleIcon.style.cssText = "\n        cursor: pointer;\n        transition: transform 0.2s;\n        color: #9d9d9d;\n    ";
+    toggleIcon.title = "折叠/展开";
+    var titleElement = document.createElement("span");
+    titleElement.textContent = "代码标题";
+    titleElement.style.cssText = "\n        color: #9d9d9d;\n        font-size: 12px;\n    ";
+    leftElement.appendChild(toggleIcon);
+    leftElement.appendChild(titleElement);
+    // 右侧：语言标签和复制按钮
+    var rightElement = document.createElement("div");
+    rightElement.style.cssText = "\n        display: flex;\n        align-items: center;\n        gap: 12px;\n    ";
+    var langElement = document.createElement("span");
+    langElement.textContent = language || "text";
+    langElement.style.cssText = "\n        color: #4ec9b0;\n        font-weight: 500;\n        font-size: 12px;\n    ";
+    var copyButton = document.createElement("span");
+    copyButton.textContent = "复制";
+    copyButton.style.cssText = "\n        display: flex;\n        align-items: center;\n        gap: 4px;\n        color: #9d9d9d;\n        font-size: 12px;\n        cursor: pointer;\n        padding: 4px 8px;\n        border-radius: 4px;\n        transition: all 0.2s;\n    ";
+    copyButton.title = "复制代码";
+    copyButton.addEventListener("mouseenter", function () {
+        copyButton.style.color = "#fff";
+        copyButton.style.background = "#3c3c3c";
+    });
+    copyButton.addEventListener("mouseleave", function () {
+        copyButton.style.color = "#9d9d9d";
+        copyButton.style.background = "transparent";
+    });
+    copyButton.addEventListener("click", function () {
+        navigator.clipboard.writeText(rawCode).then(function () {
+            var originalText = copyButton.textContent;
+            copyButton.textContent = "已复制!";
+            copyButton.style.color = "#4ec9b0";
+            setTimeout(function () {
+                copyButton.textContent = originalText;
+                copyButton.style.color = "#9d9d9d";
+            }, 2000);
+        }).catch(function (err) {
+            console.error("复制失败:", err);
+        });
+    });
+    // 折叠功能
+    var isCollapsed = false;
+    toggleIcon.addEventListener("click", function () {
+        isCollapsed = !isCollapsed;
+        var 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");
+};
 
 // EXTERNAL MODULE: ./src/ts/util/selection.ts
 var selection = __webpack_require__(183);