@8btc/mditor 0.0.7 → 0.0.9

package/src/ts/wysiwyg/index.ts

@@ -21,7 +21,6 @@ import {
 } from "../util/hasClosest";
 import { hasClosestByHeadings } from "../util/hasClosestByHeadings";
 import {
-    getCursorPosition,
     getEditorRange,
     getSelectPosition,
     setRangeByWbr,
@@ -45,36 +44,93 @@ class WYSIWYG {
     public element: HTMLPreElement;
     public popover: HTMLDivElement;
     public selectPopover: HTMLDivElement;
+    public popoverInput: HTMLTextAreaElement;
+    public popoverSendBtn: HTMLButtonElement;
+    public selectionContent: string;
+    public selectionLines: [number, number];
     public afterRenderTimeoutId: number;
     public hlToolbarTimeoutId: number;
     public preventInput: boolean;
     public composingLock = false;
     public commentIds: string[] = [];
+    private vditor: IVditor;
     private scrollListener: () => void;
 
     constructor(vditor: IVditor) {
+        this.vditor = vditor;
         const divElement = document.createElement("div");
         divElement.className = "vditor-wysiwyg";
-        if (vditor.options.lineNumber) {
+        if (vditor.options.lineNumber?.enable) {
             divElement.classList.add("vditor--linenumber");
         }
 
         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-panel vditor-panel--none">
-    <button type="button" aria-label="${window.VditorI18n.comment}" class="vditor-icon vditor-tooltipped vditor-tooltipped__n">
-        <svg><use xlink:href="#vditor-icon-comment"></use></svg>
-    </button>
+<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="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>
 </div>`;
 
         this.element = divElement.firstElementChild as HTMLPreElement;
         this.popover = divElement.firstElementChild
             .nextElementSibling as HTMLDivElement;
         this.selectPopover = divElement.lastElementChild as HTMLDivElement;
+        this.popoverInput = this.selectPopover.querySelector(
+            "textarea"
+        ) as HTMLTextAreaElement;
+        this.popoverSendBtn = this.selectPopover.querySelector(
+            ".vditor-selection-popover__send"
+        ) as HTMLButtonElement;
 
         this.bindEvent(vditor);
 
+        // 绑定发送按钮事件
+        if (this.popoverSendBtn) {
+            this.popoverSendBtn.setAttribute("disabled", "disabled");
+
+            this.popoverSendBtn.onclick = (event) => {
+                event.stopPropagation();
+                if (vditor.options.ai) {
+                    vditor.options.ai({
+                        value: this.popoverInput.value,
+                        content: this.selectionContent,
+                        lines: this.selectionLines,
+                    });
+                }
+                this.hideSelectionPopover();
+            };
+            // 阻止点击输入区域时清除选区
+            this.selectPopover
+                .querySelector(".vditor-selection-popover__input")
+                ?.addEventListener("mousedown", (event) => {
+                    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"
+                        );
+                    }
+                });
+            }
+        }
+
         focusEvent(vditor, this.element);
         dblclickEvent(vditor, this.element);
         blurEvent(vditor, this.element);
@@ -84,121 +140,177 @@ 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);
+            };
+        }
+
+        // 评论按钮仅在启用时注册（避免选择浮窗结构变化导致报错）
         if (vditor.options.comment.enable) {
-            this.selectPopover.querySelector("button").onclick = () => {
-                const id = Lute.NewNodeID();
-                const range = getSelection().getRangeAt(0);
-                const rangeClone = range.cloneRange();
-                const contents = range.extractContents();
-                let blockStartElement: HTMLElement;
-                let blockEndElement: HTMLElement;
-                let removeStart = false;
-                let removeEnd = false;
-                contents.childNodes.forEach(
-                    (item: HTMLElement, index: number) => {
-                        let wrap = false;
-                        if (item.nodeType === 3) {
-                            wrap = true;
-                        } else if (!item.classList.contains("vditor-comment")) {
-                            wrap = true;
-                        } else if (item.classList.contains("vditor-comment")) {
-                            item.setAttribute(
-                                "data-cmtids",
-                                item.getAttribute("data-cmtids") + " " + id
-                            );
-                        }
-                        if (wrap) {
-                            if (
-                                item.nodeType !== 3 &&
-                                item.getAttribute("data-block") === "0" &&
-                                index === 0 &&
-                                rangeClone.startOffset > 0
-                            ) {
-                                item.innerHTML = `<span class="vditor-comment" data-cmtids="${id}">${item.innerHTML}</span>`;
-                                blockStartElement = item;
+            const commentBtn = this.selectPopover.querySelector(
+                '[data-action="comment"]'
+            ) as HTMLButtonElement | null;
+            if (commentBtn) {
+                commentBtn.onclick = () => {
+                    const id = Lute.NewNodeID();
+                    const range = getSelection().getRangeAt(0);
+                    const rangeClone = range.cloneRange();
+                    const contents = range.extractContents();
+                    let blockStartElement: HTMLElement;
+                    let blockEndElement: HTMLElement;
+                    let removeStart = false;
+                    let removeEnd = false;
+                    contents.childNodes.forEach(
+                        (item: HTMLElement, index: number) => {
+                            let wrap = false;
+                            if (item.nodeType === 3) {
+                                wrap = true;
                             } else if (
-                                item.nodeType !== 3 &&
-                                item.getAttribute("data-block") === "0" &&
-                                index === contents.childNodes.length - 1 &&
-                                rangeClone.endOffset <
-                                    rangeClone.endContainer.textContent.length
+                                !item.classList.contains("vditor-comment")
                             ) {
-                                item.innerHTML = `<span class="vditor-comment" data-cmtids="${id}">${item.innerHTML}</span>`;
-                                blockEndElement = item;
+                                wrap = true;
                             } else if (
-                                item.nodeType !== 3 &&
-                                item.getAttribute("data-block") === "0"
+                                item.classList.contains("vditor-comment")
                             ) {
-                                if (index === 0) {
-                                    removeStart = true;
+                                item.setAttribute(
+                                    "data-cmtids",
+                                    item.getAttribute("data-cmtids") + " " + id
+                                );
+                            }
+                            if (wrap) {
+                                if (
+                                    item.nodeType !== 3 &&
+                                    item.getAttribute("data-block") === "0" &&
+                                    index === 0 &&
+                                    rangeClone.startOffset > 0
+                                ) {
+                                    item.innerHTML = `<span class="vditor-comment" data-cmtids="${id}">${item.innerHTML}</span>`;
+                                    blockStartElement = item;
                                 } else if (
-                                    index ===
-                                    contents.childNodes.length - 1
+                                    item.nodeType !== 3 &&
+                                    item.getAttribute("data-block") === "0" &&
+                                    index === contents.childNodes.length - 1 &&
+                                    rangeClone.endOffset <
+                                        rangeClone.endContainer.textContent
+                                            .length
                                 ) {
-                                    removeEnd = true;
+                                    item.innerHTML = `<span class="vditor-comment" data-cmtids="${id}">${item.innerHTML}</span>`;
+                                    blockEndElement = item;
+                                } else if (
+                                    item.nodeType !== 3 &&
+                                    item.getAttribute("data-block") === "0"
+                                ) {
+                                    if (index === 0) {
+                                        removeStart = true;
+                                    } else if (
+                                        index ===
+                                        contents.childNodes.length - 1
+                                    ) {
+                                        removeEnd = true;
+                                    }
+                                    item.innerHTML = `<span class="vditor-comment" data-cmtids="${id}">${item.innerHTML}</span>`;
+                                } else {
+                                    const commentElement =
+                                        document.createElement("span");
+                                    commentElement.classList.add(
+                                        "vditor-comment"
+                                    );
+                                    commentElement.setAttribute(
+                                        "data-cmtids",
+                                        id
+                                    );
+                                    item.parentNode.insertBefore(
+                                        commentElement,
+                                        item
+                                    );
+                                    commentElement.appendChild(item);
                                 }
-                                item.innerHTML = `<span class="vditor-comment" data-cmtids="${id}">${item.innerHTML}</span>`;
-                            } else {
-                                const commentElement =
-                                    document.createElement("span");
-                                commentElement.classList.add("vditor-comment");
-                                commentElement.setAttribute("data-cmtids", id);
-                                item.parentNode.insertBefore(
-                                    commentElement,
-                                    item
-                                );
-                                commentElement.appendChild(item);
                             }
                         }
+                    );
+                    const startElement = hasClosestBlock(
+                        rangeClone.startContainer
+                    );
+                    if (startElement) {
+                        if (blockStartElement) {
+                            startElement.insertAdjacentHTML(
+                                "beforeend",
+                                blockStartElement.innerHTML
+                            );
+                            blockStartElement.remove();
+                        } else if (
+                            startElement.textContent
+                                .trim()
+                                .replace(Constants.ZWSP, "") === "" &&
+                            removeStart
+                        ) {
+                            startElement.remove();
+                        }
                     }
-                );
-                const startElement = hasClosestBlock(rangeClone.startContainer);
-                if (startElement) {
-                    if (blockStartElement) {
-                        startElement.insertAdjacentHTML(
-                            "beforeend",
-                            blockStartElement.innerHTML
-                        );
-                        blockStartElement.remove();
-                    } else if (
-                        startElement.textContent
-                            .trim()
-                            .replace(Constants.ZWSP, "") === "" &&
-                        removeStart
-                    ) {
-                        startElement.remove();
-                    }
-                }
-                const endElement = hasClosestBlock(rangeClone.endContainer);
-                if (endElement) {
-                    if (blockEndElement) {
-                        endElement.insertAdjacentHTML(
-                            "afterbegin",
-                            blockEndElement.innerHTML
-                        );
-                        blockEndElement.remove();
-                    } else if (
-                        endElement.textContent
-                            .trim()
-                            .replace(Constants.ZWSP, "") === "" &&
-                        removeEnd
-                    ) {
-                        endElement.remove();
+                    const endElement = hasClosestBlock(rangeClone.endContainer);
+                    if (endElement) {
+                        if (blockEndElement) {
+                            endElement.insertAdjacentHTML(
+                                "afterbegin",
+                                blockEndElement.innerHTML
+                            );
+                            blockEndElement.remove();
+                        } else if (
+                            endElement.textContent
+                                .trim()
+                                .replace(Constants.ZWSP, "") === "" &&
+                            removeEnd
+                        ) {
+                            endElement.remove();
+                        }
                     }
-                }
-                range.insertNode(contents);
-                vditor.options.comment.add(
-                    id,
-                    range.toString(),
-                    this.getComments(vditor, true)
-                );
-                afterRenderEvent(vditor, {
-                    enableAddUndoStack: true,
-                    enableHint: false,
-                    enableInput: false,
-                });
-                this.hideComment();
-            };
+                    range.insertNode(contents);
+                    vditor.options.comment.add(
+                        id,
+                        range.toString(),
+                        this.getComments(vditor, true)
+                    );
+                    afterRenderEvent(vditor, {
+                        enableAddUndoStack: true,
+                        enableHint: false,
+                        enableInput: false,
+                    });
+                    this.hideSelectionPopover();
+                };
+            }
         }
     }
 
@@ -250,16 +362,141 @@ class WYSIWYG {
         }
     }
 
+    /**
+     * 显示选择浮窗（定位于选区右上）
+     * - 当未选中文本或选区不在编辑器内时不显示
+     */
+    public showSelectionPopover() {
+        if (getSelection().rangeCount === 0) {
+            return;
+        }
+        const range = getSelection().getRangeAt(0);
+        if (range.toString().trim() === "") {
+            return;
+        }
+
+        // 捕获选区内容（在选区丢失前）
+        const fragment = range.cloneContents();
+        const tempContainer = document.createElement("div");
+        tempContainer.appendChild(fragment);
+        this.selectionContent = this.vditor.lute
+            .VditorDOM2Md(tempContainer.innerHTML)
+            .trim();
+        if (!this.selectionContent) {
+            this.selectionContent = range.toString().trim();
+        }
+
+        // 捕获行号
+        const getBlockIndex = (node: Node, editor: HTMLElement): number => {
+            let target = node;
+            let directChild: Element | null = 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 as Element;
+                }
+            }
+
+            // 检查直接子元素
+            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;
+        };
+
+        const startLine = getBlockIndex(range.startContainer, this.element);
+        const endLine = getBlockIndex(range.endContainer, this.element);
+        this.selectionLines = [startLine, endLine];
+
+        const editorRect = this.element.getBoundingClientRect();
+        const rect = range.getBoundingClientRect();
+
+        // 计算浮窗尺寸
+        this.selectPopover.style.display = "flex";
+        this.selectPopover.style.opacity = "0";
+        const popoverHeight = this.selectPopover.offsetHeight;
+        const popoverWidth = this.selectPopover.offsetWidth;
+
+        // 理想位置：选区上方居中
+        let top = rect.top - editorRect.top - popoverHeight - 8;
+        let left =
+            rect.left - editorRect.left + rect.width / 2 - popoverWidth / 2;
+
+        // 边界检查：顶部超出则翻转到底部
+        if (top < 0) {
+            top = rect.bottom - editorRect.top + 8;
+        }
+
+        // 边界检查：左右限制
+        const maxLeft = this.element.clientWidth - popoverWidth;
+        left = Math.max(0, Math.min(left, maxLeft));
+
+        this.selectPopover.style.top = `${top}px`;
+        this.selectPopover.style.left = `${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", top.toString());
+        this.selectPopover.setAttribute("data-top", top.toString());
+    }
+
+    /**
+     * 隐藏选择浮窗（淡出）
+     */
+    public hideSelectionPopover() {
+        if (this.selectPopover.style.display !== "flex") {
+            return;
+        }
+        this.selectPopover.style.opacity = "0";
+        this.selectPopover.style.transform = "scale(0.95)";
+        window.setTimeout(() => {
+            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);
+    }
+
+    /**
+     * 兼容旧接口：显示评论面板（映射为选择浮窗）
+     */
     public showComment() {
-        const position = getCursorPosition(this.element);
-        this.selectPopover.setAttribute(
-            "style",
-            `left:${position.left}px;display:block;top:${Math.max(-8, position.top - 21)}px`
-        );
+        this.showSelectionPopover();
     }
 
+    /**
+     * 兼容旧接口：隐藏评论面板（映射为选择浮窗隐藏）
+     */
     public hideComment() {
-        this.selectPopover.setAttribute("style", "display:none");
+        this.hideSelectionPopover();
     }
 
     public unbindListener() {
@@ -344,9 +581,162 @@ class WYSIWYG {
             "text/plain",
             vditor.lute.VditorDOM2Md(tempElement.innerHTML).trim()
         );
-        event.clipboardData.setData("text/html", "");
+        event.clipboardData.setData("text/html", tempElement.innerHTML);
     }
 
+    /**
+     * 构建选区剪贴板内容（纯文本 + 富文本）
+     */
+    private buildClipboardPayload(vditor: IVditor) {
+        const range = getSelection().getRangeAt(0);
+        const codeElement = hasClosestByMatchTag(range.startContainer, "CODE");
+        const codeEndElement = hasClosestByMatchTag(range.endContainer, "CODE");
+        if (
+            codeElement &&
+            codeEndElement &&
+            codeEndElement.isSameNode(codeElement)
+        ) {
+            const codeText =
+                codeElement.parentElement.tagName === "PRE"
+                    ? range.toString()
+                    : "`" + range.toString() + "`";
+            return { plainText: codeText, html: "" };
+        }
+        const aElement = hasClosestByMatchTag(range.startContainer, "A");
+        const aEndElement = hasClosestByMatchTag(range.endContainer, "A");
+        if (aElement && aEndElement && aEndElement.isSameNode(aElement)) {
+            let aTitle = aElement.getAttribute("title") || "";
+            if (aTitle) {
+                aTitle = ` "${aTitle}"`;
+            }
+            return {
+                plainText: `[${range.toString()}](${aElement.getAttribute("href")}${aTitle})`,
+                html: "",
+            };
+        }
+        const startPreview = hasClosestByClassName(
+            range.startContainer,
+            "vditor-wysiwyg__preview"
+        ) as HTMLElement;
+        const endPreview = hasClosestByClassName(
+            range.endContainer,
+            "vditor-wysiwyg__preview"
+        ) as HTMLElement;
+        const isMathPreview = (el: HTMLElement) => {
+            const first = el.firstElementChild as HTMLElement | null;
+            return !!first && first.classList.contains("language-math");
+        };
+        if (
+            startPreview &&
+            endPreview &&
+            startPreview.isSameNode(endPreview) &&
+            isMathPreview(startPreview)
+        ) {
+            return { plainText: range.toString(), html: "" };
+        }
+        const tempElement = document.createElement("div");
+        tempElement.appendChild(range.cloneContents());
+        return {
+            plainText: vditor.lute.VditorDOM2Md(tempElement.innerHTML).trim(),
+            html: tempElement.innerHTML,
+        };
+    }
+
+    /**
+     * 复制选区（按钮触发）
+     * - Clipboard API 优先，降级为 execCommand('copy') 调用原有 copy 逻辑
+     */
+    private copySelection(vditor: IVditor) {
+        const range = getSelection().getRangeAt(0);
+        if (range.toString().trim() === "") {
+            return;
+        }
+        const payload = this.buildClipboardPayload(vditor);
+        const writeClipboard = async () => {
+            // Safari 兼容：ClipboardItem 可能不可用
+            const ClipboardItemCtor = (window as any)["ClipboardItem"];
+            const navClipboard = (navigator as any).clipboard as
+                | { write?(items: unknown[]): Promise<void> }
+                | undefined;
+            if (
+                navClipboard?.write &&
+                typeof ClipboardItemCtor !== "undefined"
+            ) {
+                try {
+                    const item = new ClipboardItemCtor({
+                        "text/plain": new Blob([payload.plainText], {
+                            type: "text/plain",
+                        }),
+                        "text/html": new Blob([payload.html], {
+                            type: "text/html",
+                        }),
+                    });
+                    await navClipboard.write([item]);
+                    return true;
+                } catch {
+                    return false;
+                }
+            }
+            return false;
+        };
+        writeClipboard().then((ok) => {
+            if (!ok) {
+                document.execCommand("copy");
+            }
+        });
+        this.hideSelectionPopover();
+    }
+
+    /**
+     * 剪切选区（按钮触发）
+     * - 复制到剪贴板后删除选区，并加入撤销栈
+     */
+    private cutSelection(vditor: IVditor) {
+        const range = getSelection().getRangeAt(0);
+        if (range.toString().trim() === "") {
+            return;
+        }
+        const payload = this.buildClipboardPayload(vditor);
+        const writeClipboard = async () => {
+            const ClipboardItemCtor = (window as any)["ClipboardItem"];
+            const navClipboard = (navigator as any).clipboard as
+                | { write?(items: unknown[]): Promise<void> }
+                | undefined;
+            if (
+                navClipboard?.write &&
+                typeof ClipboardItemCtor !== "undefined"
+            ) {
+                try {
+                    const item = new ClipboardItemCtor({
+                        "text/plain": new Blob([payload.plainText], {
+                            type: "text/plain",
+                        }),
+                        "text/html": new Blob([payload.html], {
+                            type: "text/html",
+                        }),
+                    });
+                    await navClipboard.write([item]);
+                    return true;
+                } catch {
+                    return false;
+                }
+            }
+            return false;
+        };
+        writeClipboard().then((ok) => {
+            if (!ok) {
+                document.execCommand("cut");
+            } else {
+                document.execCommand("delete");
+            }
+            afterRenderEvent(vditor, {
+                enableAddUndoStack: true,
+                enableHint: false,
+                enableInput: true,
+            });
+        });
+        this.hideSelectionPopover();
+    }
     private bindEvent(vditor: IVditor) {
         this.unbindListener();
         window.addEventListener(
@@ -355,7 +745,7 @@ class WYSIWYG {
                 hidePanel(vditor, ["hint"]);
                 if (
                     this.popover.style.display !== "block" ||
-                    this.selectPopover.style.display !== "block"
+                    this.selectPopover.style.display !== "flex"
                 ) {
                     return;
                 }
@@ -376,7 +766,7 @@ class WYSIWYG {
                         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;
                         }
                     }
@@ -392,7 +782,7 @@ class WYSIWYG {
                 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;
                 }
             })