Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-21 00:50:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🎨 https://github.com/siyuan-note/siyuan/issues/7596

Browse source
This commit is contained in:
Vanessa 2023-04-01 15:04:27 +08:00
parent 0eeca37084
commit 65fa302e1f
3 changed files with 85 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

39
app/src/assets/scss/mobile.scss
View file

@ -281,6 +281,7 @@
&__util { &__util {
flex: 1; flex: 1;
overflow: auto; overflow: auto;
background-color: var(--b3-theme-surface);
} }
&__split { &__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 { .svg {

33
app/src/mobile/util/keyboardToolbar.ts
View file

@ -3,16 +3,43 @@ import {hasClosestBlock, hasClosestByClassName, hasClosestByMatchTag} from "../.
import {moveToDown, moveToUp} from "../../protyle/wysiwyg/move"; import {moveToDown, moveToUp} from "../../protyle/wysiwyg/move";
import {Constants} from "../../constants"; import {Constants} from "../../constants";
import {focusByRange, getSelectionPosition} from "../../protyle/util/selection"; import {focusByRange, getSelectionPosition} from "../../protyle/util/selection";
import {hintSlash} from "../../protyle/hint/extend";
let renderKeyboardToolbarTimeout: number; let renderKeyboardToolbarTimeout: number;
let showKeyboardToolbarUtil = false; let showKeyboardToolbarUtil = false;
const getSlashItem = (value: string, icon: string, text:string) => {
return `<div class="keyboard__slash-item" data-value="${value}">
<svg class="keyboard__slash-icon"><use xlink:href="#${icon}"></use></svg>
<span class="keyboard__slash-text">${text}</span>
</div>`
}
const renderSlashMenu = (protyle: IProtyle, toolbarElement: Element) => { const renderSlashMenu = (protyle: IProtyle, toolbarElement: Element) => {
protyle.hint.splitChar = "/"; protyle.hint.splitChar = "/";
protyle.hint.lastIndex = -1; protyle.hint.lastIndex = -1;
const utilElement = toolbarElement.querySelector(".keyboard__util") as HTMLElement; const utilElement = toolbarElement.querySelector(".keyboard__util") as HTMLElement;
utilElement.innerHTML = protyle.hint.getHTMLByData(hintSlash("", protyle), false); utilElement.innerHTML = `<div class="keyboard__slash-title">
${window.siyuan.languages.general}
</div>
<div class="keyboard__slash-block">
${getSlashItem(Constants.ZWSP, "iconMarkdown", window.siyuan.languages.template)}
${getSlashItem(Constants.ZWSP + 1, "iconBoth", window.siyuan.languages.widget)}
</div>
<div class="keyboard__slash-block">
${getSlashItem(Constants.ZWSP + 2, "iconImage", window.siyuan.languages.assets)}
${getSlashItem(Constants.ZWSP + 3, "iconRef", window.siyuan.languages.blockRef)}
</div>
<div class="keyboard__slash-block">
${getSlashItem("{{", "iconSQL", window.siyuan.languages.blockEmbed)}
${getSlashItem(Constants.ZWSP + 5, "iconSparkles", "AI Chat")}
</div>
<div class="keyboard__slash-block">
${getSlashItem(Constants.ZWSP + 4, "iconFile", window.siyuan.languages.newFile)}
<div class="keyboard__slash-empty"></div>
</div>
<div class="keyboard__slash-title">
common
</div>`;
protyle.hint.bindUploadEvent(protyle, utilElement); protyle.hint.bindUploadEvent(protyle, utilElement);
}; };
@ -201,7 +228,7 @@ export const initKeyboardToolbar = () => {
<div class="keyboard__util"></div>`; <div class="keyboard__util"></div>`;
toolbarElement.addEventListener("click", (event) => { toolbarElement.addEventListener("click", (event) => {
const target = event.target as HTMLElement; 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; const protyle = window.siyuan.mobile.editor.protyle;
if (slashBtnElement) { if (slashBtnElement) {
protyle.hint.fill(decodeURIComponent(slashBtnElement.getAttribute("data-value")), protyle); protyle.hint.fill(decodeURIComponent(slashBtnElement.getAttribute("data-value")), protyle);

33
app/src/protyle/hint/extend.ts
View file

@ -23,7 +23,11 @@ export const hintSlash = (key: string, protyle: IProtyle) => {
const allList: IHintData[] = [{ const allList: IHintData[] = [{
filter: ["模版", "moban", "mb", "template"], filter: ["模版", "moban", "mb", "template"],
value: Constants.ZWSP, value: Constants.ZWSP,
html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic ft__error"><use xlink:href="#iconMarkdown"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.template}</span></div>`, html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconMarkdown"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.template}</span></div>`,
}, {
filter: ["挂件", "widget", "gj", "guajian"],
value: Constants.ZWSP + 1,
html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconBoth"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.widget}</span></div>`,
}, { }, {
filter: ["资源", "assets", "zy", "ziyuan"], filter: ["资源", "assets", "zy", "ziyuan"],
value: Constants.ZWSP + 2, value: Constants.ZWSP + 2,
@ -41,11 +45,11 @@ export const hintSlash = (key: string, protyle: IProtyle) => {
value: Constants.ZWSP + 5, value: Constants.ZWSP + 5,
html: '<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconSparkles"></use></svg><span class="b3-list-item__text">AI Chat</span></div>', html: '<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconSparkles"></use></svg><span class="b3-list-item__text">AI Chat</span></div>',
}, },
// { {
// filter: ["属性视图", "shuxingshitu", "sxst", "attribute view"], filter: ["属性视图", "shuxingshitu", "sxst", "attribute view"],
// value: '<div data-type="NodeAttributeView" data-av-type="table"></div>', value: '<div data-type="NodeAttributeView" data-av-type="table"></div>',
// html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconDatabase"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.attributeView}</span></div>`, html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconDatabase"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.attributeView}</span></div>`,
// }, },
{ {
filter: ["文档", "子文档", "wendang", "wd", "ziwendang", "zwd", "xjwd"], filter: ["文档", "子文档", "wendang", "wd", "ziwendang", "zwd", "xjwd"],
value: Constants.ZWSP + 4, value: Constants.ZWSP + 4,
@ -80,11 +84,11 @@ export const hintSlash = (key: string, protyle: IProtyle) => {
}, { }, {
filter: ["无序列表", "wuxuliebiao", "wxlb", "unordered list"], filter: ["无序列表", "wuxuliebiao", "wxlb", "unordered list"],
value: "* " + Lute.Caret, value: "* " + Lute.Caret,
html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconList"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.list}</span><span class="b3-menu__accelerator">*&nbsp;</span></div>`, html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconList"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.list}</span><span class="b3-list-item__meta">*&nbsp;</span></div>`,
}, { }, {
filter: ["有序列表", "youxuliebiao", "yxlb", "ordered list"], filter: ["有序列表", "youxuliebiao", "yxlb", "ordered list"],
value: "1. " + Lute.Caret, value: "1. " + Lute.Caret,
html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconOrderedList"></use></svg><span class="b3-list-item__text">${window.siyuan.languages["ordered-list"]}</span><span class="b3-menu__accelerator">1.&nbsp;</span></div>`, html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconOrderedList"></use></svg><span class="b3-list-item__text">${window.siyuan.languages["ordered-list"]}</span><span class="b3-list-item__meta">1.&nbsp;</span></div>`,
}, { }, {
filter: ["任务列表", "renwuliebiao", "rwlb", "task list", "todo list"], filter: ["任务列表", "renwuliebiao", "rwlb", "task list", "todo list"],
value: "* [ ] " + Lute.Caret, value: "* [ ] " + Lute.Caret,
@ -92,11 +96,11 @@ export const hintSlash = (key: string, protyle: IProtyle) => {
}, { }, {
filter: ["引述", "yinshu", "ys", "bq", "blockquote"], filter: ["引述", "yinshu", "ys", "bq", "blockquote"],
value: "> " + Lute.Caret, value: "> " + Lute.Caret,
html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconQuote"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.quote}</span><span class="b3-menu__accelerator">&gt;</span></div>`, html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconQuote"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.quote}</span><span class="b3-list-item__meta">&gt;</span></div>`,
}, { }, {
filter: ["代码块", "daimakuai", "dmk", "code block"], filter: ["代码块", "daimakuai", "dmk", "code block"],
value: "```", value: "```",
html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconCode"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.code}</span><span class="b3-menu__accelerator">\`\`\`Enter</span></div>`, html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconCode"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.code}</span><span class="b3-list-item__meta">\`\`\`Enter</span></div>`,
}, { }, {
filter: ["表格", "biaoge", "bg", "table"], filter: ["表格", "biaoge", "bg", "table"],
value: `| ${Lute.Caret} | | |\n| --- | --- | --- |\n| | | |\n| | | |`, value: `| ${Lute.Caret} | | |\n| --- | --- | --- |\n| | | |\n| | | |`,
@ -104,7 +108,7 @@ export const hintSlash = (key: string, protyle: IProtyle) => {
}, { }, {
filter: ["分割线", "fengexian", "fgx", "divider"], filter: ["分割线", "fengexian", "fgx", "divider"],
value: "---", value: "---",
html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconLine"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.line}</span><span class="b3-menu__accelerator">---</span></div>`, html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconLine"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.line}</span><span class="b3-list-item__meta">---</span></div>`,
}, { }, {
filter: ["数学公式块", "shuxuegongshikuai", "sxgsk", "math block"], filter: ["数学公式块", "shuxuegongshikuai", "sxgsk", "math block"],
value: "$$", value: "$$",
@ -119,7 +123,7 @@ export const hintSlash = (key: string, protyle: IProtyle) => {
}, { }, {
filter: ["表情", "biaoqing", "bq", "emoji"], filter: ["表情", "biaoqing", "bq", "emoji"],
value: "emoji", value: "emoji",
html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconEmoji"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.emoji}</span><span class="b3-menu__accelerator">:</span></div>`, html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconEmoji"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.emoji}</span><span class="b3-list-item__meta">:</span></div>`,
}, { }, {
filter: ["链接", "lianjie", "lj", "link", "a"], filter: ["链接", "lianjie", "lj", "link", "a"],
value: "a", value: "a",
@ -243,11 +247,6 @@ export const hintSlash = (key: string, protyle: IProtyle) => {
value: `style${Constants.ZWSP}`, value: `style${Constants.ZWSP}`,
html: `<div class="b3-list-item__first"><div class="color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.clearFontStyle}</span></div>`, html: `<div class="b3-list-item__first"><div class="color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.clearFontStyle}</span></div>`,
}]; }];
allList.splice(1, 0, {
filter: ["挂件", "widget", "gj", "guajian"],
value: Constants.ZWSP + 1,
html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconBoth"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.widget}</span></div>`,
});
if (key === "") { if (key === "") {
return allList; return allList;
} }