From 89f4c33d88d32f9085fd7f80c52177c5bd29ab5e Mon Sep 17 00:00:00 2001 From: Vanessa Date: Mon, 26 Sep 2022 00:58:40 +0800 Subject: [PATCH] :bug: fix https://github.com/siyuan-note/siyuan/issues/5953 --- app/src/protyle/hint/index.ts | 24 +++++++++++++----------- app/src/protyle/toolbar/Font.ts | 22 ++++++++++++++++++++++ app/src/protyle/toolbar/index.ts | 12 ++++++++++-- 3 files changed, 45 insertions(+), 13 deletions(-) diff --git a/app/src/protyle/hint/index.ts b/app/src/protyle/hint/index.ts index 8e6332438..d6780be60 100644 --- a/app/src/protyle/hint/index.ts +++ b/app/src/protyle/hint/index.ts @@ -422,11 +422,17 @@ ${unicode2Emoji(emoji.unicode, true)}`; path: pathPosix().join(pathString, realFileName), markdown: "" }, response => { + let tempElement = document.createElement("div"); let blockRefHTML = `${escapeHtml(realFileName)}`; if (fileNames.length === 2) { blockRefHTML = `${escapeHtml(fileNames[0])}`; } - insertHTML(genEmptyBlock(false, false, blockRefHTML), protyle); + tempElement.innerHTML = blockRefHTML; + tempElement = tempElement.firstElementChild as HTMLDivElement; + protyle.toolbar.setInlineMark(protyle, "block-ref", "range", { + type: "id", + color: `${tempElement.getAttribute("data-id")}${Constants.ZWSP}${tempElement.getAttribute("data-subtype")}${Constants.ZWSP}${tempElement.textContent}` + }); }); }); return; @@ -440,17 +446,13 @@ ${unicode2Emoji(emoji.unicode, true)}`; } return; } - range.insertNode(document.createElement("wbr")); - html = nodeElement.outerHTML; - range.deleteContents(); let tempElement = document.createElement("div"); tempElement.innerHTML = value.replace(//g, "").replace(/<\/mark>/g, ""); - tempElement = tempElement.firstChild as HTMLDivElement; - range.insertNode(tempElement); - range.setStartAfter(tempElement); - range.collapse(true); - updateTransaction(protyle, id, nodeElement.outerHTML, html); - focusByWbr(nodeElement, range); + tempElement = tempElement.firstElementChild as HTMLDivElement; + protyle.toolbar.setInlineMark(protyle, "block-ref", "range", { + type: "id", + color: `${tempElement.getAttribute("data-id")}${Constants.ZWSP}${tempElement.getAttribute("data-subtype")}${Constants.ZWSP}${tempElement.textContent}` + }); return; } else if (this.splitChar === ":") { addEmoji(value); @@ -533,7 +535,7 @@ ${unicode2Emoji(emoji.unicode, true)}`; focusByRange(range); protyle.toolbar.range = range; if (["a", "block-ref", "inline-math", "inline-memo", "text"].includes(value)) { - protyle.toolbar.element.querySelector(`[data-type="${value}"]`).dispatchEvent(new CustomEvent("block-ref" === value? getEventName() : "click")); + protyle.toolbar.element.querySelector(`[data-type="${value}"]`).dispatchEvent(new CustomEvent("block-ref" === value ? getEventName() : "click")); return; } protyle.toolbar.setInlineMark(protyle, value, "range"); diff --git a/app/src/protyle/toolbar/Font.ts b/app/src/protyle/toolbar/Font.ts index 8ea3c97fe..4f975893e 100644 --- a/app/src/protyle/toolbar/Font.ts +++ b/app/src/protyle/toolbar/Font.ts @@ -151,6 +151,13 @@ export const fontEvent = (protyle: IProtyle, type?: string, color?: string) => { }; export const setFontStyle = (textElement: HTMLElement, textOption: ITextOption) => { + const setBlockRef = (blockRefOption: string) => { + const blockRefData = blockRefOption.split(Constants.ZWSP); + textElement.setAttribute("data-id", blockRefData[0]); + textElement.setAttribute("data-subtype", blockRefData[1]); + textElement.innerText = blockRefData[2]; + } + if (textOption) { switch (textOption.type) { case "color": @@ -169,6 +176,9 @@ export const setFontStyle = (textElement: HTMLElement, textOption: ITextOption) case "style4": textElement.style.textShadow = "1px 1px var(--b3-border-color), 2px 2px var(--b3-border-color), 3px 3px var(--b3-border-color), 4px 4px var(--b3-border-color)"; break; + case "id": + setBlockRef(textOption.color) + break; } } }; @@ -177,6 +187,18 @@ export const hasSameTextStyle = (currentElement: HTMLElement, sideElement: HTMLE if (!textObj) { return true; } + if (textObj.type === "id") { + if (currentElement.nodeType !== 3) { + return currentElement.getAttribute("data-id") === sideElement.getAttribute("data-id") && + currentElement.getAttribute("data-subtype") === sideElement.getAttribute("data-subtype") && + currentElement.textContent === sideElement.textContent; + } + const blockRefData = textObj.color.split(Constants.ZWSP) + return blockRefData[0] === sideElement.getAttribute("data-id") && + blockRefData[1] === sideElement.getAttribute("data-subtype") && + blockRefData[2] === sideElement.textContent; + } + let color = ""; let webkitTextFillColor = ""; let webkitTextStroke = ""; diff --git a/app/src/protyle/toolbar/index.ts b/app/src/protyle/toolbar/index.ts index dbd549e5c..81a9fa77d 100644 --- a/app/src/protyle/toolbar/index.ts +++ b/app/src/protyle/toolbar/index.ts @@ -409,7 +409,7 @@ export class Toolbar { if (item === "sup") { types.splice(index, 1); if (!this.element.classList.contains("fn__none")) { - this.element.querySelector("[data-type=\"sup\"]").classList.remove("protyle-toolbar__item--current"); + this.element.querySelector('[data-type="sup"]').classList.remove("protyle-toolbar__item--current"); } return true; } @@ -419,11 +419,19 @@ export class Toolbar { if (item === "sub") { types.splice(index, 1); if (!this.element.classList.contains("fn__none")) { - this.element.querySelector("[data-type=\"sub\"]").classList.remove("protyle-toolbar__item--current"); + this.element.querySelector('[data-type="sub"]').classList.remove("protyle-toolbar__item--current"); } return true; } }); + } else if (type === "block-ref" && types.includes("virtual-block-ref")) { + // 虚拟引用和引用不能同时存在 + types.find((item, index) => { + if (item === "virtual-block-ref") { + types.splice(index, 1); + return true; + } + }); } types = [...new Set(types)]; if (index === 0 && previousElement && previousElement.nodeType !== 3 &&