@8btc/mditor 0.0.11 → 0.0.12

package/dist/index.css

@@ -1,5 +1,5 @@
 /*!
- * Vditor v0.0.8 - A markdown editor written in TypeScript.
+ * Vditor v0.0.12 - A markdown editor written in TypeScript.
  *
  * MIT License
  *
@@ -25,7 +25,7 @@
  *
  */
 /*!
- * Vditor v0.0.8 - A markdown editor written in TypeScript.
+ * Vditor v0.0.12 - A markdown editor written in TypeScript.
  *
  * MIT License
  *
@@ -1921,7 +1921,7 @@
   z-index: 4;
   display: none;
   padding: 0;
-  border-radius: 12px;
+  border-radius: 8px;
   background-color: var(--panel-background-color);
   box-shadow: var(--panel-shadow);
   border: 1px solid var(--border-color);
@@ -1930,9 +1930,87 @@
           user-select: none;
   white-space: nowrap;
   transform-origin: top left;
+  opacity: 0;
   transition: opacity 150ms cubic-bezier(0.2, 0, 0.13, 1.5), transform 150ms cubic-bezier(0.2, 0, 0.13, 1.5);
+  flex-direction: column;
+  flex-wrap: nowrap;
+}
+.vditor-selection-popover__actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  border-bottom: 1px solid var(--border-color);
+}
+.vditor-selection-popover__input {
+  display: flex;
+  flex-direction: column;
+  width: 327px;
+  padding: 12px;
+  gap: 8px;
+  align-items: flex-end;
+  box-sizing: border-box;
+}
+.vditor-selection-popover__input textarea {
+  flex: 1;
+  width: 100%;
+  height: 60px;
+  background: transparent;
+  border: none;
+  resize: none;
+  outline: none;
+  color: var(--textarea-text-color);
+  font-size: 14px;
+  line-height: 20px;
+  padding: 0;
+  margin: 0;
+}
+.vditor-selection-popover__input textarea::-moz-placeholder {
+  color: #585a5a;
+}
+.vditor-selection-popover__input textarea::placeholder {
+  color: #585a5a;
+}
+.vditor-selection-popover__input .vditor-selection-popover__send {
   display: flex;
   align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: var(--toolbar-icon-hover-color);
+  border-radius: 8px;
+  color: #fff;
+  cursor: pointer;
+  padding: 0;
+  transition: opacity 0.2s;
+}
+.vditor-selection-popover__input .vditor-selection-popover__send:hover {
+  opacity: 0.8;
+}
+.vditor-selection-popover__input .vditor-selection-popover__send[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.vditor-selection-popover__input .vditor-selection-popover__send--loading {
+  pointer-events: none;
+  opacity: 0.8;
+}
+.vditor-selection-popover__input .vditor-selection-popover__send--loading svg {
+  animation: vditor-rotate 1s linear infinite;
+}
+.vditor-selection-popover__input .vditor-selection-popover__send svg {
+  width: 16px;
+  height: 16px;
+}
+@keyframes vditor-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 .vditor-selection-popover__btn {
   display: flex;
@@ -1948,7 +2026,6 @@
   background: transparent;
   color: var(--textarea-text-color);
   cursor: pointer;
-  border-radius: 8px;
   outline: none;
   font-size: 14px;
   font-weight: 500;
@@ -1966,6 +2043,37 @@
 .vditor-selection-popover__btn + .vditor-selection-popover__btn {
   border-left: 1px solid var(--border-color);
 }
+.vditor-reset .vditor-selection-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.31rem;
+  padding: 0.25rem 0.5rem;
+  background-color: #f6f8fa;
+  border: 1px solid #d1d5da;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #0a0a0a;
+  font-family: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols", "JetBrains Mono", "Fira Code", "Source Code Pro", monospace;
+  margin: 0.25rem 0.25rem 0.25rem 0;
+}
+.vditor-reset .vditor-selection-tag__file {
+  color: #0a0a0a;
+  font-weight: 500;
+}
+.vditor-reset .vditor-selection-tag__lines {
+  color: #586069;
+}
+.vditor--dark .vditor-reset .vditor-selection-tag {
+  background-color: #2f363d;
+  border-color: #141414;
+}
+.vditor--dark .vditor-reset .vditor-selection-tag .vditor-selection-tag__file {
+  color: #fafafa;
+}
+.vditor--dark .vditor-reset .vditor-selection-tag .vditor-selection-tag__lines {
+  color: #b9b9b9;
+}
 details > summary {
   list-style: none;
 }

package/dist/index.js

@@ -1,5 +1,5 @@
 /*!
- * Vditor v0.0.8 - A markdown editor written in TypeScript.
+ * Vditor v0.0.12 - A markdown editor written in TypeScript.
  *
  * MIT License
  *
@@ -2818,7 +2818,7 @@ var Vditor = /** @class */ (function () {
 /* harmony export */   "H": () => (/* binding */ _VDITOR_VERSION),
 /* harmony export */   "g": () => (/* binding */ Constants)
 /* harmony export */ });
-var _VDITOR_VERSION = "0.0.8";
+var _VDITOR_VERSION = "0.0.12";
 
 var Constants = /** @class */ (function () {
     function Constants() {
@@ -3120,7 +3120,7 @@ var Constants = /** @class */ (function () {
         "c#",
         "bat",
     ];
-    Constants.CDN = "https://webcdn.wujieai.com/vditor@".concat("0.0.8");
+    Constants.CDN = "https://webcdn.wujieai.com/vditor@".concat("0.0.12");
     Constants.MARKDOWN_OPTIONS = {
         autoSpace: false,
         gfmAutoLink: true,
@@ -7836,6 +7836,22 @@ var processCodeRender = function (previewPanel, vditor) {
             math: vditor.options.preview.math,
         });
     }
+    else if (language === "selection") {
+        // 渲染文件选择标签
+        var content = previewPanel.textContent.trim();
+        var lines = content.split('\n');
+        var tags = lines.map(function (line) {
+            var match = line.trim().match(/^(.+?)\s+(\d+-\d+)$/);
+            if (match) {
+                var filename = match[1], lineRange = match[2];
+                return "<div class=\"vditor-selection-tag\">\n                    <span class=\"vditor-selection-tag__file\">".concat(filename, "</span>\n                    <span class=\"vditor-selection-tag__lines\">").concat(lineRange, "</span>\n                </div>");
+            }
+            return '';
+        }).filter(function (tag) { return tag; }).join('');
+        if (tags) {
+            previewPanel.innerHTML = tags;
+        }
+    }
     else {
         var cRender = vditor.options.customRenders.find(function (item) {
             if (item.language === language) {
@@ -11767,15 +11783,11 @@ var hotkeyEvent = function (vditor, editorElement) {
  * - 防抖间隔使用 options.selectionPopover.debounceDelay（默认 150ms）
  */
 var selectEvent = function (vditor, editorElement) {
-    var _a, _b;
     var debounceTimer = 0;
-    var delay = (_b = (_a = vditor.options.selectionPopover) === null || _a === void 0 ? void 0 : _a.debounceDelay) !== null && _b !== void 0 ? _b : 150;
-    /**
-     * 统一处理选择状态：根据选区内容显示/隐藏选择浮窗
-     * - 鼠标拖选、键盘选择、触摸选择、系统 selectionchange
-     */
     var handleSelection = function () {
+        var _a, _b;
         window.clearTimeout(debounceTimer);
+        var delay = (_b = (_a = vditor.options.selectionPopover) === null || _a === void 0 ? void 0 : _a.debounceDelay) !== null && _b !== void 0 ? _b : 150;
         debounceTimer = window.setTimeout(function () {
             var _a;
             var selectText = getSelectText(vditor[vditor.currentMode].element);
@@ -11798,44 +11810,17 @@ var selectEvent = function (vditor, editorElement) {
             }
         }, delay);
     };
-    // 鼠标拖选结束
-    editorElement.addEventListener("mouseup", function () { return handleSelection(); });
-    // 触摸选择结束（移动端）
-    editorElement.addEventListener("touchend", function () { return handleSelection(); }, {
-        passive: true,
+    editorElement.addEventListener("selectstart", function (event) {
+        editorElement.onmouseup = handleSelection;
     });
-    // 键盘选择（Shift+方向键/Home/End 等）
     editorElement.addEventListener("keyup", function (event) {
-        if (event.isComposing) {
-            return;
+        if (event.shiftKey && (event.key.startsWith("Arrow") || event.key === "Home" || event.key === "End")) {
+            handleSelection();
         }
-        handleSelection();
-    });
-    // 系统选区变化（跨端通用，仅处理编辑器内选区）
-    document.addEventListener("selectionchange", function () {
-        if (!(0,selection/* selectIsEditor */.Gb)(vditor[vditor.currentMode].element)) {
-            return;
+        else if (!event.shiftKey && (event.key.startsWith("Arrow") || event.key === "Escape")) {
+            // Cancel selection or move cursor without selection
+            handleSelection();
         }
-        handleSelection();
-    });
-    // 点击空白区域时隐藏浮窗并清理选区
-    editorElement.addEventListener("click", function () {
-        var selection = window.getSelection();
-        var hadSelection = !!selection && selection.toString().trim() !== "";
-        window.setTimeout(function () {
-            var selectText = getSelectText(vditor[vditor.currentMode].element);
-            if (!selectText.trim()) {
-                if (vditor.currentMode === "wysiwyg") {
-                    vditor.wysiwyg.hideSelectionPopover();
-                }
-                if (hadSelection) {
-                    try {
-                        selection.removeAllRanges();
-                    }
-                    catch (_a) { }
-                }
-            }
-        }, 0);
     });
 };
 
@@ -15263,6 +15248,31 @@ var Outline = /** @class */ (function () {
 
 // EXTERNAL MODULE: ./src/ts/markdown/mediaRender.ts
 var mediaRender = __webpack_require__(280);
+;// CONCATENATED MODULE: ./src/ts/markdown/selectionRender.ts
+/**
+ * 渲染 selection 代码块为文件选择标签
+ */
+var selectionRender = function (element) {
+    element.querySelectorAll("pre > code.language-selection").forEach(function (codeElement) {
+        var preElement = codeElement.parentElement;
+        var content = codeElement.textContent.trim();
+        var lines = content.split('\n');
+        var tags = lines.map(function (line) {
+            var match = line.trim().match(/^(.+?)\s+(\d+-\d+)$/);
+            if (match) {
+                var filename = match[1], lineRange = match[2];
+                return "<div class=\"vditor-selection-tag\">\n                    <span class=\"vditor-selection-tag__file\">".concat(filename, "</span>\n                    <span class=\"vditor-selection-tag__lines\">").concat(lineRange, "</span>\n                </div>");
+            }
+            return '';
+        }).filter(function (tag) { return tag; }).join('');
+        if (tags) {
+            var container = document.createElement('div');
+            container.innerHTML = tags;
+            preElement.parentNode.replaceChild(container, preElement);
+        }
+    });
+};
+
 ;// CONCATENATED MODULE: ./src/ts/preview/index.ts
 
 
@@ -15281,6 +15291,7 @@ var mediaRender = __webpack_require__(280);
 
 
 
+
 var Preview = /** @class */ (function () {
     /**
      * 构造预览区域容器，注册复制与点击事件。
@@ -15444,8 +15455,11 @@ var Preview = /** @class */ (function () {
         if (vditor.options.preview.render.media.enable) {
             (0,mediaRender/* mediaRender */.Y)(vditor.preview.previewElement);
         }
+        selectionRender(vditor.preview.previewElement);
         vditor.options.customRenders.forEach(function (item) {
-            item.render(vditor.preview.previewElement, vditor);
+            {
+                item.render(vditor.preview.previewElement, vditor);
+            }
         });
         // toc render
         var editorElement = vditor.preview.element;
@@ -17933,20 +17947,54 @@ var wysiwyg_generator = (undefined && undefined.__generator) || function (thisAr
 var WYSIWYG = /** @class */ (function () {
     function WYSIWYG(vditor) {
         var _this = this;
-        var _a;
+        var _a, _b;
         this.composingLock = false;
         this.commentIds = [];
+        this.vditor = vditor;
         var divElement = document.createElement("div");
         divElement.className = "vditor-wysiwyg";
         if ((_a = vditor.options.lineNumber) === null || _a === void 0 ? void 0 : _a.enable) {
             divElement.classList.add("vditor--linenumber");
         }
-        divElement.innerHTML = "<pre class=\"vditor-reset\" placeholder=\"".concat(vditor.options.placeholder, "\"\n contenteditable=\"true\" spellcheck=\"false\"></pre>\n<div class=\"vditor-panel vditor-panel--none\"></div>\n<div class=\"vditor-selection-popover\">\n    <button type=\"button\" data-action=\"ai\" aria-label=\"AI\u7F16\u8F91\" class=\"vditor-selection-popover__btn\" disabled>\u2728 AI\u7F16\u8F91</button>\n    <button type=\"button\" data-action=\"cut\" aria-label=\"\u526A\u5207\" class=\"vditor-selection-popover__btn\">\u526A\u5207</button>\n    <button type=\"button\" data-action=\"copy\" aria-label=\"\u590D\u5236\" class=\"vditor-selection-popover__btn\">\u590D\u5236</button>\n</div>");
+        divElement.innerHTML = "<pre class=\"vditor-reset\" placeholder=\"".concat(vditor.options.placeholder, "\"\n contenteditable=\"true\" spellcheck=\"false\"></pre>\n<div class=\"vditor-panel vditor-panel--none\"></div>\n<div class=\"vditor-selection-popover\">\n    <div class=\"vditor-selection-popover__actions\">\n        <button type=\"button\" data-action=\"ai\" aria-label=\"AI\u7F16\u8F91\" class=\"vditor-selection-popover__btn\" disabled>\u2728 AI\u7F16\u8F91</button>\n        <button type=\"button\" data-action=\"cut\" aria-label=\"\u526A\u5207\" class=\"vditor-selection-popover__btn\">\u526A\u5207</button>\n        <button type=\"button\" data-action=\"copy\" aria-label=\"\u590D\u5236\" class=\"vditor-selection-popover__btn\">\u590D\u5236</button>\n    </div>\n    <div class=\"vditor-selection-popover__input\">\n        <textarea placeholder=\"\u8BF7\u8F93\u5165\u60A8\u60F3\u4FEE\u6539\u7684\u5185\u5BB9\"></textarea>\n        <button class=\"vditor-selection-popover__send\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sparkles-icon lucide-sparkles\"><path d=\"M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z\"/><path d=\"M20 2v4\"/><path d=\"M22 4h-4\"/><circle cx=\"4\" cy=\"20\" r=\"2\"/></svg>\n        </button>\n    </div>\n</div>");
         this.element = divElement.firstElementChild;
         this.popover = divElement.firstElementChild
             .nextElementSibling;
         this.selectPopover = divElement.lastElementChild;
+        this.popoverInput = this.selectPopover.querySelector("textarea");
+        this.popoverSendBtn = this.selectPopover.querySelector(".vditor-selection-popover__send");
         this.bindEvent(vditor);
+        // 绑定发送按钮事件
+        if (this.popoverSendBtn) {
+            this.popoverSendBtn.setAttribute("disabled", "disabled");
+            this.popoverSendBtn.onclick = function (event) {
+                event.stopPropagation();
+                if (vditor.options.ai) {
+                    vditor.options.ai({
+                        value: _this.popoverInput.value,
+                        content: _this.selectionContent,
+                        lines: _this.selectionLines,
+                    });
+                }
+                _this.hideSelectionPopover();
+            };
+            // 阻止点击输入区域时清除选区
+            (_b = this.selectPopover
+                .querySelector(".vditor-selection-popover__input")) === null || _b === void 0 ? void 0 : _b.addEventListener("mousedown", function (event) {
+                event.stopPropagation();
+            });
+            // 输入验证
+            if (this.popoverInput) {
+                this.popoverInput.addEventListener("input", function () {
+                    if (_this.popoverInput.value.trim().length > 0) {
+                        _this.popoverSendBtn.removeAttribute("disabled");
+                    }
+                    else {
+                        _this.popoverSendBtn.setAttribute("disabled", "disabled");
+                    }
+                });
+            }
+        }
         focusEvent(vditor, this.element);
         dblclickEvent(vditor, this.element);
         blurEvent(vditor, this.element);
@@ -18137,32 +18185,91 @@ var WYSIWYG = /** @class */ (function () {
         if (range.toString().trim() === "") {
             return;
         }
+        // 捕获选区内容（在选区丢失前）
+        var fragment = range.cloneContents();
+        var tempContainer = document.createElement("div");
+        tempContainer.appendChild(fragment);
+        this.selectionContent = this.vditor.lute
+            .VditorDOM2Md(tempContainer.innerHTML)
+            .trim();
+        if (!this.selectionContent) {
+            this.selectionContent = range.toString().trim();
+        }
+        // 捕获行号
+        var getBlockIndex = function (node, editor) {
+            var target = node;
+            var directChild = null;
+            // 向上遍历查找行号或直接子元素
+            while (target && target.parentElement !== editor) {
+                if (target instanceof Element &&
+                    target.hasAttribute("data-linenumber")) {
+                    return parseInt(target.getAttribute("data-linenumber"), 10);
+                }
+                target = target.parentNode;
+                if (target && target.parentElement === editor) {
+                    directChild = target;
+                }
+            }
+            // 检查直接子元素
+            if (directChild && directChild.hasAttribute("data-linenumber")) {
+                return parseInt(directChild.getAttribute("data-linenumber"), 10);
+            }
+            // 回退到使用子元素索引
+            if (directChild) {
+                return Array.from(editor.children).indexOf(directChild) + 1;
+            }
+            return 0;
+        };
+        var startLine = getBlockIndex(range.startContainer, this.element);
+        var endLine = getBlockIndex(range.endContainer, this.element);
+        this.selectionLines = [startLine, endLine];
         var editorRect = this.element.getBoundingClientRect();
         var rect = range.getBoundingClientRect();
-        var top = Math.max(-8, rect.top - editorRect.top - 21);
-        var left = Math.min(rect.right - editorRect.left - this.selectPopover.clientWidth, this.element.clientWidth - this.selectPopover.clientWidth);
+        // 计算浮窗尺寸
+        this.selectPopover.style.display = "flex";
+        this.selectPopover.style.opacity = "0";
+        var popoverHeight = this.selectPopover.offsetHeight;
+        var popoverWidth = this.selectPopover.offsetWidth;
+        // 理想位置：选区上方居中
+        var top = rect.top - editorRect.top - popoverHeight - 8;
+        var left = rect.left - editorRect.left + rect.width / 2 - popoverWidth / 2;
+        // 边界检查：顶部超出则翻转到底部
+        if (top < 0) {
+            top = rect.bottom - editorRect.top + 8;
+        }
+        // 边界检查：左右限制
+        var maxLeft = this.element.clientWidth - popoverWidth;
+        left = Math.max(0, Math.min(left, maxLeft));
         this.selectPopover.style.top = "".concat(top, "px");
-        this.selectPopover.style.left = "".concat(Math.max(0, left), "px");
-        this.selectPopover.style.display = "block";
-        this.selectPopover.style.transition =
-            "opacity 150ms cubic-bezier(0.2, 0, 0.13, 1.5), transform 150ms cubic-bezier(0.2, 0, 0.13, 1.5)";
+        this.selectPopover.style.left = "".concat(left, "px");
+        // 强制重排以触发过渡动画
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        this.selectPopover.offsetHeight;
         this.selectPopover.style.opacity = "1";
         this.selectPopover.style.transform = "scale(1)";
-        this.popover.setAttribute("data-top", (rect.top - editorRect.top - 21).toString());
-        this.selectPopover.setAttribute("data-top", (rect.top - editorRect.top - 21).toString());
+        this.popover.setAttribute("data-top", top.toString());
+        this.selectPopover.setAttribute("data-top", top.toString());
     };
     /**
      * 隐藏选择浮窗（淡出）
      */
     WYSIWYG.prototype.hideSelectionPopover = function () {
         var _this = this;
-        if (this.selectPopover.style.display !== "block") {
+        if (this.selectPopover.style.display !== "flex") {
             return;
         }
         this.selectPopover.style.opacity = "0";
         this.selectPopover.style.transform = "scale(0.95)";
         window.setTimeout(function () {
             _this.selectPopover.setAttribute("style", "display:none");
+            // Reset state
+            if (_this.popoverInput) {
+                _this.popoverInput.value = "";
+            }
+            if (_this.popoverSendBtn) {
+                _this.popoverSendBtn.classList.remove("vditor-selection-popover__send--loading");
+                _this.popoverSendBtn.setAttribute("disabled", "disabled");
+            }
         }, 150);
     };
     /**
@@ -18399,7 +18506,7 @@ var WYSIWYG = /** @class */ (function () {
         window.addEventListener("scroll", (this.scrollListener = function () {
             hidePanel(vditor, ["hint"]);
             if (_this.popover.style.display !== "block" ||
-                _this.selectPopover.style.display !== "block") {
+                _this.selectPopover.style.display !== "flex") {
                 return;
             }
             var top = parseInt(_this.popover.getAttribute("data-top"), 10);
@@ -18410,7 +18517,7 @@ var WYSIWYG = /** @class */ (function () {
                     if (_this.popover.style.display === "block") {
                         _this.popover.style.top = popoverTop;
                     }
-                    if (_this.selectPopover.style.display === "block") {
+                    if (_this.selectPopover.style.display === "flex") {
                         _this.selectPopover.style.top = popoverTop;
                     }
                 }
@@ -18423,7 +18530,7 @@ var WYSIWYG = /** @class */ (function () {
             if (_this.popover.style.display === "block") {
                 _this.popover.style.top = popoverTop1;
             }
-            if (_this.selectPopover.style.display === "block") {
+            if (_this.selectPopover.style.display === "flex") {
                 _this.selectPopover.style.top = popoverTop1;
             }
         }));