JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content" contenteditable="true">Текст</div>

<div class="container">
	<div class="inner">
		<span id="tag" title="Проверка" class="source">Проверка</span>
	</div>
</div>

CSS

.content,
.source{
	border:4px solid #ccc;
	border-radius:6px;
}
.content{
	width:400px;
	height:100px;
}
.source{
	width:200px;
	height:100px;
}
.inner{
	margin:0 0 30px;
}
.action{
	height:40px;
	line-height:40px;
	margin:0;
	padding:0 20px;
	border:0;
	line-height:40px;
	border-radius:5px;
	font:inherit;
	color:#fff;
	background:#777;
}

JavaScript

$(function () {
    $('[id = "tag"]').click(function(){
        var tag = $(this).attr('title');
        $('[class = "content"]').focus();
        insertHTML(tag);
    });
});

function insertHTML(html) {
	try {
		var selection = window.getSelection(),
			temp = document.createElement('div'),
			insertion = document.createDocumentFragment();

		temp.innerHTML = html;

		while (temp.firstChild) {
			insertion.appendChild(temp.firstChild);
		}

		selection.getRangeAt(0).insertNode(insertion);
	} catch (z) {
		try {
			document.selection.createRange().pasteHTML(html);
		} catch (z) {}
	}
}