diff --git a/app/src/protyle/toolbar/Font.ts b/app/src/protyle/toolbar/Font.ts index bb02c0a50..2568139ad 100644 --- a/app/src/protyle/toolbar/Font.ts +++ b/app/src/protyle/toolbar/Font.ts @@ -120,26 +120,28 @@ export const fontEvent = (protyle: IProtyle, type?: string, color?: string) => { color = fontStyles[1]; } } - protyle.toolbar.setInlineMark(protyle, "text", "add", true); + protyle.toolbar.setInlineMark(protyle, "text", "add", {type, color}); const range = protyle.toolbar.range; - const fontElement = hasClosestByMatchTag(range.startContainer, "STRONG"); - if (!fontElement) { + const textElement = hasClosestByMatchTag(range.startContainer, "SPAN"); + if (!textElement) { return; } - const nodeElement = hasClosestBlock(fontElement); + const nodeElement = hasClosestBlock(textElement); if (!nodeElement) { return; } - fontElement.insertAdjacentHTML("beforeend", ""); + textElement.insertAdjacentHTML("beforeend", ""); const html = nodeElement.outerHTML; + + if (type === "remove") { - fontElement.style.color = ""; - fontElement.style.webkitTextFillColor = ""; - fontElement.style.webkitTextStroke = ""; - fontElement.style.textShadow = ""; - fontElement.style.backgroundColor = ""; - const textNode = document.createTextNode(fontElement.textContent); - fontElement.parentElement.replaceChild(textNode, fontElement); + textElement.style.color = ""; + textElement.style.webkitTextFillColor = ""; + textElement.style.webkitTextStroke = ""; + textElement.style.textShadow = ""; + textElement.style.backgroundColor = ""; + const textNode = document.createTextNode(textElement.textContent); + textElement.parentElement.replaceChild(textNode, textElement); updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, html); const wbrElement = nodeElement.querySelector("wbr"); if (wbrElement) { @@ -153,20 +155,20 @@ export const fontEvent = (protyle: IProtyle, type?: string, color?: string) => { switch (type) { case "color": - fontElement.style.color = color; + textElement.style.color = color; break; case "backgroundColor": - fontElement.style.backgroundColor = color; + textElement.style.backgroundColor = color; break; case "style2": - fontElement.style.webkitTextStroke = "0.2px var(--b3-theme-on-background)"; - fontElement.style.webkitTextFillColor = "transparent"; + textElement.style.webkitTextStroke = "0.2px var(--b3-theme-on-background)"; + textElement.style.webkitTextFillColor = "transparent"; break; case "style4": - fontElement.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)"; + 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; } - fontElement.setAttribute("style", fontElement.getAttribute("style").replace(" background-clip", " -webkit-background-clip")); + textElement.setAttribute("style", textElement.getAttribute("style").replace(" background-clip", " -webkit-background-clip")); updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, html); const wbrElement = nodeElement.querySelector("wbr"); if (wbrElement) { diff --git a/app/src/protyle/toolbar/ToolbarItem.ts b/app/src/protyle/toolbar/ToolbarItem.ts index de9bc3a68..787e219f7 100644 --- a/app/src/protyle/toolbar/ToolbarItem.ts +++ b/app/src/protyle/toolbar/ToolbarItem.ts @@ -12,7 +12,7 @@ export class ToolbarItem { this.element.setAttribute("data-type", menuItem.name); this.element.setAttribute("aria-label", tip + hotkey); this.element.innerHTML = ``; - if (menuItem.name === "font" || menuItem.name === "blockRef" || menuItem.name === "link") { + if (menuItem.name === "text" || menuItem.name === "block-ref" || menuItem.name === "a") { return; } this.element.addEventListener(getEventName(), (event) => { diff --git a/app/src/protyle/toolbar/index.ts b/app/src/protyle/toolbar/index.ts index db67c297b..83fb7f28e 100644 --- a/app/src/protyle/toolbar/index.ts +++ b/app/src/protyle/toolbar/index.ts @@ -231,7 +231,7 @@ export class Toolbar { }); } - public setInlineMark(protyle: IProtyle, type: string, action: "remove" | "add" | "range" | "toolbar", focusAdd = false) { + public setInlineMark(protyle: IProtyle, type: string, action: "remove" | "add" | "range" | "toolbar", textObj?: {color?: string, type?:string}) { const nodeElement = hasClosestBlock(this.range.startContainer); if (!nodeElement) { return; @@ -292,11 +292,7 @@ export class Toolbar { if (actionBtn) { actionBtn.classList.remove("protyle-toolbar__item--current"); } - let removeIndex = 0 contents.childNodes.forEach((item: HTMLElement, index) => { - if (item.tagName === "WBR") { - return; - } if (item.nodeType !== 3) { const types = item.getAttribute("data-type").split(" "); types.find((itemType, index) => { @@ -305,11 +301,10 @@ export class Toolbar { return true } }) - if (types.length === 0) { newNodes.push(document.createTextNode(item.textContent)); } else { - if (removeIndex === 0 && previousElement && previousElement.nodeType !== 3 && isArrayEqual(types, previousElement.getAttribute("data-type").split(" "))) { + if (index === 0 && previousElement && previousElement.nodeType !== 3 && isArrayEqual(types, previousElement.getAttribute("data-type").split(" "))) { previousIndex = previousElement.textContent.length; previousElement.innerHTML = previousElement.innerHTML + item.innerHTML; } else if (index === contents.childNodes.length - 1 && nextElement && nextElement.nodeType !== 3 && isArrayEqual(types, nextElement.getAttribute("data-type").split(" "))) { @@ -323,16 +318,14 @@ export class Toolbar { } else { newNodes.push(item); } - removeIndex++ }); } else { - if (!this.element.classList.contains("fn__none")) { + if (!this.element.classList.contains("fn__none") && type !== "text") { this.element.querySelector(`[data-type="${type}"]`).classList.add("protyle-toolbar__item--current"); } - let addIndex = 0 contents.childNodes.forEach((item: HTMLElement, index) => { if (item.nodeType === 3) { - if (addIndex === 0 && previousElement && previousElement.nodeType !== 3 && type === previousElement.getAttribute("data-type")) { + if (index === 0 && previousElement && previousElement.nodeType !== 3 && type === previousElement.getAttribute("data-type")) { previousIndex = previousElement.textContent.length; previousElement.innerHTML = previousElement.innerHTML + item.textContent; } else if (index === contents.childNodes.length - 1 && nextElement && nextElement.nodeType !== 3 && type === nextElement.getAttribute("data-type")) { @@ -344,12 +337,11 @@ export class Toolbar { inlineElement.textContent = item.textContent; newNodes.push(inlineElement); } - addIndex++; } else { let types = (item.getAttribute("data-type") || "").split(" "); types.push(type); types = [...new Set(types)] - if (addIndex === 0 && previousElement && previousElement.nodeType !== 3 && isArrayEqual(types, previousElement.getAttribute("data-type").split(" "))) { + if (index === 0 && previousElement && previousElement.nodeType !== 3 && isArrayEqual(types, previousElement.getAttribute("data-type").split(" "))) { previousIndex = previousElement.textContent.length; previousElement.innerHTML = previousElement.innerHTML + item.innerHTML; } else if (index === contents.childNodes.length - 1 && nextElement && nextElement.nodeType !== 3 && isArrayEqual(types, nextElement.getAttribute("data-type").split(" "))) { @@ -359,7 +351,6 @@ export class Toolbar { item.setAttribute("data-type", types.join(" ")); newNodes.push(item); } - addIndex++; } }); } @@ -411,10 +402,10 @@ export class Toolbar { return; } // 对已有字体样式的文字再次添加字体样式 - if (focusAdd && action === "add" && types.includes("text") && this.range.startContainer.nodeType === 3 && - this.range.startContainer.parentNode.isSameNode(this.range.endContainer.parentNode)) { - return; - } + // if (focusAdd && action === "add" && types.includes("text") && this.range.startContainer.nodeType === 3 && + // this.range.startContainer.parentNode.isSameNode(this.range.endContainer.parentNode)) { + // return; + // } let startElement = this.range.startContainer as Element; if (this.range.startContainer.nodeType === 3) { startElement = this.range.startContainer.parentElement;