@yltrcc/vditor 0.2.0 → 0.3.0

package/src/ts/wysiwyg/index.ts

@@ -251,8 +251,39 @@ class WYSIWYG {
             }
         });
 
+        // 处理带尺寸的图片 - 将 <img> 标签替换为自定义 Markdown 语法
+        const images = tempElement.querySelectorAll('img[data-resizable="true"]');
+        images.forEach((imgElement) => {
+            const img = imgElement as HTMLImageElement;
+            const src = img.getAttribute("src") || "";
+            const alt = img.getAttribute("alt") || "";
+            
+            let width = img.getAttribute("width") || "";
+            let height = img.getAttribute("height") || "";
+            
+            if (!width && img.style.width) {
+                width = img.style.width.replace("px", "").replace("%", "");
+            }
+            if (!height && img.style.height) {
+                height = img.style.height.replace("px", "").replace("%", "");
+            }
+            
+            if (width && height) {
+                const md = `![${alt}](${src} =${width}x${height})`;
+                imgElement.replaceWith(document.createTextNode(md));
+            } else if (width) {
+                const md = `![${alt}](${src} =${width}x)`;
+                imgElement.replaceWith(document.createTextNode(md));
+            } else if (height) {
+                const md = `![${alt}](${src} =x${height})`;
+                imgElement.replaceWith(document.createTextNode(md));
+            }
+        });
+
         event.clipboardData.setData("text/plain", vditor.lute.VditorDOM2Md(tempElement.innerHTML).trim());
         event.clipboardData.setData("text/html", "");
+        console.log('Copy completed, data set to clipboard');
+
     }
 
     private bindEvent(vditor: IVditor) {

package/src/ts/wysiwyg/input.ts

@@ -9,6 +9,7 @@ import {setRangeByWbr} from "../util/selection";
 import {renderToc} from "../util/toc";
 import {afterRenderEvent} from "./afterRenderEvent";
 import {previoueIsEmptyA} from "./inlineTag";
+import {processImageSizeInDOM, preprocessImageSize} from "./renderDomByMd";
 
 export const input = (vditor: IVditor, range: Range, event?: InputEvent) => {
     // 检查是否在代码块编辑模式中
@@ -165,16 +166,19 @@ export const input = (vditor: IVditor, range: Range, event?: InputEvent) => {
             blockElement.innerHTML = html;
         } else {
             blockElement.outerHTML = html;
+        }
 
-            if (footnoteElement) {
-                // 更新正文中的 tip
-                const footnoteItemElement = hasTopClosestByTag(vditor.wysiwyg.element.querySelector("wbr"), "LI");
-                if (footnoteItemElement) {
-                    const footnoteRefElement = vditor.wysiwyg.element.querySelector(`sup[data-type="footnotes-ref"][data-footnotes-label="${footnoteItemElement.getAttribute("data-marker")}"]`);
-                    if (footnoteRefElement) {
-                        footnoteRefElement.setAttribute("aria-label",
-                            footnoteItemElement.textContent.trim().substr(0, 24));
-                    }
+        // 处理图片尺寸
+        processImageSizeInDOM(vditor.wysiwyg.element);
+
+        if (footnoteElement) {
+            // 更新正文中的 tip
+            const footnoteItemElement = hasTopClosestByTag(vditor.wysiwyg.element.querySelector("wbr"), "LI");
+            if (footnoteItemElement) {
+                const footnoteRefElement = vditor.wysiwyg.element.querySelector(`sup[data-type="footnotes-ref"][data-footnotes-label="${footnoteItemElement.getAttribute("data-marker")}"]`);
+                if (footnoteRefElement) {
+                    footnoteRefElement.setAttribute("aria-label",
+                        footnoteItemElement.textContent.trim().substr(0, 24));
                 }
             }
         }

package/src/ts/wysiwyg/renderDomByMd.ts

@@ -1,13 +1,121 @@
 import {processCodeRender} from "../util/processCode";
 import {afterRenderEvent} from "./afterRenderEvent";
 
+/**
+ * 后处理 DOM，处理图片尺寸
+ * 1. 将文本节点中的 ![alt](url =300x200) 转换为带尺寸的 <img>
+ * 2. 给没有 width/height 的 <img> 添加默认尺寸 300x200
+ */
+export const processImageSizeInDOM = (element: HTMLElement) => {
+    console.log('processImageSizeInDOM called');
+    
+    // 第一步：处理文本节点中的带尺寸图片语法 ![alt](url =300x200)
+    const walker = document.createTreeWalker(
+        element,
+        NodeFilter.SHOW_TEXT,
+        null
+    );
+    
+    const textNodes: Text[] = [];
+    let node: Node | null;
+    while (node = walker.nextNode()) {
+        textNodes.push(node as Text);
+    }
+    
+    textNodes.forEach((textNode) => {
+        const text = textNode.textContent || '';
+        
+        // 匹配带尺寸的图片: ![alt](url =300x200)
+        const imageWithSizeRegex = /!\[([^\]]*)\]\(([^)]+?)\s*=(\d+)x(\d+)\)/g;
+        
+        if (imageWithSizeRegex.test(text)) {
+            console.log('Found image with size in text:', text);
+            
+            const parent = textNode.parentNode;
+            if (parent) {
+                const tempDiv = document.createElement('div');
+                
+                const processedText = text.replace(imageWithSizeRegex, (match, alt, url, width, height) => {
+                    console.log('Match found:', { match, alt, url, width, height });
+                    let imgHtml = `<img src="${url.trim()}" alt="${alt}" data-resizable="true"`;
+                    if (width) imgHtml += ` width="${width}"`;
+                    if (height) imgHtml += ` height="${height}"`;
+                    imgHtml += " />";
+                    console.log('Generated imgHtml:', imgHtml);
+                    return imgHtml;
+                });
+                
+                tempDiv.innerHTML = processedText;
+                
+                // 替换文本节点
+                while (tempDiv.firstChild) {
+                    parent.insertBefore(tempDiv.firstChild, textNode);
+                }
+                
+                parent.removeChild(textNode);
+            }
+        }
+    });
+    
+    // 第二步：给没有 width/height 的 <img> 添加默认尺寸
+    const images = element.querySelectorAll('img:not([data-resizable="true"])');
+    images.forEach((img) => {
+        const imgElement = img as HTMLImageElement;
+        const width = imgElement.getAttribute('width');
+        const height = imgElement.getAttribute('height');
+        const styleWidth = imgElement.style.width;
+        const styleHeight = imgElement.style.height;
+        
+        // 如果没有设置尺寸，添加默认尺寸
+        if (!width && !height && !styleWidth && !styleHeight) {
+            console.log('Adding default size to img:', imgElement.src);
+            imgElement.setAttribute('width', '300');
+            imgElement.setAttribute('height', '200');
+            imgElement.setAttribute('data-resizable', 'true');
+        }
+    });
+};
+
+/**
+ * 预处理 Markdown，为没有尺寸的图片添加默认尺寸
+ * 将 ![alt](url) 转换为 ![alt](url =300x200)
+ */
+export const preprocessImageSize = (md: string): string => {
+    // 匹配普通图片语法 ![alt](url)，但排除已经有 =widthxheight 的
+    // 使用负向前瞻来排除已包含 = 的图片
+    const imageRegex = /!\[([^\]]*)\]\(([^)=\]]+)\)(?![\s\w]*=)/g;
+    
+    return md.replace(imageRegex, (match, alt, url) => {
+        // 检查 URL 是否已经包含尺寸参数
+        if (url.includes('=')) {
+            return match;
+        }
+        console.log('Preprocess: Adding default size to image:', match);
+        return `![${alt}](${url.trim()} =300x200)`;
+    });
+};
+
 export const renderDomByMd = (vditor: IVditor, md: string, options = {
     enableAddUndoStack: true,
     enableHint: false,
     enableInput: true,
 }) => {
     const editorElement = vditor.wysiwyg.element;
-    editorElement.innerHTML = vditor.lute.Md2VditorDOM(md);
+    
+    console.log('renderDomByMd input:', md);
+    
+    // 预处理：为普通图片添加默认尺寸
+    const processedMd = preprocessImageSize(md);
+    console.log('After preprocess:', processedMd);
+    
+    editorElement.innerHTML = vditor.lute.Md2VditorDOM(processedMd);
+    
+    console.log('After Lute render:', editorElement.innerHTML);
+    
+    // 后处理图片尺寸（处理带 =widthxheight 的）
+    processImageSizeInDOM(editorElement);
+    
+    console.log('After processImageSizeInDOM:', editorElement.innerHTML);
 
     editorElement.querySelectorAll(".vditor-wysiwyg__preview[data-render='2']").forEach((item: HTMLElement) => {
         processCodeRender(item, vditor);