@yltrcc/vditor 0.1.1 → 0.3.0

package/src/ts/markdown/getMarkdown.ts

@@ -1,60 +1,107 @@
-import {code160to32} from "../util/code160to32";
-
-/**
- * 将 doclink DOM 元素转换回 Markdown 语法
- * 处理 <span class="vditor-doclink-wrapper" data-doc-markdown="((id 'text'))">text</span>
- */
-const processDocLinksInHTML = (html: string): string => {
-    // 创建临时 DOM 元素来解析 HTML
-    const tempDiv = document.createElement("div");
-    tempDiv.innerHTML = html;
-
-    // 查找所有 doclink wrapper 元素
-    const docLinkWrappers = tempDiv.querySelectorAll(".vditor-doclink-wrapper");
-    docLinkWrappers.forEach((wrapper) => {
-        const markdown = wrapper.getAttribute("data-doc-markdown");
-        if (markdown) {
-            // 用文本节点替换整个 wrapper，内容为 Markdown 语法
-            wrapper.replaceWith(document.createTextNode(markdown));
-        } else {
-            // 如果没有 data-doc-markdown，尝试从 data-doc-id 和 data-doc-text 重建
-            const id = wrapper.getAttribute("data-doc-id");
-            const text = wrapper.getAttribute("data-doc-text");
-            if (id && text) {
-                wrapper.replaceWith(document.createTextNode(`((${id} '${text}'))`));
-            }
-        }
-    });
-
-    // 也处理旧的 .vditor-doclink 元素（没有 wrapper 的情况）
-    const docLinks = tempDiv.querySelectorAll(".vditor-doclink");
-    docLinks.forEach((link) => {
-        const markdown = link.getAttribute("data-doc-markdown");
-        if (markdown) {
-            link.replaceWith(document.createTextNode(markdown));
-        } else {
-            const id = link.getAttribute("data-doc-id");
-            const text = link.getAttribute("data-doc-text");
-            if (id && text) {
-                link.replaceWith(document.createTextNode(`((${id} '${text}'))`));
-            }
-        }
-    });
-
-    return tempDiv.innerHTML;
-};
-
-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") {
-        // 先处理 doclink 元素，将其转换回 Markdown 语法
-        const processedHTML = processDocLinksInHTML(vditor.wysiwyg.element.innerHTML);
-        return vditor.lute.VditorDOM2Md(processedHTML);
-    } else if (vditor.currentMode === "ir") {
-        // 同样处理 IR 模式
-        const processedHTML = processDocLinksInHTML(vditor.ir.element.innerHTML);
-        return vditor.lute.VditorIRDOM2Md(processedHTML);
-    }
-    return "";
-};
+import {code160to32} from "../util/code160to32";
+
+/**
+ * 将 doclink DOM 元素转换回 Markdown 语法
+ * 处理 <span class="vditor-doclink-wrapper" data-doc-markdown="((id 'text'))">text</span>
+ */
+const processDocLinksInHTML = (html: string): string => {
+    // 创建临时 DOM 元素来解析 HTML
+    const tempDiv = document.createElement("div");
+    tempDiv.innerHTML = html;
+
+    // 查找所有 doclink wrapper 元素
+    const docLinkWrappers = tempDiv.querySelectorAll(".vditor-doclink-wrapper");
+    docLinkWrappers.forEach((wrapper) => {
+        const markdown = wrapper.getAttribute("data-doc-markdown");
+        if (markdown) {
+            // 用文本节点替换整个 wrapper，内容为 Markdown 语法
+            wrapper.replaceWith(document.createTextNode(markdown));
+        } else {
+            // 如果没有 data-doc-markdown，尝试从 data-doc-id 和 data-doc-text 重建
+            const id = wrapper.getAttribute("data-doc-id");
+            const text = wrapper.getAttribute("data-doc-text");
+            if (id && text) {
+                wrapper.replaceWith(document.createTextNode(`((${id} '${text}'))`));
+            }
+        }
+    });
+
+    // 也处理旧的 .vditor-doclink 元素（没有 wrapper 的情况）
+    const docLinks = tempDiv.querySelectorAll(".vditor-doclink");
+    docLinks.forEach((link) => {
+        const markdown = link.getAttribute("data-doc-markdown");
+        if (markdown) {
+            link.replaceWith(document.createTextNode(markdown));
+        } else {
+            const id = link.getAttribute("data-doc-id");
+            const text = link.getAttribute("data-doc-text");
+            if (id && text) {
+                link.replaceWith(document.createTextNode(`((${id} '${text}'))`));
+            }
+        }
+    });
+
+    return tempDiv.innerHTML;
+};
+
+/**
+ * 处理图片尺寸，将带 width/height 属性的图片转换为 Markdown 语法
+ * 支持: ![alt](url =300x200)
+ */
+const processImageSizeInHTML = (html: string): string => {
+    const tempDiv = document.createElement("div");
+    tempDiv.innerHTML = html;
+
+    // 查找所有带有 data-resizable="true" 标记的图片元素
+    const images = tempDiv.querySelectorAll('img[data-resizable="true"]');
+    images.forEach((imgElement) => {
+        const img = imgElement as HTMLImageElement;
+        const src = img.getAttribute("src") || "";
+        const alt = img.getAttribute("alt") || "";
+
+        // 获取尺寸 - 优先从 attribute 获取
+        let width = img.getAttribute("width") || "";
+        let height = img.getAttribute("height") || "";
+
+        // 如果 attribute 没有或为空，尝试从 style 获取
+        if (!width && img.style.width) {
+            width = img.style.width.replace("px", "").replace("%", "");
+        }
+        if (!height && img.style.height) {
+            height = img.style.height.replace("px", "").replace("%", "");
+        }
+
+        // 构建带尺寸的 Markdown 语法: ![alt](url =300x200)
+        if (width && height) {
+            const md = `![${alt}](${src} =${width}x${height})`;
+            // 用 Markdown 文本替换图片元素
+            img.replaceWith(document.createTextNode(md));
+        } else if (width) {
+            const md = `![${alt}](${src} =${width}x)`;
+            img.replaceWith(document.createTextNode(md));
+        } else if (height) {
+            const md = `![${alt}](${src} =x${height})`;
+            img.replaceWith(document.createTextNode(md));
+        }
+    });
+
+    return tempDiv.innerHTML;
+};
+
+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") {
+        // 先处理图片尺寸 - 必须在处理 doclink 之前
+        let processedHTML = processImageSizeInHTML(vditor.wysiwyg.element.innerHTML);
+        // 再处理 doclink 元素
+        processedHTML = processDocLinksInHTML(processedHTML);
+        return vditor.lute.VditorDOM2Md(processedHTML);
+    } else if (vditor.currentMode === "ir") {
+        // 同样处理 IR 模式
+        let processedHTML = processImageSizeInHTML(vditor.ir.element.innerHTML);
+        processedHTML = processDocLinksInHTML(processedHTML);
+        return vditor.lute.VditorIRDOM2Md(processedHTML);
+    }
+    return "";
+};

package/src/ts/markdown/setLute.ts

@@ -1,26 +1,26 @@
-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);
-    lute.SetGFMAutoLink(options.gfmAutoLink);
-    if (options.lazyLoadImage) {
-        lute.SetImageLazyLoading(options.lazyLoadImage);
-    }
-    lute.SetSup(options.sup);
-    lute.SetSub(options.sub);
-    return lute;
-};
+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);
+    lute.SetGFMAutoLink(options.gfmAutoLink);
+    if (options.lazyLoadImage) {
+        lute.SetImageLazyLoading(options.lazyLoadImage);
+    }
+    lute.SetSup(options.sup);
+    lute.SetSub(options.sub);
+    return lute;
+};