From ddeeba87e76947246842daf22fb2e9e30a705015 Mon Sep 17 00:00:00 2001 From: Vanessa Date: Sun, 21 May 2023 23:13:13 +0800 Subject: [PATCH] :art: hotkey https://github.com/siyuan-note/siyuan/issues/7973 --- app/src/protyle/gutter/index.ts | 4 ++ app/src/protyle/toolbar/Font.ts | 112 ++++++++++++++++------------- app/src/protyle/wysiwyg/keydown.ts | 11 ++- 3 files changed, 75 insertions(+), 52 deletions(-) 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;