Improve /menu (#12547)

* / 菜单

* 优先显示快捷键，其次显示键盘输入

* heading

* 空格

* html

* html

* 更新 index.ts

* b3-menu__accelerator 嵌套了

app/src/protyle/gutter/index.ts

@@ -1454,9 +1454,9 @@ export class Gutter {
                 submenu: iframeMenu(protyle, nodeElement)
             }).element);
         } else if (type === "NodeHTMLBlock" && !protyle.disabled) {
-            window.siyuan.menus.menu.append(new MenuItem({id: "separator_HTML", type: "separator"}).element);
+            window.siyuan.menus.menu.append(new MenuItem({id: "separator_html", type: "separator"}).element);
             window.siyuan.menus.menu.append(new MenuItem({
-                id: "HTML",
+                id: "html",
                 icon: "iconHTML5",
                 label: "HTML",
                 click() {
@@ -1989,7 +1989,7 @@ export class Gutter {
         }];
         ["25%", "33%", "50%", "67%", "75%", "100%"].forEach((item) => {
             styles.push({
-                id: "width" + item,
+                id: "width_" + item,
                 iconHTML: "",
                 label: item,
                 click: () => {
@@ -2079,7 +2079,7 @@ export class Gutter {
         }];
         ["25%", "33%", "50%", "67%", "75%", "100%"].forEach((item) => {
             styles.push({
-                id: "height" + item,
+                id: "height_" + item,
                 iconHTML: "",
                 label: item,
                 click: () => {

app/src/protyle/hint/extend.ts

@@ -24,234 +24,293 @@ import {avRender} from "../render/av/render";
 export const hintSlash = (key: string, protyle: IProtyle) => {
     const allList: IHintData[] = [{
         filter: ["模版", "moban", "muban", "mb", "template"],
+        id: "template",
         value: Constants.ZWSP,
         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"],
+        id: "widget",
         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"],
+        id: "assets",
         value: Constants.ZWSP + 2,
         html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconImage"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.assets}</span></div>`,
     }, {
         filter: ["块引用", "kuaiyinyong", "kyy", "block reference"],
+        id: "ref",
         value: "((",
         html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconRef"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.ref}</span><span class="b3-list-item__meta">((</span></div>`,
     }, {
         filter: ["嵌入块", "qianrukuai", "qrk", "embed block"],
+        id: "blockEmbed",
         value: "{{",
         html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconSQL"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.blockEmbed}</span><span class="b3-list-item__meta">{{</span></div>`,
     }, {
         filter: ["人工智能", "ai", "rgzn"],
+        id: "aiWriting",
         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">${window.siyuan.languages.aiWriting}</span></div>`,
     }, {
         filter: ["数据库", "视图", "shujuku", "shitu", "sjk", "st", "database", "view", "db"],
+        id: "database",
         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.database}</span></div>`,
     }, {
         filter: ["新建文档并引用", "xinjianwendangbingyinyong", "xjwdbyy", "new doc"],
+        id: "newFileRef",
         value: Constants.ZWSP + 4,
         html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconFile"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.newFileRef}</span></div>`,
     }, {
         filter: ["新建子文档并引用", "xinjianziwendangbingyinyong", "xjzwdbyy", "create sub doc"],
+        id: "newSubDocRef",
         value: Constants.ZWSP + 6,
         html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconFile"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.newSubDocRef}</span></div>`,
     }, {
         value: "",
+        id: "separator_1",
         html: "separator",
     }, {
         filter: ["yijibiaoti", "一级标题", "yjbt", "h1", "heading"],
+        id: "heading1",
         value: "# " + Lute.Caret,
-        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconH1"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.heading1}</span><span class="b3-menu__accelerator">${updateHotkeyTip(window.siyuan.config.keymap.editor.heading.heading1.custom)}</span></div>`,
+        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconH1"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.heading1}</span>${window.siyuan.config.keymap.editor.heading.heading1.custom ? `<span class="b3-menu__accelerator">${updateHotkeyTip((window.siyuan.config.keymap.editor.heading.heading1.custom))}</span>` : '<span class="b3-list-item__meta">&num;&nbsp;</span>'}</div>`,
     }, {
         filter: ["erjibiaoti", "二级标题", "ejbt", "h2", "heading"],
+        id: "heading2",
         value: "## " + Lute.Caret,
-        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconH2"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.heading2}</span><span class="b3-menu__accelerator">${updateHotkeyTip(window.siyuan.config.keymap.editor.heading.heading2.custom)}</span></div>`,
+        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconH2"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.heading2}</span>${window.siyuan.config.keymap.editor.heading.heading2.custom ? `<span class="b3-menu__accelerator">${updateHotkeyTip((window.siyuan.config.keymap.editor.heading.heading2.custom))}</span>` : '<span class="b3-list-item__meta">&num;&num;&nbsp;</span>'}</div>`,
     }, {
         filter: ["sanjibiaoti", "三级标题", "sjbt", "h3", "heading"],
+        id: "heading3",
         value: "### " + Lute.Caret,
-        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconH3"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.heading3}</span><span class="b3-menu__accelerator">${updateHotkeyTip(window.siyuan.config.keymap.editor.heading.heading3.custom)}</span></div>`,
+        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconH3"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.heading3}</span>${window.siyuan.config.keymap.editor.heading.heading3.custom ? `<span class="b3-menu__accelerator">${updateHotkeyTip((window.siyuan.config.keymap.editor.heading.heading3.custom))}</span>` : '<span class="b3-list-item__meta">&num;&num;&num;&nbsp;</span>'}</div>`,
     }, {
         filter: ["sijibiaoti", "四级标题", "sjbt", "h4", "heading"],
+        id: "heading4",
         value: "#### " + Lute.Caret,
-        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconH4"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.heading4}</span><span class="b3-menu__accelerator">${updateHotkeyTip(window.siyuan.config.keymap.editor.heading.heading4.custom)}</span></div>`,
+        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconH4"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.heading4}</span>${window.siyuan.config.keymap.editor.heading.heading4.custom ? `<span class="b3-menu__accelerator">${updateHotkeyTip((window.siyuan.config.keymap.editor.heading.heading4.custom))}</span>` : '<span class="b3-list-item__meta">&num;&num;&num;&num;&nbsp;</span>'}</div>`,
     }, {
         filter: ["wujibiaoti", "五级标题", "wjbt", "h5", "heading"],
+        id: "heading5",
         value: "##### " + Lute.Caret,
-        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconH5"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.heading5}</span><span class="b3-menu__accelerator">${updateHotkeyTip(window.siyuan.config.keymap.editor.heading.heading5.custom)}</span></div>`,
+        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconH5"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.heading5}</span>${window.siyuan.config.keymap.editor.heading.heading5.custom ? `<span class="b3-menu__accelerator">${updateHotkeyTip((window.siyuan.config.keymap.editor.heading.heading5.custom))}</span>` : '<span class="b3-list-item__meta">&num;&num;&num;&num;&num;&nbsp;</span>'}</div>`,
     }, {
         filter: ["liujibiaoti", "六级标题", "ljbt", "h6", "heading"],
+        id: "heading6",
         value: "###### " + Lute.Caret,
-        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconH6"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.heading6}</span><span class="b3-menu__accelerator">${updateHotkeyTip((window.siyuan.config.keymap.editor.heading.heading6.custom))}</span></div>`,
+        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconH6"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.heading6}</span>${window.siyuan.config.keymap.editor.heading.heading6.custom ? `<span class="b3-menu__accelerator">${updateHotkeyTip((window.siyuan.config.keymap.editor.heading.heading6.custom))}</span>` : '<span class="b3-list-item__meta">&num;&num;&num;&num;&num;&num;&nbsp;</span>'}</div>`,
     }, {
         filter: ["无序列表", "wuxuliebiao", "wxlb", "unordered list"],
+        id: "list",
         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-list-item__meta">*&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>${window.siyuan.config.keymap.editor.insert.list.custom ? `<span class="b3-menu__accelerator">${updateHotkeyTip((window.siyuan.config.keymap.editor.insert.list.custom))}</span>` : '<span class="b3-list-item__meta">&ast;&nbsp;</span>'}</div>`,
     }, {
         filter: ["有序列表", "youxuliebiao", "yxlb", "ordered list"],
+        id: "orderedList",
         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-list-item__meta">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>${window.siyuan.config.keymap.editor.insert["ordered-list"].custom ? `<span class="b3-menu__accelerator">${updateHotkeyTip((window.siyuan.config.keymap.editor.insert["ordered-list"].custom))}</span>` : '<span class="b3-list-item__meta">1&period;&nbsp;</span>'}</div>`,
     }, {
         filter: ["任务列表", "renwuliebiao", "rwlb", "task list", "todo list"],
+        id: "check",
         value: "* [ ] " + Lute.Caret,
-        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconCheck"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.check}</span><span class="b3-menu__accelerator">${updateHotkeyTip((window.siyuan.config.keymap.editor.insert.check.custom))}</span></div>`,
+        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconCheck"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.check}</span>${window.siyuan.config.keymap.editor.insert.check.custom ? `<span class="b3-menu__accelerator">${updateHotkeyTip((window.siyuan.config.keymap.editor.insert.check.custom))}</span>` : '<span class="b3-list-item__meta">&lsqb;&nbsp;&rsqb;</span>'}</div>`,
     }, {
         filter: ["引述", "yinshu", "ys", "bq", "blockquote"],
+        id: "quote",
         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>${window.siyuan.config.keymap.editor.insert.quote.custom ? `<span class="b3-menu__accelerator">${updateHotkeyTip((window.siyuan.config.keymap.editor.insert.quote.custom))}</span>` : '<span class="b3-list-item__meta">&gt;</span>'}</div>`,
     }, {
         filter: ["代码块", "daimakuai", "dmk", "code block"],
+        id: "code",
         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-list-item__meta">\`\`\`${window.siyuan.languages.enterKey}</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>${window.siyuan.config.keymap.editor.insert.code.custom ? `<span class="b3-menu__accelerator">${updateHotkeyTip((window.siyuan.config.keymap.editor.insert.code.custom))}</span>` : `<span class="b3-list-item__meta">&grave;&grave;&grave;${window.siyuan.languages.enterKey}</span>`}</div>`,
     }, {
         filter: ["表格", "biaoge", "bg", "table"],
+        id: "table",
         value: `| ${Lute.Caret} |  |  |\n| --- | --- | --- |\n|  |  |  |\n|  |  |  |`,
         html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconTable"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.table}</span><span class="b3-menu__accelerator">${updateHotkeyTip((window.siyuan.config.keymap.editor.insert.table.custom))}</span></div>`,
     }, {
         filter: ["分割线", "分隔线", "fengexian", "fgx", "divider", "thematic", "break"],
+        id: "line",
         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-list-item__meta">---</span></div>`,
     }, {
         filter: ["数学公式块", "shuxuegongshikuai", "sxgsk", "math block"],
+        id: "math",
         value: "$$",
         html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconMath"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.math}</span><span class="b3-list-item__meta">$$</span></div>`,
     }, {
         filter: ["html"],
+        id: "html",
         value: "<div>",
         html: '<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconHTML5"></use></svg><span class="b3-list-item__text">HTML</span></div>',
     }, {
         value: "",
+        id: "separator_2",
         html: "separator",
     }, {
         filter: ["表情", "biaoqing", "bq", "emoji"],
+        id: "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-list-item__meta">:</span></div>`,
     }, {
         filter: ["链接", "lianjie", "lj", "link", "a"],
+        id: "link",
         value: "a",
         html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconLink"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.link}</span><span class="b3-menu__accelerator">${updateHotkeyTip((window.siyuan.config.keymap.editor.insert.link.custom))}</span></div>`,
     }, {
         filter: ["粗体", "cuti", "ct", "bold", "strong"],
+        id: "bold",
         value: "strong",
         html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconBold"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.bold}</span><span class="b3-menu__accelerator">${updateHotkeyTip((window.siyuan.config.keymap.editor.insert.bold.custom))}</span></div>`,
     }, {
         filter: ["斜体", "xieti", "xt", "italic", "em"],
+        id: "italic",
         value: "em",
         html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconItalic"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.italic}</span><span class="b3-menu__accelerator">${updateHotkeyTip((window.siyuan.config.keymap.editor.insert.italic.custom))}</span></div>`,
     }, {
         filter: ["下划线", "xiahuaxian", "xhx", "underline"],
+        id: "underline",
         value: "u",
         html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconUnderline"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.underline}</span><span class="b3-menu__accelerator">${updateHotkeyTip((window.siyuan.config.keymap.editor.insert.underline.custom))}</span></div>`,
     }, {
         filter: ["删除线", "shanchuxian", "scx", "strike"],
+        id: "strike",
         value: "s",
         html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconStrike"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.strike}</span><span class="b3-menu__accelerator">${updateHotkeyTip((window.siyuan.config.keymap.editor.insert.strike.custom))}</span></div>`,
     }, {
         filter: ["标记", "biaoji", "bj", "mark"],
+        id: "mark",
         value: "mark",
         html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconMark"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.mark}</span><span class="b3-menu__accelerator">${updateHotkeyTip((window.siyuan.config.keymap.editor.insert.mark.custom))}</span></div>`,
     }, {
         filter: ["上标", "shangbiao", "sb", "superscript"],
+        id: "sup",
         value: "sup",
         html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconSup"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.sup}</span><span class="b3-menu__accelerator">${updateHotkeyTip((window.siyuan.config.keymap.editor.insert.sup.custom))}</span></div>`,
     }, {
         filter: ["下标", "xiaobiao", "xb", "subscript"],
+        id: "sub",
         value: "sub",
         html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconSub"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.sub}</span><span class="b3-menu__accelerator">${updateHotkeyTip((window.siyuan.config.keymap.editor.insert.sub.custom))}</span></div>`,
     }, {
         filter: ["标签", "biaoqian", "bq", "tag"],
+        id: "tag",
         value: "tag",
         html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconTags"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.tag}</span><span class="b3-menu__accelerator">${updateHotkeyTip((window.siyuan.config.keymap.editor.insert.tag.custom))}</span></div>`,
     }, {
         filter: ["行级代码", "hangjidaima", "hjdm", "行内代码", "hangneidaima", "hndm", "inline code"],
+        id: "inlineCode",
         value: "code",
         html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconInlineCode"></use></svg><span class="b3-list-item__text">${window.siyuan.languages["inline-code"]}</span><span class="b3-menu__accelerator">${updateHotkeyTip((window.siyuan.config.keymap.editor.insert["inline-code"].custom))}</span></div>`,
     }, {
         filter: ["行级公式", "hangjigongshi", "hjgs", "行级数学公式", "hangjishuxuegongshi", "hjsxgs", "行内数学公式", "hangneishuxuegongshi", "hnsxgs", "inline math"],
+        id: "inlineMath",
         value: "inline-math",
         html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconMath"></use></svg><span class="b3-list-item__text">${window.siyuan.languages["inline-math"]}</span><span class="b3-menu__accelerator">${updateHotkeyTip((window.siyuan.config.keymap.editor.insert["inline-math"].custom))}</span></div>`,
     }, {
         value: "",
+        id: "separator_3",
         html: "separator",
     }, {
         filter: ["插入图片或文件", "upload", "上传", "crtphwj", "sc"],
+        id: "insertAsset",
         value: Constants.ZWSP + 3,
         html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconDownload"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.insertAsset}</span>
 <input class="b3-form__upload" type="file" ${protyle.options.upload.accept ? 'multiple="' + protyle.options.upload.accept + '"' : ""}></div>`,
     }, {
         filter: ["iframe", "嵌入网址", "qianruwangzhan", "qrwz"],
+        id: "insertIframeURL",
         value: '<iframe sandbox="allow-forms allow-presentation allow-same-origin allow-scripts allow-modals allow-popups" src="" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>',
         html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconLanguage"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.insertIframeURL}</span></div>`,
     }, {
         filter: ["插入图片链接", "insert image link", "charutupianlianjie", "crtptp"],
+        id: "insertImgURL",
         value: "![]()",
         html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconImage"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.insertImgURL}</span></div>`,
     }, {
         filter: ["插入视频链接", "charushipinlianjie", "crsplj", "insert video url"],
+        id: "insertVideoURL",
         value: '<video controls="controls" src=""></video>',
         html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconVideo"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.insertVideoURL}</span></div>`,
     }, {
         filter: ["插入音频链接", "charuyinpinlianjie", "cryplj", "insert audio url"],
+        id: "insertAudioURL",
         value: '<audio controls="controls" src=""></audio>',
         html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconRecord"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.insertAudioURL}</span></div>`,
     }, {
         value: "",
+        id: "separator_4",
         html: "separator",
     }, {
         filter: ["五线谱", "wuxianpu", "wxp", "staff"],
+        id: "staff",
         value: "```abc\n```",
         html: `<div class="b3-list-item__first"><span class="b3-list-item__text">ABC</span><span class="b3-list-item__meta">${window.siyuan.languages.staff}</span></div>`,
     }, {
         filter: ["图表", "tubiao", "tb", "chart"],
+        id: "chart",
         value: "```echarts\n```",
         html: `<div class="b3-list-item__first"><span class="b3-list-item__text">Chart</span><span class="b3-list-item__meta">${window.siyuan.languages.chart}</span></div>`,
     }, {
         filter: ["流程图", "liuchengtu", "lct", "flow chart"],
+        id: "flowChart",
         value: "```flowchart\n```",
         html: '<div class="b3-list-item__first"><span class="b3-list-item__text">FlowChart</span><span class="b3-list-item__meta">Flow Chart</span></div>',
     }, {
         filter: ["状态图", "zhuangtaitu", "ztt", "graph viz"],
+        id: "graph",
         value: "```graphviz\n```",
         html: '<div class="b3-list-item__first"><span class="b3-list-item__text">Graphviz</span><span class="b3-list-item__meta">Graph</span></div>',
     }, {
         filter: ["流程图", "时序图", "甘特图", "liuchengtu", "shixutu", "gantetu", "lct", "sxt", "gtt", "mermaid"],
+        id: "mermaid",
         value: "```mermaid\n```",
         html: '<div class="b3-list-item__first"><span class="b3-list-item__text">Mermaid</span><span class="b3-list-item__meta">Mermaid</span></div>',
     }, {
         filter: ["脑图", "naotu", "nt", "mind map"],
+        id: "mindmap",
         value: "```mindmap\n```",
         html: `<div class="b3-list-item__first"><span class="b3-list-item__text">Mind map</span><span class="b3-list-item__meta">${window.siyuan.languages.mindmap}</span></div>`,
     }, {
         filter: ["统一建模语言", "tongyijianmoyuyan", "tyjmyy", "plant uml"],
+        id: "UML",
         value: "```plantuml\n```",
         html: '<div class="b3-list-item__first"><span class="b3-list-item__text">PlantUML</span><span class="b3-list-item__meta">UML</span></div>',
     }, {
         value: "",
+        id: "separator_5",
         html: "separator",
     }, {
         filter: ["信息样式", "xinxiyangshi", "xxys", "info style"],
+        id: "infoStyle",
         value: `style${Constants.ZWSP}color: var(--b3-card-info-color);background-color: var(--b3-card-info-background);`,
         html: `<div class="b3-list-item__first"><div style="color: var(--b3-card-info-color);background-color: var(--b3-card-info-background);" class="color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.infoStyle}</span></div>`,
     }, {
         filter: ["成功样式", "chenggongyangshi", "cgys", "success style"],
+        id: "successStyle",
         value: `style${Constants.ZWSP}color: var(--b3-card-success-color);background-color: var(--b3-card-success-background);`,
         html: `<div class="b3-list-item__first"><div style="color: var(--b3-card-success-color);background-color: var(--b3-card-success-background);" class="color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.successStyle}</span></div>`,
     }, {
         filter: ["警告样式", "jinggaoyangshi", "jgys", "warning style"],
+        id: "warningStyle",
         value: `style${Constants.ZWSP}color: var(--b3-card-warning-color);background-color: var(--b3-card-warning-background);`,
         html: `<div class="b3-list-item__first"><div style="color: var(--b3-card-warning-color);background-color: var(--b3-card-warning-background);" class="color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.warningStyle}</span></div>`,
     }, {
         filter: ["错误样式", "cuowuyangshi", "cwys", "error style"],
+        id: "errorStyle",
         value: `style${Constants.ZWSP}color: var(--b3-card-error-color);background-color: var(--b3-card-error-background);`,
         html: `<div class="b3-list-item__first"><div style="color: var(--b3-card-error-color);background-color: var(--b3-card-error-background);" class="color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.errorStyle}</span></div>`,
     }, {
-        filter: ["移除样式", "yichuyangshi", "ycys", "remove style"],
+        filter: ["清除样式", "qingchuyangshi", "qcys", "remove style"],
+        id: "clearFontStyle",
         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>`,
     }, {
         value: "",
+        id: "separator_6",
         html: "separator",
     }];
     let hasPlugin = false;

app/src/protyle/hint/index.ts

@@ -248,9 +248,9 @@ ${unicode2Emoji(emoji.unicode)}</button>`;
                 focusClass = " b3-list-item--focus";
             }
             if (hintData.html === "separator") {
-                hintsHTML += '<div class="b3-menu__separator"></div>';
+                hintsHTML += `<button data-id="${hintData.id}" class="b3-menu__separator"></button>`;
             } else {
-                hintsHTML += `<button style="width: calc(100% - 16px)" class="b3-list-item b3-list-item--two${focusClass}" data-value="${encodeURIComponent(hintData.value)}">${hintData.html}</button>`;
+                hintsHTML += `<button data-id="${hintData.id}" style="width: calc(100% - 16px)" class="b3-list-item b3-list-item--two${focusClass}" data-value="${encodeURIComponent(hintData.value)}">${hintData.html}</button>`;
             }
         });
         return `${hintsHTML}</div>`;

app/src/types/protyle.d.ts

@@ -370,6 +370,7 @@ interface IPreviewActionCustom {
 }
 
 interface IHintData {
+    id?: string;
     html: string;
     value: string;
     filter?: string[]