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,8 +2,10 @@
 
 [![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/)
-[![GitLab latest release](https://badgen.net/github/release/jxpeng98/obsidian-to-NotionNext)](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)
 
@@ -18,10 +20,27 @@ Thus, based on the [original author's work](https://github.com/EasyChris/obsidia
 ## TODO List
 
 - [ ] Support custom properties for Notion General database. 支持自定义属性
-- [ ] Support preview for database details in plugin settings. 支持预览数据库详情
+- [x] Support preview for database details in plugin settings. 支持预览数据库详情
-- [ ] Support edit for database details in plugin settings. 支持编辑数据库详情
+- [x] Support edit for database details in plugin settings. 支持编辑数据库详情
 
 ## 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. 增加插件设置中数据库详情的预览和编辑功能。
+![](https://minioapi.pjx.ac.cn/img1/2024/01/952f1e579daeac35b257ff7d744b0a3d.png)
+  - Preview:
+  ![](https://minioapi.pjx.ac.cn/img1/2024/01/952f1e579daeac35b257ff7d744b0a3d.png)
+
+  - Edit:
+	![](https://minioapi.pjx.ac.cn/img1/2024/01/ded3d62660f5488c76488304a3fb269e.png)
+  
 ### 2.0.0 (Big Update)
 
 - redesign the plugin settings UI. From this version, the settings UI will be separated into two parts: 
@@ -30,11 +49,12 @@ Thus, based on the [original author's work](https://github.com/EasyChris/obsidia
 - 重新设计了插件设置界面。从这个版本开始，设置界面将被分成两部分：
   - 一部分是通用设置：bannerUrl和你的notion用户名（ID）
   - 一部分是数据库列表：你可以添加新的数据库或者删除数据库。
-  
+
 ![](https://minioapi.pjx.ac.cn/img1/2023/12/f7e89241f45cfee6b902ec4b69dd6f63.png)
 
 - You can add more databases in the plugin settings.
 - 你可以在插件设置中添加更多的数据库。
+
 ![](https://minioapi.pjx.ac.cn/img1/2023/12/023bf46ebbc92c3991d2c443c575bc80.gif)
 
 - You can sync one note to multiple databases.

manifest.json

@@ -1,7 +1,7 @@
 {
   "id": "share-to-notionnext",
   "name": "Share to NotionNext",
-  "version": "2.0.0",
+  "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.0",
+  "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/main.ts

@@ -81,10 +81,7 @@ export default class ObsidianSyncNotionPlugin extends Plugin {
 
 		await this.saveSettings();
 	}
-
+	
-	// previewDatabase(dbDetails: DatabaseDetails) {
-	//
-	// }
 }
 
 

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/PreviewModal.ts

@@ -0,0 +1,125 @@
+import {App, ExtraButtonComponent, Modal, Notice, Setting} from "obsidian";
+import ObsidianSyncNotionPlugin from "../main";
+import {DatabaseDetails, ObsidianSettingTab} from "./settingTabs";
+
+export class PreviewModal extends Modal {
+	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(): void {
+		this.containerEl.addClass('preview-modal')
+		this.titleEl.setText('Preview')
+
+		let { contentEl } = this;
+
+		const previewEl = contentEl.createDiv('preview-content')
+
+		const dbFormatEl = new Setting(previewEl)
+			dbFormatEl
+			.setName('Database Format')
+				.addText(text => text
+					.setValue(this.dbDetails.format)
+					.setDisabled(true));
+
+		const dbFullEl = new Setting(previewEl)
+			dbFullEl
+			.setName('Database Full Name')
+				.addText(text => text
+					.setValue(this.dbDetails.fullName)
+					.setDisabled(true));
+
+		const dbAbbrEl = new Setting(previewEl)
+			dbAbbrEl
+			.setName('Database Abbreviate Name')
+				.addText(text => text
+					.setValue(this.dbDetails.abName)
+					.setDisabled(true));
+		// .controlEl.createEl('p', { text: this.dbDetails.abName })
+
+		// Setting for toggle and copy buttons
+		new Setting(previewEl)
+			.setName('Notion API Key')
+			.addExtraButton((button: ExtraButtonComponent) => {
+				let isApiKeyVisible = false;
+
+				return button
+					.setTooltip('Toggle API Key Visibility')
+					.setIcon('eye')
+					.onClick(() => {
+						isApiKeyVisible = !isApiKeyVisible;
+						button.setIcon(isApiKeyVisible ? 'eye-off' : 'eye');
+						apiKeySetting.settingEl.style.display = isApiKeyVisible ? '' : 'none'; // Toggle visibility
+					});
+			})
+
+
+		// Setting for displaying the API key
+		const apiKeySetting = new Setting(previewEl)
+
+		apiKeySetting.infoEl.createEl('p', { text: this.dbDetails.notionAPI })
+
+
+		apiKeySetting
+			.addExtraButton((button: ExtraButtonComponent) => {
+				return button
+					.setTooltip('Copy API Key')
+					.setIcon('clipboard')
+					.onClick(() => {
+						navigator.clipboard.writeText(this.dbDetails.notionAPI)
+						new Notice('API Key copied to clipboard');
+					});
+			});
+
+		apiKeySetting.settingEl.style.display = 'none'; // Hide initially
+
+
+
+		new Setting(previewEl)
+			.setName('Database ID')
+			.addExtraButton((button: ExtraButtonComponent) => {
+				let isDbIdVisible = false;
+
+				return button
+					.setTooltip('Toggle Database ID Visibility')
+					.setIcon('eye')
+					.onClick(() => {
+
+						isDbIdVisible = !isDbIdVisible;
+						button.setIcon(isDbIdVisible ? 'eye-off' : 'eye');
+						dbIdSetting.settingEl.style.display = isDbIdVisible ? '' : 'none'; // Toggle visibility
+					});
+			})
+
+		const dbIdSetting = new Setting(previewEl)
+
+		dbIdSetting.infoEl.createEl('p', { text: this.dbDetails.databaseID })
+
+		dbIdSetting
+			.addExtraButton((button: ExtraButtonComponent) => {
+				return button
+					.setTooltip('Copy Database ID')
+					.setIcon('clipboard')
+					.onClick(() => {
+						navigator.clipboard.writeText(this.dbDetails.databaseID)
+						new Notice('Database ID copied to clipboard');
+					});
+			});
+
+		dbIdSetting.settingEl.style.display = 'none'; // Hide initially
+
+	}
+
+
+	onOpen() {
+		this.display()
+	}
+}

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: '',
@@ -42,6 +43,7 @@ export class SettingModal extends Modal {
 			this.data.customTitleButton = dbDetails.customTitleButton;
 			this.data.customTitleName = dbDetails.customTitleName;
 			// this.data.customValues = dbDetails.customValues;
+			this.data.saved = dbDetails.saved;
 		}
 
 	}
@@ -58,28 +60,53 @@ export class SettingModal extends Modal {
 		const nextTabs = contentEl.createDiv('next-tabs');
 
 
-		new Setting(settingDiv)
-			.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.data.databaseFormat)
-					.onChange(async (value) => {
-						this.data.databaseFormat = value;
-						nextTabs.empty();
-						this.updateContentBasedOnSelection(value, nextTabs);
-					});
 
-				// Initialize content based on the current dropdown value
+		if (this.data.saved) {
-				this.updateContentBasedOnSelection(this.plugin.settings.databaseFormat, nextTabs);
+			new Setting(settingDiv)
-			});
+				.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.data.databaseFormat)
+						.onChange(async (value) => {
+							this.data.databaseFormat = value;
+							nextTabs.empty();
+							this.updateContentBasedOnSelection(value, nextTabs);
+						});
+
+					// Initialize content based on the current dropdown value
+					this.updateContentBasedOnSelection(this.data.databaseFormat, nextTabs);
+				});
+
+		} else {
+			new Setting(settingDiv)
+				.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.data.databaseFormat)
+						.onChange(async (value) => {
+							this.data.databaseFormat = value;
+							nextTabs.empty();
+							this.updateContentBasedOnSelection(value, nextTabs);
+						});
+
+					// Initialize content based on the current dropdown value
+					this.updateContentBasedOnSelection(this.plugin.settings.databaseFormat, nextTabs);
+				});
+		}
+
+
 
 		// add save button
-
 		let footerEl = contentEl.createDiv('save-button');
 		let saveButton = new Setting(footerEl)
 		saveButton.addButton((button: ButtonComponent) => {
@@ -113,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
 
@@ -136,22 +163,22 @@ export class SettingModal extends Modal {
 
 							// this.updateSettingEl(CustomValuesEl, value)
 
-							await this.plugin.saveSettings();
+							// await this.plugin.saveSettings();
-							await this.plugin.commands.updateCommand();
+							// 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') {
@@ -159,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
 
@@ -198,15 +225,15 @@ export class SettingModal extends Modal {
 
 							// this.updateSettingEl(CustomValuesEl, value)
 
-							await this.plugin.saveSettings();
+							// await this.plugin.saveSettings();
-							await this.plugin.commands.updateCommand();
+							// 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);
@@ -226,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')
 		}
 
 	}
@@ -259,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)
@@ -270,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') {
@@ -281,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') {
@@ -293,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,10 +1,13 @@
-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";
 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;
@@ -37,6 +40,7 @@ export interface DatabaseDetails {
 	customTitleButton: boolean;
 	customTitleName: string;
 	// customValues: string;
+	saved: boolean;
 }
 
 export const DEFAULT_SETTINGS: PluginSettings = {
@@ -82,7 +86,6 @@ export class ObsidianSettingTab extends PluginSettingTab {
         this.createSettingEl(containerEl, i18nConfig.NotionUser, i18nConfig.NotionUserDesc, 'text', i18nConfig.NotionUserText, this.plugin.settings.notionUser, 'notionUser')
 
 
-
 		// add new button
 
 		new Setting(containerEl)
@@ -107,6 +110,7 @@ export class ObsidianSettingTab extends PluginSettingTab {
 									customTitleButton: modal.data.customTitleButton,
 									customTitleName: modal.data.customTitleName,
 									// customValues: modal.data.customValues,
+									saved: modal.data.saved,
 								}
 
 								this.plugin.addDatabaseDetails(dbDetails);
@@ -237,49 +241,67 @@ export class ObsidianSettingTab extends PluginSettingTab {
 
 
 				// add a button for preview data
-				// settingEl
+				settingEl
-				// .addButton((button: ButtonComponent): ButtonComponent => {
+				.addButton((button: ButtonComponent): ButtonComponent => {
-				// 	return button
+					return button
-				// 		.setTooltip("Preview Database")
+						.setTooltip("Preview Database")
-				// 		.setIcon("eye")
+						.setIcon("eye")
-				// 		.onClick(async () => {
+						.onClick(async () => {
-				// 			this.plugin.previewDatabase(dbDetails);
+							let modal = new PreviewModal(this.app, this.plugin, this, dbDetails);
-				// 		});
-				// });
 
-				// settingEl
+							modal.open();
-				// .addButton((button: ButtonComponent): ButtonComponent => {
+						});
-				// 	return button
+				});
-				// 		.setTooltip("Edit Database")
+
-				// 		.setIcon("pencil")
+				// add a button for edit data
-				// 		.onClick(async () => {
+				settingEl
-				// 			let modal = new SettingModal(this.app, this.plugin, this, dbDetails);
+				.addButton((button: ButtonComponent): ButtonComponent => {
-				//
+					return button
-				// 			modal.onClose = () => {
+						.setTooltip("Edit Database")
-				// 				if (modal.data.saved) {
+						.setIcon("pencil")
-				// 					const dbDetails = {
+						.onClick(async () => {
-				// 						format: modal.data.databaseFormat,
+							let modal = new EditModal(this.app, this.plugin, this, dbDetails);
-				// 						fullName: modal.data.databaseFullName,
+
-				// 						abName: modal.data.databaseAbbreviateName,
+							modal.onClose = () => {
-				// 						notionAPI: modal.data.notionAPI,
+								if (modal.dataTemp.savedTempInd) {
-				// 						databaseID: modal.data.databaseID,
+									const dbDetailsNew: DatabaseDetails = {
-				// 						tagButton: modal.data.tagButton,
+										format: modal.dataTemp.databaseFormatTemp,
-				// 						customTitleButton: modal.data.customTitleButton,
+										fullName: modal.dataTemp.databaseFullNameTemp,
-				// 						customTitleName: modal.data.customTitleName,
+										abName: modal.dataTemp.databaseAbbreviateNameTemp,
-				// 						// customValues: modal.data.customValues,
+										notionAPI: modal.dataTemp.notionAPITemp,
-				// 					}
+										databaseID: modal.dataTemp.databaseIDTemp,
-				//
+										tagButton: modal.dataTemp.tagButtonTemp,
-				// 					this.plugin.updateDatabaseDetails(dbDetails);
+										customTitleButton: modal.dataTemp.customTitleButtonTemp,
-				//
+										customTitleName: modal.dataTemp.customTitleNameTemp,
-				// 					this.plugin.commands.updateCommand();
+										// customValues: modal.data.customValues,
-				//
+										saved: modal.dataTemp.savedTemp,
-				// 					this.display()
+									}
-				// 				}
+
-				// 			}
+									const dbDetailsPrev: DatabaseDetails = {
-				//
+										format: modal.dataPrev.databaseFormatPrev,
-				// 			modal.open();
+										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();
+
+									this.display()
+								}
+							}
+
+							modal.open();
+						});
+				});
 
 				settingEl
 				.addButton((button: ButtonComponent): ButtonComponent => {
@@ -287,17 +309,24 @@ 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()
 						});
 				});
 		}
 	}
 }
-function addExtraButton(arg0: (button: ButtonComponent) => ButtonComponent): any {
+
-    throw new Error("Function not implemented.");
-}