Merge pull request #1 from Katzenfutterdose/custom-attribute-string

Added setting for custom HTML attributes

README.md

@@ -48,12 +48,22 @@ By default, the plugin generates HTML tags without the alt attribute to keep the
 <img src="image_1234567890.jpg" width="auto" alt="image_1234567890.jpg">
 ```
 
+### About Custom Attributes
+
+You can enable "Use custom attributes" to disable both the image width and alt tag setting in favor of a fully custom list of attributes, such as a custom CSS class or variables therein. Using this function, you can generate tags like:
+
+```html
+<img src="./assets/image_1778330017341.png" class="image-class" style="--img-width: 40vw;">
+```
+
 ## Settings
 
 - **Image Width**: Set the image width, can be pixels (e.g., 500px), percentage (e.g., 100%), or auto
 - **Use Custom Image Path**: When enabled, images will be saved to the specified path instead of the current file's directory
 - **Custom Image Path**: Set the image save path, can be relative (e.g., ./assets) or absolute (e.g., assets)
 - **Include Alt Attribute**: When enabled, HTML image tags will include the alt attribute for better accessibility and SEO
+- **Use Custom Attributes**: When enabled, uses custom HTML attributes specified below (e.g. a custom class) and ignores the image width and alt tag setting
+- **Custom Attributes**: String of custom attributes to use for the final HTML output
 - **Show Notifications**: Choose whether to show notifications when pasting images
 
 ## Installation

src/i18n.ts

@@ -4,6 +4,14 @@ export interface Translations {
             name: string;
             desc: string;
         };
+        useCustomAttributes: {
+            name: string;
+            desc: string;
+        };
+        customAttributes: {
+            name: string;
+            desc: string;
+        };
         useCustomPath: {
             name: string;
             desc: string;
@@ -50,6 +58,15 @@ const zh: Translations = {
         showNotice: {
             name: '显示通知',
             desc: '粘贴图片时显示通知'
+        },
+        // Translation was provided by AI (not sure if correct)
+        useCustomAttributes: {
+            name: '使用自定义 HTML 属性',
+            desc: '启用后将使用下方指定的自定义 HTML 属性（如自定义 class），注意这会移除图片宽度设置'
+        },
+        customAttributes: {
+            name: '自定义属性',
+            desc: '用于最终 HTML 输出的自定义属性字符串'
         }
     },
     statusBar: {
@@ -81,6 +98,14 @@ const en: Translations = {
         showNotice: {
             name: 'Show notification',
             desc: 'Show notification when pasting images'
+        },
+        useCustomAttributes: {
+            name: 'Use custom HTML attributes',
+            desc: 'When enabled, uses custom HTML attributes specified below (e.g. a custom class) and ignores the image width and alt tag setting'
+        },
+        customAttributes: {
+            name: 'Custom attributes',
+            desc: 'String of custom attributes to use for the final HTML output'
         }
     },
     statusBar: {

src/main.ts

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

src/settings.ts

@@ -8,6 +8,8 @@ interface Img2HtmlPlugin extends Plugin {
 		imagePath: string;
 		useCustomPath: boolean;
 		includeAlt: boolean;
+        useCustomAttributes: boolean;
+        customAttributes: string;
 	};
 	i18n: Translations;
 	saveSettings(): Promise<void>;
@@ -69,6 +71,33 @@ export class Img2HtmlSettingTab extends PluginSettingTab {
 					await this.plugin.saveSettings();
 				}));
 
+		new Setting(containerEl)
+			.setName(i18n.settings.useCustomAttributes.name)
+			.setDesc(i18n.settings.useCustomAttributes.desc)
+			.addToggle(toggle => toggle
+				.setValue(this.plugin.settings.useCustomAttributes)
+				.onChange(async (value) => {
+					this.plugin.settings.useCustomAttributes = value;
+					await this.plugin.saveSettings();
+				}));
+
+		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();
+                    });
+
+                // 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,6 +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;
 }
 
 /**
@@ -22,5 +26,7 @@ export const DEFAULT_SETTINGS: Img2HtmlSettings = {
 	showNotice: true,
 	imagePath: './assets',
 	useCustomPath: false,
-	includeAlt: false
+	includeAlt: false,
+    useCustomAttributes: false,
+    customAttributes: ''
 }; 

src/utils.ts

@@ -25,7 +25,9 @@ export function createHtmlImgTag(
 	useCustomPath: boolean,
 	customPath: string,
 	imageWidth: string,
-	includeAlt: boolean
+	includeAlt: boolean,
+    useCustomAttributes: boolean,
+    customAttributes: string
 ): string {
 	let src = '';
 	
@@ -46,7 +48,12 @@ export function createHtmlImgTag(
 	}
 	
 	// Build HTML tag
-	if (includeAlt) {
+	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) {
 		return `<img src="${src}" width="${imageWidth}" alt="${fileName}">`;
 	} else {
 		return `<img src="${src}" width="${imageWidth}">`;