Local images from file system should resolve to Iris/Images as the default path to look in

[alexwkleung]

If a user wants to insert a local image from the file system, the default path should resolve to Iris/Images.

The folder helps keep all images in one place and makes it easy to backup the Iris directory. This should avoid path issues for local images at least.

Drag and drop images is another feature that would be good to have. However, that will be in a future release at the earliest.

[alexwkleung]

I quickly tested this Electron protocol, and it seems to work fine. This is apparently a safe way of doing it, since many older methods forcefully disable flags and whatnot in the Electron main process, causing unwanted security issues.

Reference: https://www.electronjs.org/docs/latest/api/protocol

1. In index.ts

import { protocol, net } from 'electron'

//initialize app

//custom protocol to handle local file system absolute paths
app.whenReady().then(() => {
  protocol.handle('image', (request) =>
    net.fetch('file://' + request.url.slice('image://'.length)))
})

2. Add image: data: 'self' to CSP in index.html

3. In markdown-parser.ts, set ALLOW_UNKNOWN_PROTOCOLS to true in DOMPurify options. Not sure how safe this is, but for now it's fine.

4. Launch Iris in dev

5. Change to Advanced Mode

6. Use image syntax with the custom protocol to search the image locally

![test](image::///Users/alex/Iris/Images/test.png)

7. Change to Reading Mode, and you should see the image loaded from the local filesystem.

For now, it doesn't have to reside within the main notes folder, but in future releases, there will be an Images folder within the Iris directory. It would be logical to force the resolve path so users won't have issues with loading their images in case they accidentally delete them.

[alexwkleung]

I quickly tested this Electron protocol, and it seems to work fine. This is apparently a safe way of doing it, since many older methods forcefully disable flags and whatnot in the Electron main process, causing unwanted security issues.

Reference: https://www.electronjs.org/docs/latest/api/protocol

1. In index.ts

import { protocol, net } from 'electron'

//initialize app

//custom protocol to handle local file system absolute paths
app.whenReady().then(() => {
  protocol.handle('image', (request) =>
    net.fetch('file://' + request.url.slice('image://'.length)))
})

2. Add image: data: 'self' to CSP in index.html
3. In markdown-parser.ts, set ALLOW_UNKNOWN_PROTOCOLS to true in DOMPurify options. Not sure how safe this is, but for now it's fine.
4. Launch Iris in dev
5. Change to Advanced Mode
6. Use image syntax with the custom protocol to search the image locally

![test](image::///Users/alex/Iris/Images/test.png)

7. Change to Reading Mode, and you should see the image loaded from the local filesystem.

For now, it doesn't have to reside within the main notes folder, but in future releases, there will be an Images folder within the Iris directory. It would be logical to force the resolve path so users won't have issues with loading their images in case they accidentally delete them.

The protocol above allows advanced mode users to use the local filesystem as a path for greater flexibility. This will be part of the next update for Iris.

Note for Basic Mode users:

You can copy an image and paste it directly into the editor. It will transform the pasted image data into base64, creating a hard link. I don't remember what package or lines of code that enables this, so I'll take a look at it when I have time.

[alexwkleung]

Since this feature doesn't affect the critical parts the core (only changes to Electron main process and Markdown parser), I might create a commit for this in the main branch within the next week or so. If that's the case, the update will be v0.2.0-dev-4.3.

This is a very simple addition to the code and can be easily removed or modified if necessary.

[alexwkleung]

 protocol.handle('image', (request): Promise<Response> => {
    return net.fetch('file://' + request.url.slice('image://'.length)).catch((e) => console.error(e)) as Promise<Response>
 })

Not 100% necessary but just added types and have it able to throw exceptions if needed.

[alexwkleung]

Changes are live in v0.2.0-dev-4.3 branch.

I won't merge into main branch yet since I want to tweak/add a few things.

[alexwkleung]

Changes are live in v0.2.0-dev-4.3 branch.

I won't merge into main branch yet since I want to tweak/add a few things.

I will submit a PR instead of directly merging into main once v0.2.0-dev-4.3 is ready. The PR makes it easier for tracking and future reference.

[alexwkleung]

Reference from #90:

In ed77dc9, I added a default path to the local protocol so that it includes the home directory + /Iris/Images.

The syntax to link images from Iris/Images will be in the form ![alt_name](local://image_name). Make sure to add the file extension as well.

Will be closed once v0.3.0-dev.1 releases. This is complete as of now.