@8btc/mditor 0.0.13 → 0.0.15

package/src/assets/less/_reset.less

@@ -214,6 +214,7 @@
 
         pre {
             margin: 1em 0;
+            position: relative;
 
             & > code {
                 margin: 0;
@@ -230,8 +231,13 @@
                 word-wrap: normal;
             }
 
-            &:hover div.vditor-copy {
-                display: block;
+            div.vditor-copy {
+                display: inline-flex;
+                position: absolute;
+                right: 0.94rem;
+                top: 0.5em;
+                align-items: center;
+                gap: var(--vditor-copy-gap, 0.5rem);
             }
         }
 
@@ -341,9 +347,11 @@
     }
 
     &-copy {
-        position: relative;
+        position: absolute;
         display: none;
         z-index: 1;
+        right: 0.94rem;
+        top: 0.5em;
 
         textarea {
             position: absolute;
@@ -351,11 +359,9 @@
             height: 0.63rem;
         }
 
-        span {
+        &__item {
             cursor: pointer;
-            position: absolute;
-            right: 0.94rem;
-            top: 0.5em;
+            position: static;
         }
 
         svg {

package/src/ts/markdown/codeRender.ts

@@ -1,60 +1,154 @@
-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();
+import { code160to32 } from "../util/code160to32";
+import { Constants } from "../constants";
+
+/**
+ * 为预览区域中的代码块添加辅助操作：
+ * - 复制按钮：一键复制代码文本
+ * - 运行按钮：当启用 runCode 时，向外部回调当前代码块的 HTML 字符串
+ */
+export const codeRender = (
+    element: HTMLElement,
+    option?: IHljs,
+    runCode?: {
+        enable?: boolean;
+        items?: string[];
+        callback?(payload: { code: string; lang: string }): void;
+    }
+) => {
+    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 playIconHTML = document.getElementById("vditorIconScript")
+                ? '<svg><use xlink:href="#vditor-icon-run"></use></svg>'
+                : '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-play-icon lucide-circle-play"><path d="M9 9.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997A1 1 0 0 1 9 14.996z"/><circle cx="12" cy="12" r="10"/></svg>';
+
+            const divElement = document.createElement("div");
+            divElement.className = "vditor-copy";
+
+            const textarea = document.createElement("textarea");
+            textarea.value = code160to32(codeText);
+            divElement.appendChild(textarea);
+
+            const langMatch = e.className.match(/language-([^\s]+)/);
+            const lang = langMatch ? langMatch[1] : "";
+            const allowRun =
+                !!runCode?.enable &&
+                (!runCode.items || (lang && runCode.items.includes(lang)));
+
+            if (allowRun) {
+                const runSpan = document.createElement("span");
+                runSpan.setAttribute(
+                    "aria-label",
+                    (window.VditorI18n as any)?.run || "运行"
+                );
+                runSpan.setAttribute(
+                    "onmouseover",
+                    `this.setAttribute('aria-label', '${
+                        (window.VditorI18n as any)?.run || "运行"
+                    }')`
+                );
+                runSpan.className =
+                    "vditor-copy__item vditor-tooltipped vditor-tooltipped__w";
+                runSpan.innerHTML = playIconHTML;
+                runSpan.addEventListener("click", (evt) => {
+                    evt.stopPropagation();
+                    runCode?.callback?.({
+                        code: code160to32(codeText),
+                        lang,
+                    });
+                });
+                divElement.appendChild(runSpan);
+            }
+
+            const copySpan = document.createElement("span");
+            copySpan.setAttribute(
+                "aria-label",
+                window.VditorI18n?.copy || "复制"
+            );
+            copySpan.setAttribute(
+                "onmouseover",
+                `this.setAttribute('aria-label', '${
+                    window.VditorI18n?.copy || "复制"
+                }')`
+            );
+            copySpan.className =
+                "vditor-copy__item vditor-tooltipped vditor-tooltipped__w";
+            copySpan.addEventListener("click", (evt) => {
+                evt.stopPropagation();
+                const ta = divElement.querySelector(
+                    "textarea"
+                ) as HTMLTextAreaElement;
+                if (ta) {
+                    ta.select();
+                    document.execCommand("copy");
+                    copySpan.setAttribute(
+                        "aria-label",
+                        window.VditorI18n?.copied || "已复制"
+                    );
+                    ta.blur();
+                }
             });
-            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>`)
-    });
+            copySpan.innerHTML = iconHTML;
+            divElement.appendChild(copySpan);
+
+            if (option && option.renderMenu) {
+                option.renderMenu(e, divElement);
+            }
+            e.before(divElement);
+            e.style.maxHeight = 300 + "px";
+            // https://github.com/Vanessa219/vditor/issues/1356
+            e.insertAdjacentHTML(
+                "afterend",
+                `<span style="position: absolute">${Constants.ZWSP}</span>`
+            );
+        });
 };

package/src/ts/markdown/previewRender.ts

@@ -1,7 +1,10 @@
 import { Constants } from "../constants";
 import { setContentTheme } from "../ui/setContentTheme";
 import { addScript } from "../util/addScript";
-import { hasClosestByClassName, hasClosestByMatchTag } from "../util/hasClosest";
+import {
+    hasClosestByClassName,
+    hasClosestByMatchTag,
+} from "../util/hasClosest";
 import { merge } from "../util/merge";
 import { abcRender } from "./abcRender";
 import { anchorRender } from "./anchorRender";
@@ -37,16 +40,19 @@ const mergeOptions = (options?: IPreviewOptions) => {
         speech: {
             enable: false,
         },
+        runCode: {
+            enable: false,
+        },
         render: {
             media: {
                 enable: true,
-            }
+            },
         },
         theme: Constants.THEME_OPTIONS,
     };
     if (options.cdn) {
         if (!options.theme?.path) {
-            defaultOption.theme.path = `${options.cdn}/dist/css/content-theme`
+            defaultOption.theme.path = `${options.cdn}/dist/css/content-theme`;
         }
         if (!options.emojiPath) {
             defaultOption.emojiPath = `${options.cdn}/dist/images/emoji`;
@@ -57,7 +63,10 @@ const mergeOptions = (options?: IPreviewOptions) => {
 
 export const md2html = (mdText: string, options?: IPreviewOptions) => {
     const mergedOptions = mergeOptions(options);
-    return addScript(`${mergedOptions.cdn}/dist/js/lute/lute.min.js`, "vditorLuteScript").then(() => {
+    return addScript(
+        `${mergedOptions.cdn}/dist/js/lute/lute.min.js`,
+        "vditorLuteScript"
+    ).then(() => {
         const lute = setLute({
             autoSpace: mergedOptions.markdown.autoSpace,
             gfmAutoLink: mergedOptions.markdown.gfmAutoLink,
@@ -74,7 +83,8 @@ export const md2html = (mdText: string, options?: IPreviewOptions) => {
             listStyle: mergedOptions.markdown.listStyle,
             mark: mergedOptions.markdown.mark,
             mathBlockPreview: mergedOptions.markdown.mathBlockPreview,
-            paragraphBeginningSpace: mergedOptions.markdown.paragraphBeginningSpace,
+            paragraphBeginningSpace:
+                mergedOptions.markdown.paragraphBeginningSpace,
             sanitize: mergedOptions.markdown.sanitize,
             sub: mergedOptions.markdown.sub,
             sup: mergedOptions.markdown.sup,
@@ -92,7 +102,11 @@ export const md2html = (mdText: string, options?: IPreviewOptions) => {
     });
 };
 
-export const previewRender = async (previewElement: HTMLDivElement, markdown: string, options?: IPreviewOptions) => {
+export const previewRender = async (
+    previewElement: HTMLDivElement,
+    markdown: string,
+    options?: IPreviewOptions
+) => {
     const mergedOptions: IPreviewOptions = mergeOptions(options);
     let html = await md2html(markdown, mergedOptions);
     if (mergedOptions.transform) {
@@ -102,33 +116,56 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
     previewElement.classList.add("vditor-reset");
 
     if (!mergedOptions.i18n) {
-        if (!["de_DE", "en_US", "es_ES", "fr_FR", "ja_JP", "ko_KR", "pt_BR", "ru_RU", "sv_SE", "vi_VN", "zh_CN", "zh_TW"].includes(mergedOptions.lang)) {
+        if (
+            ![
+                "de_DE",
+                "en_US",
+                "es_ES",
+                "fr_FR",
+                "ja_JP",
+                "ko_KR",
+                "pt_BR",
+                "ru_RU",
+                "sv_SE",
+                "vi_VN",
+                "zh_CN",
+                "zh_TW",
+            ].includes(mergedOptions.lang)
+        ) {
             throw new Error(
-                "options.lang error, see https://ld246.com/article/1549638745630#options",
+                "options.lang error, see https://ld246.com/article/1549638745630#options"
             );
         } else {
             const i18nScriptPrefix = "vditorI18nScript";
             const i18nScriptID = i18nScriptPrefix + mergedOptions.lang;
-            document.querySelectorAll(`head script[id^="${i18nScriptPrefix}"]`).forEach((el) => {
-                if (el.id !== i18nScriptID) {
-                    document.head.removeChild(el);
-                }
-            });
-            await addScript(`${mergedOptions.cdn}/dist/js/i18n/${mergedOptions.lang}.js`, i18nScriptID);
+            document
+                .querySelectorAll(`head script[id^="${i18nScriptPrefix}"]`)
+                .forEach((el) => {
+                    if (el.id !== i18nScriptID) {
+                        document.head.removeChild(el);
+                    }
+                });
+            await addScript(
+                `${mergedOptions.cdn}/dist/js/i18n/${mergedOptions.lang}.js`,
+                i18nScriptID
+            );
         }
     } else {
         window.VditorI18n = mergedOptions.i18n;
     }
 
     if (mergedOptions.icon) {
-        await addScript(`${mergedOptions.cdn}/dist/js/icons/${mergedOptions.icon}.js`, "vditorIconScript");
+        await addScript(
+            `${mergedOptions.cdn}/dist/js/icons/${mergedOptions.icon}.js`,
+            "vditorIconScript"
+        );
     }
 
     setContentTheme(mergedOptions.theme.current, mergedOptions.theme.path);
     if (mergedOptions.anchor === 1) {
         previewElement.classList.add("vditor-reset--anchor");
     }
-    codeRender(previewElement, mergedOptions.hljs);
+    codeRender(previewElement, mergedOptions.hljs, mergedOptions.runCode);
     highlightRender(mergedOptions.hljs, previewElement, mergedOptions.cdn);
     mathRender(previewElement, {
         cdn: mergedOptions.cdn,
@@ -159,15 +196,22 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
     if (mergedOptions.lazyLoadImage) {
         lazyLoadImageRender(previewElement);
     }
-    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);
+    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;
             }
-            return;
         }
-    });
+    );
 };