Update version to 2.1.0

.github/workflows/release.yml

@@ -20,6 +20,14 @@ jobs:
               with:
                   node-version: "18"
 
+            - name: Generate changelog
+              id: changelog
+              uses: release-changelog/action@v1.0.0
+              with:
+                  repo-token: ${{ secrets.REPO_ACCESS_TOKEN }}
+                  version: ${{ github.ref }}
+                  file: CHANGELOG.md
+
             - name: Build
               id: build
               run: |

CHANGELOG.md

@@ -0,0 +1,18 @@
+# Changelog v2.1.0
+
+## Feature
+
+- add confirmation interface for deleting a database
+- 增加删除数据库的确认界面
+
+## Fix
+
+- fix the typo in the edit database modal
+- improve the logic for the database editing
+- 修复编辑数据库界面的标题错误
+- 改进数据库编辑界面的逻辑
+
+## TODO
+
+- [ ] add the support for the customised properties of general databases
+- [ ] 增加对普通数据库自定义属性的支持

README.md

@@ -2,9 +2,11 @@
 
 [![Test](https://github.com/jxpeng98/obsidian-to-NotionNext/actions/workflows/test.yml/badge.svg)](https://github.com/jxpeng98/obsidian-to-NotionNext/actions/workflows/test.yml)
 [![Release](https://github.com/jxpeng98/obsidian-to-NotionNext/actions/workflows/release.yml/badge.svg)](https://github.com/jxpeng98/obsidian-to-NotionNext/actions/workflows/release.yml)
-[![Github all releases](https://img.shields.io/github/downloads/jxpeng98/obsidian-to-NotionNext/total.svg)](https://GitHub.com/jxpeng98/obsidian-to-NotionNext/releases/)
+[![Obsidian Downloads](https://img.shields.io/badge/dynamic/json?logo=obsidian&color=%23483699&label=downloads&query=%24%5B%22share-to-notionnext%22%5D.downloads&url=https%3A%2F%2Fraw.githubusercontent.com%2Fobsidianmd%2Fobsidian-releases%2Fmaster%2Fcommunity-plugin-stats.json)](https://GitHub.com/jxpeng98/obsidian-to-NotionNext/releases/)
 [![GitHub release (with filter)](https://img.shields.io/github/v/release/jxpeng98/obsidian-to-NotionNext)](https://github.com/jxpeng98/obsidian-to-NotionNext/releases/)
 
+[//]: # ([![Github all releases](https://img.shields.io/github/downloads/jxpeng98/obsidian-to-NotionNext/total.svg)](https://GitHub.com/jxpeng98/obsidian-to-NotionNext/releases/))
+
 [中文文档](README-zh.md)
 
 Thanks to the [original author](https://github.com/EasyChris/obsidian-to-notion) for developing such a useful plugin that can synchronize Obsidian to Notion. However, the original repository can only sync Name and Tag information. For those like me who use [NotionNext](https://github.com/tangly1024/NotionNext) to set up their website, this presents some limitations. Every time I import, I need to make a lot of modifications.
@@ -23,6 +25,12 @@ Thus, based on the [original author's work](https://github.com/EasyChris/obsidia
 
 ## Update
 
+### 2.1.0
+
+- add confirmation interface for deleting a database 增加删除数据库的确认界面
+- fix the typo in the edit database modal 修复编辑数据库界面的标题错误
+- improve the logic for the database editing 改进数据库编辑界面的逻辑
+
 ### 2.0.1
 
 - Add the preview and edit function for database details in the plugin settings. 增加插件设置中数据库详情的预览和编辑功能。

manifest.json

@@ -1,7 +1,7 @@
 {
   "id": "share-to-notionnext",
   "name": "Share to NotionNext",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "minAppVersion": "0.0.1",
   "description": "Shares obsidian md file to notion with notion api for NotionNext web deploy, originally created by EasyChris/obsidian-to-notion.",
   "author": "EasyChris, jxpeng98",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "share-to-notionnext",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "type": "module",
   "description": "Shares obsidian md file to notion with notion api for NotionNext web deploy, originally created by EasyChris/obsidian-to-notion.",
   "main": "main.js",

src/ui/DeleteModal.ts

@@ -0,0 +1,64 @@
+import {App, ButtonComponent, Modal, Setting} from "obsidian";
+import {DatabaseDetails, ObsidianSettingTab} from "./settingTabs";
+import ObsidianSyncNotionPlugin from "../main";
+
+export class DeleteModal extends Modal {
+	data: Record<string, any> = {
+		deleted: false,
+	}
+	plugin: ObsidianSyncNotionPlugin;
+	settingTab: ObsidianSettingTab;
+	dbDetails: DatabaseDetails
+
+	constructor(app: App, plugin: ObsidianSyncNotionPlugin, settingTab: ObsidianSettingTab, dbDetails: DatabaseDetails) {
+		super(app);
+		this.plugin = plugin;
+		this.settingTab = settingTab;
+		this.dbDetails = dbDetails;
+	}
+
+	display() {
+		this.containerEl.addClass("delete-modal");
+		this.titleEl.setText('Delete Database');
+
+		let {contentEl} = this;
+		contentEl.empty();
+
+		const deleteDiv = contentEl.createDiv('delete-div');
+		deleteDiv.createEl('h4', {text: 'Are you sure you want to delete the following database?'});
+		deleteDiv.createEl('h2', {text: this.dbDetails.fullName + ' (' + this.dbDetails.abName + ', ' + this.dbDetails.format +')'});
+
+
+		// add delete button
+		let footerEl = contentEl.createDiv('save-button');
+		let deleteButton = new Setting(footerEl)
+
+		deleteButton
+			.addButton((button: ButtonComponent): ButtonComponent => {
+				return button
+					.setTooltip("Delete")
+					.setIcon("trash")
+					.onClick(async () => {
+						this.data.deleted = true;
+						this.close();
+					})
+			});
+
+		deleteButton.addExtraButton((button) => {
+			return button
+				.setTooltip('Cancel')
+				.setIcon('cross')
+				.onClick(() => {
+					this.data.deleted = false;
+					this.close();
+				});
+		});
+
+	}
+
+
+	onOpen() {
+		this.display();
+	}
+
+}

src/ui/EditModal.ts

@@ -0,0 +1,294 @@
+import {App, ButtonComponent, Modal, Setting} from "obsidian";
+import {SettingModal} from "./settingModal";
+import ObsidianSyncNotionPlugin from "../main";
+import {DatabaseDetails, ObsidianSettingTab} from "./settingTabs";
+import {i18nConfig} from "../lang/I18n";
+
+export class EditModal extends SettingModal {
+	dataTemp: Record<string, any> = {
+		databaseFormatTemp: '',
+		// databaseFormatTempInd: false,
+		databaseFullNameTemp: '',
+		// databaseFullNameTempInd: false,
+		databaseAbbreviateNameTemp: '',
+		// databaseAbbreviateNameTempInd: false,
+		notionAPITemp: '',
+		// notionAPITempInd: false,
+		databaseIDTemp: '',
+		// databaseIDTempInd: false,
+		tagButtonTemp: false,
+		// tagButtonTempInd: false,
+		customTitleButtonTemp: false,
+		// customTitleButtonTempInd: false,
+		customTitleNameTemp: '',
+		// customTitleNameTempInd: false,
+		// customValues: '',
+		savedTemp: false,
+		savedTempInd: false,
+	};
+	dataPrev: Record<string, any> = {
+		databaseFormatPrev: '',
+		// databaseFormatPrevInd: false,
+		databaseFullNamePrev: '',
+		// databaseFullNamePrevInd: false,
+		databaseAbbreviateNamePrev: '',
+		// databaseAbbreviateNamePrevInd: false,
+		notionAPIPrev: '',
+		// notionAPIPrevInd: false,
+		databaseIDPrev: '',
+		// databaseIDPrevInd: false,
+		tagButtonPrev: false,
+		// tagButtonPrevInd: false,
+		customTitleButtonPrev: false,
+		// customTitleButtonPrevInd: false,
+		customTitleNamePrev: '',
+		// customTitleNamePrevInd: false,
+		// customValues: '',
+		savedPrev: false,
+		savedPrevInd: false,
+	};
+
+
+	plugin: ObsidianSyncNotionPlugin;
+	settingTab: ObsidianSettingTab;
+	dbDetails: DatabaseDetails;
+
+	constructor(app: App, plugin: ObsidianSyncNotionPlugin, settingTab: ObsidianSettingTab, dbDetails: DatabaseDetails) {
+		super(app, plugin, settingTab);
+		this.plugin = plugin;
+		this.settingTab = settingTab;
+		if (dbDetails) {
+			// Temp details
+			this.dataTemp.databaseFormatTemp = dbDetails.format;
+			this.dataTemp.databaseFullNameTemp = dbDetails.fullName;
+			this.dataTemp.databaseAbbreviateNameTemp = dbDetails.abName;
+			this.dataTemp.notionAPITemp = dbDetails.notionAPI;
+			this.dataTemp.databaseIDTemp = dbDetails.databaseID;
+			this.dataTemp.tagButtonTemp = dbDetails.tagButton;
+			this.dataTemp.customTitleButtonTemp = dbDetails.customTitleButton;
+			this.dataTemp.customTitleNameTemp = dbDetails.customTitleName;
+			// this.dataTemp.customValues = dbDetails.customValues;
+			this.dataTemp.savedTemp = dbDetails.saved;
+
+			// Prev details
+			this.dataPrev.databaseFormatPrev = dbDetails.format;
+			this.dataPrev.databaseFullNamePrev = dbDetails.fullName;
+			this.dataPrev.databaseAbbreviateNamePrev = dbDetails.abName;
+			this.dataPrev.notionAPIPrev = dbDetails.notionAPI;
+			this.dataPrev.databaseIDPrev = dbDetails.databaseID;
+			this.dataPrev.tagButtonPrev = dbDetails.tagButton;
+			this.dataPrev.customTitleButtonPrev = dbDetails.customTitleButton;
+			this.dataPrev.customTitleNamePrev = dbDetails.customTitleName;
+			// this.dataTemp.customValues = dbDetails.customValues;
+			this.dataPrev.savedPrev = dbDetails.saved;
+		}
+	}
+
+
+	display(): void {
+		this.containerEl.addClass("edit-modal");
+		this.titleEl.setText('Edit Database');
+
+		let {contentEl} = this;
+		contentEl.empty();
+
+		const editDiv = contentEl.createDiv('edit-div');
+		const nextTabs = contentEl.createDiv('next-tabs');
+
+			new Setting(editDiv)
+				.setName(i18nConfig.databaseFormat)
+				.setDesc(i18nConfig.databaseFormatDesc)
+				.addDropdown((component) => {
+					component
+						.addOption('none', '')
+						.addOption('general', i18nConfig.databaseGeneral)
+						.addOption('next', i18nConfig.databaseNext)
+						// .addOption('custom', i18nConfig.databaseCustom)
+						.setValue(this.dataTemp.databaseFormatTemp)
+						.onChange(async (value) => {
+							this.dataTemp.databaseFormatTemp = value;
+							nextTabs.empty();
+							this.updateContentBasedOnSelection(value, nextTabs);
+						});
+
+					// Initialize content based on the current dropdown value
+					this.updateContentBasedOnSelection(this.dataTemp.databaseFormatTemp, nextTabs);
+				});
+
+
+		// add save button
+		let footerEl = contentEl.createDiv('save-button');
+		let saveButton = new Setting(footerEl)
+		saveButton.addButton((button: ButtonComponent) => {
+				return button
+					.setTooltip('Save')
+					.setIcon('checkmark')
+					.onClick(async () => {
+						this.dataTemp.savedTempInd = true;
+						this.dataTemp.savedTemp = true;
+						this.close();
+					});
+			}
+		);
+		saveButton.addExtraButton((button) => {
+				return button
+					.setTooltip('Cancel')
+					.setIcon('cross')
+					.onClick(() => {
+						this.dataTemp.savedTempInd = false;
+						this.close();
+					});
+			}
+		);
+
+	}
+
+	onOpen(): void {
+		this.display()
+	}
+
+
+	updateContentBasedOnSelection(value: string, nextTabs: HTMLElement): void {
+		// Clear existing content
+		nextTabs.empty();
+
+		// Generate content based on the selected value
+		if (value === 'general') {
+			nextTabs.createEl('h3', { text: i18nConfig.NotionGeneralSettingHeader });
+
+			// add full name
+			this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.dataTemp.databaseFullNameTemp,'dataTemp', 'databaseFullNameTemp')
+
+			// add abbreviate name
+			this.createSettingEl(nextTabs, i18nConfig.databaseAbbreviateName, i18nConfig.databaseAbbreviateNameDesc, 'text', i18nConfig.databaseAbbreviateNameText, this.dataTemp.databaseAbbreviateNameTemp, 'dataTemp','databaseAbbreviateNameTemp')
+
+			// tag button
+			this.createSettingEl(nextTabs, i18nConfig.NotionTagButton, i18nConfig.NotionTagButtonDesc, 'toggle', i18nConfig.NotionCustomTitleText, this.dataTemp.tagButtonTemp, 'dataTemp','tagButtonTemp')
+
+			// add custom title button
+
+			new Setting(nextTabs)
+				.setName(i18nConfig.NotionCustomTitle)
+				.setDesc(i18nConfig.NotionCustomTitleDesc)
+				.addToggle((toggle) =>
+					toggle
+						.setValue(this.dataTemp.CustomTitleButtonTemp)
+						.onChange(async (value) => {
+							this.dataTemp.CustomTitleButtonTemp = value;
+
+							this.updateSettingEl(CustomNameEl, value)
+
+							// this.updateSettingEl(CustomValuesEl, value)
+
+							// await this.plugin.saveSettings();
+							// await this.plugin.commands.updateCommand();
+						})
+				);
+
+
+			// add custom title name
+			const CustomNameEl = this.createStyleDiv('custom-name', (this.dataTemp.CustomTitleButtonTemp), nextTabs);
+			this.createSettingEl(CustomNameEl, i18nConfig.NotionCustomTitleName, i18nConfig.NotionCustomTitleNameDesc, 'text', i18nConfig.NotionCustomTitleText, this.dataTemp.CustomTitleNameTemp,'dataTemp', 'CustomTitleNameTemp')
+
+
+			// add api key
+			this.createSettingEl(nextTabs, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.dataTemp.notionAPITemp, 'dataTemp','notionAPITemp')
+
+			// add database id
+			this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.dataTemp.databaseIDTemp, 'dataTemp','databaseIDTemp')
+
+
+		} else if (value === 'next') {
+
+			nextTabs.createEl('h3', { text: i18nConfig.NotionNextSettingHeader });
+
+			// add full name
+			this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.dataTemp.databaseFullNameTemp, 'dataTemp','databaseFullNameTemp')
+
+			// add abbreviate name
+			this.createSettingEl(nextTabs, i18nConfig.databaseAbbreviateName, i18nConfig.databaseAbbreviateNameDesc, 'text', i18nConfig.databaseAbbreviateNameText, this.dataTemp.databaseAbbreviateNameTemp, 'dataTemp','databaseAbbreviateNameTemp')
+
+			// add api key
+			this.createSettingEl(nextTabs, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.dataTemp.notionAPITemp, 'dataTemp','notionAPITemp')
+
+
+			// add database id
+			this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.dataTemp.databaseIDTemp, 'dataTemp','databaseIDTemp')
+
+		} else if (value === 'custom') {
+			nextTabs.createEl('h3', { text: i18nConfig.NotionCustomSettingHeader});
+
+			// add full name
+			this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.dataTemp.databaseFullNameTemp,'dataTemp', 'databaseFullNameTemp')
+
+			// add abbreviate name
+			this.createSettingEl(nextTabs, i18nConfig.databaseAbbreviateName, i18nConfig.databaseAbbreviateNameDesc, 'text', i18nConfig.databaseAbbreviateNameText, this.dataTemp.databaseAbbreviateNameTemp, 'dataTemp','databaseAbbreviateNameTemp')
+
+			// tag button
+			this.createSettingEl(nextTabs, i18nConfig.NotionTagButton, i18nConfig.NotionTagButtonDesc, 'toggle', i18nConfig.NotionCustomTitleText, this.dataTemp.tagButtonTemp, 'dataTemp','tagButtonTemp')
+
+			// add custom title button
+
+			new Setting(nextTabs)
+				.setName(i18nConfig.NotionCustomTitle)
+				.setDesc(i18nConfig.NotionCustomTitleDesc)
+				.addToggle((toggle) =>
+					toggle
+						.setValue(this.dataTemp.CustomTitleButtonTemp)
+						.onChange(async (value) => {
+							this.dataTemp.CustomTitleButtonTemp = value;
+
+							this.updateSettingEl(CustomNameEl, value)
+
+							// this.updateSettingEl(CustomValuesEl, value)
+
+							// await this.plugin.saveSettings();
+							// await this.plugin.commands.updateCommand();
+						})
+				);
+
+
+			// add custom title name
+			const CustomNameEl = this.createStyleDiv('custom-name', (this.dataTemp.CustomTitleButtonTemp), nextTabs);
+			this.createSettingEl(CustomNameEl, i18nConfig.NotionCustomTitleName, i18nConfig.NotionCustomTitleNameDesc, 'text', i18nConfig.NotionCustomTitleText, this.dataTemp.CustomTitleNameTemp,'dataTemp', 'CustomTitleNameTemp')
+
+			// // add custom values
+			// const CustomValuesEl = this.createStyleDiv('custom-values', (this.dataTemp.CustomTitleButton), nextTabs);
+			// new Setting(CustomValuesEl)
+			// 	.setName(i18nConfig.NotionCustomValues)
+			// 	.setDesc(i18nConfig.NotionCustomValuesDesc)
+			// 	.addTextArea((text) => {
+			// 		return text
+			// 			.setPlaceholder(i18nConfig.NotionCustomValuesText)
+			// 			.setValue(this.dataTemp.CustomValues)
+			// 			.onChange(async (value) => {
+			// 				this.dataTemp.CustomValues = value;
+			// 				await this.plugin.saveSettings();
+			// 			});
+			// 	});
+
+
+			// add api key
+			const notionAPIGeneralEl = this.createStyleDiv('api-general', this.plugin.settings.GeneralButton, nextTabs);
+			this.createSettingEl(notionAPIGeneralEl, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.dataTemp.notionAPITemp, 'dataTemp','notionAPITemp')
+
+			// add database id
+			const databaseIDGeneralEl = this.createStyleDiv('databaseID-general', this.plugin.settings.GeneralButton, nextTabs);
+			this.createSettingEl(databaseIDGeneralEl, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.dataTemp.databaseIDTemp, 'dataTemp', 'databaseIDTemp')
+		}
+
+	}
+
+
+	createStyleDiv(className: string, commandValue: boolean = false, parentEl: HTMLElement): HTMLDivElement {
+		return super.createStyleDiv(className, commandValue, parentEl);
+	}
+
+	updateSettingEl(element: HTMLElement, commandValue: boolean) {
+		super.updateSettingEl(element, commandValue);
+	}
+
+	createSettingEl(contentEl: HTMLElement, name: string, desc: string, type: string, placeholder: string, holderValue: any, dataRecord: string, settingsKey: string): Setting {
+		return super.createSettingEl(contentEl, name, desc, type, placeholder, holderValue, dataRecord, settingsKey);
+	}
+}

src/ui/settingModal.ts

@@ -13,6 +13,7 @@ import {SettingGeneralTabs} from "./settingGeneralTabs";
 
 
 export class SettingModal extends Modal {
+	[key: string]: any; // Index signature
 	data: Record<string, any> = {
 		databaseFormat: 'none',
 		databaseFullName: '',
@@ -139,13 +140,13 @@ export class SettingModal extends Modal {
 			nextTabs.createEl('h3', { text: i18nConfig.NotionGeneralSettingHeader });
 
 			// add full name
-			this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.data.databaseFullName, 'databaseFullName')
+			this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.data.databaseFullName, 'data','databaseFullName')
 
 			// add abbreviate name
-			this.createSettingEl(nextTabs, i18nConfig.databaseAbbreviateName, i18nConfig.databaseAbbreviateNameDesc, 'text', i18nConfig.databaseAbbreviateNameText, this.data.databaseAbbreviateName, 'databaseAbbreviateName')
+			this.createSettingEl(nextTabs, i18nConfig.databaseAbbreviateName, i18nConfig.databaseAbbreviateNameDesc, 'text', i18nConfig.databaseAbbreviateNameText, this.data.databaseAbbreviateName, 'data','databaseAbbreviateName')
 
 			// tag button
-			this.createSettingEl(nextTabs, i18nConfig.NotionTagButton, i18nConfig.NotionTagButtonDesc, 'toggle', i18nConfig.NotionCustomTitleText, this.data.tagButton, 'tagButton')
+			this.createSettingEl(nextTabs, i18nConfig.NotionTagButton, i18nConfig.NotionTagButtonDesc, 'toggle', i18nConfig.NotionCustomTitleText, this.data.tagButton, 'data','tagButton')
 
 			// add custom title button
 
@@ -162,22 +163,22 @@ export class SettingModal extends Modal {
 
 							// this.updateSettingEl(CustomValuesEl, value)
 
-							await this.plugin.saveSettings();
-							await this.plugin.commands.updateCommand();
+							// await this.plugin.saveSettings();
+							// await this.plugin.commands.updateCommand();
 						})
 				);
 
 
 			// add custom title name
 			const CustomNameEl = this.createStyleDiv('custom-name', (this.data.CustomTitleButton), nextTabs);
-			this.createSettingEl(CustomNameEl, i18nConfig.NotionCustomTitleName, i18nConfig.NotionCustomTitleNameDesc, 'text', i18nConfig.NotionCustomTitleText, this.data.CustomTitleName, 'CustomTitleName')
+			this.createSettingEl(CustomNameEl, i18nConfig.NotionCustomTitleName, i18nConfig.NotionCustomTitleNameDesc, 'text', i18nConfig.NotionCustomTitleText, this.data.CustomTitleName, 'data','CustomTitleName')
 
 
 			// add api key
-			this.createSettingEl(nextTabs, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.data.notionAPI, 'notionAPI')
+			this.createSettingEl(nextTabs, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.data.notionAPI, 'data','notionAPI')
 
 			// add database id
-			this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.data.databaseID, 'databaseID')
+			this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.data.databaseID, 'data','databaseID')
 
 
 		} else if (value === 'next') {
@@ -185,29 +186,29 @@ export class SettingModal extends Modal {
 			nextTabs.createEl('h3', { text: i18nConfig.NotionNextSettingHeader });
 
 			// add full name
-			this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.data.databaseFullName, 'databaseFullName')
+			this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.data.databaseFullName,'data','databaseFullName')
 
 			// add abbreviate name
-			this.createSettingEl(nextTabs, i18nConfig.databaseAbbreviateName, i18nConfig.databaseAbbreviateNameDesc, 'text', i18nConfig.databaseAbbreviateNameText, this.data.databaseAbbreviateName, 'databaseAbbreviateName')
+			this.createSettingEl(nextTabs, i18nConfig.databaseAbbreviateName, i18nConfig.databaseAbbreviateNameDesc, 'text', i18nConfig.databaseAbbreviateNameText, this.data.databaseAbbreviateName, 'data','databaseAbbreviateName')
 
 			// add api key
-			this.createSettingEl(nextTabs, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.data.notionAPI, 'notionAPI')
+			this.createSettingEl(nextTabs, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.data.notionAPI, 'data','notionAPI')
 
 
 			// add database id
-			this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.data.databaseID, 'databaseID')
+			this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.data.databaseID, 'data','databaseID')
 
 		} else if (value === 'custom') {
 			nextTabs.createEl('h3', { text: i18nConfig.NotionCustomSettingHeader});
 
 			// add full name
-			this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.data.databaseFullName, 'databaseFullName')
+			this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.data.databaseFullName, 'data','databaseFullName')
 
 			// add abbreviate name
-			this.createSettingEl(nextTabs, i18nConfig.databaseAbbreviateName, i18nConfig.databaseAbbreviateNameDesc, 'text', i18nConfig.databaseAbbreviateNameText, this.data.databaseAbbreviateName, 'databaseAbbreviateName')
+			this.createSettingEl(nextTabs, i18nConfig.databaseAbbreviateName, i18nConfig.databaseAbbreviateNameDesc, 'text', i18nConfig.databaseAbbreviateNameText, this.data.databaseAbbreviateName, 'data','databaseAbbreviateName')
 
 			// tag button
-			this.createSettingEl(nextTabs, i18nConfig.NotionTagButton, i18nConfig.NotionTagButtonDesc, 'toggle', i18nConfig.NotionCustomTitleText, this.data.tagButton, 'tagButton')
+			this.createSettingEl(nextTabs, i18nConfig.NotionTagButton, i18nConfig.NotionTagButtonDesc, 'toggle', i18nConfig.NotionCustomTitleText, this.data.tagButton,'data', 'tagButton')
 
 			// add custom title button
 
@@ -224,15 +225,15 @@ export class SettingModal extends Modal {
 
 							// this.updateSettingEl(CustomValuesEl, value)
 
-							await this.plugin.saveSettings();
-							await this.plugin.commands.updateCommand();
+							// await this.plugin.saveSettings();
+							// await this.plugin.commands.updateCommand();
 						})
 				);
 
 
 			// add custom title name
 			const CustomNameEl = this.createStyleDiv('custom-name', (this.data.CustomTitleButton), nextTabs);
-			this.createSettingEl(CustomNameEl, i18nConfig.NotionCustomTitleName, i18nConfig.NotionCustomTitleNameDesc, 'text', i18nConfig.NotionCustomTitleText, this.data.CustomTitleName, 'CustomTitleName')
+			this.createSettingEl(CustomNameEl, i18nConfig.NotionCustomTitleName, i18nConfig.NotionCustomTitleNameDesc, 'text', i18nConfig.NotionCustomTitleText, this.data.CustomTitleName,'data', 'CustomTitleName')
 
 			// // add custom values
 			// const CustomValuesEl = this.createStyleDiv('custom-values', (this.data.CustomTitleButton), nextTabs);
@@ -252,11 +253,11 @@ export class SettingModal extends Modal {
 
 			// add api key
 			const notionAPIGeneralEl = this.createStyleDiv('api-general', this.plugin.settings.GeneralButton, nextTabs);
-			this.createSettingEl(notionAPIGeneralEl, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.data.notionAPI, 'notionAPI')
+			this.createSettingEl(notionAPIGeneralEl, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.data.notionAPI,'data', 'notionAPI')
 
 			// add database id
 			const databaseIDGeneralEl = this.createStyleDiv('databaseID-general', this.plugin.settings.GeneralButton, nextTabs);
-			this.createSettingEl(databaseIDGeneralEl, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.data.databaseID, 'databaseID')
+			this.createSettingEl(databaseIDGeneralEl, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.data.databaseID, 'data', 'databaseID')
 		}
 
 	}
@@ -285,7 +286,7 @@ export class SettingModal extends Modal {
 	}
 
 	// function to add one setting element in the setting tab.
-	public createSettingEl(contentEl: HTMLElement, name: string, desc: string, type: string, placeholder: string, holderValue: any,settingsKey: string) {
+	public createSettingEl(contentEl: HTMLElement, name: string, desc: string, type: string, placeholder: string, holderValue: any, dataRecord: string, settingsKey: string) {
 		if (type === 'password') {
 			return new Setting(contentEl)
 				.setName(name)
@@ -296,7 +297,7 @@ export class SettingModal extends Modal {
 						.setPlaceholder(placeholder)
 						.setValue(holderValue)
 						.onChange(async (value) => {
-							this.data[settingsKey] = value; // Update the settings dictionary							await this.plugin.saveSettings();
+							this[dataRecord][settingsKey] = value; // Update the settings dictionary							await this.plugin.saveSettings();
 						})
 				});
 		} else if (type === 'toggle') {
@@ -307,7 +308,7 @@ export class SettingModal extends Modal {
 					toggle
 						.setValue(holderValue)
 						.onChange(async (value) => {
-							this.data[settingsKey] = value; // Update the settings dictionary							await this.plugin.saveSettings();
+							this[dataRecord][settingsKey] = value; // Update the settings dictionary							await this.plugin.saveSettings();
 						})
 				);
 		} else if (type === 'text') {
@@ -319,7 +320,7 @@ export class SettingModal extends Modal {
 						.setPlaceholder(placeholder)
 						.setValue(holderValue)
 						.onChange(async (value) => {
-							this.data[settingsKey] = value; // Update the settings dictionary							await this.plugin.saveSettings();
+							this[dataRecord][settingsKey] = value; // Update the settings dictionary							await this.plugin.saveSettings();
 						})
 				);
 		}

src/ui/settingTabs.ts

@@ -1,4 +1,4 @@
-import {App, ButtonComponent, PluginSettingTab, Setting} from "obsidian";
+import {App, ButtonComponent, Modal, PluginSettingTab, Setting} from "obsidian";
 import {i18nConfig} from "../lang/I18n";
 import ObsidianSyncNotionPlugin from "../main";
 import {SettingModal} from "./settingModal";
@@ -6,6 +6,8 @@ import {SettingNextTabs} from "./settingNextTabs";
 import {SettingGeneralTabs} from "./settingGeneralTabs";
 import {set} from "yaml/dist/schema/yaml-1.1/set";
 import {PreviewModal} from "./PreviewModal";
+import {EditModal} from "./EditModal";
+import {DeleteModal} from "./DeleteModal";
 
 export interface PluginSettings {
     NextButton: boolean;
@@ -251,30 +253,45 @@ export class ObsidianSettingTab extends PluginSettingTab {
 						});
 				});
 
+				// add a button for edit data
 				settingEl
 				.addButton((button: ButtonComponent): ButtonComponent => {
 					return button
 						.setTooltip("Edit Database")
 						.setIcon("pencil")
 						.onClick(async () => {
-							let modal = new SettingModal(this.app, this.plugin, this, dbDetails);
+							let modal = new EditModal(this.app, this.plugin, this, dbDetails);
 
 							modal.onClose = () => {
-								if (modal.data.saved) {
-									const dbDetails = {
-										format: modal.data.databaseFormat,
-										fullName: modal.data.databaseFullName,
-										abName: modal.data.databaseAbbreviateName,
-										notionAPI: modal.data.notionAPI,
-										databaseID: modal.data.databaseID,
-										tagButton: modal.data.tagButton,
-										customTitleButton: modal.data.customTitleButton,
-										customTitleName: modal.data.customTitleName,
+								if (modal.dataTemp.savedTempInd) {
+									const dbDetailsNew: DatabaseDetails = {
+										format: modal.dataTemp.databaseFormatTemp,
+										fullName: modal.dataTemp.databaseFullNameTemp,
+										abName: modal.dataTemp.databaseAbbreviateNameTemp,
+										notionAPI: modal.dataTemp.notionAPITemp,
+										databaseID: modal.dataTemp.databaseIDTemp,
+										tagButton: modal.dataTemp.tagButtonTemp,
+										customTitleButton: modal.dataTemp.customTitleButtonTemp,
+										customTitleName: modal.dataTemp.customTitleNameTemp,
 										// customValues: modal.data.customValues,
-										saved: modal.data.saved,
+										saved: modal.dataTemp.savedTemp,
 									}
 
-									this.plugin.updateDatabaseDetails(dbDetails);
+									const dbDetailsPrev: DatabaseDetails = {
+										format: modal.dataPrev.databaseFormatPrev,
+										fullName: modal.dataPrev.databaseFullNamePrev,
+										abName: modal.dataPrev.databaseAbbreviateNamePrev,
+										notionAPI: modal.dataPrev.notionAPIPrev,
+										databaseID: modal.dataPrev.databaseIDPrev,
+										tagButton: modal.dataPrev.tagButtonPrev,
+										customTitleButton: modal.dataPrev.customTitleButtonPrev,
+										customTitleName: modal.dataPrev.customTitleNamePrev,
+										// customValues: modal.data.customValues,
+										saved: modal.dataPrev.savedPrev,
+									}
+
+									this.plugin.deleteDatabaseDetails(dbDetailsPrev);
+									this.plugin.updateDatabaseDetails(dbDetailsNew);
 
 									this.plugin.commands.updateCommand();
 
@@ -292,11 +309,20 @@ export class ObsidianSettingTab extends PluginSettingTab {
 						.setTooltip("Delete Database")
 						.setIcon("trash")
 						.onClick(async () => {
-							await this.plugin.deleteDatabaseDetails(dbDetails);
+							let modal = new DeleteModal(this.app, this.plugin, this, dbDetails);
 
-							await this.plugin.commands.updateCommand();
+							modal.onClose = () => {
+								if (modal.data.deleted) {
+									this.plugin.deleteDatabaseDetails(dbDetails);
+
+									this.plugin.commands.updateCommand();
+
+									this.display()
+								}
+							}
+
+							modal.open();
 
-							this.display()
 						});
 				});
 		}