diff --git a/app/src/assets/scss/business/_card.scss b/app/src/assets/scss/business/_card.scss index 012834f23..b7c5fec01 100644 --- a/app/src/assets/scss/business/_card.scss +++ b/app/src/assets/scss/business/_card.scss @@ -24,6 +24,7 @@ background-color: var(--b3-theme-background); font-size: 16px; align-items: center; + padding: 16px; & > div { font-size: 64px; diff --git a/app/src/card/openCard.ts b/app/src/card/openCard.ts index 9ba1db614..6685ae23b 100644 --- a/app/src/card/openCard.ts +++ b/app/src/card/openCard.ts @@ -104,6 +104,12 @@ export const openCardByData = (cardsData: { cards: ICard[], unreviewedCount: num `, width: isMobile() ? "100vw" : "80vw", height: isMobile() ? "100vh" : "70vh", + destroyCallback() { + if (editor) { + editor.destroy(); + window.siyuan.mobile.popEditor = null; + } + } }); (dialog.element.querySelector(".b3-dialog__scrim") as HTMLElement).style.backgroundColor = "var(--b3-theme-background)"; (dialog.element.querySelector(".b3-dialog__container") as HTMLElement).style.maxWidth = "1024px"; @@ -118,6 +124,7 @@ export const openCardByData = (cardsData: { cards: ICard[], unreviewedCount: num }, typewriterMode: false }); + window.siyuan.mobile.popEditor = editor; if (window.siyuan.config.editor.readOnly) { disabledProtyle(editor.protyle); } @@ -137,7 +144,7 @@ export const openCardByData = (cardsData: { cards: ICard[], unreviewedCount: num const selectElement = dialog.element.querySelector("select"); dialog.element.addEventListener("click", (event) => { const target = event.target as HTMLElement; - const titleElement = countElement.previousElementSibling; + const titleElement = countElement?.previousElementSibling; let type = ""; if (typeof event.detail === "string") { if (event.detail === "1" || event.detail === "j") { @@ -294,7 +301,7 @@ export const openCardByData = (cardsData: { cards: ICard[], unreviewedCount: num } selectElement.addEventListener("change", () => { fetchPost("/api/riff/getRiffDueCards", {deckID: selectElement.value}, (cardsChangeResponse) => { - blocks = cardsChangeResponse.data.blocks; + blocks = cardsChangeResponse.data.cards; index = 0; if (blocks.length > 0) { nextCard({ diff --git a/app/src/card/viewCards.ts b/app/src/card/viewCards.ts index 54ce6e0e4..a2692c34d 100644 --- a/app/src/card/viewCards.ts +++ b/app/src/card/viewCards.ts @@ -39,11 +39,12 @@ export const viewCards = (deckID: string, title: string, deckType: "Tree" | "" |
${window.siyuan.languages.emptyContent}
`, - width: isMobile() ? "98vw" : "80vw", - height: isMobile() ? "80vh" : "70vh", + width: isMobile() ? "100vw" : "80vw", + height: isMobile() ? "100vh" : "70vh", destroyCallback() { if (edit) { edit.destroy(); + window.siyuan.mobile.popEditor = null; } } }); @@ -57,6 +58,7 @@ export const viewCards = (deckID: string, title: string, deckType: "Tree" | "" | breadcrumbDocName: true }, }); + window.siyuan.mobile.popEditor = edit; if (window.siyuan.config.editor.readOnly) { disabledProtyle(edit.protyle); } diff --git a/app/src/mobile/editor.ts b/app/src/mobile/editor.ts index 9fcdf9a75..374103236 100644 --- a/app/src/mobile/editor.ts +++ b/app/src/mobile/editor.ts @@ -14,6 +14,10 @@ import {setStorageVal} from "../protyle/util/compatibility"; import {showMessage} from "../dialog/message"; import {saveScroll} from "../protyle/scroll/saveScroll"; +export const getCurrentEditor = () => { + return window.siyuan.mobile.popEditor || window.siyuan.mobile.editor; +} + export const openMobileFileById = (id: string, action = [Constants.CB_GET_HL]) => { window.siyuan.storage[Constants.LOCAL_DOCINFO] = {id, action}; setStorageVal(Constants.LOCAL_DOCINFO, window.siyuan.storage[Constants.LOCAL_DOCINFO]); diff --git a/app/src/mobile/util/keyboardToolbar.ts b/app/src/mobile/util/keyboardToolbar.ts index 9c92f383b..7326918e2 100644 --- a/app/src/mobile/util/keyboardToolbar.ts +++ b/app/src/mobile/util/keyboardToolbar.ts @@ -3,6 +3,7 @@ import {hasClosestBlock, hasClosestByClassName, hasClosestByMatchTag} from "../. import {moveToDown, moveToUp} from "../../protyle/wysiwyg/move"; import {Constants} from "../../constants"; import {focusByRange, getSelectionPosition} from "../../protyle/util/selection"; +import {getCurrentEditor} from "../editor"; let renderKeyboardToolbarTimeout: number; let showUtil = false; @@ -152,8 +153,11 @@ const showKeyboardToolbarUtil = (oldScrollTop: number) => { const toolbarElement = document.getElementById("keyboardToolbar"); let keyboardHeight = toolbarElement.getAttribute("data-keyboardheight"); keyboardHeight = (keyboardHeight ? (parseInt(keyboardHeight) + 42) : window.innerHeight / 2) + "px"; - window.siyuan.mobile.editor.protyle.element.style.marginBottom = keyboardHeight; - window.siyuan.mobile.editor.protyle.contentElement.scrollTop = oldScrollTop; + const editor = getCurrentEditor(); + if (editor) { + editor.protyle.element.parentElement.style.paddingBottom = keyboardHeight; + editor.protyle.contentElement.scrollTop = oldScrollTop; + } setTimeout(() => { toolbarElement.style.height = keyboardHeight; }, Constants.TIMEOUT_TRANSITION); // 防止抖动 @@ -165,7 +169,10 @@ const showKeyboardToolbarUtil = (oldScrollTop: number) => { const hideKeyboardToolbarUtil = () => { const toolbarElement = document.getElementById("keyboardToolbar"); toolbarElement.style.height = ""; - window.siyuan.mobile.editor.protyle.element.style.marginBottom = "42px"; + const editor = getCurrentEditor(); + if (editor) { + editor.protyle.element.parentElement.style.paddingBottom = "42px"; + } toolbarElement.querySelector('.keyboard__action[data-type="add"]').classList.remove("protyle-toolbar__item--current"); toolbarElement.querySelector('.keyboard__action[data-type="done"] use').setAttribute("xlink:href", "#iconKeyboardHide"); }; @@ -268,22 +275,23 @@ export const showKeyboardToolbar = () => { modelElement.style.paddingBottom = "42px"; } const range = getSelection().getRangeAt(0); - if (!window.siyuan.mobile.editor || - !window.siyuan.mobile.editor.protyle.wysiwyg.element.contains(range.startContainer)) { - return; + const editor = getCurrentEditor(); + if (editor && editor.protyle.wysiwyg.element.contains(range.startContainer)) { + editor.protyle.element.parentElement.style.paddingBottom = "42px"; } - window.siyuan.mobile.editor.protyle.element.style.marginBottom = "42px"; setTimeout(() => { - const contentElement = window.siyuan.mobile.editor.protyle.contentElement; - const cursorTop = getSelectionPosition(contentElement).top - contentElement.getBoundingClientRect().top; - if (cursorTop < window.innerHeight - 96) { - return; + const contentElement = hasClosestByClassName(range.startContainer, "protyle-content", true); + if (contentElement) { + const cursorTop = getSelectionPosition(contentElement).top - contentElement.getBoundingClientRect().top; + if (cursorTop < window.innerHeight - 96) { + return; + } + contentElement.scroll({ + top: contentElement.scrollTop + cursorTop - ((window.outerHeight - 65) / 2 - 30), + left: contentElement.scrollLeft, + behavior: "smooth" + }); } - contentElement.scroll({ - top: contentElement.scrollTop + cursorTop - ((window.outerHeight - 65) / 2 - 30), - left: contentElement.scrollLeft, - behavior: "smooth" - }); }, Constants.TIMEOUT_TRANSITION); }; @@ -294,7 +302,10 @@ export const hideKeyboardToolbar = () => { const toolbarElement = document.getElementById("keyboardToolbar"); toolbarElement.classList.add("fn__none"); toolbarElement.style.height = ""; - window.siyuan.mobile.editor.protyle.element.style.marginBottom = ""; + const editor = getCurrentEditor(); + if (editor) { + editor.protyle.element.parentElement.style.paddingBottom = ""; + } const modelElement = document.getElementById("model"); if (modelElement.style.transform === "translateY(0px)") { modelElement.style.paddingBottom = ""; diff --git a/app/src/types/index.d.ts b/app/src/types/index.d.ts index b1975ff06..15bc63d99 100644 --- a/app/src/types/index.d.ts +++ b/app/src/types/index.d.ts @@ -198,6 +198,7 @@ interface ISiyuan { backStack?: IBackStack[], mobile?: { editor?: import("../protyle").Protyle + popEditor?: import("../protyle").Protyle files?: import("../mobile/util/MobileFiles").MobileFiles }, user?: {