feat(custom-block): 实现使用块菜单编辑块 style 属性功能 | Implement the function …

…of using block menu to edit block `style` attribute.

public/i18n/en_US.json

@@ -0,0 +1,8 @@
+{
+    "displayName": "Custom Block Style",
+    "menu": {
+        "style": {
+            "label": "block style"
+        }
+    }
+}

public/i18n/zh_CHT.json

@@ -0,0 +1,8 @@
+{
+    "displayName": "自定義塊樣式",
+    "menu": {
+        "style": {
+            "label": "塊樣式"
+        }
+    }
+}

public/i18n/zh_CN.json

@@ -0,0 +1,8 @@
+{
+    "displayName": "自定义块样式",
+    "menu": {
+        "style": {
+            "label": "块样式"
+        }
+    }
+}

public/plugin.json

@@ -1,7 +1,7 @@
 {
-    "name": "custom-fonts",
+    "name": "custom-block",
     "author": "Zuoqiu Yingyi",
-    "url": "https://github.com/Zuoqiu-Yingyi/siyuan-plugin-custom-fonts",
+    "url": "https://github.com/Zuoqiu-Yingyi/siyuan-plugin-custom-block",
     "version": "0.0.0",
     "minAppVersion": "2.9.0",
     "backends": [

src/index.ts

@@ -17,9 +17,16 @@
 
 import siyuan from "siyuan";
 
-import { FLAG_MOBILE } from "@workspace/utils/env/front-end";
+import { Client } from "@siyuan-community/siyuan-sdk";
+
+import Item from "@workspace/components/siyuan/menu/Item.svelte"
+
 import { Logger } from "@workspace/utils/logger";
 import { merge } from "@workspace/utils/misc/merge";
+import {
+    getBlockMenuContext,
+    type BlockMenuDetail,
+} from "@workspace/utils/siyuan/menu/block";
 
 import { DEFAULT_CONFIG } from "./configs/default";
 import type { IConfig } from "./types/config";
@@ -29,6 +36,7 @@ export default class CustomBlockPlugin extends siyuan.Plugin {
 
     public readonly siyuan = siyuan;
     public readonly logger: InstanceType<typeof Logger>;
+    public readonly client: InstanceType<typeof Client>;
 
     protected readonly STYLE_ELEMENT_ID: string;
     protected readonly SETTINGS_DIALOG_ID: string;
@@ -41,6 +49,7 @@ export default class CustomBlockPlugin extends siyuan.Plugin {
         super(options);
 
         this.logger = new Logger(this.name);
+        this.client = new Client();
         this.SETTINGS_DIALOG_ID = `plugin-${this.name}-settings-dialog`;
     }
 
@@ -51,18 +60,84 @@ export default class CustomBlockPlugin extends siyuan.Plugin {
             })
             .catch(error => this.logger.error(error))
             .finally(() => {
+                /* 开始监听块菜单事件 */
+                this.eventBus.on("click-blockicon", this.blockMenuEventListener);
+                this.eventBus.on("click-editortitleicon", this.blockMenuEventListener);
             });
     }
 
     onLayoutReady(): void {
     }
 
     onunload(): void {
+        /* 停止监听块菜单事件 */
+        this.eventBus.off("click-blockicon", this.blockMenuEventListener);
+        this.eventBus.off("click-editortitleicon", this.blockMenuEventListener);
     }
 
     openSetting(): void {
     }
 
+    /* 添加块菜单项 */
+    protected readonly blockMenuEventListener = (e: CustomEvent<BlockMenuDetail>) => {
+        // this.logger.debug(e);
+        const detail = e.detail; // 获取菜单信息
+        const context = getBlockMenuContext(detail); // 获取块菜单上下文
+
+        if (context) {
+            const submenu: siyuan.IMenuItemOption[] = []; // 子菜单
+
+            if (!context.isDocumentBlock // 不是文档块
+                && !context.isMultiBlock // 不是多个块
+            ) {
+                /* 添加一个输入框以设置块的 style 属性 */
+                submenu.push({
+                    element: globalThis.document.createElement("div"), // 避免生成其他内容
+                    bind: (element) => {
+                        element.innerHTML = ""; // 删除所有下级节点
+
+                        /* 挂载一个 svelte 菜单项组件 */
+                        const item = new Item({
+                            target: element,
+                            props: {
+                                input: true,
+                                icon: "#iconTheme",
+                                label: this.i18n.menu.style.label,
+                                accelerator: "style",
+                            },
+                        });
+
+                        /* 异步获取该块的 style 属性 */
+                        this.client.getBlockAttrs({
+                            id: context.id,
+                        }).then(response => {
+                            /* 设置该块的 style 属性 */
+                            item.$set({
+                                value: response.data.style || "",
+                            });
+
+                            /* 每当 input 中值变化时, 更新该块的 style 属性 */
+                            item.$on("changed", e => {
+                                this.client.setBlockAttrs({
+                                    id: context.id,
+                                    attrs: {
+                                        style: e.detail.value,
+                                    },
+                                });
+                            });
+                        });
+                    },
+                });
+            }
+
+            detail.menu.addItem({
+                icon: "iconTheme",
+                label: this.i18n.displayName,
+                submenu,
+            });
+        }
+    }
+
     /* 重置插件配置 */
     public async resetConfig(): Promise<void> {
         return this.updateConfig(merge(DEFAULT_CONFIG) as IConfig);

src/utils/i18n.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright (C) 2023 Zuoqiu Yingyi
+ * 
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ * 
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import {
+    i18nCheck,
+    i18nChecks,
+} from "@workspace/types/siyuan/i18n";
+
+import zh_Hans from "~/public/i18n/zh_CN.json";
+import zh_Hant from "~/public/i18n/zh_CHT.json";
+import en from "~/public/i18n/en_US.json";
+
+export type I18N = typeof zh_Hans;
+
+i18nChecks([
+    i18nCheck<I18N, typeof zh_Hans>(),
+    i18nCheck<I18N, typeof zh_Hant>(),
+    i18nCheck<I18N, typeof en>(),
+]);