diff --git a/app/src/menus/Menu.ts b/app/src/menus/Menu.ts index bd969df3c..8849a3a47 100644 --- a/app/src/menus/Menu.ts +++ b/app/src/menus/Menu.ts @@ -125,7 +125,7 @@ export class Menu { this.element.lastElementChild.append(element); } - public popup(options: { x: number, y: number, h?: number, w?: number }, isLeft = false) { + public popup(options: IPosition, isLeft = false) { if (this.element.lastElementChild.innerHTML === "") { return; } diff --git a/app/src/plugin/API.ts b/app/src/plugin/API.ts index 0331a9fe9..0c493e998 100644 --- a/app/src/plugin/API.ts +++ b/app/src/plugin/API.ts @@ -27,10 +27,7 @@ openWindow = () => { }; /// #else openWindow = (options: { - position?: { - x: number, - y: number, - }, + position?: IPosition, height?: number, width?: number, tab?: Tab, diff --git a/app/src/plugin/Menu.ts b/app/src/plugin/Menu.ts index d641b0461..83a74bd82 100644 --- a/app/src/plugin/Menu.ts +++ b/app/src/plugin/Menu.ts @@ -41,7 +41,7 @@ export class Menu { this.menu.addSeparator(index); } - open(options: { x: number, y: number, h?: number, w?: number, isLeft?: boolean }) { + open(options:IPosition) { if (this.isOpen) { return; } diff --git a/app/src/protyle/breadcrumb/index.ts b/app/src/protyle/breadcrumb/index.ts index ad9ac8546..3280cc010 100644 --- a/app/src/protyle/breadcrumb/index.ts +++ b/app/src/protyle/breadcrumb/index.ts @@ -240,7 +240,7 @@ export class Breadcrumb { } } - public showMenu(protyle: IProtyle, position: { x: number, y: number }) { + public showMenu(protyle: IProtyle, position:IPosition) { if (!window.siyuan.menus.menu.element.classList.contains("fn__none") && window.siyuan.menus.menu.element.getAttribute("data-name") === "breadcrumbMore") { window.siyuan.menus.menu.remove(); diff --git a/app/src/protyle/gutter/index.ts b/app/src/protyle/gutter/index.ts index 43d2024b9..92d7bbf55 100644 --- a/app/src/protyle/gutter/index.ts +++ b/app/src/protyle/gutter/index.ts @@ -698,6 +698,7 @@ export class Gutter { protyle.toolbar.subElement.style.width = ""; protyle.toolbar.subElement.style.padding = ""; protyle.toolbar.subElement.append(appearanceMenu(protyle, selectsElement)); + protyle.toolbar.subElement.style.zIndex = (++window.siyuan.zIndex).toString(); protyle.toolbar.subElement.classList.remove("fn__none"); protyle.toolbar.subElementCloseCB = undefined; const position = selectsElement[0].getBoundingClientRect(); @@ -1497,6 +1498,7 @@ export class Gutter { protyle.toolbar.subElement.style.width = ""; protyle.toolbar.subElement.style.padding = ""; protyle.toolbar.subElement.append(appearanceMenu(protyle, [nodeElement])); + protyle.toolbar.subElement.style.zIndex = (++window.siyuan.zIndex).toString(); protyle.toolbar.subElement.classList.remove("fn__none"); protyle.toolbar.subElementCloseCB = undefined; const position = nodeElement.getBoundingClientRect(); diff --git a/app/src/protyle/header/openTitleMenu.ts b/app/src/protyle/header/openTitleMenu.ts index bb0b211f0..5d4a1242d 100644 --- a/app/src/protyle/header/openTitleMenu.ts +++ b/app/src/protyle/header/openTitleMenu.ts @@ -28,11 +28,7 @@ import {openNewWindowById} from "../../window/openNewWindow"; import {genImportMenu} from "../../menus/navigation"; import {transferBlockRef} from "../../menus/block"; -export const openTitleMenu = (protyle: IProtyle, position: { - x: number - y: number - isLeft?: boolean -}) => { +export const openTitleMenu = (protyle: IProtyle, position: IPosition) => { hideTooltip(); if (!window.siyuan.menus.menu.element.classList.contains("fn__none") && window.siyuan.menus.menu.element.getAttribute("data-name") === "titleMenu") { diff --git a/app/src/protyle/hint/index.ts b/app/src/protyle/hint/index.ts index cd9f743ca..d846a2dc4 100644 --- a/app/src/protyle/hint/index.ts +++ b/app/src/protyle/hint/index.ts @@ -600,7 +600,9 @@ ${genHintItemHTML(item)} } else if (value === Constants.ZWSP + 2) { range.deleteContents(); this.fixImageCursor(range); - protyle.toolbar.showAssets(protyle, nodeElement, range); + protyle.toolbar.range = range; + const rangePosition = getSelectionPosition(nodeElement, range); + protyle.toolbar.showAssets(protyle, {x: rangePosition.left, y: rangePosition.top + 26, w: 0, h: 26}); updateTransaction(protyle, id, nodeElement.outerHTML, html); return; } else if (value === Constants.ZWSP + 3) { diff --git a/app/src/protyle/render/av/asset.ts b/app/src/protyle/render/av/asset.ts index a2f75a1ec..a3ebbeeee 100644 --- a/app/src/protyle/render/av/asset.ts +++ b/app/src/protyle/render/av/asset.ts @@ -84,6 +84,10 @@ ${contentHTML} } return `
${html} +
`; const listElement = this.subElement.querySelector(".b3-list"); + const previewElement = this.subElement.firstElementChild.lastElementChild; listElement.addEventListener("mouseover", (event) => { const target = event.target as HTMLElement; const hoverItemElement = hasClosestByClassName(target, "b3-list-item"); @@ -1539,15 +1561,13 @@ export class Toolbar { } previewElement.innerHTML = renderAssetsPreview(hoverItemElement.getAttribute("data-value")); }); - const previewElement = this.subElement.firstElementChild.lastElementChild; - previewElement.innerHTML = renderAssetsPreview(listElement.firstElementChild.getAttribute("data-value")); const inputElement = this.subElement.querySelector("input"); inputElement.addEventListener("keydown", (event: KeyboardEvent) => { event.stopPropagation(); if (event.isComposing) { return; } - const isEmpty = !this.subElement.querySelector(".b3-list-item"); + const isEmpty = this.subElement.querySelector(".b3-list--empty"); if (!isEmpty) { const currentElement = upDownHint(listElement, event); if (currentElement) { @@ -1557,8 +1577,13 @@ export class Toolbar { if (event.key === "Enter") { if (!isEmpty) { - hintRenderAssets(this.subElement.querySelector(".b3-list-item--focus").getAttribute("data-value"), protyle); - } else { + const currentURL = this.subElement.querySelector(".b3-list-item--focus").getAttribute("data-value") + if (avCB) { + avCB(currentURL) + } else { + hintRenderAssets(currentURL, protyle); + } + } else if (!avCB) { focusByRange(this.range); } this.subElement.classList.add("fn__none"); @@ -1566,21 +1591,14 @@ export class Toolbar { event.preventDefault(); } else if (event.key === "Escape") { this.subElement.classList.add("fn__none"); - focusByRange(this.range); + if (!avCB) { + focusByRange(this.range); + } } }); inputElement.addEventListener("input", (event) => { event.stopPropagation(); - fetchPost("/api/search/searchAsset", { - k: inputElement.value, - }, (response) => { - let searchHTML = ""; - response.data.forEach((item: { path: string, hName: string }, index: number) => { - searchHTML += `
${item.hName}
`; - }); - listElement.innerHTML = searchHTML || `
  • ${window.siyuan.languages.emptyContent}
    • `; - previewElement.innerHTML = renderAssetsPreview(listElement.firstElementChild.getAttribute("data-value")); - }); + this.renderAssetList(listElement, previewElement, inputElement.value, position); }); this.subElement.lastElementChild.addEventListener("click", (event) => { const target = event.target as HTMLElement; @@ -1598,38 +1616,32 @@ export class Toolbar { } if (target.classList.contains("b3-list--empty")) { this.subElement.classList.add("fn__none"); - focusByRange(this.range); + if (!avCB) { + focusByRange(this.range); + } event.stopPropagation(); return; } const listItemElement = hasClosestByClassName(target, "b3-list-item"); if (listItemElement) { event.stopPropagation(); - hintRenderAssets(listItemElement.getAttribute("data-value"), protyle); + const currentURL = listItemElement.getAttribute("data-value") + if (avCB) { + avCB(currentURL) + } else { + hintRenderAssets(currentURL, protyle); + } } }); + this.subElement.style.zIndex = (++window.siyuan.zIndex).toString(); this.subElement.classList.remove("fn__none"); this.subElementCloseCB = undefined; - /// #if !MOBILE - const rangePosition = getSelectionPosition(nodeElement, range); - setPosition(this.subElement, rangePosition.left, rangePosition.top + 18, Constants.SIZE_TOOLBAR_HEIGHT); - /// #else + /// #if MOBILE setPosition(this.subElement, 0, 0); /// #endif this.element.classList.add("fn__none"); inputElement.select(); - fetchPost("/api/search/searchAsset", { - k: "", - }, (response) => { - let html = ""; - response.data.forEach((item: { hName: string, path: string }, index: number) => { - html += `
    ${item.hName}
    `; - }); - if (html === "") { - html = `
  • ${window.siyuan.languages.emptyContent}
    • `; - } - this.subElement.querySelector(".b3-list--background").innerHTML = html; - }); + this.renderAssetList(listElement, previewElement, "", position); } public showContent(protyle: IProtyle, range: Range, nodeElement: Element) { @@ -1721,6 +1733,7 @@ export class Toolbar { setPosition(this.subElement, rangePosition.left, rangePosition.top + 28, Constants.SIZE_TOOLBAR_HEIGHT); } }); + this.subElement.style.zIndex = (++window.siyuan.zIndex).toString(); this.subElement.classList.remove("fn__none"); this.subElementCloseCB = undefined; this.element.classList.add("fn__none"); diff --git a/app/src/protyle/ui/hideElements.ts b/app/src/protyle/ui/hideElements.ts index 4ee0e7b48..e666a002d 100644 --- a/app/src/protyle/ui/hideElements.ts +++ b/app/src/protyle/ui/hideElements.ts @@ -1,7 +1,7 @@ /// #if MOBILE import {getCurrentEditor} from "../../mobile/editor"; /// #else -import {getAllModels} from "../../layout/getAll"; +import {getAllEditor} from "../../layout/getAll"; /// #endif // "gutter", "toolbar", "select", "hint", "util", "dialog" @@ -67,11 +67,13 @@ export const hideAllElements = (types: string[]) => { editor.protyle.toolbar.subElementCloseCB = undefined; } /// #else - getAllModels().editor.forEach(item => { - item.editor.protyle.toolbar.subElement.classList.add("fn__none"); - if (item.editor.protyle.toolbar.subElementCloseCB) { - item.editor.protyle.toolbar.subElementCloseCB(); - item.editor.protyle.toolbar.subElementCloseCB = undefined; + getAllEditor().forEach(item => { + if (item.protyle.toolbar) { + item.protyle.toolbar.subElement.classList.add("fn__none"); + if (item.protyle.toolbar.subElementCloseCB) { + item.protyle.toolbar.subElementCloseCB(); + item.protyle.toolbar.subElementCloseCB = undefined; + } } }); /// #endif diff --git a/app/src/types/index.d.ts b/app/src/types/index.d.ts index 3e3c6e3e9..15628667a 100644 --- a/app/src/types/index.d.ts +++ b/app/src/types/index.d.ts @@ -152,6 +152,14 @@ interface Window { openFileByURL(URL: string): boolean } +interface IPosition { + x: number, + y: number, + w?: number, + h?: number, + isLeft?: boolean +} + interface ISaveLayout { name: string, layout: IObject