diff --git a/app/src/mobile/util/MobileBackFoward.ts b/app/src/mobile/util/MobileBackFoward.ts
index 00b413748..8b667c99d 100644
--- a/app/src/mobile/util/MobileBackFoward.ts
+++ b/app/src/mobile/util/MobileBackFoward.ts
@@ -135,6 +135,10 @@ export const goBack = () => {
document.getElementById("sidebar").style.transform === "translateX(0px)") {
closePanel();
return;
+ } else if (window.siyuan.mobile.editor && !window.siyuan.mobile.editor.protyle.toolbar.subElement.classList.contains("fn__none")) {
+ hideElements(["util"], window.siyuan.mobile.editor.protyle);
+ closePanel();
+ return;
}
if (window.JSAndroid && window.siyuan.backStack.length < 1) {
if (document.querySelector('#message [data-id="exitTip"]')) {
diff --git a/app/src/mobile/util/touch.ts b/app/src/mobile/util/touch.ts
index 9c3cbdd51..253973814 100644
--- a/app/src/mobile/util/touch.ts
+++ b/app/src/mobile/util/touch.ts
@@ -32,6 +32,7 @@ export const handleTouchEnd = (event: TouchEvent) => {
const target = event.target as HTMLElement;
if (!clientX || !clientY || typeof yDiff === "undefined" ||
target.tagName === "AUDIO" ||
+ (window.siyuan.mobile.editor && !window.siyuan.mobile.editor.protyle.toolbar.subElement.classList.contains("fn__none")) ||
hasClosestByClassName(target, "viewer-container") ||
hasClosestByClassName(target, "b3-dialog") ||
hasClosestByClassName(target, "keyboard") ||
@@ -157,6 +158,7 @@ export const handleTouchMove = (event: TouchEvent) => {
const target = event.target as HTMLElement;
if (!clientX || !clientY ||
target.tagName === "AUDIO" ||
+ (window.siyuan.mobile.editor && !window.siyuan.mobile.editor.protyle.toolbar.subElement.classList.contains("fn__none")) ||
hasClosestByClassName(target, "b3-dialog") ||
hasClosestByClassName(target, "keyboard") ||
hasClosestByClassName(target, "viewer-container") ||
diff --git a/app/src/protyle/toolbar/index.ts b/app/src/protyle/toolbar/index.ts
index 1376f0361..818d895ae 100644
--- a/app/src/protyle/toolbar/index.ts
+++ b/app/src/protyle/toolbar/index.ts
@@ -1340,6 +1340,154 @@ export class Toolbar {
this.range = range;
hideElements(["hint"], protyle);
window.siyuan.menus.menu.remove();
+ this.subElement.style.width = "";
+ this.subElement.style.padding = "";
+ this.subElement.innerHTML = ``;
+ const listElement = this.subElement.querySelector(".b3-list");
+ const previewElement = this.subElement.firstElementChild.lastElementChild;
+ let previewPath = listElement.firstElementChild.getAttribute("data-value");
+ previewTemplate(previewPath, previewElement, protyle.block.parentID);
+ listElement.addEventListener("mouseover", (event) => {
+ const target = event.target as HTMLElement;
+ const hoverItemElement = hasClosestByClassName(target, "b3-list-item");
+ if (!hoverItemElement) {
+ return;
+ }
+ const currentPath = hoverItemElement.getAttribute("data-value");
+ if (previewPath === currentPath) {
+ return;
+ }
+ previewPath = currentPath;
+ previewTemplate(previewPath, previewElement, protyle.block.parentID);
+ });
+ 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");
+ if (!isEmpty) {
+ const currentElement = upDownHint(listElement, event);
+ if (currentElement) {
+ const currentPath = currentElement.getAttribute("data-value");
+ if (previewPath === currentPath) {
+ return;
+ }
+ previewPath = currentPath;
+ previewTemplate(previewPath, previewElement, protyle.block.parentID);
+ }
+ }
+ if (event.key === "Enter") {
+ if (!isEmpty) {
+ hintRenderTemplate(decodeURIComponent(this.subElement.querySelector(".b3-list-item--focus").getAttribute("data-value")), protyle, nodeElement);
+ } else {
+ focusByRange(this.range);
+ }
+ this.subElement.classList.add("fn__none");
+ event.preventDefault();
+ } else if (event.key === "Escape") {
+ this.subElement.classList.add("fn__none");
+ focusByRange(this.range);
+ }
+ });
+ inputElement.addEventListener("input", (event) => {
+ event.stopPropagation();
+ fetchPost("/api/search/searchTemplate", {
+ k: inputElement.value,
+ }, (response) => {
+ let searchHTML = "";
+ response.data.blocks.forEach((item: { path: string, content: string }, index: number) => {
+ searchHTML += `${item.content}
`;
+ });
+ listElement.innerHTML = searchHTML || `${window.siyuan.languages.emptyContent}`;
+ const currentPath = response.data.blocks[0]?.path;
+ if (previewPath === currentPath) {
+ return;
+ }
+ previewPath = currentPath;
+ previewTemplate(previewPath, previewElement, protyle.block.parentID);
+ });
+ });
+ this.subElement.lastElementChild.addEventListener("click", (event) => {
+ const target = event.target as HTMLElement;
+ if (target.classList.contains("b3-list--empty")) {
+ this.subElement.classList.add("fn__none");
+ focusByRange(this.range);
+ event.stopPropagation();
+ return;
+ }
+ const iconElement = hasClosestByClassName(target, "b3-list-item__action");
+ /// #if !BROWSER
+ if (iconElement && iconElement.getAttribute("data-type") === "open") {
+ openBy(iconElement.parentElement.getAttribute("data-value"), "folder");
+ event.stopPropagation();
+ return;
+ }
+ /// #endif
+ if (iconElement && iconElement.getAttribute("data-type") === "remove") {
+ confirmDialog(window.siyuan.languages.remove, window.siyuan.languages.confirmDelete + "?", () => {
+ fetchPost("/api/search/removeTemplate", {path: iconElement.parentElement.getAttribute("data-value")}, () => {
+ if (iconElement.parentElement.parentElement.childElementCount === 1) {
+ iconElement.parentElement.parentElement.innerHTML = `${window.siyuan.languages.emptyContent}`;
+ previewTemplate("", previewElement, protyle.block.parentID);
+ } else {
+ if (iconElement.parentElement.classList.contains("b3-list-item--focus")) {
+ const sideElement = iconElement.parentElement.previousElementSibling || iconElement.parentElement.nextElementSibling;
+ sideElement.classList.add("b3-list-item--focus");
+ const currentPath = sideElement.getAttribute("data-value");
+ if (previewPath === currentPath) {
+ return;
+ }
+ previewPath = currentPath;
+ previewTemplate(previewPath, previewElement, protyle.block.parentID);
+ }
+ iconElement.parentElement.remove();
+ }
+ });
+ });
+ event.stopPropagation();
+ return;
+ }
+ const previousElement = hasClosestByAttribute(target, "data-type", "previous");
+ if (previousElement) {
+ inputElement.dispatchEvent(new KeyboardEvent("keydown", {key: "ArrowUp"}));
+ event.stopPropagation();
+ return;
+ }
+ const nextElement = hasClosestByAttribute(target, "data-type", "next");
+ if (nextElement) {
+ inputElement.dispatchEvent(new KeyboardEvent("keydown", {key: "ArrowDown"}));
+ event.stopPropagation();
+ return;
+ }
+ const listElement = hasClosestByClassName(target, "b3-list-item");
+ if (listElement) {
+ hintRenderTemplate(decodeURIComponent(listElement.getAttribute("data-value")), protyle, nodeElement);
+ event.stopPropagation();
+ }
+ });
+ 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);
+ (this.subElement.firstElementChild as HTMLElement).style.maxHeight = Math.min(window.innerHeight * 0.8, window.innerHeight - this.subElement.getBoundingClientRect().top) - 16 + "px";
+ /// #endif
+ this.element.classList.add("fn__none");
+ inputElement.select();
fetchPost("/api/search/searchTemplate", {
k: "",
}, (response) => {
@@ -1359,154 +1507,7 @@ export class Toolbar {
if (html === "") {
html = `${window.siyuan.languages.emptyContent}`;
}
- this.subElement.style.width = "";
- this.subElement.style.padding = "";
- this.subElement.innerHTML = `
-
-
-
-
-
-
-
-
-
${html}
-
-
-
${item.content}
`;
- });
- listElement.innerHTML = searchHTML || `${window.siyuan.languages.emptyContent}`;
- const currentPath = response.data.blocks[0]?.path;
- if (previewPath === currentPath) {
- return;
- }
- previewPath = currentPath;
- previewTemplate(previewPath, previewElement, protyle.block.parentID);
- });
- });
- this.subElement.lastElementChild.addEventListener("click", (event) => {
- const target = event.target as HTMLElement;
- if (target.classList.contains("b3-list--empty")) {
- this.subElement.classList.add("fn__none");
- focusByRange(this.range);
- event.stopPropagation();
- return;
- }
- const iconElement = hasClosestByClassName(target, "b3-list-item__action");
- /// #if !BROWSER
- if (iconElement && iconElement.getAttribute("data-type") === "open") {
- openBy(iconElement.parentElement.getAttribute("data-value"), "folder");
- event.stopPropagation();
- return;
- }
- /// #endif
- if (iconElement && iconElement.getAttribute("data-type") === "remove") {
- confirmDialog(window.siyuan.languages.remove, window.siyuan.languages.confirmDelete + "?", () => {
- fetchPost("/api/search/removeTemplate", {path: iconElement.parentElement.getAttribute("data-value")}, () => {
- if (iconElement.parentElement.parentElement.childElementCount === 1) {
- iconElement.parentElement.parentElement.innerHTML = `${window.siyuan.languages.emptyContent}`;
- previewTemplate("", previewElement, protyle.block.parentID);
- } else {
- if (iconElement.parentElement.classList.contains("b3-list-item--focus")) {
- const sideElement = iconElement.parentElement.previousElementSibling || iconElement.parentElement.nextElementSibling;
- sideElement.classList.add("b3-list-item--focus");
- const currentPath = sideElement.getAttribute("data-value");
- if (previewPath === currentPath) {
- return;
- }
- previewPath = currentPath;
- previewTemplate(previewPath, previewElement, protyle.block.parentID);
- }
- iconElement.parentElement.remove();
- }
- });
- });
- event.stopPropagation();
- return;
- }
- const previousElement = hasClosestByAttribute(target, "data-type", "previous");
- if (previousElement) {
- inputElement.dispatchEvent(new KeyboardEvent("keydown", {key: "ArrowUp"}));
- event.stopPropagation();
- return;
- }
- const nextElement = hasClosestByAttribute(target, "data-type", "next");
- if (nextElement) {
- inputElement.dispatchEvent(new KeyboardEvent("keydown", {key: "ArrowDown"}));
- event.stopPropagation();
- return;
- }
- const listElement = hasClosestByClassName(target, "b3-list-item");
- if (listElement) {
- hintRenderTemplate(decodeURIComponent(listElement.getAttribute("data-value")), protyle, nodeElement);
- event.stopPropagation();
- }
- });
- 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);
- (this.subElement.firstElementChild as HTMLElement).style.maxHeight = Math.min(window.innerHeight * 0.8, window.innerHeight - this.subElement.getBoundingClientRect().top) - 16 + "px";
- /// #endif
- this.element.classList.add("fn__none");
- inputElement.select();
+ this.subElement.querySelector(".b3-list--background").innerHTML = html;
});
}
@@ -1514,6 +1515,56 @@ export class Toolbar {
this.range = range;
hideElements(["hint"], protyle);
window.siyuan.menus.menu.remove();
+ this.subElement.style.width = "";
+ this.subElement.style.padding = "";
+ this.subElement.innerHTML = ``;
+
+ const inputElement = this.subElement.querySelector("input");
+ inputElement.addEventListener("keydown", (event: KeyboardEvent) => {
+ event.stopPropagation();
+ if (event.isComposing) {
+ return;
+ }
+ upDownHint(this.subElement.lastElementChild.lastElementChild as HTMLElement, event);
+ if (event.key === "Enter") {
+ hintRenderWidget(this.subElement.querySelector(".b3-list-item--focus").textContent, protyle);
+ this.subElement.classList.add("fn__none");
+ event.preventDefault();
+ } else if (event.key === "Escape") {
+ this.subElement.classList.add("fn__none");
+ focusByRange(this.range);
+ }
+ });
+ inputElement.addEventListener("input", (event) => {
+ event.stopPropagation();
+ fetchPost("/api/search/searchWidget", {
+ k: inputElement.value,
+ }, (response) => {
+ let searchHTML = "";
+ response.data.blocks.forEach((item: { path: string, content: string }, index: number) => {
+ searchHTML += `${item.content}
`;
+ });
+ this.subElement.firstElementChild.lastElementChild.innerHTML = searchHTML;
+ });
+ });
+ this.subElement.lastElementChild.addEventListener("click", (event) => {
+ const target = event.target as HTMLElement;
+ const listElement = hasClosestByClassName(target, "b3-list-item");
+ if (!listElement) {
+ return;
+ }
+ hintRenderWidget(listElement.textContent, protyle);
+ });
+ 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);
+ /// #endif
+ this.element.classList.add("fn__none");
+ inputElement.select();
fetchPost("/api/search/searchWidget", {
k: "",
}, (response) => {
@@ -1521,56 +1572,7 @@ export class Toolbar {
response.data.blocks.forEach((item: { content: string }, index: number) => {
html += `${item.content}
`;
});
- this.subElement.style.width = "";
- this.subElement.style.padding = "";
- this.subElement.innerHTML = ``;
-
- const inputElement = this.subElement.querySelector("input");
- inputElement.addEventListener("keydown", (event: KeyboardEvent) => {
- event.stopPropagation();
- if (event.isComposing) {
- return;
- }
- upDownHint(this.subElement.lastElementChild.lastElementChild as HTMLElement, event);
- if (event.key === "Enter") {
- hintRenderWidget(this.subElement.querySelector(".b3-list-item--focus").textContent, protyle);
- this.subElement.classList.add("fn__none");
- event.preventDefault();
- } else if (event.key === "Escape") {
- this.subElement.classList.add("fn__none");
- focusByRange(this.range);
- }
- });
- inputElement.addEventListener("input", (event) => {
- event.stopPropagation();
- fetchPost("/api/search/searchWidget", {
- k: inputElement.value,
- }, (response) => {
- let searchHTML = "";
- response.data.blocks.forEach((item: { path: string, content: string }, index: number) => {
- searchHTML += `${item.content}
`;
- });
- this.subElement.firstElementChild.lastElementChild.innerHTML = searchHTML;
- });
- });
- this.subElement.lastElementChild.addEventListener("click", (event) => {
- const target = event.target as HTMLElement;
- const listElement = hasClosestByClassName(target, "b3-list-item");
- if (!listElement) {
- return;
- }
- hintRenderWidget(listElement.textContent, protyle);
- });
- 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);
- /// #endif
- this.element.classList.add("fn__none");
- inputElement.select();
+ this.subElement.querySelector(".b3-list--background").innerHTML = html;
});
}
@@ -1578,6 +1580,107 @@ export class Toolbar {
this.range = range;
hideElements(["hint"], protyle);
window.siyuan.menus.menu.remove();
+ this.subElement.style.width = "";
+ this.subElement.style.padding = "";
+ this.subElement.innerHTML = ``;
+ const listElement = this.subElement.querySelector(".b3-list");
+ listElement.addEventListener("mouseover", (event) => {
+ const target = event.target as HTMLElement;
+ const hoverItemElement = hasClosestByClassName(target, "b3-list-item");
+ if (!hoverItemElement) {
+ return;
+ }
+ 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");
+ if (!isEmpty) {
+ const currentElement = upDownHint(listElement, event);
+ if (currentElement) {
+ previewElement.innerHTML = renderAssetsPreview(currentElement.getAttribute("data-value"));
+ }
+ }
+
+ if (event.key === "Enter") {
+ if (!isEmpty) {
+ hintRenderAssets(this.subElement.querySelector(".b3-list-item--focus").getAttribute("data-value"), protyle);
+ } else {
+ 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);
+ }
+ });
+ 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 += `${item.hName}
`;
+ });
+ listElement.innerHTML = searchHTML || `${window.siyuan.languages.emptyContent}`;
+ previewElement.innerHTML = renderAssetsPreview(listElement.firstElementChild.getAttribute("data-value"));
+ });
+ });
+ this.subElement.lastElementChild.addEventListener("click", (event) => {
+ const target = event.target as HTMLElement;
+ const previousElement = hasClosestByAttribute(target, "data-type", "previous");
+ if (previousElement) {
+ inputElement.dispatchEvent(new KeyboardEvent("keydown", {key: "ArrowUp"}));
+ event.stopPropagation();
+ return;
+ }
+ const nextElement = hasClosestByAttribute(target, "data-type", "next");
+ if (nextElement) {
+ inputElement.dispatchEvent(new KeyboardEvent("keydown", {key: "ArrowDown"}));
+ event.stopPropagation();
+ return;
+ }
+ if (target.classList.contains("b3-list--empty")) {
+ this.subElement.classList.add("fn__none");
+ focusByRange(this.range);
+ event.stopPropagation();
+ return;
+ }
+ const listItemElement = hasClosestByClassName(target, "b3-list-item");
+ if (listItemElement) {
+ event.stopPropagation();
+ hintRenderAssets(listItemElement.getAttribute("data-value"), protyle);
+ }
+ });
+ 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);
+ /// #endif
+ this.element.classList.add("fn__none");
+ inputElement.select();
fetchPost("/api/search/searchAsset", {
k: "",
}, (response) => {
@@ -1588,107 +1691,7 @@ export class Toolbar {
if (html === "") {
html = `${window.siyuan.languages.emptyContent}`;
}
- this.subElement.style.width = "";
- this.subElement.style.padding = "";
- this.subElement.innerHTML = `
-
-
-
-
-
-
-
-
-
${html}
-
-
-
${item.hName}
`;
- });
- listElement.innerHTML = searchHTML || `${window.siyuan.languages.emptyContent}`;
- previewElement.innerHTML = renderAssetsPreview(listElement.firstElementChild.getAttribute("data-value"));
- });
- });
- this.subElement.lastElementChild.addEventListener("click", (event) => {
- const target = event.target as HTMLElement;
- const previousElement = hasClosestByAttribute(target, "data-type", "previous");
- if (previousElement) {
- inputElement.dispatchEvent(new KeyboardEvent("keydown", {key: "ArrowUp"}));
- event.stopPropagation();
- return;
- }
- const nextElement = hasClosestByAttribute(target, "data-type", "next");
- if (nextElement) {
- inputElement.dispatchEvent(new KeyboardEvent("keydown", {key: "ArrowDown"}));
- event.stopPropagation();
- return;
- }
- if (target.classList.contains("b3-list--empty")) {
- this.subElement.classList.add("fn__none");
- focusByRange(this.range);
- event.stopPropagation();
- return;
- }
- const listItemElement = hasClosestByClassName(target, "b3-list-item");
- if (listItemElement) {
- event.stopPropagation();
- hintRenderAssets(listItemElement.getAttribute("data-value"), protyle);
- }
- });
- 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);
- /// #endif
- this.element.classList.add("fn__none");
- inputElement.select();
+ this.subElement.querySelector(".b3-list--background").innerHTML = html;
});
}
}
diff --git a/app/src/protyle/util/onGet.ts b/app/src/protyle/util/onGet.ts
index c5b1a86c0..a7d0048bb 100644
--- a/app/src/protyle/util/onGet.ts
+++ b/app/src/protyle/util/onGet.ts
@@ -18,6 +18,7 @@ import {restoreScroll} from "../scroll/saveScroll";
import {removeLoading} from "../ui/initUI";
import {isMobile} from "../../util/functions";
import {foldPassiveType} from "../wysiwyg/renderBacklink";
+import {showMessage} from "../../dialog/message";
export const onGet = (data: IWebSocketData, protyle: IProtyle, action: string[] = [], scrollAttr?: IScrollAttr, renderTitle = false) => {
protyle.wysiwyg.element.removeAttribute("data-top");
@@ -294,8 +295,10 @@ const setHTML = (options: {
export const disabledForeverProtyle = (protyle: IProtyle) => {
disabledProtyle(protyle);
- if (protyle.breadcrumb) {
+ if (protyle.breadcrumb && !isMobile()) {
protyle.breadcrumb.element.nextElementSibling.textContent = window.siyuan.languages["_kernel"][81];
+ } else {
+ showMessage(window.siyuan.languages["_kernel"][81]);
}
protyle.element.setAttribute("disabled-forever", "true");
};
+