@8btc/mditor 0.0.18 → 0.0.19

package/src/ts/wysiwyg/index.ts

@@ -64,21 +64,31 @@ class WYSIWYG {
             divElement.classList.add("vditor--linenumber");
         }
 
+        // 构建选择浮窗的操作按钮HTML
+        const aiButtonHtml = vditor.options.ai?.enable 
+            ? '<button type="button" data-action="ai" aria-label="AI编辑" class="vditor-selection-popover__btn">✨ AI编辑</button>'
+            : '';
+        
+        // 构建AI输入区域HTML
+        const aiInputHtml = vditor.options.ai?.enable 
+            ? `<div class="vditor-selection-popover__input">
+        <textarea placeholder="请输入您想修改的内容"></textarea>
+        <button class="vditor-selection-popover__send">
+            <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>
+        </button>
+    </div>` 
+            : '';
+
         divElement.innerHTML = `<pre class="vditor-reset" placeholder="${vditor.options.placeholder}"
  contenteditable="true" spellcheck="false"></pre>
 <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">✨ AI编辑</button>
+        ${aiButtonHtml}
         <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>
-    <div class="vditor-selection-popover__input">
-        <textarea placeholder="请输入您想修改的内容"></textarea>
-        <button class="vditor-selection-popover__send">
-            <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>
-        </button>
-    </div>
+    ${aiInputHtml}
 </div>`;
 
         this.element = divElement.firstElementChild as HTMLPreElement;
@@ -94,14 +104,14 @@ class WYSIWYG {
 
         this.bindEvent(vditor);
 
-        // 绑定发送按钮事件
-        if (this.popoverSendBtn) {
+        // 绑定发送按钮事件（仅在AI启用时）
+        if (this.popoverSendBtn && vditor.options.ai?.enable) {
             this.popoverSendBtn.setAttribute("disabled", "disabled");
 
             this.popoverSendBtn.onclick = (event) => {
                 event.stopPropagation();
-                if (vditor.options.ai) {
-                    vditor.options.ai({
+                if (vditor.options.ai?.callback) {
+                    vditor.options.ai.callback({
                         value: this.popoverInput.value,
                         content: this.selectionContent,
                         lines: this.selectionLines,
@@ -109,35 +119,36 @@ class WYSIWYG {
                 }
                 this.hideSelectionPopover();
             };
-            // 阻止点击 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) {
-                this.popoverInput.addEventListener("input", () => {
-                    if (this.popoverInput.value.trim().length > 0) {
-                        this.popoverSendBtn.removeAttribute("disabled");
-                    } else {
-                        this.popoverSendBtn.setAttribute(
-                            "disabled",
-                            "disabled"
-                        );
-                    }
-                });
+        // 阻止点击 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();
+        });
+
+        // 输入验证（仅在AI启用时）
+        if (this.popoverInput && vditor.options.ai?.enable) {
+            this.popoverInput.addEventListener("input", () => {
+                if (this.popoverInput.value.trim().length > 0) {
+                    this.popoverSendBtn.removeAttribute("disabled");
+                } else {
+                    this.popoverSendBtn.setAttribute(
+                        "disabled",
+                        "disabled"
+                    );
+                }
+            });
         }
 
         focusEvent(vditor, this.element);
@@ -149,42 +160,32 @@ class WYSIWYG {
         copyEvent(vditor, this.element, this.copy);
         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 copyBtn = this.selectPopover.querySelector(
-            '[data-action="copy"]'
-        ) as HTMLButtonElement | null;
-        if (copyBtn) {
-            /**
-             * 复制按钮点击处理
-             * - 优先使用 Clipboard API；降级为 execCommand('copy')
-             */
-            copyBtn.onclick = () => {
-                this.copySelection(vditor);
-            };
-        }
-        const cutBtn = this.selectPopover.querySelector(
-            '[data-action="cut"]'
-        ) as HTMLButtonElement | null;
-        if (cutBtn) {
-            /**
-             * 剪切按钮点击处理
-             * - 将选区复制到剪贴板后删除，并接入撤销栈
-             */
-            cutBtn.onclick = () => {
-                this.cutSelection(vditor);
-            };
+        // 选择浮窗按钮事件绑定（仅在AI启用时）
+        if (vditor.options.ai?.enable) {
+            const copyBtn = this.selectPopover.querySelector(
+                '[data-action="copy"]'
+            ) as HTMLButtonElement | null;
+            if (copyBtn) {
+                /**
+                 * 复制按钮点击处理
+                 * - 优先使用 Clipboard API；降级为 execCommand('copy')
+                 */
+                copyBtn.onclick = () => {
+                    this.copySelection(vditor);
+                };
+            }
+            const cutBtn = this.selectPopover.querySelector(
+                '[data-action="cut"]'
+            ) as HTMLButtonElement | null;
+            if (cutBtn) {
+                /**
+                 * 剪切按钮点击处理
+                 * - 将选区复制到剪贴板后删除，并接入撤销栈
+                 */
+                cutBtn.onclick = () => {
+                    this.cutSelection(vditor);
+                };
+            }
         }
 
         // 评论按钮仅在启用时注册（避免选择浮窗结构变化导致报错）
@@ -374,8 +375,14 @@ class WYSIWYG {
     /**
      * 显示选择浮窗（定位于选区右上）
      * - 当未选中文本或选区不在编辑器内时不显示
+     * - 当AI功能未启用时不显示
      */
     public showSelectionPopover() {
+        // 如果AI功能未启用，不显示选择浮窗
+        if (!this.vditor.options.ai?.enable) {
+            return;
+        }
+        
         if (getSelection().rangeCount === 0) {
             return;
         }