思源笔记格式刷插件开发笔记

最近看社区有格式刷需求,以及自己也有需求,因此开发了格式刷插件:Achuan-2/siyuan-plugin-formatPainter: Use the format painter to batch apply styles (github.com)

觉得好用的欢迎点个 star

思源笔记格式刷插件.gif

自己没正经学过 js,很大部分靠 GPT 实现的代码

下面整理下自己的开发笔记,欢迎大家互相交流学习

开发笔记

  • ❓ 如何设置选中内容的样式 protyle.toolbar.setInlineMark

    • 设置行内块样式
      // datatype:"kbd", "text", "strong", "em", "u", "s", "mark", "sup", "sub", "code"
      this.protyle.toolbar.setInlineMark(this.protyle, datatype, "range");
      
    • 设置背景颜色
      this.protyle.toolbar.setInlineMark(this.protyle, "text", "range", {
          "type": "backgroundColor",
          "color": backgroundColor
      });
      
    • 设置字体颜色
      this.protyle.toolbar.setInlineMark(this.protyle, "text", "range", {
          "type": "color",
          "color": color
      });
      
    • 设置字体大小
      this.protyle.toolbar.setInlineMark(this.protyle, "text", "range", {
          "type": "fontSize",
          "color": fontSize
      });
      
    • 输入 style,如何自动设置背景色、字体色、字体大小
      const { backgroundColor, color, fontSize } = parseStyle(this.formatData.style);
      // console.log(backgroundColor, color, fontSize);
      
      if (backgroundColor) {
          this.protyle.toolbar.setInlineMark(this.protyle, "text", "range", {
              "type": "backgroundColor",
              "color": backgroundColor
          });
      }
      
      if (color) {
          this.protyle.toolbar.setInlineMark(this.protyle, "text", "range", {
              "type": "color",
              "color": color
          });
      }
      
      if (fontSize) {
          this.protyle.toolbar.setInlineMark(this.protyle, "text", "range", {
              "type": "fontSize",
              "color": fontSize
          });
      }
      }
      
      
      function parseStyle(styleString) {
          const styles = styleString.split(';').filter(s => s.trim() !== '');
          const styleObject = {};
      
          styles.forEach(style => {
              const [property, value] = style.split(':').map(s => s.trim());
              styleObject[property] = value;
          });
      
          return {
              backgroundColor: styleObject['background-color'],
              color: styleObject['color'],
              fontSize: styleObject['font-size']
          };
      }
      
  • ❓ 如何获取选中文本的样式,并且如果返回的节点是 span,则提取出其 data-type 和 style 内容

    对数学公式块做了特别处理,因为数学公式块的的 range.startContainer 是它前面的节点而不是它自己,会导致获取节点错误。

    function getSelectedParentHtml() {
        const selection = window.getSelection();
        if (selection.rangeCount > 0) {
            const range = selection.getRangeAt(0);
            let selectedNode = range.startContainer;
            const endNode = range.endContainer;
    
            // 检查 endNode 的 previousSibling
            if (endNode.previousSibling && endNode.previousSibling.nodeType === Node.ELEMENT_NODE) {
                const previousSibling = endNode.previousSibling;
                if (previousSibling.tagName.toLowerCase() === "span" && previousSibling.classList.contains("render-node")) {
                    selectedNode = previousSibling;
                }
            }
    
            let parentElement = selectedNode.nodeType === Node.TEXT_NODE ? selectedNode.parentNode : selectedNode;
            while (parentElement && !parentElement.hasAttribute("data-type")) {
                parentElement = parentElement.parentElement;
            }
    
            if (parentElement && parentElement.tagName.toLowerCase() === "span") {
                const result = {
                    html: parentElement.outerHTML,
                    datatype: parentElement.getAttribute("data-type"),
                    style: parentElement.getAttribute("style")
                };
                // 清空选区
                selection.removeAllRanges();
                return result;
            }
        }
        // 清空选区
        selection.removeAllRanges();
        return null;
    }
    
  • ❓ 设置格式刷模式

    • 设置格式刷模式变量:搞一个变量 FormatPainterEnable,默认为 false,点击时如果为 false,则获取选中文本的其 data-subtype 和 style 内容,FormatPainterEnable=true。
    • 之后选中文本并抬起鼠标后进行格式刷操作:监听 mouseup 和 window.getSelection();
    • 按 esc 键,退出格式刷模式,设置 FormatPainterEnable=false:监听 esc 键按下,如果 FormatPainterEnable=true 则设置为 false;
  • ❓ 如何进入格式刷和退出格式刷模式推送信息

    import {
        fetchPost,
    } from "siyuan";
    
    // 进入格式刷模式
    fetchPost("/api/notification/pushErrMsg", { "msg": this.i18n.enable, "timeout": 7000 });
    // 退出格式刷模式
    fetchPost("/api/notification/pushMsg", { "msg": this.i18n.disable, "timeout": 7000 });
    
    
  • ❓ 点击格式刷,如何关闭工具栏?

    // 关闭toolbar
    // 选择所有具有 .protyle-toolbar 类的元素
    const toolbarElements = document.querySelectorAll('.protyle-toolbar');
    
    // 遍历选中的元素
    toolbarElements.forEach(element => {
        // 检查元素是否没有 .fn__none 类
        if (!element.classList.contains('fn__none')) {
            // 如果没有 .fn__none 类,则添加它
            element.classList.add('fn__none');
        }
    });
    
    
  • ❓ 如何修改光标
    用 css 修改,因为 js 修改如果新打开窗口,就不方便再修改了

    • 启动格式刷时,给 body 添加自定义属性 formatPainterEnable=true, 通过 css 更改光标
    • 禁用格式刷,给 body 添加自定义属性 formatPainterEnable=false,通过 css 改回光标
    body[data-format-painter-enable="true"] .protyle-wysiwyg {
      cursor: url("plugins/siyuan-plugin-formatPainter/assets/formatPainter_mouse2.png"), auto;
    }
    
    body[data-format-painter-enable="false"] .protyle-wysiwyg {
      cursor: auto;
    }
    
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22928 引用 • 92180 回帖 • 1 关注
3 操作
Achuan-2 在 2024-10-11 13:40:40 更新了该帖
Achuan-2 在 2024-10-11 11:26:05 更新了该帖
Achuan-2 在 2024-10-11 11:17:39 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • feiyuqazx

    看着很好啊,支持楼主。

    1 回复
  • Achuan-2

    谢谢支持

  • 感谢你对社区的贡献

  • jidenanian

    感谢思源有你,思源未来会越来越好

  • EmptyLight

    给个猜想:行内数学公式的样式主要是用 $$ 包裹构成的,不需要单独设置样式,可以前后添加数学公式的标志转换成数学公式。

    既然有了这个思路,行内代码也是差不多的道理,添加代码的标志(`)包裹起来也可以达到效果。

    思路具体没有测试过,可能需要通过 api 获取当前块内容,添加标志,然后通过 api 写回块。不然可能会有一点保存问题?

    1 回复
  • Achuan-2

    目前是可以设置数学公式样式,但问题是我不知道当前选中的内容是不是数学公式

    我目前的方式获取当前选中文字的父块,但对于行内数学公式,得到的块却是前面的行内块,而不是它的父块

  • langxin

    这个给力!

  • Zenez

    顶顶

  • RH108

    太强了 👍

  • 开发大佬,提个 bug,加粗后用格式刷双击给其它内容赋格式,会导致内容缩小右移,且无法选中。

    1 回复
  • winds

    感谢大佬对思源的贡献!

  • Tisamn

    感谢大佬,刚好需要!

  • Floria233

    期待后续更新,这些 css 以后可以融入到插件吗?因为目前装的 css 已经很多鸟,管理压力有点大鸟

  • Achuan-2

    谢谢反馈,已经修复了。下午就可以在集市更新
    抄了下思源的代码,粘贴过去,竟然能用,真神奇哈哈哈

    1 回复
    1 操作
    Achuan-2 在 2024-10-11 11:23:32 更新了该回帖
  • hefeng

    虽然我不太需要,但还是感谢大佬的贡献

  • SU-Arron

    支持,感谢。

  • zxkmm 1 赞同

    感谢 Achuan 佬。已点星星。写了一个 PR, 求合并:

    • 添加一个指示图案,当格式刷启动时候,dock 栏的指示图案渐变闪烁
    • 点击指示图案关闭格式刷
    • gitignore 添加 pnpm lock 文件

    Pull Request #1 · Achuan-2/siyuan-plugin-formatPainter

  • 赞!~ 楼上的更新也很不错

  • AndyImpossible

    虽然我不太需要,但还是感谢大佬的贡献 👍

  • wenbocn

    请问格式刷启用时能否更改一下鼠标形状来区分,取消右上角的弹窗文字提示?

    1 回复
  • Achuan-2 1 赞同

    启用格式刷,鼠标形状会改变的,之前有点 bug,相关文件没有打包,导致只有我本地能用,你们下载了没有这个功能

    现在已经修复了

    弹窗文字我暂时觉得还是觉得应该启用,提示用户

  • Muu

    image.png

    与这个插件好似有点冲突

  • 大佬,这个评论按钮是什么插件?

    image.png

    1 回复
  • Achuan-2

    自己写的加脚注插件,用块引实现,把生成的脚注统一放在一个文档里,没上集市,和集市的备注增强插件差不多,根据我需要自定义样式和存放位置

  • 在思源里实现嵌套表格是完全不可能的吗?

请输入回帖内容 ...
Achuan-2
给时间以生命而不是给生命以时间,如果你喜欢我的分享,欢迎给我买杯咖啡 https://www.yuque.com/achuan-2 上海

推荐标签 标签

  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 26 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    692 引用 • 535 回帖
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 355 关注
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 54 回帖 • 49 关注
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    77 引用 • 430 回帖
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    6 引用 • 63 回帖 • 6 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    166 引用 • 595 回帖 • 1 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 156 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 26 关注
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 634 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 624 关注
  • 音乐

    你听到信仰的声音了么?

    61 引用 • 511 回帖
  • Spring

    Spring 是一个开源框架,是于 2003 年兴起的一个轻量级的 Java 开发框架,由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构,分层架构允许使用者选择使用哪一个组件,同时为 JavaEE 应用程序开发提供集成的框架。

    943 引用 • 1460 回帖 • 6 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。

    10 引用 • 5 回帖 • 3 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 693 关注
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 221 关注
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 585 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖 • 1 关注
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    91 引用 • 751 回帖
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    6 引用 • 14 回帖
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    20 引用 • 7 回帖 • 1 关注
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖