-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ toolbarElement.innerHTML = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
`;
+
`;
toolbarElement.addEventListener("click", (event) => {
const target = event.target as HTMLElement;
const buttonElement = hasClosestByMatchTag(target, "BUTTON");
@@ -150,6 +182,7 @@ export const initKeyboardToolbar = () => {
const type = buttonElement.getAttribute("data-type");
if (type === "done") {
hideKeyboard();
+ hideKeyboardToolbar();
return;
}
if (window.siyuan.config.readonly || window.siyuan.config.editor.readOnly || !window.siyuan.mobile.editor) {
@@ -203,8 +236,16 @@ export const initKeyboardToolbar = () => {
} else if (type === "add") {
protyle.hint.splitChar = "/";
protyle.hint.lastIndex = -1;
- protyle.hint.genHTML(hintSlash("", protyle), protyle);
- focusByRange(range);
+ const utilElement = toolbarElement.querySelector(".keyboard__util") as HTMLElement
+ utilElement.innerHTML = protyle.hint.getHTMLByData(hintSlash("", protyle), false)
+ protyle.hint.bindUploadEvent(protyle, utilElement);
+ utilElement.addEventListener("click", (event) => {
+ const btnElement = hasClosestByClassName(event.target as HTMLElement, "b3-list-item");
+ if (btnElement) {
+ protyle.hint.fill(decodeURIComponent(btnElement.getAttribute("data-value")), protyle);
+ }
+ })
+ renderKeyboardToolbarUtil();
return;
} else if (type === "more") {
protyle.breadcrumb.showMenu(protyle, {
@@ -215,7 +256,7 @@ export const initKeyboardToolbar = () => {
return;
} else if (type === "block") {
protyle.gutter.renderMenu(protyle, nodeElement);
- window.siyuan.menus.menu.popup({x: 0, y:0}, true);
+ window.siyuan.menus.menu.popup({x: 0, y: 0}, true);
focusByRange(range);
return;
} else if (type === "outdent") {
diff --git a/app/src/protyle/hint/index.ts b/app/src/protyle/hint/index.ts
index 4097e9fc7..319955bcf 100644
--- a/app/src/protyle/hint/index.ts
+++ b/app/src/protyle/hint/index.ts
@@ -202,14 +202,25 @@ ${unicode2Emoji(emoji.unicode, true)}`;
}
}
- public genHTML(data: IHintData[], protyle: IProtyle, hide = false, hasSearch = false) {
- if (data.length === 0) {
- if (!this.element.querySelector(".fn__loading") || hide) {
- this.element.classList.add("fn__none");
- }
- return;
+ public bindUploadEvent (protyle:IProtyle, element:HTMLElement) {
+ const uploadElement = element.querySelector('input[type="file"]');
+ if (uploadElement) {
+ uploadElement.addEventListener("change", (event: InputEvent & { target: HTMLInputElement }) => {
+ if (event.target.files.length === 0) {
+ return;
+ }
+ const range = getEditorRange(protyle.wysiwyg.element);
+ if (this.lastIndex > -1) {
+ range.setStart(range.startContainer, this.lastIndex);
+ }
+ range.deleteContents();
+ uploadFiles(protyle, event.target.files, event.target);
+ hideElements(["hint", "toolbar"], protyle);
+ });
}
+ }
+ public getHTMLByData(data: IHintData[], hasSearch = false) {
let hintsHTML = "";
if (hasSearch) {
hintsHTML = '
';
@@ -234,7 +245,18 @@ ${unicode2Emoji(emoji.unicode, true)}`;
if (hasSearch) {
hintsHTML = hintsHTML + "
";
}
- this.element.innerHTML = hintsHTML;
+ return hintsHTML
+ }
+
+ public genHTML(data: IHintData[], protyle: IProtyle, hide = false, hasSearch = false) {
+ if (data.length === 0) {
+ if (!this.element.querySelector(".fn__loading") || hide) {
+ this.element.classList.add("fn__none");
+ }
+ return;
+ }
+
+ this.element.innerHTML = this.getHTMLByData(data, hasSearch);
this.element.classList.remove("fn__none");
// https://github.com/siyuan-note/siyuan/issues/4575
if (data[0].filter) {
@@ -246,21 +268,7 @@ ${unicode2Emoji(emoji.unicode, true)}`;
const textareaPosition = getSelectionPosition(protyle.wysiwyg.element);
setPosition(this.element, textareaPosition.left, textareaPosition.top + 26, 30);
this.element.scrollTop = 0;
- const uploadElement = this.element.querySelector('input[type="file"]');
- if (uploadElement) {
- uploadElement.addEventListener("change", (event: InputEvent & { target: HTMLInputElement }) => {
- if (event.target.files.length === 0) {
- return;
- }
- const range = getEditorRange(protyle.wysiwyg.element);
- if (this.lastIndex > -1) {
- range.setStart(range.startContainer, this.lastIndex);
- }
- range.deleteContents();
- uploadFiles(protyle, event.target.files, event.target);
- hideElements(["hint", "toolbar"], protyle);
- });
- }
+ this.bindUploadEvent(protyle, this.element);
if (hasSearch) {
const searchElement = this.element.querySelector("input.b3-text-field") as HTMLInputElement;
const oldValue = this.element.querySelector("mark")?.textContent || "";
diff --git a/app/src/types/index.d.ts b/app/src/types/index.d.ts
index 10cc8a085..d75e54dc9 100644
--- a/app/src/types/index.d.ts
+++ b/app/src/types/index.d.ts
@@ -49,7 +49,7 @@ interface Window {
goBack(): void
- showKeyboardToolbar(bottom?: number): void
+ showKeyboardToolbar(bottom: number, height: number): void
hideKeyboardToolbar(): void