tinymce-plugin
Version:
tinymce-plugin
1,077 lines (1,067 loc) • 132 kB
JavaScript
/*!
* @plugin tinymce-plugin
* @version 0.0.3-beta.22 (2022-8-5)
* @description tinymce-plugin
* @copyright (2022) Five(Li Hailong) . All rights reserved. https://github.com/tinymce-plugintinymce-plugin
*/
(function(global, factory) {
typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinymcePlugin = {}));
})(this, function(exports2) {
"use strict";
let tp$tinymce = tinymce;
let global$1 = tp$tinymce.util.Tools;
let global$7 = tp$tinymce.html.Node;
tp$tinymce.html.Schema;
let global$6 = tp$tinymce.util.XHR;
let global$11 = tp$tinymce.util.I18n;
let tp$Serialize = new tp$tinymce.html.Serializer().serialize;
let tp$DomParser = new tp$tinymce.html.DomParser().parse;
let tp$State = {};
window.tp$State = tp$State;
let tp$getStyleValue = (key, str) => {
let m = str ? str.match(new RegExp(key + ':(.+?)"?[;}]')) : "";
return m ? m[1] : false;
};
function tp$SetSpecialStyle(editor, _self, specialStyleClass, specialStyleValue) {
if (editor.tp$Style.mapping && editor.tp$Style.mapping["" + _self.getAttribute("data-id")]) {
editor.tp$Style.mapping["" + _self.getAttribute("data-id")].specialStyle["" + specialStyleClass] = specialStyleValue;
}
}
let tp$Component = {
customTags: {}
};
let keys = Object.keys;
let __assign = function() {
__assign = Object.assign || function __assign2(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
let hasOwnProperty = Object.hasOwnProperty;
var isNullable = function(a) {
return a === null || a === void 0;
};
var isNonNullable = function(a) {
return !isNullable(a);
};
const getFormatStyle = (style) => {
if (typeof style === "object") {
return JSON.stringify(style).replace(/"([-A-Za-z]+?)":""[,}]/g, "").replace(/,/gi, ";").replace(/{/gi, "").replace(/}/gi, "").replace(/"/gi, "");
}
};
const getObjStyle = (style) => {
if (typeof style === "string" && style !== "{}") {
style = JSON.stringify(style);
return JSON.parse(("{" + style.replace(/:/g, '": "').replace(/;\s*/g, '","') + "}").replace(/,\"\"\}$/, "}"));
}
return style;
};
const getStyleSheetClass = (className, content) => {
const result = content.match(new RegExp(`.${className}\\s*\\{([\\s\\S]+)\\}`));
return result && result[1] ? result[1].replace(/\}([\s\S]+)/, "").trim() : "";
};
var has = function(obj, key) {
return hasOwnProperty.call(obj, key);
};
var getDimension = function(node, styles, dimension, defaultValue) {
if (defaultValue === void 0) {
defaultValue = null;
}
var value = node.attr(dimension);
if (isNonNullable(value)) {
return value;
} else if (!has(styles, dimension)) {
return defaultValue;
} else {
return null;
}
};
const toHump = (name) => {
return name.replace(/[-|\_](\w)/g, function(all, letter) {
return letter.toUpperCase();
});
};
const toLine = (name) => {
return name.replace(/([A-Z])/g, "_$1").toLowerCase().replace(/\-/g, "_");
};
const toHyphen = (name) => {
return name.replace(/([A-Z])/g, "-$1").toLowerCase().replace(/\_/g, "-");
};
var getCurrentValue = function(block, styleName) {
let resValue = "";
if (!block)
return "";
styleName = toHump(styleName);
while (block.nodeName !== "P" && block.nodeName !== "LI" && block.nodeName !== "DIV" && block.nodeName !== "BODY") {
if (block.style[styleName]) {
resValue = block.style[styleName];
break;
}
block = block.parentNode;
}
return resValue;
};
let getButtonsStyle = (obj, style) => {
let styleStr = "";
styleStr += obj["tp-buttons"] ? '.tp-buttons[data-tp-style="' + style + '"] {' + obj["tp-buttons"] + "}\n" : "";
styleStr += obj["tp-buttons:hover"] ? '.tp-buttons[data-tp-style="' + style + '"]:hover {' + obj["tp-buttons:hover"] + "}\n" : "";
styleStr += obj["tp-buttons::before"] ? '.tp-buttons[data-tp-style="' + style + '"]::before {' + obj["tp-buttons::before"] + "}\n" : "";
styleStr += obj["tp-buttons::after"] ? '.tp-buttons[data-tp-style="' + style + '"]::after {' + obj["tp-buttons::after"] + "}\n" : "";
return styleStr;
};
const setIntervalFn = (func, delay, outTime) => {
!outTime && (outTime = delay * 100);
let setIntervalObj = {
id: null,
outTime,
outId: null
};
setIntervalObj.id = setInterval((obj) => {
func(() => {
clearTimeout(obj.outId);
clearInterval(obj.id);
});
}, delay, setIntervalObj);
setIntervalObj.outId = setTimeout(() => {
setIntervalObj.id && clearInterval(setIntervalObj.id);
}, setIntervalObj.outTime);
};
let getTp$ComponentFn = function(customTag, fnName) {
if (typeof customTag[fnName] === "function")
return customTag[fnName];
if (typeof tp$Component.customTags[customTag.name][fnName] === "function")
return tp$Component.customTags[customTag.name][fnName];
return function() {
};
};
const autoToPX = (data, noPerCent) => {
if (!noPerCent) {
return typeof data === "string" && data.length > 0 && data.match(/^[0-9]{1,8}$/) ? data + "px" : data;
} else {
return typeof data === "string" && !data.match(/\s/) && data.length > 0 ? parseInt(data) + "px" : data;
}
};
const tp$Translate = (text) => {
let textList = text.split("_");
return textList.length > 1 ? global$11.translate([textList[0] + " {0}", textList[1]]) : global$11.translate(text);
};
tinymce.tp$HtmlPanelFn = window.tp$HtmlPanelFn = function(e, _id, styleName) {
tp$State["buttonsStyle"] && (tp$State["buttonsStyle"][_id] = styleName);
document.querySelector("#" + _id + "_StyleID").innerHTML = e.nextElementSibling.innerHTML;
};
const tp$skt = {
count: 0
};
const createSkt = (opt) => {
let sktID = new Date().getTime() + "-" + tp$skt.count++;
let sktHtml = `
<div id="${sktID}" class="skt skt-loading" data-v-e3347e98=""><div class="skt-tox-tinymce" data-v-e3347e98="" style="height: 200px;"><div class="skt-tox-editor-container" data-v-e3347e98=""><div class="skt-tox-editor-header" data-v-e3347e98=""><div class="skt-tox-menubar" data-v-e3347e98=""><button class="skt-tox-mbtn skt-tox-mbtn--select" data-v-e3347e98=""><span class="skt-tox-mbtn__select-label skeleton" data-v-e3347e98="">File</span></button><button class="skt-tox-mbtn skt-tox-mbtn--select" data-v-e3347e98=""><span class="skt-tox-mbtn__select-label skeleton" data-v-e3347e98="">Edit</span></button><button class="skt-tox-mbtn skt-tox-mbtn--select" data-v-e3347e98=""><span class="skt-tox-mbtn__select-label skeleton" data-v-e3347e98="">View</span></button><button class="skt-tox-mbtn skt-tox-mbtn--select" data-v-e3347e98=""><span class="skt-tox-mbtn__select-label skeleton" data-v-e3347e98="">Format</span></button><button class="skt-tox-mbtn skt-tox-mbtn--select" data-v-e3347e98=""><span class="skt-tox-mbtn__select-label skeleton" data-v-e3347e98="">Tools</span></button></div><div class="skt-tox-toolbar-overlord" data-v-e3347e98=""><div class="skt-tox-toolbar" data-v-e3347e98=""><div class="skt-tox-toolbar__group" data-v-e3347e98=""><button class="skt-tox-tbtn" data-v-e3347e98=""><span class="skt-tox-icon tox-tbtn__icon-wrap skeleton" data-v-e3347e98="">4</span><!--v-if--></button><button class="skt-tox-tbtn skt-tox-tbtn--select skt-tox-tbtn--bespoke" data-v-e3347e98=""><span class="skt-tox-tbtn__select-label skt-tox-tbtn--select skt-tox-tbtn--bespoke skeleton" data-v-e3347e98="">4</span><div class="skt-tox-tbtn__select-chevron skeleton" data-v-e3347e98=""></div></button><button class="skt-tox-tbtn skt-tox-tbtn--select skt-tox-tbtn--bespoke" data-v-e3347e98=""><span class="skt-tox-tbtn__select-label skt-tox-tbtn--select skt-tox-tbtn--bespoke skeleton" data-v-e3347e98="">4</span><div class="skt-tox-tbtn__select-chevron skeleton" data-v-e3347e98=""></div></button><button class="skt-tox-tbtn skt-tox-tbtn--select skt-tox-tbtn--bespoke" data-v-e3347e98=""><span class="skt-tox-tbtn__select-label skt-tox-tbtn--select skt-tox-tbtn--bespoke skeleton" data-v-e3347e98="">4</span><div class="skt-tox-tbtn__select-chevron skeleton" data-v-e3347e98=""></div></button><button class="skt-tox-tbtn skt-tox-split-button" data-v-e3347e98=""><span class="skt-tox-icon tox-tbtn__icon-wrap skeleton" data-v-e3347e98="">4</span><div class="skt-tox-tbtn__select-chevron skeleton" data-v-e3347e98=""></div></button><button class="skt-tox-tbtn skt-tox-split-button" data-v-e3347e98=""><span class="skt-tox-icon tox-tbtn__icon-wrap skeleton" data-v-e3347e98="">4</span><div class="skt-tox-tbtn__select-chevron skeleton" data-v-e3347e98=""></div></button><button class="skt-tox-tbtn" data-v-e3347e98=""><span class="skt-tox-icon tox-tbtn__icon-wrap skeleton" data-v-e3347e98="">4</span><!--v-if--></button><button class="skt-tox-tbtn" data-v-e3347e98=""><span class="skt-tox-icon tox-tbtn__icon-wrap skeleton" data-v-e3347e98="">4</span><!--v-if--></button><button class="skt-tox-tbtn" data-v-e3347e98=""><span class="skt-tox-icon tox-tbtn__icon-wrap skeleton" data-v-e3347e98="">4</span><!--v-if--></button><button class="skt-tox-tbtn" data-v-e3347e98=""><span class="skt-tox-icon tox-tbtn__icon-wrap skeleton" data-v-e3347e98="">4</span><!--v-if--></button><button class="skt-tox-tbtn" data-v-e3347e98=""><span class="skt-tox-icon tox-tbtn__icon-wrap skeleton" data-v-e3347e98="">4</span><!--v-if--></button><button class="skt-tox-tbtn skt-tox-split-button" data-v-e3347e98=""><span class="skt-tox-icon tox-tbtn__icon-wrap skeleton" data-v-e3347e98="">4</span><div class="skt-tox-tbtn__select-chevron skeleton" data-v-e3347e98=""></div></button><button class="skt-tox-tbtn" data-v-e3347e98=""><span class="skt-tox-icon tox-tbtn__icon-wrap skeleton" data-v-e3347e98="">4</span><!--v-if--></button><button class="skt-tox-tbtn" data-v-e3347e98=""><span class="skt-tox-icon tox-tbtn__icon-wrap skeleton" data-v-e3347e98="">4</span><!--v-if--></button><button class="skt-tox-tbtn" data-v-e3347e98=""><span class="skt-tox-icon tox-tbtn__icon-wrap skeleton" data-v-e3347e98="">4</span><!--v-if--></button><button class="skt-tox-tbtn skt-tox-split-button" data-v-e3347e98=""><span class="skt-tox-icon tox-tbtn__icon-wrap skeleton" data-v-e3347e98="">4</span><div class="skt-tox-tbtn__select-chevron skeleton" data-v-e3347e98=""></div></button><button class="skt-tox-tbtn skt-tox-split-button" data-v-e3347e98=""><span class="skt-tox-icon tox-tbtn__icon-wrap skeleton" data-v-e3347e98="">4</span><div class="skt-tox-tbtn__select-chevron skeleton" data-v-e3347e98=""></div></button><button class="skt-tox-tbtn" data-v-e3347e98=""><span class="skt-tox-icon tox-tbtn__icon-wrap skeleton" data-v-e3347e98="">4</span><!--v-if--></button><button class="skt-tox-tbtn" data-v-e3347e98=""><span class="skt-tox-icon tox-tbtn__icon-wrap skeleton" data-v-e3347e98="">4</span><!--v-if--></button></div><div class="skt-tox-toolbar__group" data-v-e3347e98=""><button class="skt-tox-tbtn" data-v-e3347e98=""><span class="skt-tox-icon tox-tbtn__icon-wrap skeleton" data-v-e3347e98="">4</span><!--v-if--></button></div></div></div><div class="skt-tox-anchorbar" data-v-e3347e98=""></div></div><div class="skt-tox-sidebar-wrap-box" data-v-e3347e98=""><p class="skeleton" data-v-e3347e98=""> </p><p class="skeleton" data-v-e3347e98=""> </p><p class="skeleton" data-v-e3347e98=""></p></div></div><div class="skt-tox-statusbar" data-v-e3347e98=""><div class="skeleton" data-v-e3347e98=""> PP </div><span class="skeleton" data-v-e3347e98="" style="margin-left: calc(100% - 120px);">Powered by Five </span></div></div></div>
`;
document.querySelector(opt.selector).outerHTML = sktHtml + document.querySelector(opt.selector).outerHTML;
return sktID;
};
const createHtmlPanel = (editor, panelID, dataList) => {
let buttonsStyleName = "";
buttonsStyleName = tp$State["buttonsStyle"] && tp$State["buttonsStyle"][panelID];
!dataList ? dataList = keys(editor.tp$CustomTags.buttons.styleSheetList) : "";
if (!buttonsStyleName) {
buttonsStyleName = tp$State["buttonsStyle"] && (tp$State["buttonsStyle"][panelID] = dataList[0]);
}
let panelStr = "";
let buttonsStyleInit = "";
let buttonsStyleStr = "";
dataList.forEach((styleName, idx) => {
styleName === buttonsStyleName ? buttonsStyleInit = `<span class="tp-buttons" data-tp-style="${styleName}">${tp$Translate(styleName)}</span>` : "";
panelStr += `<li ><input id="${panelID + "_" + idx}" type="radio" name="${panelID}" ${buttonsStyleName === styleName ? " checked " : ""} onclick="tinymce.tp$HtmlPanelFn(this,'${panelID}','${styleName}')"> <label for="${panelID + "_" + idx}" > <span class="tp-buttons" data-tp-style="${styleName}">${tp$Translate(styleName)}</span></label></li>
`;
buttonsStyleStr += getButtonsStyle(editor.tp$CustomTags.buttons.styleSheetList[styleName], styleName);
});
return `<div style="width: 100%; position: relative; " >
<style>
.tox .tox-dialog__body-content ul{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
width: 100%;
padding: 0;
margin: 0;
max-height:160px;
overflow: auto;
border-top: 1px solid #ccc;
}
.tox .tox-dialog__body-content ul input{
display: none;
}
.tox .tox-dialog__body-content ul label{
border: 2px solid transparent;
display: inline-block;
position: relative;
padding: 2px;
cursor: pointer;
}
.tox .tox-dialog__body-content ul label::after{
content:"\u2714";
font-size: 20px;
border-radius: 15px;
width: 22px;
height: 22px;
display: none;
color: #fff;
background: #1C6CA1;
border: 2px solid #1C6CA1;
position: absolute;
text-align: center;
line-height: 20px;
z-index: 9;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.tox .tox-dialog__body-content ul input:checked + label::after{
display: block;
}
.tox .tox-dialog__body-content ul input:checked + label{
pointer-events: none;
}
.tox .tox-dialog__body-content ul input:checked + label>span{
opacity: 0.5;
}
.tox .tox-dialog__body-content .showStyle{
display: block;
position: absolute;
right: 20px;
top: 30px;
-webkit-transform: translatY(-50%);
transform: translateY(-50%);
}
.tox .tox-dialog__body-content .tox-form__group h2.title_h2{
margin: 0;
padding: 0;
margin-top: -20px;
min-height: 60px;
line-height:60px;
}
.tox .tox-dialog__body-content li{
line-style:none;
display: inline-block;
margin: 0 4px;
margin-top: 5px;
}
${buttonsStyleStr.replace(/.tp-buttons/g, ".tox .tox-dialog__body-content .tp-buttons")}
</style>
<div class="showStyle" id="${panelID + "_StyleID"}">${buttonsStyleInit}</div>
<h2 class="title_h2">${global$11.translate("Select tmplate")}:</h2>
<ul>
${panelStr}
</ul>
</div>
`;
};
let tp$getFirstStyleValue = (_block, _styleName) => {
let _resValue = "";
if (!_block)
return "";
_styleName = toHump(_styleName);
while (_block.nodeName && _block.nodeName.toLowerCase() !== "#text") {
_resValue = _block.style[_styleName];
_block = _block.firstChild;
}
return _resValue;
};
const toUpdateIndent2em = (editor, value, blocks) => {
blocks = blocks || editor.selection.getSelectedBlocks();
global$1.each(blocks, function(block) {
if (editor.dom.getStyle(block, "text-indent") || value) {
let kv = "";
let kl = "";
if (value === "remove") {
-parseInt(editor.dom.getStyle(block, "text-indent")) == parseInt(editor.dom.getStyle(block, "margin-left")) && editor.dom.setStyle(block, "margin-left", null);
editor.dom.setStyle(block, "text-indent", null);
} else {
value = parseInt(value) || 2;
if (block && block.firstChild) {
kv = tp$getFirstStyleValue(block, "font-size");
kl = tp$getFirstStyleValue(block, "letter-spacing");
if (kv) {
kv = (parseInt(kv) + parseInt(kl ? kl : 0)) * value + "px";
} else
kv = (parseInt(kl ? kl : 0) + 16) * value + "px";
}
value > 0 && -parseInt(editor.dom.getStyle(block, "text-indent")) == parseInt(editor.dom.getStyle(block, "margin-left")) && editor.dom.setStyle(block, "margin-left", null);
editor.dom.setStyle(block, "text-indent", kv ? kv : value + "em");
value < 0 && editor.dom.setStyle(block, "margin-left", kv ? kv.replace(/^-/, "") : -value + "em");
}
}
});
};
const tp$RegisterCommand = (editor) => {
var cmd = function(command) {
return function() {
return editor.execCommand(command);
};
};
editor.addCommand("tpLetterspacing", function(ui, value) {
editor.formatter.apply("tpLetterspacing", { value });
toUpdateIndent2em(editor);
});
editor.addCommand("tpLineheight", function(ui, value) {
editor.formatter.apply("tpLineheight", { value });
});
editor.addCommand("tpIndent", function(ui, value) {
toUpdateIndent2em(editor, value || 2);
});
editor.addCommand("mceTpAlignleft", function(ui, value) {
let _dom = editor.dom.getParent(editor.selection.getNode(), "tp-tabs,tp-buttons,tp-collapse");
editor.dom.setStyle(_dom, "float", "left");
});
editor.addCommand("mceTpAlignright", function(ui, value) {
let _dom = editor.dom.getParent(editor.selection.getNode(), "tp-tabs,tp-buttons,tp-collapse");
editor.dom.setStyle(_dom, "float", "right");
});
editor.addCommand("mceTpAligncenter", function(ui, value) {
let _dom = editor.dom.getParent(editor.selection.getNode(), "tp-tabs,tp-buttons,tp-collapse");
editor.dom.setStyle(_dom, "float", null);
editor.dom.setStyle(_dom, "margin-left", "auto");
editor.dom.setStyle(_dom, "margin-right", "auto");
});
editor.ui.registry.addButton("tpalignleft", {
tooltip: "Align left",
onAction: cmd("mceTpAlignleft"),
icon: "align-left"
});
editor.ui.registry.addButton("tpalignright", {
tooltip: "Align right",
onAction: cmd("mceTpAlignright"),
icon: "align-right"
});
editor.ui.registry.addButton("tpaligncenter", {
tooltip: "Align center",
onAction: cmd("mceTpAligncenter"),
icon: "align-center"
});
};
const tp$RegisterFormatter = (editor) => {
editor.formatter.register({
alignleft: [
{
selector: "figure.image",
collapsed: false,
classes: "align-left",
ceFalseOverride: true,
preview: "font-family font-size"
},
{
selector: "figure,p,h1,h2,h3,h4,h5,h6,td,th,tr,div,ul,ol,li",
styles: { textAlign: "left" },
inherit: false,
preview: false,
defaultBlock: "div"
},
{
selector: "img,table,audio,video,tp-buttons,tp-tabs",
collapsed: false,
styles: { float: "left" },
preview: "font-family font-size"
}
],
aligncenter: [
{
selector: "figure,p,h1,h2,h3,h4,h5,h6,td,th,tr,div,ul,ol,li",
styles: { textAlign: "center" },
inherit: false,
preview: "font-family font-size",
defaultBlock: "div"
},
{
selector: "figure.image",
collapsed: false,
classes: "align-center",
ceFalseOverride: true,
preview: "font-family font-size"
},
{
selector: "img,audio,video",
collapsed: false,
styles: {
display: "block",
marginLeft: "auto",
marginRight: "auto"
},
preview: false
},
{
selector: "table,tp-buttons,tp-tabs",
collapsed: false,
styles: {
marginLeft: "auto",
marginRight: "auto"
},
preview: "font-family font-size"
}
],
alignright: [
{
selector: "figure.image",
collapsed: false,
classes: "align-right",
ceFalseOverride: true,
preview: "font-family font-size"
},
{
selector: "figure,p,h1,h2,h3,h4,h5,h6,td,th,tr,div,ul,ol,li",
styles: { textAlign: "right" },
inherit: false,
preview: "font-family font-size",
defaultBlock: "div"
},
{
selector: "img,table,audio,video,tp-buttons,tp-tabs",
collapsed: false,
styles: { float: "right" },
preview: "font-family font-size"
}
],
afterParagraph: {
selector: "p,ul,ol,dl,li,table",
defaultBlock: "p",
deep: false,
styles: { "margin-bottom": "%value" }
},
beforeParagraph: {
selector: "p,ul,ol,dl,li,table",
defaultBlock: "p",
deep: false,
styles: { "margin-top": "%value" }
},
borderParagraph: {
selector: "p,ul,ol,dl,li,table",
defaultBlock: "p",
deep: false,
styles: { "border-width": "%valueW", "border-style": "%valueS", "border-color": "%valueC" }
},
paddingParagraph: {
selector: "p,ul,ol,dl,li,table",
defaultBlock: "p",
deep: false,
styles: { "padding": "%value" }
},
tpParagraph: {
selector: "p,ul,ol,dl,li,table",
defaultBlock: "p",
deep: false,
styles: { "background": "%background", "text-indent": "%indent" }
},
tpLetterspacing: {
inline: "span",
remove_similar: true,
styles: { "letter-spacing": "%value" }
},
tpLineheight: {
selector: "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table",
styles: { "line-height": "%value" }
}
});
editor.on("ExecCommand", function(cmd) {
cmd.command === "FontSize" && toUpdateIndent2em(editor);
});
};
let tp$ComponentSetStyleMapping = function(editor, _self, cmd, _customTag) {
!editor.tp$Style.mapping ? editor.tp$Style.mapping = {} : "";
!editor.tp$Style.mapping["" + _self.getAttribute("data-id")] ? editor.tp$Style.mapping["" + _self.getAttribute("data-id")] = {
styleCustomTags: _customTag.name,
stylePath: _customTag.name === "buttons" ? "styleSheetList" : "styleSheetLoadList",
styleTemplate: _self.getAttribute("data-style") || "default",
quantity: _self.children.length - 1,
specialStyle: {}
} : __assign(editor.tp$Style.mapping["" + _self.getAttribute("data-id")], { styleTemplate: _self.getAttribute("data-tp-style") || "default", quantity: _self.children.length - 1 });
};
const setupWebComponent = (win, doc, editor, _customTag, _tagName) => {
const template = doc.createElement("template");
const staticStyle = document.createElement("style");
const customStyle = document.createElement("style");
staticStyle.textContent = `body{
padding: 0;
margin: 0;
}
:host {
overflow: hidden;
display: block;
}`;
template.innerHTML = _customTag.template.innerHTML;
class TpComponent extends win.HTMLElement {
constructor() {
super();
this.setAttribute("contenteditable", false);
this.setAttribute("data-mce-tp-component", _tagName);
this.attachShadow({ mode: "open" });
this.tp$state = typeof _customTag.state === "object" ? JSON.parse(JSON.stringify(_customTag.state)) : {};
tp$ComponentSetStyleMapping(editor, this, "init", _customTag);
this.tpComponentDelete = typeof _customTag.tpComponentDelete === "function" ? _customTag.tpComponentDelete.bind(this) : () => {
this.remove();
};
this.tpComponentCmd = typeof _customTag.tpComponentCmdFn === "object" ? JSON.stringify(_customTag.tpComponentCmdFn) !== "{}" ? (cmd, props) => {
_customTag.tpComponentCmdFn[cmd](this, props);
tp$ComponentSetStyleMapping(editor, this, cmd, _customTag);
} : (cmd, props) => {
tp$Component.customTags[_tagName].tpComponentCmdFn[cmd](this, props);
tp$ComponentSetStyleMapping(editor, this, cmd, _customTag);
} : () => {
console.log("\u65E0\u53EF\u7528cmd");
};
customStyle.id = "tpComponentStyle_" + this.getAttribute("data-id");
if (_tagName == "tabs") {
customStyle.textContent = _customTag.styleSheetLoadList && _customTag.styleSheetLoadList[this.getAttribute("data-tp-style") || "default"] ? _customTag.styleSheetLoadList[this.getAttribute("data-tp-style") || "default"].replace(/.tp-tabs\s*\{/g, ":host {").replace(/.tp-tabs_label\b\s/g, "::slotted(.tp-tabs_label) ").replace(/.tp-tabs_label:hover\b\s/g, "::slotted(.tp-tabs_label:hover) ").replace(/.tp-tabs_label.checked\b\s/g, "::slotted(.tp-tabs_label.checked) ") : "";
}
if (_tagName == "collapse") {
customStyle.textContent = _customTag.styleSheetLoadList && _customTag.styleSheetLoadList[this.getAttribute("data-tp-style") || "default"] ? _customTag.styleSheetLoadList[this.getAttribute("data-tp-style") || "default"].replace(/>/g, " ").replace(/.tp-collapse\s*\{/g, ":host {").replace(/label.tp-collapse_label\b\s/g, "::slotted(.tp-collapse_label) ").replace(/label.tp-collapse_label::/g, "::slotted(.tp-collapse_label)::").replace(/.tp-tabs_label:hover\b\s/g, "::slotted(.tp-tabs_label:hover) ").replace(/.tp-tabs_label.checked\b\s/g, "::slotted(.tp-tabs_label.checked) ") : "";
}
if (_tagName == "buttons") {
customStyle.textContent = _customTag.styleSheetList && _customTag.styleSheetList[this.getAttribute("data-tp-style") || "default"] ? getButtonsStyle(_customTag.styleSheetList[this.getAttribute("data-tp-style") || "default"], this.getAttribute("data-tp-style") || "default").replace(/\[data-tp-style=(.*?)\]/g, "").replace(/>/g, " ").replace(/.tp-buttons\s*\{/g, ":host {").replace(/.tp-buttons:hover\s*\{/g, ":host(:hover) {").replace(/.tp-buttons::before\s*\{/g, ":host(.tp-buttons)::before {").replace(/.tp-buttons::after\s*\{/g, ":host(.tp-buttons)::after {") : "";
}
template.content.prepend(customStyle);
template.content.prepend(staticStyle);
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
connectedCallback() {
getTp$ComponentFn(_customTag, "headerEditableFn")(this, _customTag.isHeaderEditable, _tagName, editor);
getTp$ComponentFn(_customTag, "contentEditableFn")(this, _customTag.isContentEditable, _tagName, editor);
getTp$ComponentFn(_customTag, "connectedCallback")(this.shadowRoot, this);
}
static get observedAttributes() {
return ["data-top-bg", "data-mce-tp-component", "data-value"];
}
static tp$Delete() {
console.log(this);
}
}
try {
win.customElements.define("tp-" + _tagName, TpComponent);
} catch (_a) {
}
};
const createComponentsCustomTag = (editor) => {
const win = editor.getWin();
const doc = editor.getDoc();
let toolbar = editor.toolbar;
let baseSource = editor.baseURI.source;
typeof toolbar === "object" && (toolbar = toolbar.jion(" "));
if (/tpIconlists/.test(toolbar)) {
global$6.send({
url: baseSource + "plugins/tpIconlists/tpIconlists.css",
async: false,
dataType: "text",
success: function(text) {
editor.dom.addStyle(text);
}
});
}
tp$RegisterFormatter(editor);
tp$RegisterCommand(editor);
const tpComponentStyle = `.mce-content-body [data-mce-tp-component][contenteditable=false][data-mce-selected] {
outline: none;
cursor: default;
box-shadow: 0 0 0 2px #b4d7ff;
position: relative;
z-index:999;
border-color: #B4D7FF;
border-style: solid;
}
.mce-content-body .tp-partition[contentEditable=false],
.mce-content-body .tp-partition[contentEditable=false]:focus,
.mce-content-body .tp-partition[contentEditable=false]:hover{
outline: none!important;
box-shadow: none!important;
}
.mce-content-body tp-buttons .tp-component_inline>a{
color: inherit;
font:inherit;
text-decoration: none;
}
.mce-content-body .tp-collapse .tp-collapse_label>p:first-child{
display: inline-block;
}
.mce-content-body .tp-component_inline{display: table-cell; margin: 0 }
.mce-content-body *[contentEditable=false] *[contentEditable=true]:focus {
outline: none!important;
}
.mce-content-body tp-buttons{
display: inline-block;
vertical-align: middle;
}
.mce-content-body img{
max-width: 100%;
}
.mce-content-body [data-mce-tp-component]{
border: 1px dashed #bbb;
}
.mce-content-body *[contentEditable=false] *[contentEditable=true]:hover {
outline: none!important;
}`;
editor.dom.addStyle(tpComponentStyle);
editor.tp$Style = {};
editor.getTpStyle = (args) => {
return "<style>" + editor.tp$OutputStyle + " </style>";
};
let componentList = editor.tp$CustomTags || tp$Component.customTags;
global$1.each(componentList, function(item, key) {
setupWebComponent(win, doc, editor, item, key);
});
editor.parser.addAttributeFilter("data-tp-component", (nodes) => {
nodes && nodes.forEach((node) => {
let customtag = node.attr("data-tp-component");
componentList[customtag] ? getTp$ComponentFn(componentList[customtag], "parserFn")(node, customtag, editor) : "";
});
});
editor.serializer.addAttributeFilter("data-mce-tp-component", (nodes) => {
nodes && nodes.forEach((node) => {
let customtag = node.attr("data-mce-tp-component");
componentList[customtag] ? getTp$ComponentFn(componentList[customtag], "serializerFn")(node, customtag, editor) : " ";
});
});
editor.setContent(editor.getContent({ source_view: true }));
};
const setCustomTags = (customTag, setAttribute, setValue, editor, isAssign) => {
if (editor) {
!editor.tp$CustomTags && (editor.tp$CustomTags = JSON.parse(JSON.stringify(tp$Component.customTags)));
isAssign ? __assign(editor.tp$CustomTags[customTag][setAttribute], setValue) : editor.tp$CustomTags[customTag][setAttribute] = setValue;
} else {
isAssign ? __assign(tp$Component.customTags[customTag][setAttribute], setValue) : tp$Component.customTags[customTag][setAttribute] = setValue;
}
};
const createCustomTags = (customTag, init, editor) => {
if (editor) {
!editor.tp$CustomTags && (editor.tp$CustomTags = JSON.parse(JSON.stringify(tp$Component.customTags)));
editor.tp$CustomTags[customTag] = init;
} else {
tp$Component.customTags[customTag] = init;
}
};
const setStyleSheetList = (customTag, styleName, text, editor) => {
setCustomTags("buttons", "styleSheetList", { [styleName]: {
"tp-buttons": getStyleSheetClass("tp-buttons", text),
"tp-buttons:hover": getStyleSheetClass("tp-buttons:hover", text),
"tp-buttons::before": getStyleSheetClass("tp-buttons::before", text),
"tp-buttons::after": getStyleSheetClass("tp-buttons::after", text)
} }, editor, true);
};
const componentsApi = {
custom_elements: "",
setCustomTags,
createCustomTags,
setStyleSheetList,
createHtmlPanel
};
var tabs = {
name: "tabs",
styleSheet: {
selector: "default",
styleSheetList: {
default: {
"tp-tabs": ``,
"tp-tabs_top": ``,
"tp-tabs_label.checked": ` `,
"tp-tabs_main": ` `,
"tp-tab_main.checked": ` `
}
}
},
styleSheetLoadList: {},
styleFn: () => {
},
state: {
count: 0
},
tpComponentDeleteFn: function() {
console.log(this);
},
tpComponentMonitorCmd: () => {
},
tpComponentCmdFn: {
tabAdd: (_self, _props) => {
let partitionEditableWrapper = document.createElement("div");
partitionEditableWrapper.setAttribute("contenteditable", false);
partitionEditableWrapper.setAttribute("class", "tp-partition tp-tabs_label");
partitionEditableWrapper.setAttribute("data-idx", _self.tp$state.count);
let partitionEditableWrapperChlid = document.createElement("p");
partitionEditableWrapperChlid.setAttribute("class", "tp-component_inline");
partitionEditableWrapperChlid.setAttribute("data-idx", _self.tp$state.count);
partitionEditableWrapperChlid.setAttribute("contenteditable", true);
partitionEditableWrapperChlid.innerHTML = _props.title;
partitionEditableWrapper.appendChild(partitionEditableWrapperChlid);
_self.insertBefore(partitionEditableWrapper, _self.lastChild);
let partitionEditableMain = document.createElement("div");
partitionEditableMain.setAttribute("class", "tp-tab_main");
partitionEditableMain.setAttribute("style", "overflow: hidden; max-height: 0; transition: all 0s");
partitionEditableMain.innerHTML = _props.content;
_self.lastChild.appendChild(partitionEditableMain);
_self.tp$state.count++;
},
tabDelete: (_self, _props) => {
_self.children[--_self.tp$state.count].remove();
_self.lastChild.lastChild.remove();
},
delete: (_self, _props) => {
_self.remove();
},
getStyle: (_self, _props) => {
},
setStyle: (_self, _props) => {
console.log(_self.querySelector(".tp-tabs_top"));
_self.setAttribute("data-top-style", _props["tp-tabs_top"]);
_self.shadowRoot.querySelector(".tp-tabs_top").setAttribute("style", _props["tp-tabs_top"]);
}
},
template: {
innerHTML: `
<div class="tp-tabs">
<div class="tp-tabs_top" id="headerID">
<slot></slot>
</div>
<div class="tp-tabs_main">
<slot name="content" ></slot>
</div>
</div>
`
},
connectedCallback: (shadowRoot, dom) => {
let isChecked = (ele) => {
return ele.className && ele.className.indexOf("tp-partition tp-tabs_label") !== -1 || ele.parentNode && (ele.parentNode.className && ele.parentNode.className.indexOf("tp-partition tp-tabs_label") !== -1 || ele.parentNode.parentNode && ele.parentNode.parentNode.className && ele.parentNode.parentNode.className.indexOf("tp-partition tp-tabs_label") !== -1);
};
shadowRoot.getElementById("headerID").addEventListener("click", function(e) {
if (isChecked(e.target)) {
let _idex = e.target.getAttribute("data-idx") || e.target.parentNode.getAttribute("data-idx") || "0";
let _tabsToplist = dom.querySelectorAll("div.tp-partition.tp-tabs_label");
let oldSelectTopDom = dom.querySelector("div.tp-partition.tp-tabs_label.checked");
oldSelectTopDom ? oldSelectTopDom.setAttribute("class", "tp-partition tp-tabs_label") : "";
let newSelectTopDom = _tabsToplist[_idex];
newSelectTopDom ? newSelectTopDom.setAttribute("class", "tp-partition tp-tabs_label checked") : "";
let _tabslist = dom.querySelectorAll("div.tp-tab_main");
let oldSelectDom = dom.querySelector("div.tp-tab_main[contenteditable=true]");
oldSelectDom ? oldSelectDom.setAttribute("contenteditable", false) || (oldSelectDom.style.maxHeight = "0px") : "";
let newSelectDom = _tabslist[_idex];
newSelectDom ? newSelectDom.setAttribute("contenteditable", true) || (newSelectDom.style.maxHeight = "10000px") : "";
}
});
},
isContentEditable: true,
contentEditableFn: (_self, _isEditable, _customtag) => {
if (_self.lastChild && _self.lastChild.className === "tp-" + _customtag + "_main") {
const partitionEditableWrapper = document.createElement("div");
partitionEditableWrapper.setAttribute("contenteditable", false);
partitionEditableWrapper.setAttribute("class", "tp-partition tp-tabs_main");
partitionEditableWrapper.setAttribute("slot", "content");
if (_self.lastChild.firstChild) {
_self.lastChild.firstChild.setAttribute("class", "tp-tab_main");
_self.lastChild.firstChild.setAttribute("style", "overflow: hidden; max-height: 10000px; transition: all 0s");
_isEditable ? _self.lastChild.firstChild.setAttribute("contenteditable", true) : "";
partitionEditableWrapper.setAttribute("style", _self.lastChild.getAttribute("style"));
partitionEditableWrapper.appendChild(_self.lastChild.firstChild);
}
while (_self.lastChild.firstChild) {
_self.lastChild.firstChild.setAttribute("class", "tp-tab_main");
_self.lastChild.firstChild.setAttribute("style", "overflow: hidden; max-height: 0; transition: all 0s");
partitionEditableWrapper.appendChild(_self.lastChild.firstChild);
}
_self.removeChild(_self.lastChild);
_self.appendChild(partitionEditableWrapper);
}
},
isHeaderEditable: true,
headerEditableFn: (_self, _isEditable, _customtag) => {
let _len = _self.children.length;
_self.getAttribute("data-id");
_self.shadowRoot.querySelector("#headerID.tp-tabs_top").setAttribute("style", _self.getAttribute("data-top-style") ? _self.getAttribute("data-top-style") : "");
for (let i = _len - 2; i >= 0; i--) {
_self.tp$state.count++;
_self.children[i].setAttribute("contenteditable", false);
_self.children[i].setAttribute("class", "tp-partition tp-" + _customtag + "_label" + (i === 0 ? " checked" : ""));
_self.children[i].setAttribute("data-idx", i);
_self.children[i].firstChild.setAttribute("class", "tp-component_inline");
_self.children[i].firstChild.setAttribute("data-idx", i);
_isEditable ? _self.children[i].firstChild.setAttribute("contenteditable", true) : "";
}
},
parserFn: (node, customtag) => {
node.attr({
"data-tp-component": null,
"data-mce-tp-component": customtag,
"data-top-style": node.firstChild.attr("style")
});
while (node.firstChild.name === "input") {
node.firstChild.remove();
}
let _node = node.firstChild.firstChild;
while (_node && _node.name === "label") {
let _nextNode = _node.next;
let placeTop = new global$7("div", 1);
_node.name = "p";
_node.wrap(placeTop);
_node = _nextNode;
}
let tabMainFirst = node.lastChild.firstChild;
while (tabMainFirst && tabMainFirst.name === "label") {
let tabMainFirstNext = tabMainFirst.next.next;
tabMainFirst.remove();
tabMainFirst = tabMainFirstNext;
}
node.firstChild.unwrap();
node.type = 1;
node.name = "tp-" + customtag;
},
serializerFn: (node, customtag) => {
node.attr({
"data-mce-tp-component": null,
"data-tp-component": customtag,
"contenteditable": null,
"class": "tp-" + customtag
});
let placeTop = new global$7("div", 1);
placeTop.attr("class", "tp-tabs_top");
placeTop.attr("style", node.attr("data-top-style"));
node.attr("data-top-style", null);
let _node = node.firstChild;
let cloneNodeList = [];
while (_node.attr("data-idx")) {
let _nextNode = _node.next;
_node.firstChild.name = "label";
_node.firstChild.attr({
contenteditable: null,
"data-idx": null,
class: "tp-" + customtag + "_label",
for: node.attr("data-id") + "tab" + _node.attr("data-idx")
});
cloneNodeList.push(tp$Serialize(_node.firstChild));
placeTop.append(_node.firstChild);
_node.remove();
_node = _nextNode;
}
let _lastNode = node.lastChild.firstChild;
let _count = 0;
while (_lastNode && _lastNode.attr("class") === "tp-tab_main") {
let _nextNode = _lastNode.next;
let placeInput = new global$7("input", 1);
placeInput.shortEnded = true;
placeInput.attr({ id: node.attr("data-id") + "tab" + _count, type: "radio", name: node.attr("data-id") });
_count == 0 ? placeInput.attr("checked", "") : "";
node.append(placeInput);
_lastNode.attr({
contenteditable: null,
style: null,
class: "tp-tab_main tp-tab_main_" + _count
});
if (cloneNodeList[_count]) {
node.lastChild.insert(tp$DomParser(cloneNodeList[_count]), _lastNode, true);
_count++;
}
_lastNode = _nextNode;
}
node.append(placeTop);
node.firstChild.attr({
contenteditable: null,
class: "tp-tabs_main"
});
node.append(node.firstChild);
node.type = 1;
node.name = "div";
}
};
var buttons = {
name: "buttons",
template: {
innerHTML: `
<div class="tp-buttons">
<div class="tp-buttons_main">
<slot></slot>
</div>
</div>
`
},
styleSheetList: {
default: {
"tp-buttons": `
display: inline-block;
background: rgb(179, 70, 70);
padding: 14px 25px;
color: #333;
border-radius: 8px;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
border: 1px solid transparent;
box-sizing: border-box;
word-wrap: break-word;
cursor: pointer;
text-decoration: none;`,
"tp-buttons:hover": `
color: rgb(179, 70, 70) ;
background: transparent;
border-color: rgb(179, 70, 70) ;
`,
"tp-buttons::before": ` `,
"tp-buttons::after": ` `
}
},
isContentEditable: true,
connectedCallback: () => {
},
tpComponentCmdFn: {
upData: (_self, _props) => {
_self.shadowRoot.children[1].textContent = getButtonsStyle(_props.editor.tp$CustomTags.buttons.styleSheetList[_props.styleName], _props.styleName).replace(/\[data-tp-style=(.*?)\]/g, "").replace(/>/g, " ").replace(/.tp-buttons\s*\{/g, ":host {").replace(/.tp-buttons:hover\s*\{/g, ":host(:hover) {").replace(/.tp-buttons::before\s*\{/g, ":host(::before) {").replace(/.tp-buttons::after\s*\{/g, ":host(::after) {");
}
},
contentEditableFn: (_self, _isEditable, _customtag, editor) => {
if (_self.firstChild && _self.firstChild.tagName === "A") {
const Wrapper = document.createElement("p");
Wrapper.setAttribute("contenteditable", true);
Wrapper.setAttribute("class", "tp-component_inline");
_self.firstChild.innerHTML = "<span>" + _self.firstChild.innerHTML + "</span>";
_self.firstChild.setAttribute("href", "javascript:;");
Wrapper.appendChild(_self.firstChild);
_self.appendChild(Wrapper);
}
},
isHeaderEditable: true,
parserFn: (node, customtag, editor) => {
node.attr({
"data-tp-component": null
});
let _text = node.attr("style");
let placeDivStyle = {};
let _tem = "";
_tem = tp$getStyleValue("margin", _text);
_tem && (placeDivStyle.margin = _tem);
_tem = tp$getStyleValue("padding", _text);
_tem && (placeDivStyle.padding = _tem);
_tem = tp$getStyleValue("border", _text);
_tem && (placeDivStyle.border = _tem);
_tem = tp$getStyleValue("background", _text);
_tem && (placeDivStyle["background"] = _tem);
_tem = tp$getStyleValue("border-radius", _text);
_tem && (placeDivStyle["border-radius"] = _tem);
_tem = tp$getStyleValue("border-width", _text);
_tem && (placeDivStyle["border-width"] = _tem);
_tem = tp$getStyleValue("border-style", _text);
_tem && (placeDivStyle["border-style"] = _tem);
_tem = tp$getStyleValue("border-color", _text);
_tem && (placeDivStyle["border-color"] = _tem);
let placeDiv = new global$7("div", 1);
placeDiv.type = 1;
placeDiv.attr({
"data-mce-tp-component": customtag,
"data-tp-style": node.attr("data-tp-style") || "default",
"style": getFormatStyle(placeDivStyle) || null,
"data-id": node.attr("data-id")
});
node.attr("class") && placeDiv.attr("class", node.attr("class"));
!editor.tp$Style.mapping ? editor.tp$Style.mapping = {} : "";
!editor.tp$Style.mapping["" + node.attr("data-id")] ? editor.tp$Style.mapping["" + node.attr("data-id")] = {
styleCustomTags: "buttons",
stylePath: "styleSheetList",
styleTemplate: node.attr("data-tp-style") || "default",
specialStyle: {}
} : __assign(editor.tp$Style.mapping["" + node.attr("data-id")], { styleTemplate: node.attr("data-tp-style") || "default" });
node.attr("style", getFormatStyle(__assign(getObjStyle(node.attr("style")) || {}, { margin: "", padding: "", background: "", "border-style": "", "border-color": "", "border-width": "", "border-radius": "", border: "" })) || null);
node.attr("data-id", null);
node.attr("data-mce-style", null);
node.wrap(placeDiv);
placeDiv.name = "tp-" + customtag;
},
serializerFn: (node, customtag) => {
let ATags = node;
while (ATags.name !== "a" && ATags.firstChild.name !== "#text") {
ATags = ATags.firstChild;
}
node.attr({
"data-mce-tp-component": null,
"data-tp-component": customtag,
"contenteditable": null,
"data-tp-style": node.attr("data-tp-style") || "default",
"href": ATags && ATags.attr("href") ? ATags.attr("href") : null,
"style": ATags && ATags.attr("style") ? getFormatStyle(__assign(getObjStyle(node.attr("style")) || {}, getObjStyle(ATags.attr("style")) || {})) : node.attr("style"),
"target": ATags && ATags.attr("target") ? ATags.attr("target") : null,
"rel": ATags && ATags.attr("rel") ? ATags.attr("rel") : null,
"title": ATags && ATags.attr("title") ? ATags.attr("title") : null
});
node.firstChild.unwrap();
ATags && ATags.unwrap();
node.name = "a";
}
};
var collapse = {
name: "collapse",
template: {
innerHTML: `
<div class="tp-collapse">
<div class="header" id="headerID">
<slot name="header"></slot>
</div>
<div class="tp-collapse_mainBox">
<slot></slot>
</div>
</div>
`
},
isContentEditable: true,
connectedCallback: () => {
},
tpComponentCmdFn: {
upData: (_self, _props) => {
let _style = _props.style;
let padding_style = tp$getStyleValue("padding", _style);
let border_style = tp$getStyleValue("border", _style);
let borderWidth_style = tp$getStyleValue("border-width", _style);
tp$SetSpecialStyle(_props.editor, _self, "tp-collapse_main", (padding_style ? "padding: " + padding_style + "!important; " : "") + (border_style ? "border: " + border_style + "!important;" : "") + (borderWidth_style ? "border-width: " + borderWidth_style + "!important;" : ""));
}
},
contentEditableFn: (_self, _isEditable, _customtag, editor) => {
const partitionEditableWrapper = document.createElement("div");
partitionEditableWrapper.setAttribute("contenteditable", false);
partitionEditableWrapper.setAttribute("class", "tp-partition tp-collapse_main");
_isEditable ? _self.lastChild.setAttribute("contenteditable", true) : "";
if (_self.lastChild.getAttribute("class") === "tp-collapse_main") {
let _style = _self.lastChild.getAttribute("style");
let padding_style = tp$getStyleValue("padding", _style);
let border_style = tp$getStyleValue("border", _style);
let borderWidth_style = tp$getStyleValue("border-width", _style);
tp$SetSpecialStyle(editor, _self, "tp-collapse_main", (padding_style ? "padding: " + padding_style + "!important; " : "") + (border_style ? "border: " + border_style + "!important;" : "") + (borderWidth_style ? "border-width: " + borderWidth_style + "!important;" : ""));
}
partitionEditableWrapper.appendChild(_self.lastChild);
_self.appendChild(partitionEditableWrapper);
},
isHeaderEditable: true,
headerEditableFn: (_self, _isEditable, _customtag, editor) => {
if (_self.firstChild.contenteditable !== "true") {
const headerWrapper = document.createElement("div");
_isEditable ? headerWrapper.setAttribute("contenteditable", true) : "";
headerWrapper.setAttribute("slot", "header");
headerWrapper.setAttribute("class", "tp-collapse_label");
headerWrapper.setAttribute("style", "min-height: 20px; " + _self.getAttribute("data-top-style"));
while (_self.firstChild && _self.firstChild.className !== "tp-" + _customtag + "_main") {
headerWrapper.appendChild(_self.firstChild);
}
_self.insertBefore(headerWrapper, _self.firstChild);
}
},
parserFn: (node, customtag) => {
node.attr({
"data-tp-component": null,
"data-mce-tp-component": customtag
});
node.attr("data-id", node.firstChild.attr("id"));
node.firstChild.remove();
node.lastChild.attr("class", "tp-" + customtag + "_main");
node.type = 1;
node.name = "tp-" + customtag;
},
serializerFn: (node, customtag) => {
node.attr({
"data-mce-tp-component": null,
"data-tp-component": customtag,
"contenteditable": nul