Add button to transform markdown image into html `img` tag

Description

The markdown syntax for images is fast/simple, but more limited than img tags. For example, it can be useful to use img tag for the sake of specifying the width or height attributes of a large image, to shrink it down to better fit in an issue or PR description.

Add a new button to the toolbar (perhaps only visible when a markdown image snippet is selected) which transforms:

![altText](imgSrc)

into:

<img alt="altText" src="imgSrc">

I’m not a web dev, but I hacked together a proof of concept implementation. It’s quite crude though:

1. It doesn’t add a toolbar button, it just runs from the browser console directly.
2. It doesn’t use any of the existing “style” functions of the github toolbar.
3. It doesn’t do much error handling. E.g. it assumes your selection is a well-formed markdown image.

// GitHub does some interesting things with a "text-expander" tag, which shows up as the
// only selection (of a "Caret" type, event if you're selecting a "Range"" withinthe child text area)))
//
// This function gets the text-expander, fishes out its text area, and gets details about its text selection.
function getSelectedText() {
  const selection = window.getSelection()
  
  console.log(selection)
  if (selection.type !== "Caret") return null
  
  const nodeAtSelectionStart = selection.anchorNode
  const nodeAtSelectionEnd = selection.focusNode
  
  if (nodeAtSelectionStart !== nodeAtSelectionEnd) {
    throw "The selection spans multiple nodes!"
  }
  
  const textArea= nodeAtSelectionStart.firstElementChild
  console.log(textArea)
  const start = textArea.selectionStart
  const end = textArea.selectionEnd
  const selectedText = textArea.value.substring(start, end)
  
  return {
    selectedNode: textArea,
    start: start,
    end: end,
    selectedText: selectedText,
  }
}

function transformSelectedText(transform) {
  const selection = getSelectedText()
  const existingText = selection.selectedText
  const newText = transform(existingText)

  const prefix = selection.selectedNode.value.substring(0, selection.start)
  const suffix = selection.selectedNode.value.substring(selection.end)
  
  selection.selectedNode.value = prefix + newText + suffix
}

function parseMarkDownImage(inputMarkdown) {
  const withoutPrefix = inputMarkdown.slice(2) // Removes "![" prefix
  const withoutSuffix = withoutPrefix.slice(0, -1) // Removes ")" suffix
  
  const [altText, imgSrc] = withoutSuffix.split("](")
  
  return {
    altText: altText,
    imgSrc: imgSrc,
  }
}

// Example input: ![a](b)
// Example output: <img alt="a" src="b">
function convertMarkdownImageToHTML(inputMarkdown) {
  const { altText, imgSrc } = parseMarkDownImage(inputMarkdown)
  
  return `<img alt="${altText}" src="${imgSrc}">`
}

transformSelectedText(imageMarkdown => convertMarkdownImageToHTML(imageMarkdown))

Screenshot

No response

Example URL

When editing an issue like:

https://github.com/refined-github/refined-github/issues/5290

[fregante]

I agree with @cheap-glitch but I have an additional concern: How quickly will we realize we need a markdown/html parser if we add such a feature? 😃 And generally how much complexity is hiding into this?

This generally sounds useful across websites so it could make sense as its own extension 🤭

[fregante]

I’d love this, but I don’t feel comfortable with adding it because I’d also love a link and table converter, so… we already know where this will end up. Please someone create an extension around for this.