feat(custom-block): 新增显示块轮廓功能 | Add display block outline function.

Zuoqiu-Yingyi · Jul 5, 2023 · ceff865 · ceff865
1 parent 0bd517d
commit ceff865
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 8 deletions.
diff --git a/public/i18n/en_US.json b/public/i18n/en_US.json
@@ -13,6 +13,9 @@
         "custom-block-render-index": {
             "label": "Display Block Index"
         },
+        "custom-block-render-outline": {
+            "label": "Display Block Outline"
+        },
         "custom-block-render-scroll": {
             "label": "Scrolling Display"
         },

diff --git a/public/i18n/zh_CHT.json b/public/i18n/zh_CHT.json
@@ -13,6 +13,9 @@
         "custom-block-render-index": {
             "label": "顯示塊序號"
         },
+        "custom-block-render-outline": {
+            "label": "顯示塊輪廓"
+        },
         "custom-block-render-scroll": {
             "label": "滾屏顯示"
         },

diff --git a/public/i18n/zh_CN.json b/public/i18n/zh_CN.json
@@ -13,6 +13,9 @@
         "custom-block-render-index": {
             "label": "显示块序号"
         },
+        "custom-block-render-outline": {
+            "label": "显示块轮廓"
+        },
         "custom-block-render-scroll": {
             "label": "滚屏显示"
         },

diff --git a/src/configs/default.ts b/src/configs/default.ts
@@ -159,5 +159,23 @@ export const DEFAULT_CONFIG: IConfig = {
                 },
             ],
         },
+        { // 显示块轮廓
+            id: "custom-block-render-outline",
+            enable: true,
+            mode: MenuItemMode.button,
+            multi: true,
+            icon: "iconMax",
+            accelerator: "render: outline",
+            token: "render-outline",
+            tasks: [
+                {
+                    type: TaskType.toggle,
+                    params: {
+                        name: "custom-block-render",
+                        token: "outline",
+                    },
+                },
+            ],
+        },
     ],
 };
diff --git a/src/styles/custom-block-render-content.less b/src/styles/custom-block-render-content.less
@@ -26,12 +26,12 @@
 
                 &[data-node-id],
                 & [data-node-id] {
-                    .render(data-content);
+                    .render-attr(data-content);
 
                     /* 块级元素 */
                     /* HTML 块 */
                     .protyle-html {
-                        .render(data-content);
+                        .render-attr(data-content);
                     }
 
                     /* 行级元素 */
@@ -41,13 +41,13 @@
 
                     span {
                         /* 超链接 */
-                        .render(data-href);
+                        .render-attr(data-href);
 
                         /* 行级备注 */
-                        .render(data-inline-memo-content);
+                        .render-attr(data-inline-memo-content);
 
                         /* 公式内容 */
-                        .render(data-content);
+                        .render-attr(data-content);
                     }
                 }
             }

diff --git a/src/styles/custom-block-render-id.less b/src/styles/custom-block-render-id.less
@@ -26,7 +26,7 @@
 
                 &,
                 & * {
-                    .render(data-node-id);
+                    .render-attr(data-node-id);
                 }
             }
         }

diff --git a/src/styles/custom-block-render-index.less b/src/styles/custom-block-render-index.less
@@ -24,7 +24,7 @@
             &[custom-block-render~=index] {
 
                 >* {
-                    .render(data-node-index, ~"::before");
+                    .render-attr(data-node-index, ~"::before");
                 }
             }
         }

diff --git a/src/styles/custom-block-render-outline.less b/src/styles/custom-block-render-outline.less
@@ -0,0 +1,38 @@
+// 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/>.
+
+/* 显示块 ID */
+:root {
+
+    &[plugin-custom-block~=render-outline] {
+        .protyle-wysiwyg {
+
+            &[custom-block-render~=outline],
+            [custom-block-render~=outline] {
+
+                &[data-node-id],
+                & [data-node-id] {
+                    margin: 2px !important;
+                    padding: 2px !important;
+                    outline: 1px dotted var(--b3-theme-on-surface);
+
+                    &:hover {
+                        outline-style: solid;
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/styles/index.less b/src/styles/index.less
@@ -19,4 +19,5 @@
 @import (once) url(./custom-block-render-danmaku.less);
 @import (once) url(./custom-block-render-id.less);
 @import (once) url(./custom-block-render-index.less);
+@import (once) url(./custom-block-render-outline.less);
 @import (once) url(./custom-block-render-scroll.less);
diff --git a/src/styles/utils.less b/src/styles/utils.less
@@ -13,7 +13,7 @@
 // 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/>.
 
-.render(@attr, @pseudo: ~"::after") {
+.render-attr(@attr, @pseudo: ~"::after") {
     @selecter: ~"[@{attr}]";
 
     &@{selecter} {