@8btc/mditor 0.0.11 → 0.0.13

package/src/assets/less/_line-number.less

@@ -6,10 +6,12 @@
             [data-linenumber]:after {
                 margin-left: -5rem !important;
             }
-            ul, ol  {
+
+            ul,
+            ol {
                 [data-linenumber]:after {
                     margin-left: -7rem !important;
-                } 
+                }
             }
         }
 
@@ -25,7 +27,7 @@
                 top: 0;
                 width: 3em;
                 text-align: right;
-                color: var(--second-color);
+                color: rgba(252, 252, 252, 0.65);
                 font-size: 0.75rem;
                 line-height: inherit;
                 user-select: none;
@@ -36,7 +38,7 @@
 
         .vditor-line-highlight {
             background-color: #fff3cd !important;
-            transition: background-color 0.3s ease-in-out;
+            transition: background-color color 0.3s ease-in-out;
         }
     }
-}
+}

package/src/method.ts

@@ -16,6 +16,7 @@ import { outlineRender } from "./ts/markdown/outlineRender";
 import { plantumlRender } from "./ts/markdown/plantumlRender";
 import { md2html, previewRender } from "./ts/markdown/previewRender";
 import { speechRender } from "./ts/markdown/speechRender";
+import { selectionRender } from "./ts/markdown/selectionRender";
 import { previewImage } from "./ts/preview/image";
 import { setCodeTheme } from "./ts/ui/setCodeTheme";
 import { setContentTheme } from "./ts/ui/setContentTheme";
@@ -60,6 +61,8 @@ class Vditor {
     public static mediaRender = mediaRender;
     /** 对选中的文字进行阅读 */
     public static speechRender = speechRender;
+    /** 渲染 selection 代码块为文件选择标签 */
+    public static selectionRender = selectionRender;
     /** 对图片进行懒加载 */
     public static lazyLoadImageRender = lazyLoadImageRender;
     /** Markdown 文本转换为 HTML，该方法需使用[异步编程](https://ld246.com/article/1546828434083?r=Vaness) */
@@ -85,7 +88,7 @@ class Vditor {
             } else {
                 attachLineNumbersToBlocksThrottled(root, text);
             }
-        } catch {}
+        } catch { }
     }
 }
 

package/src/ts/markdown/previewRender.ts

@@ -1,25 +1,26 @@
-import {Constants} from "../constants";
-import {setContentTheme} from "../ui/setContentTheme";
-import {addScript} from "../util/addScript";
-import {hasClosestByClassName, hasClosestByMatchTag} from "../util/hasClosest";
-import {merge} from "../util/merge";
-import {abcRender} from "./abcRender";
-import {anchorRender} from "./anchorRender";
-import {chartRender} from "./chartRender";
-import {codeRender} from "./codeRender";
-import {flowchartRender} from "./flowchartRender";
-import {graphvizRender} from "./graphvizRender";
-import {highlightRender} from "./highlightRender";
-import {lazyLoadImageRender} from "./lazyLoadImageRender";
-import {mathRender} from "./mathRender";
-import {mediaRender} from "./mediaRender";
-import {mermaidRender} from "./mermaidRender";
-import {markmapRender} from "./markmapRender";
-import {SMILESRender} from "./SMILESRender";
-import {mindmapRender} from "./mindmapRender";
-import {plantumlRender} from "./plantumlRender";
-import {setLute} from "./setLute";
-import {speechRender} from "./speechRender";
+import { Constants } from "../constants";
+import { setContentTheme } from "../ui/setContentTheme";
+import { addScript } from "../util/addScript";
+import { hasClosestByClassName, hasClosestByMatchTag } from "../util/hasClosest";
+import { merge } from "../util/merge";
+import { abcRender } from "./abcRender";
+import { anchorRender } from "./anchorRender";
+import { chartRender } from "./chartRender";
+import { codeRender } from "./codeRender";
+import { flowchartRender } from "./flowchartRender";
+import { graphvizRender } from "./graphvizRender";
+import { highlightRender } from "./highlightRender";
+import { lazyLoadImageRender } from "./lazyLoadImageRender";
+import { mathRender } from "./mathRender";
+import { mediaRender } from "./mediaRender";
+import { mermaidRender } from "./mermaidRender";
+import { markmapRender } from "./markmapRender";
+import { SMILESRender } from "./SMILESRender";
+import { mindmapRender } from "./mindmapRender";
+import { plantumlRender } from "./plantumlRender";
+import { setLute } from "./setLute";
+import { speechRender } from "./speechRender";
+import { selectionRender } from "./selectionRender";
 
 const mergeOptions = (options?: IPreviewOptions) => {
     const defaultOption: IPreviewOptions = {
@@ -142,6 +143,7 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
     mindmapRender(previewElement, mergedOptions.cdn, mergedOptions.mode);
     plantumlRender(previewElement, mergedOptions.cdn);
     abcRender(previewElement, mergedOptions.cdn);
+    selectionRender(previewElement);
     if (mergedOptions.render.media.enable) {
         mediaRender(previewElement);
     }

package/src/ts/wysiwyg/index.ts

@@ -69,7 +69,7 @@ class WYSIWYG {
 <div class="vditor-panel vditor-panel--none"></div>
 <div class="vditor-selection-popover">
     <div class="vditor-selection-popover__actions">
-        <button type="button" data-action="ai" aria-label="AI编辑" class="vditor-selection-popover__btn" disabled>✨ AI编辑</button>
+        <button type="button" data-action="ai" aria-label="AI编辑" class="vditor-selection-popover__btn">✨ AI编辑</button>
         <button type="button" data-action="cut" aria-label="剪切" class="vditor-selection-popover__btn">剪切</button>
         <button type="button" data-action="copy" aria-label="复制" class="vditor-selection-popover__btn">复制</button>
     </div>
@@ -109,12 +109,18 @@ class WYSIWYG {
                 }
                 this.hideSelectionPopover();
             };
-            // 阻止点击输入区域时清除选区
-            this.selectPopover
-                .querySelector(".vditor-selection-popover__input")
-                ?.addEventListener("mousedown", (event) => {
-                    event.stopPropagation();
-                });
+            // 阻止点击 popover 内任何区域时导致编辑器失去焦点
+            // 但不影响 textarea 获取焦点和按钮点击
+            this.selectPopover.addEventListener("mousedown", (event) => {
+                const target = event.target as HTMLElement;
+                // 如果点击的是 textarea 或 button，允许默认行为
+                if (target.tagName === "TEXTAREA" || target.tagName === "BUTTON") {
+                    return;
+                }
+                // 其他情况阻止默认行为，防止编辑器失去焦点
+                event.preventDefault();
+                event.stopPropagation();
+            });
 
             // 输入验证
             if (this.popoverInput) {
@@ -141,18 +147,18 @@ class WYSIWYG {
         cutEvent(vditor, this.element, this.copy);
 
         // 选择浮窗按钮事件绑定
-        const aiBtn = this.selectPopover.querySelector(
-            '[data-action="ai"]'
-        ) as HTMLButtonElement | null;
-        if (aiBtn) {
-            /**
-             * AI编辑按钮占位事件
-             * - 当前仅输出日志，不执行编辑逻辑
-             */
-            aiBtn.onclick = () => {
-                console.log("[Selection AI Edit] clicked");
-            };
-        }
+        // const aiBtn = this.selectPopover.querySelector(
+        //     '[data-action="ai"]'
+        // ) as HTMLButtonElement | null;
+        // if (aiBtn) {
+        //     /**
+        //      * AI编辑按钮占位事件
+        //      * - 当前仅输出日志，不执行编辑逻辑
+        //      */
+        //     aiBtn.onclick = () => {
+        //         console.log("[Selection AI Edit] clicked");
+        //     };
+        // }
         const copyBtn = this.selectPopover.querySelector(
             '[data-action="copy"]'
         ) as HTMLButtonElement | null;
@@ -224,8 +230,8 @@ class WYSIWYG {
                                     item.getAttribute("data-block") === "0" &&
                                     index === contents.childNodes.length - 1 &&
                                     rangeClone.endOffset <
-                                        rangeClone.endContainer.textContent
-                                            .length
+                                    rangeClone.endContainer.textContent
+                                        .length
                                 ) {
                                     item.innerHTML = `<span class="vditor-comment" data-cmtids="${id}">${item.innerHTML}</span>`;
                                     blockEndElement = item;