🎨 Improve soft keyboard toolbar pop-up https://github.com/siyuan-note/siyuan/issues/16548

Signed-off-by: Daniel <845765@qq.com>

app/src/mobile/index.ts

@@ -56,8 +56,8 @@ class App {
                 size: {
                     isLandscape: window.matchMedia && window.matchMedia("(orientation: landscape)").matches,
                     landscape: {
-                        height1: window.innerHeight,
-                        height2: window.innerHeight,
+                        height1: window.innerWidth,
+                        height2: window.innerWidth,
                     }, // 横屏
                     portrait: {
                         height1: window.innerHeight,

app/src/mobile/util/keyboardToolbar.ts

@@ -286,16 +286,16 @@ const renderSlashMenu = (protyle: IProtyle, toolbarElement: Element) => {
 export const showKeyboardToolbarUtil = (oldScrollTop: number) => {
     window.siyuan.menus.menu.remove();
     showUtil = true;
-
+    const toolHeight = document.querySelector(".keyboard__bar").clientHeight
     const toolbarElement = document.getElementById("keyboardToolbar");
-    let keyboardHeight = window.innerHeight / 2 - 42;
+    let keyboardHeight = window.innerHeight / 2 - toolHeight;
     if (window.siyuan.mobile.size.isLandscape) {
         if (window.siyuan.mobile.size.landscape.height1 !== window.siyuan.mobile.size.landscape.height2) {
-            keyboardHeight = window.siyuan.mobile.size.landscape.height1 - window.siyuan.mobile.size.landscape.height2 + 42;
+            keyboardHeight = window.siyuan.mobile.size.landscape.height1 - window.siyuan.mobile.size.landscape.height2 + toolHeight;
         }
     } else {
         if (window.siyuan.mobile.size.portrait.height1 !== window.siyuan.mobile.size.portrait.height2) {
-            keyboardHeight = window.siyuan.mobile.size.portrait.height1 - window.siyuan.mobile.size.portrait.height2 + 42;
+            keyboardHeight = window.siyuan.mobile.size.portrait.height1 - window.siyuan.mobile.size.portrait.height2 + toolHeight;
         }
     }
     const editor = getCurrentEditor();

app/src/protyle/render/av/action.ts

@@ -302,7 +302,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
                 removeCompressURL((target as HTMLImageElement).getAttribute("src")),
                 blockElement.getAttribute("data-av-id"),
                 blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW),
-                (blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement)?.value.trim() || ""
+                blockElement.querySelector('[data-type="av-search"]')?.textContent.trim() || ""
             );
             event.preventDefault();
             event.stopPropagation();

app/src/protyle/render/av/asset.ts

@@ -357,7 +357,7 @@ export const editAssetItem = (options: {
                     linkAddress,
                     options.blockElement.getAttribute("data-av-id"),
                     options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW),
-                    (options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement)?.value.trim() || ""
+                    options.blockElement.querySelector('[data-type="av-search"]')?.textContent.trim() || ""
                 );
             }
         });

app/src/protyle/render/av/gallery/item.ts

@@ -12,7 +12,7 @@ export const insertGalleryItemAnimation = (options: {
     groupID?: string
 }) => {
     const type = options.blockElement.getAttribute("data-av-type") as TAVView;
-    (options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement).value = "";
+    options.blockElement.querySelector('[data-type="av-search"]').textContent = "";
     const groupQuery = options.groupID ? `.av__body[data-group-id="${options.groupID}"] ` : "";
     let sideItemElement = options.previousId ? options.blockElement.querySelector(groupQuery + `.av__gallery-item[data-id="${options.previousId}"]`) : options.blockElement.querySelector(groupQuery + ".av__gallery-item");
     const hasSort = options.blockElement.querySelector('.av__views [data-type="av-sort"]').classList.contains("block__icon--active");

app/src/protyle/render/av/gallery/render.ts

@@ -123,9 +123,9 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex,
 };
 
 const renderGroupGallery = (options: ITableOptions) => {
-    const searchInputElement = options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement;
+    const searchInputElement = options.blockElement.querySelector('[data-type="av-search"]');
     const isSearching = searchInputElement && document.activeElement === searchInputElement;
-    const query = searchInputElement?.value || "";
+    const query = searchInputElement?.textContent || "";
 
     let avBodyHTML = "";
     options.data.view.groups.forEach((group: IAVGallery) => {
@@ -210,8 +210,8 @@ export const afterRenderGallery = (options: ITableOptions) => {
         return;
     }
     const viewsElement = options.blockElement.querySelector(".av__views") as HTMLElement;
-    const searchInputElement = options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement;
-    searchInputElement.value = options.resetData.query || "";
+    const searchInputElement = options.blockElement.querySelector('[data-type="av-search"]') as HTMLElement;
+    searchInputElement.textContent = options.resetData.query || "";
     if (options.resetData.isSearching) {
         searchInputElement.focus();
     }
@@ -229,7 +229,7 @@ export const afterRenderGallery = (options: ITableOptions) => {
         if (event.isComposing) {
             return;
         }
-        if (searchInputElement.value || document.activeElement === searchInputElement) {
+        if (searchInputElement.textContent || document.activeElement === searchInputElement) {
             viewsElement.classList.add("av__views--show");
         } else {
             viewsElement.classList.remove("av__views--show");
@@ -243,7 +243,7 @@ export const afterRenderGallery = (options: ITableOptions) => {
         if (event.isComposing) {
             return;
         }
-        if (!searchInputElement.value) {
+        if (!searchInputElement.textContent) {
             viewsElement.classList.remove("av__views--show");
             searchInputElement.style.width = "0";
             searchInputElement.style.paddingLeft = "0";
@@ -273,7 +273,7 @@ export const renderGallery = async (options: {
     renderAll: boolean,
     data?: IAV,
 }) => {
-    const searchInputElement = options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement;
+    const searchInputElement = options.blockElement.querySelector('[data-type="av-search"]');
     const editIds: IIds[] = [];
     options.blockElement.querySelectorAll(".av__gallery-fields--edit").forEach(item => {
         editIds.push({
@@ -297,7 +297,7 @@ export const renderGallery = async (options: {
     });
     const resetData = {
         isSearching: searchInputElement && document.activeElement === searchInputElement,
-        query: searchInputElement?.value || "",
+        query: searchInputElement?.textContent || "",
         alignSelf: options.blockElement.style.alignSelf,
         oldOffset: options.protyle.contentElement.scrollTop,
         editIds,

app/src/protyle/render/av/openMenuPanel.ts

@@ -49,9 +49,13 @@ import {Dialog} from "../../../dialog";
 import {bindLayoutEvent, getLayoutHTML, updateLayout} from "./layout";
 import {setGalleryCover, setGalleryRatio, setGallerySize} from "./gallery/util";
 import {
-    bindGroupsEvent, bindGroupsNumber,
+    bindGroupsEvent,
+    bindGroupsNumber,
     getGroupsHTML,
-    getGroupsMethodHTML, getGroupsNumberHTML, getLanguageByIndex, getPageSize,
+    getGroupsMethodHTML,
+    getGroupsNumberHTML,
+    getLanguageByIndex,
+    getPageSize,
     goGroupsDate,
     goGroupsSort,
     setGroupMethod
@@ -79,7 +83,7 @@ export const openMenuPanel = (options: {
     const avPageSize = getPageSize(options.blockElement);
     fetchPost("/api/av/renderAttributeView", {
         id: avID,
-        query: (options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement)?.value.trim() || "",
+        query: options.blockElement.querySelector('[data-type="av-search"]')?.textContent.trim() || "",
         pageSize: avPageSize.unGroupPageSize,
         groupPaging: avPageSize.groupPageSize,
         viewID: options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW)
@@ -1360,7 +1364,7 @@ export const openMenuPanel = (options: {
                     const suffix = pathPosix().extname(assetLink);
                     if (assetType === "image") {
                         previewAttrViewImages(assetLink, avID, options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW),
-                            (options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement)?.value.trim() || "");
+                            options.blockElement.querySelector('[data-type="av-search"]')?.textContent.trim() || "");
                     } else if (isLocalPath(assetLink) && assetType === "file" && (
                         (suffix === ".pdf" && !assetLink.startsWith("file://")) ||
                         Constants.SIYUAN_ASSETS_AUDIO.concat(Constants.SIYUAN_ASSETS_VIDEO, Constants.SIYUAN_ASSETS_IMAGE).includes(suffix)
@@ -1372,7 +1376,7 @@ export const openMenuPanel = (options: {
                     /// #else
                     if (assetType === "image") {
                         previewAttrViewImages(assetLink, avID, options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW),
-                            (options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement)?.value.trim() || "");
+                            options.blockElement.querySelector('[data-type="av-search"]')?.textContent.trim() || "");
                     } else {
                         window.open(assetLink);
                     }

app/src/protyle/render/av/render.ts

@@ -257,7 +257,7 @@ export const getGroupTitleHTML = (group: IAVView, counter: number) => {
 };
 
 const renderGroupTable = (options: ITableOptions) => {
-    const searchInputElement = options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement;
+    const searchInputElement = options.blockElement.querySelector('[data-type="av-search"]');
     const isSearching = searchInputElement && document.activeElement === searchInputElement;
     const query = searchInputElement?.textContent || "";
 

app/src/protyle/render/av/row.ts

@@ -114,7 +114,7 @@ export const insertAttrViewBlockAnimation = (options: {
     previousId: string,
     groupID?: string
 }) => {
-    (options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement).value = "";
+    options.blockElement.querySelector('[data-type="av-search"]').textContent = "";
     const groupQuery = options.groupID ? `.av__body[data-group-id="${options.groupID}"] ` : "";
     let previousElement = options.blockElement.querySelector(groupQuery + `.av__row[data-id="${options.previousId}"]`) || options.blockElement.querySelector(groupQuery + ".av__row--header");
     // 有排序需要加入最后一行