v0.2.0; check changelog in readme

README.md

@@ -4,4 +4,9 @@
 A SiYuan Plugin to auto generate sequence number for titles.
 
 ## Usage
-Just turn on the plugin, and refresh the page.
+Just turn on the plugin, and refresh the page.
+
+## Change Log
+### 0.2.0
+- change event bus to `loaded-protyle-static`([#1](https://github.com/dale0525/siyuan-auto-seq-number/issues/1))
+- display seq number using `::befor` and cache result using SessionStorage, so that the seq number won't be reset when focusing on a block([#2](https://github.com/dale0525/siyuan-auto-seq-number/issues/2), [#3](https://github.com/dale0525/siyuan-auto-seq-number/issues/1))

README_zh_CN.md

@@ -4,4 +4,8 @@
 自动为标题生成序号的思源笔记插件。
 
 ## 使用方法
-打开插件，刷新页面即可。
+打开插件，刷新页面即可。
+
+## 更新日志
+- 触发事件改为`loaded-protyle-static`([#1](https://github.com/dale0525/siyuan-auto-seq-number/issues/1))
+- 改用::before伪元素实现序号，并使用SessionStorage缓存序号，避免聚焦时序号重置([#2](https://github.com/dale0525/siyuan-auto-seq-number/issues/2), [#3](https://github.com/dale0525/siyuan-auto-seq-number/issues/1))

package.json

@@ -1,6 +1,6 @@
 {
     "name": "siyuan-auto-seq-number",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "description": "A SiYuan Plugin to auto generate sequence number for titles",
     "main": ".src/index.js",
     "scripts": {

plugin.json

@@ -2,7 +2,7 @@
   "name": "siyuan-auto-seq-number",
   "author": "Logic Tan",
   "url": "https://github.com/dale0525/siyuan-auto-seq-number",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "minAppVersion": "2.11.1",
   "backends": [
     "all"

src/index.scss

@@ -0,0 +1,7 @@
+.protyle-wysiwyg [data-node-id].h1:before, .protyle-wysiwyg [data-node-id].h2:before, .protyle-wysiwyg [data-node-id].h3:before, .protyle-wysiwyg [data-node-id].h4:before, .protyle-wysiwyg [data-node-id].h5:before, .protyle-wysiwyg [data-node-id].h6:before,
+.b3-typography h1:before, .b3-typography h2:before, .b3-typography h3:before, .b3-typography h4:before, .b3-typography h5:before, .b3-typography h6:before
+{
+    display: block;
+    float: left;
+    content: attr(seq-num) "\00a0";
+}

src/index.ts

@@ -1,35 +1,57 @@
 import {
     Plugin,
 } from "siyuan";
+import "./index.scss";
 
 export default class AutoSeqNumPlugin extends Plugin {
 
-    onLoadedProtyleBindThis = this.onLoadedProtyle.bind(this);
+    private seq_num: Object = {};
+
+    onLoadedProtyleStaticBindThis = this.onLoadedProtyleStatic.bind(this);
+    onSwitchProtyleBindThis = this.onSwitchProtyle.bind(this);
 
     onload() {
-        this.eventBus.on("switch-protyle", this.onLoadedProtyleBindThis);
+        this.eventBus.on("loaded-protyle-static", this.onLoadedProtyleStaticBindThis);
+        this.eventBus.on("switch-protyle", this.onSwitchProtyleBindThis);
     }
 
     onunload() {
-        this.eventBus.off("switch-protyle", this.onLoadedProtyleBindThis);
+        this.eventBus.off("loaded-protyle-static", this.onLoadedProtyleStaticBindThis);
+        this.eventBus.off("switch-protyle", this.onSwitchProtyleBindThis);
+    }
+
+    async onSwitchProtyle({detail}: any){
+        sessionStorage.removeItem('seq-num');
     }
 
-    async onLoadedProtyle({detail}: any){
+    async onLoadedProtyleStatic({detail}: any){
         let pageHtml = detail.protyle.element;
-        // console.log(pageHtml);
-        if (pageHtml.getAttribute('seq-num') === 'true') {
-            return;
-        }
+        this.addSeqNum(pageHtml);
+    }
 
+    addSeqNum(html: any) {
         // 初始化计数器
         let counters = [0, 0, 0, 0, 0, 0];
 
         // 获取所有标题元素
-        let headers = pageHtml.querySelectorAll('.h1, .h2, .h3, .h4, .h5, .h6');
-        // console.log(headers);
+        let headers = html.querySelectorAll('.protyle-wysiwyg [data-node-id].h1, .protyle-wysiwyg [data-node-id].h2, .protyle-wysiwyg [data-node-id].h3, .protyle-wysiwyg [data-node-id].h4, .protyle-wysiwyg [data-node-id].h5, .protyle-wysiwyg [data-node-id].h6');
+
+        let seq_num_storage = sessionStorage.getItem('seq-num');
+        if(seq_num_storage !== null) {
+            this.seq_num = JSON.parse(seq_num_storage);
+        }
 
         // 遍历所有标题元素
         for (let i = 0; i < headers.length; i++) {
+            const element_id = headers[i].getAttribute('data-node-id');
+            if(element_id === null) {
+                continue;
+            }
+            if (this.seq_num[element_id] !== undefined) {
+                headers[i].setAttribute('seq-num', this.seq_num[element_id]);
+                continue;
+            }
+
             // 获取当前标题的级别
             let level = parseInt(headers[i].className.charAt(1));
 
@@ -56,10 +78,10 @@ export default class AutoSeqNumPlugin extends Plugin {
                 number = number.substring(0, number.length - 1);
             }
 
-            // 在标题前添加编号
-            headers[i].innerText = headers[i].innerText.replace('\n', '');
-            headers[i].innerText = number + ' ' + headers[i].innerText;
+            // 设置dom元素的编号属性，通过css伪类来显示编号
+            headers[i].setAttribute('seq-num', number);
+            this.seq_num[element_id] = number;
         }
-        pageHtml.setAttribute('seq-num', 'true');
+        sessionStorage.setItem('seq-num', JSON.stringify(this.seq_num));
     }
 }