search

pajoma / vscode-journal

Lightweight journal and simple notes support for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=pajoma.vscode-journal
GNU General Public License v3.0
233 stars 40 forks source link

Insert and display images #56

Open JekRock opened 4 years ago

JekRock commented 4 years ago

It would be nice to have the ability to insert images into notes with CTRL+V. They should probably be stored in the same note as Base64 at the bottom of the note just not no lose it. Also, it would be nice to display them in place (I don't know whether it's possible in the VSCode).

pajoma commented 4 years ago

Interesting idea, we could copy (any) file and paste it into the editor. It is copied into the directory structure (day subfolder, same as for the notes) and we place a link to the file at the location we copied it into.

If the file is an image, we could use the appropriate markdown (which should then be renderered in the markdown preview)

JekRock commented 4 years ago

In that case, the extension will require a specific folder structure that might make it more difficult to migrate from other extensions. Also, it's easy to break everything when you have a strict folder structure. What I don't like about putting files to a "files folder" is that you separate a journal file and its content.

pajoma commented 4 years ago

If you paste a file via Ctrl+V into the editor, we only have to options:

a) keep the file where it is and insert the appropriate markdown to display the file content in the preview (either as link or as image). That means the linked file has to stay where it is (highly unlikely) b) copy the file in the same directory where the note (markdown file) resides

Showing it inline is not a feature of the vscode editor. The only options to customize are highlighting and font colors. We have to use the markdown preview for this.

Regarding your point of embedding a binary. This (surprisingly) works, you can test with this (from here):

![Hello World](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAUCAAAAAAVAxSkAAABrUlEQVQ4y+3TPUvDQBgH8OdDOGa+oUMgk2MpdHIIgpSUiqC0OKirgxYX8QVFRQRpBRF8KShqLbgIYkUEteCgFVuqUEVxEIkvJFhae3m8S2KbSkcFBw9yHP88+eXucgH8kQZ/jSm4VDaIy9RKCpKac9NKgU4uEJNwhHhK3qvPBVO8rxRWmFXPF+NSM1KVMbwriAMwhDgVcrxeMZm85GR0PhvGJAAmyozJsbsxgNEir4iEjIK0SYqGd8sOR3rJAGN2BCEkOxhxMhpd8Mk0CXtZacxi1hr20mI/rzgnxayoidevcGuHXTC/q6QuYSMt1jC+gBIiMg12v2vb5NlklChiWnhmFZpwvxDGzuUzV8kOg+N8UUvNBp64vy9q3UN7gDXhwWLY2nMC3zRDibfsY7wjEkY79CdMZhrxSqqzxf4ZRPXwzWJirMicDa5KwiPeARygHXKNMQHEy3rMopDR20XNZGbJzUtrwDC/KshlLDWyqdmhxZzCsdYmf2fWZPoxCEDyfIvdtNQH0PRkH6Q51g8rFO3Qzxh2LbItcDCOpmuOsV7ntNaERe3v/lP/zO8yn4N+yNPrekmPAAAAAElFTkSuQmCC)

Open it in the preview to see the according image.

JekRock commented 4 years ago

Using base64 as a source in a markdown link looks fine. Good finding. Thanks! If I'm not mistaken, there is a way to modify internal VSCode files (like styles). Basically, it's just a browser and an image can be displayed anywhere. I know that it's not a good idea to modify internal files and only public API should be used. I'm just curious whether it's possible to implement in VSCode. I don't have experience in building VSCode extensions so I may be wrong here.