From 960626b42d225b6da089e88c5e03acc4b49f1cff Mon Sep 17 00:00:00 2001 From: Vanessa Date: Wed, 14 Sep 2022 19:08:24 +0800 Subject: [PATCH] :sparkles: https://github.com/siyuan-note/siyuan/issues/2911 --- app/src/protyle/toolbar/Font.ts | 74 +++++++++----------------------- app/src/protyle/toolbar/index.ts | 17 ++++++-- app/src/types/index.d.ts | 5 +++ 3 files changed, 39 insertions(+), 57 deletions(-) diff --git a/app/src/protyle/toolbar/Font.ts b/app/src/protyle/toolbar/Font.ts index bdeca11d2..05179f427 100644 --- a/app/src/protyle/toolbar/Font.ts +++ b/app/src/protyle/toolbar/Font.ts @@ -120,57 +120,25 @@ export const fontEvent = (protyle: IProtyle, type?: string, color?: string) => { color = fontStyles[1]; } } - protyle.toolbar.setInlineMark(protyle, "text", "add", {type, color}); - const range = protyle.toolbar.range; - const textElement = hasClosestByMatchTag(range.startContainer, "SPAN"); - if (!textElement) { - return; - } - const nodeElement = hasClosestBlock(textElement); - if (!nodeElement) { - return; - } - textElement.insertAdjacentHTML("beforeend", ""); - const html = nodeElement.outerHTML; - - - if (type === "remove") { - 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) { - wbrElement.remove(); - } - range.setStart(textNode, 0); - range.setEnd(textNode, textNode.textContent.length); - focusByRange(range); - return; - } - - switch (type) { - case "color": - textElement.style.color = color; - break; - case "backgroundColor": - textElement.style.backgroundColor = color; - break; - case "style2": - textElement.style.webkitTextStroke = "0.2px var(--b3-theme-on-background)"; - textElement.style.webkitTextFillColor = "transparent"; - break; - 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; - } - updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, html); - const wbrElement = nodeElement.querySelector("wbr"); - if (wbrElement) { - wbrElement.remove(); - } + protyle.toolbar.setInlineMark(protyle, "text", "range", {type, color}); }; + +export const setFontStyle = (textElement:HTMLElement, textOption:ITextOption) => { + if (textOption) { + switch (textOption.type) { + case "color": + textElement.style.color = textOption.color; + break; + case "backgroundColor": + textElement.style.backgroundColor = textOption.color; + break; + case "style2": + textElement.style.webkitTextStroke = "0.2px var(--b3-theme-on-background)"; + textElement.style.webkitTextFillColor = "transparent"; + break; + 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; + } + } +} diff --git a/app/src/protyle/toolbar/index.ts b/app/src/protyle/toolbar/index.ts index 8cfda8244..412428c22 100644 --- a/app/src/protyle/toolbar/index.ts +++ b/app/src/protyle/toolbar/index.ts @@ -1,5 +1,5 @@ import {Divider} from "./Divider"; -import {Font} from "./Font"; +import {Font, setFontStyle} from "./Font"; import {ToolbarItem} from "./ToolbarItem"; import { focusByRange, @@ -231,7 +231,7 @@ export class Toolbar { }); } - private hasSameStyle(currentElement: HTMLElement, sideElement: HTMLElement, textObj?: { color?: string, type?: string }) { + private hasSameStyle(currentElement: HTMLElement, sideElement: HTMLElement, textObj: ITextOption) { if (!textObj) { return true; } @@ -277,7 +277,7 @@ export class Toolbar { } } - public setInlineMark(protyle: IProtyle, type: string, action: "remove" | "add" | "range" | "toolbar", textObj?: { color?: string, type?: string }) { + public setInlineMark(protyle: IProtyle, type: string, action: "remove" | "add" | "range" | "toolbar", textObj?: ITextOption) { const nodeElement = hasClosestBlock(this.range.startContainer); if (!nodeElement) { return; @@ -334,7 +334,7 @@ export class Toolbar { const actionBtn = action === "toolbar" ? this.element.querySelector(`[data-type="${type}"]`) : undefined; const newNodes: Node[] = []; if (action === "remove" || actionBtn?.classList.contains("protyle-toolbar__item--current") || - (action === "range" && rangeTypes.length > 0 && rangeTypes.includes(type))) { + (action === "range" && rangeTypes.length > 0 && rangeTypes.includes(type) && (!textObj || textObj.type === "remove"))) { // 移除 if (actionBtn) { actionBtn.classList.remove("protyle-toolbar__item--current"); @@ -351,6 +351,13 @@ export class Toolbar { if (types.length === 0) { newNodes.push(document.createTextNode(item.textContent)); } else { + if (textObj && textObj.type === "remove") { + item.style.color = ""; + item.style.webkitTextFillColor = ""; + item.style.webkitTextStroke = ""; + item.style.textShadow = ""; + item.style.backgroundColor = ""; + } if (index === 0 && previousElement && previousElement.nodeType !== 3 && isArrayEqual(types, previousElement.getAttribute("data-type").split(" ")) && this.hasSameStyle(item, previousElement, textObj)) { @@ -391,6 +398,7 @@ export class Toolbar { const inlineElement = document.createElement("span"); inlineElement.setAttribute("data-type", type); inlineElement.textContent = item.textContent; + setFontStyle(inlineElement, textObj); newNodes.push(inlineElement); } } else { @@ -409,6 +417,7 @@ export class Toolbar { nextElement.innerHTML = item.innerHTML + nextElement.innerHTML; } else { item.setAttribute("data-type", types.join(" ")); + setFontStyle(item, textObj); newNodes.push(item); } } diff --git a/app/src/types/index.d.ts b/app/src/types/index.d.ts index 537004c98..3e5cd58c0 100644 --- a/app/src/types/index.d.ts +++ b/app/src/types/index.d.ts @@ -30,6 +30,11 @@ interface Window { goBack(): void } +interface ITextOption { + color: string, + type: string +} + interface IInbox { oId: string shorthandContent: string