WYSIWYG редактор. Как правильно обернуть выделенный текст в блок?

Question

[Александр Невский]

Я делаю редактор текста для своего сайта. Использовать сторонние не хочу.
Редактор основан на свойстве contenteditable.
Мне нужно выделенный текст обернуть в div с классом dialog при клике на кнопку. Но при этом, чтобы при ВТОРОМ клике с выделенной этой же областью убирался этот див, а так же работал "document.execCommand(undo, false, null)".

Я думаю сделать как то так "document.execCommand('insertHTML', false, div)", но вот есть проблема в div нужно запихать строку с кодом выделенного текста, обернутого в div с классом.

Хотел сделать так, но переменная div является объектом.

var range = window.getSelection().getRangeAt(0),
selectionContents = range.extractContents(),
div = document.createElement('div');

div.appendChild(selectionContents);
div.setAttribute('class', 'dialog');
document.execCommand('insertHTML', false, div);