mushanshitiancai / vscode-paste-image

paste image from clipboard to markdown/asciidoc directly!
MIT License
423 stars 128 forks source link

Feature Request - Allow HTML-only formatting #22

Closed stvhwrd closed 6 years ago

stvhwrd commented 6 years ago

Expected Behavior

I had been using your extension for a short while and for some reason I guess it malfunctioned, temporarily creating the perfect extension for my use. For a while (until I reloaded it) it was not inserting the markdown container around my images, which for me was great!

I have my config set up such that a pasted image is prefixed and suffixed with the HTML necessary to display the image centered at 90% width:

eg.

<div align="center"><img src="img/2018-04-15-15-48-09.png" width="90%"><p style="font-size: 80%;"><i>title of image</i></p></div>

When the plugin was not working as designed, pasting images into my Markdown worked perfectly (because it wasn't adding the ![]( and )).

Current Behavior

Images pasted into Markdown get the user's custom prefix and suffix attached, like this:

imageFilePath = `${prefix}${imageFilePath}${suffix}`;

and then are wrapped in a Markdown image container:

        switch (languageId) {
            case "markdown":
                return `![](${imageFilePath})`

Resulting in:

![](<div align="center"><img src="img/2018-04-15-15-48-09.png" width="90%"><p style="font-size: 80%;"><i>title of image</i></p></div>)

Possible Solution

At this point in your code, you add the symbols to have Markdown recognize it as an image. Perhaps we could make this a conditional operation, that checks pasteImage.mdContainer for true (current/default) or false.

Context (Environment)

I use HTML formatting on my Markdown images, so I don't want the Markdown ![](image container) inserted automatically.

Here's my configuration:

Paste Image

0.9.5 

settings.json

{
    "pasteImage.path": "${currentFileDir}/img",
    "pasteImage.prefix": "<div align=\"center\"><img src=\"",
    "pasteImage.suffix": "\" width=\"90%\"><p><i>title goes here</i></p></div>",
}

VSCode:

1.22.2
3aeede733d9a3098f7b4bdc1f66b63b0f48c1ef9
x64

Screenfetch:

                 -/+:.          stvhwrd@macduck
                :++++.          OS: 64bit Mac OS X 10.12.6 16G1314
               /+++/.           Kernel: x86_64 Darwin 16.7.0
       .:-::- .+/:-``.::-       Uptime: 4d 10h 43m
    .:/++++++/::::/++++++/:`    Packages: 229
  .:///////////////////////:`   Shell: zsh 5.5
  ////////////////////////`     Resolution: 2880x1800
 -+++++++++++++++++++++++`      DE: Aqua
 /++++++++++++++++++++++/       WM: Quartz Compositor
 /sssssssssssssssssssssss.      WM Theme: Blue
 :ssssssssssssssssssssssss-     CPU: Intel Core i7-4770HQ @ 2.20GHz
  osssssssssssssssssssssssso/`  GPU: Intel Iris Pro
  `syyyyyyyyyyyyyyyyyyyyyyyy+`  RAM: 10532MiB / 16384MiB
   `ossssssssssssssssssssss/
     :ooooooooooooooooooo+.
      `:+oo+/:-..-:/+o+/-
neighthan commented 6 years ago

I was about to open an issue for this myself; being able to turn off the Markdown image syntax would be great for anybody using a more involved pasting method (i.e. not just insert the image but put some boilerplate around it; I always want a <center> block), and seems necessary for the prefix and suffix options to be used to their full extent (well, without the trouble of removing []( every time).

mushanshitiancai commented 6 years ago

@stvhwrd This issue is greate.

@stvhwrd @neighthan Now you can update vscode-paste-image to v1.0.1.

New configuration pasteImage.insertPattern can use in this scene:

{
    "pasteImage.path": "${currentFileDir}/img",
    "pasteImage.insertPattern": "<div align=\"center\"><img src=\"${imageFileName}\" width=\"90%\"><p><i>${imageFileNameWithoutExt}</i></p></div>"
}