vditor 3.8.7

package/src/ts/util/getSelectText.ts

@@ -0,0 +1,8 @@
+import {selectIsEditor} from "./selection";
+
+export const getSelectText = (editor: HTMLElement, range?: Range) => {
+    if (selectIsEditor(editor, range)) {
+        return getSelection().toString();
+    }
+    return "";
+};

package/src/ts/util/hasClosest.ts

@@ -0,0 +1,154 @@
+import {hasClosestByTag} from "./hasClosestByHeadings";
+
+export const hasTopClosestByClassName = (element: Node, className: string) => {
+    let closest = hasClosestByClassName(element, className);
+    let parentClosest: boolean | HTMLElement = false;
+    let findTop = false;
+    while (closest && !closest.classList.contains("vditor-reset") && !findTop) {
+        parentClosest = hasClosestByClassName(closest.parentElement, className);
+        if (parentClosest) {
+            closest = parentClosest;
+        } else {
+            findTop = true;
+        }
+    }
+    return closest || false;
+};
+
+export const hasTopClosestByAttribute = (element: Node, attr: string, value: string) => {
+    let closest = hasClosestByAttribute(element, attr, value);
+    let parentClosest: boolean | HTMLElement = false;
+    let findTop = false;
+    while (closest && !closest.classList.contains("vditor-reset") && !findTop) {
+        parentClosest = hasClosestByAttribute(closest.parentElement, attr, value);
+        if (parentClosest) {
+            closest = parentClosest;
+        } else {
+            findTop = true;
+        }
+    }
+    return closest || false;
+};
+
+export const hasTopClosestByTag = (element: Node, nodeName: string) => {
+    let closest = hasClosestByTag(element, nodeName);
+    let parentClosest: boolean | HTMLElement = false;
+    let findTop = false;
+    while (closest && !closest.classList.contains("vditor-reset") && !findTop) {
+        parentClosest = hasClosestByTag(closest.parentElement, nodeName);
+        if (parentClosest) {
+            closest = parentClosest;
+        } else {
+            findTop = true;
+        }
+    }
+    return closest || false;
+};
+
+export const getTopList = (element: Node) => {
+    const topUlElement = hasTopClosestByTag(element, "UL");
+    const topOlElement = hasTopClosestByTag(element, "OL");
+    let topListElement = topUlElement;
+    if (topOlElement && (!topUlElement || (topUlElement && topOlElement.contains(topUlElement)))) {
+        topListElement = topOlElement;
+    }
+    return topListElement;
+};
+
+export const hasClosestByAttribute = (element: Node, attr: string, value: string) => {
+    if (!element) {
+        return false;
+    }
+    if (element.nodeType === 3) {
+        element = element.parentElement;
+    }
+    let e = element as HTMLElement;
+    let isClosest = false;
+    while (e && !isClosest && !e.classList.contains("vditor-reset")) {
+        if (e.getAttribute(attr) === value) {
+            isClosest = true;
+        } else {
+            e = e.parentElement;
+        }
+    }
+    return isClosest && e;
+};
+
+export const hasClosestBlock = (element: Node) => {
+    if (!element) {
+        return false;
+    }
+    if (element.nodeType === 3) {
+        element = element.parentElement;
+    }
+    let e = element as HTMLElement;
+    let isClosest = false;
+
+    const blockElement = hasClosestByAttribute(element as HTMLElement, "data-block", "0");
+    if (blockElement) {
+        return blockElement;
+    }
+
+    while (e && !isClosest && !e.classList.contains("vditor-reset")) {
+        if (e.tagName === "H1" ||
+            e.tagName === "H2" ||
+            e.tagName === "H3" ||
+            e.tagName === "H4" ||
+            e.tagName === "H5" ||
+            e.tagName === "H6" ||
+            e.tagName === "P" ||
+            e.tagName === "BLOCKQUOTE" ||
+            e.tagName === "OL" ||
+            e.tagName === "UL") {
+            isClosest = true;
+        } else {
+            e = e.parentElement;
+        }
+    }
+    return isClosest && e;
+};
+
+export const hasClosestByMatchTag = (element: Node, nodeName: string) => {
+    if (!element) {
+        return false;
+    }
+    if (element.nodeType === 3) {
+        element = element.parentElement;
+    }
+    let e = element as HTMLElement;
+    let isClosest = false;
+    while (e && !isClosest && !e.classList.contains("vditor-reset")) {
+        if (e.nodeName === nodeName) {
+            isClosest = true;
+        } else {
+            e = e.parentElement;
+        }
+    }
+    return isClosest && e;
+};
+
+export const hasClosestByClassName = (element: Node, className: string) => {
+    if (!element) {
+        return false;
+    }
+    if (element.nodeType === 3) {
+        element = element.parentElement;
+    }
+    let e = element as HTMLElement;
+    let isClosest = false;
+    while (e && !isClosest && !e.classList.contains("vditor-reset")) {
+        if (e.classList.contains(className)) {
+            isClosest = true;
+        } else {
+            e = e.parentElement;
+        }
+    }
+    return isClosest && e;
+};
+
+export const getLastNode = (node: Node) => {
+    while (node && node.lastChild) {
+        node = node.lastChild;
+    }
+    return node;
+};

package/src/ts/util/hasClosestByHeadings.ts

@@ -0,0 +1,27 @@
+// NOTE: 减少 method.ts 打包，故从 hasClosest.ts 中拆分
+export const hasClosestByTag = (element: Node, nodeName: string) => {
+    if (!element) {
+        return false;
+    }
+    if (element.nodeType === 3) {
+        element = element.parentElement;
+    }
+    let e = element as HTMLElement;
+    let isClosest = false;
+    while (e && !isClosest && !e.classList.contains("vditor-reset")) {
+        if (e.nodeName.indexOf(nodeName) === 0) {
+            isClosest = true;
+        } else {
+            e = e.parentElement;
+        }
+    }
+    return isClosest && e;
+};
+
+export const hasClosestByHeadings = (element: Node) => {
+    const headingElement = hasClosestByTag(element, "H");
+    if (headingElement && headingElement.tagName.length === 2 && headingElement.tagName !== "HR") {
+        return headingElement;
+    }
+    return false;
+};

package/src/ts/util/highlightToolbar.ts

@@ -0,0 +1,10 @@
+import {highlightToolbarIR} from "../ir/highlightToolbarIR";
+import {highlightToolbarWYSIWYG} from "../wysiwyg/highlightToolbarWYSIWYG";
+
+export const highlightToolbar = (vditor: IVditor) => {
+    if (vditor.currentMode === "wysiwyg") {
+        highlightToolbarWYSIWYG(vditor);
+    } else if (vditor.currentMode === "ir") {
+        highlightToolbarIR(vditor);
+    }
+};

package/src/ts/util/hotKey.ts

@@ -0,0 +1,54 @@
+import {isCtrl, isFirefox} from "./compatibility";
+
+// 是否匹配 ⇧⌘[] / ⌘[] / ⌥[] / ⌥⌘[] / ⇧Tab / []
+export const matchHotKey = (hotKey: string, event: KeyboardEvent) => {
+    if (hotKey === "") {
+        return false;
+    }
+
+    // []
+    if (hotKey.indexOf("⇧") === -1 && hotKey.indexOf("⌘") === -1 && hotKey.indexOf("⌥") === -1) {
+        if (!isCtrl(event) && !event.altKey && !event.shiftKey && event.code === hotKey) {
+            return true;
+        }
+        return false;
+    }
+
+    // 是否匹配 ⇧Tab
+    if (hotKey === "⇧Tab") {
+        if (!isCtrl(event) && !event.altKey && event.shiftKey && event.code === "Tab") {
+            return true;
+        }
+        return false;
+    }
+
+    let hotKeys = hotKey.split("");
+    if (hotKey.startsWith("⌥")) {
+        // 是否匹配 ⌥[] / ⌥⌘[]
+        const keyCode = hotKeys.length === 3 ? hotKeys[2] : hotKeys[1];
+        if ((hotKeys.length === 3 ? isCtrl(event) : !isCtrl(event)) && event.altKey && !event.shiftKey &&
+            event.code === (/^[0-9]$/.test(keyCode) ? "Digit" : "Key") + keyCode) {
+            return true;
+        }
+        return false;
+    }
+
+    // 是否匹配 ⇧⌘[] / ⌘[]
+    if (hotKey === "⌘Enter") {
+        hotKeys = ["⌘", "Enter"];
+    }
+    const hasShift = hotKeys.length > 2 && (hotKeys[0] === "⇧");
+    let key = (hasShift ? hotKeys[2] : hotKeys[1]);
+    if (hasShift && (isFirefox() || !/Mac/.test(navigator.platform))) {
+        if (key === "-") {
+            key = "_";
+        } else if (key === "=") {
+            key = "+";
+        }
+    }
+    if (isCtrl(event) && event.key.toLowerCase() === key.toLowerCase() && !event.altKey
+        && ((!hasShift && !event.shiftKey) || (hasShift && event.shiftKey))) {
+        return true;
+    }
+    return false;
+};

package/src/ts/util/log.ts

@@ -0,0 +1,6 @@
+export const log = (method: string, content: string, type: string, print: boolean) => {
+    if (print) {
+        // @ts-ignore
+        console.log(`${method} - ${type}: ${content}`);
+    }
+};

package/src/ts/util/merge.ts

@@ -0,0 +1,18 @@
+export const merge = (...options: any[]) => {
+    const target: any = {};
+    const merger = (obj: any) => {
+        for (const prop in obj) {
+            if (obj.hasOwnProperty(prop)) {
+                if (Object.prototype.toString.call(obj[prop]) === "[object Object]") {
+                    target[prop] = merge(target[prop], obj[prop]);
+                } else {
+                    target[prop] = obj[prop];
+                }
+            }
+        }
+    };
+    for (let i = 0; i < options.length; i++) {
+        merger(options[i]);
+    }
+    return target;
+};

package/src/ts/util/processCode.ts

@@ -0,0 +1,90 @@
+import {abcRender} from "../markdown/abcRender";
+import {chartRender} from "../markdown/chartRender";
+import {codeRender} from "../markdown/codeRender";
+import {flowchartRender} from "../markdown/flowchartRender";
+import {graphvizRender} from "../markdown/graphvizRender";
+import {highlightRender} from "../markdown/highlightRender";
+import {mathRender} from "../markdown/mathRender";
+import {mermaidRender} from "../markdown/mermaidRender";
+import {mindmapRender} from "../markdown/mindmapRender";
+import {plantumlRender} from "../markdown/plantumlRender";
+
+export const processPasteCode = (html: string, text: string, type = "sv") => {
+    const tempElement = document.createElement("div");
+    tempElement.innerHTML = html;
+    let isCode = false;
+    if (tempElement.childElementCount === 1 &&
+        (tempElement.lastElementChild as HTMLElement).style.fontFamily.indexOf("monospace") > -1) {
+        // VS Code
+        isCode = true;
+    }
+    const pres = tempElement.querySelectorAll("pre");
+    if (tempElement.childElementCount === 1 && pres.length === 1
+        && pres[0].className !== "vditor-wysiwyg"
+        && pres[0].className !== "vditor-sv") {
+        // IDE
+        isCode = true;
+    }
+    if (html.indexOf('\n<p class="p1">') === 0) {
+        // Xcode
+        isCode = true;
+    }
+    if (tempElement.childElementCount === 1 && tempElement.firstElementChild.tagName === "TABLE" &&
+        tempElement.querySelector(".line-number") && tempElement.querySelector(".line-content")) {
+        // 网页源码
+        isCode = true;
+    }
+
+    if (isCode) {
+        const code = text || html;
+        if (/\n/.test(code) || pres.length === 1) {
+            if (type === "wysiwyg") {
+                return `<div class="vditor-wysiwyg__block" data-block="0" data-type="code-block"><pre><code>${
+                    code.replace(/&/g, "&amp;").replace(/</g, "&lt;")}<wbr></code></pre></div>`;
+            }
+            return "\n```\n" + code.replace(/&/g, "&amp;").replace(/</g, "&lt;") + "\n```";
+        } else {
+            if (type === "wysiwyg") {
+                return `<code>${code.replace(/&/g, "&amp;").replace(/</g, "&lt;")}</code><wbr>`;
+            }
+            return `\`${code}\``;
+        }
+    }
+    return false;
+};
+
+export const processCodeRender = (previewPanel: HTMLElement, vditor: IVditor) => {
+    if (!previewPanel) {
+        return;
+    }
+    if (previewPanel.parentElement.getAttribute("data-type") === "html-block") {
+        previewPanel.setAttribute("data-render", "1");
+        return;
+    }
+    const language = previewPanel.firstElementChild.className.replace("language-", "");
+    if (!language) {
+        return;
+    }
+    if (language === "abc") {
+        abcRender(previewPanel, vditor.options.cdn);
+    } else if (language === "mermaid") {
+        mermaidRender(previewPanel, vditor.options.cdn, vditor.options.theme);
+    } else if (language === "flowchart") {
+        flowchartRender(previewPanel, vditor.options.cdn);
+    } else if (language === "echarts") {
+        chartRender(previewPanel, vditor.options.cdn, vditor.options.theme);
+    } else if (language === "mindmap") {
+        mindmapRender(previewPanel, vditor.options.cdn, vditor.options.theme);
+    } else if (language === "plantuml") {
+        plantumlRender(previewPanel, vditor.options.cdn);
+    } else if (language === "graphviz") {
+        graphvizRender(previewPanel, vditor.options.cdn);
+    } else if (language === "math") {
+        mathRender(previewPanel, {cdn: vditor.options.cdn, math: vditor.options.preview.math});
+    } else {
+        highlightRender(Object.assign({}, vditor.options.preview.hljs), previewPanel, vditor.options.cdn);
+        codeRender(previewPanel);
+    }
+
+    previewPanel.setAttribute("data-render", "1");
+};

package/src/ts/util/selection.ts

@@ -0,0 +1,275 @@
+import {Constants} from "../constants";
+import {isChrome} from "./compatibility";
+import {hasClosestBlock, hasClosestByClassName} from "./hasClosest";
+
+export const getEditorRange = (vditor: IVditor) => {
+    let range: Range;
+    const element = vditor[vditor.currentMode].element;
+    if (getSelection().rangeCount > 0) {
+        range = getSelection().getRangeAt(0);
+        if (element.isEqualNode(range.startContainer) || element.contains(range.startContainer)) {
+            return range;
+        }
+    }
+    if (vditor[vditor.currentMode].range) {
+        return vditor[vditor.currentMode].range;
+    }
+    element.focus();
+    range = element.ownerDocument.createRange();
+    range.setStart(element, 0);
+    range.collapse(true);
+    return range;
+};
+
+export const getCursorPosition = (editor: HTMLElement) => {
+    const range = window.getSelection().getRangeAt(0);
+    if (!editor.contains(range.startContainer) && !hasClosestByClassName(range.startContainer, "vditor-panel--none")) {
+        return {
+            left: 0,
+            top: 0,
+        };
+    }
+    const parentRect = editor.parentElement.getBoundingClientRect();
+    let cursorRect;
+    if (range.getClientRects().length === 0) {
+        if (range.startContainer.nodeType === 3) {
+            // 空行时，会出现没有 br 的情况，需要根据父元素 <p> 获取位置信息
+            const parent = range.startContainer.parentElement;
+            if (parent && parent.getClientRects().length > 0) {
+                cursorRect = parent.getClientRects()[0];
+            } else {
+                return {
+                    left: 0,
+                    top: 0,
+                };
+            }
+        } else {
+            const children = (range.startContainer as Element).children;
+            if (children[range.startOffset] &&
+                children[range.startOffset].getClientRects().length > 0) {
+                // markdown 模式回车
+                cursorRect = children[range.startOffset].getClientRects()[0];
+            } else if (range.startContainer.childNodes.length > 0) {
+                // in table or code block
+                const cloneRange = range.cloneRange();
+                range.selectNode(range.startContainer.childNodes[Math.max(0, range.startOffset - 1)]);
+                cursorRect = range.getClientRects()[0];
+                range.setEnd(cloneRange.endContainer, cloneRange.endOffset);
+                range.setStart(cloneRange.startContainer, cloneRange.startOffset);
+            } else {
+                cursorRect = (range.startContainer as HTMLElement).getClientRects()[0];
+            }
+            if (!cursorRect) {
+                let parentElement = range.startContainer.childNodes[range.startOffset] as HTMLElement;
+                while (!parentElement.getClientRects ||
+                (parentElement.getClientRects && parentElement.getClientRects().length === 0)) {
+                    parentElement = parentElement.parentElement;
+                }
+                cursorRect = parentElement.getClientRects()[0];
+            }
+        }
+
+    } else {
+        cursorRect = range.getClientRects()[0];
+    }
+
+    return {
+        left: cursorRect.left - parentRect.left,
+        top: cursorRect.top - parentRect.top,
+    };
+};
+
+export const selectIsEditor = (editor: HTMLElement, range?: Range) => {
+    if (!range) {
+        if (getSelection().rangeCount === 0) {
+            return false;
+        } else {
+            range = getSelection().getRangeAt(0);
+        }
+    }
+    const container = range.commonAncestorContainer;
+
+    return editor.isEqualNode(container) || editor.contains(container);
+};
+
+export const setSelectionFocus = (range: Range) => {
+    const selection = window.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(range);
+};
+
+export const getSelectPosition = (selectElement: HTMLElement, editorElement: HTMLElement, range?: Range) => {
+    const position = {
+        end: 0,
+        start: 0,
+    };
+
+    if (!range) {
+        if (getSelection().rangeCount === 0) {
+            return position;
+        }
+        range = window.getSelection().getRangeAt(0);
+    }
+
+    if (selectIsEditor(editorElement, range)) {
+        const preSelectionRange = range.cloneRange();
+        if (selectElement.childNodes[0] && selectElement.childNodes[0].childNodes[0]) {
+            preSelectionRange.setStart(selectElement.childNodes[0].childNodes[0], 0);
+        } else {
+            preSelectionRange.selectNodeContents(selectElement);
+        }
+        preSelectionRange.setEnd(range.startContainer, range.startOffset);
+        position.start = preSelectionRange.toString().length;
+        position.end = position.start + range.toString().length;
+    }
+    return position;
+};
+
+export const setSelectionByPosition = (start: number, end: number, editor: HTMLElement) => {
+    let charIndex = 0;
+    let line = 0;
+    let pNode = editor.childNodes[line];
+    let foundStart = false;
+    let stop = false;
+    start = Math.max(0, start);
+    end = Math.max(0, end);
+
+    const range = editor.ownerDocument.createRange();
+    range.setStart(pNode || editor, 0);
+    range.collapse(true);
+
+    while (!stop && pNode) {
+        const nextCharIndex = charIndex + pNode.textContent.length;
+        if (!foundStart && start >= charIndex && start <= nextCharIndex) {
+            if (start === 0) {
+                range.setStart(pNode, 0);
+            } else {
+                if (pNode.childNodes[0].nodeType === 3) {
+                    range.setStart(pNode.childNodes[0], start - charIndex);
+                } else if (pNode.nextSibling) {
+                    range.setStartBefore(pNode.nextSibling);
+                } else {
+                    range.setStartAfter(pNode);
+                }
+            }
+            foundStart = true;
+            if (start === end) {
+                stop = true;
+                break;
+            }
+        }
+        if (foundStart && end >= charIndex && end <= nextCharIndex) {
+            if (end === 0) {
+                range.setEnd(pNode, 0);
+            } else {
+                if (pNode.childNodes[0].nodeType === 3) {
+                    range.setEnd(pNode.childNodes[0], end - charIndex);
+                } else if (pNode.nextSibling) {
+                    range.setEndBefore(pNode.nextSibling);
+                } else {
+                    range.setEndAfter(pNode);
+                }
+            }
+            stop = true;
+        }
+        charIndex = nextCharIndex;
+        pNode = editor.childNodes[++line];
+    }
+
+    if (!stop && editor.childNodes[line - 1]) {
+        range.setStartBefore(editor.childNodes[line - 1]);
+    }
+
+    setSelectionFocus(range);
+    return range;
+};
+
+export const setRangeByWbr = (element: HTMLElement, range: Range) => {
+    const wbrElement = element.querySelector("wbr");
+    if (!wbrElement) {
+        return;
+    }
+    if (!wbrElement.previousElementSibling) {
+        if (wbrElement.previousSibling) {
+            // text<wbr>
+            range.setStart(wbrElement.previousSibling, wbrElement.previousSibling.textContent.length);
+        } else if (wbrElement.nextSibling) {
+            if (wbrElement.nextSibling.nodeType === 3) {
+                // <wbr>text
+                range.setStart(wbrElement.nextSibling, 0);
+            } else {
+                // <wbr><br> https://github.com/Vanessa219/vditor/issues/400
+                range.setStartBefore(wbrElement.nextSibling);
+            }
+        } else {
+            // 内容为空
+            range.setStart(wbrElement.parentElement, 0);
+        }
+    } else {
+        if (wbrElement.previousElementSibling.isSameNode(wbrElement.previousSibling)) {
+            if (wbrElement.previousElementSibling.lastChild) {
+                // <em>text</em><wbr>
+                range.setStartBefore(wbrElement);
+                range.collapse(true);
+                setSelectionFocus(range);
+                // fix Chrome set range bug: **c**
+                if (isChrome() && (wbrElement.previousElementSibling.tagName === "EM" ||
+                    wbrElement.previousElementSibling.tagName === "STRONG" ||
+                    wbrElement.previousElementSibling.tagName === "S")) {
+                    range.insertNode(document.createTextNode(Constants.ZWSP));
+                    range.collapse(false);
+                }
+                wbrElement.remove();
+                return;
+            } else {
+                // <br><wbr>
+                range.setStartAfter(wbrElement.previousElementSibling);
+            }
+        } else {
+            // <em>text</em>text<wbr>
+            range.setStart(wbrElement.previousSibling, wbrElement.previousSibling.textContent.length);
+        }
+    }
+    range.collapse(true);
+    wbrElement.remove();
+    setSelectionFocus(range);
+};
+
+export const insertHTML = (html: string, vditor: IVditor) => {
+    // 使用 lute 方法会添加 p 元素，只有一个 p 元素的时候进行删除
+    const tempElement = document.createElement("div");
+    tempElement.innerHTML = html;
+    const tempBlockElement = tempElement.querySelectorAll("p");
+    if (tempBlockElement.length === 1 && !tempBlockElement[0].previousSibling && !tempBlockElement[0].nextSibling &&
+        vditor[vditor.currentMode].element.children.length > 0 && tempElement.firstElementChild.tagName === "P") {
+        html = tempBlockElement[0].innerHTML.trim();
+    }
+
+    const pasteElement = document.createElement("div");
+    pasteElement.innerHTML = html;
+
+    const range = getEditorRange(vditor);
+    if (range.toString() !== "") {
+        vditor[vditor.currentMode].preventInput = true;
+        document.execCommand("delete", false, "");
+    }
+
+    if (pasteElement.firstElementChild &&
+        pasteElement.firstElementChild.getAttribute("data-block") === "0") {
+        // 粘贴内容为块元素时，应在下一段落中插入
+        pasteElement.lastElementChild.insertAdjacentHTML("beforeend", "<wbr>");
+        const blockElement = hasClosestBlock(range.startContainer);
+        if (!blockElement) {
+            vditor[vditor.currentMode].element.insertAdjacentHTML("beforeend", pasteElement.innerHTML);
+        } else {
+            blockElement.insertAdjacentHTML("afterend", pasteElement.innerHTML);
+        }
+        setRangeByWbr(vditor[vditor.currentMode].element, range);
+    } else {
+        const pasteTemplate = document.createElement("template");
+        pasteTemplate.innerHTML = html;
+        range.insertNode(pasteTemplate.content.cloneNode(true));
+        range.collapse(false);
+        setSelectionFocus(range);
+    }
+};