Enhancement: Allow to store images from your clipboard in the assets folder

[estruyf]

Allow to store images from your clipboard to your assets/public folder.

Thoughts/questions

• When pasting, should we ask in which folder to add the image?
• Should there be a default image location where these clipboard images are saved?

[IntranetFactory]

We would love to see pasted images being stored in a default image location.

Do you have any plans to implement that in the near future ? Would you accept a PR?

[estruyf]

It was not "planned" yet, but you can send in a PR if you want.

[IntranetFactory]

We will try if we can

a. add a new setting imagesFolder b. when the setting is present pasted images are saved in that folder c. use a GUID as image name

would that make sense?

[estruyf]

Makes sense to me. We can always change or enhance it when we can test it out.

[olliejm]

Would someone be able to help point me in the direction of where the logic that reacts to an image paste and does the rename+save exists? I've never looked at a VS extension source before and I'm going dizzy trying to locate it, github searches for 'image', 'clipboard' and 'paste' didn't get me to an obvious answer, and I've tried debugging with breakpoints in all the services that came up for the 'image' search. Even wrapping the exported copyFile and writeFile promises and adding breakpoints did not get hit. Breakpoints generally are getting hit though so I don't think it's a problem with debugger setup

[estruyf]

There is no way to access the clipboard listeners like onPaste or onCopy. The only way would be to override the OOTB paste command.

Steps to do this:

• Create a new command: frontMatter.onPaste
• In the command, check if there is an image, and do what you need to do; if it is not an image, you can call the default editor.action.clipboardPasteAction command from VSCode
• Add a keybindings for the new command, which overrides the default one (editor.action.clipboardPasteAction)

I found an extension that already does this - https://github.com/aefernandes/vscode-clipboard-history-extension.

• Implementing the command: https://github.com/aefernandes/vscode-clipboard-history-extension/blob/master/src/clipboard.ts#L84-L86
• Overriding of the keybindings: https://github.com/aefernandes/vscode-clipboard-history-extension/blob/master/package.json#L84-L89

[IntranetFactory]

We found that the following .vscode settings already cover most of our needs (have pasted images in one folder, reduce naming conflicts, make it easy to move documents without breaking images):

{
    "markdown.copyFiles.destination": {
        "**/*": "${documentWorkspaceFolder}/images/${documentBaseName}/"
    },
    "markdown.occurrencesHighlight.enabled": true,
    "markdown.updateLinksOnFileMove.enabled": "prompt"
}

[estruyf]

Thanks @IntranetFactory for your insights on this! If it is already in VSCode, we could indeed use it. The only downside is when you would like to use media snippets from FM.