2017-03-12 by Vladimir Schneider

Create Links by Pasting and Dropping Files and Images

Latest Markdown Navigator EAP release adds features which make it even easier to create links and manipulate images in markdown documents with the following operations:

  • Dragging and dropping files into a document to create links
  • Pasting files from the clipboard into a document to create links
  • Paste an image from the clipboard into a markdown document to create a link and to save the image in a file.
  • You can modify an image file which is a target of a link by using the Copy/Modify Image intention action. This works for local or remote image files.

Drop copying image files, pasting images from the clipboard or using the Copy/Modify Image intention action will open a dialog allowing you to specify the directory and name where to save the file and perform some basic transformations to clean up the image. This makes copying the screen image for use in your markdown document painless.

 

Drag copy file action requires the JetBrains API to provide operation type: copy or move to the EditDropHandler. This will only be available in IDEs starting with IDE Version 2017.2. For earlier IDEs there is an option to override the Editor Drag and Drop Handler in preferences/settings (Mac OS X/Windows & Linux). However, doing so makes drag copy available at the expense of text drag and drop in the editor. The plugin determines whether the API supports drop operation type and will disable this option if overriding the Editor Drag and Drop Handler is not necessary.

One Feature Lead to Another

Development of these features started by installing Paste Images into Markdown plugin by holgerbrandl which added direct pasting of images into markdown document.

Being an addition to Markdown Support it does not take the caret context into consideration. After short use I felt that there were too many operation required when I wanted to modify an existing image or a link. This gave me the motivation to implement this functionality in Markdown Navigator.

Holger Brandl, the author of Paste Images into Markdown plugin, was gracious to include a permissive license for the image utilities library in his plugin to permit it being re-used in Markdown Navigator.

Once the basic functionality was implemented, it led to more “must have” features that resulted in more image transformation options and document modification options. Having image paste made it natural to allow drag and drop of image files, which led to the necessity of dropping non-image files to create links. To round out the functionality it became obvious that an intention to modify an image was needed, which led to making it available for remote images.

These features raise the productivity of Markdown Navigator for documentation to another level.

Paste Images or Drag Copy an Image File

Pasting when the clipboard contains an image or dragging and dropping an image file into a markdown document will open the image copy/paste dialog:

You can use the image transformations to:

  • scale the image
  • crop margins to clean up extra pixels captured from the screen
  • round corners
  • add a border
  • convert a color to transparent by:
    • selecting the Transparent Color check box
    • specifying the color manually by clicking on the color tile after Transparent Color check box label
    • clicking on the image to get the pixel color (zoomed version of image displayed in the zoom tile beside the color tile)
    • set the tolerance value to 0 for exact color match or increase it to select wider range of colors.
  • copy the modified image to the clipboard to be used by subsequent paste by clicking on hte Copy Modified Image to Clipboard button.

Select the link address format:

You can also select how to modify the markdown document depending on the caret context of the operation:

  • Link address targeting an image: caret is on the link address part of any element and it is targeting an image file
  • Explicit link text: caret is on the link text part of an explicit link
  • Explicit link element: caret is on any part of an explicit link element
  • Image link element: caret is on any part of an image link
  • Reference link element: caret is on any part of a reference element

The above context operations are evaluated in order so that if an context does not apply then the next one will be used. So pasting on an address of an explicit link but the target is not an image file will use the Explicit link element operation. Similarly, if the element is a reference then Reference link element operation will be used.

The options for each of the above operations are:

  • Insert Link: to insert a link at the caret position
  • Replace Element: will replace the element at caret with the same element but change its link text and link address with one given in the dialog.
  • Replace Link Address: will replace the link address with the location of the image file
  • Replace File Content: if the link target is an image file then its contents will be replaced with the new image. A quick way to replace an existing image with a new screen capture.

Drag and Drop or Paste Files

When you drop files into a markdown document links will be created and or modified depending on the selected options. These are similar to the image options but apply to non-image files or image files when these are drag moved instead of drag copied.

Select the link address format:

You can also select how to modify the markdown document depending on the caret context of the operation for the first file of the drop or paste action, subsequent files of the same action will be inserted in the document:

  • Link address targeting an image: caret is on the link address part of any element and it is targeting an image file
  • Link address: caret is on the link address part of any element and it is not targeting an image file
  • Explicit link text: caret is on the link text part of an explicit link
  • Explicit link element: caret is on any part of an explicit link element
  • Image link element: caret is on any part of an image link
  • Reference link element: caret is on any part of a reference element

The above context operations are evaluated in order so that if an context does not apply then the next one will be used. So pasting on an address of an explicit link but the target is not an image file will use the Explicit link element operation. Similarly, if the element is a reference then Reference link element operation will be used.

The options for each of the above operations are:

  • Insert Link: to insert a link at the caret position
  • Replace Element: will replace the element at caret with the same element but change its link text and link address with one given in the dialog.
  • Replace Link Address: will replace the link address with the location of the image file
  • Replace File Content: if the link target is an image file then its contents will be replaced with the new image. A quick way to replace an existing image with a new screen capture.

Copy/Modify Images Targeted by Links

Copy/Modify Image intention is available on any link element that is targeting an image file, based on the extension. The action will open the file whether it is local or remote and allow you to save it locally with optional image transformations. The dialog and operations are identical to Paste Images or Drag Copy an Image File

You can use this to quickly apply a transformation to an existing file or to create a copy of an image with transformations. Similarly, you can copy the modified image to the clipboard and press cancel to not make any modifications to the document or file.

 



Constructive comments and suggestions are welcome. I can also be reached me at vladimir@vladsch.com