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

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

简单适配了行级公式块

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

设置 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 制卡时添加一个指向原文的链接用的

!(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 内容。于是另辟蹊径，加了个延时获取剪切板的内容，而延时之前主要是定位内容（处理后的内容没办法匹配上，似乎是加了零宽空格？）。

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