obsidian-ReadItLater icon indicating copy to clipboard operation
obsidian-ReadItLater copied to clipboard

feat!!: Adds ability to embed images as base64 encoded strings

Open breakid opened this issue 2 years ago • 1 comments

Description

  • Adds ability to embed images into a note as a base64 encoded string, similar to SingleFile
  • Adds embed option to settings
  • Refactors image download settings to use a dropdown instead of multiple toggles

Motivation and Context

Bottom Line: It makes a note completely self-contained and is useful for archiving references. A dropdown was the most clear way to add the option to the settings.

I really like how easy ReadItLater makes importing articles from the internet, both to archive references in case they disappears or simply to allow searching the contents as part of my knowledge base. My main frustration was that images were stored separately since Markdown is a plaintext format, and I thought this might get difficult to manage / clean out. (I also didn't notice / fully understand the functionality of the "Download to note folder" option until I was mostly done implementing my feature.)

While researching options for archiving articles, I came across SingleFile and liked that it packaged everything into a single, self-contained file that could be easily moved around or deleted, taking all of its associated resources with it. I figured the same technique could be implemented as an Obsidian plugin and decided to give it a shot.

I found the multiple toggles to be confusing and didn't want to complicate things more by adding a toggle for embedding. Since the download options were mutually exclusive, I converted the two toggles per feature (i.e., stack exchange, mastodon, readable article) to a dropdown list, since the download options were mutually exclusive.

How has this been tested?

  1. Built the plugin using the mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye Dev Container in Visual Studio Code (npm 9.8.1)
  2. Copied the main.js and manifest.json files to the .obsidian\plugins\obsidian-read-it-later directory of a test vault (Obsidian 1.4.14 and Obsidian 1.4.16; Desktop app on a Windows 11 computer) and reloaded Obsidian to pick up the changes
  3. Manually tested all four options (i.e., save to asset directory, save to note directory, embed as base64, don't save images) for each of the three affected features (i.e., stack exchange, mastodon, readable article)
  4. Verified the images were handled properly in all cases and rendered successfully when in reading mode

Screenshots (if appropriate)

Types of changes

Changes visible to users:

  • [ ] Bug fix (prefix: fix - non-breaking change which fixes an issue)
  • [x] New feature (prefix: feat - non-breaking change which adds functionality)
  • [x] Breaking change (prefix: feat!! or fix!! - fix or feature that would cause existing functionality to not work as expected)
    • Note: Due to the way settings have changed, the default "save to assets directory" option will be applied, and users will have to select their preferred setting from the dropdown. It might be safer to change the default to save to a per-note directory
  • [ ] Documentation (prefix: docs - improvements to any documentation content)

Internal changes:

  • [ ] Refactor (prefix: refactor - non-breaking change which only improves the design or structure of existing code, and making no changes to its external behaviour)
  • [ ] Tests (prefix: test - additions and improvements to unit tests and the smoke tests)
  • [ ] Infrastructure (prefix: chore - examples include GitHub Actions, issue templates)

Checklist

  • [x] My code follows the code style of this project and passes npm run lint.
  • [ ] My change requires an update of README.md
  • [x] I have updated the README.md

breakid avatar Oct 14 '23 04:10 breakid

By the way, thank you for an awesome plugin!

breakid avatar Oct 14 '23 04:10 breakid