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

app/src/constants.ts

@@ -129,6 +129,7 @@ export abstract class Constants {
             backlinks: {default: "⌥7", custom: "⌥7"},
             graphView: {default: "⌥8", custom: "⌥8"},
             globalGraph: {default: "⌥9", custom: "⌥9"},
+            riffCard: {default: "⌥0", custom: "⌥0"},
             config: {default: "⌥P", custom: "⌥P"},
             dataHistory: {default: "⌥H", custom: "⌥H"},
             toggleWin: {default: "⌥M", custom: "⌥M"},

app/src/menus/commonMenuItem.ts

@@ -38,96 +38,6 @@ const bindAttrInput = (inputElement: HTMLInputElement, confirmElement: Element)
     });
 };
 
-const genCardItem = (item: { id: string, name: string }) => {
-    return `<li style="margin: 0 !important;" data-id="${item.id}" class="b3-list-item b3-list-item--hide-action">
-<span class="b3-list-item__text">${item.name}</span>
-<span data-type="add" class="b3-list-item__action b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.addDeck}">
-    <svg><use xlink:href="#iconAdd"></use></svg>
-</span>
-<span data-type="remove" class="b3-list-item__action b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.removeDeck}">
-    <svg><use xlink:href="#iconMin"></use></svg>
-</span>
-</li>`
-}
-export const openDiffCard = (nodeElement: Element[]) => {
-    const range = getEditorRange(nodeElement[0]);
-    fetchPost("/api/riff/getRiffDecks", {}, (response) => {
-        let html = ''
-        const ids: string[] = []
-        nodeElement.forEach(item => {
-            ids.push(item.getAttribute("data-node-id"))
-        })
-        response.data.forEach((item: { id: string, name: string }) => {
-            html += genCardItem(item)
-        })
-        const dialog = new Dialog({
-            width: isMobile() ? "80vw" : "50vw",
-            height: "70vh",
-            title: window.siyuan.languages.riffCard,
-            content: `<div class="b3-dialog__content fn__flex-column" style="box-sizing: border-box;height: 100%">
-    <div class="fn__flex">
-        <input class="b3-text-field fn__flex-1">
-        <span class="fn__space"></span>
-        <button data-type="create" class="b3-button b3-button--outline" style="width: 100px">
-            <svg><use xlink:href="#iconAdd"></use></svg>
-            ${window.siyuan.languages.createDeck}
-        </button>
-    </div>
-    <div class="fn__hr"></div>
-    <ul class="b3-list b3-list--background fn__flex-1">${html}</ul>
-</div>`,
-            destroyCallback() {
-                focusByRange(range);
-            }
-        });
-        dialog.element.addEventListener("click", (event) => {
-            let target = event.target as HTMLElement;
-            while (target && !target.isSameNode(dialog.element)) {
-                const type = target.getAttribute("data-type");
-                if (type === "create") {
-                    let msgId = ""
-                    const inputElement = dialog.element.querySelector(".b3-text-field") as HTMLInputElement;
-                    if (inputElement.value) {
-                        if (msgId) {
-                            hideMessage(msgId);
-                        }
-                        fetchPost("/api/riff/createRiffDeck", {name: inputElement.value}, (response) => {
-                            dialog.element.querySelector(".b3-list").insertAdjacentHTML("afterbegin", genCardItem(response.data))
-                            inputElement.value = '';
-                        })
-                    } else {
-                        msgId = showMessage(window.siyuan.languages._kernel[142])
-                    }
-                    event.stopPropagation();
-                    event.preventDefault();
-                    break;
-                } else if (type === "add") {
-                    fetchPost("/api/riff/addRiffCards", {
-                        deckID: target.parentElement.getAttribute("data-id"),
-                        blockIDs: ids
-                    }, () => {
-                        showMessage(window.siyuan.languages.addDeck)
-                    })
-                    event.stopPropagation();
-                    event.preventDefault();
-                    break;
-                } else if (type === "remove") {
-                    fetchPost("/api/riff/removeRiffCards", {
-                        deckID: target.parentElement.getAttribute("data-id"),
-                        blockIDs: ids
-                    }, () => {
-                        showMessage(window.siyuan.languages.removeDeck)
-                    })
-                    event.stopPropagation();
-                    event.preventDefault();
-                    break;
-                }
-                target = target.parentElement;
-            }
-        })
-    })
-};
-
 export const openWechatNotify = (nodeElement: Element) => {
     const id = nodeElement.getAttribute("data-node-id");
     const range = getEditorRange(nodeElement);

app/src/protyle/gutter/index.ts

@@ -7,7 +7,7 @@ import {
 import {getIconByType} from "../../editor/getIcon";
 import {iframeMenu, setFold, tableMenu, videoMenu, zoomOut} from "../../menus/protyle";
 import {MenuItem} from "../../menus/Menu";
-import {copySubMenu, openAttr, openDiffCard, openWechatNotify} from "../../menus/commonMenuItem";
+import {copySubMenu, openAttr, openWechatNotify} from "../../menus/commonMenuItem";
 import {copyPlainText, updateHotkeyTip, writeText} from "../util/compatibility";
 import {
     transaction,
@@ -36,6 +36,7 @@ import {mathRender} from "../markdown/mathRender";
 import {duplicateBlock} from "../wysiwyg/commonHotkey";
 import {movePathTo} from "../../util/pathName";
 import {hintMoveBlock} from "../hint/extend";
+import {makeCard} from "../../card/makeCard";
 
 export class Gutter {
     public element: HTMLElement;
@@ -676,7 +677,7 @@ export class Gutter {
         window.siyuan.menus.menu.append(new MenuItem({
             label: window.siyuan.languages.riffCard,
             click() {
-                openDiffCard(selectsElement);
+                makeCard(selectsElement);
             }
         }).element);
         return window.siyuan.menus.menu;
@@ -1438,7 +1439,7 @@ export class Gutter {
         window.siyuan.menus.menu.append(new MenuItem({
             label: window.siyuan.languages.riffCard,
             click() {
-                openDiffCard([nodeElement]);
+                makeCard([nodeElement]);
             }
         }).element);
         window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element);

app/src/util/globalShortcut.ts

@@ -43,6 +43,7 @@ import {editor} from "../config/editor";
 import {hintMoveBlock} from "../protyle/hint/extend";
 import {Backlink} from "../layout/dock/Backlink";
 import {openHistory} from "../history/history";
+import {openCard} from "../card/openCard";
 
 const getRightBlock = (element: HTMLElement, x: number, y: number) => {
     let index = 1;
@@ -523,6 +524,11 @@ export const globalShortcut = () => {
         if (matchDock) {
             return;
         }
+        if (matchHotKey(window.siyuan.config.keymap.general.riffCard.custom, event)) {
+            openCard()
+            event.preventDefault();
+            return;
+        }
         if (matchHotKey(window.siyuan.config.keymap.general.dailyNote.custom, event)) {
             newDailyNote();
             if (target.classList.contains("protyle-wysiwyg") ||

app/src/util/onGetConfig.ts

@@ -30,6 +30,7 @@ import {editor} from "../config/editor";
 import {goBack, goForward} from "./backForward";
 import {replaceLocalPath} from "../editor/rename";
 import {openHistory} from "../history/history";
+import {openCard} from "../card/openCard";
 
 const matchKeymap = (keymap: Record<string, IKeymapItem>, key1: "general" | "editor", key2?: "general" | "insert" | "heading" | "list" | "table") => {
     if (key1 === "general") {
@@ -178,6 +179,9 @@ const initBar = () => {
 <div id="barDailyNote" data-menu="true" aria-label="${window.siyuan.languages.dailyNote} ${updateHotkeyTip(window.siyuan.config.keymap.general.dailyNote.custom)}" class="toolbar__item b3-tooltips b3-tooltips__se${window.siyuan.config.readonly ? " fn__none" : ""}">
     <svg><use xlink:href="#iconCalendar"></use></svg>
 </div>
+<div id="barRiffCard" data-menu="true" aria-label="${window.siyuan.languages.iconRiffCard} ${updateHotkeyTip(window.siyuan.config.keymap.general.iconRiffCard.custom)}" class="toolbar__item b3-tooltips b3-tooltips__se${window.siyuan.config.readonly ? " fn__none" : ""}">
+    <svg><use xlink:href="#iconRiffCard"></use></svg>
+</div>
 <button id="barBack" data-menu="true" class="toolbar__item toolbar__item--disabled b3-tooltips b3-tooltips__se" aria-label="${window.siyuan.languages.goBack} ${updateHotkeyTip(window.siyuan.config.keymap.general.goBack.custom)}">
     <svg><use xlink:href="#iconBack"></use></svg>
 </button>
@@ -270,6 +274,10 @@ const initBar = () => {
                 openSearch(window.siyuan.config.keymap.general.globalSearch.custom);
                 event.stopPropagation();
                 break;
+            } else if (target.id === "barRiffCard") {
+                openCard();
+                event.stopPropagation();
+                break;
             } else if (target.id === "barDailyNote") {
                 if (getOpenNotebookCount() < 2) {
                     newDailyNote();