vditor 3.11.2 → 3.11.3

package/src/ts/util/fixBrowserBehavior.ts

@@ -453,6 +453,41 @@ export const execAfterRender = (vditor: IVditor, options = {
     }
 };
 
+const isEmptyListItem = (liElement: HTMLElement) => {
+    if (liElement.textContent.split(Constants.ZWSP).join("").trim() !== "") {
+        return false;
+    }
+    return !liElement.querySelector([
+        "audio", "canvas", "embed", "hr", "iframe", "img", "object", "ol", "pre", "svg", "table", "ul", "video",
+        "input:not([type='checkbox'])",
+    ].join(", "));
+};
+
+export const exitEmptyListItem = (liElement: HTMLElement) => {
+    const listElement = liElement.parentElement;
+    const listParent = listElement.parentElement;
+    const paragraphElement = document.createElement("p");
+    paragraphElement.setAttribute("data-block", "0");
+    paragraphElement.innerHTML = "<wbr>";
+
+    let trailingListElement: HTMLElement | undefined;
+    if (liElement.nextElementSibling) {
+        trailingListElement = listElement.cloneNode(false) as HTMLElement;
+        while (liElement.nextElementSibling) {
+            trailingListElement.appendChild(liElement.nextElementSibling);
+        }
+        listParent.insertBefore(trailingListElement, listElement.nextSibling);
+    }
+
+    liElement.remove();
+    if (listElement.childElementCount === 0) {
+        listParent.replaceChild(paragraphElement, listElement);
+    } else {
+        listParent.insertBefore(paragraphElement, trailingListElement || listElement.nextSibling);
+    }
+    return paragraphElement;
+};
+
 export const fixList = (range: Range, vditor: IVditor, pElement: HTMLElement | false, event: KeyboardEvent) => {
     const startContainer = range.startContainer;
     const liElement = hasClosestByMatchTag(startContainer, "LI");
@@ -471,6 +506,28 @@ export const fixList = (range: Range, vditor: IVditor, pElement: HTMLElement | f
             return true;
         }
 
+        // 嵌套列表末尾的空列表项回车后转为父列表项中的段落
+        // https://github.com/Vanessa219/vditor/issues/939
+        if (!isCtrl(event) && !event.shiftKey && !event.altKey && event.key === "Enter" && range.collapsed &&
+            !liElement.nextElementSibling && liElement.parentElement.parentElement.tagName === "LI" &&
+            isEmptyListItem(liElement)) {
+            const paragraphElement = exitEmptyListItem(liElement);
+            setRangeByWbr(paragraphElement, range);
+            execAfterRender(vditor);
+            event.preventDefault();
+            return true;
+        }
+
+        // 空列表项删除标记后退出当前列表
+        if (!isCtrl(event) && !event.shiftKey && !event.altKey && event.key === "Backspace" &&
+            liElement.textContent.trim().replace(Constants.ZWSP, "") === "" && range.toString() === "") {
+            const paragraphElement = exitEmptyListItem(liElement);
+            setRangeByWbr(paragraphElement, range);
+            execAfterRender(vditor);
+            event.preventDefault();
+            return true;
+        }
+
         if (!isCtrl(event) && !event.shiftKey && !event.altKey && event.key === "Backspace" &&
             !liElement.previousElementSibling && range.toString() === "" &&
             getSelectPosition(liElement, vditor[vditor.currentMode].element, range).start === 0) {
@@ -488,20 +545,6 @@ export const fixList = (range: Range, vditor: IVditor, pElement: HTMLElement | f
             return true;
         }
 
-        // 空列表删除后与上一级段落对齐
-        if (!isCtrl(event) && !event.shiftKey && !event.altKey && event.key === "Backspace" &&
-            liElement.textContent.trim().replace(Constants.ZWSP, "") === "" &&
-            range.toString() === "" && liElement.previousElementSibling?.tagName === "LI") {
-            liElement.previousElementSibling.insertAdjacentText("beforeend", "\n\n");
-            range.selectNodeContents(liElement.previousElementSibling);
-            range.collapse(false);
-            liElement.remove();
-            setRangeByWbr(vditor[vditor.currentMode].element, range);
-            execAfterRender(vditor);
-            event.preventDefault();
-            return true;
-        }
-
         if (!isCtrl(event) && !event.altKey && event.key === "Tab") {
             // 光标位于第一/零字符时，tab 用于列表的缩进
             let isFirst = false;
@@ -1021,6 +1064,27 @@ export const fixBlockquote = (vditor: IVditor, range: Range, event: KeyboardEven
     const startContainer = range.startContainer;
     const blockquoteElement = hasClosestByMatchTag(startContainer, "BLOCKQUOTE");
     if (blockquoteElement && range.toString() === "") {
+        if (pElement && event.key === "Enter" && !isCtrl(event) && !event.shiftKey && !event.altKey &&
+            pElement.parentElement.isSameNode(blockquoteElement) &&
+            hasClosestByMatchTag(blockquoteElement.parentElement, "LI") &&
+            (range.collapsed || !range.cloneContents().firstElementChild) &&
+            pElement.innerHTML.replace(Constants.ZWSP, "") !== "\n" &&
+            pElement.innerHTML.replace(Constants.ZWSP, "") !== "") {
+            // 列表内的引用由浏览器处理回车时会新建列表项 https://github.com/Vanessa219/vditor/issues/1925
+            const trailingRange = range.cloneRange();
+            trailingRange.setEnd(pElement, pElement.childNodes.length);
+            const paragraphElement = document.createElement("p");
+            paragraphElement.setAttribute("data-block", "0");
+            paragraphElement.appendChild(trailingRange.extractContents());
+            pElement.insertAdjacentElement("afterend", paragraphElement);
+            range.setStart(paragraphElement, 0);
+            range.collapse(true);
+            setSelectionFocus(range);
+            execAfterRender(vditor);
+            event.preventDefault();
+            return true;
+        }
+
         if (event.key === "Backspace" && !isCtrl(event) && !event.shiftKey && !event.altKey &&
             getSelectPosition(blockquoteElement, vditor[vditor.currentMode].element, range).start === 0) {
             // Backspace: 光标位于引用中的第零个字符，仅删除引用标签
@@ -1068,9 +1132,15 @@ export const fixBlockquote = (vditor: IVditor, range: Range, event: KeyboardEven
             return true;
         }
 
-        if (insertAfterBlock(vditor, event, range, blockquoteElement, blockquoteElement)) {
+        const itemElement = blockquoteElement.parentElement.tagName === "LI" ? blockquoteElement.parentElement : null;
+        const afterBlockElement = !blockquoteElement.nextElementSibling && itemElement?.nextElementSibling?.tagName === "LI" ?
+            itemElement : blockquoteElement;
+        if (insertAfterBlock(vditor, event, range, blockquoteElement, afterBlockElement)) {
             return true;
         }
+        if (event.key === "ArrowUp" && itemElement && !blockquoteElement.previousElementSibling) {
+            return false;
+        }
         if (insertBeforeBlock(vditor, event, range, blockquoteElement, blockquoteElement)) {
             return true;
         }
@@ -1290,6 +1360,12 @@ export const paste = async (vditor: IVditor, event: (ClipboardEvent | DragEvent)
             return ["", Lute.WalkContinue];
         }
 
+        const parent = node.__internal_object__.Parent;
+        // 链接引用的目标地址由定义节点提供，不在引用位置重复渲染
+        if (parent.Type === 33 && parent.LinkType === 3) {
+            return ["", Lute.WalkContinue];
+        }
+
         if (vditor.options.upload.renderLinkDest) {
             return vditor.options.upload.renderLinkDest(vditor, node, entering);
         }

package/src/ts/util/processCode.ts

@@ -10,6 +10,7 @@ import {markmapRender} from "../markdown/markmapRender";
 import {mindmapRender} from "../markdown/mindmapRender";
 import {plantumlRender} from "../markdown/plantumlRender";
 import {SMILESRender} from "../markdown/SMILESRender";
+import {wavedromRender} from "../markdown/wavedromRender";
 
 export const processPasteCode = (html: string, text: string, type = "sv") => {
     const tempElement = document.createElement("div");
@@ -82,6 +83,8 @@ export const processCodeRender = (previewPanel: HTMLElement, vditor: IVditor) =>
         plantumlRender(previewPanel, vditor.options.cdn);
     } else if (language === "graphviz") {
         graphvizRender(previewPanel, vditor.options.cdn);
+    } else if (language === "wavedrom") {
+        wavedromRender(previewPanel, vditor.options.cdn);
     } else if (language === "math") {
         mathRender(previewPanel, {cdn: vditor.options.cdn, math: vditor.options.preview.math});
     } else {

package/src/ts/wysiwyg/afterRenderEvent.ts

@@ -1,4 +1,5 @@
 import {getMarkdown} from "../markdown/getMarkdown";
+import {renderImageCaptions} from "../markdown/imageCaptionRender";
 import {accessLocalStorage} from "../util/compatibility";
 
 export const afterRenderEvent = (vditor: IVditor, options = {
@@ -6,6 +7,7 @@ export const afterRenderEvent = (vditor: IVditor, options = {
     enableHint: false,
     enableInput: true,
 }) => {
+    renderImageCaptions(vditor.wysiwyg.element, "wysiwyg", vditor.options.preview.markdown.imageCaption);
     if (options.enableHint) {
         vditor.hint.render(vditor);
     }

package/src/ts/wysiwyg/highlightToolbarWYSIWYG.ts

@@ -33,6 +33,7 @@ import {afterRenderEvent} from "./afterRenderEvent";
 import {removeBlockElement} from "./processKeydown";
 import {renderToc} from "../util/toc";
 import {getMarkdown} from "../markdown/getMarkdown";
+import {renderImageCaptions} from "../markdown/imageCaptionRender";
 
 export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
     clearTimeout(vditor.wysiwyg.hlToolbarTimeoutId);
@@ -1079,6 +1080,7 @@ export const genImagePopover = (event: Event, vditor: IVditor) => {
         imgElement.setAttribute("src", inputElement.value);
         imgElement.setAttribute("alt", alt.value);
         imgElement.setAttribute("title", title.value);
+        renderImageCaptions(vditor.wysiwyg.element, "wysiwyg", vditor.options.preview.markdown.imageCaption);
         if (typeof vditor.options.input === "function") {
             vditor.options.input(getMarkdown(vditor));
         }
@@ -1150,5 +1152,7 @@ const focusToElement = (event: KeyboardEvent, range: Range) => {
 };
 
 const customWysiwygToolbar = (vditor: IVditor, type: TWYSISYGToolbar) => {
-    vditor.options.customWysiwygToolbar(type, vditor.wysiwyg.popover);
+    if (vditor.options.customWysiwygToolbar) {
+        vditor.options.customWysiwygToolbar(type, vditor.wysiwyg.popover);
+    }
 };

package/src/ts/wysiwyg/input.ts

@@ -71,6 +71,7 @@ export const input = (vditor: IVditor, range: Range, event?: InputEvent) => {
 
         const isWYSIWYGElement = blockElement.isEqualNode(vditor.wysiwyg.element);
         const footnoteElement = hasClosestByAttribute(blockElement, "data-type", "footnotes-block");
+        const calloutElement = hasClosestByAttribute(range.startContainer, "data-type", "callout");
 
         if (!isWYSIWYGElement) {
             // 列表需要到最顶层
@@ -90,6 +91,10 @@ export const input = (vditor: IVditor, range: Range, event?: InputEvent) => {
                 blockElement = footnoteElement;
             }
 
+            if (calloutElement) {
+                blockElement = calloutElement;
+            }
+
             html = blockElement.outerHTML;
 
             if (blockElement.tagName === "UL" || blockElement.tagName === "OL") {

package/src/ts/wysiwyg/setHeading.ts

@@ -1,7 +1,94 @@
-import {hasClosestBlock} from "../util/hasClosest";
+import {hasClosestBlock, hasClosestByMatchTag} from "../util/hasClosest";
 import {getEditorRange, setRangeByWbr} from "../util/selection";
 import {renderToc} from "../util/toc";
 
+const createBlockElement = (element: HTMLElement, tagName: string) => {
+    const blockElement = element.ownerDocument.createElement(tagName);
+    blockElement.setAttribute("data-block", "0");
+    return blockElement;
+};
+
+const replaceBlockElement = (element: HTMLElement, tagName: string) => {
+    const blockElement = createBlockElement(element, tagName);
+    while (element.firstChild) {
+        blockElement.appendChild(element.firstChild);
+    }
+    element.replaceWith(blockElement);
+    return blockElement;
+};
+
+const isListItemBlock = (node: Node) => {
+    if (node.nodeType !== 1) {
+        return false;
+    }
+    const element = node as HTMLElement;
+    return element.getAttribute("data-block") === "0" || element.tagName === "INPUT";
+};
+
+const getListItemInlineNodes = (itemElement: HTMLElement, wbrElement: HTMLElement) => {
+    let anchorNode: Node = wbrElement;
+    while (anchorNode.parentNode && !anchorNode.parentNode.isSameNode(itemElement)) {
+        anchorNode = anchorNode.parentNode;
+    }
+    if (!anchorNode.parentNode?.isSameNode(itemElement)) {
+        return [];
+    }
+
+    let firstNode = anchorNode;
+    let lastNode = anchorNode;
+    while (firstNode.previousSibling && !isListItemBlock(firstNode.previousSibling)) {
+        firstNode = firstNode.previousSibling;
+    }
+    while (lastNode.nextSibling && !isListItemBlock(lastNode.nextSibling)) {
+        lastNode = lastNode.nextSibling;
+    }
+
+    // 任务列表的复选框和正文之间需要保留分隔空格。
+    if (firstNode.previousSibling instanceof HTMLInputElement && firstNode.nodeType === 3) {
+        const leadingWhitespace = firstNode.textContent.match(/^\s+/)?.[0];
+        if (leadingWhitespace) {
+            firstNode.textContent = firstNode.textContent.substring(leadingWhitespace.length);
+            itemElement.insertBefore(itemElement.ownerDocument.createTextNode(leadingWhitespace), firstNode);
+        }
+    }
+
+    const nodes: Node[] = [];
+    let node: Node = firstNode;
+    while (node) {
+        nodes.push(node);
+        if (node.isSameNode(lastNode)) {
+            break;
+        }
+        node = node.nextSibling;
+    }
+    return nodes;
+};
+
+const setListItemHeading = (itemElement: HTMLElement, wbrElement: HTMLElement, tagName: string) => {
+    const inlineNodes = getListItemInlineNodes(itemElement, wbrElement);
+    if (inlineNodes.length === 0) {
+        return false;
+    }
+
+    const headingElement = createBlockElement(itemElement, tagName);
+    itemElement.insertBefore(headingElement, inlineNodes[0]);
+    inlineNodes.forEach((node) => {
+        headingElement.appendChild(node);
+    });
+    if (headingElement.innerHTML.trim() === "<wbr>") {
+        headingElement.appendChild(itemElement.ownerDocument.createElement("br"));
+    }
+    return true;
+};
+
+const unwrapBlockElement = (element: HTMLElement) => {
+    const fragment = element.ownerDocument.createDocumentFragment();
+    while (element.firstChild) {
+        fragment.appendChild(element.firstChild);
+    }
+    element.replaceWith(fragment);
+};
+
 export const setHeading = (vditor: IVditor, tagName: string) => {
     const range = getEditorRange(vditor);
     let blockElement = hasClosestBlock(range.startContainer);
@@ -12,16 +99,27 @@ export const setHeading = (vditor: IVditor, tagName: string) => {
         blockElement = vditor.wysiwyg.element;
     }
     if (blockElement && !blockElement.classList.contains("vditor-wysiwyg__block")) {
-        range.insertNode(document.createElement("wbr"));
+        const wbrElement = document.createElement("wbr");
+        range.insertNode(wbrElement);
         // Firefox 需要 trim https://github.com/Vanessa219/vditor/issues/207
         if (blockElement.innerHTML.trim() === "<wbr>") {
             // Firefox 光标对不齐 https://github.com/Vanessa219/vditor/issues/199 1
             blockElement.innerHTML = "<wbr><br>";
         }
-        if (blockElement.tagName === "BLOCKQUOTE" || blockElement.classList.contains("vditor-reset")) {
-            blockElement.innerHTML = `<${tagName} data-block="0">${blockElement.innerHTML.trim()}</${tagName}>`;
+        const itemElement = hasClosestByMatchTag(wbrElement, "LI");
+        if (itemElement && blockElement.isSameNode(itemElement.parentElement)) {
+            if (!setListItemHeading(itemElement, wbrElement, tagName)) {
+                wbrElement.remove();
+                return;
+            }
+        } else if (blockElement.tagName === "BLOCKQUOTE" || blockElement.classList.contains("vditor-reset")) {
+            const headingElement = createBlockElement(blockElement, tagName);
+            while (blockElement.firstChild) {
+                headingElement.appendChild(blockElement.firstChild);
+            }
+            blockElement.appendChild(headingElement);
         } else {
-            blockElement.outerHTML = `<${tagName} data-block="0">${blockElement.innerHTML.trim()}</${tagName}>`;
+            replaceBlockElement(blockElement, tagName);
         }
         setRangeByWbr(vditor.wysiwyg.element, range);
         renderToc(vditor);
@@ -36,8 +134,14 @@ export const removeHeading = (vditor: IVditor) => {
     }
     if (blockElement) {
         range.insertNode(document.createElement("wbr"));
-        blockElement.outerHTML = `<p data-block="0">${blockElement.innerHTML}</p>`;
+        if (blockElement.parentElement?.tagName === "LI" &&
+            blockElement.parentElement.parentElement?.getAttribute("data-tight") === "true") {
+            unwrapBlockElement(blockElement);
+        } else {
+            replaceBlockElement(blockElement, "p");
+        }
         setRangeByWbr(vditor.wysiwyg.element, range);
+        renderToc(vditor);
     }
     vditor.wysiwyg.popover.style.display = "none";
 };