Merge branch 'main' into patch-1

Acylation · Apr 27, 2024 · 5e1a94f · 5e1a94f
2 parents 287ed3e + 19c70e0
commit 5e1a94f
Show file tree

Hide file tree

Showing 48 changed files with 13,278 additions and 3,097 deletions.
diff --git a/.github/ISSUE_TEMPLATE/feature-request.yml b/.github/ISSUE_TEMPLATE/feature-request.yml
@@ -13,5 +13,3 @@ body:
       id: rationale
       attributes:
           label: Why is this needed?
-      validations:
-          required: true
diff --git a/.github/ISSUE_TEMPLATE/support.yml b/.github/ISSUE_TEMPLATE/support.yml
@@ -0,0 +1,10 @@
+name: Support
+description: Finding support on how to use the plugin
+labels: ['support']
+body:
+    - type: textarea
+      id: problem
+      attributes:
+          label: What do you need to help with?
+      validations:
+          required: true
diff --git a/.gitignore b/.gitignore
@@ -23,3 +23,6 @@ data.json
 
 # previous builds
 .versions
+
+# plugin asset
+rdkit/
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Chiyu Liang
+Copyright (c) 2023-2024 Chiyu Liang
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README-ZH.md b/README-ZH.md
@@ -1,44 +1,50 @@
 # Obsidian Chem
 
-![Obsidian Downloads](https://img.shields.io/badge/dynamic/json?logo=obsidian&color=%23483699&label=downloads&query=%24%5B%22chem%22%5D.downloads&url=https%3A%2F%2Fraw.githubusercontent.com%2Fobsidianmd%2Fobsidian-releases%2Fmaster%2Fcommunity-plugin-stats.json)
+![Obsidian Downloads](https://img.shields.io/badge/dynamic/json?logo=obsidian&color=%23483699&label=downloads&query=%24%5B%22chem%22%5D.downloads&url=https%3A%2F%2Fraw.githubusercontent.com%2Fobsidianmd%2Fobsidian-releases%2Fmaster%2Fcommunity-plugin-stats.json) ![Powered by RDKit](https://img.shields.io/badge/Powered%20by-RDKit-3838ff.svg?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAFVBMVEXc3NwUFP8UPP9kZP+MjP+0tP////9ZXZotAAAAAXRSTlMAQObYZgAAAAFiS0dEBmFmuH0AAAAHdElNRQfmAwsPGi+MyC9RAAAAQElEQVQI12NgQABGQUEBMENISUkRLKBsbGwEEhIyBgJFsICLC0iIUdnExcUZwnANQWfApKCK4doRBsKtQFgKAQC5Ww1JEHSEkAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMi0wMy0xMVQxNToyNjo0NyswMDowMDzr2J4AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjItMDMtMTFUMTU6MjY6NDcrMDA6MDBNtmAiAAAAAElFTkSuQmCC)
 
 [English](README.md) | [简体中文](README-ZH.md)
 
-**Chem** 是一个旨在提升化学相关笔记记录体验的 [Obsidian.md](https://obsidian.md/) 插件。目前，本插件能够将您笔记中的SMILES字符串渲染为化学结构式。（基于 [Smiles Drawer](https://github.com/reymond-group/smilesDrawer)）
+**Chem** 是一个旨在提升化学相关笔记记录体验的 [Obsidian.md](https://obsidian.md/) 插件。目前，本插件能够将您笔记中的SMILES字符串渲染为化学结构式。（基于 [Smiles Drawer](https://github.com/reymond-group/smilesDrawer) 与 [RDKit.js](https://github.com/rdkit/rdkit-js)）
 
 > [!Note]
-> 最新插件版本: 0.3.0  
-> 文档版本: 0.3.0  
+> 最新插件版本: 0.4.1  
+> 文档版本: 0.4.1  
 
 ## 功能介绍
 
-### 渲染 SMILES 字符串为化学结构式
+### 将 SMILES 字符串渲染为化学结构式
+
+#### 代码块渲染
 
 如图所示，本插件能够识别语言被标记为 `smiles` 的代码块，并将其中的 SMILES 字符串逐行转化为化学结构式。得益于 SMILES 的纯文本特性，数据能够持久保存，该功能将得到稳定支持；此外，由于 SMILES 是一个通用标准，即使本插件换用了其他化学信息学工具包，SMILES 字符串仍能够被正确解析和渲染
 
 ![渲染 SMILES 字符串](https://github.com/Acylation/obsidian-chem/assets/73122375/a9f9a440-dc66-4689-ab1a-1ef265242778)
 
-### 设置结构图像大小和样式主题
+#### 行内渲染
+
+行内渲染功能可以在插件设置页中启用。具有特定前缀的代码行将被 Chem 插件识别、解析。默认的语法格式是 `$smiles=C1=CC=CC=C1`，前缀同样可以在插件设置页中调整
+
+#### 设置结构图像大小和样式主题
 
 您可以在插件设置页面调整化学结构式的尺寸比例，或指定图像大小，并分别调整浅色模式/深色模式下对应的结构式颜色主题。插件设置发生更改，或浅色/深色模式切换后，图像样式会自动更新
 
 ![设置大小和样式主题](https://github.com/Acylation/obsidian-chem/assets/73122375/fde8d0a4-2c9c-458c-b357-78952480b755)
 
-### 复制、导出图像
+#### 复制、导出图像
 
 复制功能位于结构图像的右键菜单。图像均以 `png` 格式导出，并能直接粘贴到笔记中，作为文件保存入附件文件夹，也可以以图片形式粘贴到微信、PowerPoint 等其他软件中。导出比例、透明/有背景色、颜色主题等可以灵活配置。
 
-### 在代码块中调用 Dataview
+#### 在代码块中调用 Dataview
 
 在插件设置中启用`解析 Dataview`功能后，`smiles` 代码块将逐行被 Dataview 解析，解析结果用于渲染结构图像。内联 Dataview 查询式 (Queries) 和内联 DataviewJS 的启用、前缀等设置与 Dataview 插件本体保持一致。
 
 ![在 SMILES 代码块中编写内联 Dataview](https://github-production-user-asset-6210df.s3.amazonaws.com/73122375/292734194-d227fdb8-9c8f-4c87-965a-73c0f2445993.png)
 
 > [!Warning]
 > 本功能依赖 Dataview 插件本体，若要使用本功能，请确保您已安装并启用 Dataview 插件
-> 
+>
 > 运行 DataviewJS 需要调用 `eval()` 函数，具有一定的风险。请确保您输入/粘贴的代码是受信任的
-> 
+>
 > 若您希望在启用 Dataview 查询式 (Queries) 时禁用 DataviewJS，请在 Dataview 插件设置中禁用 `Enable JavaScript Queries` 或 `Enable Inline JavaScript Queries` 选项  
 
 ## SMILES 介绍
@@ -53,7 +59,9 @@ SMILES 使用 ASCII 字符串表示化学结构的特性与 Obsidian 的纯文
 
 ### 如何生成 SMILES 字符串？
 
- 对于简单结构，您在初步学习 SMILES 知识后即可手动输入。对于复杂结构，您可以使用 ChemDraw，[ChemDrawJS](https://chemdrawdirect.perkinelmer.cloud/js/sample/index.html#)，[MarvinJS](https://marvinjs-demo.chemaxon.com/latest/index.html) 或 [Ketcher](https://lifescience.opensource.epam.com/KetcherDemoSA/index.html) 等**结构编辑器**先行绘制，再导出 SMILES 字符串。您也可以使用 [Open Bable](http://openbabel.org/wiki/Main_Page)，[JOELib](https://sourceforge.net/projects/joelib/) 或 [Chemical Translation Service](https://cts.fiehnlab.ucdavis.edu/) 等**化学语言转换工具**/**化学数据库**，将化合物名称、CAS 号、*.mol 文件等转化为 SMILES 格式
+对于简单结构，您在初步学习 SMILES 知识后即可手动输入。对于复杂结构，您可以使用 ChemDraw，[ChemDrawJS](https://chemdrawdirect.perkinelmer.cloud/js/sample/index.html#)，[MarvinJS](https://marvinjs-demo.chemaxon.com/latest/index.html) 或 [Ketcher](https://lifescience.opensource.epam.com/KetcherDemoSA/index.html) 等**结构编辑器**先行绘制，再导出 SMILES 字符串。您可以使用 [Obsidian Ketcher](https://github.com/yuleicul/obsidian-ketcher) 插件在 Obsidian 中直接绘制化学结构，并导出 SMILES 字符串。
+
+您也可以使用 [Open Babel](https://openbabel.org/)，[JOELib](https://sourceforge.net/projects/joelib/) 或 [Chemical Translation Service](https://cts.fiehnlab.ucdavis.edu/) 等**化学语言转换工具**/**化学数据库**，将化合物名称、CAS 号、`*.mol` 文件等转化为 SMILES 格式
 
 ## 安装步骤
 
@@ -68,6 +76,9 @@ SMILES 使用 ASCII 字符串表示化学结构的特性与 Obsidian 的纯文
 2. 将上述文件复制到您本地的笔记库的插件路径，如 `[yourvault]/.obsidian/plugins/chem/`。您可能需要自行新建 `chem` 这个文件夹
 3. 打开/重启 Obsidian 或刷新插件列表，您将看到 `Chem` 插件，点击启用，安装完成！
 
+> [!Note]
+> 若您希望使用 `RDKit.js` 作为渲染器，插件会访问 [release](https://github.com/Acylation/obsidian-chem/releases/latest) 页面，尝试下载 `RDKit_minimal` 和 `RDKit_minimal.wasm` 两个文件。若您无法连接到 GitHub，请在 [release](https://github.com/Acylation/obsidian-chem/releases/latest) 页面中手动下载它们，并放在 `[yourvault]/.obsidian/plugins/chem/rdkit/` 路径下，以供插件识别、加载
+
 ## 插件定位
 
 我希望本插件能够提升化学相关笔记的记录体验。例如，您可能希望在电子实验记录中记下您今天合成的化合物的结构式，或者您想创建有机化学反应的 Anki 卡片等等。下面是一些我认为本插件可以提供的功能：
@@ -100,7 +111,7 @@ SMILES 使用 ASCII 字符串表示化学结构的特性与 Obsidian 的纯文
 
 ## 致谢
 
-本插件依赖 [Smiles Drawer](https://github.com/reymond-group/smilesDrawer) 实现 SMILES 字符串的解析以及结构式绘制的功能，导入这个包的例子来源于 [Mathpix](https://github.com/Mathpix/mathpix-markdown-it)。在此向这些杰出的工作表示感谢!
+本插件依赖 [Smiles Drawer](https://github.com/reymond-group/smilesDrawer) 和 [RDKit.js](https://github.com/rdkit/rdkit-js) 实现 SMILES 字符串的解析以及结构式绘制的功能。[Mathpix](https://github.com/Mathpix/mathpix-markdown-it) 展示了导入 Smiles Drawer 包以及使用代码块语法的实例。向这些杰出的工作表示感谢!
 
 在整个开发过程中，官方[开发者文档](https://docs.obsidian.md/Plugins/Getting+started/Build+a+plugin)提供了非常详细的指引，感谢 [@marcusolsson](https://github.com/marcusolsson) 的早期非官方文档，以及对官方开发者文档整理工作的领导!
 

diff --git a/README.md b/README.md
@@ -1,47 +1,53 @@
 # Obsidian Chem
 
-![Obsidian Downloads](https://img.shields.io/badge/dynamic/json?logo=obsidian&color=%23483699&label=downloads&query=%24%5B%22chem%22%5D.downloads&url=https%3A%2F%2Fraw.githubusercontent.com%2Fobsidianmd%2Fobsidian-releases%2Fmaster%2Fcommunity-plugin-stats.json)
+![Obsidian Downloads](https://img.shields.io/badge/dynamic/json?logo=obsidian&color=%23483699&label=downloads&query=%24%5B%22chem%22%5D.downloads&url=https%3A%2F%2Fraw.githubusercontent.com%2Fobsidianmd%2Fobsidian-releases%2Fmaster%2Fcommunity-plugin-stats.json) ![Powered by RDKit](https://img.shields.io/badge/Powered%20by-RDKit-3838ff.svg?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAFVBMVEXc3NwUFP8UPP9kZP+MjP+0tP////9ZXZotAAAAAXRSTlMAQObYZgAAAAFiS0dEBmFmuH0AAAAHdElNRQfmAwsPGi+MyC9RAAAAQElEQVQI12NgQABGQUEBMENISUkRLKBsbGwEEhIyBgJFsICLC0iIUdnExcUZwnANQWfApKCK4doRBsKtQFgKAQC5Ww1JEHSEkAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMi0wMy0xMVQxNToyNjo0NyswMDowMDzr2J4AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjItMDMtMTFUMTU6MjY6NDcrMDA6MDBNtmAiAAAAAElFTkSuQmCC)
 
 [简体中文](README-ZH.md) | [English](README.md)
 
-**Chem** is a plugin for [Obsidian.md](https://obsidian.md/) providing chemistry support. It allows you to insert chemical structures into your notes through code blocks containing SMILES strings (powered by [Smiles Drawer](https://github.com/reymond-group/smilesDrawer)).
+**Chem** is a plugin for [Obsidian.md](https://obsidian.md/) providing chemistry support. It allows you to insert chemical structures into your notes through code blocks containing SMILES strings (powered by [Smiles Drawer](https://github.com/reymond-group/smilesDrawer) & [RDKit.js](https://github.com/rdkit/rdkit-js)).
 
 > [!Note]
-> Latest release: 0.3.0  
-> Document version: 0.3.0  
+> Latest release: 0.4.1  
+> Document version: 0.4.1  
 
 ## Features & Usage
 
 ### Render SMILES Strings as Chemical Structures
 
+#### Render via Code Block
+
 You can use this plugin to render chemical structures from SMILES strings. Just type the SMILES strings in a code block with `smiles` as the language. Each line should contain only one string.
 
 The data is stored as plain text, so you won’t lose it. The renderer will always work, even if the plugin changes its cheminfo core.
 
 ![Render SMILES strings into structures](https://github.com/Acylation/obsidian-chem/assets/73122375/a9f9a440-dc66-4689-ab1a-1ef265242778)
 
-### Global Sizing and Theming
+#### Inline Render
+
+You can enable inline render feature in plugin settings. Code lines with specified prefix would be recognized. The default syntax is `$smiles=C1=CC=CC=C1` and the prefix is configurable.
+
+#### Global Sizing and Theming
 
 You can adjust the structure scale or the image size and configure light/dark themes of the structure images in the plugin’s settings page. The structures in open notes will be automatically updated when the plugin settings or Obsidian color scheme are changed.
 
 ![Configure size and theme](https://github.com/Acylation/obsidian-chem/assets/73122375/fde8d0a4-2c9c-458c-b357-78952480b755)
 
-### Copy & Export
+#### Copy & Export
 
 The copy feature is accessible through the right-click menu on images. Images are copied in `png` format. Despite common applications, you can also paste the copied image into your note, which will then save the image as a file to your attachment folder. The scale of the export, transparency, and theme can be configured to suit your needs.
 
-### Utilizing Dataview
+#### Utilizing Dataview
 
-Inline Dataview queries and DataviewJS rendering can be enabled in the settings tab. Once enabled, lines within the smiles block will be checked and parsed. The return value from this process is used to render chemical structures, providing greater flexibility. The prefix and strategy are fetched directly from the corresponding Dataview plugin settings.
+Inline Dataview queries and DataviewJS rendering can be enabled in the settings tab. Once enabled, lines within the smiles block will be checked and parsed. The return values from this process will be used to render chemical structures, providing greater flexibility. The prefix and strategy are fetched directly from the corresponding Dataview plugin settings.
 
 ![Dataview lines in smiles block](https://github-production-user-asset-6210df.s3.amazonaws.com/73122375/292734194-d227fdb8-9c8f-4c87-965a-73c0f2445993.png)
 
 > [!Warning]
 > This feature is dependent on the Dataview plugin. Please ensure that you have installed and enabled it.
-> 
-> The execution of DataviewJS is implemented by calling `eval()` at the bottom, which is known to have safety issues.To avoid unintended execution, only trusted code lines should be passed.  
 >
-> If you wish to disable DataviewJS rendering, you can toggle off the `Enable JavaScript Queries` or `Enable Inline JavaScript Queries` options through the Dataview plugin settings.  
+> The execution of DataviewJS is implemented by calling `eval()` at the bottom, which is known to have security issues. To avoid unintended execution, only trusted code lines should be passed.  
+>
+> If you wish to keep inline Dataview queries rendering and only disable DataviewJS, you can toggle off the `Enable JavaScript Queries` or `Enable Inline JavaScript Queries` options through the Dataview plugin settings.  
 
 ## Introduction on SMILES
 
@@ -55,7 +61,9 @@ Using SMILES strings to represent molecules is easier and more widely supported
 
 ### How to Generate SMILES Strings?
 
- For simple structures, you can type them in manually. However, for more complex ones, you may want to use **structure editors**, such as ChemDraw, [ChemDrawJS](https://chemdrawdirect.perkinelmer.cloud/js/sample/index.html#), [MarvinJS](https://marvinjs-demo.chemaxon.com/latest/index.html) and [Ketcher](https://lifescience.opensource.epam.com/KetcherDemoSA/index.html). Also, you can use **translators** like [Open Bable](http://openbabel.org/wiki/Main_Page), [JOELib](https://sourceforge.net/projects/joelib/) and the [Chemical Translation Service](https://cts.fiehnlab.ucdavis.edu/) to convert chemical names, CAS numbers and *.mol files into SMILES strings.
+For simple structures, you can type them in manually. However, for more complex ones, you may want to use **structure editors**, such as ChemDraw, [ChemDrawJS](https://chemdrawdirect.perkinelmer.cloud/js/sample/index.html#), [MarvinJS](https://marvinjs-demo.chemaxon.com/latest/index.html) and [Ketcher](https://lifescience.opensource.epam.com/KetcherDemoSA/index.html). There's a Ketcher editor integration plugin [Obsidian Ketcher](https://github.com/yuleicul/obsidian-ketcher) available right in Obsidian.
+
+Also, you can use **translators** like [Open Babel](https://openbabel.org/), [JOELib](https://sourceforge.net/projects/joelib/) and the [Chemical Translation Service](https://cts.fiehnlab.ucdavis.edu/) to convert chemical names, CAS numbers and `*.mol` files into SMILES strings.
 
 ## Installation
 
@@ -71,6 +79,9 @@ You can also follow the steps below to install the plugin manually.
 3. Launch/restart Obsidian, or refresh the plugin list, you will see this plugin.
 4. In the plugin list, enable `Chem` and enjoy!
 
+> [!Note]
+> If you want to utilize `RDKit.js`, Chem plugin would try to fetch `RDKit_minimal` and `RDKit_minimal.wasm` files from [release](https://github.com/Acylation/obsidian-chem/releases/latest). If you have problem connecting GitHub, please download them manully and put them in the directory `[yourvault]/.obsidian/plugins/chem/rdkit/` for recognization and loading.
+
 ## Plugin Scope
 
 I have a lot of ideas for this plugin, but my coding skills and resources are limited. I want to make it useful for anyone who needs to take notes on chemistry (such as research records, organic chemistry anki cards, etc.). As examples, here are some of the features I have in mind.
@@ -96,11 +107,11 @@ Check out the [roadmap](https://github.com/users/Acylation/projects/6) to see wh
 
 `Chem` plugin is now primarily focused on rendering texts into structures. If you want to create complex structures from scratch, the [Ketcher](https://github.com/yuleicul/obsidian-ketcher) plugin has integrated a powerful opensource editor.
 
-[Chemical Structure Renderer](https://github.com/xaya1001/obsidian-Chemical-Structure-Renderer) is a similar plugin, which uses [Ketcher](https://github.com/epam/ketcher), [Indigo](https://github.com/epam/Indigo) online service for parsing and rendering.
+[Chemical Structure Renderer](https://github.com/xaya1001/obsidian-Chemical-Structure-Renderer) is a similar plugin of `Chem`, which uses [Ketcher](https://github.com/epam/ketcher), [Indigo](https://github.com/epam/Indigo) online service for parsing and rendering, while `Chem` plugin integrates standalone packages and runs locally.
 
-## Acknowledgement
+## Credits
 
-The plugin relies on [Smiles Drawer](https://github.com/reymond-group/smilesDrawer) as the parsing and drawing core, and uses [Mathpix](https://github.com/Mathpix/mathpix-markdown-it) as an example on how to integrate the package. Thank you very much!
+The plugin relies on [Smiles Drawer](https://github.com/reymond-group/smilesDrawer) and [RDKit.js](https://github.com/rdkit/rdkit-js) as the parsing and drawing cores, and takes [Mathpix](https://github.com/Mathpix/mathpix-markdown-it) as a good example on integrating Smiles Drawer and use codeblock to decorate the note. Thank you very much!
 
 During the whole process of development, I found the [developer documentation](https://docs.obsidian.md/Plugins/Getting+started/Build+a+plugin) super helpful. Massive thanks to [@marcusolsson](https://github.com/marcusolsson) for leading this project!