Fix formatting and update Chinese docs for custom attributes PR

- Convert spaces to tabs for consistent indentation
- Fix typos in comments (Wheteher -> Whether, attribues -> attributes)
- Add missing newline at EOF in types.ts
- Add space before parenthesis in if statement
- Remove AI translation disclaimer comment
- Fix incomplete Chinese translation for useCustomAttributes description
- Add custom attributes section and settings to README_CN.md

README_CN.md

@@ -10,6 +10,7 @@
 - 支持自定义图片宽度
 - 支持自定义图片保存路径（如 `./assets`）
 - 可选择是否包含 alt 属性
+- 支持自定义 HTML 属性（如自定义 class 或样式）
 - 粘贴时可选择显示通知
 
 ## 为什么使用 HTML 格式？
@@ -48,12 +49,22 @@ HTML 格式的图片标签比 Markdown 或 Obsidian 的 wikilink 格式更广泛
 <img src="image_1234567890.jpg" width="auto" alt="image_1234567890.jpg">
 ```
 
+### 关于自定义属性
+
+您可以启用"使用自定义属性"来完全自定义 HTML 属性（如自定义 class 或 CSS 变量），启用后将忽略图片宽度和 alt 属性设置。使用此功能可以生成如下标签：
+
+```html
+<img src="./assets/image_1778330017341.png" class="image-class" style="--img-width: 40vw;">
+```
+
 ## 设置
 
 - **图片宽度**：设置图片的宽度，可以是像素值（如 500px）、百分比（如 100%）或 auto
 - **使用自定义图片路径**：启用后，图片将保存到指定路径而不是当前文件所在目录
 - **自定义图片路径**：设置图片保存的路径，可以是相对路径（如 ./assets）或绝对路径（如 assets）
 - **包含 alt 属性**：启用后，HTML 图片标签将包含 alt 属性，有助于无障碍性和 SEO，但会使标签更长
+- **使用自定义属性**：启用后，使用下方指定的自定义 HTML 属性，同时忽略图片宽度和 alt 属性设置
+- **自定义属性**：用于最终 HTML 输出的自定义属性字符串
 - **显示通知**：粘贴图片时是否显示通知
 
 ## 安装

src/i18n.ts

@@ -59,10 +59,9 @@ const zh: Translations = {
             name: '显示通知',
             desc: '粘贴图片时显示通知'
         },
-        // Translation was provided by AI (not sure if correct)
         useCustomAttributes: {
             name: '使用自定义 HTML 属性',
-            desc: '启用后将使用下方指定的自定义 HTML 属性（如自定义 class），注意这会移除图片宽度设置'
+            desc: '启用后将使用下方指定的自定义 HTML 属性（如自定义 class），注意这会忽略图片宽度和 alt 属性设置'
         },
         customAttributes: {
             name: '自定义属性',

src/main.ts

@@ -117,8 +117,8 @@ export default class Img2HtmlPlugin extends Plugin {
 			this.settings.imagePath,
 			this.settings.imageWidth,
 			this.settings.includeAlt,
-            this.settings.useCustomAttributes,
-            this.settings.customAttributes
+		this.settings.useCustomAttributes,
+		this.settings.customAttributes
 		);
 		
 		// Insert HTML image tag into editor

src/settings.ts

@@ -8,8 +8,8 @@ interface Img2HtmlPlugin extends Plugin {
 		imagePath: string;
 		useCustomPath: boolean;
 		includeAlt: boolean;
-        useCustomAttributes: boolean;
-        customAttributes: string;
+		useCustomAttributes: boolean;
+		customAttributes: string;
 	};
 	i18n: Translations;
 	saveSettings(): Promise<void>;
@@ -82,22 +82,22 @@ export class Img2HtmlSettingTab extends PluginSettingTab {
 				}));
 
 		new Setting(containerEl)
-            .setName(i18n.settings.customAttributes.name)
-            .setDesc(i18n.settings.customAttributes.desc)
-            .addTextArea(text => {
-                text.setPlaceholder('class="custom-style"')
-                    .setValue(this.plugin.settings.customAttributes)
-                    .onChange(async (value) => {
-                        this.plugin.settings.customAttributes = value;
-                        await this.plugin.saveSettings();
-                    });
+		.setName(i18n.settings.customAttributes.name)
+		.setDesc(i18n.settings.customAttributes.desc)
+		.addTextArea(text => {
+			text.setPlaceholder('class="custom-style"')
+				.setValue(this.plugin.settings.customAttributes)
+				.onChange(async (value) => {
+					this.plugin.settings.customAttributes = value;
+					await this.plugin.saveSettings();
+				});
+
+			text.inputEl.style.resize = 'none';
+			text.inputEl.style.height = '100px';
+			text.inputEl.style.width = '100%';
+		});
+
 
-                // Styling settings to make the text area bigger
-                text.inputEl.style.resize = 'none';
-                text.inputEl.style.height = '100px';
-                text.inputEl.style.width = '100%';
-            });
-            
 		new Setting(containerEl)
 			.setName(i18n.settings.showNotice.name)
 			.setDesc(i18n.settings.showNotice.desc)

src/types.ts

@@ -12,10 +12,10 @@ export interface Img2HtmlSettings {
 	useCustomPath: boolean;
 	// Whether to include alt attribute
 	includeAlt: boolean;
-    // Wheteher to use custom HTML attribues
-    useCustomAttributes: boolean;
-    // String of custom HTML attribues
-    customAttributes: string;
+	// Whether to use custom HTML attributes
+	useCustomAttributes: boolean;
+	// String of custom HTML attributes
+	customAttributes: string;
 }
 
 /**
@@ -27,6 +27,7 @@ export const DEFAULT_SETTINGS: Img2HtmlSettings = {
 	imagePath: './assets',
 	useCustomPath: false,
 	includeAlt: false,
-    useCustomAttributes: false,
-    customAttributes: ''
-}; 
+	useCustomAttributes: false,
+	customAttributes: ''
+};
+ 

src/utils.ts

@@ -26,8 +26,8 @@ export function createHtmlImgTag(
 	customPath: string,
 	imageWidth: string,
 	includeAlt: boolean,
-    useCustomAttributes: boolean,
-    customAttributes: string
+	useCustomAttributes: boolean,
+	customAttributes: string
 ): string {
 	let src = '';
 	
@@ -48,12 +48,11 @@ export function createHtmlImgTag(
 	}
 	
 	// Build HTML tag
-	if(useCustomAttributes) {
-        // Remove trailing and leading whitespace and prevent early closure
-        const attrs = customAttributes.trim().replace(/>/g, '');
-        const space = attrs ? ' ': '';
-        return `<img src="${src}"${space}${attrs}>`;
-    } else if (includeAlt) {
+	if (useCustomAttributes) {
+		const attrs = customAttributes.trim().replace(/>/g, '');
+		const space = attrs ? ' ' : '';
+		return `<img src="${src}"${space}${attrs}>`;
+	} else if (includeAlt) {
 		return `<img src="${src}" width="${imageWidth}" alt="${fileName}">`;
 	} else {
 		return `<img src="${src}" width="${imageWidth}">`;