diff --git a/app/appearance/icons/ant/icon.js b/app/appearance/icons/ant/icon.js index 206bc99dc..f51328db6 100644 --- a/app/appearance/icons/ant/icon.js +++ b/app/appearance/icons/ant/icon.js @@ -1,5 +1,8 @@ document.body.insertAdjacentHTML('afterBegin', ` + + + diff --git a/app/appearance/icons/ant/icon.json b/app/appearance/icons/ant/icon.json index 67b41ed9b..7309d639b 100644 --- a/app/appearance/icons/ant/icon.json +++ b/app/appearance/icons/ant/icon.json @@ -2,5 +2,5 @@ "name": "ant", "author": "Vanessa", "url": "https://github.com/Vanessa219", - "version": "1.0.6" + "version": "1.0.7" } diff --git a/app/appearance/icons/index.html b/app/appearance/icons/index.html index e1a3a5c85..2b34525fa 100644 --- a/app/appearance/icons/index.html +++ b/app/appearance/icons/index.html @@ -34,6 +34,12 @@ iconTransform +
+ + + + iconClear +
diff --git a/app/appearance/icons/material/icon.js b/app/appearance/icons/material/icon.js index 7cac7fae4..bba11b308 100644 --- a/app/appearance/icons/material/icon.js +++ b/app/appearance/icons/material/icon.js @@ -1,5 +1,7 @@ -document.body.insertAdjacentHTML('afterbegin', ` - +document.body.insertAdjacentHTML('afterbegin', ` + + + diff --git a/app/appearance/icons/material/icon.json b/app/appearance/icons/material/icon.json index 28c32ea3b..1d3a810c8 100644 --- a/app/appearance/icons/material/icon.json +++ b/app/appearance/icons/material/icon.json @@ -2,5 +2,5 @@ "name": "material", "author": "Vanessa", "url": "https://github.com/Vanessa219", - "version": "1.0.6" + "version": "1.0.7" } diff --git a/app/src/constants.ts b/app/src/constants.ts index 996cc3429..25a7a4cd6 100644 --- a/app/src/constants.ts +++ b/app/src/constants.ts @@ -182,6 +182,7 @@ export abstract class Constants { check: {default: "⌘L", custom: "⌘L"}, table: {default: "⌘O", custom: "⌘O"}, code: {default: "⇧⌘K", custom: "⇧⌘K"}, + clearFontStyle: {default: "⌘\\", custom: "⌘\\"}, }, heading: { paragraph: {default: "⌥⌘0", custom: "⌥⌘0"}, diff --git a/app/src/protyle/gutter/index.ts b/app/src/protyle/gutter/index.ts index cb7186965..785780a5c 100644 --- a/app/src/protyle/gutter/index.ts +++ b/app/src/protyle/gutter/index.ts @@ -1358,17 +1358,16 @@ export class Gutter {
`, click: () => { this.genClick(nodeElements, protyle, (e: HTMLElement) => { - e.style.textShadow = ""; e.style.color = ""; - e.style.webkitBackgroundClip = ""; - e.style.backgroundImage = ""; e.style.webkitTextFillColor = ""; e.style.webkitTextStroke = ""; e.style.textShadow = ""; e.style.backgroundColor = ""; + e.style.fontSize = ""; }); } }); + // TODO 字体大小 return styles; } diff --git a/app/src/protyle/toolbar/Font.ts b/app/src/protyle/toolbar/Font.ts index e4e5e98da..38ee4d3f2 100644 --- a/app/src/protyle/toolbar/Font.ts +++ b/app/src/protyle/toolbar/Font.ts @@ -122,12 +122,15 @@ export const fontEvent = (protyle: IProtyle, type?: string, color?: string) => { protyle.toolbar.setInlineMark(protyle, "text", "range", {type, color}); }; -export const setFontStyle = (textElement:HTMLElement, textOption:ITextOption) => { +export const setFontStyle = (textElement: HTMLElement, textOption: ITextOption) => { if (textOption) { switch (textOption.type) { case "color": textElement.style.color = textOption.color; break; + case "fontSize": + textElement.style.fontSize = textOption.color; + break; case "backgroundColor": textElement.style.backgroundColor = textOption.color; break; @@ -151,18 +154,21 @@ export const hasSameTextStyle = (currentElement: HTMLElement, sideElement: HTMLE let webkitTextStroke = ""; let textShadow = ""; let backgroundColor = ""; + let fontSize = ""; if (currentElement.nodeType !== 3) { color = currentElement.style.color; webkitTextFillColor = currentElement.style.webkitTextFillColor; webkitTextStroke = currentElement.style.webkitTextStroke; textShadow = currentElement.style.textShadow; backgroundColor = currentElement.style.backgroundColor; + fontSize = currentElement.style.fontSize; } if (textObj.type === "color") { return textObj.color === sideElement.style.color && webkitTextFillColor === sideElement.style.webkitTextFillColor && webkitTextStroke === sideElement.style.webkitTextStroke && textShadow === sideElement.style.textShadow && + fontSize === sideElement.style.fontSize && backgroundColor === sideElement.style.backgroundColor; } if (textObj.type === "backgroundColor") { @@ -170,6 +176,7 @@ export const hasSameTextStyle = (currentElement: HTMLElement, sideElement: HTMLE webkitTextFillColor === sideElement.style.webkitTextFillColor && webkitTextStroke === sideElement.style.webkitTextStroke && textShadow === sideElement.style.textShadow && + fontSize === sideElement.style.fontSize && textObj.color === sideElement.style.backgroundColor; } if (textObj.type === "style2") { @@ -177,13 +184,23 @@ export const hasSameTextStyle = (currentElement: HTMLElement, sideElement: HTMLE "transparent" === sideElement.style.webkitTextFillColor && "0.2px var(--b3-theme-on-background)" === sideElement.style.webkitTextStroke && textShadow === sideElement.style.textShadow && + fontSize === sideElement.style.fontSize && backgroundColor === sideElement.style.backgroundColor; } if (textObj.type === "style4") { return color === sideElement.style.color && webkitTextFillColor === sideElement.style.webkitTextFillColor && webkitTextStroke === sideElement.style.webkitTextStroke && + fontSize === sideElement.style.fontSize && "1px 1px var(--b3-border-color), 2px 2px var(--b3-border-color), 3px 3px var(--b3-border-color), 4px 4px var(--b3-border-color)" === sideElement.style.textShadow && backgroundColor === sideElement.style.backgroundColor; } + if (textObj.type === "fontSize") { + return color === sideElement.style.color && + webkitTextFillColor === sideElement.style.webkitTextFillColor && + webkitTextStroke === sideElement.style.webkitTextStroke && + textShadow === sideElement.style.textShadow && + textObj.color === sideElement.style.fontSize && + backgroundColor === sideElement.style.backgroundColor; + } }; diff --git a/app/src/protyle/toolbar/InlineMemo.ts b/app/src/protyle/toolbar/InlineMemo.ts index 03a60113d..24186b079 100644 --- a/app/src/protyle/toolbar/InlineMemo.ts +++ b/app/src/protyle/toolbar/InlineMemo.ts @@ -66,6 +66,7 @@ export class InlineMemo extends ToolbarItem { const nextNewNode = newNodes[i + 1] as HTMLElement; if (currentNewNode.nodeType !== 3 && nextNewNode && nextNewNode.nodeType !== 3 && isArrayEqual(nextNewNode.getAttribute("data-type").split(" "), currentNewNode.getAttribute("data-type").split(" ")) && + currentNewNode.style.fontSize === nextNewNode.style.fontSize && currentNewNode.style.color === nextNewNode.style.color && currentNewNode.style.webkitTextFillColor === nextNewNode.style.webkitTextFillColor && currentNewNode.style.webkitTextStroke === nextNewNode.style.webkitTextStroke && diff --git a/app/src/protyle/toolbar/index.ts b/app/src/protyle/toolbar/index.ts index e277204bd..dd43d5235 100644 --- a/app/src/protyle/toolbar/index.ts +++ b/app/src/protyle/toolbar/index.ts @@ -184,6 +184,7 @@ export class Toolbar { case "tag": case "u": case "sup": + case "clear": case "sub": case "kbd": menuItemObj = new ToolbarItem(protyle, menuItem); @@ -294,11 +295,15 @@ export class Toolbar { const actionBtn = action === "toolbar" ? this.element.querySelector(`[data-type="${type}"]`) : undefined; const newNodes: Node[] = []; - if (actionBtn?.classList.contains("protyle-toolbar__item--current") || ( - action === "range" && rangeTypes.length > 0 && rangeTypes.includes(type) && (!textObj || textObj.type === "remove") + if (type === "clear" || actionBtn?.classList.contains("protyle-toolbar__item--current") || ( + action === "range" && rangeTypes.length > 0 && rangeTypes.includes(type) && !textObj )) { // 移除 - if (actionBtn) { + if (type === "clear") { + this.element.querySelectorAll('[data-type="em"],[data-type="u"],[data-type="s"],[data-type="mark"],[data-type="sup"],[data-type="sub"],[data-type="strong"]').forEach(item => { + item.classList.remove("protyle-toolbar__item--current"); + }); + } else if (actionBtn) { actionBtn.classList.remove("protyle-toolbar__item--current"); } if (contents.childNodes.length === 0) { @@ -320,24 +325,34 @@ export class Toolbar { contents.childNodes.forEach((item: HTMLElement, index) => { if (item.nodeType !== 3 && item.tagName !== "BR") { const types = item.getAttribute("data-type").split(" "); - types.find((itemType, index) => { - if (type === itemType) { - types.splice(index, 1); - return true; + if (type === "clear") { + for (let i = 0; i < types.length; i++) { + if (["strong", "em", "u", "s", "mark", "sup", "sub"].includes(types[i])) { + types.splice(i, 1); + i--; + } } - }); + } else { + types.find((itemType, typeIndex) => { + if (type === itemType) { + types.splice(typeIndex, 1); + return true; + } + }); + } if (types.length === 0) { if (item.textContent === "") { item.textContent = Constants.ZWSP; } newNodes.push(document.createTextNode(item.textContent)); } else { - if (textObj && textObj.type === "remove") { + if (type === "clear") { item.style.color = ""; item.style.webkitTextFillColor = ""; item.style.webkitTextStroke = ""; item.style.textShadow = ""; item.style.backgroundColor = ""; + item.style.fontSize = ""; } if (index === 0 && previousElement && previousElement.nodeType !== 3 && isArrayEqual(types, previousElement.getAttribute("data-type").split(" ")) && @@ -350,17 +365,11 @@ export class Toolbar { nextIndex = item.textContent.length; nextElement.innerHTML = item.innerHTML + nextElement.innerHTML; } else { - if (item.textContent === "") { - item.textContent = Constants.ZWSP; - } item.setAttribute("data-type", types.join(" ")); newNodes.push(item); } } } else { - if (item.textContent === "") { - item.textContent = Constants.ZWSP; - } newNodes.push(item); } }); @@ -466,6 +475,7 @@ export class Toolbar { currentNewNode.style.webkitTextFillColor === nextNewNode.style.webkitTextFillColor && currentNewNode.style.webkitTextStroke === nextNewNode.style.webkitTextStroke && currentNewNode.style.textShadow === nextNewNode.style.textShadow && + currentNewNode.style.fontSize === nextNewNode.style.fontSize && currentNewNode.style.backgroundColor === nextNewNode.style.backgroundColor) { // 合并相同的 node nextNewNode.innerHTML = currentNewNode.innerHTML + nextNewNode.innerHTML; diff --git a/app/src/protyle/util/Options.ts b/app/src/protyle/util/Options.ts index 15e1ff0e2..1cba7bb27 100644 --- a/app/src/protyle/util/Options.ts +++ b/app/src/protyle/util/Options.ts @@ -80,39 +80,37 @@ export class Options { toolbar: isMobile() ? [ "block-ref", "a", + "text", "|", "strong", "em", "u", - "s", - "mark", - "|", - "tag", "code", + "tag", + "inline-memo", "inline-math", "|", - "inline-memo", - "text", + "clear", ] : [ "block-ref", "a", + "text", "|", "strong", "em", "u", "s", "mark", - "|", "sup", "sub", - "kbd", "|", - "tag", "code", + "kbd", + "tag", + "inline-memo", "inline-math", "|", - "inline-memo", - "text", + "clear" ], typewriterMode: false, upload: { @@ -236,6 +234,12 @@ export class Options { hotkey: window.siyuan.config.keymap.editor.insert.font.custom, icon: "iconFont", tipPosition: "n", + }, { + name: "clear", + lang: "clearFontStyle", + hotkey: window.siyuan.config.keymap.editor.insert.clearFontStyle.custom, + icon: "iconClear", + tipPosition: "n", }, { name: "|", }];