Provide RDKit unpkg and set Smiles Drawer as default fallback (#67)

* Update SettingTab.ts

* update dependencies

* Update doc

* Set fallback core

* Satisfy lint

* Update coreFallbackModal.ts

README-ZH.md

@@ -7,17 +7,23 @@
 **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.4.0  
-> 文档版本: 0.4.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`，前缀同样可以在插件设置页中调整
+
 #### 设置结构图像大小和样式主题
 
 您可以在插件设置页面调整化学结构式的尺寸比例，或指定图像大小，并分别调整浅色模式/深色模式下对应的结构式颜色主题。插件设置发生更改，或浅色/深色模式切换后，图像样式会自动更新
@@ -38,7 +44,7 @@
 > 本功能依赖 Dataview 插件本体，若要使用本功能，请确保您已安装并启用 Dataview 插件
 >
 > 运行 DataviewJS 需要调用 `eval()` 函数，具有一定的风险。请确保您输入/粘贴的代码是受信任的
->  
+>
 > 若您希望在启用 Dataview 查询式 (Queries) 时禁用 DataviewJS，请在 Dataview 插件设置中禁用 `Enable JavaScript Queries` 或 `Enable Inline JavaScript Queries` 选项  
 
 ## SMILES 介绍
@@ -53,9 +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 字符串。您可以使用 [Obsidian Ketcher](https://github.com/yuleicul/obsidian-ketcher) 插件在 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 字符串。您可以使用 [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 格式
+您也可以使用 [Open Babel](https://openbabel.org/)，[JOELib](https://sourceforge.net/projects/joelib/) 或 [Chemical Translation Service](https://cts.fiehnlab.ucdavis.edu/) 等**化学语言转换工具**/**化学数据库**，将化合物名称、CAS 号、`*.mol` 文件等转化为 SMILES 格式
 
 ## 安装步骤
 
@@ -105,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) 的早期非官方文档，以及对官方开发者文档整理工作的领导!
 

README.md

@@ -7,19 +7,25 @@
 **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.4.0  
-> Document version: 0.4.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)
 
+#### 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.
@@ -55,9 +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). There's a Ketcher editor integration plugin [Obsidian Ketcher](https://github.com/yuleicul/obsidian-ketcher) available right in Obsidian.
+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.
+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
 
@@ -103,9 +109,9 @@ Check out the [roadmap](https://github.com/users/Acylation/projects/6) to see wh
 
 [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!
 

docs/CONTRIBUTING-ZH.md

@@ -40,7 +40,7 @@ cd [你的工作文件夹]
 ```
 
 > [!Note]
-> 建议使用一个开发 vault 的配置文件夹作为本插件的工作文件夹。例如 `.obsidian\plugins\)`.
+> 建议使用一个开发 vault 的配置文件夹作为本插件的工作文件夹。例如 `.obsidian\plugins\`.
 
 ```cmd
 git clone https://github.com/Acylation/obsidian-chem.git chem

src/global/chemCore.ts

@@ -6,14 +6,33 @@ import RDKitCore from '../lib/core/rdkitCore';
 
 export let gRenderCore: ChemCore;
 
-export const setCore = async (settings: ChemPluginSettings) => {
+export const setCore = async (
+	settings: ChemPluginSettings,
+	onFallback: (error: string) => void
+) => {
 	if (!gRenderCore || settings.core !== gRenderCore.id) {
-		if (settings.core == 'smiles-drawer')
+		if (settings.core === 'smiles-drawer') {
 			gRenderCore = new SmilesDrawerCore(settings);
-		if (settings.core == 'rdkit') {
-			gRenderCore = await RDKitCore.init(settings);
+			updateCoreSettings(settings);
+		} else if (settings.core === 'rdkit') {
+			try {
+				gRenderCore = await RDKitCore.init(settings);
+				updateCoreSettings(settings);
+			} catch (error) {
+				onFallback(error);
+			}
+		} else {
+			onFallback(`invalid chem core id. ${settings.core}`);
 		}
 	}
+};
+
+export const setFallbackCore = async (settings: ChemPluginSettings) => {
+	gRenderCore = new SmilesDrawerCore(settings);
+	updateCoreSettings(settings);
+};
+
+export const updateCoreSettings = (settings: ChemPluginSettings) => {
 	gRenderCore.settings = settings;
 };
 

src/lib/core/coreFallbackModal.ts

@@ -0,0 +1,50 @@
+import { Modal, App, ButtonComponent } from 'obsidian';
+import { i18n } from 'src/lib/i18n';
+
+export class CoreFallbackModal extends Modal {
+	msg: string;
+	onConfirm: () => void;
+
+	constructor(app: App, text: string, onConfrim: () => void) {
+		super(app);
+		this.msg = text;
+		this.onConfirm = onConfrim;
+	}
+
+	onOpen() {
+		const { contentEl } = this;
+
+		contentEl.createEl('h3', {
+			text: i18n.t('modals.core-fallback.title'),
+		});
+
+		contentEl.createEl('div', {
+			text: i18n.t('modals.core-fallback.message'),
+		});
+
+		contentEl.createEl('br');
+
+		contentEl.createEl('div', {
+			text: this.msg,
+		});
+
+		const div = contentEl.createDiv();
+		div.style.display = 'flex';
+		div.style.flex = '1 1 auto';
+		div.style.justifyContent = 'flex-end';
+		div.style.padding = '3px';
+
+		new ButtonComponent(div)
+			.setCta()
+			.setButtonText(i18n.t('modals.core-fallback.confirm'))
+			.onClick(() => {
+				this.close();
+			});
+	}
+
+	onClose() {
+		this.onConfirm();
+		const { contentEl } = this;
+		contentEl.empty();
+	}
+}