Refactor shortcodes component for new TinyMCE API

[MAILPOET-1799]
This commit is contained in:
Ján Mikláš
2019-08-27 14:13:11 +02:00
committed by M. Shull
parent f210fec8a7
commit 145f230534
2 changed files with 28 additions and 23 deletions

View File

@@ -8,50 +8,54 @@
* its placeholder into editor text.
*/
import MailPoet from 'mailpoet';
function tinyMceAdd(editor) {
var appendLabelAndClose = function appendLabelAndCLose(shortcode) {
editor.insertContent(shortcode);
editor.windowManager.close();
};
var generateOnClickFunc = function generateOnClickFunc(shortcode) {
return function appendAndClose() {
appendLabelAndClose(shortcode);
};
};
editor.ui.registry.addIcon('mailpoet', '<svg viewBox="0 0 152.02 156.4" width="20" height="20"><path d="M37.71,89.1c3.5,0,5.9-.8,7.2-2.3a8,8,0,0,0,2-5.4V35.7l17,45.1a12.68,12.68,0,0,0,3.7,5.4c1.6,1.3,4,2,7.2,2a12.54,12.54,0,0,0,5.9-1.4,8.41,8.41,0,0,0,3.9-5l18.1-50V81a8.53,8.53,0,0,0,2.1,6.1c1.4,1.4,3.7,2.2,6.9,2.2,3.5,0,5.9-.8,7.2-2.3a8,8,0,0,0,2-5.4V8.7a7.48,7.48,0,0,0-3.3-6.6c-2.1-1.4-5-2.1-8.6-2.1a19.3,19.3,0,0,0-9.4,2,11.63,11.63,0,0,0-5.1,6.8L74.91,67.1,54.41,8.4a12.4,12.4,0,0,0-4.5-6.2c-2.1-1.5-5-2.2-8.8-2.2a16.51,16.51,0,0,0-8.9,2.1c-2.3,1.5-3.5,3.9-3.5,7.2V80.8c0,2.8.7,4.8,2,6.2C32.21,88.4,34.41,89.1,37.71,89.1Z"/><path d="M149,116.6l-2.4-1.9a7.4,7.4,0,0,0-9.4.3,19.65,19.65,0,0,1-12.5,4.6h-21.4A37.08,37.08,0,0,0,77,130.5l-1.1,1.2-1.1-1.1a37.25,37.25,0,0,0-26.3-10.9H27a19.59,19.59,0,0,1-12.4-4.6,7.28,7.28,0,0,0-9.4-.3l-2.4,1.9A7.43,7.43,0,0,0,0,122.2a7.14,7.14,0,0,0,2.4,5.7A37.28,37.28,0,0,0,27,137.4h21.6a19.59,19.59,0,0,1,18.9,14.4v.2c.1.7,1.2,4.4,8.5,4.4s8.4-3.7,8.5-4.4v-.2a19.59,19.59,0,0,1,18.9-14.4H125a37.28,37.28,0,0,0,24.6-9.5,7.42,7.42,0,0,0,2.4-5.7A7.86,7.86,0,0,0,149,116.6Z"/></svg>');
editor.addButton('mailpoet_shortcodes', {
icon: 'mailpoet_shortcodes',
onclick: function onClick() {
editor.ui.registry.addButton('mailpoet_shortcodes', {
icon: 'mailpoet',
onAction: function onActionButton() {
var shortcodes = [];
var configShortcodes = editor.settings.mailpoet_shortcodes;
var i;
Object.keys(configShortcodes).forEach(function configShortcodesLoop(segment) {
var section;
if (Object.prototype.hasOwnProperty.call(configShortcodes, segment)) {
shortcodes.push({
type: 'label',
text: segment,
});
section = {
name: segment,
title: segment,
items: [],
};
for (i = 0; i < configShortcodes[segment].length; i += 1) {
shortcodes.push({
section.items.push({
type: 'button',
text: configShortcodes[segment][i].text,
onClick: generateOnClickFunc(configShortcodes[segment][i].shortcode),
name: configShortcodes[segment][i].shortcode,
});
}
shortcodes.push(section);
}
});
// Open window
editor.windowManager.open({
height: parseInt(editor.getParam('plugin_mailpoet_shortcodes_height', 400), 10),
width: parseInt(editor.getParam('plugin_mailpoet_shortcodes_width', 450), 10),
autoScroll: true,
title: editor.settings.mailpoet_shortcodes_window_title,
body: shortcodes,
buttons: [],
body: {
type: 'tabpanel',
tabs: shortcodes,
},
buttons: [{
type: 'cancel',
text: MailPoet.I18n.t('close'),
primary: true,
}],
onAction: function onActionDialog(dialog, button) {
editor.insertContent(button.name);
editor.windowManager.close();
},
});
},
});