vditor 3.11.0 → 3.11.2

package/src/ts/util/fixBrowserBehavior.ts

@@ -52,7 +52,7 @@ export const fixCJKPosition = (range: Range, vditor: IVditor, event: KeyboardEve
 
         // https://github.com/Vanessa219/vditor/issues/1289 WKWebView切换输入法产生六分之一空格，造成光标错位
         if (pLiElement.nodeValue) {
-            pLiElement.nodeValue = pLiElement.nodeValue.replace(/\u2006/g, '');
+            pLiElement.nodeValue = pLiElement.nodeValue.replace(/\u2006/g, "");
         }
 
         const zwspNode = document.createTextNode(Constants.ZWSP);
@@ -1080,7 +1080,7 @@ export const fixBlockquote = (vditor: IVditor, range: Range, event: KeyboardEven
 
 export const fixTask = (vditor: IVditor, range: Range, event: KeyboardEvent) => {
     const startContainer = range.startContainer;
-    const taskItemElement = hasClosestByMatchTag(startContainer, "li");
+    const taskItemElement = hasClosestByMatchTag(startContainer, "LI");
     if (taskItemElement && taskItemElement.classList.contains("vditor-task")) {
         if (matchHotKey("⇧⌘J", event)) {
             // ctrl + shift: toggle checked
@@ -1255,7 +1255,7 @@ export const fixFirefoxArrowUpTable = (event: KeyboardEvent, blockElement: false
     return false;
 };
 
-export const paste = async (vditor: IVditor, event: (ClipboardEvent | DragEvent) & { target: HTMLElement }, callback: {
+export const paste = async (vditor: IVditor, event: (ClipboardEvent | DragEvent) & {target: HTMLElement}, callback: {
     pasteCode(code: string): void,
 }) => {
     if (vditor[vditor.currentMode].element.getAttribute("contenteditable") !== "true") {
@@ -1404,6 +1404,11 @@ export const paste = async (vditor: IVditor, event: (ClipboardEvent | DragEvent)
         if (textHTML.trim() !== "") {
             const tempElement = document.createElement("div");
             tempElement.innerHTML = textHTML;
+            if (!vditor.options.upload.base64ToLink) {
+                // word 复制的图文混合，替换为 link: <v:imagedata src="file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image001.png" o:title="">
+                await processVMLImage(vditor, tempElement, ("clipboardData" in event ? event.clipboardData : event.dataTransfer).getData("text/rtf"));
+            }
+
             tempElement.querySelectorAll("[style]").forEach((e) => {
                 e.removeAttribute("style");
             });
@@ -1440,14 +1445,14 @@ export const paste = async (vditor: IVditor, event: (ClipboardEvent | DragEvent)
                 if (file && file.type.startsWith("image")) {
                     fileReader.readAsDataURL(file);
                     fileReader.onload = () => {
-                        let imgHTML = ''
+                        let imgHTML = "";
                         if (vditor.currentMode === "wysiwyg") {
                             imgHTML += `<img alt="${file.name}" src="${fileReader.result.toString()}">\n`;
                         } else {
                             imgHTML += `![${file.name}](${fileReader.result.toString()})\n`;
                         }
                         document.execCommand("insertHTML", false, imgHTML);
-                    }
+                    };
                 }
             }
         } else if (textPlain.trim() !== "" && files.length === 0) {
@@ -1458,11 +1463,11 @@ export const paste = async (vditor: IVditor, event: (ClipboardEvent | DragEvent)
             if (vditor.currentMode === "ir") {
                 renderers.Md2VditorIRDOM = {renderLinkDest};
                 vditor.lute.SetJSRenderers({renderers});
-                insertHTML(vditor.lute.Md2VditorIRDOM(textPlain), vditor);
+                insertHTML(Lute.Sanitize(vditor.lute.Md2VditorIRDOM(textPlain)), vditor);
             } else if (vditor.currentMode === "wysiwyg") {
                 renderers.Md2VditorDOM = {renderLinkDest};
                 vditor.lute.SetJSRenderers({renderers});
-                insertHTML(vditor.lute.Md2VditorDOM(textPlain), vditor);
+                insertHTML(Lute.Sanitize(vditor.lute.Md2VditorDOM(textPlain)), vditor);
             } else {
                 renderers.Md2VditorSVDOM = {renderLinkDest};
                 vditor.lute.SetJSRenderers({renderers});
@@ -1499,3 +1504,66 @@ export const paste = async (vditor: IVditor, event: (ClipboardEvent | DragEvent)
         scrollCenter(vditor);
     }
 };
+
+const processVMLImage = async (vditor: IVditor, root: Element, rtfData: string) => {
+    if (!rtfData) {
+        return;
+
+    }
+
+    const regexPictureHeader = /{\\pict[\s\S]+?\\bliptag-?\d+(\\blipupi-?\d+)?({\\\*\\blipuid\s?[\da-fA-F]+)?[\s}]*?/;
+    const regexPicture = new RegExp("(?:(" + regexPictureHeader.source + "))([\\da-fA-F\\s]+)\\}", "g");
+    const regImages = rtfData.match(regexPicture);
+    const images = [];
+    if (regImages) {
+        for (const image of regImages) {
+            let imageType;
+
+            if (image.includes("\\pngblip")) {
+                imageType = "image/png";
+            } else if (image.includes("\\jpegblip")) {
+                imageType = "image/jpeg";
+            }
+
+            if (imageType) {
+                images.push({
+                    hex: image.replace(regexPictureHeader, "").replace(/[^\da-fA-F]/g, ""),
+                    type: imageType,
+                });
+            }
+        }
+    }
+
+    const shapes: Array<{shape: Element, img: Element}> = [];
+    walk(root, (child: Element) => {
+        if (child.tagName === "V:SHAPE") {
+            walk(child, (sub) => {
+                if (sub.tagName === "V:IMAGEDATA") shapes.push({shape: child, img: sub});
+            });
+            return false;
+        }
+    });
+    for (let i = 0; i < shapes.length; i++) {
+        const img = document.createElement("img");
+        const newSrc = "data:" + images[i].type + ";base64," + btoa((images[i].hex.match(/\w{2}/g) || []).map(char => {
+            return String.fromCharCode(parseInt(char, 16));
+        }).join(""));
+        img.src = newSrc;
+        img.title = shapes[i].img.getAttribute("title");
+        shapes[i].shape.parentNode.replaceChild(img, shapes[i].shape);
+    }
+
+    const imgs = root.querySelectorAll("img");
+    for (let i = 0; i < imgs.length; i++) {
+        const src = imgs[i].src || "";
+        if (src) imgs[i].src = await vditor.options.upload.base64ToLink(src);
+    }
+};
+
+const walk = (el: Element, fn: (el: Element) => boolean | void) => {
+    const goNext = fn(el);
+    if (goNext !== false)
+        for (let i = 0; i < el.children.length; i++) {
+            walk(el.children[i], fn);
+        }
+};

package/src/ts/util/selection.ts

@@ -1,6 +1,6 @@
 import {Constants} from "../constants";
 import {isChrome} from "./compatibility";
-import {hasClosestBlock, hasClosestByClassName} from "./hasClosest";
+import {hasClosestBlock, hasClosestByClassName, hasClosestByMatchTag} from "./hasClosest";
 
 export const getEditorRange = (vditor: IVditor) => {
     let range: Range;
@@ -262,7 +262,12 @@ export const insertHTML = (html: string, vditor: IVditor) => {
         if (!blockElement) {
             vditor[vditor.currentMode].element.insertAdjacentHTML("beforeend", pasteElement.innerHTML);
         } else {
-            blockElement.insertAdjacentHTML("afterend", pasteElement.innerHTML);
+            const liElement = hasClosestByMatchTag(range.startContainer, "LI");
+            if (liElement && pasteElement.firstElementChild.tagName === "UL") {
+                liElement.insertAdjacentHTML("afterend", pasteElement.firstElementChild.innerHTML);
+            } else {
+                blockElement.insertAdjacentHTML("afterend", pasteElement.innerHTML);
+            }
         }
         setRangeByWbr(vditor[vditor.currentMode].element, range);
     } else {

package/src/ts/wysiwyg/highlightToolbarWYSIWYG.ts

@@ -65,6 +65,7 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
         if (footnotesElement) {
             vditor.wysiwyg.popover.innerHTML = "";
             genClose(footnotesElement, vditor);
+            customWysiwygToolbar(vditor, "footnotes-block")
             setPopoverPosition(vditor, footnotesElement);
             return;
         }
@@ -195,6 +196,7 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
         if (tocElement) {
             vditor.wysiwyg.popover.innerHTML = "";
             genClose(tocElement, vditor);
+            customWysiwygToolbar(vditor, "vditor-toc")
             setPopoverPosition(vditor, tocElement);
             return;
         }
@@ -206,6 +208,7 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
             genUp(range, blockquoteElement, vditor);
             genDown(range, blockquoteElement, vditor);
             genClose(blockquoteElement, vditor);
+            customWysiwygToolbar(vditor, "blockquote")
             setPopoverPosition(vditor, blockquoteElement);
         }
 
@@ -216,7 +219,7 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
             genUp(range, liElement, vditor);
             genDown(range, liElement, vditor);
             genClose(liElement, vditor);
-
+            customWysiwygToolbar(vditor, "li")
             setPopoverPosition(vditor, liElement);
         }
 
@@ -549,6 +552,7 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
             vditor.wysiwyg.popover.insertAdjacentElement("beforeend", inputWrap);
             vditor.wysiwyg.popover.insertAdjacentHTML("beforeend", " x ");
             vditor.wysiwyg.popover.insertAdjacentElement("beforeend", input2Wrap);
+            customWysiwygToolbar(vditor, "table")
             setPopoverPosition(vditor, tableElement);
         }
 
@@ -596,6 +600,7 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
 
             genClose(footnotesRefElement, vditor);
             vditor.wysiwyg.popover.insertAdjacentElement("beforeend", inputWrap);
+            customWysiwygToolbar(vditor, "footnotes-ref")
             setPopoverPosition(vditor, footnotesRefElement);
         }
 
@@ -684,7 +689,7 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
                     }
                     const matchLangData: IHintData[] = [];
                     const key = language.value.substring(0, language.selectionStart);
-                    (vditor.options.preview.hljs.langs ||  Constants.ALIAS_CODE_LANGUAGES.concat((window.hljs?.listLanguages() ?? []).sort())).forEach((keyName) => {
+                    (vditor.options.preview.hljs.langs || Constants.ALIAS_CODE_LANGUAGES.concat((window.hljs?.listLanguages() ?? []).sort())).forEach((keyName) => {
                         if (keyName.indexOf(key.toLowerCase()) > -1) {
                             matchLangData.push({
                                 html: keyName,
@@ -696,6 +701,9 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
                     event.preventDefault();
                 };
                 vditor.wysiwyg.popover.insertAdjacentElement("beforeend", languageWrap);
+                customWysiwygToolbar(vditor, "code-block")
+            } else {
+                customWysiwygToolbar(vditor, "block")
             }
             setPopoverPosition(vditor, blockRenderElement);
         } else {
@@ -735,6 +743,7 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
             genDown(range, headingElement, vditor);
             genClose(headingElement, vditor);
             vditor.wysiwyg.popover.insertAdjacentElement("beforeend", inputWrap);
+            customWysiwygToolbar(vditor, "heading")
             setPopoverPosition(vditor, headingElement);
         }
 
@@ -763,7 +772,7 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
                 genUp(range, blockElement, vditor);
                 genDown(range, blockElement, vditor);
                 genClose(blockElement, vditor);
-
+                customWysiwygToolbar(vditor, "block")
                 setPopoverPosition(vditor, blockElement);
             } else {
                 vditor.wysiwyg.popover.style.display = "none";
@@ -864,6 +873,7 @@ export const genLinkRefPopover = (vditor: IVditor, linkRefElement: HTMLElement,
     genClose(linkRefElement, vditor);
     vditor.wysiwyg.popover.insertAdjacentElement("beforeend", inputWrap);
     vditor.wysiwyg.popover.insertAdjacentElement("beforeend", input1Wrap);
+    customWysiwygToolbar(vditor, "link-ref")
     setPopoverPosition(vditor, linkRefElement);
 };
 
@@ -1058,6 +1068,7 @@ export const genAPopover = (vditor: IVditor, aElement: HTMLElement, range: Range
     vditor.wysiwyg.popover.insertAdjacentElement("beforeend", inputWrap);
     vditor.wysiwyg.popover.insertAdjacentElement("beforeend", input1Wrap);
     vditor.wysiwyg.popover.insertAdjacentElement("beforeend", input2Wrap);
+    customWysiwygToolbar(vditor, "a")
     setPopoverPosition(vditor, aElement);
 };
 
@@ -1122,7 +1133,7 @@ export const genImagePopover = (event: Event, vditor: IVditor) => {
     vditor.wysiwyg.popover.insertAdjacentElement("beforeend", inputWrap);
     vditor.wysiwyg.popover.insertAdjacentElement("beforeend", altWrap);
     vditor.wysiwyg.popover.insertAdjacentElement("beforeend", titleWrap);
-
+    customWysiwygToolbar(vditor, "image")
     setPopoverPosition(vditor, imgElement);
 };
 
@@ -1137,3 +1148,7 @@ const focusToElement = (event: KeyboardEvent, range: Range) => {
         return true;
     }
 };
+
+const customWysiwygToolbar = (vditor: IVditor, type: TWYSISYGToolbar) => {
+    vditor.options.customWysiwygToolbar(type, vditor.wysiwyg.popover);
+};