diff --git a/README.md b/README.md index 2c959ef..c44eeaf 100644 --- a/README.md +++ b/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 | -| `LABEL`(optional) | callout label/title text | +| `ICON` | Name of the Lucide icon | +| `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 diff --git a/demo/example.md b/demo/example.md index da77b58..6c46aeb 100644 --- a/demo/example.md +++ b/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)]` - -- [ ] Lorem ipsum dolor sit amet `[!!message-circle-question||var(--color-pink-rgb)]` -- [ ] [`[!!github|Github repo|var(--color-blue-rgb)]`](https://github.com/gapmiss/inline-callouts/) +- [ ] `[!!check-square||var(--color-green-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. - [ ] `[!!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)]` | - -- `[!!hand|Lorem ipsum|var(--color-pink-rgb)]` dolor sit amet, consectetur adipiscing elit -- Lorem ipsum dolor sit amet, consectetur adipiscing elit `[!!check-check||var(--color-green-rgb)]` +- `[!!megaphone|Lorem ipsum|var(--color-pink-rgb)]` dolor sit amet, consectetur adipiscing elit +- Sunt labore duis dolor. `[!!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)]` - diff --git a/screenshots/Inline-Callouts-demo-Obsidian-v1.8.9-2025-04-04-18.26.34.png b/screenshots/Inline-Callouts-demo-Obsidian-v1.8.9-2025-04-04-18.26.34.png deleted file mode 100644 index f657976..0000000 Binary files a/screenshots/Inline-Callouts-demo-Obsidian-v1.8.9-2025-04-04-18.26.34.png and /dev/null differ diff --git a/screenshots/Inline-Callouts-demo-Obsidian-v1.8.9-2025-04-04-18.26.42.png b/screenshots/Inline-Callouts-demo-Obsidian-v1.8.9-2025-04-04-18.26.42.png deleted file mode 100644 index 260e925..0000000 Binary files a/screenshots/Inline-Callouts-demo-Obsidian-v1.8.9-2025-04-04-18.26.42.png and /dev/null differ diff --git a/screenshots/Inline-Callouts-demo-Obsidian-v1.8.9-2025-04-06-15.57.34.png b/screenshots/Inline-Callouts-demo-Obsidian-v1.8.9-2025-04-06-15.57.34.png new file mode 100644 index 0000000..0c2466b Binary files /dev/null and b/screenshots/Inline-Callouts-demo-Obsidian-v1.8.9-2025-04-06-15.57.34.png differ diff --git a/screenshots/Inline-Callouts-demo-Obsidian-v1.8.9-2025-04-06-15.57.39.png b/screenshots/Inline-Callouts-demo-Obsidian-v1.8.9-2025-04-06-15.57.39.png new file mode 100644 index 0000000..056298a Binary files /dev/null and b/screenshots/Inline-Callouts-demo-Obsidian-v1.8.9-2025-04-06-15.57.39.png differ diff --git a/src/modal/modify.ts b/src/modal/modify.ts index 0a59cb3..be9fb7a 100644 --- a/src/modal/modify.ts +++ b/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) { - // this.calloutIcon = IconSuggest.icon - } - else { - this.calloutIcon = parts[0] ? parts[0].trim().replace(/\\+$/, '').toLowerCase() : 'info'; + if (!clearColor) { + if (!preserveIcon) { + 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); }) }); diff --git a/src/modal/new.ts b/src/modal/new.ts index ed11da4..f606a54 100644 --- a/src/modal/new.ts +++ b/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); }) });