@8btc/mditor 0.0.1

package/src/ts/markdown/speechRender.ts

@@ -0,0 +1,107 @@
+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 getVoice = () => {
+        const voices = speechSynthesis.getVoices();
+        let currentVoice: SpeechSynthesisVoice;
+        let defaultVoice;
+        voices.forEach((item) => {
+            if (item.lang === lang.replace("_", "-")) {
+                currentVoice = item;
+            }
+            if (item.default) {
+                defaultVoice = item;
+            }
+        });
+        if (!currentVoice) {
+            currentVoice = defaultVoice;
+        }
+        return currentVoice;
+    };
+
+    let playSVG = '<svg><use xlink:href="#vditor-icon-play"></use></svg>';
+    let pauseSVG = '<svg><use xlink:href="#vditor-icon-pause"></use></svg>';
+    if (!document.getElementById("vditorIconScript")) {
+        playSVG = '<svg viewBox="0 0 32 32"><path d="M3.436 0l25.128 16-25.128 16v-32z"></path></svg>';
+        pauseSVG = '<svg viewBox="0 0 32 32"><path d="M20.617 0h9.128v32h-9.128v-32zM2.255 32v-32h9.128v32h-9.128z"></path></svg>';
+    }
+
+    let speechDom: HTMLButtonElement = document.querySelector(".vditor-speech");
+    if (!speechDom) {
+        speechDom = document.createElement("button");
+        speechDom.className = "vditor-speech";
+        element.insertAdjacentElement("beforeend", speechDom);
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = getVoice;
+        }
+    }
+    const voice = getVoice();
+    const utterThis = new SpeechSynthesisUtterance();
+    utterThis.voice = voice;
+    utterThis.onend = utterThis.onerror = () => {
+        speechDom.style.display = "none";
+        speechSynthesis.cancel();
+        speechDom.classList.remove("vditor-speech--current");
+        speechDom.innerHTML = playSVG;
+    };
+
+    element.addEventListener(window.ontouchstart !== undefined ? "touchend" : "click", (event) => {
+        const target = event.target as HTMLElement
+        if (target.classList.contains("vditor-speech") || target.parentElement.classList.contains("vditor-speech")) {
+            if (!speechDom.classList.contains("vditor-speech--current")) {
+                utterThis.text = speechDom.getAttribute("data-text");
+                speechSynthesis.speak(utterThis);
+                speechDom.classList.add("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);
+            element.focus();
+            return;
+        }
+
+        speechDom.style.display = "none";
+        speechSynthesis.cancel();
+        speechDom.classList.remove("vditor-speech--current");
+        speechDom.innerHTML = playSVG;
+
+        if (getSelection().rangeCount === 0) {
+            return;
+        }
+        const range = getSelection().getRangeAt(0)
+        const text = range.toString().trim();
+        if (!text) {
+            return;
+        }
+        window.vditorSpeechRange = range.cloneRange();
+        const rect = range.getBoundingClientRect();
+        speechDom.innerHTML = playSVG;
+        speechDom.style.display = "block";
+        speechDom.style.top = (rect.top + rect.height + document.querySelector("html").scrollTop - 20) + "px";
+        if (window.ontouchstart !== undefined) {
+            speechDom.style.left = ((event as TouchEvent).changedTouches[(event as TouchEvent).changedTouches.length - 1].pageX + 2) + "px";
+        } else {
+            speechDom.style.left = ((event as MouseEvent).clientX + 2) + "px";
+        }
+        speechDom.setAttribute("data-text", text);
+    });
+};

package/src/ts/outline/index.ts

@@ -0,0 +1,45 @@
+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.previewElement,
+                this.element.lastElementChild, vditor);
+        } else {
+            html = outlineRender(vditor[vditor.currentMode].element, this.element.lastElementChild, vditor);
+        }
+        return html;
+    }
+
+    public toggle(vditor: IVditor, show = true, focus = 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 (focus && getSelection().rangeCount > 0) {
+            const range = getSelection().getRangeAt(0);
+            if (vditor[vditor.currentMode].element.contains(range.startContainer)) {
+                setSelectionFocus(range);
+            }
+        }
+        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);
+    });
+};

package/src/ts/preview/index.ts

@@ -0,0 +1,299 @@
+import { abcRender } from "../markdown/abcRender";
+import { chartRender } from "../markdown/chartRender";
+import { codeRender } from "../markdown/codeRender";
+import { flowchartRender } from "../markdown/flowchartRender";
+import { getMarkdown } from "../markdown/getMarkdown";
+import { graphvizRender } from "../markdown/graphvizRender";
+import { highlightRender } from "../markdown/highlightRender";
+import { mathRender } from "../markdown/mathRender";
+import { mediaRender } from "../markdown/mediaRender";
+import { mermaidRender } from "../markdown/mermaidRender";
+import { SMILESRender } from "../markdown/SMILESRender";
+import { markmapRender } from "../markdown/markmapRender";
+import { mindmapRender } from "../markdown/mindmapRender";
+import { plantumlRender } from "../markdown/plantumlRender";
+import {
+    hasClosestByClassName,
+    hasClosestByMatchTag,
+} from "../util/hasClosest";
+import { setSelectionFocus } from "../util/selection";
+import { previewImage } from "./image";
+
+export class Preview {
+    public element: HTMLElement;
+    public previewElement: HTMLElement;
+    private mdTimeoutId: number;
+
+    /**
+     * 构造预览区域容器，注册复制与点击事件。
+     * - 复制：将选区内容以干净的 HTML 形式复制，避免多余样式。
+     * - 点击：处理目录跳转、链接打开与图片预览。
+     * 已移除 options.preview.actions 面板及按钮交互。
+     */
+    constructor(vditor: IVditor) {
+        this.element = document.createElement("div");
+        this.element.className = `vditor-preview`;
+        this.previewElement = document.createElement("div");
+        this.previewElement.className = "vditor-reset";
+        if (vditor.options.classes.preview) {
+            this.previewElement.classList.add(vditor.options.classes.preview);
+        }
+        this.previewElement.style.maxWidth =
+            vditor.options.preview.maxWidth + "px";
+        this.previewElement.addEventListener(
+            "copy",
+            (event: ClipboardEvent & { target: HTMLElement }) => {
+                if (event.target.tagName === "TEXTAREA") {
+                    // https://github.com/Vanessa219/vditor/issues/901
+                    return;
+                }
+                const tempElement = document.createElement("div");
+                tempElement.className = "vditor-reset";
+                tempElement.appendChild(
+                    getSelection().getRangeAt(0).cloneContents()
+                );
+
+                // 复制到剪贴板（已移除平台文案处理）
+                this.copyToClipboard(vditor, tempElement);
+                event.preventDefault();
+            }
+        );
+        this.previewElement.addEventListener(
+            "click",
+            (event: MouseEvent & { target: HTMLElement }) => {
+                const spanElement = hasClosestByMatchTag(event.target, "SPAN");
+                if (
+                    spanElement &&
+                    hasClosestByClassName(spanElement, "vditor-toc")
+                ) {
+                    const headingElement = this.previewElement.querySelector(
+                        "#" + spanElement.getAttribute("data-target-id")
+                    ) as HTMLElement;
+                    if (headingElement) {
+                        this.element.scrollTop = headingElement.offsetTop;
+                    }
+                    return;
+                }
+                if (event.target.tagName === "A") {
+                    if (vditor.options.link.click) {
+                        vditor.options.link.click(event.target);
+                    } else if (vditor.options.link.isOpen) {
+                        window.open(event.target.getAttribute("href"));
+                    }
+                    event.preventDefault();
+                    return;
+                }
+                if (event.target.tagName === "IMG") {
+                    if (vditor.options.image.preview) {
+                        vditor.options.image.preview(event.target);
+                    } else if (vditor.options.image.isPreview) {
+                        previewImage(
+                            event.target as HTMLImageElement,
+                            vditor.options.lang,
+                            vditor.options.theme
+                        );
+                    }
+                }
+            }
+        );
+        this.element.appendChild(this.previewElement);
+    }
+
+    /**
+     * 渲染预览内容。
+     * - 优先使用远程接口（options.preview.url）；失败则使用 Lute 本地渲染。
+     * - 支持 transform 前置转换与 afterRender 后置资源渲染。
+     */
+    public render(vditor: IVditor, value?: string) {
+        clearTimeout(this.mdTimeoutId);
+
+        if (this.element.style.display === "none") {
+            if (
+                this.element.getAttribute("data-type") === "renderPerformance"
+            ) {
+                vditor.tip.hide();
+            }
+            return;
+        }
+
+        if (value) {
+            this.previewElement.innerHTML = value;
+            return;
+        }
+
+        if (
+            getMarkdown(vditor).replace(
+                /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,
+                ""
+            ) === ""
+        ) {
+            this.previewElement.innerHTML = "";
+            return;
+        }
+
+        const renderStartTime = new Date().getTime();
+        const markdownText = getMarkdown(vditor);
+        this.mdTimeoutId = window.setTimeout(() => {
+            if (vditor.options.preview.url) {
+                const xhr = new XMLHttpRequest();
+                xhr.open("POST", vditor.options.preview.url);
+                xhr.setRequestHeader(
+                    "Content-Type",
+                    "application/json;charset=UTF-8"
+                );
+                xhr.onreadystatechange = () => {
+                    if (xhr.readyState === XMLHttpRequest.DONE) {
+                        if (xhr.status === 200) {
+                            const responseJSON = JSON.parse(xhr.responseText);
+                            if (responseJSON.code !== 0) {
+                                vditor.tip.show(responseJSON.msg);
+                                return;
+                            }
+                            if (vditor.options.preview.transform) {
+                                responseJSON.data =
+                                    vditor.options.preview.transform(
+                                        responseJSON.data
+                                    );
+                            }
+                            this.previewElement.innerHTML = responseJSON.data;
+                            this.afterRender(vditor, renderStartTime);
+                        } else {
+                            let html = vditor.lute.Md2HTML(markdownText);
+                            if (vditor.options.preview.transform) {
+                                html = vditor.options.preview.transform(html);
+                            }
+                            this.previewElement.innerHTML = html;
+                            this.afterRender(vditor, renderStartTime);
+                        }
+                    }
+                };
+
+                xhr.send(JSON.stringify({ markdownText }));
+            } else {
+                let html = vditor.lute.Md2HTML(markdownText);
+                if (vditor.options.preview.transform) {
+                    html = vditor.options.preview.transform(html);
+                }
+                this.previewElement.innerHTML = html;
+                this.afterRender(vditor, renderStartTime);
+            }
+        }, vditor.options.preview.delay);
+    }
+
+    /**
+     * 渲染完成后的处理：执行 parse 回调、性能提示、取消评论高亮、代码与图形等资源渲染。
+     */
+    private afterRender(vditor: IVditor, startTime: number) {
+        if (vditor.options.preview.parse) {
+            vditor.options.preview.parse(this.element);
+        }
+        const time = new Date().getTime() - startTime;
+        if (new Date().getTime() - startTime > 2600) {
+            // https://github.com/b3log/vditor/issues/67
+            vditor.tip.show(
+                window.VditorI18n.performanceTip.replace(
+                    "${x}",
+                    time.toString()
+                )
+            );
+            vditor.preview.element.setAttribute(
+                "data-type",
+                "renderPerformance"
+            );
+        } else if (
+            vditor.preview.element.getAttribute("data-type") ===
+            "renderPerformance"
+        ) {
+            vditor.tip.hide();
+            vditor.preview.element.removeAttribute("data-type");
+        }
+        const cmtFocusElement = vditor.preview.element.querySelector(
+            ".vditor-comment--focus"
+        );
+        if (cmtFocusElement) {
+            cmtFocusElement.classList.remove("vditor-comment--focus");
+        }
+        codeRender(vditor.preview.previewElement, vditor.options.preview.hljs);
+        highlightRender(
+            vditor.options.preview.hljs,
+            vditor.preview.previewElement,
+            vditor.options.cdn
+        );
+        mermaidRender(
+            vditor.preview.previewElement,
+            vditor.options.cdn,
+            vditor.options.theme
+        );
+        markmapRender(vditor.preview.previewElement, vditor.options.cdn);
+        SMILESRender(
+            vditor.preview.previewElement,
+            vditor.options.cdn,
+            vditor.options.theme
+        );
+        flowchartRender(vditor.preview.previewElement, vditor.options.cdn);
+        graphvizRender(vditor.preview.previewElement, vditor.options.cdn);
+        chartRender(
+            vditor.preview.previewElement,
+            vditor.options.cdn,
+            vditor.options.theme
+        );
+        mindmapRender(
+            vditor.preview.previewElement,
+            vditor.options.cdn,
+            vditor.options.theme
+        );
+        plantumlRender(vditor.preview.previewElement, vditor.options.cdn);
+        abcRender(vditor.preview.previewElement, vditor.options.cdn);
+        if (vditor.options.preview.render.media.enable) {
+            mediaRender(vditor.preview.previewElement);
+        }
+        vditor.options.customRenders.forEach((item) => {
+            item.render(vditor.preview.previewElement, vditor);
+        });
+        // toc render
+        const editorElement = vditor.preview.element;
+        let tocHTML = vditor.outline.render(vditor);
+        if (tocHTML === "") {
+            tocHTML = "[ToC]";
+        }
+        editorElement
+            .querySelectorAll('[data-type="toc-block"]')
+            .forEach((item: HTMLElement) => {
+                item.innerHTML = tocHTML;
+                mathRender(item, {
+                    cdn: vditor.options.cdn,
+                    math: vditor.options.preview.math,
+                });
+            });
+        mathRender(vditor.preview.previewElement, {
+            cdn: vditor.options.cdn,
+            math: vditor.options.preview.math,
+        });
+    }
+
+    /**
+     * 复制到剪贴板：修正数学公式显示、清理多余样式并执行复制。
+     */
+    private copyToClipboard(vditor: IVditor, copyElement: HTMLElement) {
+        // 修正 KaTeX 公式在复制时的显示
+        copyElement
+            .querySelectorAll(".katex-html .base")
+            .forEach((item: HTMLElement) => {
+                item.style.display = "initial";
+            });
+        // 防止背景色影响复制结果
+        copyElement.style.backgroundColor = "#fff";
+        // 清理代码背景图样式
+        copyElement.querySelectorAll("code").forEach((item) => {
+            item.style.backgroundImage = "none";
+        });
+        this.element.append(copyElement);
+        const range = copyElement.ownerDocument.createRange();
+        range.selectNode(copyElement);
+        setSelectionFocus(range);
+        document.execCommand("copy");
+        copyElement.remove();
+
+        vditor.tip.show("已复制到剪切板");
+    }
+}

package/src/ts/resize/index.ts

@@ -0,0 +1,57 @@
+
+export class Resize {
+    public element: HTMLElement;
+
+    constructor(vditor: IVditor) {
+        this.element = document.createElement("div");
+        this.element.className = `vditor-resize vditor-resize--${vditor.options.resize.position}`;
+        this.element.innerHTML = `<div><svg><use xlink:href="#vditor-icon-resize"></use></svg></div>`;
+
+        this.bindEvent(vditor);
+    }
+
+    private bindEvent(vditor: IVditor) {
+        this.element.addEventListener("mousedown", (event: MouseEvent) => {
+
+            const documentSelf = document;
+            const y = event.clientY;
+            const height = vditor.element.offsetHeight;
+            const minHeight = 63 + vditor.element.querySelector(".vditor-toolbar").clientHeight;
+            documentSelf.ondragstart = () => false;
+
+            if (window.captureEvents) {
+                window.captureEvents();
+            }
+
+            this.element.classList.add("vditor-resize--selected");
+
+            documentSelf.onmousemove = (moveEvent: MouseEvent) => {
+                if (vditor.options.resize.position === "top") {
+                    vditor.element.style.height = Math.max(minHeight, height + (y - moveEvent.clientY)) + "px";
+                } else {
+                    vditor.element.style.height = Math.max(minHeight, height + (moveEvent.clientY - y)) + "px";
+                }
+                if (vditor.options.typewriterMode) {
+                    vditor.sv.element.style.paddingBottom =
+                        vditor.sv.element.parentElement.offsetHeight / 2 + "px";
+                }
+            };
+
+            documentSelf.onmouseup = () => {
+                if (vditor.options.resize.after) {
+                    vditor.options.resize.after(vditor.element.offsetHeight - height);
+                }
+
+                if (window.captureEvents) {
+                    window.captureEvents();
+                }
+                documentSelf.onmousemove = null;
+                documentSelf.onmouseup = null;
+                documentSelf.ondragstart = null;
+                documentSelf.onselectstart = null;
+                documentSelf.onselect = null;
+                this.element.classList.remove("vditor-resize--selected");
+            };
+        });
+    }
+}

package/src/ts/sv/combineFootnote.ts

@@ -0,0 +1,27 @@
+/**
+ * 合并脚注
+ * @param elements vditor.sv.element
+ * @param afterCombine 每个脚注块合并完成后的回调, param: root为合并后的脚注块
+ */
+export const combineFootnote = (elements: HTMLElement, afterCombine?: (root: HTMLElement) => void ) => {
+    elements.querySelectorAll("[data-type=footnotes-link]").forEach((el: Element) => {
+        const root = el.parentElement
+        let footnote = root.nextSibling
+        // 寻找所有该脚注的块
+        while (footnote) {
+            if (footnote.textContent.startsWith("    ")) {
+                // 解析到四个空格，加入到root并继续解析
+                const thisNode = footnote
+                thisNode.childNodes.forEach(node => {
+                    root.append(node.cloneNode(true))
+                })
+                footnote = footnote.nextSibling
+                thisNode.remove()
+            } else {
+                // 非空格停止解析
+                break
+            }
+        }
+        afterCombine && afterCombine(root)
+    })
+}