How to wrap table generated by InsertTable command inside a div

Question

I saw this code on one of the tutorials I have seen, but this one adds class to the table element.

var RadEditorCommandList = Telerik.Web.UI.Editor.CommandList;

var table = RadEditorCommandList["InsertTable"];
RadEditorCommandList["InsertTable"] = function (commandName, editor, args) {
    table(commandName, editor, args);
    var p = editor.getSelectedElement().parentNode.parentNode.parentNode;
    p.classList.add("editor-table")
};

I was wondering how can I extend this command if I want to wrap the table inside a div, here's my failed attempt (it doesn't display a table on the editor anymore):

var table = Telerik.Web.UI.Editor.CommandList['InsertTable'];
Telerik.Web.UI.Editor.CommandList['InsertTable'] = function(
  commandName,
  editor,
  args
) {
  table(commandName, editor, args);
  var wrapper = document.createElement('div');
  wrapper.classList.add('table-wrapper');
  var p = editor.getSelectedElement().parentNode.parentNode.parentNode;
  wrapper.appendChild(p);
};

Answer 1

Use the OnClientPasteHtml client-event, where you will obtain the inserted table with the args.get_value() method, modify it to be in a div wrapper and paste it via args.set_value() method.

You can check an example at https://www.telerik.com/support/kb/aspnet-ajax/editor/details/inserting-new-tables-with-a-header-row-as-default