feat(custom-block): 新增文本排版模式功能 | Add text layout mode function.

Zuoqiu-Yingyi · Jul 6, 2023 · 9aac150 · 9aac150
1 parent 09e224e
commit 9aac150
Show file tree

Hide file tree

Showing 8 changed files with 130 additions and 4 deletions.
diff --git a/public/i18n/en_US.json b/public/i18n/en_US.json
@@ -27,6 +27,9 @@
         },
         "custom-block-width-full": {
             "label": "Full-width Display"
+        },
+        "custom-block-writing-mode": {
+            "label": "Text Layout Mode"
         }
     }
 }
diff --git a/public/i18n/zh_CHT.json b/public/i18n/zh_CHT.json
@@ -27,6 +27,9 @@
         },
         "custom-block-width-full": {
             "label": "全寬顯示"
+        },
+        "custom-block-writing-mode": {
+            "label": "文本排版模式"
         }
     }
 }
diff --git a/public/i18n/zh_CN.json b/public/i18n/zh_CN.json
@@ -27,6 +27,9 @@
         },
         "custom-block-width-full": {
             "label": "全宽显示"
+        },
+        "custom-block-writing-mode": {
+            "label": "文本排版模式"
         }
     }
 }
diff --git a/src/configs/default.ts b/src/configs/default.ts
@@ -46,7 +46,7 @@ export const DEFAULT_CONFIG: IConfig = {
             ],
         },
         { // 分割线
-            id: "custom-block-separator-0",
+            id: "custom-block-separator-1F23B9BB-BD9C-41A1-830E-F48D23618889",
             enable: true,
             mode: MenuItemMode.separator,
             multi: false,
@@ -59,7 +59,7 @@ export const DEFAULT_CONFIG: IConfig = {
             id: "custom-block-width-full",
             enable: true,
             mode: MenuItemMode.button,
-            multi: true,
+            multi: false,
             icon: "iconHideDock",
             accelerator: "width: full",
             token: "width-full",
@@ -93,7 +93,7 @@ export const DEFAULT_CONFIG: IConfig = {
             ],
         },
         { // 分割线
-            id: "custom-block-separator-1",
+            id: "custom-block-separator-85642773-CEF8-4D0B-AFDF-BC450D162BEB",
             enable: true,
             mode: MenuItemMode.separator,
             multi: false,
@@ -139,7 +139,7 @@ export const DEFAULT_CONFIG: IConfig = {
             ],
         },
         { // 分割线
-            id: "custom-block-separator-2",
+            id: "custom-block-separator-71DD3901-AA75-412F-B764-17346468357D",
             enable: true,
             mode: MenuItemMode.separator,
             multi: true,
@@ -220,5 +220,47 @@ export const DEFAULT_CONFIG: IConfig = {
                 },
             ],
         },
+        { // 分割线
+            id: "custom-block-separator-C55B65F3-4470-4C3A-B6D2-81A760634A11",
+            enable: true,
+            mode: MenuItemMode.separator,
+            multi: true,
+        },
+        { // 书写模式
+            id: "custom-block-writing-mode",
+            enable: true,
+            mode: MenuItemMode.button,
+            multi: true,
+            icon: "iconEdit",
+            accelerator: "writing-mode",
+            token: "writing-mode",
+            type: {
+                default: { enable: false},
+                [sdk.siyuan.NodeType.NodeDocument]: { enable: true },
+                [sdk.siyuan.NodeType.NodeBlockQueryEmbed]: { enable: true },
+                [sdk.siyuan.NodeType.NodeBlockquote]: { enable: true },
+                [sdk.siyuan.NodeType.NodeList]: { enable: true },
+                [sdk.siyuan.NodeType.NodeListItem]: { enable: true },
+                [sdk.siyuan.NodeType.NodeSuperBlock]: { enable: true },
+                [sdk.siyuan.NodeType.NodeHeading]: { enable: true },
+                [sdk.siyuan.NodeType.NodeParagraph]: { enable: true },
+                [sdk.siyuan.NodeType.NodeTable]: { enable: true },
+            },
+            tasks: [
+                {
+                    type: TaskType.switch,
+                    params: {
+                        name: "custom-block-writing-mode",
+                        values: [
+                            "vertical-rl",
+                            "vertical-lr",
+                            // "sideways-rl",
+                            // "sideways-lr",
+                            null,
+                        ],
+                    },
+                },
+            ],
+        },
     ],
 };
diff --git a/src/styles/custom-block-writing-mode.less b/src/styles/custom-block-writing-mode.less
@@ -0,0 +1,48 @@
+// 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/>.
+
+/**
+ * 自定义文字排版模式 writing-mode
+ * REF [writing-mode - CSS（层叠样式表） | MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/writing-mode)
+ * horizontal-tb：(默认)对于左对齐(ltr)文本，内容从左到右水平流动。对于右对齐(rtr)文本，内容从右到左水平流动。下一水平行位于上一行下方。
+ * vertical-rl：对于左对齐(ltr)文本，内容从上到下垂直流动，下一垂直行位于上一行左侧。对于右对齐(rtr)文本，内容从下到上垂直流动，下一垂直行位于上一行右侧。
+ * vertical-lr：对于左对齐(ltr)文本，内容从上到下垂直流动，下一垂直行位于上一行右侧。对于右对齐(rtr)文本，内容从下到上垂直流动，下一垂直行位于上一行左侧。
+ * sideways-rl：对于左对齐(ltr)文本，内容从下到上垂直流动。对于右对齐(rtr)文本，内容从上到下垂直流动。所有字形（即使是垂直文本中的字形）都朝向右侧。 (默认样式顺时针旋转 90°)
+ * sideways-lr：对于左对齐(ltr)文本，内容从上到下垂直流动。对于右对齐(rtr)文本，内容从下到上垂直流动。所有字形（即使是垂直文本中的字形）都朝向左侧。 (默认样式逆时针旋转 90°)
+ */
+
+.writing-mode(@mode) {
+    &[custom-block-writing-mode="@{mode}"] {
+        writing-mode: @mode;
+    }
+}
+
+:root {
+    &[plugin-custom-block~=writing-mode] {
+        .protyle-wysiwyg {
+
+            &,
+            [data-node-id] {
+                .writing-mode(horizontal-tb);
+                .writing-mode(vertical-rl);
+                .writing-mode(vertical-lr);
+
+                // 仅 Firefox 支持
+                .writing-mode(sideways-rl);
+                .writing-mode(sideways-lr);
+            }
+        }
+    }
+}
diff --git a/src/styles/index.less b/src/styles/index.less
@@ -22,3 +22,4 @@
 @import (once) url(./custom-block-render-outline.less);
 @import (once) url(./custom-block-render-scroll.less);
 @import (once) url(./custom-block-width-full.less);
+@import (once) url(./custom-block-writing-mode.less);
diff --git a/src/utils/enums.ts b/src/utils/enums.ts
@@ -28,6 +28,7 @@ export enum TaskType {
 
     update, // 更新块属性 (覆盖整个块属性)
     delete, // 删除块属性 (删除整个块属性)
+    switch, // 切换块属性 (切换整个块属性)
 
     insert, // 插入块属性 (在块属性中插入一个 Token)
     remove, // 移除块属性 (在块属性中移除一个 Token)

diff --git a/src/utils/handlers.ts b/src/utils/handlers.ts
@@ -16,6 +16,8 @@
  */
 
 import Item from "@workspace/components/siyuan/menu/Item.svelte"
+import { Iterator } from "@workspace/utils/misc/iterator";
+
 import type { IBlockMenuContext } from "@workspace/utils/siyuan/menu/block";
 
 import {
@@ -60,6 +62,29 @@ export default {
             });
         });
     },
+    /* 切换块属性 */
+    [TaskType.switch]: async (plugin, _feature, context, params: { name: string, values: (string | null)[] }) => {
+        context.blocks.forEach(async block => {
+            const response = await plugin.client.getBlockAttrs({ id: block.id });
+            const attrs = response.data;
+            let value: string;
+            if (attrs.hasOwnProperty(params.name)) {
+                /* 如果属性已存在, 则切换属性值 */
+                const index = params.values.findIndex(value => value === attrs[params.name]);
+                value = params.values[(index + 1) % params.values.length];
+            }
+            else {
+                /* 属性不存在, 直接更新该属性 */
+                value = params.values[0];
+            }
+            plugin.client.setBlockAttrs({
+                id: block.id,
+                attrs: {
+                    [params.name]: value,
+                },
+            });
+        });
+    },
     /* 增删某个 token */
     [TaskType.toggle]: async (plugin, feature, context, params: { name: string, token: string }) => {
         context.blocks.forEach(async block => {