Adding images inline

1

Hello everyone,

maybe someone could help me with the following problem:
Currently I use the gfm mode to get the wonderful markdown highlighting.

Now I want to add some kind of markdown image-url recognition and display the image below the urls.

These two programs do what I hope to archive:

  1. https://blog.inkdrop.info/new-feature-inline-image-widgets-v3-7-0-ee919436623f (it also uses codemirror / markdown)
  2. https://github.com/brrd/Abricotine

I’ve tried to use widgets, but I’m honest… I did not understand a lot how to use them probably :frowning:

My goal:

  1. insert image markdown code (see below)
  2. codemirror inserts a widget (?) below the image line
  3. When edit or delete the url, the image also updates (or will be removed)

Is this a wish that I can realize or is it almost impossible?

Greetings
Kel

PS:

    Inline-style: 
    ![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")

    Reference-style: 
    ![alt text][logo]

    [logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2"
2

You probably want line widgets for this. When loading a document, scan it for image links and add the images. Then, on "changes" events, re-scan the area around the change and update the images, if any.

3

Hi marijn,
thank you very much for your response. That works very well.

One question:
How do I remove all Widgets of a given line?

Greetings
Kel