:art: fix https://github.com/siyuan-note/siyuan/issues/8422

app/src/assets/scss/business/_block.scss

@@ -12,7 +12,7 @@
     top: -100px;
     display: flex;
     flex-direction: column;
-    min-height: 160px;
+    min-height: 197px;
     border: 1px solid var(--b3-theme-surface-lighter);
 
     &--open {

app/src/block/Panel.ts

@@ -145,7 +145,7 @@ export class BlockPanel {
         this.render();
     }
 
-    private initProtyle(editorElement: HTMLElement) {
+    private initProtyle(editorElement: HTMLElement, afterCB?: () => void) {
         const index = parseInt(editorElement.getAttribute("data-index"));
         fetchPost("/api/block/getBlockInfo", {id: this.nodeIds[index]}, (response) => {
             if (response.code === 3) {
@@ -182,6 +182,9 @@ export class BlockPanel {
                     if (response.data.rootID !== this.nodeIds[index]) {
                         editor.protyle.breadcrumb.element.parentElement.lastElementChild.classList.remove("fn__none");
                     }
+                    if (afterCB) {
+                        afterCB();
+                    }
                 }
             });
             this.editors.push(editor);
@@ -251,7 +254,40 @@ export class BlockPanel {
         });
         this.element.querySelectorAll(".block__edit").forEach((item: HTMLElement, index) => {
             if (index < 5) {
-                this.initProtyle(item);
+                this.initProtyle(item, index === 0 ? () => {
+                    let targetRect;
+                    if (this.targetElement && this.targetElement.classList.contains("protyle-wysiwyg__embed")) {
+                        targetRect = this.targetElement.getBoundingClientRect();
+                        // 嵌入块过长时，单击弹出的悬浮窗位置居下 https://ld246.com/article/1634292738717
+                        let top = targetRect.top;
+                        const contentElement = hasClosestByClassName(this.targetElement, "protyle-content", true);
+                        if (contentElement) {
+                            const contentRectTop = contentElement.getBoundingClientRect().top;
+                            if (targetRect.top < contentRectTop) {
+                                top = contentRectTop;
+                            }
+                        }
+                        // 单击嵌入块悬浮窗的位置最好是覆盖嵌入块
+                        setPosition(this.element, targetRect.left, Math.max(top - 84, Constants.SIZE_TOOLBAR_HEIGHT), 0, 8);
+                    } else if (this.targetElement) {
+                        if (this.targetElement.classList.contains("pdf__rect")) {
+                            targetRect = this.targetElement.firstElementChild.getBoundingClientRect();
+                        } else {
+                            targetRect = this.targetElement.getBoundingClientRect();
+                        }
+                        // 靠边不宜拖拽 https://github.com/siyuan-note/siyuan/issues/2937
+                        setPosition(this.element, targetRect.left, targetRect.bottom + 4, targetRect.height + 12, 8);
+                    } else if (typeof this.x === "number" && typeof this.y === "number") {
+                        setPosition(this.element, this.x, this.y);
+                    }
+                    const elementRect = this.element.getBoundingClientRect();
+                    if (this.targetElement && elementRect.top < targetRect.top) {
+                        this.element.style.maxHeight = (targetRect.top - elementRect.top - 8) + "px";
+                    } else {
+                        this.element.style.maxHeight = (window.innerHeight - elementRect.top - 8) + "px";
+                    }
+                    this.element.classList.add("block__popover--open");
+                } : undefined);
             } else {
                 observer.observe(item);
             }
@@ -259,32 +295,5 @@ export class BlockPanel {
         if (this.targetElement) {
             this.targetElement.style.cursor = "";
         }
-        this.element.classList.add("block__popover--open");
-        let targetRect;
-        if (this.targetElement && this.targetElement.classList.contains("protyle-wysiwyg__embed")) {
-            targetRect = this.targetElement.getBoundingClientRect();
-            // 嵌入块过长时，单击弹出的悬浮窗位置居下 https://ld246.com/article/1634292738717
-            let top = targetRect.top;
-            const contentElement = hasClosestByClassName(this.targetElement, "protyle-content", true);
-            if (contentElement) {
-                const contentRectTop = contentElement.getBoundingClientRect().top;
-                if (targetRect.top < contentRectTop) {
-                    top = contentRectTop;
-                }
-            }
-            // 单击嵌入块悬浮窗的位置最好是覆盖嵌入块
-            setPosition(this.element, targetRect.left, Math.max(top - 84, Constants.SIZE_TOOLBAR_HEIGHT), 0, 8);
-        } else if (this.targetElement) {
-            if (this.targetElement.classList.contains("pdf__rect")) {
-                targetRect = this.targetElement.firstElementChild.getBoundingClientRect();
-            } else {
-                targetRect = this.targetElement.getBoundingClientRect();
-            }
-            // 靠边不宜拖拽 https://github.com/siyuan-note/siyuan/issues/2937
-            setPosition(this.element, targetRect.left, targetRect.top + targetRect.height + 4, targetRect.height + 12, 8);
-        } else if (typeof this.x === "number" && typeof this.y === "number") {
-            setPosition(this.element, this.x, this.y);
-        }
-        this.element.style.maxHeight = (window.innerHeight - this.element.getBoundingClientRect().top - 8) + "px";
     }
 }

app/src/protyle/index.ts

@@ -268,8 +268,14 @@ export class Protyle {
             mode: (mergedOptions.action && mergedOptions.action.includes(Constants.CB_GET_CONTEXT)) ? 3 : 0,
             size: mergedOptions.action?.includes(Constants.CB_GET_ALL) ? Constants.SIZE_GET_MAX : window.siyuan.config.editor.dynamicLoadBlocks,
         }, getResponse => {
-            onGet({data: getResponse, protyle: this.protyle, action: mergedOptions.action});
-            this.afterOnGet(mergedOptions);
+            onGet({
+                data: getResponse,
+                protyle: this.protyle,
+                action: mergedOptions.action,
+                afterCB: () => {
+                    this.afterOnGet(mergedOptions);
+                }
+            });
         });
     }
 

app/src/protyle/util/onGet.ts

@@ -23,6 +23,7 @@ export const onGet = (options: {
     protyle: IProtyle,
     action?: string[],
     scrollAttr?: IScrollAttr
+    afterCB?: () => void
 }) => {
     if (!options.action) {
         options.action = [];
@@ -78,6 +79,7 @@ export const onGet = (options: {
             action: options.action,
             scrollAttr: options.scrollAttr,
             isSyncing: options.data.data.isSyncing,
+            afterCB: options.afterCB,
         }, options.protyle);
         removeLoading(options.protyle);
         return;
@@ -100,6 +102,7 @@ export const onGet = (options: {
             action: options.action,
             scrollAttr: options.scrollAttr,
             isSyncing: options.data.data.isSyncing,
+            afterCB: options.afterCB,
         }, options.protyle);
         setTitle(response.data.ial.title);
         removeLoading(options.protyle);
@@ -112,6 +115,7 @@ const setHTML = (options: {
     isSyncing: boolean,
     expand: boolean,
     scrollAttr?: IScrollAttr
+    afterCB?: () => void
 }, protyle: IProtyle) => {
     if (protyle.contentElement.classList.contains("fn__none") && protyle.wysiwyg.element.innerHTML !== "") {
         return;
@@ -263,6 +267,7 @@ const setHTML = (options: {
             onGet({data: getResponse, protyle, action: [Constants.CB_GET_APPEND, Constants.CB_GET_UNCHANGEID]});
         });
     }
+
     if (options.action.includes(Constants.CB_GET_APPEND) || options.action.includes(Constants.CB_GET_BEFORE)) {
         return;
     }
@@ -270,6 +275,9 @@ const setHTML = (options: {
         protyle.breadcrumb.toggleExit(!options.action.includes(Constants.CB_GET_ALL));
         protyle.breadcrumb.render(protyle);
     }
+    if (options.afterCB) {
+        options.afterCB();
+    }
     protyle.app.plugins.forEach(item => {
         item.eventBus.emit("loaded-protyle", protyle);
     });