vditor 3.8.7

package/src/ts/markdown/outlineRender.ts

@@ -0,0 +1,106 @@
+import {hasClosestByHeadings} from "../util/hasClosestByHeadings";
+import {mathRender} from "./mathRender";
+
+export const outlineRender = (contentElement: HTMLElement, targetElement: Element, vditor?: IVditor) => {
+    let tocHTML = "";
+    const ids: string[] = [];
+    Array.from(contentElement.children).forEach((item: HTMLElement, index: number) => {
+        if (hasClosestByHeadings(item)) {
+            if (vditor) {
+                const lastIndex = item.id.lastIndexOf("_");
+                item.id = item.id.substring(0, lastIndex === -1 ? undefined : lastIndex) + "_" + index;
+            }
+            ids.push(item.id);
+            tocHTML += item.outerHTML.replace("<wbr>", "");
+        }
+    });
+    if (tocHTML === "") {
+        targetElement.innerHTML = "";
+        return "";
+    }
+    const tempElement = document.createElement("div");
+    if (vditor) {
+        vditor.lute.SetToC(true);
+        if (vditor.currentMode === "wysiwyg" && !vditor.preview.element.contains(contentElement)) {
+            tempElement.innerHTML = vditor.lute.SpinVditorDOM("<p>[ToC]</p>" + tocHTML);
+        } else if (vditor.currentMode === "ir" && !vditor.preview.element.contains(contentElement)) {
+            tempElement.innerHTML = vditor.lute.SpinVditorIRDOM("<p>[ToC]</p>" + tocHTML);
+        } else {
+            tempElement.innerHTML = vditor.lute.HTML2VditorDOM("<p>[ToC]</p>" + tocHTML);
+        }
+        vditor.lute.SetToC(vditor.options.preview.markdown.toc);
+    } else {
+        targetElement.classList.add("vditor-outline");
+        const lute = Lute.New();
+        lute.SetToC(true);
+        tempElement.innerHTML = lute.HTML2VditorDOM("<p>[ToC]</p>" + tocHTML);
+    }
+    const headingsElement = tempElement.firstElementChild.querySelectorAll("li > span[data-target-id]");
+    headingsElement.forEach((item, index) => {
+        if (item.nextElementSibling && item.nextElementSibling.tagName === "UL") {
+            item.innerHTML = `<svg class='vditor-outline__action'><use xlink:href='#vditor-icon-down'></use></svg><span>${item.innerHTML}</span>`;
+        } else {
+            item.innerHTML = `<svg></svg><span>${item.innerHTML}</span>`;
+        }
+        item.setAttribute("data-target-id", ids[index]);
+    });
+    tocHTML = tempElement.firstElementChild.innerHTML;
+    if (headingsElement.length === 0) {
+        targetElement.innerHTML = "";
+        return tocHTML;
+    }
+    targetElement.innerHTML = tocHTML;
+    if (vditor) {
+        mathRender(targetElement as HTMLElement, {
+            cdn: vditor.options.cdn,
+            math: vditor.options.preview.math,
+        });
+    }
+    targetElement.firstElementChild.addEventListener("click", (event: Event) => {
+        let target = event.target as HTMLElement;
+        while (target && !target.isEqualNode(targetElement)) {
+            if (target.classList.contains("vditor-outline__action")) {
+                if (target.classList.contains("vditor-outline__action--close")) {
+                    target.classList.remove("vditor-outline__action--close");
+                    target.parentElement.nextElementSibling.setAttribute("style", "display:block");
+                } else {
+                    target.classList.add("vditor-outline__action--close");
+                    target.parentElement.nextElementSibling.setAttribute("style", "display:none");
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            } else if (target.getAttribute("data-target-id")) {
+                event.preventDefault();
+                event.stopPropagation();
+                const idElement = document.getElementById(target.getAttribute("data-target-id"));
+                if (!idElement) {
+                    return;
+                }
+                if (vditor) {
+                    if (vditor.options.height === "auto") {
+                        let windowScrollY = idElement.offsetTop + vditor.element.offsetTop;
+                        if (!vditor.options.toolbarConfig.pin) {
+                            windowScrollY += vditor.toolbar.element.offsetHeight;
+                        }
+                        window.scrollTo(window.scrollX, windowScrollY);
+                    } else {
+                        if (vditor.element.offsetTop < window.scrollY) {
+                            window.scrollTo(window.scrollX, vditor.element.offsetTop);
+                        }
+                        if (vditor.preview.element.contains(contentElement)) {
+                            contentElement.parentElement.scrollTop = idElement.offsetTop;
+                        } else {
+                            contentElement.scrollTop = idElement.offsetTop;
+                        }
+                    }
+                } else {
+                    window.scrollTo(window.scrollX, idElement.offsetTop);
+                }
+                break;
+            }
+            target = target.parentElement;
+        }
+    });
+    return tocHTML;
+};

package/src/ts/markdown/plantumlRender.ts

@@ -0,0 +1,32 @@
+import {Constants} from "../constants";
+import {addScript} from "../util/addScript";
+import {plantumlRenderAdapter} from "./adapterRender";
+
+declare const plantumlEncoder: {
+    encode(options: string): string,
+};
+
+export const plantumlRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN) => {
+    const plantumlElements = plantumlRenderAdapter.getElements(element);
+    if (plantumlElements.length === 0) {
+        return;
+    }
+    addScript(`${cdn}/dist/js/plantuml/plantuml-encoder.min.js`, "vditorPlantumlScript").then(() => {
+        plantumlElements.forEach((e: HTMLDivElement) => {
+            if (e.parentElement.classList.contains("vditor-wysiwyg__pre") ||
+                e.parentElement.classList.contains("vditor-ir__marker--pre")) {
+                return;
+            }
+            const text = plantumlRenderAdapter.getCode(e).trim();
+            if (!text) {
+                return;
+            }
+            try {
+                e.innerHTML = `<img src="http://www.plantuml.com/plantuml/svg/~1${plantumlEncoder.encode(text)}">`;
+            } catch (error) {
+                e.className = "vditor-reset--error";
+                e.innerHTML = `plantuml render error: <br>${error}`;
+            }
+        });
+    });
+};

package/src/ts/markdown/previewRender.ts

@@ -0,0 +1,143 @@
+import {Constants} from "../constants";
+import {setContentTheme} from "../ui/setContentTheme";
+import {addScript, addScriptSync} from "../util/addScript";
+import {hasClosestByClassName, hasClosestByMatchTag} from "../util/hasClosest";
+import {merge} from "../util/merge";
+import {abcRender} from "./abcRender";
+import {anchorRender} from "./anchorRender";
+import {chartRender} from "./chartRender";
+import {codeRender} from "./codeRender";
+import {flowchartRender} from "./flowchartRender";
+import {graphvizRender} from "./graphvizRender";
+import {highlightRender} from "./highlightRender";
+import {lazyLoadImageRender} from "./lazyLoadImageRender";
+import {mathRender} from "./mathRender";
+import {mediaRender} from "./mediaRender";
+import {mermaidRender} from "./mermaidRender";
+import {mindmapRender} from "./mindmapRender";
+import {plantumlRender} from "./plantumlRender";
+import {setLute} from "./setLute";
+import {speechRender} from "./speechRender";
+
+const mergeOptions = (options?: IPreviewOptions) => {
+    const defaultOption: IPreviewOptions = {
+        anchor: 0,
+        cdn: Constants.CDN,
+        customEmoji: {},
+        emojiPath: `${
+            (options && options.emojiPath) || Constants.CDN
+        }/dist/images/emoji`,
+        hljs: Constants.HLJS_OPTIONS,
+        icon: "ant",
+        lang: "zh_CN",
+        markdown: Constants.MARKDOWN_OPTIONS,
+        math: Constants.MATH_OPTIONS,
+        mode: "light",
+        speech: {
+            enable: false,
+        },
+        theme: Constants.THEME_OPTIONS,
+    };
+    return merge(defaultOption, options);
+};
+
+export const md2html = (mdText: string, options?: IPreviewOptions) => {
+    const mergedOptions = mergeOptions(options);
+    return addScript(`${mergedOptions.cdn}/dist/js/lute/lute.min.js`, "vditorLuteScript").then(() => {
+        const lute = setLute({
+            autoSpace: mergedOptions.markdown.autoSpace,
+            codeBlockPreview: mergedOptions.markdown.codeBlockPreview,
+            emojiSite: mergedOptions.emojiPath,
+            emojis: mergedOptions.customEmoji,
+            fixTermTypo: mergedOptions.markdown.fixTermTypo,
+            footnotes: mergedOptions.markdown.footnotes,
+            headingAnchor: mergedOptions.anchor !== 0,
+            inlineMathDigit: mergedOptions.math.inlineDigit,
+            lazyLoadImage: mergedOptions.lazyLoadImage,
+            linkBase: mergedOptions.markdown.linkBase,
+            linkPrefix: mergedOptions.markdown.linkPrefix,
+            listStyle: mergedOptions.markdown.listStyle,
+            mark: mergedOptions.markdown.mark,
+            mathBlockPreview: mergedOptions.markdown.mathBlockPreview,
+            paragraphBeginningSpace: mergedOptions.markdown.paragraphBeginningSpace,
+            sanitize: mergedOptions.markdown.sanitize,
+            toc: mergedOptions.markdown.toc,
+        });
+        if (options?.renderers) {
+            lute.SetJSRenderers({
+                renderers: {
+                    Md2HTML: options.renderers,
+                },
+            });
+        }
+        lute.SetHeadingID(true);
+        return lute.Md2HTML(mdText);
+    });
+};
+
+export const previewRender = async (previewElement: HTMLDivElement, markdown: string, options?: IPreviewOptions) => {
+    const mergedOptions: IPreviewOptions = mergeOptions(options);
+    let html = await md2html(markdown, mergedOptions);
+    if (mergedOptions.transform) {
+        html = mergedOptions.transform(html);
+    }
+    previewElement.innerHTML = html;
+    previewElement.classList.add("vditor-reset");
+
+    if (!mergedOptions.i18n) {
+        if (!["en_US", "ja_JP", "ko_KR", "ru_RU", "zh_CN", "zh_TW"].includes(mergedOptions.lang)) {
+            throw new Error(
+                "options.lang error, see https://ld246.com/article/1549638745630#options",
+            );
+        } else {
+            addScriptSync(`${mergedOptions.cdn}/dist/js/i18n/${mergedOptions.lang}.js`, "vditorI18nScript");
+        }
+    } else {
+        window.VditorI18n = mergedOptions.i18n;
+    }
+
+    setContentTheme(mergedOptions.theme.current, mergedOptions.theme.path);
+    if (mergedOptions.anchor === 1) {
+        previewElement.classList.add("vditor-reset--anchor");
+    }
+    codeRender(previewElement);
+    highlightRender(mergedOptions.hljs, previewElement, mergedOptions.cdn);
+    mathRender(previewElement, {
+        cdn: mergedOptions.cdn,
+        math: mergedOptions.math,
+    });
+    mermaidRender(previewElement, mergedOptions.cdn, mergedOptions.mode);
+    flowchartRender(previewElement, mergedOptions.cdn);
+    graphvizRender(previewElement, mergedOptions.cdn);
+    chartRender(previewElement, mergedOptions.cdn, mergedOptions.mode);
+    mindmapRender(previewElement, mergedOptions.cdn, mergedOptions.mode);
+    plantumlRender(previewElement, mergedOptions.cdn);
+    abcRender(previewElement, mergedOptions.cdn);
+    mediaRender(previewElement);
+    if (mergedOptions.speech.enable) {
+        speechRender(previewElement);
+    }
+    if (mergedOptions.anchor !== 0) {
+        anchorRender(mergedOptions.anchor);
+    }
+    if (mergedOptions.after) {
+        mergedOptions.after();
+    }
+    if (mergedOptions.lazyLoadImage) {
+        lazyLoadImageRender(previewElement);
+    }
+    if (mergedOptions.icon) {
+        addScript(`${mergedOptions.cdn}/dist/js/icons/${mergedOptions.icon}.js`, "vditorIconScript");
+    }
+    previewElement.addEventListener("click", (event: MouseEvent & { target: HTMLElement }) => {
+        const spanElement = hasClosestByMatchTag(event.target, "SPAN");
+        if (spanElement && hasClosestByClassName(spanElement, "vditor-toc")) {
+            const headingElement =
+                previewElement.querySelector("#" + spanElement.getAttribute("data-target-id")) as HTMLElement;
+            if (headingElement) {
+                window.scrollTo(window.scrollX, headingElement.offsetTop);
+            }
+            return;
+        }
+    });
+};

package/src/ts/markdown/setLute.ts

@@ -0,0 +1,23 @@
+export const setLute = (options: ILuteOptions) => {
+    const lute: Lute = Lute.New();
+    lute.PutEmojis(options.emojis);
+    lute.SetEmojiSite(options.emojiSite);
+    lute.SetHeadingAnchor(options.headingAnchor);
+    lute.SetInlineMathAllowDigitAfterOpenMarker(options.inlineMathDigit);
+    lute.SetAutoSpace(options.autoSpace);
+    lute.SetToC(options.toc);
+    lute.SetFootnotes(options.footnotes);
+    lute.SetFixTermTypo(options.fixTermTypo);
+    lute.SetVditorCodeBlockPreview(options.codeBlockPreview);
+    lute.SetVditorMathBlockPreview(options.mathBlockPreview);
+    lute.SetSanitize(options.sanitize);
+    lute.SetChineseParagraphBeginningSpace(options.paragraphBeginningSpace);
+    lute.SetRenderListStyle(options.listStyle);
+    lute.SetLinkBase(options.linkBase);
+    lute.SetLinkPrefix(options.linkPrefix);
+    lute.SetMark(options.mark);
+    if (options.lazyLoadImage) {
+        lute.SetImageLazyLoading(options.lazyLoadImage);
+    }
+    return lute;
+};

package/src/ts/markdown/speechRender.ts

@@ -0,0 +1,97 @@
+import {setSelectionFocus} from "../util/selection";
+
+declare global {
+    interface Window {
+        vditorSpeechRange: Range;
+    }
+}
+export const speechRender = (element: HTMLElement, lang: keyof II18n = "zh_CN") => {
+    if (typeof speechSynthesis === "undefined" || typeof SpeechSynthesisUtterance === "undefined") {
+        return;
+    }
+    const playSVG = '<svg><use xlink:href="#vditor-icon-play"></use></svg>';
+    const pauseSVG = '<svg><use xlink:href="#vditor-icon-pause"></use></svg>';
+    let speechDom: HTMLDivElement = document.querySelector(".vditor-speech");
+    if (!speechDom) {
+        speechDom = document.createElement("div");
+        speechDom.className = "vditor-speech";
+        document.body.insertAdjacentElement("beforeend", speechDom);
+
+        const getVoice = () => {
+            const voices = speechSynthesis.getVoices();
+            let currentVoice;
+            let defaultVoice;
+            voices.forEach((item) => {
+                if (item.lang === lang.replace("_", "-")) {
+                    currentVoice = item;
+                }
+                if (item.default) {
+                    defaultVoice = item;
+                }
+            });
+            if (!currentVoice) {
+                currentVoice = defaultVoice;
+            }
+            return currentVoice;
+        };
+
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = getVoice;
+        }
+
+        const voice = getVoice();
+        speechDom.onclick = () => {
+            if (speechDom.className === "vditor-speech") {
+                const utterThis = new SpeechSynthesisUtterance(speechDom.getAttribute("data-text"));
+                utterThis.voice = voice;
+                utterThis.onend = () => {
+                    speechDom.className = "vditor-speech";
+                    speechSynthesis.cancel();
+                    speechDom.innerHTML = playSVG;
+                };
+                speechSynthesis.speak(utterThis);
+                speechDom.className = "vditor-speech vditor-speech--current";
+                speechDom.innerHTML = pauseSVG;
+            } else {
+                if (speechSynthesis.speaking) {
+                    if (speechSynthesis.paused) {
+                        speechSynthesis.resume();
+                        speechDom.innerHTML = pauseSVG;
+                    } else {
+                        speechSynthesis.pause();
+                        speechDom.innerHTML = playSVG;
+                    }
+                }
+            }
+
+            setSelectionFocus(window.vditorSpeechRange);
+        };
+
+        document.body.addEventListener("click", () => {
+            if (getSelection().toString().trim() === "" && speechDom.style.display === "block") {
+                speechDom.className = "vditor-speech";
+                speechSynthesis.cancel();
+                speechDom.style.display = "none";
+            }
+        });
+    }
+
+    element.addEventListener("mouseup", (event: MouseEvent) => {
+        const text = getSelection().toString().trim();
+        speechSynthesis.cancel();
+        if (getSelection().toString().trim() === "") {
+            if (speechDom.style.display === "block") {
+                speechDom.className = "vditor-speech";
+                speechDom.style.display = "none";
+            }
+            return;
+        }
+        window.vditorSpeechRange = getSelection().getRangeAt(0).cloneRange();
+        const rect = getSelection().getRangeAt(0).getBoundingClientRect();
+        speechDom.innerHTML = playSVG;
+        speechDom.style.display = "block";
+        speechDom.style.top = (rect.top + rect.height + document.querySelector("html").scrollTop - 20) + "px";
+        speechDom.style.left = (event.screenX + 2) + "px";
+        speechDom.setAttribute("data-text", text);
+    });
+};

package/src/ts/outline/index.ts

@@ -0,0 +1,47 @@
+import {Constants} from "../constants";
+import {outlineRender} from "../markdown/outlineRender";
+import {setPadding} from "../ui/initUI";
+import {setSelectionFocus} from "../util/selection";
+
+export class Outline {
+    public element: HTMLElement;
+
+    constructor(outlineLabel: string) {
+        this.element = document.createElement("div");
+        this.element.className = "vditor-outline";
+        this.element.innerHTML = `<div class="vditor-outline__title">${outlineLabel}</div>
+<div class="vditor-outline__content"></div>`;
+    }
+
+    public render(vditor: IVditor) {
+        let html = "";
+        if (vditor.preview.element.style.display === "block") {
+            html = outlineRender(vditor.preview.element.lastElementChild as HTMLElement,
+                this.element.lastElementChild, vditor);
+        } else {
+            html = outlineRender(vditor[vditor.currentMode].element, this.element.lastElementChild, vditor);
+        }
+        return html;
+    }
+
+    public toggle(vditor: IVditor, show = true) {
+        const btnElement = vditor.toolbar.elements.outline?.firstElementChild;
+        if (show && window.innerWidth >= Constants.MOBILE_WIDTH) {
+            this.element.style.display = "block";
+            this.render(vditor);
+            btnElement?.classList.add("vditor-menu--current");
+        } else {
+            this.element.style.display = "none";
+            btnElement?.classList.remove("vditor-menu--current");
+        }
+        if (getSelection().rangeCount > 0) {
+            const range = getSelection().getRangeAt(0);
+            if (vditor[vditor.currentMode].element.contains(range.startContainer)) {
+                setSelectionFocus(range);
+            } else {
+                vditor[vditor.currentMode].element.focus();
+            }
+        }
+        setPadding(vditor);
+    }
+}

package/src/ts/preview/image.ts

@@ -0,0 +1,50 @@
+export const previewImage = (oldImgElement: HTMLImageElement, lang: keyof II18n = "zh_CN", theme = "classic") => {
+    const oldImgRect = oldImgElement.getBoundingClientRect();
+    const height = 36;
+    document.body.insertAdjacentHTML("beforeend", `<div class="vditor vditor-img${theme === "dark" ? " vditor--dark" : ""}">
+    <div class="vditor-img__bar">
+      <span class="vditor-img__btn" data-deg="0">
+        <svg><use xlink:href="#vditor-icon-redo"></use></svg>
+        ${window.VditorI18n.spin}
+      </span>
+      <span class="vditor-img__btn"  onclick="this.parentElement.parentElement.outerHTML = '';document.body.style.overflow = ''">
+        X &nbsp;${window.VditorI18n.close}
+      </span>
+    </div>
+    <div class="vditor-img__img" onclick="this.parentElement.outerHTML = '';document.body.style.overflow = ''">
+      <img style="width: ${oldImgElement.width}px;height:${oldImgElement.height}px;transform: translate3d(${oldImgRect.left}px, ${oldImgRect.top - height}px, 0)" src="${oldImgElement.getAttribute("src")}">
+    </div>
+</div>`);
+    document.body.style.overflow = "hidden";
+
+    // 图片从原始位置移动到预览正中间的动画效果
+    const imgElement = document.querySelector(".vditor-img img") as HTMLImageElement;
+    const translate3d = `translate3d(${Math.max(0, window.innerWidth - oldImgElement.naturalWidth) / 2}px, ${Math.max(0, window.innerHeight - height - oldImgElement.naturalHeight) / 2}px, 0)`;
+    setTimeout(() => {
+        imgElement.setAttribute("style", `transition: transform .3s ease-in-out;transform: ${translate3d}`);
+        setTimeout(() => {
+            imgElement.parentElement.scrollTo(
+                (imgElement.parentElement.scrollWidth - imgElement.parentElement.clientWidth) / 2,
+                (imgElement.parentElement.scrollHeight - imgElement.parentElement.clientHeight) / 2);
+        }, 400);
+    });
+
+    // 旋转
+    const btnElement = document.querySelector(".vditor-img__btn");
+    btnElement.addEventListener("click", () => {
+        const deg = parseInt(btnElement.getAttribute("data-deg"), 10) + 90;
+        if ((deg / 90) % 2 === 1 && oldImgElement.naturalWidth > imgElement.parentElement.clientHeight) {
+            imgElement.style.transform = `translate3d(${
+                Math.max(0, window.innerWidth - oldImgElement.naturalWidth) / 2}px, ${
+                oldImgElement.naturalWidth / 2 - oldImgElement.naturalHeight / 2}px, 0) rotateZ(${deg}deg)`;
+        } else {
+            imgElement.style.transform = `${translate3d} rotateZ(${deg}deg)`;
+        }
+        btnElement.setAttribute("data-deg", deg.toString());
+        setTimeout(() => {
+            imgElement.parentElement.scrollTo(
+                (imgElement.parentElement.scrollWidth - imgElement.parentElement.clientWidth) / 2,
+                (imgElement.parentElement.scrollHeight - imgElement.parentElement.clientHeight) / 2);
+        }, 400);
+    });
+};