Modified the template and rebuilt the interactive logic

README-zh.md

@@ -3,6 +3,8 @@
 
 所以我在[原作者](https://github.com/EasyChris/obsidian-to-notion)的基础之上，增加了匹配[NotionNext](https://github.com/tangly1024/NotionNext)模板的功能。这样可以直接在Obsidian编辑，整理好之后一键发布。
 ## 更新说明
+### 0.2.0
+- 从这个版本开始采用了类似于BRAT的交互方式。当你点击左侧同步按钮的时候，首先会弹出
 ### 0.1.10
 - 修正了设置中的中文显示。 
 ### 0.1.8
@@ -69,6 +71,7 @@
 # 现在阶段一定不要修改表头的名字， please do not change the name of the header in YAML front matter
 # !!!!!!!!!!!!
 titleicon: 📎 # emoji icon, default is 📜， 默认是📜
+date: 2023-07-23 # default is today， 默认是今天。 Format is YYYY-MM-DD， 格式是YYYY-MM-DD
 coverurl: https://img.jxpeng.dev/2023/08/843e27a210847f05a0f7cfb121fec100.jpg # default is empty， 默认是空
 type: Post # Post or Page, default is Post， 默认是Post
 slug: test # slug for url, default is empty， 默认是空

README.md

@@ -5,6 +5,11 @@ Thanks to the [original author](https://github.com/EasyChris/obsidian-to-notion)
 
 Thus, based on the [original author's work](https://github.com/EasyChris/obsidian-to-notion), I've added a feature to match the [NotionNext](https://github.com/tangly1024/NotionNext) template. This way, you can edit directly in Obsidian and publish with a single click after organizing.
 ## Update
+### 0.2.0
+- From this version, the interactive logic has been rewritten. When you click the ribbon icon, it will display the sync command for all presetting NotionNext databases. You can choose the database you want to sync to. **However, only NotionNext database is supported for now.**
+
+![](https://minioapi.pjx.ac.cn/img1/2023/11/c963e97f31a30c994e067c58443fed4f.gif)
+
 ### 0.1.10
 - Fix the Chinese support in the settings.
 ### 0.1.8
@@ -70,6 +75,7 @@ If you don't want to use the template, you can also directly create a new file i
 # 现在阶段一定不要修改表头的名字， please do not change the name of the header in YAML front matter
 # !!!!!!!!!!!!
 titleicon: 📎 # emoji icon, default is 📜， 默认是📜
+date: 2023-07-23 # default is today， 默认是今天。 Format is YYYY-MM-DD， 格式是YYYY-MM-DD
 coverurl: https://img.jxpeng.dev/2023/08/843e27a210847f05a0f7cfb121fec100.jpg # default is empty， 默认是空
 type: Post # Post or Page, default is Post， 默认是Post
 slug: test # slug for url, default is empty， 默认是空

obsidian_template.md

@@ -8,6 +8,7 @@
 # 现在阶段一定不要修改表头的名字， please do not change the name of the header in YAML front matter
 # !!!!!!!!!!!!
 titleicon: 📎 # default is 📜， 默认是📜
+date: 2023-07-23 # default is today， 默认是今天。 Format is YYYY-MM-DD， 格式是YYYY-MM-DD
 coverurl: https://img.jxpeng.dev/2023/08/843e27a210847f05a0f7cfb121fec100.jpg # default is empty， 默认是空
 type: Post # Post or Page, default is Post， 默认是Post
 slug: test # slug for url, default is empty， 默认是空

src/FuzzySuggester.ts

@@ -0,0 +1,53 @@
+import { FuzzySuggestModal, FuzzyMatch } from 'obsidian';
+import MyPlugin from "./main";
+import {i18nConfig} from "./I18n";
+
+/**
+ * Simple interface for what should be displayed and stored for suggester
+ */
+export interface DatabaseList {
+    name: string,        // specific database name
+    match: any               //
+}
+
+/**
+ * Generic suggester for quick reuse
+ */
+export class FuzzySuggester extends FuzzySuggestModal<DatabaseList>{
+    private plugin: MyPlugin;
+    private data: DatabaseList[];
+    private callback: any;
+
+    constructor(plugin: MyPlugin) {
+        super(plugin.app);
+        this.plugin = plugin;
+        this.setPlaceholder(i18nConfig.PlaceHolder);
+    }
+
+    setSuggesterData(suggesterData: Array<DatabaseList>): void { this.data = suggesterData }
+
+    async display(callBack: (item: DatabaseList, evt: MouseEvent | KeyboardEvent) => void): Promise<any> {
+        this.callback = callBack;
+        this.open();
+    }
+
+    // Store the data
+    getItems(): DatabaseList[] {
+        return this.data
+    }
+
+    getItemText(item: DatabaseList): string {
+        return item.name
+    }
+
+    onChooseItem(item: DatabaseList, evt:MouseEvent | KeyboardEvent): void { }
+
+    onChooseSuggestion(item: FuzzyMatch<DatabaseList>, evt: MouseEvent | KeyboardEvent): void {
+        this.callback(item.item, evt)
+    }
+
+    renderSuggestion(item: FuzzyMatch<DatabaseList>, el: HTMLElement): void {
+        el.createEl('div', { text: item.item.name })
+    }
+
+}

src/I18n.ts

@@ -1,46 +1,84 @@
 export const I18n: { [key: string]: any } = {
-	"en": {
+    en: {
-		ribbonIcon: "Share to NotionNext",
+        ribbonIcon: "Share to NotionNext",
-		CommandName: "share to notionnext",
+        CommandName: "share to notionnext",
-		NotionNextVersion: "NotionNext Version Database",
+        CommandNameGeneral: "share to notion",
-		NotionNextVersionDesc: "Turn on this option if you are using NotionNext",
+        NotionNextVersion: "NotionNext Version Database",
-		NotionNextSetting: "NotionNext Database Settings",
+        NotionNextVersionDesc:
-		NotionAPI: "Notion API Token",
+            "Turn on this option if you are using NotionNext",
-		NotionAPIDesc: "It's a secret",
+        NotionNextSetting: "NotionNext Database Settings",
-		NotionAPIText:"Enter your Notion API Token",
+        NotionAPI: "Notion API Token",
-		NotionID: "Database ID",
+        NotionAPIDesc: "It's a secret",
-		NotionIDText: "Enter your Database ID",
+        NotionAPIText: "Enter your Notion API Token",
-		BannerUrl: "Banner url(optional)",
+        NotionID: "Database ID",
-		BannerUrlDesc: "page banner url(optional), default is empty, if you want to show a banner, please enter the url(like:https://raw.githubusercontent.com/EasyChris/obsidian-to-notion/ae7a9ac6cf427f3ca338a409ce6967ced9506f12/doc/2.png)",
+        NotionIDText: "Enter your Database ID",
-		BannerUrlText: "Enter your banner url",
+        BannerUrl: "Banner url(optional)",
-		NotionUser: "Notion ID(username, optional)",
+        BannerUrlDesc:
-		NotionUserDesc: "Your notion ID (optional),share link likes:https://username.notion.site/,your notion id is [username]",
+            "page banner url(optional), default is empty, if you want to show a banner, please enter the url(like:https://raw.githubusercontent.com/EasyChris/obsidian-to-notion/ae7a9ac6cf427f3ca338a409ce6967ced9506f12/doc/2.png)",
-		NotionUserText: "Enter your notion ID (options)",
+        BannerUrlText: "Enter your banner url",
-		NotionGeneralSetting: "General Notion Database Settings",
+        NotionUser: "Notion ID(username, optional)",
-		NotYetFinish: "Not finished. This function will be available in the next version",
+        NotionUserDesc:
-	},
+            "Your notion ID (optional),share link likes:https://username.notion.site/,your notion id is [username]",
-	"zh": {
+        NotionUserText: "Enter your notion ID (options)",
-		ribbonIcon: "分享到 NotionNext",
+        NotionGeneralSetting: "General Notion Database Settings",
-		CommandName: "分享到 NotionNext",
+        NotYetFinish:
-		NotionNextVersion: "NotionNext 版本数据库",
+            "Not finished. This function will be available in the next version",
-		NotionNextVersionDesc: "如果你使用的是NotionNext，请打开此选项",
+        PlaceHolder: "Enter database Name",
-		NotionNextSetting: "NotionNext 数据库参数设置",
+        "notion-logo": "Share to NotionNext",
-		NotionAPI: "Notion API 令牌",
+        "sync-success": "Sync to NotionNext success: \n",
-		NotionAPIDesc: "显示为密码",
+        "sync-fail": "Sync to NotionNext fail: \n",
-		NotionAPIText:"输入你的 Notion API 令牌",
+        "open-notion": "Please open the file that needs to be synchronized",
-		NotionID: "数据库 ID",
+        "config-secrets-notion-api":
-		NotionIDText: "输入你的数据库 ID",
+            "Please set up the notion API in the settings tab.",
-		BannerUrl: "封面图片地址（可选）",
+        "config-secrets-database-id":
-		BannerUrlDesc: "页面封面图片地址（可选），默认为空，如果你想显示封面图片，请输入图片地址（例如：https://raw.githubusercontent.com/EasyChris/obsidian-to-notion/ae7a9ac6cf427f3ca338a409ce6967ced9506f12/doc/2.png）",
+            "Please set up the database id in the settings tab.",
-		BannerUrlText: "输入你的封面图片地址",
+        "set-tags-fail":
-		NotionUser: "Notion ID（用户名，可选）",
+            "Set tags fail,please check the frontmatter of the file or close the tag switch in the settings tab.",
-		NotionUserDesc: "你的 Notion ID（可选），分享链接类似：https://username.notion.site/，你的 Notion ID 是 [username]",
+        NNonMissing:
-		NotionUserText: "输入你的 Notion ID（可选）",
+            "The 'NNon' property is missing in the settings. Please set it up.",
-		NotionGeneralSetting: "普通 Notion 数据库设置",
+        "set-api-id":
-		NotYetFinish: "未完成。此功能将在之后版本中提供",
+            "Please set up the notion API and database ID in the settings tab.",
-	},
+    },
-}
+    zh: {
+        ribbonIcon: "分享到 NotionNext",
+        CommandName: "分享到 NotionNext",
+        CommandNameGeneral: "分享到 Notion",
+        NotionNextVersion: "NotionNext 版本数据库",
+        NotionNextVersionDesc: "如果你使用的是NotionNext，请打开此选项",
+        NotionNextSetting: "NotionNext 数据库参数设置",
+        NotionAPI: "Notion API 令牌",
+        NotionAPIDesc: "显示为密码",
+        NotionAPIText: "输入你的 Notion API 令牌",
+        NotionID: "数据库 ID",
+        NotionIDText: "输入你的数据库 ID",
+        BannerUrl: "封面图片地址（可选）",
+        BannerUrlDesc:
+            "页面封面图片地址（可选），默认为空，如果你想显示封面图片，请输入图片地址（例如：https://raw.githubusercontent.com/EasyChris/obsidian-to-notion/ae7a9ac6cf427f3ca338a409ce6967ced9506f12/doc/2.png）",
+        BannerUrlText: "输入你的封面图片地址",
+        NotionUser: "Notion ID（用户名，可选）",
+        NotionUserDesc:
+            "你的 Notion ID（可选），分享链接类似：https://username.notion.site/，你的 Notion ID 是 [username]",
+        NotionUserText: "输入你的 Notion ID（可选）",
+        NotionGeneralSetting: "普通 Notion 数据库设置",
+        NotYetFinish: "未完成。此功能将在之后版本中提供",
+        PlaceHolder: "输入数据库名称",
+        "notion-logo": "分享到NotionNext",
+        "sync-success": "同步到NotionNext成功:\n",
+        "sync-fail": "同步到NotionNext失败: \n",
+        "open-file": "请打开需要同步的文件",
+        "config-secrets-notion-api": "请在插件设置中添加notion API",
+        "config-secrets-database-id": "请在插件设置中添加database id",
+        "set-tags-fail":
+            "设置标签失败,请检查文件的frontmatter,或者在插件设置中关闭设置tags开关",
+        NNonMissing: "未设置'NNon'属性，请在插件设置中选择NotionNext数据库。",
+        "set-api-id": "请在插件设置中设置notion API和database ID",
+    },
+};
 
 export const I18nConfig = (lang: any): any => {
-	return I18n[lang]
+    return I18n[lang];
-}
+};
+
+export const i18nConfig = I18nConfig(
+    window.localStorage.getItem("language") || "en",
+); // Export i18nConfig

src/Message.ts

@@ -1,29 +0,0 @@
-export const NoticeMsg: { [key: string]: any } = {
-	"en": {
-		"notion-logo": "Share to NotionNext",
-		"sync-success": "Sync to NotionNext success: \n",
-		"sync-fail": "Sync to NotionNext fail: \n",
-		"open-notion": "Please open the file that needs to be synchronized",
-		"config-secrets-notion-api": "Please set up the notion API in the settings tab.",
-		"config-secrets-database-id": "Please set up the database id in the settings tab.",
-		"set-tags-fail": "Set tags fail,please check the frontmatter of the file or close the tag switch in the settings tab.",
-		"NNonMissing": "The 'NNon' property is missing in the settings. Please set it up.",
-		"set-api-id": "Please set up the notion API and database ID in the settings tab."
-	},
-	"zh": {
-		"notion-logo": "分享到NotionNext",
-		"sync-success": "同步到NotionNext成功:\n",
-		"sync-fail": "同步到NotionNext失败: \n",
-		"open-file": "请打开需要同步的文件",
-		"config-secrets-notion-api": "请在插件设置中添加notion API",
-		"config-secrets-database-id": "请在插件设置中添加database id",
-		"set-tags-fail": "设置标签失败,请检查文件的frontmatter,或者在插件设置中关闭设置tags开关",
-		"NNonMissing": "未设置'NNon'属性，请在插件设置中选择NotionNext数据库。",
-		"set-api-id": "请在插件设置中设置notion API和database ID"
-	},
-}
-
-
-export const NoticeMConfig = (lang: any): any => {
-	return NoticeMsg[lang]
-}

src/NotionCommands.ts

@@ -0,0 +1,57 @@
+import {i18nConfig} from "src/I18n";
+import MyPlugin from "src/main";
+import {Editor, MarkdownView} from "obsidian";
+import {FuzzySuggester, DatabaseList} from "./FuzzySuggester";
+// create the commands list
+export default class RibbonCommands {
+    plugin: MyPlugin;
+    // Total commands that will be used
+    Ncommand = [
+        {
+            id: "share-to-notionnext",
+            name: i18nConfig.ribbonIcon, // Use the translated text from i18nConfig
+            editorCallback: async (editor: Editor, view: MarkdownView) => {
+                await this.plugin.upload();
+            }
+        },
+        // {
+        //     id: "share-to-notion",
+        //     name: i18nConfig.CommandNameGeneral, // Use the translated text from i18nConfig
+        //     editorCallback: async (editor: Editor, view: MarkdownView) => {
+        //         await this.plugin.upload();
+        //     }
+        // }
+    ];
+
+    async ribbonDisplay() {
+        const NcommandList: DatabaseList[] = [];
+        this.Ncommand.map(command => NcommandList.push(
+            {
+                name:command.name,
+                match: command.editorCallback
+            }
+            )
+        );
+
+        const fusg = new FuzzySuggester(this.plugin);
+
+        fusg.setSuggesterData(NcommandList);
+        await fusg.display(async (results) => {await results.match()})
+    };
+
+    constructor(plugin: MyPlugin) {
+        this.plugin = plugin;
+
+        // Register all the commands
+        this.Ncommand.forEach(command => {
+            this.plugin.addCommand(
+                {
+                    id: command.id,
+                    name: command.name,
+                    editorCallback: command.editorCallback,
+                }
+                );
+        });
+    }
+
+}

src/main.ts

@@ -2,9 +2,8 @@ import {App, Editor, MarkdownView, Notice, Plugin, PluginSettingTab, Setting} fr
 import {addIcons} from 'src/icon';
 import {Upload2Notion} from "src/Upload2Notion";
 import {Upload2NotionNext} from "src/Upload2Notion_NN";
-import {NoticeMConfig} from "src/Message";
+import {i18nConfig} from "src/I18n";
-import {I18nConfig} from "src/I18n";
+import ribbonCommands from "src/NotionCommands";
-
 // Remember to rename these classes and interfaces!
 
 interface PluginSettings {
@@ -16,10 +15,6 @@ interface PluginSettings {
     proxy: string;
 }
 
-const langConfig = NoticeMConfig(window.localStorage.getItem('language') || 'en')
-
-const i18nConfig = I18nConfig(window.localStorage.getItem('language') || 'en')
-
 const DEFAULT_SETTINGS: PluginSettings = {
     NNon: undefined,
     notionAPI: "",
@@ -31,9 +26,12 @@ const DEFAULT_SETTINGS: PluginSettings = {
 
 export default class ObsidianSyncNotionPlugin extends Plugin {
     settings: PluginSettings;
+    commands: ribbonCommands;
 
     async onload() {
         await this.loadSettings();
+        this.commands = new ribbonCommands(this);
+
         addIcons();
         // This creates an icon in the left ribbon.
         const ribbonIconEl = this.addRibbonIcon(
@@ -41,7 +39,8 @@ export default class ObsidianSyncNotionPlugin extends Plugin {
             i18nConfig.ribbonIcon,
             async (evt: MouseEvent) => {
                 // Called when the user clicks the icon.
-                await this.upload();
+                // await this.upload();
+                this.commands.ribbonDisplay();
             }
         );
 
@@ -67,18 +66,18 @@ export default class ObsidianSyncNotionPlugin extends Plugin {
     }
 
     async upload() {
-        const { notionAPI, databaseID, NNon} = this.settings;
+        const {notionAPI, databaseID, NNon} = this.settings;
 
-		// Check if NNon exists
+        // Check if NNon exists
-		if (NNon === undefined) {
+        if (NNon === undefined) {
-			const NNonmessage = langConfig.NNonMissing;
+            const NNonmessage = i18nConfig.NNonMissing;
-			new Notice(NNonmessage);
+            new Notice(NNonmessage);
-			return;
+            return;
-		}
+        }
 
-		// Check if the user has set up the Notion API and database ID
+        // Check if the user has set up the Notion API and database ID
         if (notionAPI === "" || databaseID === "") {
-			const setAPIMessage = langConfig["set-api-id"];
+            const setAPIMessage = i18nConfig["set-api-id"];
             new Notice(setAPIMessage);
             return;
         }
@@ -87,7 +86,7 @@ export default class ObsidianSyncNotionPlugin extends Plugin {
 
 
         if (markDownData) {
-            const { basename } = nowFile;
+            const {basename} = nowFile;
             let upload;
 
             if (NNon) {
@@ -99,9 +98,9 @@ export default class ObsidianSyncNotionPlugin extends Plugin {
             const res = await upload.syncMarkdownToNotion(basename, emoji, cover, tags, type, slug, stats, category, summary, paword, favicon, datetime, markDownData, nowFile, this.app, this.settings);
 
             if (res.status === 200) {
-                new Notice(`${langConfig["sync-success"]}${basename}`);
+                new Notice(`${i18nConfig["sync-success"]}${basename}`);
             } else {
-                new Notice(`${langConfig["sync-fail"]}${basename}`, 5000);
+                new Notice(`${i18nConfig["sync-fail"]}${basename}`, 5000);
             }
         }
     }
@@ -137,7 +136,7 @@ export default class ObsidianSyncNotionPlugin extends Plugin {
                 datetime = FileCache.frontmatter.date;
             }
         } catch (error) {
-            new Notice(langConfig["set-tags-fail"]);
+            new Notice(i18nConfig["set-tags-fail"]);
         }
         if (nowFile) {
             const markDownData = await nowFile.vault.read(nowFile);
@@ -157,7 +156,7 @@ export default class ObsidianSyncNotionPlugin extends Plugin {
                 datetime,
             };
         } else {
-            new Notice(langConfig["open-file"]);
+            new Notice(i18nConfig["open-file"]);
             return;
         }
     }
@@ -264,8 +263,8 @@ class ObsidianSettingTab extends PluginSettingTab {
         // General Database Settings
         containerEl.createEl('h2', {text: i18nConfig.NotionGeneralSetting});
 
-		new Setting(containerEl)
+        new Setting(containerEl)
-			.setName(i18nConfig.NotYetFinish)
+            .setName(i18nConfig.NotYetFinish)
 
         // new Setting(containerEl)
         // .setName("Convert tags(optional)")