Skip to content

Add support for images#429

Merged
heyman merged 50 commits intomainfrom
feature/images
Jan 21, 2026
Merged

Add support for images#429
heyman merged 50 commits intomainfrom
feature/images

Conversation

@heyman
Copy link
Copy Markdown
Owner

@heyman heyman commented Jan 15, 2026

This is a work in progress PR that adds support for images.

Fixes #157

Todo:

  • Implement image widget
  • Ability to resize images (and tag parameters in the buffer data)
  • Exclude image tag syntax when searching/highlight searching
  • Images in visible part of folded blocks (first line) should be rendered small
  • Test that image syntax is excluded from search
  • Copying mixed text and image content should populate the clipboard with both text/plain data, as well as text/html
  • Pasting image data from the clipboard should store the image in heynote-library-path/.images/ and insert an image widget tag referring to the stored image
  • Garbage collection of images in .images/ that has no references (and are older than X days)
  • Test image tag parsing
  • Test image widget rendering
  • It should be possible to copy the image data (both by issuing copy/cut command when the image is "selected", and by pressing a button on the widget)
  • Styling for light theme
  • Support drag & dropping image file into heynote
  • Make sure that ripgrep works when the app is built in an .asar file
  • Test on Windows
  • Test on Linux

Use view.lineBlockAt() instead of view.coordsAtPos(). The previous method ddin't work when there was an inline-block widget (e.g. an image) on the first line of a block. The positioning should be identical, but using lineBlockAt() works with inline-blocks on the first line.
…ead of 2px

This makes images with 100% width centered.
- Add support for <∞img;...∞> tags that are displayed as image widgets.
- Image widgets can be resized
- Image tags are excluded when searching
- Folding a block with an image on the first row makes sure not to place the fold cutoff point in the middle of the tag
- Visible images (on the first row) of folded blocks gets rendered as miniatures
@heyman heyman mentioned this pull request Jan 15, 2026
heyman added 26 commits January 15, 2026 17:35
…atio) when resizing images.

* Tweak colors of selected images
* Fix issue where resize handle would flicker on mouseup
…pboard data on copy/paste/cut

* WIP: Add support for storing images in heynote's file library
* When pasting image data, store it in the file library and add an image tag referencing it through heynote-file://image/
* When copying content, serialize it into three formats: text/plain, text/html and "web text/heynote"
  - For "text/html", <∞img∞> tags are replaced with <img> tags with the image data is a data URL in the src attribute
  - For "web text/heynote" the data is copied as is
* When pasting content of the type "web text/heynote", new UUID IDs are generated for each <∞img∞> tag
Remove image files, that are no longer referenced (and are >24h old), on startup. We use ripgrep to find all <∞img∞> tags in the file library.
…s found in .images/. This should make the code more resilient to potential data loss bugs in the future.
Fix issue with references pointing to the wrong image after recycling of an image widget's DOM elements.
Make highlight border for image widgets green when it has snapped to the ideal dimensions.
Try to get e2e tests to work on CI
- Add tests for parsing of image tags
- Add tests for ImageWidget
@heyman heyman marked this pull request as ready for review January 20, 2026 21:46
@heyman heyman merged commit 2419ece into main Jan 21, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Images/Screenshots

1 participant