🎨 fix #9313

siyuan-note · Oct 1, 2023 · 6490070 · 6490070
1 parent 05cfcf7
commit 6490070
Show file tree

Hide file tree

Showing 13 changed files with 119 additions and 58 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -84,6 +84,10 @@ ${contentHTML}
     }
     return `<div class="b3-menu__items">
     ${html}
+    <button data-type="addAssetExist" class="b3-menu__item">
+        <svg class="b3-menu__icon"><use xlink:href="#iconImage"></use></svg>
+        <span class="b3-menu__label">${window.siyuan.languages.assets}</span>
+    </button>
     <button class="b3-menu__item">
         <svg class="b3-menu__icon"><use xlink:href="#iconDownload"></use></svg>
         <span class="b3-menu__label">${window.siyuan.languages.insertAsset}</span> 
@@ -314,8 +318,8 @@ export const addAssetLink = (protyle: IProtyle, data: IAV, cellElements: HTMLEle
     const rect = target.getBoundingClientRect();
     menu.open({
         x: rect.right,
-        y: rect.top,
-        w: rect.width,
+        y: rect.bottom,
+        w: target.parentElement.clientWidth + 8,
         h: rect.height,
     });
 };
diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts
@@ -12,6 +12,8 @@ import {formatNumber} from "./number";
 import {removeAttrViewColAnimation} from "./action";
 import {addAssetLink, bindAssetEvent, editAssetItem, getAssetHTML, updateAssetCell} from "./asset";
 import {Constants} from "../../../constants";
+import {hideElements} from "../../ui/hideElements";
+import {pathPosix} from "../../../util/pathName";
 
 export const openMenuPanel = (options: {
     protyle: IProtyle,
@@ -322,7 +324,12 @@ export const openMenuPanel = (options: {
             while (target && !target.isSameNode(avPanelElement)) {
                 const type = target.dataset.type;
                 if (type === "close") {
-                    avPanelElement.remove();
+                    if (options.protyle.toolbar.subElement.className.includes("fn__none")) {
+                        avPanelElement.remove();
+                    } else {
+                        // 优先关闭资源文件搜索
+                        hideElements(["util"], options.protyle)
+                    }
                     window.siyuan.menus.menu.remove();
                     event.preventDefault();
                     event.stopPropagation();
@@ -672,6 +679,35 @@ export const openMenuPanel = (options: {
                     event.preventDefault();
                     event.stopPropagation();
                     break;
+                } else if (type === "addAssetExist") {
+                    const rect = target.getBoundingClientRect()
+                    options.protyle.toolbar.showAssets(options.protyle, {x: rect.right, y: rect.bottom, w: target.parentElement.clientWidth + 8, h: rect.height}, (url) => {
+                        let value: IAVCellAssetValue;
+                        if (Constants.SIYUAN_ASSETS_IMAGE.includes(pathPosix().extname(url).toLowerCase())) {
+                            value = {
+                                type: "image",
+                                content: url,
+                                name: ""
+                            }
+                        } else {
+                            value = {
+                                type: "file",
+                                content: url,
+                                name: pathPosix().basename(url).substring(0, Constants.SIZE_LINK_TEXT_MAX)
+                            }
+                        }
+                        updateAssetCell({
+                            protyle: options.protyle,
+                            data,
+                            cellElements: options.cellElements,
+                            type: "addUpdate",
+                            addUpdateValue: [value]
+                        });
+                        hideElements(["util"], options.protyle);
+                    });
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
                 } else if (type === "editAssetItem") {
                     editAssetItem(options.protyle, data, options.cellElements, target.parentElement);
                     event.preventDefault();

diff --git a/app/src/protyle/toolbar/Font.ts b/app/src/protyle/toolbar/Font.ts
@@ -18,6 +18,7 @@ export class Font extends ToolbarItem {
             protyle.toolbar.subElement.style.width = "";
             protyle.toolbar.subElement.style.padding = "";
             protyle.toolbar.subElement.append(appearanceMenu(protyle, getFontNodeElements(protyle)));
+            protyle.toolbar.subElement.style.zIndex = (++window.siyuan.zIndex).toString();
             protyle.toolbar.subElement.classList.remove("fn__none");
             protyle.toolbar.subElementCloseCB = undefined;
             focusByRange(protyle.toolbar.range);

diff --git a/app/src/protyle/toolbar/index.ts b/app/src/protyle/toolbar/index.ts
@@ -1115,6 +1115,7 @@ export class Toolbar {
             }
             updateTransaction(protyle, id, newHTML, html);
         };
+        this.subElement.style.zIndex = (++window.siyuan.zIndex).toString();
         this.subElement.classList.remove("fn__none");
         const nodeRect = renderElement.getBoundingClientRect();
         this.element.classList.add("fn__none");
@@ -1255,6 +1256,7 @@ export class Toolbar {
                 focusByRange(this.range);
             }
         });
+        this.subElement.style.zIndex = (++window.siyuan.zIndex).toString();
         this.subElement.classList.remove("fn__none");
         this.subElementCloseCB = undefined;
         /// #if !MOBILE
@@ -1410,6 +1412,7 @@ export class Toolbar {
                 event.stopPropagation();
             }
         });
+        this.subElement.style.zIndex = (++window.siyuan.zIndex).toString();
         this.subElement.classList.remove("fn__none");
         this.subElementCloseCB = undefined;
         this.element.classList.add("fn__none");
@@ -1490,6 +1493,7 @@ export class Toolbar {
             }
             hintRenderWidget(listElement.textContent, protyle);
         });
+        this.subElement.style.zIndex = (++window.siyuan.zIndex).toString();
         this.subElement.classList.remove("fn__none");
         this.subElementCloseCB = undefined;
         this.element.classList.add("fn__none");
@@ -1511,8 +1515,25 @@ export class Toolbar {
         });
     }
 
-    public showAssets(protyle: IProtyle, nodeElement: HTMLElement, range: Range) {
-        this.range = range;
+    private renderAssetList(listElement: Element, previewElement: Element, k: string, position: IPosition) {
+        fetchPost("/api/search/searchAsset", {
+            k,
+        }, (response) => {
+            let searchHTML = "";
+            response.data.forEach((item: { path: string, hName: string }, index: number) => {
+                searchHTML += `<div data-value="${item.path}" class="b3-list-item${index === 0 ? " b3-list-item--focus" : ""}"><div class="b3-list-item__text">${item.hName}</div></div>`;
+            });
+            listElement.innerHTML = searchHTML || `<li class="b3-list--empty">${window.siyuan.languages.emptyContent}</li>`;
+            if (response.data.length > 0) {
+                previewElement.innerHTML = renderAssetsPreview(response.data[0].path);
+            }
+            /// #if !MOBILE
+            setPosition(this.subElement, position.x, position.y, position.h, position.w);
+            /// #endif
+        });
+    }
+
+    public showAssets(protyle: IProtyle, position: IPosition, avCB?: (url: string) => void) {
         hideElements(["hint"], protyle);
         window.siyuan.menus.menu.remove();
         this.subElement.style.width = "";
@@ -1531,6 +1552,7 @@ export class Toolbar {
 <div style="width: 260px;display: ${isMobile() || window.outerWidth < window.outerWidth / 2 + 260 ? "none" : "flex"};padding: 8px;overflow: auto;justify-content: center;align-items: center;"></div>
 </div>`;
         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,30 +1577,28 @@ 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");
                 // 空行处插入 mp3 会多一个空的 mp3 块
                 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 += `<div data-value="${item.path}" class="b3-list-item${index === 0 ? " b3-list-item--focus" : ""}">${item.hName}</div>`;
-                });
-                listElement.innerHTML = searchHTML || `<li class="b3-list--empty">${window.siyuan.languages.emptyContent}</li>`;
-                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 += `<div data-value="${item.path}" class="b3-list-item${index === 0 ? " b3-list-item--focus" : ""}"><div class="b3-list-item__text">${item.hName}</div></div>`;
-            });
-            if (html === "") {
-                html = `<li class="b3-list--empty">${window.siyuan.languages.emptyContent}</li>`;
-            }
-            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
@@ -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
@@ -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