@yltrcc/vditor 0.0.9 → 0.1.1

package/dist/index.css

@@ -1,5 +1,5 @@
 /*!
- * Vditor v0.0.9 - A markdown editor written in TypeScript.
+ * Vditor v0.1.1 - A markdown editor written in TypeScript.
  *
  * MIT License
  *
@@ -25,7 +25,7 @@
  *
  */
 /*!
- * Vditor v0.0.9 - A markdown editor written in TypeScript.
+ * Vditor v0.1.1 - A markdown editor written in TypeScript.
  *
  * MIT License
  *
@@ -1396,8 +1396,12 @@
   padding-left: 0 !important;
   padding-right: 0 !important;
 }
+.vditor-wysiwyg__block {
+  position: relative;
+}
 .vditor-wysiwyg__block pre:first-child {
   margin-bottom: -1em;
+  display: none;
 }
 .vditor-wysiwyg__block pre:first-child code {
   color: var(--textarea-text-color);
@@ -1407,10 +1411,43 @@
 .vditor-wysiwyg__block pre:last-child {
   margin-bottom: 1em;
 }
+.vditor-wysiwyg__block--editing pre:first-child {
+  display: block;
+}
+.vditor-wysiwyg__block--editing .vditor-wysiwyg__preview {
+  display: none;
+}
 .vditor-wysiwyg__preview {
   cursor: pointer;
   white-space: initial;
   min-height: 27px;
+  display: block;
+}
+.vditor-wysiwyg__preview pre {
+  margin: 0;
+  padding: 1em;
+  background-color: var(--code-background-color);
+  border-radius: 4px;
+  overflow-x: auto;
+}
+.vditor-wysiwyg__preview pre code {
+  font-family: var(--code-font-family);
+  font-size: var(--code-font-size);
+  line-height: var(--code-line-height);
+}
+.vditor-wysiwyg__preview::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;
+}
+.vditor-wysiwyg__preview:hover {
+  box-shadow: 0 0 0 2px var(--blurColor);
 }
 .vditor-wysiwyg > .vditor-reset > h1:before,
 .vditor-wysiwyg > .vditor-reset > h2:before,

package/dist/index.js

@@ -1,5 +1,5 @@
 /*!
- * Vditor v0.0.9 - A markdown editor written in TypeScript.
+ * Vditor v0.1.1 - 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.0.9";
+var _VDITOR_VERSION = "0.1.1";
 
 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.0.9");
+    Constants.CDN = "https://unpkg.com/@yltrcc/vditor@".concat("0.1.1");
     Constants.MARKDOWN_OPTIONS = {
         autoSpace: false,
         gfmAutoLink: true,
@@ -5425,6 +5425,10 @@ var processCodeRender = function (previewPanel, vditor) {
         return;
     }
     var language = previewPanel.firstElementChild.className.replace("language-", "");
+    // 设置语言属性用于显示语言标签
+    if (language && language !== "hljs") {
+        previewPanel.setAttribute("data-language", language);
+    }
     if (language === "abc") {
         (0,abcRender/* abcRender */.$)(previewPanel, vditor.options.cdn);
     }
@@ -6996,25 +7000,39 @@ var removeHeading = function (vditor) {
 ;// ./src/ts/wysiwyg/showCode.ts
 
 
+
+/**
+ * 显示代码编辑区域，隐藏预览区域
+ * @param previewElement - 预览区域元素
+ * @param vditor - Vditor 实例
+ * @param first - 是否将光标设置在开头
+ */
 var showCode = function (previewElement, vditor, first) {
+    var _a;
     if (first === void 0) { first = true; }
-    var previousElement = previewElement.previousElementSibling;
-    var range = previousElement.ownerDocument.createRange();
-    if (previousElement.tagName === "CODE") {
-        previousElement.style.display = "inline-block";
+    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 range = codeElement.ownerDocument.createRange();
+    if (codeElement.tagName === "CODE") {
+        // 行内代码
         if (first) {
-            range.setStart(previousElement.firstChild, 1);
+            range.setStart(codeElement.firstChild, 1);
         }
         else {
-            range.selectNodeContents(previousElement);
+            range.selectNodeContents(codeElement);
         }
     }
     else {
-        previousElement.style.display = "block";
-        if (!previousElement.firstChild.firstChild) {
-            previousElement.firstChild.appendChild(document.createTextNode(""));
+        // 代码块
+        if (!codeElement.firstChild.firstChild) {
+            codeElement.firstChild.appendChild(document.createTextNode(""));
         }
-        range.selectNodeContents(previousElement.firstChild);
+        range.selectNodeContents(codeElement.firstChild);
     }
     if (first) {
         range.collapse(true);
@@ -7023,11 +7041,49 @@ var showCode = function (previewElement, vditor, first) {
         range.collapse(false);
     }
     (0,selection/* setSelectionFocus */.jl)(range);
-    if (previewElement.firstElementChild.classList.contains("language-mindmap")) {
+    if ((_a = previewElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.classList.contains("language-mindmap")) {
         return;
     }
     scrollCenter(vditor);
 };
+/**
+ * 隐藏代码编辑区域，显示预览区域
+ * @param blockElement - 代码块容器元素
+ * @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.removeProperty("display");
+    }
+    if (previewElement) {
+        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);
+    }
+};
 
 ;// ./src/ts/wysiwyg/processKeydown.ts
 
@@ -7086,8 +7142,7 @@ var wysiwyg_processKeydown_processKeydown = function (vditor, event) {
         // esc: 退出编辑，仅展示渲染
         if (event.key === "Escape" && codeRenderElement.children.length === 2) {
             vditor.wysiwyg.popover.style.display = "none";
-            codeRenderElement.firstElementChild.style.display = "none";
-            vditor.wysiwyg.element.blur();
+            hideCode(codeRenderElement, vditor);
             event.preventDefault();
             return true;
         }
@@ -9827,6 +9882,24 @@ var uploadFiles = function (vditor, files, element) { return __awaiter(void 0, v
 
 var input_input = function (vditor, range, event) {
     var _a;
+    // 检查是否在代码块编辑模式中
+    var editingBlock = (0,hasClosest/* hasClosestByClassName */.KJ)(range.startContainer, "vditor-wysiwyg__block--editing");
+    if (editingBlock) {
+        // 在代码块编辑模式中，只更新预览区域，不重新渲染整个代码块
+        var previewElement = editingBlock.querySelector(".vditor-wysiwyg__preview");
+        if (previewElement) {
+            // 标记预览区域需要重新渲染
+            previewElement.setAttribute("data-render", "2");
+        }
+        // 直接调用 afterRenderEvent，跳过 HTML 重新渲染
+        renderToc(vditor);
+        afterRenderEvent(vditor, {
+            enableAddUndoStack: true,
+            enableHint: true,
+            enableInput: true,
+        });
+        return;
+    }
     var blockElement = (0,hasClosest/* hasClosestBlock */.pt)(range.startContainer);
     if (!blockElement) {
         // 使用顶级块元素，应使用 innerHTML
@@ -15626,6 +15699,15 @@ var WYSIWYG = /** @class */ (function () {
                 }
             }
             highlightToolbarWYSIWYG(vditor);
+            // 处理代码块的编辑/预览切换
+            var clickedBlockElement = (0,hasClosest/* hasClosestByClassName */.KJ)(event.target, "vditor-wysiwyg__block");
+            // 隐藏所有其他代码块的编辑区域
+            vditor.wysiwyg.element.querySelectorAll(".vditor-wysiwyg__block--editing").forEach(function (block) {
+                // 如果点击的不是当前正在编辑的代码块，则隐藏编辑区域
+                if (!clickedBlockElement || !clickedBlockElement.isEqualNode(block)) {
+                    hideCode(block, vditor);
+                }
+            });
             // 点击后光标落于预览区，需展开代码块
             var previewElement = (0,hasClosest/* hasClosestByClassName */.KJ)(event.target, "vditor-wysiwyg__preview");
             if (!previewElement) {