[js] 添加斜杠菜单选项 示例

效果

JS 片段

// 添加斜杠菜单选项 示例 JS片段
// 参考 https://ld246.com/article/1746977623250   
function getMyPlugin(pluginName = "background-color-1") {
    let myPlugin = window.siyuan.ws.app.plugins.find(item=>item.name === pluginName);
    if(myPlugin) return myPlugin;
    class EventBus {
        constructor(name = "") {
            this.eventTarget = document.createComment(name);
            document.appendChild(this.eventTarget);
        }
        on(type, listener) {
            this.eventTarget.addEventListener(type, listener);
        }
        once(type, listener) {
            this.eventTarget.addEventListener(type, listener, { once: true });
        }
        off(type, listener) {
            this.eventTarget.removeEventListener(type, listener);
        }
        emit(type, detail) {
            return this.eventTarget.dispatchEvent(new CustomEvent(type, { detail, cancelable: true }));
        }
    }
    class Plugin {
        constructor(options) {
            this.app = options.app||window.siyuan.ws.app.appId;
            this.i18n = options.i18n;
            this.displayName = options.displayName||options.name;
            this.name = options.name;
            this.eventBus = new EventBus(options.name);
            this.protyleSlash = [{
                filter: ["background color 1", "背景色 1", "bjs1"],
                html: `<div class="b3-list-item__first"><div style="color: var(--b3-theme-on-background); background-color: var(--b3-font-background1);" class="color__square color__square--list">A</div><span class="b3-list-item__text">背景色 1</span></div>`,
                id: "backgroundColor_1",
                callback(protyle, nodeElement) {
                    const range = protyle.protyle.toolbar.range;
                    range.deleteContents();
  
                    nodeElement.style.backgroundColor = "var(--b3-font-background1)";
                    nodeElement.style.setProperty("--b3-parent-background", "var(--b3-font-background1)");

                    const fetchPost = async (url, data) => {
                        const response = await fetch(url, {
                            method: "POST",
                            headers: { "Content-Type": "application/json" },
                            body: JSON.stringify(data)
                        });
                        return await response.json();
                    };

                    fetchPost("/api/attr/setBlockAttrs", {
                        id: nodeElement.getAttribute("data-node-id"),
                        attrs: { style: nodeElement.getAttribute("style") }
                    });
                }
            }];
            this.customBlockRenders = {};
            this.topBarIcons = [];
            this.statusBarIcons = [];
            this.commands = [];
            this.models = {};
            this.docks = {};
            this.data = {};
            this.protyleOptionsValue = null;
        }
        onload() {}
        onunload() {}
        uninstall() {}
        async updateCards(options) { return options; } // 返回选项本身
        onLayoutReady() {}
        addCommand(command) {}
        addIcons(svg) {}
        addTopBar(options) { return null; } // 模拟返回null
        addStatusBar(options) { return null; } // 模拟返回null
        // 去掉设置，参考 https://github.com/siyuan-note/siyuan/blob/dae6158860cc704e353454565c96e874278c6f47/app/src/plugin/openTopBarMenu.ts#L25   
        //openSetting() {}
        loadData(storageName) { return Promise.resolve(null); }
        saveData(storageName, data) { return Promise.resolve(); }
        removeData(storageName) { return Promise.resolve(); }
        getOpenedTab() { return {}; } // 返回空对象
        addTab(options) { return () => {}; } // 返回空函数模拟模型
        addDock(options) { return {}; } // 返回空对象模拟 dock
        addFloatLayer(options) {}
        updateProtyleToolbar(toolbar) { return toolbar; } // 返回toolbar本身
        set protyleOptions(options) {}
        get protyleOptions() { return this.protyleOptionsValue; }
    }
    myPlugin = new Plugin({name:pluginName});
    window.siyuan.ws.app.plugins.push(myPlugin);
    return myPlugin;
}
getMyPlugin();
​