diff --git a/app/src/assets/scss/mobile.scss b/app/src/assets/scss/mobile.scss
index 44b355bd4..59884d169 100644
--- a/app/src/assets/scss/mobile.scss
+++ b/app/src/assets/scss/mobile.scss
@@ -281,6 +281,7 @@
&__util {
flex: 1;
overflow: auto;
+ background-color: var(--b3-theme-surface);
}
&__split {
@@ -318,6 +319,44 @@
}
}
}
+
+ &__slash {
+ &-title {
+ font-size: 12px;
+ color: var(--b3-theme-on-surface);
+ line-height: 12px;
+ padding: 8px;
+ }
+
+ &-block {
+ display: flex;
+ padding: 0px 0 8px 8px;
+ }
+
+ &-item {
+ background-color: var(--b3-theme-background);
+ border-radius: 8px;
+ flex: 1;
+ display: flex;
+ align-items: center;
+ margin-right: 8px;
+ box-shadow: inset 0 0 0 .4px var(--b3-theme-on-surface-light);
+ }
+
+ &-empty {
+ flex: 1;
+ margin-right: 8px;
+ }
+
+ &-icon {
+ height: 24px;
+ width: 24px;
+ padding: 6px;
+ flex-shrink: 0;
+ margin: 6px 4px;
+ color: var(--b3-theme-on-surface);
+ }
+ }
}
.svg {
diff --git a/app/src/mobile/util/keyboardToolbar.ts b/app/src/mobile/util/keyboardToolbar.ts
index a4071a457..526fd8157 100644
--- a/app/src/mobile/util/keyboardToolbar.ts
+++ b/app/src/mobile/util/keyboardToolbar.ts
@@ -3,16 +3,43 @@ import {hasClosestBlock, hasClosestByClassName, hasClosestByMatchTag} from "../.
import {moveToDown, moveToUp} from "../../protyle/wysiwyg/move";
import {Constants} from "../../constants";
import {focusByRange, getSelectionPosition} from "../../protyle/util/selection";
-import {hintSlash} from "../../protyle/hint/extend";
let renderKeyboardToolbarTimeout: number;
let showKeyboardToolbarUtil = false;
+const getSlashItem = (value: string, icon: string, text:string) => {
+ return `
+
+ ${text}
+
`
+}
+
const renderSlashMenu = (protyle: IProtyle, toolbarElement: Element) => {
protyle.hint.splitChar = "/";
protyle.hint.lastIndex = -1;
const utilElement = toolbarElement.querySelector(".keyboard__util") as HTMLElement;
- utilElement.innerHTML = protyle.hint.getHTMLByData(hintSlash("", protyle), false);
+ utilElement.innerHTML = `
+${window.siyuan.languages.general}
+
+
+ ${getSlashItem(Constants.ZWSP, "iconMarkdown", window.siyuan.languages.template)}
+ ${getSlashItem(Constants.ZWSP + 1, "iconBoth", window.siyuan.languages.widget)}
+
+
+ ${getSlashItem(Constants.ZWSP + 2, "iconImage", window.siyuan.languages.assets)}
+ ${getSlashItem(Constants.ZWSP + 3, "iconRef", window.siyuan.languages.blockRef)}
+
+
+ ${getSlashItem("{{", "iconSQL", window.siyuan.languages.blockEmbed)}
+ ${getSlashItem(Constants.ZWSP + 5, "iconSparkles", "AI Chat")}
+
+
+ ${getSlashItem(Constants.ZWSP + 4, "iconFile", window.siyuan.languages.newFile)}
+
+
+common
+
`;
protyle.hint.bindUploadEvent(protyle, utilElement);
};
@@ -201,7 +228,7 @@ export const initKeyboardToolbar = () => {
`;
toolbarElement.addEventListener("click", (event) => {
const target = event.target as HTMLElement;
- const slashBtnElement = hasClosestByClassName(event.target as HTMLElement, "b3-list-item");
+ const slashBtnElement = hasClosestByClassName(event.target as HTMLElement, "keyboard__slash-item");
const protyle = window.siyuan.mobile.editor.protyle;
if (slashBtnElement) {
protyle.hint.fill(decodeURIComponent(slashBtnElement.getAttribute("data-value")), protyle);
diff --git a/app/src/protyle/hint/extend.ts b/app/src/protyle/hint/extend.ts
index c08ff67e7..8e3ab71f0 100644
--- a/app/src/protyle/hint/extend.ts
+++ b/app/src/protyle/hint/extend.ts
@@ -23,7 +23,11 @@ export const hintSlash = (key: string, protyle: IProtyle) => {
const allList: IHintData[] = [{
filter: ["模版", "moban", "mb", "template"],
value: Constants.ZWSP,
- html: `${window.siyuan.languages.template}
`,
+ html: `${window.siyuan.languages.template}
`,
+ }, {
+ filter: ["挂件", "widget", "gj", "guajian"],
+ value: Constants.ZWSP + 1,
+ html: `${window.siyuan.languages.widget}
`,
}, {
filter: ["资源", "assets", "zy", "ziyuan"],
value: Constants.ZWSP + 2,
@@ -41,11 +45,11 @@ export const hintSlash = (key: string, protyle: IProtyle) => {
value: Constants.ZWSP + 5,
html: 'AI Chat
',
},
- // {
- // filter: ["属性视图", "shuxingshitu", "sxst", "attribute view"],
- // value: '',
- // html: `${window.siyuan.languages.attributeView}
`,
- // },
+ {
+ filter: ["属性视图", "shuxingshitu", "sxst", "attribute view"],
+ value: '',
+ html: `${window.siyuan.languages.attributeView}
`,
+ },
{
filter: ["文档", "子文档", "wendang", "wd", "ziwendang", "zwd", "xjwd"],
value: Constants.ZWSP + 4,
@@ -80,11 +84,11 @@ export const hintSlash = (key: string, protyle: IProtyle) => {
}, {
filter: ["无序列表", "wuxuliebiao", "wxlb", "unordered list"],
value: "* " + Lute.Caret,
- html: `${window.siyuan.languages.list}
`,
+ html: `${window.siyuan.languages.list}*
`,
}, {
filter: ["有序列表", "youxuliebiao", "yxlb", "ordered list"],
value: "1. " + Lute.Caret,
- html: `${window.siyuan.languages["ordered-list"]}
`,
+ html: `${window.siyuan.languages["ordered-list"]}1.
`,
}, {
filter: ["任务列表", "renwuliebiao", "rwlb", "task list", "todo list"],
value: "* [ ] " + Lute.Caret,
@@ -92,11 +96,11 @@ export const hintSlash = (key: string, protyle: IProtyle) => {
}, {
filter: ["引述", "yinshu", "ys", "bq", "blockquote"],
value: "> " + Lute.Caret,
- html: `${window.siyuan.languages.quote}
`,
+ html: `${window.siyuan.languages.quote}>
`,
}, {
filter: ["代码块", "daimakuai", "dmk", "code block"],
value: "```",
- html: `${window.siyuan.languages.code}
`,
+ html: `${window.siyuan.languages.code}\`\`\`Enter
`,
}, {
filter: ["表格", "biaoge", "bg", "table"],
value: `| ${Lute.Caret} | | |\n| --- | --- | --- |\n| | | |\n| | | |`,
@@ -104,7 +108,7 @@ export const hintSlash = (key: string, protyle: IProtyle) => {
}, {
filter: ["分割线", "fengexian", "fgx", "divider"],
value: "---",
- html: `${window.siyuan.languages.line}
`,
+ html: `${window.siyuan.languages.line}---
`,
}, {
filter: ["数学公式块", "shuxuegongshikuai", "sxgsk", "math block"],
value: "$$",
@@ -119,7 +123,7 @@ export const hintSlash = (key: string, protyle: IProtyle) => {
}, {
filter: ["表情", "biaoqing", "bq", "emoji"],
value: "emoji",
- html: `${window.siyuan.languages.emoji}
`,
+ html: `${window.siyuan.languages.emoji}:
`,
}, {
filter: ["链接", "lianjie", "lj", "link", "a"],
value: "a",
@@ -243,11 +247,6 @@ export const hintSlash = (key: string, protyle: IProtyle) => {
value: `style${Constants.ZWSP}`,
html: `A
${window.siyuan.languages.clearFontStyle}${window.siyuan.languages.widget}
`,
- });
if (key === "") {
return allList;
}