diff --git a/app/src/protyle/gutter/index.ts b/app/src/protyle/gutter/index.ts
index cb0586af1..27a180029 100644
--- a/app/src/protyle/gutter/index.ts
+++ b/app/src/protyle/gutter/index.ts
@@ -678,6 +678,8 @@ export class Gutter {
window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element);
const appearanceElement = new MenuItem({
label: window.siyuan.languages.appearance,
+ icon: "iconFont",
+ accelerator: window.siyuan.config.keymap.editor.insert.appearance.custom,
click() {
protyle.toolbar.element.classList.add("fn__none");
protyle.toolbar.subElement.innerHTML = "";
@@ -1475,6 +1477,8 @@ export class Gutter {
if (!protyle.disabled) {
const appearanceElement = new MenuItem({
label: window.siyuan.languages.appearance,
+ icon: "iconFont",
+ accelerator: window.siyuan.config.keymap.editor.insert.appearance.custom,
click() {
protyle.toolbar.element.classList.add("fn__none");
protyle.toolbar.subElement.innerHTML = "";
diff --git a/app/src/protyle/toolbar/Font.ts b/app/src/protyle/toolbar/Font.ts
index 783929be8..3fc5c5a8c 100644
--- a/app/src/protyle/toolbar/Font.ts
+++ b/app/src/protyle/toolbar/Font.ts
@@ -3,7 +3,7 @@ import {ToolbarItem} from "./ToolbarItem";
import {setPosition} from "../../util/setPosition";
import {focusBlock, focusByRange, getSelectionPosition} from "../util/selection";
import {Constants} from "../../constants";
-import {hasClosestByAttribute} from "../util/hasClosest";
+import {hasClosestBlock, hasClosestByAttribute} from "../util/hasClosest";
import {updateBatchTransaction} from "../wysiwyg/transaction";
export class Font extends ToolbarItem {
@@ -12,14 +12,21 @@ export class Font extends ToolbarItem {
constructor(protyle: IProtyle, menuItem: IMenuItem) {
super(protyle, menuItem);
this.element.addEventListener("click", () => {
+ let nodeElements: Element[];
if (protyle.toolbar.range.toString() === "") {
- return;
+ nodeElements = Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--select"))
+ if (nodeElements.length === 0) {
+ const nodeElement = hasClosestBlock(protyle.toolbar.range.startContainer);
+ if (nodeElement) {
+ nodeElements = [nodeElement]
+ }
+ }
}
protyle.toolbar.element.classList.add("fn__none");
protyle.toolbar.subElement.innerHTML = "";
protyle.toolbar.subElement.style.width = "";
protyle.toolbar.subElement.style.padding = "";
- protyle.toolbar.subElement.append(appearanceMenu(protyle));
+ protyle.toolbar.subElement.append(appearanceMenu(protyle, nodeElements));
protyle.toolbar.subElement.classList.remove("fn__none");
protyle.toolbar.subElementCloseCB = undefined;
focusByRange(protyle.toolbar.range);
@@ -75,21 +82,22 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
lastColorHTML += ``;
break;
case "fontSize":
- lastColorHTML += ``;
+ lastColorHTML += ``;
break;
case "style1":
lastColorHTML += ``;
break;
+ case "clear":
+ lastColorHTML += ``;
+ break;
}
});
lastColorHTML += "";
}
let textElement: HTMLElement
let fontSize = "16px";
- if (nodeElements) {
- if (nodeElements.length === 1) {
- textElement = nodeElements[0] as HTMLElement
- }
+ if (nodeElements && nodeElements.length > 0) {
+ textElement = nodeElements[0] as HTMLElement;
} else {
textElement = protyle.toolbar.range.cloneContents().querySelector('[data-type~="text"]') as HTMLElement;
if (!textElement) {
@@ -156,38 +164,16 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
while (target && !target.isEqualNode(element)) {
const dataType = target.getAttribute("data-type");
if (target.tagName === "BUTTON") {
- if (nodeElements) {
- updateBatchTransaction(nodeElements, protyle, (e: HTMLElement) => {
- if (dataType === "clear") {
- e.style.color = "";
- e.style.webkitTextFillColor = "";
- e.style.webkitTextStroke = "";
- e.style.textShadow = "";
- e.style.backgroundColor = "";
- e.style.fontSize = "";
- } else if (dataType === "style1") {
- e.style.backgroundColor = target.style.backgroundColor;
- e.style.color = target.style.color;
- } else if (dataType === "style2") {
- e.style.webkitTextStroke = "0.2px var(--b3-theme-on-background)";
- e.style.webkitTextFillColor = "transparent";
- } else if (dataType === "style4") {
- e.style.textShadow = "1px 1px var(--b3-theme-surface-lighter), 2px 2px var(--b3-theme-surface-lighter), 3px 3px var(--b3-theme-surface-lighter), 4px 4px var(--b3-theme-surface-lighter)";
- } else if (dataType === "color") {
- e.style.color = target.style.color;
- } else if (dataType === "backgroundColor") {
- e.style.backgroundColor = target.style.backgroundColor;
- }
- });
- focusBlock(nodeElements[0]);
+ if (dataType === "style1") {
+ fontEvent(protyle, nodeElements, dataType, target.style.backgroundColor + Constants.ZWSP + target.style.color);
+ } else if (dataType === "fontSize") {
+ fontEvent(protyle, nodeElements, dataType, target.style.fontSize);
+ } else if (dataType === "backgroundColor") {
+ fontEvent(protyle, nodeElements, dataType, target.style.backgroundColor);
+ } else if (dataType === "color") {
+ fontEvent(protyle, nodeElements, dataType, target.style.color);
} else {
- if (dataType === "clear") {
- protyle.toolbar.setInlineMark(protyle, "clear", "range", {type: "text"});
- } else if (dataType === "style1") {
- fontEvent(protyle, dataType, target.style.backgroundColor + Constants.ZWSP + target.style.color);
- } else {
- fontEvent(protyle, dataType, target.style.backgroundColor || target.style.color || target.textContent);
- }
+ fontEvent(protyle, nodeElements, dataType);
}
break;
}
@@ -195,25 +181,18 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
}
});
element.querySelector("select").addEventListener("change", function (event: Event) {
- if (nodeElements) {
- updateBatchTransaction(nodeElements, protyle, (e: HTMLElement) => {
- e.style.fontSize = (event.target as HTMLSelectElement).value;
- });
- focusBlock(nodeElements[0]);
- } else {
- fontEvent(protyle, "fontSize", (event.target as HTMLSelectElement).value);
- }
+ fontEvent(protyle, nodeElements, "fontSize", (event.target as HTMLSelectElement).value);
});
return element;
};
-export const fontEvent = (protyle: IProtyle, type?: string, color?: string) => {
+export const fontEvent = (protyle: IProtyle, nodeElements: Element[], type?: string, color?: string) => {
let localFontStyles = window.siyuan.storage[Constants.LOCAL_FONTSTYLES];
if (type) {
localFontStyles.splice(0, 0, `${type}${Constants.ZWSP}${color}`);
localFontStyles = [...new Set(localFontStyles)];
if (localFontStyles.length > 8) {
- localFontStyles.splice(7, 1);
+ localFontStyles.splice(8, 1);
}
window.siyuan.storage[Constants.LOCAL_FONTSTYLES] = localFontStyles;
setStorageVal(Constants.LOCAL_FONTSTYLES, window.siyuan.storage[Constants.LOCAL_FONTSTYLES]);
@@ -227,7 +206,40 @@ export const fontEvent = (protyle: IProtyle, type?: string, color?: string) => {
color = fontStyles[1];
}
}
- protyle.toolbar.setInlineMark(protyle, "text", "range", {type, color});
+ if (nodeElements && nodeElements.length > 0) {
+ updateBatchTransaction(nodeElements, protyle, (e: HTMLElement) => {
+ if (type === "clear") {
+ e.style.color = "";
+ e.style.webkitTextFillColor = "";
+ e.style.webkitTextStroke = "";
+ e.style.textShadow = "";
+ e.style.backgroundColor = "";
+ e.style.fontSize = "";
+ } else if (type === "style1") {
+ const colorList = color.split(Constants.ZWSP)
+ e.style.backgroundColor = colorList[0];
+ e.style.color = colorList[1];
+ } else if (type === "style2") {
+ e.style.webkitTextStroke = "0.2px var(--b3-theme-on-background)";
+ e.style.webkitTextFillColor = "transparent";
+ } else if (type === "style4") {
+ e.style.textShadow = "1px 1px var(--b3-theme-surface-lighter), 2px 2px var(--b3-theme-surface-lighter), 3px 3px var(--b3-theme-surface-lighter), 4px 4px var(--b3-theme-surface-lighter)";
+ } else if (type === "color") {
+ e.style.color = color;
+ } else if (type === "backgroundColor") {
+ e.style.backgroundColor = color;
+ } else if (type === "fontSize") {
+ e.style.fontSize = color;
+ }
+ });
+ focusBlock(nodeElements[0]);
+ } else {
+ if (type === "clear") {
+ protyle.toolbar.setInlineMark(protyle, "clear", "range", {type: "text"});
+ } else {
+ protyle.toolbar.setInlineMark(protyle, "text", "range", {type, color});
+ }
+ }
};
export const setFontStyle = (textElement: HTMLElement, textOption: ITextOption) => {
diff --git a/app/src/protyle/wysiwyg/keydown.ts b/app/src/protyle/wysiwyg/keydown.ts
index bf42db788..5a70cab78 100644
--- a/app/src/protyle/wysiwyg/keydown.ts
+++ b/app/src/protyle/wysiwyg/keydown.ts
@@ -1290,7 +1290,14 @@ export const keydown = (app: App, protyle: IProtyle, editorElement: HTMLElement)
// toolbar action
if (matchHotKey(window.siyuan.config.keymap.editor.insert.lastUsed.custom, event)) {
protyle.toolbar.range = range;
- fontEvent(protyle);
+ let selectElements: Element[] = []
+ if (selectText === "") {
+ selectElements = Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--select"));
+ if (selectElements.length === 0) {
+ selectElements = [nodeElement]
+ }
+ }
+ fontEvent(protyle, selectElements);
event.stopPropagation();
event.preventDefault();
return;
@@ -1304,7 +1311,7 @@ export const keydown = (app: App, protyle: IProtyle, editorElement: HTMLElement)
}
if (matchHotKey(menuItem.hotkey, event)) {
protyle.toolbar.range = getEditorRange(protyle.wysiwyg.element);
- if (["block-ref", "text"].includes(menuItem.name) && protyle.toolbar.range.toString() === "") {
+ if (["block-ref"].includes(menuItem.name) && protyle.toolbar.range.toString() === "") {
return true;
}
findToolbar = true;