complete the custom ui design

.github/workflows/release.yml

@@ -20,13 +20,13 @@ jobs:
               with:
                   node-version: "18"
 
-#            - name: Generate changelog
+            - name: Generate changelog
-#              id: changelog
+              id: changelog
-#              uses: release-changelog/action@v1.0.0
+              uses: saadmk11/changelog-ci@v1.1.2
-#              with:
+              with:
-#                  repo-token: ${{ secrets.REPO_ACCESS_TOKEN }}
+                  github_token: ${{ secrets.REPO_ACCESS_TOKEN }}
-#                  version: ${{ github.ref }}
+                  release_version: ${{ github.ref }}
-#                  file: CHANGELOG.md
+                  changelog_filename: CHANGELOG.md
 
             - name: Build
               id: build

README.md

@@ -20,6 +20,7 @@ Thus, based on the [original author's work](https://github.com/EasyChris/obsidia
 ## TODO List
 
 - [ ] Support custom properties for Notion General database. 支持自定义属性
+- [ ] Support group upload with one click 支持一键多数据库上传
 - [x] Support preview for database details in plugin settings. 支持预览数据库详情
 - [x] Support edit for database details in plugin settings. 支持编辑数据库详情
 

src/ui/CustomModal.ts

@@ -0,0 +1,134 @@
+import {App, Modal, Setting} from "obsidian";
+import ObsidianSyncNotionPlugin from "../main";
+import {ObsidianSettingTab} from "./settingTabs";
+
+export class CustomModal extends Modal {
+	propertyLines: Setting[] = []; // Store all property line settings
+	properties: { customValue: string, customType: string }[] = []; // Array to store property values and types
+	plugin: ObsidianSyncNotionPlugin;
+	settingTab: ObsidianSettingTab;
+
+	constructor(app: App) {
+		super(app);
+	}
+
+	createPropertyLine(containerEl: HTMLElement): void {
+		const propertyIndex = this.properties.length;
+		this.properties.push({customValue: "", customType: ""}); // Initialize with empty values
+
+		const propertyLine = new Setting(containerEl)
+
+		propertyLine
+			.setName("Property " + (propertyIndex + 1))
+
+		propertyLine.addText((text) => {
+				text
+					.setPlaceholder("Property name")
+					.setValue("")
+					.onChange(async (value) => {
+						this.properties[propertyIndex].customValue = value; // Update the customValue of the specific property
+					});
+			}
+		)
+
+		propertyLine.addDropdown((dropdown) => {
+				dropdown
+					.addOption("text", "Text")
+					.addOption("number", "Number")
+					.addOption("select", "Select")
+					.addOption("multi_select", "Multi-Select")
+					.addOption("date", "Date")
+					.addOption("person", "Person")
+					.addOption("file", "Files & Media")
+					.addOption("checkbox", "Checkbox")
+					.addOption("url", "URL")
+					.addOption("email", "Email")
+					.addOption("phone_number", "Phone Number")
+					.addOption("formula", "Formula")
+					.addOption("relation", "Relation")
+					.addOption("rollup", "Rollup")
+					.addOption("created_time", "Created time")
+					.addOption("created_by", "Created by")
+					.addOption("last_edited_time", "Last Edited Time")
+					.addOption("last_edited_by", "Last Edited By")
+					.setValue("text")
+					.onChange(async (value) => {
+						this.properties[propertyIndex].customType = value; // Update the customType of the specific property
+					});
+			}
+		)
+
+		propertyLine.addButton((button) => {
+				return button
+					.setTooltip("Delete")
+					.setIcon("trash")
+					.onClick(async () => {
+						// Handle the deletion of this property line
+						this.propertyLines = this.propertyLines.filter(line => line !== propertyLine);
+						this.properties.splice(propertyIndex, 1); // Remove the property from the array
+						propertyLine.settingEl.remove();
+					});
+			}
+		);
+
+		this.propertyLines.push(propertyLine);
+	}
+
+
+	display(): void {
+
+		this.containerEl.addClass("custom-modal");
+		this.titleEl.setText("Add Custom Property");
+
+		let {contentEl} = this;
+		contentEl.empty();
+
+		const customDiv = contentEl.createDiv("custom-div");
+
+		new Setting(customDiv)
+			.setName("Add new property")
+			.setDesc("Add new property match with your notion database")
+			.addButton((button) => {
+				return button
+					.setTooltip("Add")
+					.setIcon("plus")
+					.onClick(async () => {
+						const customTabs = customDiv.createDiv("custom-tabs");
+						this.createPropertyLine(customTabs);
+					});
+			});
+
+
+		let footerEl = this.contentEl.createDiv("save-custom-value");
+		let saveButton = new Setting(footerEl)
+		saveButton.addButton((button) => {
+				return button
+					.setTooltip("Save")
+					.setIcon("checkmark")
+					.onClick(async () => {
+						this.close();
+					});
+			}
+		);
+
+		saveButton.addExtraButton((button) => {
+				return button
+					.setTooltip("Cancel")
+					.setIcon("cross")
+					.onClick(async () => {
+						this.close();
+					});
+			}
+		);
+	}
+
+	onOpen(): void {
+		this.display();
+	}
+
+	onClose(): void {
+		const {contentEl} = this;
+
+		contentEl.empty();
+	}
+}

src/ui/EditModal.ts

@@ -3,6 +3,7 @@ import {SettingModal} from "./settingModal";
 import ObsidianSyncNotionPlugin from "../main";
 import {DatabaseDetails, ObsidianSettingTab} from "./settingTabs";
 import {i18nConfig} from "../lang/I18n";
+import {CustomModal} from "./CustomModal";
 
 export class EditModal extends SettingModal {
 	dataTemp: Record<string, any> = {
@@ -21,6 +22,7 @@ export class EditModal extends SettingModal {
 		customTitleButtonTemp: false,
 		// customTitleButtonTempInd: false,
 		customTitleNameTemp: '',
+		customPropertiesTemp: [],
 		// customTitleNameTempInd: false,
 		// customValues: '',
 		savedTemp: false,
@@ -42,6 +44,7 @@ export class EditModal extends SettingModal {
 		customTitleButtonPrev: false,
 		// customTitleButtonPrevInd: false,
 		customTitleNamePrev: '',
+		customPropertiesPrev: [],
 		// customTitleNamePrevInd: false,
 		// customValues: '',
 		savedPrev: false,
@@ -67,6 +70,7 @@ export class EditModal extends SettingModal {
 			this.dataTemp.tagButtonTemp = dbDetails.tagButton;
 			this.dataTemp.customTitleButtonTemp = dbDetails.customTitleButton;
 			this.dataTemp.customTitleNameTemp = dbDetails.customTitleName;
+			this.dataTemp.customPropertiesTemp = dbDetails.customProperties;
 			// this.dataTemp.customValues = dbDetails.customValues;
 			this.dataTemp.savedTemp = dbDetails.saved;
 
@@ -79,6 +83,7 @@ export class EditModal extends SettingModal {
 			this.dataPrev.tagButtonPrev = dbDetails.tagButton;
 			this.dataPrev.customTitleButtonPrev = dbDetails.customTitleButton;
 			this.dataPrev.customTitleNamePrev = dbDetails.customTitleName;
+			this.dataPrev.customPropertiesPrev = dbDetails.customProperties;
 			// this.dataTemp.customValues = dbDetails.customValues;
 			this.dataPrev.savedPrev = dbDetails.saved;
 		}
@@ -103,7 +108,7 @@ export class EditModal extends SettingModal {
 						.addOption('none', '')
 						.addOption('general', i18nConfig.databaseGeneral)
 						.addOption('next', i18nConfig.databaseNext)
-						// .addOption('custom', i18nConfig.databaseCustom)
+						.addOption('custom', i18nConfig.databaseCustom)
 						.setValue(this.dataTemp.databaseFormatTemp)
 						.onChange(async (value) => {
 							this.dataTemp.databaseFormatTemp = value;
@@ -211,70 +216,49 @@ export class EditModal extends SettingModal {
 			// 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});
+
+			nextTabs.createEl('h3', {text: i18nConfig.NotionCustomSettingHeader});
 
 			// add full name
-			this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.dataTemp.databaseFullNameTemp,'dataTemp', 'databaseFullNameTemp')
+			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')
+			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(nextTabs, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.dataTemp.notionAPITemp, 'dataTemp', 'notionAPITemp')
-			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(nextTabs, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.dataTemp.databaseIDTemp, 'dataTemp', 'databaseIDTemp')
-			this.createSettingEl(databaseIDGeneralEl, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.dataTemp.databaseIDTemp, 'dataTemp', 'databaseIDTemp')
+
+			// add custom title name
+			this.createSettingEl(nextTabs, i18nConfig.NotionCustomTitleName, i18nConfig.NotionCustomTitleNameDesc, 'text', i18nConfig.NotionCustomTitleText, this.dataTemp.CustomTitleNameTemp, 'dataTemp', 'CustomTitleNameTemp')
+
+			// add new property button
+			new Setting(nextTabs)
+				.setName(i18nConfig.NotionCustomValues)
+				.setDesc(i18nConfig.NotionCustomValuesDesc)
+				.addButton((button: ButtonComponent) => {
+						return button
+							.setTooltip('Add new property')
+							.setIcon('plus')
+							.onClick(async () => {
+								let customModal = new CustomModal(this.app);
+
+								customModal.onClose = () => {
+
+									this.renderCustomPreview(customModal.properties, nextTabs)
+									this.dataTemp.customPropertiesTemp = customModal.properties;
+								}
+
+								customModal.open();
+							});
+					}
+				);
 		}
 
 	}

src/ui/PreviewModal.ts

@@ -116,10 +116,24 @@ export class PreviewModal extends Modal {
 
 		dbIdSetting.settingEl.style.display = 'none'; // Hide initially
 
+		// Preview the custom properties
+
+		if (this.dbDetails.format === 'custom') {
+
+			const customPropertiesEl = new Setting(previewEl)
+			customPropertiesEl
+				.setName('Custom Properties')
+				.addTextArea(text => text
+					.setValue(JSON.stringify(this.dbDetails.customProperties, null, 2))
+					.setDisabled(true));
+		}
+
 	}
 
 
 	onOpen() {
 		this.display()
 	}
+
+
 }

src/ui/settingModal.ts

@@ -5,9 +5,10 @@ import {
 	ButtonComponent, App
 } from 'obsidian';
 
-import { i18nConfig } from "../lang/I18n";
+import {i18nConfig} from "../lang/I18n";
 import ObsidianSyncNotionPlugin from "../main";
 import {DatabaseDetails, ObsidianSettingTab} from "./settingTabs";
+import {CustomModal} from "./CustomModal";
 
 
 export class SettingModal extends Modal {
@@ -21,6 +22,7 @@ export class SettingModal extends Modal {
 		tagButton: true,
 		customTitleButton: false,
 		customTitleName: '',
+		customProperties: [],
 		// customValues: '',
 		saved: false,
 	};
@@ -31,6 +33,7 @@ export class SettingModal extends Modal {
 		super(app);
 		this.plugin = plugin;
 		this.settingTab = settingTab;
+		this.properties = [];
 		if (dbDetails) {
 			this.data.databaseFormat = dbDetails.format;
 			this.data.databaseFullName = dbDetails.fullName;
@@ -40,6 +43,7 @@ export class SettingModal extends Modal {
 			this.data.tagButton = dbDetails.tagButton;
 			this.data.customTitleButton = dbDetails.customTitleButton;
 			this.data.customTitleName = dbDetails.customTitleName;
+			this.data.customProperties = dbDetails.customProperties;
 			// this.data.customValues = dbDetails.customValues;
 			this.data.saved = dbDetails.saved;
 		}
@@ -51,14 +55,13 @@ export class SettingModal extends Modal {
 		this.titleEl.setText('Add new database');
 
 		// create the dropdown button to select the database format
-		let { contentEl } = this;
+		let {contentEl} = this;
 		contentEl.empty();
 
 		const settingDiv = contentEl.createDiv('setting-div');
 		const nextTabs = contentEl.createDiv('next-tabs');
 
 
-
 		if (this.data.saved) {
 			new Setting(settingDiv)
 				.setName(i18nConfig.databaseFormat)
@@ -68,7 +71,7 @@ export class SettingModal extends Modal {
 						.addOption('none', '')
 						.addOption('general', i18nConfig.databaseGeneral)
 						.addOption('next', i18nConfig.databaseNext)
-						// .addOption('custom', i18nConfig.databaseCustom)
+						.addOption('custom', i18nConfig.databaseCustom)
 						.setValue(this.data.databaseFormat)
 						.onChange(async (value) => {
 							this.data.databaseFormat = value;
@@ -89,7 +92,7 @@ export class SettingModal extends Modal {
 						.addOption('none', '')
 						.addOption('general', i18nConfig.databaseGeneral)
 						.addOption('next', i18nConfig.databaseNext)
-						// .addOption('custom', i18nConfig.databaseCustom)
+						.addOption('custom', i18nConfig.databaseCustom)
 						.setValue(this.data.databaseFormat)
 						.onChange(async (value) => {
 							this.data.databaseFormat = value;
@@ -103,29 +106,28 @@ export class SettingModal extends Modal {
 		}
 
 
-
 		// add save button
 		let footerEl = contentEl.createDiv('save-button');
 		let saveButton = new Setting(footerEl)
 		saveButton.addButton((button: ButtonComponent) => {
-			return button
+				return button
-				.setTooltip('Save')
+					.setTooltip('Save')
-				.setIcon('checkmark')
+					.setIcon('checkmark')
-				.onClick(async () => {
+					.onClick(async () => {
-					this.data.saved = true;
+						this.data.saved = true;
-					this.close();
+						this.close();
-				});
+					});
-		}
+			}
 		);
 		saveButton.addExtraButton((button) => {
-			return button
+				return button
-				.setTooltip('Cancel')
+					.setTooltip('Cancel')
-				.setIcon('cross')
+					.setIcon('cross')
-				.onClick(() => {
+					.onClick(() => {
-					this.data.saved = false;
+						this.data.saved = false;
-					this.close();
+						this.close();
-				});
+					});
-		}
+			}
 		);
 	}
 
@@ -135,16 +137,16 @@ export class SettingModal extends Modal {
 
 		// Generate content based on the selected value
 		if (value === 'general') {
-			nextTabs.createEl('h3', { text: i18nConfig.NotionGeneralSettingHeader });
+			nextTabs.createEl('h3', {text: i18nConfig.NotionGeneralSettingHeader});
 
 			// add full name
-			this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.data.databaseFullName, 'data','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, 'data','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, 'data','tagButton')
+			this.createSettingEl(nextTabs, i18nConfig.NotionTagButton, i18nConfig.NotionTagButtonDesc, 'toggle', i18nConfig.NotionCustomTitleText, this.data.tagButton, 'data', 'tagButton')
 
 			// add custom title button
 
@@ -169,112 +171,100 @@ export class SettingModal extends Modal {
 
 			// 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, 'data','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, 'data','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, 'data','databaseID')
+			this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.data.databaseID, 'data', 'databaseID')
 
 
 		} else if (value === 'next') {
 
-			nextTabs.createEl('h3', { text: i18nConfig.NotionNextSettingHeader });
+			nextTabs.createEl('h3', {text: i18nConfig.NotionNextSettingHeader});
 
 			// add full name
-			this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.data.databaseFullName,'data','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, 'data','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, 'data','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, 'data','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});
+			nextTabs.createEl('h3', {text: i18nConfig.NotionCustomSettingHeader});
 
 			// add full name
-			this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.data.databaseFullName, 'data','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, 'data','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,'data', 'tagButton')
-
-			// add custom title button
-
-			new Setting(nextTabs)
-				.setName(i18nConfig.NotionCustomTitle)
-				.setDesc(i18nConfig.NotionCustomTitleDesc)
-				.addToggle((toggle) =>
-					toggle
-						.setValue(this.data.CustomTitleButton)
-						.onChange(async (value) => {
-							this.data.CustomTitleButton = 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.data.CustomTitleButton), nextTabs);
-			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);
-			// new Setting(CustomValuesEl)
-			// 	.setName(i18nConfig.NotionCustomValues)
-			// 	.setDesc(i18nConfig.NotionCustomValuesDesc)
-			// 	.addTextArea((text) => {
-			// 		return text
-			// 			.setPlaceholder(i18nConfig.NotionCustomValuesText)
-			// 			.setValue(this.data.CustomValues)
-			// 			.onChange(async (value) => {
-			// 				this.data.CustomValues = value;
-			// 				await this.plugin.saveSettings();
-			// 			});
-			// 	});
-
 
 			// add api key
-			const notionAPIGeneralEl = this.createStyleDiv('api-general', this.plugin.settings.GeneralButton, nextTabs);
+			this.createSettingEl(nextTabs, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.data.notionAPI, 'data', '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(nextTabs, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.data.databaseID, 'data', 'databaseID')
-			this.createSettingEl(databaseIDGeneralEl, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.data.databaseID, 'data', 'databaseID')
+
+			// add custom title name
+			this.createSettingEl(nextTabs, i18nConfig.NotionCustomTitleName, i18nConfig.NotionCustomTitleNameDesc, 'text', i18nConfig.NotionCustomTitleText, this.data.CustomTitleName, 'data', 'CustomTitleName')
+
+			// add new property button
+			new Setting(nextTabs)
+				.setName(i18nConfig.NotionCustomValues)
+				.setDesc(i18nConfig.NotionCustomValuesDesc)
+				.addButton((button: ButtonComponent) => {
+						return button
+							.setTooltip('Add new property')
+							.setIcon('plus')
+							.onClick(async () => {
+								let customModal = new CustomModal(this.app);
+
+								customModal.onClose = () => {
+
+									this.renderCustomPreview(customModal.properties, nextTabs)
+									this.data.customProperties = customModal.properties;
+								}
+
+								customModal.open();
+							});
+					}
+				);
 		}
 
 	}
 
 
-
 	onOpen() {
 		// add console log to check if the modal is opened
 		this.display()
 	}
 
+	renderCustomPreview(properties: any[], nextTabs: HTMLElement) {
+		const previewContainer = nextTabs.createDiv('preview-container');
+
+		properties.forEach((property: { customValue: any; customType: any; }) => {
+			const propertyEl = previewContainer.createEl('div', {cls: 'property-preview'});
+			propertyEl.createEl('span', {text: `Property: ${property.customValue}, Type: ${property.customType}`});
+		});
+
+	}
 
 
 	// create a function to create a div with a style for pop over elements
-	public createStyleDiv(className: string, commandValue: boolean = false,parentEl: HTMLElement ) {
+	public createStyleDiv(className: string, commandValue: boolean = false, parentEl: HTMLElement) {
 		return parentEl.createDiv(className, (div) => {
 			this.updateSettingEl(div, commandValue);
 		});
 	}
+
 	// update the setting display style in the setting tab
 	public updateSettingEl(element: HTMLElement, commandValue: boolean) {
 		element.style.borderTop = commandValue ? "1px solid var(--background-modifier-border)" : "none";

src/ui/settingTabs.ts

@@ -37,6 +37,7 @@ export interface DatabaseDetails {
 	tagButton: boolean;
 	customTitleButton: boolean;
 	customTitleName: string;
+	customProperties:{ customValue: string, customType: string }[];
 	// customValues: string;
 	saved: boolean;
 }
@@ -107,6 +108,7 @@ export class ObsidianSettingTab extends PluginSettingTab {
 									tagButton: modal.data.tagButton,
 									customTitleButton: modal.data.customTitleButton,
 									customTitleName: modal.data.customTitleName,
+									customProperties: modal.data.customProperties,
 									// customValues: modal.data.customValues,
 									saved: modal.data.saved,
 								}
@@ -271,6 +273,7 @@ export class ObsidianSettingTab extends PluginSettingTab {
 										tagButton: modal.dataTemp.tagButtonTemp,
 										customTitleButton: modal.dataTemp.customTitleButtonTemp,
 										customTitleName: modal.dataTemp.customTitleNameTemp,
+										customProperties: modal.dataTemp.customPropertiesTemp,
 										// customValues: modal.data.customValues,
 										saved: modal.dataTemp.savedTemp,
 									}
@@ -284,6 +287,7 @@ export class ObsidianSettingTab extends PluginSettingTab {
 										tagButton: modal.dataPrev.tagButtonPrev,
 										customTitleButton: modal.dataPrev.customTitleButtonPrev,
 										customTitleName: modal.dataPrev.customTitleNamePrev,
+										customProperties: modal.dataPrev.customPropertiesPrev,
 										// customValues: modal.data.customValues,
 										saved: modal.dataPrev.savedPrev,
 									}

src/upload/uploadCommand.ts

@@ -100,13 +100,13 @@ export async function uploadCommandCustom(
         return;
     }
 
-    const { markDownData, nowFile, cover, tags ,customValues} = await getNowFileMarkdownContentCustom(app, settings)
+    const { markDownData, nowFile, cover,  customValues} = await getNowFileMarkdownContentCustom(app, dbDetails, settings)
 
     if (markDownData) {
         const { basename } = nowFile;
 
         const upload = new Upload2NotionCustom(plugin,dbDetails);
-        const res = await upload.syncMarkdownToNotionCustom(basename, cover, tags, customValues, markDownData, nowFile, this.app);
+        const res = await upload.syncMarkdownToNotionCustom(basename, cover, customValues, markDownData, nowFile, this.app);
 
         if (res.status === 200) {
             new Notice(`${i18nConfig["sync-success"]}${basename}`);

src/upload/upoload_custom/Upload2NotionCustom.ts

@@ -23,7 +23,6 @@ export class Upload2NotionCustom extends UploadBaseCustom {
 		notionID: string,
 		title: string,
 		cover: string,
-		tags: string[],
 		customValues: Record<string, string>,
 		childArr: any,
 	) {
@@ -39,13 +38,12 @@ export class Upload2NotionCustom extends UploadBaseCustom {
 			cover = databaseCover;
 		}
 
-		return await this.createPage(title, cover, tags, customValues, childArr);
+		return await this.createPage(title, cover, customValues, childArr);
 	}
 
 	async createPage(
 		title: string,
 		cover: string,
-		tags: string[],
 		customValues: Record<string, string>,
 		childArr: any,
 	) {
@@ -54,7 +52,6 @@ export class Upload2NotionCustom extends UploadBaseCustom {
 			databaseID,
 			customTitleButton,
 			customTitleName,
-			tagButton,
 			notionAPI
 		} = this.dbDetails;
 
@@ -129,7 +126,6 @@ export class Upload2NotionCustom extends UploadBaseCustom {
 	async syncMarkdownToNotionCustom(
 		title: string,
 		cover: string,
-		tags: string[],
 		customValues: Record<string, string>,
 		markdown: string,
 		nowFile: TFile,
@@ -153,12 +149,11 @@ export class Upload2NotionCustom extends UploadBaseCustom {
 				notionID,
 				title,
 				cover,
-				tags,
 				customValues,
 				file2Block,
 			);
 		} else {
-			res = await this.createPage(title, cover, tags, customValues, file2Block);
+			res = await this.createPage(title, cover, customValues, file2Block);
 		}
 		if (res.status === 200) {
 			await updateYamlInfo(markdown, nowFile, res, app, this.plugin, this.dbDetails);

src/upload/upoload_custom/getMarkdownCustom.ts

@@ -1,28 +1,29 @@
 import {App, Notice} from "obsidian";
 import {i18nConfig} from "../../lang/I18n";
-import {PluginSettings} from "../../ui/settingTabs";
+import {DatabaseDetails, PluginSettings} from "../../ui/settingTabs";
 
 export async function getNowFileMarkdownContentCustom(
     app: App,
+	dbDetails: DatabaseDetails,
     settings: PluginSettings,
 ) {
     const nowFile = app.workspace.getActiveFile();
     let cover = '';
-    let tags = [];
+	let customValues: Record<string, any> = {}; // Change 'any' to a more specific type if possible
-    let customValues: Record<string, string> = {};
 
     const FileCache = app.metadataCache.getFileCache(nowFile);
     try {
             cover = FileCache.frontmatter.coverurl;
-            tags = FileCache.frontmatter.tags;
 
-            // split the CustomValues into an array
+		// Get custom property names from dbDetails
-            const customValuesNames = settings.CustomValues.split('\n').map(value => value.trim());
+		const customPropertyNames = dbDetails.customProperties.map(property => property.customValue);
 
-            // get the custom values from the frontmatter
+		// Extract custom values from the frontmatter based on the names
-            customValuesNames.forEach(valueName => {
+		customPropertyNames.forEach(propertyName => {
-                customValues[valueName] = FileCache.frontmatter[valueName];
+			if (FileCache.frontmatter[propertyName] !== undefined) {
-            });
+				customValues[propertyName] = FileCache.frontmatter[propertyName];
+			}
+		});
     } catch (error) {
         new Notice(i18nConfig["set-tags-fail"]);
     }
@@ -33,7 +34,6 @@ export async function getNowFileMarkdownContentCustom(
             markDownData,
             nowFile,
             cover,
-            tags,
             customValues,
         };
     } else {