JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.cs.princeton.edu/~dp6/CodeMirror/lib/codemirror.js"></script>
<script src="https://www.cs.princeton.edu/~dp6/CodeMirror/mode/python/python.js"></script>
<link rel="stylesheet" href="https://www.cs.princeton.edu/~dp6/CodeMirror/lib/codemirror.css">
<a href="#!"><img src="smiley1.png" alt="{smiley001}"><img src="smiley2.png" alt="{smiley002}"><img src="smiley3.png" alt="{smiley003}"><img src="smiley4.png" alt="{smiley004}"><img src="smiley5.png" alt="{smiley005}"></a><br>
<textarea id="comments" cols="50" rows="10"></textarea>

JavaScript

$( document ).ready(function() {
	var editor;
  var selected = '';
  
  editor = CodeMirror.fromTextArea(document.getElementById('comments'), {
    mode: {
      name: "python",
      version: 2,
      singleLineStringErrors: false
    },
    lineNumbers: true,
    indentUnit: 4
  });
    
  editor.on('focus', function () {
    // Only insert if a value has been previously selected.
    if (selected.length > 0) {
      // Fetch the current CodeMirror document.
      var doc = editor.getDoc();

      // Insert the text at the cursor position.
      doc.replaceSelection(selected);

      // Clear the selection so it isn't copied repeatedly.
      selected = '';
    }
  });

	$('img').click(function(){
	  console.log($(this).attr('alt'));
		selected = $(this).attr('alt');
	});

});