@8btc/mditor 0.0.1

package/src/ts/wysiwyg/inlineTag.ts

@@ -0,0 +1,129 @@
+import {Constants} from "../constants";
+import {setRangeByWbr, setSelectionFocus} from "../util/selection";
+
+export const previoueIsEmptyA = (node: Node) => {
+    let previousNode = node.previousSibling as HTMLElement;
+    while (previousNode) {
+        if (previousNode.nodeType !== 3 && previousNode.tagName === "A" && !previousNode.previousSibling
+            && previousNode.innerHTML.replace(Constants.ZWSP, "") === "" && previousNode.nextSibling) {
+            return previousNode;
+        }
+        previousNode = previousNode.previousSibling as HTMLElement;
+    }
+    return false;
+};
+
+export const nextIsCode = (range: Range) => {
+    let nextNode: HTMLElement = range.startContainer.nextSibling as HTMLElement;
+    while (nextNode && nextNode.textContent === "") {
+        nextNode = nextNode.nextSibling as HTMLElement;
+    }
+
+    if (nextNode && nextNode.nodeType !== 3 && (nextNode.tagName === "CODE" ||
+        nextNode.getAttribute("data-type") === "math-inline" ||
+        nextNode.getAttribute("data-type") === "html-entity" ||
+        nextNode.getAttribute("data-type") === "html-inline")
+    ) {
+        return true;
+    }
+    return false;
+};
+
+export const getNextHTML = (node: Node) => {
+    let html = "";
+    let nextNode = node.nextSibling;
+    while (nextNode) {
+        if (nextNode.nodeType === 3) {
+            html += nextNode.textContent;
+        } else {
+            html += (nextNode as HTMLElement).outerHTML;
+        }
+        nextNode = nextNode.nextSibling;
+    }
+    return html;
+};
+
+export const getPreviousHTML = (node: Node) => {
+    let html = "";
+    let previousNode = node.previousSibling;
+    while (previousNode) {
+        if (previousNode.nodeType === 3) {
+            html = previousNode.textContent + html;
+        } else {
+            html = (previousNode as HTMLElement).outerHTML + html;
+        }
+        previousNode = previousNode.previousSibling;
+    }
+    return html;
+};
+
+export const getRenderElementNextNode = (blockCodeElement: HTMLElement) => {
+    let nextNode = blockCodeElement;
+    while (nextNode && !nextNode.nextSibling) {
+        nextNode = nextNode.parentElement;
+    }
+
+    return nextNode.nextSibling;
+};
+
+export const splitElement = (range: Range) => {
+    const previousHTML = getPreviousHTML(range.startContainer);
+    const nextHTML = getNextHTML(range.startContainer);
+    const text = range.startContainer.textContent;
+    const offset = range.startOffset;
+
+    let beforeHTML = "";
+    let afterHTML = "";
+
+    if (text.substr(0, offset) !== "" && text.substr(0, offset) !== Constants.ZWSP || previousHTML) {
+        beforeHTML = `${previousHTML}${text.substr(0, offset)}`;
+    }
+    if (text.substr(offset) !== "" && text.substr(offset) !== Constants.ZWSP || nextHTML) {
+        afterHTML = `${text.substr(offset)}${nextHTML}`;
+    }
+
+    return {
+        afterHTML,
+        beforeHTML,
+    };
+};
+
+export const modifyPre = (vditor: IVditor, range: Range) => {
+    // 没有被块元素包裹
+    Array.from(vditor.wysiwyg.element.childNodes).find((node: HTMLElement) => {
+        if (node.nodeType === 3) {
+            const pElement = document.createElement("p");
+            pElement.setAttribute("data-block", "0");
+            pElement.textContent = node.textContent;
+            // 为空按下 tab 且 tab = '    ' 时，range.startContainer 不为 node
+            const cloneRangeOffset = range.startContainer.nodeType === 3 ? range.startOffset : node.textContent.length;
+            node.parentNode.insertBefore(pElement, node);
+            node.remove();
+            range.setStart(pElement.firstChild, Math.min(pElement.firstChild.textContent.length, cloneRangeOffset));
+            range.collapse(true);
+            setSelectionFocus(range);
+            return true;
+        } else if (!node.getAttribute("data-block")) {
+            if (node.tagName === "P") {
+                node.remove();
+            } else {
+                if (node.tagName === "DIV") {
+                    range.insertNode(document.createElement("wbr"));
+                    // firefox 列表换行产生 div
+                    node.outerHTML = `<p data-block="0">${node.innerHTML}</p>`;
+                } else {
+                    if (node.tagName === "BR") {
+                        // firefox 空换行产生 BR
+                        node.outerHTML = `<p data-block="0">${node.outerHTML}<wbr></p>`;
+                    } else {
+                        range.insertNode(document.createElement("wbr"));
+                        node.outerHTML = `<p data-block="0">${node.outerHTML}</p>`;
+                    }
+                }
+                setRangeByWbr(vditor.wysiwyg.element, range);
+                range = getSelection().getRangeAt(0);
+            }
+            return true;
+        }
+    });
+};

package/src/ts/wysiwyg/input.ts

@@ -0,0 +1,212 @@
+import {
+    getTopList,
+    hasClosestBlock, hasClosestByAttribute, hasTopClosestByTag,
+} from "../util/hasClosest";
+import {hasClosestByTag} from "../util/hasClosestByHeadings";
+import {log} from "../util/log";
+import {processCodeRender} from "../util/processCode";
+import {setRangeByWbr} from "../util/selection";
+import {renderToc} from "../util/toc";
+import {afterRenderEvent} from "./afterRenderEvent";
+import {previoueIsEmptyA} from "./inlineTag";
+
+export const input = (vditor: IVditor, range: Range, event?: InputEvent) => {
+    let blockElement = hasClosestBlock(range.startContainer);
+
+    if (!blockElement) {
+        // 使用顶级块元素，应使用 innerHTML
+        blockElement = vditor.wysiwyg.element;
+    }
+
+    if (event && event.inputType !== "formatItalic"
+        && event.inputType !== "deleteByDrag"
+        && event.inputType !== "insertFromDrop"
+        && event.inputType !== "formatBold"
+        && event.inputType !== "formatRemove"
+        && event.inputType !== "formatStrikeThrough"
+        && event.inputType !== "insertUnorderedList"
+        && event.inputType !== "insertOrderedList"
+        && event.inputType !== "formatOutdent"
+        && event.inputType !== "formatIndent"
+        && event.inputType !== ""   // document.execCommand('unlink', false)
+        || !event
+    ) {
+        const previousAEmptyElement = previoueIsEmptyA(range.startContainer);
+        if (previousAEmptyElement) {
+            // 链接结尾回车不应该复制到下一行 https://github.com/Vanessa219/vditor/issues/163
+            previousAEmptyElement.remove();
+        }
+
+        // 保存光标
+        vditor.wysiwyg.element.querySelectorAll("wbr").forEach((wbr) => {
+            wbr.remove();
+        });
+        range.insertNode(document.createElement("wbr"));
+
+        // 在行首进行删除，后面的元素会带有样式，需清除
+        blockElement.querySelectorAll("[style]").forEach((item) => {
+            item.removeAttribute("style");
+        });
+
+        // 移除空评论
+        blockElement.querySelectorAll(".vditor-comment").forEach((item) => {
+            if (item.textContent.trim() === "") {
+                item.classList.remove("vditor-comment", "vditor-comment--focus");
+                item.removeAttribute("data-cmtids");
+            }
+        });
+        //  在有评论的行首换行后，该行的前一段会带有评论标识
+        blockElement.previousElementSibling?.querySelectorAll(".vditor-comment").forEach((item) => {
+            if (item.textContent.trim() === "") {
+                item.classList.remove("vditor-comment", "vditor-comment--focus");
+                item.removeAttribute("data-cmtids");
+            }
+        });
+
+        let html = "";
+        if (blockElement.getAttribute("data-type") === "link-ref-defs-block") {
+            // 修改链接引用
+            blockElement = vditor.wysiwyg.element;
+        }
+
+        const isWYSIWYGElement = blockElement.isEqualNode(vditor.wysiwyg.element);
+        const footnoteElement = hasClosestByAttribute(blockElement, "data-type", "footnotes-block");
+
+        if (!isWYSIWYGElement) {
+            // 列表需要到最顶层
+            const topListElement = getTopList(range.startContainer);
+            if (topListElement && !footnoteElement) {
+                const blockquoteElement = hasClosestByTag(range.startContainer, "BLOCKQUOTE");
+                if (blockquoteElement) {
+                    // li 中有 blockquote 就只渲染 blockquote
+                    blockElement = hasClosestBlock(range.startContainer) || blockElement;
+                } else {
+                    blockElement = topListElement;
+                }
+            }
+
+            // 修改脚注
+            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>");
+            }
+
+            if (!blockElement.innerText.startsWith("```")) {
+                // 添加链接引用
+                vditor.wysiwyg.element.querySelectorAll("[data-type='link-ref-defs-block']").forEach((item) => {
+                    if (item && !(blockElement as HTMLElement).isEqualNode(item)) {
+                        html += item.outerHTML;
+                        item.remove();
+                    }
+                });
+
+                // 添加脚注
+                vditor.wysiwyg.element.querySelectorAll("[data-type='footnotes-block']").forEach((item) => {
+                    if (item && !(blockElement as HTMLElement).isEqualNode(item)) {
+                        html += item.outerHTML;
+                        item.remove();
+                    }
+                });
+            }
+        } else {
+            html = blockElement.innerHTML;
+        }
+
+        // 合并多个 em， strong，s。以防止多个相同元素在一起时不满足 commonmark 规范，出现标记符
+        html = html.replace(/<\/(strong|b)><strong data-marker="\W{2}">/g, "")
+            .replace(/<\/(em|i)><em data-marker="\W{1}">/g, "")
+            .replace(/<\/(s|strike)><s data-marker="~{1,2}">/g, "");
+
+        if (html === '<p data-block="0">```<wbr></p>' && vditor.hint.recentLanguage) {
+            html = '<p data-block="0">```<wbr></p>'.replace("```", "```" + vditor.hint.recentLanguage);
+        }
+
+        log("SpinVditorDOM", html, "argument", vditor.options.debugger);
+        html = vditor.lute.SpinVditorDOM(html);
+        log("SpinVditorDOM", html, "result", vditor.options.debugger);
+
+        if (isWYSIWYGElement) {
+            blockElement.innerHTML = html;
+        } else {
+            blockElement.outerHTML = html;
+
+            if (footnoteElement) {
+                // 更新正文中的 tip
+                const footnoteItemElement = hasTopClosestByTag(vditor.wysiwyg.element.querySelector("wbr"), "LI");
+                if (footnoteItemElement) {
+                    const footnoteRefElement = vditor.wysiwyg.element.querySelector(`sup[data-type="footnotes-ref"][data-footnotes-label="${footnoteItemElement.getAttribute("data-marker")}"]`);
+                    if (footnoteRefElement) {
+                        footnoteRefElement.setAttribute("aria-label",
+                            footnoteItemElement.textContent.trim().substr(0, 24));
+                    }
+                }
+            }
+        }
+
+        let firstLinkRefDefElement: Element;
+        const allLinkRefDefsElement = vditor.wysiwyg.element.querySelectorAll("[data-type='link-ref-defs-block']");
+        allLinkRefDefsElement.forEach((item, index) => {
+            if (index === 0) {
+                firstLinkRefDefElement = item;
+            } else {
+                firstLinkRefDefElement.insertAdjacentHTML("beforeend", item.innerHTML);
+                item.remove();
+            }
+        });
+        if (allLinkRefDefsElement.length > 0) {
+            vditor.wysiwyg.element.insertAdjacentElement("beforeend", allLinkRefDefsElement[0]);
+        }
+
+        // 脚注合并后添加的末尾
+        let firstFootnoteElement: Element;
+        const allFootnoteElement = vditor.wysiwyg.element.querySelectorAll("[data-type='footnotes-block']");
+        allFootnoteElement.forEach((item, index) => {
+            if (index === 0) {
+                firstFootnoteElement = item;
+            } else {
+                firstFootnoteElement.insertAdjacentHTML("beforeend", item.innerHTML);
+                item.remove();
+            }
+        });
+        if (allFootnoteElement.length > 0) {
+            vditor.wysiwyg.element.insertAdjacentElement("beforeend", allFootnoteElement[0]);
+        }
+
+        // 设置光标
+        setRangeByWbr(vditor.wysiwyg.element, range);
+
+        vditor.wysiwyg.element.querySelectorAll(".vditor-wysiwyg__preview[data-render='2']")
+            .forEach((item: HTMLElement) => {
+                processCodeRender(item, vditor);
+            });
+
+        if (event && (event.inputType === "deleteContentBackward" || event.inputType === "deleteContentForward") &&
+            vditor.options.comment.enable) {
+            vditor.wysiwyg.triggerRemoveComment(vditor);
+            vditor.options.comment.adjustTop(vditor.wysiwyg.getComments(vditor, true));
+        }
+    }
+    renderToc(vditor);
+    afterRenderEvent(vditor, {
+        enableAddUndoStack: true,
+        enableHint: true,
+        enableInput: true,
+    });
+};