Skip to content

Link‐Preview

Jump to bottom
ic005k edited this page Jul 30, 2026 · 1 revision

Link Preview Panel

The preview panel appears when your cursor hovers or clicks internal note links and image links within the note editor. It shows previews of linked notes or images, with distinct visual states for valid and broken resources.

Working Mechanism

The preview parser reads content at the current text cursor position, detects links on the same line, and renders corresponding preview content.

Preview States

1. Valid Image Link (IMG:)

  • Behavior: Load the target image file and scale it proportionally to a maximum size of 100×100 pixels.
  • Display: Render the scaled image.
  • Edge case: Parser identifies a valid image link path, but the image cannot be loaded.
    • Shows gray placeholder icon: 🖼️

2. Broken Image Link (IMG_ERR:)

Triggered when the image link exists, but the target file is missing, moved, or corrupted.

  • Display: Reddish placeholder icon 🖼️ (#c66) to indicate invalid image resource.

3. Valid Internal Note Link (TXT:)

  • Behavior: Extract and display the summary text of the target linked note.
  • Display: Multi-line wrapped text, left-top aligned, gray small font (#666) with internal padding.

4. Broken Internal Note Link (NOTE_ERR:)

Triggered when the note link exists, but the target note file cannot be found.

  • Display: Reddish placeholder icon 📄 (#c66), consistent color scheme with broken image links.

5. No Link Detected

No valid note or image link exists on the current line at the cursor position.

  • Display: Empty preview area. The panel remains visible to preserve stable layout without layout jumping.

Shared Rules

  • The preview panel fully resets all styles and content before rendering each new state, eliminating leftover styles from previous previews.
  • All placeholder icons use consistent sizing for visual uniformity.
  • Error states share the same reddish color tone to unify "missing resource" visual feedback.

Clone this wiki locally