vditor 3.8.7

package/src/ts/ir/index.ts

@@ -0,0 +1,251 @@
+import {Constants} from "../constants";
+import {isCtrl, isFirefox} from "../util/compatibility";
+import {
+    blurEvent,
+    copyEvent, cutEvent, dblclickEvent,
+    dropEvent,
+    focusEvent,
+    hotkeyEvent,
+    scrollCenter,
+    selectEvent,
+} from "../util/editorCommonEvent";
+import {paste} from "../util/fixBrowserBehavior";
+import {hasClosestByAttribute, hasClosestByClassName} from "../util/hasClosest";
+import {
+    getEditorRange, setRangeByWbr,
+    setSelectionFocus,
+} from "../util/selection";
+import {clickToc} from "../util/toc";
+import {expandMarker} from "./expandMarker";
+import {highlightToolbarIR} from "./highlightToolbarIR";
+import {input} from "./input";
+import {processAfterRender, processHint} from "./process";
+
+class IR {
+    public range: Range;
+    public element: HTMLPreElement;
+    public processTimeoutId: number;
+    public hlToolbarTimeoutId: number;
+    public composingLock: boolean = false;
+    public preventInput: boolean;
+
+    constructor(vditor: IVditor) {
+        const divElement = document.createElement("div");
+        divElement.className = "vditor-ir";
+
+        divElement.innerHTML = `<pre class="vditor-reset" placeholder="${vditor.options.placeholder}"
+ contenteditable="true" spellcheck="false"></pre>`;
+
+        this.element = divElement.firstElementChild as HTMLPreElement;
+
+        this.bindEvent(vditor);
+
+        focusEvent(vditor, this.element);
+        dblclickEvent(vditor, this.element);
+        blurEvent(vditor, this.element);
+        hotkeyEvent(vditor, this.element);
+        selectEvent(vditor, this.element);
+        dropEvent(vditor, this.element);
+        copyEvent(vditor, this.element, this.copy);
+        cutEvent(vditor, this.element, this.copy);
+    }
+
+    private copy(event: ClipboardEvent, vditor: IVditor) {
+        const range = getSelection().getRangeAt(0);
+        if (range.toString() === "") {
+            return;
+        }
+        event.stopPropagation();
+        event.preventDefault();
+
+        const tempElement = document.createElement("div");
+        tempElement.appendChild(range.cloneContents());
+
+        event.clipboardData.setData("text/plain", vditor.lute.VditorIRDOM2Md(tempElement.innerHTML).trim());
+        event.clipboardData.setData("text/html", "");
+    }
+
+    private bindEvent(vditor: IVditor) {
+        this.element.addEventListener("paste", (event: ClipboardEvent & { target: HTMLElement }) => {
+            paste(vditor, event, {
+                pasteCode: (code: string) => {
+                    document.execCommand("insertHTML", false, code);
+                },
+            });
+        });
+
+        this.element.addEventListener("compositionstart", (event: InputEvent) => {
+            this.composingLock = true;
+        });
+
+        this.element.addEventListener("compositionend", (event: InputEvent) => {
+            if (!isFirefox()) {
+                input(vditor, getSelection().getRangeAt(0).cloneRange());
+            }
+            this.composingLock = false;
+        });
+
+        this.element.addEventListener("input", (event: InputEvent) => {
+            if (event.inputType === "deleteByDrag" || event.inputType === "insertFromDrop") {
+                // https://github.com/Vanessa219/vditor/issues/801 编辑器内容拖拽问题
+                return;
+            }
+            if (this.preventInput) {
+                this.preventInput = false;
+                return;
+            }
+            if (this.composingLock || event.data === "‘" || event.data === "“" || event.data === "《") {
+                return;
+            }
+            input(vditor, getSelection().getRangeAt(0).cloneRange(), false, event);
+        });
+
+        this.element.addEventListener("click", (event: MouseEvent & { target: HTMLInputElement }) => {
+            if (event.target.tagName === "INPUT") {
+                if (event.target.checked) {
+                    event.target.setAttribute("checked", "checked");
+                } else {
+                    event.target.removeAttribute("checked");
+                }
+                this.preventInput = true;
+                processAfterRender(vditor);
+                return;
+            }
+
+            const range = getEditorRange(vditor);
+
+            // 点击后光标落于预览区
+            let previewElement = hasClosestByClassName(event.target, "vditor-ir__preview");
+            if (!previewElement) {
+                previewElement = hasClosestByClassName(
+                    range.startContainer, "vditor-ir__preview");
+            }
+            if (previewElement) {
+                if (previewElement.previousElementSibling.firstElementChild) {
+                    range.selectNodeContents(previewElement.previousElementSibling.firstElementChild);
+                } else {
+                    // 行内数学公式
+                    range.selectNodeContents(previewElement.previousElementSibling);
+                }
+                range.collapse(true);
+                setSelectionFocus(range);
+                scrollCenter(vditor);
+            }
+
+            // 点击图片光标选中图片地址
+            if (event.target.tagName === "IMG") {
+                const linkElement =
+                    event.target.parentElement.querySelector<HTMLSpanElement>(".vditor-ir__marker--link");
+                if (linkElement) {
+                    range.selectNode(linkElement);
+                    setSelectionFocus(range);
+                }
+            }
+            // 打开链接
+            const aElement = hasClosestByAttribute(event.target, "data-type", "a");
+            if (aElement && (!aElement.classList.contains("vditor-ir__node--expand"))) {
+                window.open(aElement.querySelector(":scope > .vditor-ir__marker--link").textContent);
+                return;
+            }
+
+            if (event.target.isEqualNode(this.element) && this.element.lastElementChild && range.collapsed) {
+                const lastRect = this.element.lastElementChild.getBoundingClientRect();
+                if (event.y > lastRect.top + lastRect.height) {
+                    if (this.element.lastElementChild.tagName === "P" &&
+                        this.element.lastElementChild.textContent.trim().replace(Constants.ZWSP, "") === "") {
+                        range.selectNodeContents(this.element.lastElementChild);
+                        range.collapse(false);
+                    } else {
+                        this.element.insertAdjacentHTML("beforeend",
+                            `<p data-block="0">${Constants.ZWSP}<wbr></p>`);
+                        setRangeByWbr(this.element, range);
+                    }
+                }
+            }
+
+            if (range.toString() === "") {
+                expandMarker(range, vditor);
+            } else {
+                // https://github.com/Vanessa219/vditor/pull/681 当点击选中区域时 eventTarget 与 range 不一致，需延迟等待 range 发生变化
+                setTimeout(() => {
+                    expandMarker(getEditorRange(vditor), vditor);
+                });
+            }
+            clickToc(event, vditor);
+            highlightToolbarIR(vditor);
+        });
+
+        this.element.addEventListener("keyup", (event) => {
+            if (event.isComposing || isCtrl(event)) {
+                return;
+            }
+            if (event.key === "Enter") {
+                scrollCenter(vditor);
+            }
+            highlightToolbarIR(vditor);
+            if ((event.key === "Backspace" || event.key === "Delete") &&
+                vditor.ir.element.innerHTML !== "" && vditor.ir.element.childNodes.length === 1 &&
+                vditor.ir.element.firstElementChild && vditor.ir.element.firstElementChild.tagName === "P"
+                && vditor.ir.element.firstElementChild.childElementCount === 0
+                && (vditor.ir.element.textContent === "" || vditor.ir.element.textContent === "\n")) {
+                // 为空时显示 placeholder
+                vditor.ir.element.innerHTML = "";
+                return;
+            }
+            const range = getEditorRange(vditor);
+            if (event.key === "Backspace") {
+                // firefox headings https://github.com/Vanessa219/vditor/issues/211
+                if (isFirefox() && range.startContainer.textContent === "\n" && range.startOffset === 1) {
+                    range.startContainer.textContent = "";
+                    expandMarker(range, vditor);
+                }
+                // 数学公式前是空块，空块前是 table，在空块前删除，数学公式会多一个 br
+                this.element.querySelectorAll(".language-math").forEach((item) => {
+                    const brElement = item.querySelector("br");
+                    if (brElement) {
+                        brElement.remove();
+                    }
+                });
+            } else if (event.key.indexOf("Arrow") > -1) {
+                if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+                    processHint(vditor);
+                }
+                expandMarker(range, vditor);
+            } else if (event.keyCode === 229 && event.code === "" && event.key === "Unidentified") {
+                // https://github.com/Vanessa219/vditor/issues/508 IR 删除到节点需展开
+                expandMarker(range, vditor);
+            }
+
+            const previewRenderElement = hasClosestByClassName(range.startContainer, "vditor-ir__preview");
+
+            if (previewRenderElement) {
+                if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+                    if (previewRenderElement.previousElementSibling.firstElementChild) {
+                        range.selectNodeContents(previewRenderElement.previousElementSibling.firstElementChild);
+                    } else {
+                        // 行内数学公式/html entity
+                        range.selectNodeContents(previewRenderElement.previousElementSibling);
+                    }
+                    range.collapse(false);
+                    event.preventDefault();
+                    return true;
+                }
+                if (previewRenderElement.tagName === "SPAN" &&
+                    (event.key === "ArrowDown" || event.key === "ArrowRight")) {
+                    if (previewRenderElement.parentElement.getAttribute("data-type") === "html-entity") {
+                        // html entity
+                        previewRenderElement.parentElement.insertAdjacentText("afterend", Constants.ZWSP);
+                        range.setStart(previewRenderElement.parentElement.nextSibling, 1);
+                    } else {
+                        range.selectNodeContents(previewRenderElement.parentElement.lastElementChild);
+                    }
+                    range.collapse(false);
+                    event.preventDefault();
+                    return true;
+                }
+            }
+        });
+    }
+}
+
+export {IR};

package/src/ts/ir/input.ts

@@ -0,0 +1,231 @@
+import {Constants} from "../constants";
+import {isHeadingMD, isHrMD} from "../util/fixBrowserBehavior";
+import {
+    getTopList,
+    hasClosestBlock, hasClosestByAttribute,
+    hasClosestByClassName,
+} from "../util/hasClosest";
+import {hasClosestByTag} from "../util/hasClosestByHeadings";
+import {log} from "../util/log";
+import {processCodeRender} from "../util/processCode";
+import {getSelectPosition, setRangeByWbr} from "../util/selection";
+import {renderToc} from "../util/toc";
+import {processAfterRender} from "./process";
+
+export const input = (vditor: IVditor, range: Range, ignoreSpace = false, event?: InputEvent) => {
+    let blockElement = hasClosestBlock(range.startContainer);
+    // 前后可以输入空格
+    if (blockElement && !ignoreSpace && blockElement.getAttribute("data-type") !== "code-block") {
+        if ((isHrMD(blockElement.innerHTML) && blockElement.previousElementSibling) ||
+            isHeadingMD(blockElement.innerHTML)) {
+            return;
+        }
+
+        // 前后空格处理
+        const startOffset = getSelectPosition(blockElement, vditor.ir.element, range).start;
+
+        // 开始可以输入空格
+        let startSpace = true;
+        for (let i = startOffset - 1;
+            // 软换行后有空格
+             i > blockElement.textContent.substr(0, startOffset).lastIndexOf("\n");
+             i--) {
+            if (blockElement.textContent.charAt(i) !== " " &&
+                // 多个 tab 前删除不形成代码块 https://github.com/Vanessa219/vditor/issues/162 1
+                blockElement.textContent.charAt(i) !== "\t") {
+                startSpace = false;
+                break;
+            }
+        }
+        if (startOffset === 0) {
+            startSpace = false;
+        }
+
+        // 结尾可以输入空格
+        let endSpace = true;
+        for (let i = startOffset - 1; i < blockElement.textContent.length; i++) {
+            if (blockElement.textContent.charAt(i) !== " " && blockElement.textContent.charAt(i) !== "\n") {
+                endSpace = false;
+                break;
+            }
+        }
+
+        if (startSpace) {
+            return;
+        }
+        if (endSpace) {
+            const markerElement = hasClosestByClassName(range.startContainer, "vditor-ir__marker");
+            if (markerElement) {
+                // inline marker space https://github.com/Vanessa219/vditor/issues/239
+            } else {
+                const previousNode = range.startContainer.previousSibling as HTMLElement;
+                if (previousNode && previousNode.nodeType !== 3 && previousNode.classList.contains("vditor-ir__node--expand")) {
+                    // FireFox https://github.com/Vanessa219/vditor/issues/239
+                    previousNode.classList.remove("vditor-ir__node--expand");
+                }
+                return;
+            }
+        }
+    }
+
+    vditor.ir.element.querySelectorAll(".vditor-ir__node--expand").forEach((item) => {
+        item.classList.remove("vditor-ir__node--expand");
+    });
+
+    if (!blockElement) {
+        // 使用顶级块元素，应使用 innerHTML
+        blockElement = vditor.ir.element;
+    }
+
+    // document.exeComment insertHTML 会插入 wbr
+    if (!blockElement.querySelector("wbr")) {
+        const previewRenderElement = hasClosestByClassName(range.startContainer, "vditor-ir__preview");
+        if (previewRenderElement) {
+            previewRenderElement.previousElementSibling.insertAdjacentHTML("beforeend", "<wbr>");
+        } else {
+            range.insertNode(document.createElement("wbr"));
+        }
+    }
+
+    // 清除浏览器自带的样式
+    blockElement.querySelectorAll("[style]").forEach((item) => {
+        item.removeAttribute("style");
+    });
+
+    if (blockElement.getAttribute("data-type") === "link-ref-defs-block") {
+        // 修改链接引用
+        blockElement = vditor.ir.element;
+    }
+
+    const isIRElement = blockElement.isEqualNode(vditor.ir.element);
+    const footnoteElement = hasClosestByAttribute(blockElement, "data-type", "footnotes-block");
+    let html = "";
+    if (!isIRElement) {
+        const blockquoteElement = hasClosestByTag(range.startContainer, "BLOCKQUOTE");
+        // 列表需要到最顶层
+        const topListElement = getTopList(range.startContainer);
+        if (topListElement) {
+            blockElement = topListElement;
+        }
+
+        // 应到引用层，否则 > --- 会解析为 front-matter；列表中有 blockquote 则解析 blockquote；blockquote 中有列表则解析列表
+        if (blockquoteElement && (!topListElement || (topListElement && !blockquoteElement.contains(topListElement)))) {
+            blockElement = blockquoteElement;
+        }
+
+        // 修改脚注
+        if (footnoteElement) {
+            blockElement = footnoteElement;
+        }
+
+        html = blockElement.outerHTML;
+
+        if (blockElement.tagName === "UL" || blockElement.tagName === "OL") {
+            // 如果为列表的话，需要把上下的列表都重绘
+            const listPrevElement = blockElement.previousElementSibling;
+            const listNextElement = blockElement.nextElementSibling;
+            if (listPrevElement && (listPrevElement.tagName === "UL" || listPrevElement.tagName === "OL")) {
+                html = listPrevElement.outerHTML + html;
+                listPrevElement.remove();
+            }
+            if (listNextElement && (listNextElement.tagName === "UL" || listNextElement.tagName === "OL")) {
+                html = html + listNextElement.outerHTML;
+                listNextElement.remove();
+            }
+            // firefox 列表回车不会产生新的 list item https://github.com/Vanessa219/vditor/issues/194
+            html = html.replace("<div><wbr><br></div>", "<li><p><wbr><br></p></li>");
+        } else if (blockElement.previousElementSibling &&
+            blockElement.previousElementSibling.textContent.replace(Constants.ZWSP, "") !== "" &&
+            event && event.inputType === "insertParagraph") {
+            // 换行时需要处理上一段落
+            html = blockElement.previousElementSibling.outerHTML + html;
+            blockElement.previousElementSibling.remove();
+        }
+        // 添加链接引用
+        vditor.ir.element.querySelectorAll("[data-type='link-ref-defs-block']").forEach((item) => {
+            if (item && !(blockElement as HTMLElement).isEqualNode(item)) {
+                html += item.outerHTML;
+                item.remove();
+            }
+        });
+
+        // 添加脚注
+        vditor.ir.element.querySelectorAll("[data-type='footnotes-block']").forEach((item) => {
+            if (item && !(blockElement as HTMLElement).isEqualNode(item)) {
+                html += item.outerHTML;
+                item.remove();
+            }
+        });
+    } else {
+        html = blockElement.innerHTML;
+    }
+
+    log("SpinVditorIRDOM", html, "argument", vditor.options.debugger);
+    html = vditor.lute.SpinVditorIRDOM(html);
+    log("SpinVditorIRDOM", html, "result", vditor.options.debugger);
+
+    if (isIRElement) {
+        blockElement.innerHTML = html;
+    } else {
+        blockElement.outerHTML = html;
+
+        // 更新正文中的 tip
+        if (footnoteElement) {
+            const footnoteItemElement = hasClosestByAttribute(vditor.ir.element.querySelector("wbr"),
+                "data-type", "footnotes-def");
+            if (footnoteItemElement) {
+                const footnoteItemText = footnoteItemElement.textContent;
+                const marker = footnoteItemText.substring(1, footnoteItemText.indexOf("]:"));
+                const footnoteRefElement = vditor.ir.element.querySelector(`sup[data-type="footnotes-ref"][data-footnotes-label="${marker}"]`);
+                if (footnoteRefElement) {
+                    footnoteRefElement.setAttribute("aria-label",
+                        footnoteItemText.substr(marker.length + 3).trim().substr(0, 24));
+                }
+            }
+        }
+    }
+
+    //  linkref 合并及添加
+    let firstLinkRefDefElement: HTMLElement;
+    const allLinkRefDefsElement = vditor.ir.element.querySelectorAll("[data-type='link-ref-defs-block']");
+    allLinkRefDefsElement.forEach((item: HTMLElement, index) => {
+        if (index === 0) {
+            firstLinkRefDefElement = item;
+        } else {
+            firstLinkRefDefElement.insertAdjacentHTML("beforeend", item.innerHTML);
+            item.remove();
+        }
+    });
+    if (allLinkRefDefsElement.length > 0) {
+        vditor.ir.element.insertAdjacentElement("beforeend", allLinkRefDefsElement[0]);
+    }
+
+    // 脚注合并后添加的末尾
+    let firstFootnoteElement: HTMLElement;
+    const allFootnoteElement = vditor.ir.element.querySelectorAll("[data-type='footnotes-block']");
+    allFootnoteElement.forEach((item: HTMLElement, index) => {
+        if (index === 0) {
+            firstFootnoteElement = item;
+        } else {
+            firstFootnoteElement.insertAdjacentHTML("beforeend", item.innerHTML);
+            item.remove();
+        }
+    });
+    if (allFootnoteElement.length > 0) {
+        vditor.ir.element.insertAdjacentElement("beforeend", allFootnoteElement[0]);
+    }
+
+    setRangeByWbr(vditor.ir.element, range);
+
+    vditor.ir.element.querySelectorAll(".vditor-ir__preview[data-render='2']").forEach((item: HTMLElement) => {
+        processCodeRender(item, vditor);
+    });
+
+    renderToc(vditor);
+
+    processAfterRender(vditor, {
+        enableAddUndoStack: true,
+        enableHint: true,
+        enableInput: true,
+    });
+};