Stripo plugin HTML editor - html-editor

Question

I am using stripo HTML editor and i have completed my installation process, but now i just want to save the whole form in form of html in my react code not in any external file. I could not find any solutuon online or anything in their documentation regarding this. I also want to add preview and export option in the header as well as the whole header in their demo.
Here's my code till now.
This is my result of my existing code
What i want is given below
This is the result i want. I want to access all the possible header options given. Also a button by which i can get the html of the above image that i have posted
Below is my code
import "./App.css";
var notifications = {
autoCloseTimeout: 4000,
container: ".notification-zone",
error: function (text, id, params) {
this.showNotification(
this.getErrorNotification.bind(this),
text,
id,
params
);
},
warn: function (text, id, params) {
this.showNotification(
this.getWarningNotification.bind(this),
text,
id,
params
);
},
info: function (text, id, params) {
this.showNotification(
this.getInfoNotification.bind(this),
text,
id,
params
);
},
success: function (text, id, params) {
this.showNotification(
this.getSuccessNotification.bind(this),
text,
id,
params
);
},
loader: function (text, id, params) {
this.showNotification(
this.getLoaderNotification.bind(this),
text,
id,
params
);
},
hide: function (id) {
// var toast = `$('#' + id, this.container);
// toast.effect('fade', 600, function () {
// toast.remove()
// })`;
},
showNotification: function (notificationGetter, text, id, params) {
params = Object.assign({ autoClose: true, closeable: true }, params || {});
if (!id || !`$('#' + id).length`) {
var toast = notificationGetter(text, id, !params.closeable);
this.container.append(toast);
toast.effect("slide", { direction: "down" }, 300);
if (params.autoClose) {
setTimeout(function () {
toast.effect("fade", 600, function () {
toast.remove();
});
}, this.autoCloseTimeout);
}
}
},
getErrorNotification: function (text, id, nonclosable) {
return this.getNotificationTemplate("alert-danger", text, id, nonclosable);
},
getWarningNotification: function (text, id, nonclosable) {
return this.getNotificationTemplate("alert-warning", text, id, nonclosable);
},
getInfoNotification: function (text, id, nonclosable) {
return this.getNotificationTemplate("alert-info", text, id, nonclosable);
},
getSuccessNotification: function (text, id, nonclosable) {
return this.getNotificationTemplate("alert-success", text, id, nonclosable);
},
getLoaderNotification: function (text, id) {
var notification = `$('\
<div class="alert alert-info" role="alert">\
<div style="width:auto; margin-right: 15px; float: left !important;">\
<div style="width:20px;height:20px;border-radius:50%;box-shadow:1px 1px 0px #31708f;\
animation:cssload-spin 690ms infinite linear"></div>\
</div>' + text + '\
</div>')`;
id && notification.attr("id", id);
return notification;
},
getNotificationTemplate: function (classes, text, id, nonclosable) {
var notification = `$('\
<div class="alert alert-dismissible ' + classes + (nonclosable ? ' nonclosable' : '') + '" role="alert">\
' + (nonclosable ? '' :
'<button type="button" class="close" data-dismiss="alert" aria-label="Close">\
<span aria-hidden="true">×</span>\
</button>') +
text +
'</div>')`;
id && notification.attr("id", id);
return notification;
},
};
export default function App() {
function request(method, url, data, callback) {
var req = new XMLHttpRequest();
req.onreadystatechange = function () {
if (req.readyState === 4 && req.status === 200) {
callback(req.responseText);
} else if (req.readyState === 4 && req.status !== 200) {
console.error(
"Can not complete request. Please check you entered a valid PLUGIN_ID and SECRET_KEY values"
);
}
};
req.open(method, url, true);
if (method !== "GET") {
req.setRequestHeader("content-type", "application/json");
}
req.send(data);
}
function loadDemoTemplate(callback) {
request(
"GET",
"https://raw.githubusercontent.com/ardas/stripo-plugin/master/Public-Templates/Basic-Templates/Trigger%20newsletter%20mockup/Trigger%20newsletter%20mockup.html",
null,
function (html) {
request(
"GET",
"https://raw.githubusercontent.com/ardas/stripo-plugin/master/Public-Templates/Basic-Templates/Trigger%20newsletter%20mockup/Trigger%20newsletter%20mockup.css",
null,
function (css) {
callback({ html: html, css: css });
}
);
}
);
}
useEffect(() => {
function initPlugin(template) {
const apiRequestData = {
emailId: "rhuzaifa2468#gmail.com",
};
const script = document.createElement("script");
script.id = "stripoScript";
script.type = "text/javascript";
script.src = "https://plugins.stripo.email/static/latest/stripo.js";
script.onload = function () {
window.Stripo.init({
settingsId: "stripoSettingsContainer",
previewId: "stripoPreviewContainer",
codeEditorButtonId: "codeEditor",
undoButtonId: "undoButton",
redoButtonId: "redoButton",
locale: "en",
html: template.html,
css: template.css,
notifications: {
info: notifications.info.bind(notifications),
error: notifications.error.bind(notifications),
warn: notifications.warn.bind(notifications),
loader: notifications.loader.bind(notifications),
hide: notifications.hide.bind(notifications),
success: notifications.success.bind(notifications),
},
apiRequestData: apiRequestData,
userFullName: "Plugin Demo User",
versionHistory: {
changeHistoryLinkId: "changeHistoryLink",
onInitialized: function (lastChangeIndoText) {
"#changeHistoryContainer".show();
},
},
getAuthToken: function (callback) {
request(
"POST",
"https://plugins.stripo.email/api/v1/auth",
JSON.stringify({
pluginId: "53c40f7b8d8c4b249b55b39ea9cda545",
secretKey: "e37d5bedd3c64055b3d18b3ff40c4e84",
}),
function (data) {
callback(JSON.parse(data).token);
}
);
},
});
};
document.body.appendChild(script);
}
loadDemoTemplate(initPlugin);
}, []);
return (
<div className="App">
<span id="changeHistoryContainer" style={{ display: "none" }}>
Last change: <a id="changeHistoryLink"></a>
</span>
<button id="undoButton" className="control-button">
Undo
</button>
<button id="redoButton" className="control-button">
Redo
</button>
<button id="codeEditor" className="control-button">
Code editor
</button>
<div id="stripoSettingsContainer"></div>
<div id="stripoPreviewContainer"></div>
</div>
);
}``
`