How can I add a new element or div to TinyMCE? - tinymce

Question

I would like to add one of the open source sliders to my TinyMCE project But I can only change the content_style in the React component. How do I add new HTML tags? I want to add a specific class to some tags or I want to easily change the style or script of the specific class, tag, id vs. I couldn't find anything about this in the documentation. Can anyone help?
<Editor
init={{
selector: "textarea",
height: 500,
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table paste imagetools wordcount",
"table",
],
toolbar:
"insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image CustomSlider table",
content_style:
"tr {display: flex} td {flex: 1; overflow-wrap: anywhere} td img {width: 100%; height: auto} img {width: auto}",
file_picker_types: "image",
file_picker_callback: function (cb, value, meta) {
var input = document.createElement("input");
input.setAttribute("type", "file");
input.setAttribute("accept", "image/*");
input.onchange = function () {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function () {
var id = "blobid" + new Date().getTime();
var blobCache = tinymce.activeEditor.editorUpload.blobCache;
var base64 = reader.result.split(",")[1];
var blobInfo = blobCache.create(id, file, base64);
blobCache.add(blobInfo);
cb(blobInfo.blobUri(), { title: file.name });
};
reader.readAsDataURL(file);
};
input.click();
},
menu: {
custom: { title: "Custom Menu", items: "undo redo basicitem" },
},
menubar: "file edit format custom",
image_class_list: [
{ title: "None", value: "" },
{ title: "No border", value: "img_no_border" },
{ title: "Green border", value: "img_green_border" },
{ title: "Blue border", value: "img_blue_border" },
{ title: "Red border", value: "img_red_border" },
],
image_list: [
{ title: "Cat", value: "cat.png" },
{ title: "Dog", value: "dog.jpg" },
],
setup: function (editor) {
editor.ui.registry.addMenuItem("basicitem", {
text: "My basic menu item",
onAction: function () {
alert("Menu item clicked");
},
});
editor.ui.registry.addButton("CustomSlider", {
text: "Slider",
icon: "gallery",
onAction: function () {
tinymce.activeEditor.windowManager.open({
title: "Dialog Title", // The dialog's title - displayed in the dialog header
body: {
type: "panel", // The root body type - a Panel or TabPanel
items: [
// A list of panel components
{
type: "htmlpanel", // A HTML panel component
html: "Panel content goes here.",
},
],
},
buttons: [
// A list of footer buttons
{
type: "submit",
text: "OK",
},
],
});
},
});
},
}}
/>