[js] 思源复制内容添加块链接

Clip20241120192957.png

效果:复制的内容直接转为 anki 的可制卡形式,并在末尾添加块链接

简单适配了行级公式块

Clip20241120201300.png

  • 功能
    • 复制内容末尾添加所在块的外链
    • 将标记内容处理为挖空

Clip20241120202218.png

设置 solveAnki 为 false 时,链接为 markdown 形式。

代码如下

!(function () {
  const solveAnki = true;
  document.addEventListener(
    "copy",
    async (event) => {
      // 定位所属块
      const selection = window.getSelection().toString();
      let ids = [];

      if (selection) {
        const div = document.querySelectorAll(".protyle-breadcrumb__text");
        let max = 0;
        let cur_el = null;
        div.forEach((item, index) => {
          const text = item.innerText;
          const similarity = similarityString(selection, text);
          if (similarity > max) {
            max = similarity;
            cur_el = item;
          }
        });
        const par = cur_el.parentElement;
        let id = par.getAttribute("data-node-id");
        ids.push(id);
      } else {
        const select = document.querySelectorAll(".protyle-wysiwyg--select");
        select.forEach((item) => {
          const id = item.getAttribute("data-node-id");
          ids.push(id);
        });
        console.log("ids", ids);
      }
      setTimeout(async () => {
        try {
          // 使用 Clipboard API 获取思源处理后复制内容
          const clipboardText = await navigator.clipboard.readText();
          //   根据硬换行添加id链接
          let block_mode = false;
          const lines = clipboardText.split("\n");
          let result = "";

          lines.forEach((line, index) => {
            // 判断块级内容的开始与结束

            if (line.endsWith("$$")) {
              block_mode = !block_mode;
              if (block_mode) {
                line = line.replace(/\$\$$/, "\\[");
              } else {
                line = line.replace(/\$\$$/, "\\]");
              }
            }
            // 行首为 * - > 时,移除
            line = line.replace(/^\s*[\*\-\>]\s*/, "");
            if (line) {
              id = ids[index];
              link = "";
              if (id) {
                link = solveAnki
                  ? `<a href="siyuan://blocks/${id}">*</a><br/>`
                  : `[*](siyuan://blocks/${id})\n`;
              }
              result += `${line} ${block_mode ? "\n" : link}`;
            }
          });

          if (solveAnki) {
            var re = /\=\=(.*?)\=\=/g;
            var count = 1;
            // 随机变量==可能的取值数量==**可数**时称为**离散型随机变量**。
            result = result.replace(re, function (match, p1) {
              return "{{c" + count++ + "::" + p1 + "}}";
            });

            // 移除高亮包裹的span标签
            result = result.replace(/<span.*?>/g, "");
            result = result.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>");
            // $$包裹的内容转换为\[\] (多行匹配)
            // result = result.replace(/\$\$(.*?)\$\$/g, "\\[$1\\]");

            // 将$、包裹的内容转换为\(\)
            result = result.replace(/\$(.*?)\$/g, "\\($1\\)");

            // 若存在$$, 将其中的空格移除, 替换为\[\]
          }
          navigator.clipboard.writeText(result);
        } catch (err) {
          console.error("读取剪贴板内容失败:", err);
        }
      }, 100);
    },
    { passive: false, capture: true }
  );
  function similarityString(s, t) {
    // 计算两个字符串的相似度
    const n = s.length;
    const m = t.length;
    let d = [];
    for (let i = 0; i <= n; i++) {
      d[i] = [];
      d[i][0] = i;
    }
    for (let j = 0; j <= m; j++) {
      d[0][j] = j;
    }
    for (let i = 1; i <= n; i++) {
      for (let j = 1; j <= m; j++) {
        const cost = s[i - 1] === t[j - 1] ? 0 : 1;
        d[i][j] = Math.min(
          d[i - 1][j] + 1,
          d[i][j - 1] + 1,
          d[i - 1][j - 1] + cost
        );
      }
    }
    return 1 - d[n][m] / Math.max(n, m);
  }
})();

以下是胡言乱语的探索过程


配合 gpt 简单搓的的一个 js,用来给 anki 制卡时添加一个指向原文的链接用的

Clip20241120165218.png

!(function () {
  document.addEventListener(
    "copy",
    (e) => {
      const selection = window.getSelection().toString();
      e.preventDefault();
      e.stopPropagation();
      if (selection) {
        const breadcrumb_text = document.querySelectorAll(
          ".protyle-breadcrumb__text"
        );
        // 寻找文本和选中内容最匹配的
        let max = 0;
        let cur_breadcrumb = null;
        breadcrumb_text.forEach((item, index) => {
          const text = item.innerText;
          const similarity = similarityString(selection, text);
          if (similarity > max) {
            max = similarity;
            cur_breadcrumb = item;
            // console.log(selection, '=>', text,'相似度', similarity); 
          }
        });
        const link = cur_breadcrumb.parentElement;
        // 获取link data-node-id属性
        const nodeId = link.getAttribute("data-node-id");
        // console.log(nodeId);
        // 拼接到粘贴内容末尾
        e.clipboardData.setData("text/plain", `${selection} <a href="siyuan://blocks/${nodeId}">*</a>`);
      } else {
        // protyle-wysiwyg--select
        const select = document.querySelectorAll(".protyle-wysiwyg--select");
        // 获取第一个节点的data-node-id
        const nodeId = select[0].getAttribute("data-node-id");
        // 将所有选中内容和链接拼接到粘贴内容末尾
        let data = "";
        select.forEach((item) => {
          const text = item.innerText;
          data += `${text} <a href="siyuan://blocks/${nodeId}">*</a>\n`;
        });
        e.clipboardData.setData("text/plain", data);
      }
    },
    { passive: false, capture: true }
  );
  function similarityString(s, t) {
    // 计算两个字符串的相似度
    const n = s.length;
    const m = t.length;
    let d = [];
    for (let i = 0; i <= n; i++) {
      d[i] = [];
      d[i][0] = i;
    }
    for (let j = 0; j <= m; j++) {
      d[0][j] = j;
    }
    for (let i = 1; i <= n; i++) {
      for (let j = 1; j <= m; j++) {
        const cost = s[i - 1] === t[j - 1] ? 0 : 1;
        d[i][j] = Math.min(
          d[i - 1][j] + 1,
          d[i][j - 1] + 1,
          d[i - 1][j - 1] + cost
        );
      }
    }
    return 1 - d[n][m] / Math.max(n, m);
  }
})();

原理是拦截了复制事件,对于块内的复制直接获取选取的内容(遍历面包屑内容比较相似度最高的块),跨块的内容则获取页面内选择的块(通过遍历.protyle-wysiwyg--select),拼接 node-id 为链接添加到复制内容就可以了。

但实践起来有个麻烦的问题,就是他是单纯的复制了内容,没有处理为 markdown 内容。于是另辟蹊径,加了个延时获取剪切板的内容,而延时之前主要是定位内容(处理后的内容没办法匹配上,似乎是加了零宽空格?)。

进阶的,对于标记的挖空转换和加粗处理也做了个支持

  • 思源笔记

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

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

    23999 引用 • 97714 回帖
  • Anki
    8 引用 • 22 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    113 引用 • 765 回帖

相关帖子

欢迎来到这里!

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

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

    Clip20241120202751.png

    挖空提示直接写就行了,硬匹配的(所以没特别处理使同文本挖空编号相同

推荐标签 标签

  • 浅吟主题

    Jeffrey Chen 制作的思源笔记主题,项目仓库:https://github.com/TCOTC/Whisper

    1 引用 • 18 回帖 • 1 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 702 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    359 引用 • 1831 回帖 • 1 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    113 引用 • 765 回帖
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 598 关注
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 600 关注
  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    548 引用 • 674 回帖
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    98 引用 • 345 回帖
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    8 引用 • 30 回帖 • 413 关注
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    180 引用 • 997 回帖 • 1 关注
  • uTools

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

    6 引用 • 14 回帖
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 677 关注
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    62 引用 • 289 回帖
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    85 引用 • 165 回帖
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 71 关注
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖 • 1 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 731 关注
  • SEO

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

    35 引用 • 200 回帖 • 25 关注
  • RemNote
    2 引用 • 16 回帖 • 9 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    132 引用 • 1114 回帖 • 123 关注
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 11 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 375 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    729 引用 • 1275 回帖
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 619 关注
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点;但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中,从而不再需要读写 HDFS,因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 563 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖