diff --git a/app/src/mobile/util/keyboardToolbar.ts b/app/src/mobile/util/keyboardToolbar.ts
index 50cb2c13a..9440849aa 100644
--- a/app/src/mobile/util/keyboardToolbar.ts
+++ b/app/src/mobile/util/keyboardToolbar.ts
@@ -1,17 +1,12 @@
import {listIndent, listOutdent} from "../../protyle/wysiwyg/list";
-import {hasClosestBlock, hasClosestByMatchTag} from "../../protyle/util/hasClosest";
+import {hasClosestBlock, hasClosestByClassName, hasClosestByMatchTag} from "../../protyle/util/hasClosest";
import {insertEmptyBlock} from "../../block/util";
import {moveToDown, moveToUp} from "../../protyle/wysiwyg/move";
import {Constants} from "../../constants";
import {focusByRange, getSelectionPosition} from "../../protyle/util/selection";
export const showKeyboardToolbar = (bottom = 0) => {
- if (getSelection().rangeCount === 0) {
- return;
- }
- const range = getSelection().getRangeAt(0);
- if (!window.siyuan.mobile.editor ||
- !window.siyuan.mobile.editor.protyle.wysiwyg.element.contains(range.startContainer)) {
+ if (getSelection().rangeCount === 0 || window.siyuan.config.editor.readOnly || window.siyuan.config.readonly) {
return;
}
const toolbarElement = document.getElementById("keyboardToolbar");
@@ -21,6 +16,11 @@ export const showKeyboardToolbar = (bottom = 0) => {
toolbarElement.classList.remove("fn__none");
toolbarElement.style.bottom = bottom + "px";
+ const range = getSelection().getRangeAt(0);
+ if (!window.siyuan.mobile.editor ||
+ !window.siyuan.mobile.editor.protyle.wysiwyg.element.contains(range.startContainer)) {
+ return;
+ }
setTimeout(() => {
const contentElement = window.siyuan.mobile.editor.protyle.contentElement;
const cursorTop = getSelectionPosition(contentElement).top - contentElement.getBoundingClientRect().top;
@@ -35,28 +35,17 @@ export const showKeyboardToolbar = (bottom = 0) => {
}, Constants.TIMEOUT_TRANSITION);
};
-export const renderKeyboardToolbar = (protyle: IProtyle, range: Range) => {
- const toolbarElement = document.getElementById("keyboardToolbar");
- const inlineHTML = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;
- const html = `
+let renderKeyboardToolbarTimeout: number;
+export const renderKeyboardToolbar = () => {
+ clearTimeout(renderKeyboardToolbarTimeout)
+ renderKeyboardToolbarTimeout = window.setTimeout(() => {
+ if (getSelection().rangeCount === 0 || window.siyuan.config.editor.readOnly || window.siyuan.config.readonly) {
+ return;
+ }
+ const range = getSelection().getRangeAt(0);
+ let html = ""
+ if (hasClosestByClassName(range.startContainer, "protyle-wysiwyg", true)) {
+ html = `
@@ -70,12 +59,36 @@ export const renderKeyboardToolbar = (protyle: IProtyle, range: Range) => {
`;
- toolbarElement.innerHTML = `
-
${html}
-
${inlineHTML}
+ }
+ const selectText = range.toString();
+ console.log(range)
+ document.getElementById("keyboardToolbar").innerHTML = `
+
${html}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`;
+ }, 620) // 需等待 range 更新
};
export const hideKeyboardToolbar = () => {
@@ -87,29 +100,10 @@ export const hideKeyboard = () => {
(document.activeElement as HTMLElement).blur();
};
-const disabledKeyboardToolbar = () => {
- document.querySelectorAll("#keyboardToolbar button").forEach(item => {
- if (item.getAttribute("data-type") !== "all") {
- item.setAttribute("disabled", "disabled");
- }
- });
-};
-
-const enKeyboardToolbar = () => {
- document.querySelectorAll("#keyboardToolbar button").forEach(item => {
- item.removeAttribute("disabled");
- });
-};
-
export const initKeyboardToolbar = () => {
- window.addEventListener("focus", (event) => {
- const target = event.target as HTMLElement;
- if (["INPUT", "TEXTAREA"].includes(target.tagName)) {
- disabledKeyboardToolbar();
- } else if (target.classList.contains("protyle-wysiwyg")) {
- enKeyboardToolbar();
- }
- }, true);
+ document.addEventListener("selectionchange", () => {
+ renderKeyboardToolbar()
+ }, false);
const toolbarElement = document.getElementById("keyboardToolbar");
toolbarElement.addEventListener("click", (event) => {
diff --git a/app/src/protyle/toolbar/index.ts b/app/src/protyle/toolbar/index.ts
index 4c02db5ee..e512e028c 100644
--- a/app/src/protyle/toolbar/index.ts
+++ b/app/src/protyle/toolbar/index.ts
@@ -68,7 +68,7 @@ export class Toolbar {
public render(protyle: IProtyle, range: Range, event?: KeyboardEvent) {
this.range = range;
let nodeElement = hasClosestBlock(range.startContainer);
- if (!nodeElement || protyle.disabled) {
+ if (isMobile() || !nodeElement || protyle.disabled) {
this.element.classList.add("fn__none");
return;
}
diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts
index c8f08896d..8ea603f5c 100644
--- a/app/src/protyle/wysiwyg/index.ts
+++ b/app/src/protyle/wysiwyg/index.ts
@@ -51,8 +51,6 @@ import {getAllModels} from "../../layout/getAll";
import {pushBack} from "../../util/backForward";
import {openAsset, openBy, openFileById} from "../../editor/util";
import {openGlobalSearch} from "../../search/util";
-/// #else
-import {renderKeyboardToolbar} from "../../mobile/util/keyboardToolbar";
/// #endif
import {BlockPanel} from "../../block/Panel";
import {isCtrl, openByMobile} from "../util/compatibility";
@@ -1902,8 +1900,6 @@ export class WYSIWYG {
} else {
hideElements(["toolbar"], protyle);
}
- /// #else
- renderKeyboardToolbar(protyle, newRange);
/// #endif
if (!protyle.wysiwyg.element.querySelector(".protyle-wysiwyg--select")) {
countSelectWord(newRange, protyle.block.rootID);