README.md, modals, example.md

README.md

@@ -20,12 +20,14 @@ A plugin for displaying inline "callouts" in [Obsidian.md](https://github.com/ob
 > [!NOTE]
 > See demo markdown file [here](./demo/example.md)
 
-![](./screenshots/Inline-Callouts-demo-Obsidian-v1.8.9-2025-04-04-18.26.34.png)
+![](./screenshots/Inline-Callouts-demo-Obsidian-v1.8.9-2025-04-06-15.57.34.png)
 
-![](./screenshots/Inline-Callouts-demo-Obsidian-v1.8.9-2025-04-04-18.26.42.png)
+![](./screenshots/Inline-Callouts-demo-Obsidian-v1.8.9-2025-04-06-15.57.39.png)
 
 ## Features
 
+
+
 ## Usage
 
 ### Syntax
@@ -36,8 +38,8 @@ A plugin for displaying inline "callouts" in [Obsidian.md](https://github.com/ob
 
 | Syntax            | Details                        |
 | ----------------- | ------------------------------ |
-| `ICON`            | name of the Lucide icon        |
+| `ICON`            | Name of the Lucide icon        |
-| `LABEL`(optional) | callout label/title text       |
+| `LABEL`(optional) | Callout label/title text       |
 | `COLOR`(optional) | RGB values or Obsidian CSS var |
 
 
@@ -49,7 +51,7 @@ A plugin for displaying inline "callouts" in [Obsidian.md](https://github.com/ob
 - Consecutive callouts must be separated by at lease one space, character, or line return to be rendered correctly in reading view.
 - Does not work inside a wiki-link
 - Markdown and HTML code is NOT rendered in the callout label
-- When using inline callouts in a table, the pipe characters must be escaped. e.g.:
+- When using inline callouts in a table, the pipe characters must be escaped by a backslash `\`. e.g.:
 	```
 	| example                                  |
 	| ---------------------------------------- |
@@ -96,7 +98,7 @@ Custom `CSS` styles can be applied via CSS snippets. All colors and styles can
 
 See [CSS snippets - Obsidian Help](https://help.obsidian.md/Extending+Obsidian/CSS+snippets)
 
-### variables
+### Variables
 
 ```css
 body {
@@ -121,9 +123,24 @@ body {
 }
 ```
 
+### Obsidian.md RGB color variables
+
+```css
+var(--mono-rgb-0)
+var(--mono-rgb-100)
+var(--color-red-rgb)
+var(--color-orange-rgb)
+var(--color-yellow-rgb)
+var(--color-green-rgb)
+var(--color-cyan-rgb)
+var(--color-blue-rgb)
+var(--color-purple-rgb)
+var(--color-pink-rgb)
+```
+
 ## Style Settings plugin
 
-All the above CSS variables can be modified via the [Style Settings plugin](https://github.com/mgmeyers/obsidian-style-settings)
+The above `--inline-callout-*` CSS variables can be modified via the [Style Settings plugin](https://github.com/mgmeyers/obsidian-style-settings)
 
 ## Development
 

demo/example.md

@@ -1,46 +1,29 @@
 `[!!info|Info|var(--color-blue-rgb)]` `[!!lucide-pencil|Note|var(--color-blue-rgb)]` `[!!clipboard-list|Summary|var(--color-cyan-rgb)]`  `[!!flame|Tip|var(--color-cyan-rgb)]` `[!!check|Success|var(--color-green-rgb)]` `[!!question-mark-glyph|Question|var(--color-orange-rgb)]` `[!!alert-triangle|Warning|var(--color-orange-rgb)]` `[!!x|Failure|var(--color-red-rgb)]` `[!!zap|Danger|var(--color-red-rgb)]` `[!!bug|Bug|var(--color-red-rgb)]` `[!!list|Example|var(--color-purple-rgb)]` `[!!quote|Quote|158, 158, 158]` `[!!vault|Vault|var(--color-purple-rgb)]`
 
-
-
-`[!!chevrons-right||var(--color-green-rgb)]` Adipiscing fugiat sint excepteur `[!!hard-hat|laboris|var(--color-orange-rgb)]`. Ut `[!!magnet|magna|var(--color-red-rgb)]`  et lorem enim, sunt veniam qui. Lorem, enim sunt `[!!swords|veniam|var(--color-purple-rgb)]`  qui et laboris reprehenderit. Veniam qui et laboris reprehenderit, ad. Laboris reprehenderit, ad commodo.`[!!question-mark-glyph||var(--color-purple-rgb)]` 
-
-
-
 `[!!info||var(--color-blue-rgb)]` `[!!lucide-pencil||var(--color-blue-rgb)]` `[!!clipboard-list||var(--color-cyan-rgb)]`  `[!!flame||var(--color-cyan-rgb)]` `[!!check||var(--color-green-rgb)]` `[!!question-mark-glyph||var(--color-orange-rgb)]` `[!!alert-triangle||var(--color-orange-rgb)]` `[!!x||var(--color-red-rgb)]` `[!!zap||var(--color-red-rgb)]` `[!!bug||var(--color-red-rgb)]` `[!!list||var(--color-purple-rgb)]` `[!!quote||158, 158, 158]` `[!!vault||var(--color-purple-rgb)]`
 
+`[!!chevrons-right||var(--color-green-rgb)]` Adipiscing fugiat sint excepteur `[!!hard-hat|laboris|var(--color-orange-rgb)]`. Ut `[!!magnet|magna|var(--color-red-rgb)]`  et lorem enim, sunt veniam qui. Lorem, enim sunt `[!!swords|veniam|var(--color-purple-rgb)]`  qui et laboris reprehenderit. Veniam qui et laboris reprehenderit, ad. Laboris reprehenderit, ad commodo.`[!!question-mark-glyph||var(--color-purple-rgb)]` 
 
-
+- [ ] `[!!check-square||var(--color-green-rgb)]` Lorem ipsum dolor sit amet `[!!message-circle-question||var(--color-pink-rgb)]`
-- [ ] Lorem ipsum dolor sit amet `[!!message-circle-question||var(--color-pink-rgb)]`
+- [ ] `[!!shield-alert|Important|var(--color-blue-rgb)]` Aliqua sint sint et deserunt eu eiusmod.
-- [ ] [`[!!github|Github repo|var(--color-blue-rgb)]`](https://github.com/gapmiss/inline-callouts/)
 - [ ] `[!!chevrons-up||var(--color-red-rgb)]`  dolor sit amet, consectetur adipiscing
 
-
-
 > `[!!octagon-alert|Lorem ipsum|var(--color-red-rgb)]`  dolor sit amet, consectetur adipiscing elit, sed do eiusmod `[!!zap||var(--color-red-rgb)]` tempor incididunt ut labore et dolore magna aliqua.
 
+| one                                            | two                                                     |
+| ---------------------------------------------- | ------------------------------------------------------- |
+| `[!!info\|Lorem ipsum\|var(--color-blue-rgb)]` | Lorem ipsum `[!!check-check\|\|var(--color-green-rgb)]` |
 
-
+- `[!!megaphone|Lorem ipsum|var(--color-pink-rgb)]` dolor sit amet, consectetur adipiscing elit
-- `[!!hand|Lorem ipsum|var(--color-pink-rgb)]` dolor sit amet, consectetur adipiscing elit
+- Sunt labore duis dolor. `[!!check-check||var(--color-green-rgb)]`
-- Lorem ipsum dolor sit amet, consectetur adipiscing elit `[!!check-check||var(--color-green-rgb)]`
 	1. `[!!info|Lorem ipsum|var(--color-blue-rgb)]`
 	2. Lorem ipsum `[!!check||var(--color-green-rgb)]`
 
-
-
-| one | two |
-| --- |  --- |
-| `[!!info\|Lorem ipsum\|var(--color-blue-rgb)]` | Lorem ipsum `[!!check-check\|\|var(--color-green-rgb)]` |
-
-
-
 > [!INFO]+ Title
 > `[!!info|Lorem ipsum|var(--color-cyan-rgb)]` dolor sit amet. Aut exercitationem `[!!check-check||var(--color-green-rgb)]`
 
-
-
 # Lorem ipsum `[!!info|dolor|8, 109, 221]`
 
 ## Lorem ipsum `[!!info|dolor|var(--color-orange-rgb)]`
 
 ###### Lorem ipsum `[!!info|dolor|var(--color-green-rgb)]`
-

src/modal/modify.ts

@@ -14,6 +14,7 @@ export class ModifyInlineCalloutModal extends Modal {
 	public calloutColor: string | undefined;
 	public calloutLabel: string | undefined;
 	previewEl: HTMLDivElement;
+	document: Document = window.activeDocument ?? window.document;
 
 	constructor(
 		private plugin: InlineCalloutsPlugin,
@@ -27,7 +28,7 @@ export class ModifyInlineCalloutModal extends Modal {
 		this.onOpen = () => this.display(true);
 	}
 
-	private async display(focus?: boolean, clearColor?: boolean) {
+	private async display(focus?: boolean, clearColor?: boolean, preserveIcon?: boolean) {
 		const { contentEl } = this;
 		contentEl.empty();
 
@@ -37,11 +38,10 @@ export class ModifyInlineCalloutModal extends Modal {
 		let parts: any[] = content.split('|');
 
 		// icon
-		if (clearColor) {
+		if (!clearColor) {
-			// this.calloutIcon = IconSuggest.icon
+			if (!preserveIcon) {
-		}
+				this.calloutIcon = parts[0] ? parts[0].trim().replace(/\\+$/, '').toLowerCase() : 'info';
-		else {
+			}
-			this.calloutIcon = parts[0] ? parts[0].trim().replace(/\\+$/, '').toLowerCase() : 'info';
 		}
 
 		// label
@@ -137,12 +137,13 @@ export class ModifyInlineCalloutModal extends Modal {
 					.onChange((value) => {
 						if (value !== '') {
 							this.calloutColor = value;
+							// this.calloutIcon = this.calloutIcon;
 							this.buildPreview();
-							this.display(false, false);
+							this.display(false, false, true);
 							setTimeout(() => {
-								let dropdown: HTMLSelectElement | null = window.document.querySelector(".inline-callouts-color-dropdown .dropdown");
+								let dropdown: HTMLSelectElement | null = this.document.querySelector(".modify-inline-callout-modal")!.querySelector(".inline-callouts-color-dropdown .dropdown");
 								dropdown!.focus();
-							}, 25);
+							}, 10);
 						}
 					})
 			})
@@ -158,15 +159,12 @@ export class ModifyInlineCalloutModal extends Modal {
 				}
 				cb.setValue(rgbToHex(r, g, b))
 					.onChange((value) => {
-						// this.calloutColor = hexToRgb(value);
-						// this.buildPreview();
-
 						this.calloutColor = hexToRgb(value);
-						let dropdown: HTMLSelectElement | null = window.document.querySelector(".inline-callouts-color-dropdown .dropdown");
+						let dropdown: HTMLSelectElement | null = this.document.querySelector(".modify-inline-callout-modal")!.querySelector(".inline-callouts-color-dropdown .dropdown");
 						dropdown!.value = '';
 						this.buildPreview();
 						setTimeout(() => {
-							let picker: HTMLSelectElement | null = window.document.querySelector('input[type="color"]');
+							let picker: HTMLSelectElement | null = this.document.querySelector(".modify-inline-callout-modal")!.querySelector('input[type="color"]');
 							picker!.focus();
 						}, 10);
 
@@ -177,6 +175,7 @@ export class ModifyInlineCalloutModal extends Modal {
 					.setTooltip('Reset to no color')
 					.onClick(() => {
 						this.calloutColor = '';
+						this.calloutIcon = this.calloutIcon;
 						this.display(false, true);
 					})
 			});

src/modal/new.ts

@@ -10,10 +10,11 @@ import { InlineCallout } from '../callout/builder';
 
 export class NewInlineCalloutModal extends Modal {
 
-	public calloutIcon: string = 'info';
+	public calloutIcon: string = 'lucide-info';
 	public calloutColor: string | undefined;
 	public calloutLabel: string | undefined;
 	previewEl: HTMLDivElement;
+	document: Document = window.activeDocument ?? window.document;
 
 	constructor(
 		private plugin: InlineCalloutsPlugin,
@@ -42,7 +43,7 @@ export class NewInlineCalloutModal extends Modal {
 			.setDesc('To select an icon, click the button. Default: info')
 			.addButton((cb) => {
 				cb
-					.setIcon('lucide-info')
+					.setIcon(this.calloutIcon)
 					.setTooltip("Select icon")
 					.onClick(async (e) => {
 						e.preventDefault();
@@ -102,7 +103,6 @@ export class NewInlineCalloutModal extends Modal {
 					"var(--color-red-rgb)": "Red",
 					"var(--color-yellow-rgb)": "Yellow",
 				})
-					// .setValue(this.calloutColor!)
 					.setValue(this.calloutColor?.startsWith("var(--color") ? this.calloutColor : '')
 					.onChange((value) => {
 						if (value !== '') {
@@ -110,9 +110,9 @@ export class NewInlineCalloutModal extends Modal {
 							this.buildPreview();
 							this.display(false, false);
 							setTimeout(() => {
-								let dropdown: HTMLSelectElement | null = window.document.querySelector(".inline-callouts-color-dropdown .dropdown");
+								let dropdown: HTMLSelectElement | null = this.document.querySelector(".new-inline-callout-modal")!.querySelector(".inline-callouts-color-dropdown .dropdown");
 								dropdown!.focus();
-							}, 25);
+							}, 10);
 						}
 					})
 			})
@@ -120,11 +120,11 @@ export class NewInlineCalloutModal extends Modal {
 				cb.setValue(this.calloutColor ?? '#000000')
 					.onChange((value) => {
 						this.calloutColor = hexToRgb(value);
-						let dropdown: HTMLSelectElement | null = window.document.querySelector(".inline-callouts-color-dropdown .dropdown");
+						let dropdown: HTMLSelectElement | null = this.document.querySelector(".new-inline-callout-modal")!.querySelector(".inline-callouts-color-dropdown .dropdown");
 						dropdown!.value = '';
 						this.buildPreview();
 						setTimeout(() => {
-							let picker: HTMLSelectElement | null = window.document.querySelector('input[type="color"]');
+							let picker: HTMLSelectElement | null = this.document.querySelector(".new-inline-callout-modal")!.querySelector('input[type="color"]');
 							picker!.focus();
 						}, 10);
 					});
@@ -134,6 +134,7 @@ export class NewInlineCalloutModal extends Modal {
 					.setTooltip('Reset to no color')
 					.onClick(() => {
 						this.calloutColor = '';
+						this.calloutIcon = this.calloutIcon;
 						this.display(false, true);
 					})
 			});