import {hasClosestBlock, hasClosestByAttribute, hasClosestByClassName} from "./hasClosest"; import * as dayjs from "dayjs"; import {removeEmbed} from "../wysiwyg/removeEmbed"; import {transaction, updateTransaction} from "../wysiwyg/transaction"; import {getContenteditableElement} from "../wysiwyg/getBlock"; import {focusBlock, getEditorRange, focusByWbr, fixTableRange} from "./selection"; import {mathRender} from "../markdown/mathRender"; import {Constants} from "../../constants"; import {highlightRender} from "../markdown/highlightRender"; import {scrollCenter} from "../../util/highlightById"; export const insertHTML = (html: string, protyle: IProtyle, isBlock = false) => { if (html === "") { return; } const range = getEditorRange(protyle.wysiwyg.element); fixTableRange(range); if (hasClosestByAttribute(range.startContainer, "data-type", "NodeTable") && !isBlock) { html = protyle.lute.BlockDOM2InlineBlockDOM(html); } let blockElement = hasClosestBlock(range.startContainer) as Element; if (!blockElement) { // 使用鼠标点击选则模版提示列表后 range 丢失 if (protyle.toolbar.range) { blockElement = hasClosestBlock(protyle.toolbar.range.startContainer) as Element; } else { blockElement = protyle.wysiwyg.element.firstElementChild as Element; } } if (!blockElement) { return; } let id = blockElement.getAttribute("data-node-id"); range.insertNode(document.createElement("wbr")); let oldHTML = blockElement.outerHTML; if (!isBlock && blockElement.getAttribute("data-type") === "NodeCodeBlock") { range.deleteContents(); range.insertNode(document.createTextNode(html.replace(/\r\n|\r|\u2028|\u2029/g, "\n"))); range.collapse(false); range.insertNode(document.createElement("wbr")); getContenteditableElement(blockElement).removeAttribute("data-render"); highlightRender(blockElement); blockElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss")); updateTransaction(protyle, id, blockElement.outerHTML, oldHTML); setTimeout(() => { scrollCenter(protyle, blockElement); }, Constants.TIMEOUT_BLOCKLOAD); return; } const undoOperation: IOperation[] = []; const doOperation: IOperation[] = []; if (range.toString() !== "") { const inlineMathElement = hasClosestByAttribute(range.commonAncestorContainer, "data-type", "inline-math"); if (inlineMathElement) { // 表格内选中数学公式 https://ld246.com/article/1631708573504 inlineMathElement.remove(); } else if (range.startContainer.nodeType === 3 && range.startContainer.parentElement.getAttribute("data-type")?.indexOf("block-ref") > -1) { // ref 选中处理 https://ld246.com/article/1629214377537 range.startContainer.parentElement.remove(); // 选中 ref**bbb** 后 alt+[ range.deleteContents(); } else { range.deleteContents(); } range.insertNode(document.createElement("wbr")); undoOperation.push({ action: "update", id, data: oldHTML }); doOperation.push({ action: "update", id, data: blockElement.outerHTML }); } const tempElement = document.createElement("template"); tempElement.innerHTML = html; const editableElement = getContenteditableElement(blockElement); let render = false; // 使用 lute 方法会添加 p 元素,只有一个 p 元素或者只有一个字符串或者为 b 时的时候只拷贝内部 if (!isBlock) { if (tempElement.content.firstChild.nodeType === 3 || (tempElement.content.firstChild.nodeType !== 3 && ((tempElement.content.firstElementChild.classList.contains("p") && tempElement.content.childElementCount === 1) || tempElement.content.firstElementChild.tagName !== "DIV"))) { if (tempElement.content.firstChild.nodeType !== 3 && tempElement.content.firstElementChild.classList.contains("p")) { tempElement.innerHTML = tempElement.content.firstElementChild.firstElementChild.innerHTML.trim(); } // 粘贴带样式的行内元素到另一个行内元素中需进行切割 const spanElement = range.startContainer.nodeType === 3 ? range.startContainer.parentElement : range.startContainer as HTMLElement; if (spanElement.tagName === "SPAN" && spanElement.isSameNode(range.endContainer.nodeType === 3 ? range.endContainer.parentElement : range.endContainer) && tempElement.content.querySelector("span") // 粘贴纯文本不需切割 https://ld246.com/article/1665556907936 ) { const afterElement = document.createElement("span"); const attributes = spanElement.attributes; for (let i = 0; i < attributes.length; i++) { afterElement.setAttribute(attributes[i].name, attributes[i].value); } range.setEnd(spanElement.lastChild, spanElement.lastChild.textContent.length); afterElement.append(range.extractContents()); spanElement.after(afterElement); range.setStartBefore(afterElement); range.collapse(true); } range.insertNode(tempElement.content.cloneNode(true)); range.collapse(false); blockElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss")); // 使用 innerHTML,避免行内元素为代码块 const trimStartText = editableElement ? editableElement.innerHTML.trimStart() : ""; if (editableElement && (trimStartText.startsWith("```") || trimStartText.startsWith("~~~") || trimStartText.startsWith("···") || trimStartText.indexOf("\n```") > -1 || trimStartText.indexOf("\n~~~") > -1 || trimStartText.indexOf("\n···") > -1)) { if (trimStartText.indexOf("\n") === -1 && trimStartText.replace(/·|~/g, "`").replace(/^`{3,}/g, "").indexOf("`") > -1) { // ```test` 不处理 } else { let replaceInnerHTML = editableElement.innerHTML.replace(/^(~|·|`){3,}/g, "```").replace(/\n(~|·|`){3,}/g, "\n```").trim(); if (!replaceInnerHTML.endsWith("\n```")) { replaceInnerHTML += "\n```"; } const languageIndex = replaceInnerHTML.indexOf("```") + 3; replaceInnerHTML = replaceInnerHTML.substring(0, languageIndex) + (localStorage["local-codelang"] || "") + replaceInnerHTML.substring(languageIndex); editableElement.innerHTML = replaceInnerHTML; } } const spinHTML = protyle.lute.SpinBlockDOM(removeEmbed(blockElement)); const scrollLeft = blockElement.firstElementChild.scrollLeft; const blockPreviousElement = blockElement.previousElementSibling; blockElement.outerHTML = spinHTML; render = true; // spin 后变成多个块需后续处理 https://github.com/siyuan-note/insider/issues/451 tempElement.innerHTML = spinHTML; if (protyle.options.backlinkData) { // 反链面板 blockElement = blockPreviousElement.nextElementSibling; } else { Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-node-id="${id}"]`)).find((item) => { if (!hasClosestByAttribute(item, "data-type", "NodeBlockQueryEmbed")) { blockElement = item; return true; } }); } if (tempElement.content.childElementCount === 1) { if (blockElement.classList.contains("table") && scrollLeft > 0) { blockElement.firstElementChild.scrollLeft = scrollLeft; } mathRender(blockElement); updateTransaction(protyle, id, blockElement.outerHTML, oldHTML); focusByWbr(protyle.wysiwyg.element, range); return; } } } const cursorLiElement = hasClosestByClassName(blockElement, "li"); // 列表项不能单独进行粘贴 https://ld246.com/article/1628681120576/comment/1628681209731#comments if (tempElement.content.children[0]?.getAttribute("data-type") === "NodeListItem") { if (cursorLiElement) { blockElement = cursorLiElement; id = blockElement.getAttribute("data-node-id"); oldHTML = blockElement.outerHTML; } else { const liItemElement = tempElement.content.children[0]; const subType = liItemElement.getAttribute("data-subtype"); tempElement.innerHTML = `${html}
${Constants.ZWSP}
`; } } let lastElement: Element; Array.from(tempElement.content.children).reverse().forEach((item) => { let addId = item.getAttribute("data-node-id"); if (addId === id) { doOperation.push({ action: "update", data: item.outerHTML, id: addId, }); undoOperation.push({ action: "update", id: addId, data: oldHTML, }); } else { if (item.classList.contains("li") && !blockElement.parentElement.classList.contains("list")) { // https://github.com/siyuan-note/siyuan/issues/6534 addId = Lute.NewNodeID(); const liElement = document.createElement("div"); liElement.setAttribute("data-subtype", item.getAttribute("data-subtype")); liElement.setAttribute("data-node-id", addId); liElement.setAttribute("data-type", "NodeList"); liElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss")); liElement.classList.add("list"); liElement.append(item); item = liElement; } doOperation.push({ action: "insert", data: item.outerHTML, id: addId, previousID: id }); undoOperation.push({ action: "delete", id: addId, }); } if (!render) { blockElement.after(item); } if (!lastElement) { lastElement = item; } }); if (editableElement && editableElement.textContent === "") { // 选中当前块所有内容粘贴再撤销会导致异常 https://ld246.com/article/1662542137636 doOperation.find((item, index) => { if (item.id === id) { doOperation.splice(index, 1); return true; } }); doOperation.push({ action: "delete", id }); // 选中当前块所有内容粘贴再撤销会导致异常 https://ld246.com/article/1662542137636 undoOperation.find((item, index) => { if (item.id === id && item.action === "update") { undoOperation.splice(index, 1); return true; } }); undoOperation.push({ action: "insert", data: oldHTML, id, previousID: blockElement.previousElementSibling ? blockElement.previousElementSibling.getAttribute("data-node-id") : "", parentID: blockElement.parentElement.getAttribute("data-node-id") || protyle.block.parentID }); blockElement.remove(); } if (lastElement) { // https://github.com/siyuan-note/siyuan/issues/5591 focusBlock(lastElement, undefined, false); } const wbrElement = protyle.wysiwyg.element.querySelector("wbr"); if (wbrElement) { wbrElement.remove(); } transaction(protyle, doOperation, undoOperation); };