diff --git a/app/src/menus/protyle.ts b/app/src/menus/protyle.ts index 444b821f9..fd8407d01 100644 --- a/app/src/menus/protyle.ts +++ b/app/src/menus/protyle.ts @@ -66,6 +66,7 @@ import {popSearch} from "../mobile/menu/search"; import {showMessage} from "../dialog/message"; import {img3115} from "../boot/compatibleVersion"; import {hideTooltip} from "../dialog/tooltip"; +import {clearSelect} from "../protyle/util/clearSelect"; const renderAssetList = (element: Element, k: string, position: IPosition, exts: string[] = []) => { fetchPost("/api/search/searchAsset", { @@ -2464,16 +2465,7 @@ export const setFold = (protyle: IProtyle, nodeElement: Element, isOpen?: boolea focusBlock(nodeElement, undefined, false); } } - nodeElement.querySelectorAll(".img--select, .av__cell--select, .av__cell--active, .av__row--select").forEach((item: HTMLElement) => { - if (item.classList.contains("av__row--select")) { - item.classList.remove("av__row--select"); - item.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconUncheck"); - updateHeader(item); - } else { - item.querySelector(".av__drag-fill")?.remove(); - item.classList.remove("img--select", "av__cell--select", "av__cell--active"); - } - }); + clearSelect(["img", "av"], nodeElement); } const id = nodeElement.getAttribute("data-node-id"); if (nodeElement.getAttribute("data-type") === "NodeHeading") { diff --git a/app/src/protyle/gutter/index.ts b/app/src/protyle/gutter/index.ts index 19c99a848..5b7627167 100644 --- a/app/src/protyle/gutter/index.ts +++ b/app/src/protyle/gutter/index.ts @@ -61,6 +61,7 @@ import {openFileById} from "../../editor/util"; /// #endif import {checkFold} from "../../util/noRelyPCFunction"; import {copyTextByType} from "../toolbar/util"; +import {clearSelect} from "../util/clearSelect"; export class Gutter { public element: HTMLElement; @@ -169,6 +170,7 @@ export class Gutter { event.preventDefault(); event.stopPropagation(); hideTooltip(); + clearSelect(["av", "img"], protyle.wysiwyg.element); const id = buttonElement.getAttribute("data-node-id"); if (!id) { if (buttonElement.getAttribute("disabled")) { @@ -258,10 +260,6 @@ export class Gutter { return; } if (buttonElement.dataset.type === "NodeAttributeViewRow") { - blockElement.querySelectorAll(".av__cell--select, .av__cell--active").forEach((cellElement: HTMLElement) => { - cellElement.classList.remove("av__cell--select", "av__cell--active"); - cellElement.querySelector(".av__drag-fill")?.remove(); - }); const avID = blockElement.getAttribute("data-av-id"); const srcIDs = [Lute.NewNodeID()]; const previousID = event.altKey ? (rowElement.previousElementSibling.getAttribute("data-id") || "") : buttonElement.dataset.rowId; @@ -408,6 +406,7 @@ export class Gutter { } if (!window.siyuan.ctrlIsPressed && !window.siyuan.altIsPressed && !window.siyuan.shiftIsPressed) { hideTooltip(); + clearSelect(["av", "img"], protyle.wysiwyg.element); const gutterRect = buttonElement.getBoundingClientRect(); if (buttonElement.dataset.type === "NodeAttributeViewRowMenu") { const rowElement = Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-node-id="${buttonElement.dataset.nodeId}"] .av__row[data-id="${buttonElement.dataset.rowId}"]`)).find((item: HTMLElement) => { diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts index 87235c1f0..0b0cf9e48 100644 --- a/app/src/protyle/render/av/action.ts +++ b/app/src/protyle/render/av/action.ts @@ -35,6 +35,7 @@ import {fetchPost, fetchSyncPost} from "../../../util/fetch"; import {scrollCenter} from "../../../util/highlightById"; import {escapeHtml} from "../../../util/escape"; import {editGalleryItem, openGalleryItemMenu} from "./gallery/util"; +import {clearSelect} from "../../util/clearSelect"; export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLElement }) => { if (isOnlyMeta(event)) { @@ -300,19 +301,7 @@ export const avContextmenu = (protyle: IProtyle, rowElement: HTMLElement, positi if (!blockElement) { return false; } - blockElement.querySelectorAll(".av__cell--select, .av__cell--active").forEach(item => { - item.classList.remove("av__cell--select", "av__cell--active"); - item.querySelector(".av__drag-fill")?.remove(); - }); - if (!rowElement.classList.contains("av__row--select")) { - blockElement.querySelectorAll(".av__row--select").forEach(item => { - item.classList.remove("av__row--select"); - }); - blockElement.querySelectorAll(".av__firstcol use").forEach(item => { - item.setAttribute("xlink:href", "#iconUncheck"); - }); - } - + clearSelect(["cell", "row"], blockElement); const menu = new Menu(); rowElement.classList.add("av__row--select"); rowElement.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconCheck"); diff --git a/app/src/protyle/render/av/keydown.ts b/app/src/protyle/render/av/keydown.ts index 5d0fa8b48..f8a568fb3 100644 --- a/app/src/protyle/render/av/keydown.ts +++ b/app/src/protyle/render/av/keydown.ts @@ -5,6 +5,7 @@ import {avContextmenu} from "./action"; import {hasClosestByClassName} from "../../util/hasClosest"; import {Constants} from "../../../constants"; import {upDownHint} from "../../../util/upDownHint"; +import {clearSelect} from "../../util/clearSelect"; export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyle: IProtyle) => { if (!nodeElement.classList.contains("av") || !window.siyuan.menus.menu.element.classList.contains("fn__none")) { @@ -41,10 +42,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl return true; } if (event.key === "Escape") { - nodeElement.querySelectorAll(".av__cell--select, .av__cell--active").forEach(item => { - item.classList.remove("av__cell--select", "av__cell--active"); - item.querySelector(".av__drag-fill")?.remove(); - }); + clearSelect(["cell"], nodeElement); selectRow(rowElement.querySelector(".av__firstcol"), "select"); event.preventDefault(); return true; @@ -72,8 +70,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl newCellElement = previousCellElements[previousCellElements.length - 1]; } if (newCellElement) { - selectCellElement.classList.remove("av__cell--select", "av__cell--active"); - selectCellElement.querySelector(".av__drag-fill")?.remove(); + clearSelect(["cell"], nodeElement); newCellElement.classList.add("av__cell--select"); addDragFill(newCellElement); cellScrollIntoView(nodeElement, newCellElement, false); @@ -92,14 +89,12 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl newCellElement = nextRowElement.querySelector(".av__cell"); } if (newCellElement) { - selectCellElement.classList.remove("av__cell--select", "av__cell--active"); - selectCellElement.querySelector(".av__drag-fill")?.remove(); + clearSelect(["cell"], nodeElement); newCellElement.classList.add("av__cell--select"); addDragFill(newCellElement); cellScrollIntoView(nodeElement, newCellElement, false); } else if (event.key !== "ArrowRight") { - selectCellElement.classList.remove("av__cell--select", "av__cell--active"); - selectCellElement.querySelector(".av__drag-fill")?.remove(); + clearSelect(["cell"], nodeElement); insertRows(nodeElement, protyle, 1, rowElement.getAttribute("data-id")); } event.preventDefault(); @@ -111,8 +106,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl newCellElement = previousRowElement.querySelector(`.av__cell[data-col-id="${selectCellElement.dataset.colId}"]`); } if (newCellElement) { - selectCellElement.classList.remove("av__cell--select", "av__cell--active"); - selectCellElement.querySelector(".av__drag-fill")?.remove(); + clearSelect(["cell"], nodeElement); newCellElement.classList.add("av__cell--select"); addDragFill(newCellElement); cellScrollIntoView(nodeElement, newCellElement); @@ -126,8 +120,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl newCellElement = nextRowElement.querySelector(`.av__cell[data-col-id="${selectCellElement.dataset.colId}"]`); } if (newCellElement) { - selectCellElement.classList.remove("av__cell--select", "av__cell--active"); - selectCellElement.querySelector(".av__drag-fill")?.remove(); + clearSelect(["cell"], nodeElement); newCellElement.classList.add("av__cell--select"); addDragFill(newCellElement); cellScrollIntoView(nodeElement, newCellElement); diff --git a/app/src/protyle/render/av/row.ts b/app/src/protyle/render/av/row.ts index 22e311a80..68f610485 100644 --- a/app/src/protyle/render/av/row.ts +++ b/app/src/protyle/render/av/row.ts @@ -15,6 +15,7 @@ import {showMessage} from "../../../dialog/message"; import * as dayjs from "dayjs"; import {Constants} from "../../../constants"; import {insertGalleryItemAnimation} from "./gallery/item"; +import {clearSelect} from "../../util/clearSelect"; export const getFieldIdByCellElement = (cellElement: Element, viewType: TAVView): string => { return (hasClosestByClassName(cellElement, viewType === "table" ? "av__row" : "av__gallery-item") as HTMLElement).dataset.id; @@ -143,10 +144,7 @@ ${getTypeByCellElement(item) === "block" ? ' data-detached="true"' : ""}>`; } else { - blockElement.querySelectorAll(".av__cell--select, .av__cell--active").forEach(item => { - item.classList.remove("av__cell--select", "av__cell--active"); - item.querySelector(".av__drag-fill")?.remove(); - }); + clearSelect(["cell"], blockElement); addDragFill(blockCellElement); blockCellElement.classList.add("av__cell--select"); } diff --git a/app/src/protyle/util/editorCommonEvent.ts b/app/src/protyle/util/editorCommonEvent.ts index 1fc357650..447a3a60c 100644 --- a/app/src/protyle/util/editorCommonEvent.ts +++ b/app/src/protyle/util/editorCommonEvent.ts @@ -34,6 +34,7 @@ import {webUtils} from "electron"; import {addDragFill} from "../render/av/cell"; import {processClonePHElement} from "../render/util"; import {insertGalleryItemAnimation} from "../render/av/gallery/item"; +import {clearSelect} from "./clearSelect"; const moveToNew = (protyle: IProtyle, sourceElements: Element[], targetElement: Element, newSourceElement: Element, isSameDoc: boolean, isBottom: boolean, isCopy: boolean) => { @@ -1285,10 +1286,7 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => { } else { paste(protyle, event); } - protyle.wysiwyg.element.querySelectorAll(".av__cell--select, .av__cell--active").forEach(item => { - item.classList.remove("av__cell--select", "av__cell--active"); - item.querySelector(".av__drag-fill")?.remove(); - }); + clearSelect(["av", "img"], protyle.wysiwyg.element); } else { const cellElement = hasClosestByClassName(event.target, "av__cell"); if (cellElement) { @@ -1336,10 +1334,7 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => { } const blockElement = hasClosestBlock(targetElement); if (blockElement) { - protyle.wysiwyg.element.querySelectorAll(".av__cell--select, .av__cell--active").forEach(item => { - item.classList.remove("av__cell--select", "av__cell--active"); - item.querySelector(".av__drag-fill")?.remove(); - }); + clearSelect(["cell", "row"], protyle.wysiwyg.element); targetElement.classList.add("av__cell--select"); addDragFill(targetElement); dragoverElement = targetElement; diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts index a4d217cf5..a9c8cc40f 100644 --- a/app/src/protyle/wysiwyg/index.ts +++ b/app/src/protyle/wysiwyg/index.ts @@ -99,6 +99,7 @@ import {img3115} from "../../boot/compatibleVersion"; import {globalClickHideMenu} from "../../boot/globalEvent/click"; import {hideTooltip} from "../../dialog/tooltip"; import {openGalleryItemMenu} from "../render/av/gallery/util"; +import {clearSelect} from "../util/clearSelect"; export class WYSIWYG { public lastHTMLs: { [key: string]: string } = {}; @@ -226,18 +227,7 @@ export class WYSIWYG { } private setEmptyOutline(protyle: IProtyle, element: HTMLElement) { - // 图片移除选择状态应放在前面，否则 https://github.com/siyuan-note/siyuan/issues/4173 - protyle.wysiwyg.element.querySelectorAll(".img--select, .av__cell--select, .av__cell--active, .av__row--select").forEach((item: HTMLElement) => { - if (item.classList.contains("av__row--select") && !hasClosestByClassName(element, "av")) { - item.classList.remove("av__row--select"); - item.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconUncheck"); - updateHeader(item); - } else { - item.classList.remove("img--select", "av__cell--select", "av__cell--active"); - item.querySelector(".av__drag-fill")?.remove(); - } - }); - + clearSelect(["img" ,"av"], protyle.wysiwyg.element); let nodeElement = element; if (!element.getAttribute("data-node-id")) { const tempElement = hasClosestBlock(element); @@ -1799,7 +1789,7 @@ export class WYSIWYG { if (avGalleryItemElement) { avGalleryItemElement.classList.add("av__gallery-item--select"); const menu = openGalleryItemMenu({ - target: avGalleryItemElement.querySelector('.protyle-icon--last'), + target: avGalleryItemElement.querySelector(".protyle-icon--last"), blockElement: nodeElement, protyle, returnMenu: true