I'm playing around creating a plugin for Joplin.
One task is to replace a selected text by a modification of that text.
i.e. having this markdown code
replaced by the same code encapsulated in an html snippet.
This is achieved by invoking the Joplin API commands selectedText (to get the text) and replaceSelection.
See source code
const sel = await joplin.commands.execute('selectedText');
const needle = /^\s*!?\[([^\]]+)\]\([^\)]+\).*$/m;
const repl = sel.replace(needle, "<details close>\n<summary>Show $1 </summary>\n\n " + sel + " \n</details>\n")
await joplin.commands.execute('replaceSelection', repl);
What I do not understand is, why there is no syntax highlighting for the markdown link in the resulting text (see image above).
It's a mismatch between the renderer Joplin uses for the markdown editor and the markdown viewer. The editor assumes that anything between html tags is html (not markdown) and the viewer allows switching back to markdown if enough space is left between html tags.
The editor uses a very naiive parser which can't really support nested markdown -> html -> markdown. That said, it is possible to use regexes (or your own parser) to add support for specific forms like the one you want above. This can be don't using a contentScript plugin. Let me know if you're interested in doing that but need help setting it up.
Thanks for that explanation!
I would have a try on the contentScript approach. But I still have some difficulties in unterstanding how the pieces of the puzzle belongs together.
For example I havn't grasped how markdown-it, codemirror AND tinyMCE are working together and are integrating in the Joplin architecture -> which component parses what.
Hence right now I have no clue where I have to fix/replace the parser. 
Maybe you can push me in the right direction - that's what I need I guess 
TinyMCE is the editor backend used for the WYSIWYG editor. CodeMirror is the editor backend for the markdown editor (which is shown in your screenshot). These 2 components never interact with one another.
There is a third related component, which is the markdown viewer. It uses markdown-it on the backend. The viewer is used to provide the realtime markdown view when using the markdown editor.
As far as content scripts go, i think only markdown-it and CodeMirror are supported. Fortunately, you'll only need CodeMirror for what you're looking at.
Basically you'll need to create a CodeMirror content script that either overrides the CodeMirror renderer, or uses an overlay to add specific cases (an overly is probably the better option for you).