feat(typewriter): 适配属性视图 | Adapt to the attribute view.

Author: Zuoqiu-Yingyi

public/README.md

@@ -95,14 +95,18 @@ This is a plug-in for [SiYuan Note](https://github.com/siyuan-note/siyuan) that
   * `Enable Typewriter Mode`
 
     * When enabled, the block where the cursor is located will automatically scroll to the middle of the editor while editing
-  * `Code Block Focus Follows Line`
+  * `Code Block Line Focus Follow`
 
     * When enabled, the line of code where the cursor is located will be scrolled to the middle of the editor while editing a code block
     * When disabled, the code block will be scrolled to the middle of the editor while editing a code block
-  * `Table Block Focus Follows Cell`
+  * `Table Block Cell Focus Follow`
 
     * When enabled, the table cell where the cursor is located will be scrolled to the middle of the editor while editing a table block
     * When disabled, the table block will be scrolled to the middle of the editor while editing a table block
+  * `Database Block Cell Focus Follow`
+
+    * When enabled, the cell where the cursor is located will be scrolled to the middle of the editor while editing a database block (property view).
+    * When disabled, the entire database block will be scrolled to the middle of the editor while editing a database block (property view).
   * `Scroll Delay`
 
     * After the cursor moves to another block, the block where the cursor is located will scroll to the middle of the editor after a certain delay

public/README_zh_CN.md

@@ -101,8 +101,12 @@
     * 关闭后在编辑代码块时, 将该代码块滚动至编辑区中间
   * `表格块焦点跟随单元格`
 
-    * 开启后在编辑表格块时, 将光标所在的表格单元格滚动至编辑器中间
-    * 开启后在编辑表格块时, 将该表格块滚动至编辑区中间
+    * 开启后在编辑表格块时, 将光标所在的表格单元格滚动至编辑区中间
+    * 关闭后在编辑表格块时, 将该表格块滚动至编辑区中间
+  * `数据库焦点跟随单元格`
+
+    * 开启后在编辑数据库块(属性视图)时, 将光标所在的单元格滚动至编辑区中间
+    * 关闭后在编辑数据库块(属性视图)时, 将该数据库块滚动至编辑区中间
   * `滚动延时时间`
 
     * 当光标位置移动至其他块时, 经过一定延时后光标所在的块再滚动至编辑区中间

public/i18n/en_US.json

@@ -27,22 +27,26 @@
         },
         "typewriterSettings": {
             "code": {
-                "description": "Scroll line by line when focus is inside a code block",
-                "title": "Code Block Line Focus"
+                "description": "Scroll in lines when focus is inside a code block",
+                "title": "Code Block Line Focus Follow"
             },
             "enable": {
                 "description": "When Typewriter Mode is enabled, the block with focus will automatically scroll to the middle of the editing area",
                 "title": "Enable Typewriter Mode"
             },
             "table": {
-                "description": "Scroll cell by cell when focus is inside a table block",
-                "title": "Table Block Cell Focus"
+                "description": "Scroll in cells when focus is inside a table block",
+                "title": "Table Block Cell Focus Follow"
             },
             "timeout": {
                 "description": "Set the time interval between edit actions and the start of scrolling.<br/>Unit: milliseconds",
                 "title": "Scroll Delay Time"
             },
-            "title": "Typewriter"
+            "title": "Typewriter",
+            "view": {
+                "description": "Scroll in cells when the focus is inside the database block",
+                "title": "Database Block Cell Focus"
+            }
         }
     }
 }

public/i18n/zh_CHT.json

@@ -42,7 +42,11 @@
                 "description": "設置編輯操作與開始滾動之間的時間間隔<br/>單位：毫秒",
                 "title": "滾動延時時間"
             },
-            "title": "打字機設置"
+            "title": "打字機設置",
+            "view": {
+                "description": "焦點位於數據庫塊內部時以單元格為單位進行滾動",
+                "title": "數據庫焦點跟隨單元格"
+            }
         }
     }
 }

public/i18n/zh_CN.json

@@ -42,7 +42,11 @@
                 "description": "设置编辑操作与开始滚动之间的时间间隔<br/>单位：毫秒",
                 "title": "滚动延时时间"
             },
-            "title": "打字机设置"
+            "title": "打字机设置",
+            "view": {
+                "description": "焦点位于数据库块内部时以单元格为单位进行滚动",
+                "title": "数据库焦点跟随单元格"
+            }
         }
     }
 }

src/components/Settings.svelte

@@ -176,6 +176,23 @@
             />
         </Item>
 
+        <!-- 属性表焦点跟随单元格 -->
+        <Item
+            title={i18n.settings.typewriterSettings.view.title}
+            text={i18n.settings.typewriterSettings.view.description}
+        >
+            <Input
+                slot="input"
+                type={ItemType.checkbox}
+                settingKey="view"
+                settingValue={config.typewriter.view.row}
+                on:changed={async e => {
+                    config.typewriter.view.row = e.detail.value;
+                    await updated();
+                }}
+            />
+        </Item>
+
         <!-- 滚动延时时间 -->
         <Item
             title={i18n.settings.typewriterSettings.timeout.title}

src/configs/default.ts

@@ -27,6 +27,9 @@ export const DEFAULT_CONFIG: IConfig = {
         table: {
             row: true,
         },
+        view: {
+            row: true,
+        },
     },
     focus: {
         enable: true,

src/index.less

@@ -23,6 +23,11 @@
     --custom-focus-table-row-outline-color: var(--b3-theme-on-surface); // 焦点所在表格行的轮廓颜色
 
     --custom-focus-table-cell-shadow-blur: 0.25em; // 焦点所在表格单元格的阴影模糊半径
+
+    --custom-focus-view-row-outline-width: 1px; // 焦点所在属性视图行的轮廓宽度
+    --custom-focus-view-row-outline-color: var(--b3-theme-on-surface); // 焦点所在属性视图行的轮廓颜色
+
+    --custom-focus-view-cell-shadow-blur: 0.25em; // 焦点所在属性视图单元格的阴影模糊半径
 }
 
 .protyle-wysiwyg {
@@ -62,5 +67,26 @@
                 }
             }
         }
+
+        &.av {
+            .av__row {
+                &:has(.av__cell[data-plugin-focus=true]) {
+                    // 焦点所在属性视图行
+                    outline: var(--custom-focus-view-row-outline-width) solid var(--custom-focus-table-row-outline-color);
+                }
+
+                .av__cell {
+                    &[data-plugin-focus=true] {
+                        // 焦点所在属性视图单元格
+                        box-shadow: 0 0 var(--custom-focus-view-cell-shadow-blur) 0 var(--custom-focus-shadow-color) inset;
+                    }
+
+                    &#plugin-focus-unique-id {
+                        // 全局唯一焦点所在属性视图单元格
+                        box-shadow: 0 0 var(--custom-focus-view-cell-shadow-blur) 0 var(--custom-focus-unique-shadow-color) inset;
+                    }
+                }
+            }
+        }
     }
 }

src/index.ts

@@ -358,6 +358,11 @@ export default class TypewriterPlugin extends siyuan.Plugin {
                         element = cell ?? block;
                         break;
                     }
+                    case "NodeAttributeView": {
+                        const cell = block.querySelector<HTMLElement>(".av__cell--select");
+                        element = cell ?? block;
+                        break;
+                    }
                     default:
                         element = block;
                         break;
@@ -426,7 +431,7 @@ export default class TypewriterPlugin extends siyuan.Plugin {
                         }
                         break;
                     case "NodeTable":
-                        if (this.config.typewriter.table.row) { // 定位到行
+                        if (this.config.typewriter.view.row) { // 定位到行
                             let focus = globalThis.getSelection()?.focusNode;
                             while (true) {
                                 if (!focus) { // 元素不存在
@@ -444,6 +449,12 @@ export default class TypewriterPlugin extends siyuan.Plugin {
                             element = focus ?? block;
                         }
                         break;
+                    case "NodeAttributeView":
+                        if (this.config.typewriter.table.row) { // 定位到行
+                            const focus = block.querySelector<HTMLElement>(".av__cell--select");
+                            element = focus ?? block;
+                        }
+                        break;
                     default:
                         break;
                 }

src/types/config.d.ts

@@ -24,6 +24,7 @@ export interface ITypewriter {
     timeout: number; // 延时 (ms)
     code: IBlockConfig; // 代码块
     table: IBlockConfig; // 表格块
+    view: IBlockConfig; // 属性视图块
 }
 
 export interface IFocus {