fix: support percentage sizes in wiki link images (#111)

[bingryan]

Summary by CodeRabbit

• New Features

  • Image attachments now support percentage-based dimensions in addition to pixel values. Width and height can be specified with optional % suffixes.

• Bug Fixes

  • Improved dimension formatting to ensure consistent unit handling across different image sizing methods, automatically applying pixel units where appropriate.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Updated the image attachment URL regex pattern to accept optional percentage-based width and height values, and added formatting logic to append "px" units to non-percentage size values when generating inline HTML styles.

Changes

Cohort / File(s)	Summary
Regex Pattern Enhancement src/config.ts	Modified ATTACHMENT_URL_REGEXP to allow optional % suffix in width and height captures (e.g., 50% or 100), changing \d+ to \d+%? in both named groups
Size Unit Formatting src/utils.ts	Added formatSize() helper function within tryCopyMarkdownByRead to append "px" to non-percentage values while preserving percentage units in generated HTML style attributes

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A rabbit hops through pixels and percentages,
Width and height now flex with more messages,
Some wear their % badge with pride,
Others get "px" as a guide,
Sizing up images, oh what a sight! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title clearly and specifically describes the main change: adding support for percentage-based sizing in wiki link images.

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/config.ts (1)

1-2: LGTM! Regex correctly supports percentage sizes.

The updated pattern now accepts both pixel values (e.g., 100) and percentage values (e.g., 50%) for width and height. The regex will correctly match all standard Obsidian image size formats:

• ![[image.png|100]] → width only
• ![[image.png|50%]] → percentage width
• ![[image.png|100x200]] → width × height
• ![[image.png|100%x50%]] → percentage dimensions

💡 Consider adding a comment documenting supported formats

The regex pattern is complex. A brief comment would help future maintainers understand what formats are supported, especially now that percentages are included:

+// Matches wiki-style image embeds with optional size specifications
+// Formats: ![[image.png]], ![[image.png|100]], ![[image.png|50%]], ![[image.png|100x200]], ![[image.png|100%x50%]]
 export const ATTACHMENT_URL_REGEXP =
     /!\[\[((.*?)\.(\w+))(?:\s*\|\s*(?<width>\d+%?)\s*(?:[*|x]\s*(?<height>\d+%?))?)?\]\]/g;

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 85481db and 941a95b.

📒 Files selected for processing (2)

• src/config.ts
• src/utils.ts

🔇 Additional comments (2)

src/utils.ts (2)

774-778: LGTM! Clean helper function.

The formatSize helper correctly handles both percentage and pixel values. The logic is straightforward: it preserves percentage values unchanged and appends "px" to non-percentage values. Since the regex pattern (\d+%?) ensures only valid numeric values reach this function, edge cases are well-controlled.

---

779-786: LGTM! Style generation correctly applies formatSize.

The conditional logic properly handles all combinations of width and height, applying formatSize consistently to generate valid CSS. The generated inline styles will correctly render both pixel values (e.g., width: 100px;) and percentage values (e.g., width: 50%;).

[bingryan]

Fixes #111