🔖 v1.0.0

CHANGELOG.md

@@ -1,15 +1,19 @@
 TODO
 - [ ] 支持对块进行脚注
+- [ ] 有没有办法悬浮脚注blockref，就高亮被脚注的内容
 
 
 ## v1.0.0 / 2024.11.18
 
-- 实现基本功能、
-  - 脚注存放位置：可以设置存放在当前文档或者指定文档，默认为当前文档
-  - 选中文本的样式：可以选中加粗、高亮、斜体、下划线样式，默认无样式
-  - 插入脚注的顺序：顺序或者倒序，默认为顺序
-  - 脚注模板：设置脚注的模板，推荐使用引述块或超级块组合，保证脚注内容属于同一个块，默认使用嵌套引述块模板，可以自行更改，`${selection}`表示选中文本的内容，`${content}`代表脚注内容占位
-- 支持使用界面设置
-    ![](https://fastly.jsdelivr.net/gh/Achuan-2/PicBed/assets/PixPin_2024-11-18_13-15-16-2024-11-18.png)
-- 支持删除脚注
+**实现基本功能**
+- 设置个性化设置
+  - **脚注存放位置**：可以设置存放在当前文档或者指定文档，默认为`当前文档`
+  - **选中文本的样式**：可以选中加粗、高亮、斜体、下划线样式，默认：`无样式`
+  - **插入脚注的顺序**：顺序或者倒序，默认：`顺序`
+  - **脚注标题**：设置存放脚注的标题，默认：`脚注`
+  - **脚注块引锚文本**：设置脚注引用的锚文本，默认：`注`
+  - **脚注内容模板**：设置脚注的模板，推荐使用引述块或超级块组合，保证脚注内容属于同一个块，默认使用嵌套引述块模板，可以自行更改，`${selection}`表示选中文本的内容，`${content}`代表脚注内容占位
+
+    ![](https://fastly.jsdelivr.net/gh/Achuan-2/PicBed/assets/PixPin_2024-11-18_16-46-42-2024-11-18.png)
+- **支持删除脚注**
   ![](https://fastly.jsdelivr.net/gh/Achuan-2/PicBed/assets/PixPin_2024-11-18_15-35-31-2024-11-18.png)

src/index.ts

@@ -21,8 +21,9 @@ export default class PluginMemo extends Plugin {
 
     private isMobile: boolean;
     private settingUtils: SettingUtils;
+    private memoRangeMap: Map<string, Range> = new Map(); // 存储脚注id与原文range的映射
     // 添加自定义svg
-    
+
     // 添加工具栏按钮
     updateProtyleToolbar(toolbar: Array<string | IMenuItem>) {
         toolbar.push(
@@ -172,12 +173,12 @@ export default class PluginMemo extends Plugin {
 
         this.isMobile = frontEnd === "mobile" || frontEnd === "browser-mobile";
 
-        
+
         this.eventBus.on("open-menu-blockref", this.deleteMemo.bind(this)); // 注意：事件回调函数中的 this 指向发生了改变。需要bind
 
-        // 添加悬浮事件监听
-        this.eventBus.on("mouseenter-block-ref", this.highlightMemo);
-        this.eventBus.on("mouseleave-block-ref", this.unhighlightMemo);
+        // 删除不��在的事件监听
+        // this.eventBus.on("mouseenter-block-ref", this.highlightMemo);
+        // this.eventBus.on("mouseleave-block-ref", this.unhighlightMemo);
     }
 
     onLayoutReady() {
@@ -188,7 +189,7 @@ export default class PluginMemo extends Plugin {
 
 
     private deleteMemo = ({ detail }: any) => {
-        if (detail.element && detail.element.style.cssText.indexOf("memo") !=-1) {
+        if (detail.element && detail.element.style.cssText.indexOf("memo") != -1) {
             detail.menu.addItem({
                 icon: "iconTrashcan",
                 label: this.i18n.deleteFootnote,
@@ -200,6 +201,21 @@ export default class PluginMemo extends Plugin {
             });
         }
     }
+    private saveSelectionRange(id: string) {
+        const selection = window.getSelection();
+        if (selection.rangeCount > 0) {
+            const range = selection.getRangeAt(0).cloneRange();
+            this.memoRangeMap.set(id, range);
+        }
+    }
+
+    private highlightRange(range: Range) {
+        const span = document.createElement('span');
+        span.style.backgroundColor = "var(--b3-theme-primary-light)";
+        range.surroundContents(span);
+        return span;
+    }
+
     private async addMemoBlock(protyle: IProtyle) {
 
         await this.settingUtils.load(); //导入配置
@@ -260,7 +276,7 @@ export default class PluginMemo extends Plugin {
         if (query_res.length == 0) {
             // 添加h2标题
             headingID = (await appendBlock("markdown", `
-## ${this.settingUtils.get("footnoteTitle")}`, docID))[0].doOperations[0].id; 
+## ${this.settingUtils.get("footnoteTitle")}`, docID))[0].doOperations[0].id;
             // 添加脚注标题属性
             await setBlockAttrs(headingID, { "custom-plugin-memo-parent": "true" });
         } else {
@@ -320,7 +336,29 @@ export default class PluginMemo extends Plugin {
         let memoELement = protyle.element.querySelector(`span[data-id="${newBlockId}"]`)
         if (memoELement) {
             memoELement.setAttribute("style", "--memo: 1");
+            let highlightSpan: HTMLElement = null;
+
+            memoELement.addEventListener('mouseenter', () => {
+                const savedRange = this.memoRangeMap.get(newBlockId);
+                if (savedRange) {
+                    highlightSpan = this.highlightRange(savedRange.cloneRange());
+                }
+            });
+
+            memoELement.addEventListener('mouseleave', () => {
+                if (highlightSpan) {
+                    // 移除高亮span,保留内容
+                    const parent = highlightSpan.parentNode;
+                    while (highlightSpan.firstChild) {
+                        parent.insertBefore(highlightSpan.firstChild, highlightSpan);
+                    }
+                    parent.removeChild(highlightSpan);
+                    highlightSpan = null;
+                }
+            });
         }
+        // 在创建blockref前保存选中文本的range
+        this.saveSelectionRange(newBlockId);
         // 保存
         saveViaTransaction(memoELement)
         // 关闭工具栏
@@ -368,23 +406,6 @@ export default class PluginMemo extends Plugin {
         selection.removeAllRanges();
         return null;
     }
-
-    private highlightMemo = ({ detail }: any) => {
-        const element = detail.target;
-        // 检查是否是脚注引用
-        if (element && element.style.cssText.indexOf("memo") !== -1) {
-            // 给引用添加高亮样式
-            element.style.backgroundColor = "var(--b3-theme-primary-light)";
-        }
-    }
-
-    private unhighlightMemo = ({ detail }: any) => {
-        const element = detail.target; 
-        if (element && element.style.cssText.indexOf("memo") !== -1) {
-            // 移除高亮样式
-            element.style.backgroundColor = "";
-        }
-    }
 }