@yltrcc/vditor 0.0.1

package/src/ts/ir/expandMarker.ts

@@ -0,0 +1,79 @@
+import {hasClosestByClassName, hasTopClosestByClassName} from "../util/hasClosest";
+import {setSelectionFocus} from "../util/selection";
+
+const nextIsNode = (range: Range) => {
+    const startContainer = range.startContainer;
+    if (startContainer.nodeType === 3 && startContainer.nodeValue.length !== range.startOffset) {
+        return false;
+    }
+
+    let nextNode: HTMLElement = startContainer.nextSibling as HTMLElement;
+
+    while (nextNode && nextNode.textContent === "") {
+        nextNode = nextNode.nextSibling as HTMLElement;
+    }
+
+    if (!nextNode) {
+        // *em*|**string**
+        const markerElement = hasClosestByClassName(startContainer, "vditor-ir__marker");
+        if (markerElement && !markerElement.nextSibling) {
+            const parentNextNode = startContainer.parentElement.parentElement.nextSibling as HTMLElement;
+            if (parentNextNode && parentNextNode.nodeType !== 3 &&
+                parentNextNode.classList.contains("vditor-ir__node")) {
+                return parentNextNode;
+            }
+        }
+        return false;
+    } else if (nextNode && nextNode.nodeType !== 3 && nextNode.classList.contains("vditor-ir__node") &&
+        !nextNode.getAttribute("data-block")) {
+        // test|*em*
+        return nextNode;
+    }
+
+    return false;
+};
+
+const previousIsNode = (range: Range) => {
+    const startContainer = range.startContainer;
+    const previousNode = startContainer.previousSibling as HTMLElement;
+    if (startContainer.nodeType === 3 && range.startOffset === 0 && previousNode && previousNode.nodeType !== 3 &&
+        // *em*|text
+        previousNode.classList.contains("vditor-ir__node") && !previousNode.getAttribute("data-block")) {
+        return previousNode;
+    }
+    return false;
+};
+
+export const expandMarker = (range: Range, vditor: IVditor) => {
+    vditor.ir.element.querySelectorAll(".vditor-ir__node--expand").forEach((item) => {
+        item.classList.remove("vditor-ir__node--expand");
+    });
+
+    const nodeElement = hasTopClosestByClassName(range.startContainer, "vditor-ir__node");
+    const nodeElementEnd = !range.collapsed && hasTopClosestByClassName(range.endContainer, "vditor-ir__node");
+    // 选中文本为同一个 nodeElement 内时，需要展开
+    if (!range.collapsed && (!nodeElement || nodeElement !== nodeElementEnd)) {
+        return;
+    }
+
+    if (nodeElement) {
+        nodeElement.classList.add("vditor-ir__node--expand");
+        nodeElement.classList.remove("vditor-ir__node--hidden");
+        // https://github.com/Vanessa219/vditor/issues/615 safari中光标位置跳动
+        setSelectionFocus(range);
+    }
+
+    const nextNode = nextIsNode(range);
+    if (nextNode) {
+        nextNode.classList.add("vditor-ir__node--expand");
+        nextNode.classList.remove("vditor-ir__node--hidden");
+        return;
+    }
+
+    const previousNode = previousIsNode(range);
+    if (previousNode) {
+        previousNode.classList.add("vditor-ir__node--expand");
+        previousNode.classList.remove("vditor-ir__node--hidden");
+        return;
+    }
+};

package/src/ts/ir/highlightToolbarIR.ts

@@ -0,0 +1,97 @@
+import {Constants} from "../constants";
+import {disableToolbar, enableToolbar, removeCurrentToolbar, setCurrentToolbar} from "../toolbar/setToolbar";
+import {hasClosestByAttribute, hasClosestByMatchTag} from "../util/hasClosest";
+import {hasClosestByHeadings} from "../util/hasClosestByHeadings";
+import {getEditorRange, selectIsEditor} from "../util/selection";
+
+export const highlightToolbarIR = (vditor: IVditor) => {
+    clearTimeout(vditor[vditor.currentMode].hlToolbarTimeoutId);
+    vditor[vditor.currentMode].hlToolbarTimeoutId = window.setTimeout(() => {
+        if (vditor[vditor.currentMode].element.getAttribute("contenteditable") === "false") {
+            return;
+        }
+        if (!selectIsEditor(vditor[vditor.currentMode].element)) {
+            return;
+        }
+
+        removeCurrentToolbar(vditor.toolbar.elements, Constants.EDIT_TOOLBARS);
+        enableToolbar(vditor.toolbar.elements, Constants.EDIT_TOOLBARS);
+
+        const range = getEditorRange(vditor);
+        let typeElement = range.startContainer as HTMLElement;
+        if (range.startContainer.nodeType === 3) {
+            typeElement = range.startContainer.parentElement;
+        }
+        if (typeElement.classList.contains("vditor-reset")) {
+            typeElement = typeElement.childNodes[range.startOffset] as HTMLElement;
+        }
+
+        const headingElement = vditor.currentMode === "sv" ?
+            hasClosestByAttribute(typeElement, "data-type", "heading") : hasClosestByHeadings(typeElement);
+        if (headingElement) {
+            setCurrentToolbar(vditor.toolbar.elements, ["headings"]);
+        }
+
+        const quoteElement =
+            vditor.currentMode === "sv" ? hasClosestByAttribute(typeElement, "data-type", "blockquote") :
+                hasClosestByMatchTag(typeElement, "BLOCKQUOTE");
+        if (quoteElement) {
+            setCurrentToolbar(vditor.toolbar.elements, ["quote"]);
+        }
+
+        const strongElement = hasClosestByAttribute(typeElement, "data-type", "strong");
+        if (strongElement) {
+            setCurrentToolbar(vditor.toolbar.elements, ["bold"]);
+        }
+
+        const emElement = hasClosestByAttribute(typeElement, "data-type", "em");
+        if (emElement) {
+            setCurrentToolbar(vditor.toolbar.elements, ["italic"]);
+        }
+
+        const sElement = hasClosestByAttribute(typeElement, "data-type", "s");
+        if (sElement) {
+            setCurrentToolbar(vditor.toolbar.elements, ["strike"]);
+        }
+
+        const aElement = hasClosestByAttribute(typeElement, "data-type", "a");
+        if (aElement) {
+            setCurrentToolbar(vditor.toolbar.elements, ["link"]);
+        }
+
+        const liElement = hasClosestByMatchTag(typeElement, "LI");
+        if (liElement) {
+            if (liElement.classList.contains("vditor-task")) {
+                setCurrentToolbar(vditor.toolbar.elements, ["check"]);
+            } else if (liElement.parentElement.tagName === "OL") {
+                setCurrentToolbar(vditor.toolbar.elements, ["ordered-list"]);
+            } else if (liElement.parentElement.tagName === "UL") {
+                setCurrentToolbar(vditor.toolbar.elements, ["list"]);
+            }
+            enableToolbar(vditor.toolbar.elements, ["outdent", "indent"]);
+        } else {
+            disableToolbar(vditor.toolbar.elements, ["outdent", "indent"]);
+        }
+
+        const codeBlockElement = hasClosestByAttribute(typeElement, "data-type", "code-block");
+        if (codeBlockElement) {
+            disableToolbar(vditor.toolbar.elements, ["headings", "bold", "italic", "strike", "line", "quote",
+                "list", "ordered-list", "check", "code", "inline-code", "upload", "link", "table", "record"]);
+            setCurrentToolbar(vditor.toolbar.elements, ["code"]);
+        }
+
+        const codeElement = hasClosestByAttribute(typeElement, "data-type", "code");
+        if (codeElement) {
+            disableToolbar(vditor.toolbar.elements, ["headings", "bold", "italic", "strike", "line", "quote",
+                "list", "ordered-list", "check", "code", "upload", "link", "table", "record"]);
+            setCurrentToolbar(vditor.toolbar.elements, ["inline-code"]);
+        }
+
+        const tableElement = hasClosestByAttribute(typeElement, "data-type", "table");
+        if (tableElement) {
+            disableToolbar(vditor.toolbar.elements, ["headings", "list", "ordered-list", "check", "line",
+                "quote", "code", "table"]);
+        }
+
+    }, 200);
+};

package/src/ts/ir/index.ts

@@ -0,0 +1,265 @@
+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";
+import {hidePanel} from "../toolbar/setToolbar";
+
+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("scroll", () => {
+            hidePanel(vditor, ["hint"]);
+        });
+
+        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;
+                processAfterRender(vditor, {
+                    enableAddUndoStack: true,
+                    enableHint: true,
+                    enableInput: true,
+                });
+                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"))) {
+                if (vditor.options.link.click) {
+                    vditor.options.link.click(aElement.querySelector(":scope > .vditor-ir__marker--link"));
+                } else if (vditor.options.link.isOpen) {
+                    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};