@8btc/mditor 0.0.1

package/src/ts/markdown/codeRender.ts

@@ -0,0 +1,60 @@
+import {code160to32} from "../util/code160to32";
+import {Constants} from "../constants";
+
+export const codeRender = (element: HTMLElement, option?: IHljs) => {
+    Array.from<HTMLElement>(element.querySelectorAll("pre > code")).filter((e, index) => {
+        if (e.parentElement.classList.contains("vditor-wysiwyg__pre") ||
+            e.parentElement.classList.contains("vditor-ir__marker--pre")) {
+            return false;
+        }
+        if (e.classList.contains("language-mermaid") || e.classList.contains("language-flowchart") ||
+            e.classList.contains("language-echarts") || e.classList.contains("language-mindmap") ||
+            e.classList.contains("language-plantuml") || e.classList.contains("language-markmap") ||
+            e.classList.contains("language-abc") || e.classList.contains("language-graphviz") ||
+            e.classList.contains("language-math") || e.classList.contains("language-smiles")) {
+            return false;
+        }
+
+        if (e.style.maxHeight.indexOf("px") > -1) {
+            return false;
+        }
+
+        // 避免预览区在渲染后由于代码块过多产生性能问题 https://github.com/b3log/vditor/issues/67
+        if (element.classList.contains("vditor-preview") && index > 5) {
+            return false;
+        }
+        return true;
+    }).forEach((e) => {
+        let codeText = e.innerText;
+        if (e.classList.contains("highlight-chroma")) {
+            const codeElement = e.cloneNode(true) as HTMLElement;
+            codeElement.querySelectorAll(".highlight-ln").forEach((item: HTMLElement) => {
+                item.remove();
+            });
+            codeText = codeElement.innerText;
+        } else if (codeText.endsWith("\n")) {
+            codeText = codeText.substr(0, codeText.length - 1)
+        }
+        let iconHTML = '<svg><use xlink:href="#vditor-icon-copy"></use></svg>';
+        if (!document.getElementById("vditorIconScript")) {
+            iconHTML = '<svg viewBox="0 0 32 32"><path d="M22.545-0h-17.455c-1.6 0-2.909 1.309-2.909 2.909v20.364h2.909v-20.364h17.455v-2.909zM26.909 5.818h-16c-1.6 0-2.909 1.309-2.909 2.909v20.364c0 1.6 1.309 2.909 2.909 2.909h16c1.6 0 2.909-1.309 2.909-2.909v-20.364c0-1.6-1.309-2.909-2.909-2.909zM26.909 29.091h-16v-20.364h16v20.364z"></path></svg>';
+        }
+
+        const divElement = document.createElement("div");
+        divElement.className = "vditor-copy";
+        divElement.innerHTML = `<span aria-label="${window.VditorI18n?.copy || "复制"}"
+onmouseover="this.setAttribute('aria-label', '${window.VditorI18n?.copy || "复制"}')"
+class="vditor-tooltipped vditor-tooltipped__w"
+onclick="event.stopPropagation();this.previousElementSibling.select();document.execCommand('copy');this.setAttribute('aria-label', '${window.VditorI18n?.copied || "已复制"}');this.previousElementSibling.blur()">${iconHTML}</span>`;
+        const textarea = document.createElement("textarea");
+        textarea.value = code160to32(codeText);
+        divElement.insertAdjacentElement("afterbegin", textarea);
+        if (option && option.renderMenu) {
+            option.renderMenu(e, divElement);
+        }
+        e.before(divElement);
+        e.style.maxHeight = (window.outerHeight - 40) + "px";
+        // https://github.com/Vanessa219/vditor/issues/1356
+        e.insertAdjacentHTML("afterend", `<span style="position: absolute">${Constants.ZWSP}</span>`)
+    });
+};

package/src/ts/markdown/flowchartRender.ts

@@ -0,0 +1,25 @@
+import {Constants} from "../constants";
+import {addScript} from "../util/addScript";
+import {flowchartRenderAdapter} from "./adapterRender";
+
+declare const flowchart: {
+    parse(text: string): { drawSVG: (type: HTMLElement) => void };
+};
+
+export const flowchartRender = (element: HTMLElement, cdn = Constants.CDN) => {
+    const flowchartElements = flowchartRenderAdapter.getElements(element);
+    if (flowchartElements.length === 0) {
+        return;
+    }
+    addScript(`${cdn}/dist/js/flowchart.js/flowchart.min.js`, "vditorFlowchartScript").then(() => {
+        flowchartElements.forEach((item: HTMLElement) => {
+            if (item.getAttribute("data-processed") === "true") {
+                return;
+            }
+            const flowchartObj = flowchart.parse(flowchartRenderAdapter.getCode(item));
+            item.innerHTML = "";
+            flowchartObj.drawSVG(item);
+            item.setAttribute("data-processed", "true");
+        });
+    });
+};

package/src/ts/markdown/getHTML.ts

@@ -0,0 +1,11 @@
+import {getMarkdown} from "./getMarkdown";
+
+export const getHTML = (vditor: IVditor) => {
+    if (vditor.currentMode === "sv") {
+        return vditor.lute.Md2HTML(getMarkdown(vditor));
+    } else if (vditor.currentMode === "wysiwyg") {
+        return vditor.lute.VditorDOM2HTML(vditor.wysiwyg.element.innerHTML);
+    } else if (vditor.currentMode === "ir") {
+        return vditor.lute.VditorIRDOM2HTML(vditor.ir.element.innerHTML);
+    }
+};

package/src/ts/markdown/getMarkdown.ts

@@ -0,0 +1,12 @@
+import {code160to32} from "../util/code160to32";
+
+export const getMarkdown = (vditor: IVditor) => {
+    if (vditor.currentMode === "sv") {
+        return code160to32(`${vditor.sv.element.textContent}\n`.replace(/\n\n$/, "\n"));
+    } else if (vditor.currentMode === "wysiwyg") {
+        return vditor.lute.VditorDOM2Md(vditor.wysiwyg.element.innerHTML);
+    } else if (vditor.currentMode === "ir") {
+        return vditor.lute.VditorIRDOM2Md(vditor.ir.element.innerHTML);
+    }
+    return "";
+};

package/src/ts/markdown/graphvizRender.ts

@@ -0,0 +1,49 @@
+import {Constants} from "../constants";
+import {addScript} from "../util/addScript";
+import {graphvizRenderAdapter} from "./adapterRender";
+
+declare class Viz {
+    public renderSVGElement: (code: string) => Promise<any>;
+
+    constructor({ }: { worker: Worker });
+}
+
+export const graphvizRender = (element: HTMLElement, cdn = Constants.CDN) => {
+    const graphvizElements = graphvizRenderAdapter.getElements(element);
+
+    if (graphvizElements.length === 0) {
+        return;
+    }
+    addScript(`${cdn}/dist/js/graphviz/viz.js`, "vditorGraphVizScript").then(() => {
+        graphvizElements.forEach((e: HTMLDivElement) => {
+            const code = graphvizRenderAdapter.getCode(e);
+            if (e.parentElement.classList.contains("vditor-wysiwyg__pre") ||
+                e.parentElement.classList.contains("vditor-ir__marker--pre")) {
+                return;
+            }
+
+            if (e.getAttribute("data-processed") === "true" || code.trim() === "") {
+                return;
+            }
+
+            try {
+                const blob = new Blob([`importScripts('${(document.getElementById("vditorGraphVizScript") as HTMLScriptElement).src.replace("viz.js", "full.render.js")}');`],
+                    { type: "application/javascript" });
+                const url = window.URL || window.webkitURL;
+                const blobUrl = url.createObjectURL(blob);
+                const worker = new Worker(blobUrl);
+                new Viz({ worker })
+                    .renderSVGElement(code).then((result: HTMLElement) => {
+                        e.innerHTML = result.outerHTML;
+                    }).catch((error) => {
+                        e.innerHTML = `graphviz render error: <br>${error}`;
+                        e.className = "vditor-reset--error";
+                    });
+            } catch (e) {
+                console.error("graphviz error", e);
+            }
+
+            e.setAttribute("data-processed", "true");
+        });
+    });
+};

package/src/ts/markdown/highlightRender.ts

@@ -0,0 +1,94 @@
+import {Constants} from "../constants";
+import {addScript} from "../util/addScript";
+import {addStyle} from "../util/addStyle";
+
+export const highlightRender = (hljsOption?: IHljs, element: HTMLElement | Document = document,
+                                cdn = Constants.CDN) => {
+    let style = hljsOption.style;
+    if (!Constants.CODE_THEME.includes(style)) {
+        style = "github";
+    }
+    const vditorHljsStyle = document.getElementById("vditorHljsStyle") as HTMLLinkElement;
+    const href = `${cdn}/dist/js/highlight.js/styles/${style}.min.css`;
+    if (vditorHljsStyle && vditorHljsStyle.getAttribute('href') !== href) {
+        vditorHljsStyle.remove();
+    }
+    addStyle(`${cdn}/dist/js/highlight.js/styles/${style}.min.css`, "vditorHljsStyle");
+
+    if (hljsOption.enable === false) {
+        return;
+    }
+
+    const codes = element.querySelectorAll("pre > code");
+    if (codes.length === 0) {
+        return;
+    }
+
+    addScript(`${cdn}/dist/js/highlight.js/highlight.min.js?v=11.7.0`, "vditorHljsScript").then(() => {
+        addScript(`${cdn}/dist/js/highlight.js/third-languages.js?v=1.0.1`, "vditorHljsThirdScript").then(() => {
+            element.querySelectorAll("pre > code").forEach((block) => {
+                // ir & wysiwyg 区域不渲染
+                if (block.parentElement.classList.contains("vditor-ir__marker--pre") ||
+                    block.parentElement.classList.contains("vditor-wysiwyg__pre")) {
+                    return;
+                }
+
+                if (block.classList.contains("language-mermaid") || block.classList.contains("language-flowchart") ||
+                    block.classList.contains("language-echarts") || block.classList.contains("language-mindmap") ||
+                    block.classList.contains("language-plantuml")|| block.classList.contains("language-smiles") ||
+                    block.classList.contains("language-abc") || block.classList.contains("language-graphviz") ||
+                    block.classList.contains("language-math")) {
+                    return;
+                }
+
+                if (hljsOption.defaultLang !== "" && block.className.indexOf("language-") === -1) {
+                    block.classList.add("language-" + hljsOption.defaultLang)
+                }
+
+                let language = block.className.replace("language-", "");
+                if (!window.hljs.getLanguage(language)) {
+                    language = "plaintext";
+                }
+                block.innerHTML = window.hljs.highlight(
+                    block.textContent,
+                    {
+                        language,
+                        ignoreIllegals: true
+                    }).value;
+
+                block.classList.add("hljs");
+                if (!hljsOption.lineNumber) {
+                    return;
+                }
+
+                block.classList.add("vditor-linenumber");
+                let linenNumberTemp: HTMLDivElement = block.querySelector(".vditor-linenumber__temp");
+                if (!linenNumberTemp) {
+                    linenNumberTemp = document.createElement("div");
+                    linenNumberTemp.className = "vditor-linenumber__temp";
+                    block.insertAdjacentElement("beforeend", linenNumberTemp);
+                }
+                const whiteSpace = getComputedStyle(block).whiteSpace;
+                let isSoftWrap = false;
+                if (whiteSpace === "pre-wrap" || whiteSpace === "pre-line") {
+                    isSoftWrap = true;
+                }
+                let lineNumberHTML = "";
+                const lineList = block.textContent.split(/\r\n|\r|\n/g);
+                lineList.pop();
+                lineList.map((line) => {
+                    let lineHeight = "";
+                    if (isSoftWrap) {
+                        linenNumberTemp.textContent = line || "\n";
+                        lineHeight = ` style="height:${linenNumberTemp.getBoundingClientRect().height}px"`;
+                    }
+                    lineNumberHTML += `<span${lineHeight}></span>`;
+                });
+
+                linenNumberTemp.style.display = "none";
+                lineNumberHTML = `<span class="vditor-linenumber__rows">${lineNumberHTML}</span>`;
+                block.insertAdjacentHTML("beforeend", lineNumberHTML);
+            })
+        })
+    });
+};

package/src/ts/markdown/lazyLoadImageRender.ts

@@ -0,0 +1,56 @@
+declare global {
+    interface Window {
+        vditorImageIntersectionObserver: IntersectionObserver;
+    }
+}
+
+export const lazyLoadImageRender = (element: (HTMLElement | Document) = document) => {
+    const loadImg = (it: HTMLImageElement) => {
+        const testImage = document.createElement("img");
+        testImage.src = it.getAttribute("data-src");
+        testImage.addEventListener("load", () => {
+            if (!it.getAttribute("style") && !it.getAttribute("class") &&
+                !it.getAttribute("width") && !it.getAttribute("height")) {
+                if (testImage.naturalHeight > testImage.naturalWidth &&
+                    testImage.naturalWidth / testImage.naturalHeight <
+                    document.querySelector(".vditor-reset").clientWidth / (window.innerHeight - 40) &&
+                    testImage.naturalHeight > (window.innerHeight - 40)) {
+                    it.style.height = (window.innerHeight - 40) + "px";
+                }
+            }
+
+            it.src = testImage.src;
+        });
+        it.removeAttribute("data-src");
+    };
+
+    if (!("IntersectionObserver" in window)) {
+        element.querySelectorAll("img").forEach((imgElement: HTMLImageElement) => {
+            if (imgElement.getAttribute("data-src")) {
+                loadImg(imgElement);
+            }
+        });
+        return false;
+    }
+
+    if (window.vditorImageIntersectionObserver) {
+        window.vditorImageIntersectionObserver.disconnect();
+        element.querySelectorAll("img").forEach((imgElement) => {
+            window.vditorImageIntersectionObserver.observe(imgElement);
+        });
+    } else {
+        window.vditorImageIntersectionObserver = new IntersectionObserver((entries) => {
+            entries.forEach((entrie: IntersectionObserverEntry & { target: HTMLImageElement }) => {
+                if ((typeof entrie.isIntersecting === "undefined"
+                    ? entrie.intersectionRatio !== 0
+                    : entrie.isIntersecting)
+                    && entrie.target.getAttribute("data-src")) {
+                    loadImg(entrie.target);
+                }
+            });
+        });
+        element.querySelectorAll("img").forEach((imgElement) => {
+            window.vditorImageIntersectionObserver.observe(imgElement);
+        });
+    }
+};

package/src/ts/markdown/markmapRender.ts

@@ -0,0 +1,56 @@
+import {Constants} from "../constants";
+import {addScript} from "../util/addScript";
+import {markmapRenderAdapter} from "./adapterRender";
+
+declare const window: any;
+const enabled: Record<string, boolean> = {};
+
+const transform = (transformer: any,content: string)=>{
+    const result = transformer.transform(content);
+    const keys = Object.keys(result.features).filter((key) => !enabled[key]);
+    keys.forEach((key) => {
+        enabled[key] = true;
+    });
+    const { styles, scripts } = transformer.getAssets(keys);
+    const { markmap } = window;
+    if (styles) markmap.loadCSS(styles);
+    if (scripts) markmap.loadJS(scripts);
+    return result;
+}
+
+const init = (el: HTMLElement,code: string) => {
+    const { Transformer, Markmap, deriveOptions , globalCSS} = window.markmap;
+    const transformer = new Transformer();
+    el.innerHTML = '<svg style="width:100%"></svg>';
+    const svg = el.firstChild as SVGElement;
+    const mm = Markmap.create(svg, null);
+    const { root, frontmatter } = transform(transformer, code);
+    const markmapOptions = frontmatter?.markmap;
+    const frontmatterOptions = deriveOptions(markmapOptions);
+    mm.setData(root, frontmatterOptions);
+    mm.fit();
+  }
+
+
+export const markmapRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN) => {
+    const markmapElements = markmapRenderAdapter.getElements(element);
+    if (markmapElements.length === 0) {
+        return;
+    }
+    addScript(`${cdn}/dist/js/markmap/markmap.min.js`, "vditorMarkerScript").then(() => {
+        markmapElements.forEach((item) => {
+            const code = markmapRenderAdapter.getCode(item);
+            if (item.getAttribute("data-processed") === "true" || code.trim() === "") {
+                return;
+            }
+            const render = document.createElement("div")
+            render.className = "language-markmap"
+            item.parentNode.appendChild(render)
+            init(render,code)
+
+            if(item.parentNode.childNodes[0].nodeName == "CODE"){
+                item.parentNode.removeChild(item.parentNode.childNodes[0])
+            }
+        });
+    });
+};