@8btc/mditor 0.0.1

package/src/ts/util/function.ts

@@ -0,0 +1,15 @@
+export const genUUID = () => ([1e7].toString() + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
+    (parseInt(c, 10) ^ (window.crypto.getRandomValues(new Uint32Array(1))[0] & (15 >> (parseInt(c, 10) / 4)))).toString(16)
+);
+
+export const getSearch = (key: string, link = window.location.search) => {
+    const params = link.substring(link.indexOf("?"));
+    const hashIndex = params.indexOf("#");
+    // REF https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams
+    const urlSearchParams = new URLSearchParams(params.substring(0, hashIndex >= 0 ? hashIndex : undefined));
+    return urlSearchParams.get(key);
+};
+
+export const looseJsonParse = (text: string) => {
+    return Function(`"use strict";return (${text})`)();
+};

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,218 @@
+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 { markmapRender } from "../markdown/markmapRender";
+import { mindmapRender } from "../markdown/mindmapRender";
+import { plantumlRender } from "../markdown/plantumlRender";
+import { SMILESRender } from "../markdown/SMILESRender";
+
+export const processPasteCode = (html: string, text: string, type = "sv") => {
+    const trimmedText = text.trim();
+
+    if (
+        (trimmedText.startsWith("$$") && trimmedText.endsWith("$$")) ||
+        (trimmedText.startsWith("$") && trimmedText.endsWith("$"))
+    ) {
+        return false;
+    }
+
+    // 适配单独粘贴公式，使用 $$ 包装
+    const formulaRegex = new RegExp(
+        "^(?:" +
+            [
+                // 原有：基础数学命令（求和、分式、三角函数等）
+                /\\(sum|prod|frac|int|sqrt|lim|log|sin|cos|tan|displaystyle|textstyle|mathbb|mathbf|overline|underline|vec|hat|bar|cdot|leq|geq|neq|approx|to|xrightarrow|rightarrow|leftarrow|infty|partial|nabla)/
+                    .source,
+                // 原有：公式环境（如\begin{align}、\begin{equation}等）
+                /\\begin\{[^}]+\}/.source,
+                // 原有：左右括号命令（如\left(、\right]等）
+                /\\left|\\right/.source,
+                // 原有：化学/物理单位命令（如\ce{、\pu{）
+                /\\(ce|pu)\{/.source,
+                // 新增：希腊字母命令（如\alpha、\beta、\Gamma等）
+                /\\[a-zA-Z]+\b(?!\d)/.source,
+                // 新增：带数字/符号的命令（如\H_2、\text{...}、\mathbf{...}等）
+                /\\[a-zA-Z]+\d*\{/.source,
+                // 新增：特殊符号命令（如\$、\%、\&等）
+                /\\[^\w]/.source,
+                // 新增：上下标相关命令（如\underset、\overset）
+                /\\(underset|overset|substack|boxed|bbox)/.source,
+                // 新增：矩阵/数组环境起始（如\begin{matrix}）
+                /\\begin\{(matrix|array|pmatrix|bmatrix|vmatrix)\}/.source,
+                // 新增：其他数学函数（如 \operatorname）
+                /\\operatorname/.source,
+            ].join("|") +
+            ")"
+    );
+
+    if (formulaRegex.test(trimmedText)) {
+        return `$$${trimmedText}$$`;
+    }
+
+    const tempElement = document.createElement("div");
+    tempElement.innerHTML = html;
+    if (tempElement.querySelector(".vditor-copy")) {
+        return false;
+    }
+    let isCode = false;
+
+    if (html.startsWith("<div><span class=")) {
+        // wechat
+        html = text;
+    }
+
+    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" &&
+        pres[0].className !== "vditor-ir"
+    ) {
+        // 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 formulaRegexSrc = [
+            // 原有：基础数学命令（求和、分式、三角函数等）
+            /\\(sum|prod|frac|int|sqrt|lim|log|sin|cos|tan|displaystyle|textstyle|mathbb|mathbf|overline|underline|vec|hat|bar|cdot|leq|geq|neq|approx|to|xrightarrow|rightarrow|leftarrow|infty|partial|nabla)/
+                .source,
+            // 原有：公式环境（如\begin{align}、\begin{equation}等）
+            /\\begin\{[^}]+\}/.source,
+            // 原有：左右括号命令（如\left(、\right]等）
+            /\\left|\\right/.source,
+            // 原有：化学/物理单位命令（如\ce{、\pu{）
+            /\\(ce|pu)\{/.source,
+            // 新增：希腊字母命令（如\alpha、\beta、\Gamma等）
+            /\\[a-zA-Z]+\b(?!\d)/.source,
+            // 新增：带数字/符号的命令（如\H_2、\text{...}、\mathbf{...}等）
+            /\\[a-zA-Z]+\d*\{/.source,
+            // 新增：特殊符号命令（如\$、\%、\&等）
+            /\\[^\w]/.source,
+            // 新增：上下标相关命令（如\underset、\overset）
+            /\\(underset|overset|substack|boxed|bbox)/.source,
+            // 新增：矩阵/数组环境起始（如\begin{matrix}）
+            /\\begin\{(matrix|array|pmatrix|bmatrix|vmatrix)\}/.source,
+            // 新增：其他数学函数（如 \operatorname）
+            /\\operatorname/.source,
+        ].join("|");
+        const mixedFormulaRegex = new RegExp(formulaRegexSrc);
+        if (
+            mixedFormulaRegex.test(text) ||
+            /\$[^$]+\$/.test(text) ||
+            /\$\$[^$]+\$\$/.test(text)
+        ) {
+            return false;
+        }
+
+        if (/^(\*|\||>|#|-|\d+\.|`)/.test(text.trim())) {
+            return false;
+        }
+        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;")}</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>`;
+            }
+            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 === "abc") {
+        abcRender(previewPanel, vditor.options.cdn);
+    } else if (language === "mermaid") {
+        mermaidRender(previewPanel, vditor.options.cdn, vditor.options.theme);
+    } else if (language === "smiles") {
+        SMILESRender(previewPanel, vditor.options.cdn, vditor.options.theme);
+    } else if (language === "markmap") {
+        markmapRender(previewPanel, vditor.options.cdn);
+    } 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 {
+        const cRender = vditor.options.customRenders.find((item) => {
+            if (item.language === language) {
+                item.render(previewPanel, vditor);
+                return true;
+            }
+        });
+        if (!cRender) {
+            highlightRender(
+                Object.assign({}, vditor.options.preview.hljs),
+                previewPanel,
+                vditor.options.cdn
+            );
+            codeRender(previewPanel, vditor.options.preview.hljs);
+        }
+    }
+
+    previewPanel.setAttribute("data-render", "1");
+};