@yltrcc/vditor 0.1.0 → 0.2.0

package/dist/index.css

@@ -1,5 +1,5 @@
 /*!
- * Vditor v0.1.0 - A markdown editor written in TypeScript.
+ * Vditor v0.2.0 - A markdown editor written in TypeScript.
  *
  * MIT License
  *
@@ -25,7 +25,7 @@
  *
  */
 /*!
- * Vditor v0.1.0 - A markdown editor written in TypeScript.
+ * Vditor v0.2.0 - A markdown editor written in TypeScript.
  *
  * MIT License
  *
@@ -1400,19 +1400,57 @@
   position: relative;
 }
 .vditor-wysiwyg__block pre:first-child {
-  margin-bottom: -1em;
   display: none;
+  position: relative;
+  margin: 0;
+  padding: 1em;
+  background-color: rgba(0, 0, 0, 0.03);
+  border-radius: 4px;
+  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==);
 }
 .vditor-wysiwyg__block pre:first-child code {
-  color: var(--textarea-text-color);
-  height: auto;
-  text-align: left;
+  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;
+  border-radius: 0;
+  display: inline;
+  overflow: visible;
+  white-space: pre;
+  word-break: initial;
+  word-wrap: normal;
+}
+.vditor-wysiwyg__block pre:first-child::before {
+  content: attr(data-language);
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 2px 8px;
+  font-size: 12px;
+  color: var(--second-color);
+  background-color: var(--panel-background-color);
+  border-radius: 0 4px 0 4px;
+  z-index: 1;
+}
+.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--editing pre:first-child {
   display: block;
+  margin: 0;
 }
 .vditor-wysiwyg__block--editing .vditor-wysiwyg__preview {
   display: none;
@@ -1434,6 +1472,7 @@
   font-family: var(--code-font-family);
   font-size: var(--code-font-size);
   line-height: var(--code-line-height);
+  background-color: transparent !important;
 }
 .vditor-wysiwyg__preview::before {
   content: attr(data-language);

package/dist/index.js

@@ -1,5 +1,5 @@
 /*!
- * Vditor v0.1.0 - A markdown editor written in TypeScript.
+ * Vditor v0.2.0 - 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.1.0";
+var _VDITOR_VERSION = "0.2.0";
 
 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.1.0");
+    Constants.CDN = "https://unpkg.com/@yltrcc/vditor@".concat("0.2.0");
     Constants.MARKDOWN_OPTIONS = {
         autoSpace: false,
         gfmAutoLink: true,
@@ -7000,6 +7000,7 @@ var removeHeading = function (vditor) {
 ;// ./src/ts/wysiwyg/showCode.ts
 
 
+
 /**
  * 显示代码编辑区域，隐藏预览区域
  * @param previewElement - 预览区域元素
@@ -7011,12 +7012,21 @@ var showCode = function (previewElement, vditor, first) {
     if (first === void 0) { first = true; }
     var blockElement = previewElement.parentElement;
     var codeElement = previewElement.previousElementSibling;
-    // 添加编辑状态类
+    // 添加编辑状态类，通过 CSS 控制显示/隐藏
     blockElement.classList.add("vditor-wysiwyg__block--editing");
+    // 移除内联样式，让 CSS 类控制显示
+    codeElement.style.removeProperty("display");
+    previewElement.style.removeProperty("display");
+    // 将语言信息传递给编辑区域
+    var language = previewElement.getAttribute("data-language") || "";
+    codeElement.setAttribute("data-language", language);
+    // 隐藏编辑时的多余工具栏
+    if (vditor.wysiwyg.popover) {
+        vditor.wysiwyg.popover.style.display = "none";
+    }
     var range = codeElement.ownerDocument.createRange();
     if (codeElement.tagName === "CODE") {
         // 行内代码
-        codeElement.style.display = "inline-block";
         if (first) {
             range.setStart(codeElement.firstChild, 1);
         }
@@ -7026,7 +7036,6 @@ var showCode = function (previewElement, vditor, first) {
     }
     else {
         // 代码块
-        codeElement.style.display = "block";
         if (!codeElement.firstChild.firstChild) {
             codeElement.firstChild.appendChild(document.createTextNode(""));
         }
@@ -7050,17 +7059,36 @@ var showCode = function (previewElement, vditor, first) {
  * @param vditor - Vditor 实例
  */
 var hideCode = function (blockElement, vditor) {
-    // 移除编辑状态类
+    // 移除编辑状态类，通过 CSS 控制显示/隐藏
     blockElement.classList.remove("vditor-wysiwyg__block--editing");
     var codeElement = blockElement.querySelector("pre:first-child");
     var previewElement = blockElement.querySelector(".vditor-wysiwyg__preview");
+    // 移除内联样式，让 CSS 类控制显示
     if (codeElement) {
-        codeElement.style.display = "none";
+        codeElement.style.removeProperty("display");
     }
     if (previewElement) {
-        previewElement.style.display = "block";
+        previewElement.style.removeProperty("display");
+        // 从编辑区域获取代码内容
+        // 编辑区域结构: <pre><code class="language-xxx">代码内容</code></pre>
+        var editCodeElement = codeElement === null || codeElement === void 0 ? void 0 : codeElement.querySelector("code");
+        var codeText = (editCodeElement === null || editCodeElement === void 0 ? void 0 : editCodeElement.textContent) || "";
+        var language = (editCodeElement === null || editCodeElement === void 0 ? void 0 : editCodeElement.className.replace("language-", "")) || "";
+        // 预览区域结构: <div class="vditor-wysiwyg__preview"><pre><code class="language-xxx">代码内容</code></pre></div>
+        // 找到预览区域内部的 code 元素
+        var previewCodeElement = previewElement.querySelector("pre > code");
+        if (previewCodeElement) {
+            // 更新预览区域的代码内容
+            previewCodeElement.textContent = codeText;
+            // 更新语言类名
+            if (language && language !== "hljs") {
+                previewCodeElement.className = "language-".concat(language);
+                previewElement.setAttribute("data-language", language);
+            }
+        }
         // 重新渲染预览
         previewElement.setAttribute("data-render", "2");
+        processCodeRender(previewElement, vditor);
     }
 };
 
@@ -7933,6 +7961,12 @@ var highlightToolbarWYSIWYG = function (vditor) {
             }
         });
         if (blockRenderElement && isBlock) {
+            // 如果代码块处于编辑状态，则不显示工具栏
+            var isCodeBlockEditing = blockRenderElement.classList.contains("vditor-wysiwyg__block--editing");
+            if (isCodeBlockEditing) {
+                vditor.wysiwyg.popover.style.display = "none";
+                return;
+            }
             vditor.wysiwyg.popover.innerHTML = "";
             genUp(range, blockRenderElement, vditor);
             genDown(range, blockRenderElement, vditor);
@@ -11302,7 +11336,7 @@ var fixFirefoxArrowUpTable = function (event, blockElement, range) {
     return false;
 };
 var paste = function (vditor, event, callback) { return fixBrowserBehavior_awaiter(void 0, void 0, void 0, function () {
-    var textHTML, textPlain, files, renderers, renderLinkDest, doc, height, code, codeElement, position, tempElement, fileReader_1, file_1, range, blockElement, range;
+    var textHTML, textPlain, files, renderers, renderLinkDest, doc, height, code, codeElement, position, nextSibling, tempElement, fileReader_1, file_1, range, blockElement, range;
     var _a;
     return fixBrowserBehavior_generator(this, function (_b) {
         switch (_b.label) {
@@ -11428,9 +11462,11 @@ var paste = function (vditor, event, callback) { return fixBrowserBehavior_await
                     codeElement.textContent = codeElement.textContent.substring(0, position.start)
                         + textPlain + codeElement.textContent.substring(position.end);
                     (0,selection/* setSelectionByPosition */.Fm)(position.start + textPlain.length, position.start + textPlain.length, codeElement.parentElement);
-                    if ((_a = codeElement.parentElement) === null || _a === void 0 ? void 0 : _a.nextElementSibling.classList.contains("vditor-".concat(vditor.currentMode, "__preview"))) {
-                        codeElement.parentElement.nextElementSibling.innerHTML = codeElement.outerHTML;
-                        processCodeRender(codeElement.parentElement.nextElementSibling, vditor);
+                    nextSibling = (_a = codeElement.parentElement) === null || _a === void 0 ? void 0 : _a.nextElementSibling;
+                    if (nextSibling && nextSibling.classList
+                        .contains("vditor-".concat(vditor.currentMode, "__preview"))) {
+                        nextSibling.innerHTML = codeElement.outerHTML;
+                        processCodeRender(nextSibling, vditor);
                     }
                 }
                 return [3 /*break*/, 10];