From bdab754207338ef0dfead20ba7574b24e15d02d3 Mon Sep 17 00:00:00 2001 From: Julien Blatecky Date: Mon, 21 Aug 2023 12:03:21 +0200 Subject: [PATCH 01/13] feat(editor): handle multiple nested RichEditors --- assets/js/app.js | 29 ++++++++++--- src/Resources/public/css/rich-editor-css.css | 2 +- src/Resources/public/js/rich-editor-js.js | 4 +- src/Resources/views/Admin/app.html.twig | 45 ++++++++++++++------ 4 files changed, 59 insertions(+), 21 deletions(-) diff --git a/assets/js/app.js b/assets/js/app.js index 1d93bf92..ce6d074e 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -63,6 +63,8 @@ global.MonsieurBizRichEditorConfig = class { actionsHtml, elementHtml, elementCardHtml, + panelsHtml, + panelsEditHtml, deletionConfirmation, createElementFormUrl, editElementFormUrl, @@ -79,6 +81,8 @@ global.MonsieurBizRichEditorConfig = class { this.actionsHtml = actionsHtml; this.elementHtml = elementHtml; this.elementCardHtml = elementCardHtml; + this.panelsHtml = panelsHtml; + this.panelsEditHtml = panelsEditHtml; this.deletionConfirmation = deletionConfirmation; this.createElementFormUrl = createElementFormUrl; this.editElementFormUrl = editElementFormUrl; @@ -87,6 +91,7 @@ global.MonsieurBizRichEditorConfig = class { this.defaultUIElementDataField = defaultUIElementDataField; this.errorMessage = errorMessage; this.unallowedUiElementMessage = unallowedUiElementMessage; + this.uid = Math.random().toString(36).substring(2, 11); } findUiElementByCode(code) { @@ -166,6 +171,8 @@ global.MonsieurBizRichEditorManager = class { * */ constructor(config) { + config.input.setAttribute('data-rich-editor-uid', config.uid); + this.config = config; let inputValue = this.input.value.trim(); @@ -246,16 +253,26 @@ global.MonsieurBizRichEditorManager = class { } initUiPanelsInterface() { - this.selectionPanel = new Dialog('.js-uie-panels', { - labelledby: 'uie-heading', + let panelsWrapper = document.createElement('div'); + panelsWrapper.innerHTML = Mustache.render(this.config.panelsHtml, { uid: this.config.uid }); + document.body.appendChild(panelsWrapper.firstElementChild); + + let panelsEditWrapper = document.createElement('div'); + panelsEditWrapper.innerHTML = Mustache.render(this.config.panelsEditHtml, { + uid: this.config.uid, + }); + document.body.appendChild(panelsEditWrapper.firstElementChild); + + this.selectionPanel = new Dialog('.js-uie-panels-' + this.config.uid, { + labelledby: 'uie-heading-' + this.config.uid, enableAutoFocus: false, - closingSelector: '.js-uie-panels-close', + closingSelector: '.js-uie-panels-close-' + this.config.uid, }); - this.newPanel = new Dialog('.js-uie-panels-new', { - helperSelector: '.js-uie-panels-selector', + this.newPanel = new Dialog('.js-uie-panels-new-' + this.config.uid, { + helperSelector: '.js-uie-panels-selector-' + this.config.uid, enableAutoFocus: false, }); - this.editPanel = new Dialog('.js-uie-panels-edit', { + this.editPanel = new Dialog('.js-uie-panels-edit-' + this.config.uid, { enableAutoFocus: false, }); } diff --git a/src/Resources/public/css/rich-editor-css.css b/src/Resources/public/css/rich-editor-css.css index ea06da9e..7080841c 100644 --- a/src/Resources/public/css/rich-editor-css.css +++ b/src/Resources/public/css/rich-editor-css.css @@ -1 +1 @@ -html.is-disabled body{overflow:hidden}.pell{box-shadow:0 2px 4px 0 rgba(34,36,38,.03);border:1px solid rgba(34,36,38,.1);border-radius:.28571429rem}.pell,.pell-content{box-sizing:border-box}.pell-content{height:300px;outline:0;overflow-y:auto;padding:10px}.pell-content p,.pell-content span{font-size:unset!important;line-height:unset!important}.pell-actionbar{background-color:#fff;border-bottom:1px solid rgba(10,10,10,.1)}.pell-button{background-color:transparent;border:none;cursor:pointer;height:30px;outline:0;width:30px;vertical-align:bottom}.pell-button-selected{background-color:#f0f0f0}.uie-panels{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;display:none;padding:.714rem 0 .714rem 5%;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none}.uie-panels:before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background-color:rgba(0,0,0,.85);content:""}.uie-panels[aria-hidden=false]{display:block}.uie-panels[aria-hidden=false]:before{-webkit-animation:fadeOut .2s ease-out;animation:fadeOut .2s ease-out}.uie-panels__content{position:relative;display:flex;flex-direction:column;width:100%;height:100%;padding:1.714rem;background:#fff;border:1px solid rgba(34,36,38,.15);border-right-width:0;border-radius:.286rem 0 0 .286rem;box-shadow:1px 3px 3px 0 rgba(0,0,0,.2),1px 3px 15px 2px rgba(0,0,0,.2)}[aria-hidden=false] .uie-panels__content{-webkit-animation:slideFromRight .3s ease-out;animation:slideFromRight .3s ease-out}.uie-panels__new{position:absolute;top:1.143rem;right:0;bottom:1.143rem;left:3.143rem;z-index:10;display:none;flex-direction:column;padding:1.714rem;overflow:hidden;background:#fff;border:1px solid rgba(34,36,38,.15);border-right-width:0;border-radius:.286rem 0 0 .286rem;box-shadow:0 1px 2px 0 rgba(34,36,38,.15)}.uie-panels__new[aria-hidden=false]{display:flex}.uie-panels__new[aria-hidden=false]>*{-webkit-animation:appear .4s ease-out;animation:appear .4s ease-out}.uie-panels__inner{height:100%;overflow-x:hidden;overflow-y:auto}@-webkit-keyframes fadeOut{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:0}to{opacity:1}}@-webkit-keyframes slideFromRight{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slideFromRight{0%{transform:translateX(100%)}to{transform:translateX(0)}}@-webkit-keyframes appear{0%{opacity:0;transform:translateX(1rem)}to{opacity:1;transform:translateY(0)}}@keyframes appear{0%{opacity:0;transform:translateX(1rem)}to{opacity:1;transform:translateY(0)}}.uie-cards{max-height:100%;overflow-x:hidden;overflow-y:auto;transition:opacity .1s ease-out}.is-active .uie-cards{opacity:0;pointer-events:none}.uie-card{min-height:6rem!important;cursor:pointer}.uie-card .content{padding-top:1.5rem!important}.is-active .uie-heading{transform:rotate(90deg) translateY(-.6rem) scale(.7);transform-origin:left top 0}.uie-flex{display:flex!important}.uie-flex-cross-center{align-items:center!important}.uie-flex-main-between{justify-content:space-between!important}.uie-w-full{width:100%!important}.uie-m-0{margin:0!important}.uie-mb-sm{margin-bottom:1rem!important}.uie-mb-md{margin-bottom:2rem!important}.uie-ml-md{margin-left:2rem!important}@media (max-width:700px){.sm\:uie-flex-column{flex-direction:column!important}.sm\:uie-mt-xs{margin-top:1rem!important}} \ No newline at end of file +html.is-disabled body{overflow:hidden}.pell{box-shadow:0 2px 4px 0 rgba(34,36,38,.03);border:1px solid rgba(34,36,38,.1);border-radius:.28571429rem}.pell,.pell-content{box-sizing:border-box}.pell-content{height:300px;outline:0;overflow-y:auto;padding:10px}.pell-content p,.pell-content span{font-size:unset!important;line-height:unset!important}.pell-actionbar{background-color:#fff;border-bottom:1px solid rgba(10,10,10,.1)}.pell-button{background-color:transparent;border:none;cursor:pointer;height:30px;outline:0;width:30px;vertical-align:bottom}.pell-button-selected{background-color:#f0f0f0}.uie-panels{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;display:none;padding:.714rem 0 .714rem 5%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.uie-panels:before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background-color:rgba(0,0,0,.85);content:""}.uie-panels[aria-hidden=false]{display:block}.uie-panels[aria-hidden=false]:before{animation:fadeOut .2s ease-out}.uie-panels__content{position:relative;display:flex;flex-direction:column;width:100%;height:100%;padding:1.714rem;background:#fff;border:1px solid rgba(34,36,38,.15);border-right-width:0;border-radius:.286rem 0 0 .286rem;box-shadow:1px 3px 3px 0 rgba(0,0,0,.2),1px 3px 15px 2px rgba(0,0,0,.2)}[aria-hidden=false] .uie-panels__content{animation:slideFromRight .3s ease-out}.uie-panels__new{position:absolute;top:1.143rem;right:0;bottom:1.143rem;left:3.143rem;z-index:10;display:none;flex-direction:column;padding:1.714rem;overflow:hidden;background:#fff;border:1px solid rgba(34,36,38,.15);border-right-width:0;border-radius:.286rem 0 0 .286rem;box-shadow:0 1px 2px 0 rgba(34,36,38,.15)}.uie-panels__new[aria-hidden=false]{display:flex}.uie-panels__new[aria-hidden=false]>*{animation:appear .4s ease-out}.uie-panels__inner{height:100%;overflow-x:hidden;overflow-y:auto}@keyframes fadeOut{0%{opacity:0}to{opacity:1}}@keyframes slideFromRight{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes appear{0%{opacity:0;transform:translateX(1rem)}to{opacity:1;transform:translateY(0)}}.uie-cards{max-height:100%;overflow-x:hidden;overflow-y:auto;transition:opacity .1s ease-out}.is-active .uie-cards{opacity:0;pointer-events:none}.uie-card{min-height:6rem!important;cursor:pointer}.uie-card .content{padding-top:1.5rem!important}.is-active .uie-heading{transform:rotate(90deg) translateY(-.6rem) scale(.7);transform-origin:left top 0}.uie-flex{display:flex!important}.uie-flex-cross-center{align-items:center!important}.uie-flex-main-between{justify-content:space-between!important}.uie-w-full{width:100%!important}.uie-m-0{margin:0!important}.uie-mb-sm{margin-bottom:1rem!important}.uie-mb-md{margin-bottom:2rem!important}.uie-ml-md{margin-left:2rem!important}@media (max-width:700px){.sm\:uie-flex-column{flex-direction:column!important}.sm\:uie-mt-xs{margin-top:1rem!important}} \ No newline at end of file diff --git a/src/Resources/public/js/rich-editor-js.js b/src/Resources/public/js/rich-editor-js.js index 37a09130..a5cfc99b 100644 --- a/src/Resources/public/js/rich-editor-js.js +++ b/src/Resources/public/js/rich-editor-js.js @@ -1,5 +1,5 @@ -!function(e){var t={};function i(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.m=e,i.c=t,i.d=function(e,t,n){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)i.d(n,r,function(t){return e[t]}.bind(null,r));return n},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/public/",i(i.s="ng4s")}({"2mad":function(e,t){var i;i=function(){return this}();try{i=i||new Function("return this")()}catch(e){"object"==typeof window&&(i=window)}e.exports=i},P50k:function(e,t,i){!function(e){"use strict";var t=Object.assign||function(e){for(var t=1;tB",title:"Bold",state:function(){return a("bold")},result:function(){return l("bold")}},italic:{icon:"I",title:"Italic",state:function(){return a("italic")},result:function(){return l("italic")}},underline:{icon:"U",title:"Underline",state:function(){return a("underline")},result:function(){return l("underline")}},strikethrough:{icon:"S",title:"Strike-through",state:function(){return a("strikeThrough")},result:function(){return l("strikeThrough")}},heading1:{icon:"H1",title:"Heading 1",result:function(){return l(n,"

")}},heading2:{icon:"H2",title:"Heading 2",result:function(){return l(n,"

")}},paragraph:{icon:"¶",title:"Paragraph",result:function(){return l(n,"

")}},quote:{icon:"“ ”",title:"Quote",result:function(){return l(n,"

")}},olist:{icon:"#",title:"Ordered List",result:function(){return l("insertOrderedList")}},ulist:{icon:"•",title:"Unordered List",result:function(){return l("insertUnorderedList")}},code:{icon:"</>",title:"Code",result:function(){return l(n,"
")}},line:{icon:"―",title:"Horizontal Line",result:function(){return l("insertHorizontalRule")}},link:{icon:"🔗",title:"Link",result:function(){var e=window.prompt("Enter the link URL");e&&l("createLink",e)}},image:{icon:"📷",title:"Image",result:function(){var e=window.prompt("Enter the image URL");e&&l("insertImage",e)}}},u={actionbar:"pell-actionbar",button:"pell-button",content:"pell-content",selected:"pell-button-selected"},d=function(e){var a=e.actions?e.actions.map((function(e){return"string"==typeof e?c[e]:c[e.name]?t({},c[e.name],e):e})):Object.keys(c).map((function(e){return c[e]})),d=t({},u,e.classes),h=e[i]||"div",f=o("div");f.className=d.actionbar,s(e.element,f);var p=e.element.content=o("div");return p.contentEditable=!0,p.className=d.content,p.oninput=function(t){var i=t.target.firstChild;i&&3===i.nodeType?l(n,"<"+h+">"):"
"===p.innerHTML&&(p.innerHTML=""),e.onChange(p.innerHTML)},p.onkeydown=function(e){"Enter"===e.key&&"blockquote"===document.queryCommandValue("formatBlock")&&setTimeout((function(){return l(n,"<"+h+">")}),0)},s(e.element,p),a.forEach((function(e){var t=o("button");if(t.className=d.button,t.innerHTML=e.icon,t.title=e.title,t.setAttribute("type","button"),t.onclick=function(){return e.result()&&p.focus()},e.state){var i=function(){return t.classList[e.state()?"add":"remove"](d.selected)};r(p,"keyup",i),r(p,"mouseup",i),r(t,"click",i)}s(f,t)})),e.styleWithCSS&&l("styleWithCSS"),l(i,h),e.element},h={exec:l,init:d};e.exec=l,e.init=d,e.default=h,Object.defineProperty(e,"__esModule",{value:!0})}(t)},W4wD:function(e,t,i){e.exports=function(){"use strict";
+!function(e){var t={};function i(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.m=e,i.c=t,i.d=function(e,t,n){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)i.d(n,r,function(t){return e[t]}.bind(null,r));return n},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/public/",i(i.s="ng4s")}({"/HGo":function(e,t,i){"use strict";var n={documentSelector:".js-document",documentDisabledClass:"is-disabled",openingTriggerActiveClass:"is-active",delay:200},r=['[href]:not([tabindex^="-"])','input:not([disabled]):not([type="hidden"]):not([tabindex^="-"]):not([type="radio"])','input[type="radio"]:checked','select:not([disabled]):not([tabindex^="-"])','textarea:not([disabled]):not([tabindex^="-"])','button:not([disabled]):not([tabindex^="-"])','[tabindex]:not([tabindex^="-"])','[contenteditable="true"]:not([tabindex^="-"])'],s="Escape",o="Tab",a="F6";function l(e,t){let i=e;for(;i!==t&&i;)i=i.parentNode;return!!i}const c=Symbol("onClick"),u=Symbol("onKeydown"),d=Symbol("addEventDelegation"),h=Symbol("addEventListeners"),f=Symbol("removeEventListeners"),p=Symbol("addAttributes"),m=Symbol("removeAttributes"),g=Symbol("setAttributes"),v=Symbol("setFocusableElements"),y=Symbol("setFocus"),b=Symbol("restoreFocus"),E=Symbol("switchFocus"),w=Symbol("maintainFocus"),S=Symbol("addObserver"),k=Symbol("removeObserver");let C=n;t.a=class{constructor(e,{onOpen:t=(()=>{}),onClose:i=(()=>{}),openingSelector:n,closingSelector:r,backdropSelector:s,helperSelector:o,labelledby:a,describedby:l,isModal:h=!0,isTooltip:f=!1,isOpen:p=!1,isCreated:m=!0,disableScroll:g=!0,enableAutoFocus:y=!0,openingTriggerActiveClass:b=C.openingTriggerActiveClass,delay:w=C.delay}={}){document.querySelector(e)?(this.config={dialogSelector:e,onOpen:t,onClose:i,openingSelector:n,closingSelector:r,backdropSelector:s,helperSelector:o,labelledby:a,describedby:l,isModal:h,isTooltip:f,isCreated:m,isOpen:p,disableScroll:g,enableAutoFocus:y,documentSelector:C.documentSelector,documentDisabledClass:C.documentDisabledClass,openingTriggerActiveClass:b,delay:w},this.dialog=document.querySelector(e),this.dialogArea=`${e}, ${n}`,this.openingTriggers=document.querySelectorAll(n),this.backdropTrigger=document.querySelector(s),this.helpers=document.querySelectorAll(o),this.document=document.querySelector(this.config.documentSelector)||document.querySelector("html"),this.documentIsAlreadyDisabled=!1,this.focusableElements=[],this.firstFocusableElement=null,this.lastFocusableElement=null,this.openingTrigger=null,this.closingTrigger=null,this.isCreated=!1,this.isOpen=!1,this.close=this.close.bind(this),this.toggle=this.toggle.bind(this),this[c]=this[c].bind(this),this[u]=this[u].bind(this),this[d]=this[d].bind(this),this[E]=this[E].bind(this),this.observer=new MutationObserver(e=>e.forEach(()=>this[v]())),this.isInitialized=!0,m&&this.create()):this.isInitialized=!1}[c](e){this.config.isTooltip&&!e.target.closest(this.dialogArea)&&this.close(e),e.target===this.backdropTrigger&&this.close(e)}[u](e){switch(e.key){case s:e.stopPropagation(),this.close(e);break;case a:this.config.isModal||(this.config.isTooltip?this.close(e):this[b]());break;case o:this[w](e)}}[d](e){document.querySelectorAll(this.config.openingSelector).forEach(t=>{l(e.target,t)&&(this.openingTrigger=t,this.toggle(e))}),document.querySelectorAll(this.config.closingSelector).forEach(t=>{l(e.target,t)&&(this.closingTrigger=t,this.close())})}[h](){document.addEventListener("click",this[c],{capture:!0}),this.dialog.addEventListener("keydown",this[u])}[f](){document.removeEventListener("click",this[c],{capture:!0}),this.dialog.removeEventListener("keydown",this[u]),this.openingTrigger&&this.openingTrigger.removeEventListener("keydown",this[E])}[p](){this.dialog.setAttribute("role","dialog"),this.dialog.setAttribute("tabindex",-1),this.dialog.setAttribute("aria-hidden",!0),this.config.labelledby&&this.dialog.setAttribute("aria-labelledby",this.config.labelledby),this.config.describedby&&this.dialog.setAttribute("aria-describedby",this.config.describedby),this.config.isModal&&this.dialog.setAttribute("aria-modal",!0),this.openingTriggers.forEach(e=>e.setAttribute("aria-haspopup","dialog"))}[m](){this.dialog.removeAttribute("role"),this.dialog.removeAttribute("tabindex"),this.dialog.removeAttribute("aria-hidden"),this.dialog.removeAttribute("aria-labelledby"),this.dialog.removeAttribute("aria-describedby"),this.dialog.removeAttribute("aria-modal"),this.config.disableScroll&&this.isOpen&&!this.documentIsAlreadyDisabled&&this.document.classList.remove(this.config.documentDisabledClass),this.openingTriggers.forEach(e=>e.removeAttribute("aria-haspopup")),this.openingTrigger&&this.openingTrigger.classList.remove(this.config.openingTriggerActiveClass),this.helpers.forEach(e=>e.classList.remove(this.config.openingTriggerActiveClass))}[g](){this.dialog.setAttribute("aria-hidden",!this.isOpen),this.config.disableScroll&&!this.documentIsAlreadyDisabled&&(this.isOpen?this.document.classList.add(this.config.documentDisabledClass):this.document.classList.remove(this.config.documentDisabledClass)),this.openingTrigger&&(this.isOpen?this.openingTrigger.classList.add(this.config.openingTriggerActiveClass):this.openingTrigger.classList.remove(this.config.openingTriggerActiveClass)),this.helpers.forEach(e=>{this.isOpen?e.classList.add(this.config.openingTriggerActiveClass):e.classList.remove(this.config.openingTriggerActiveClass)})}[v](){const e=function(e){const t=[];return e.forEach(e=>{const i=e.getBoundingClientRect();(i.width>0||i.height>0)&&t.push(e)}),t}(this.dialog.querySelectorAll(r)),t=function(e,t,i){const n=e.querySelectorAll(t),r=[];let s=!1;return 0===n.length?i:(i.forEach(e=>{n.forEach(t=>{t.contains(e)&&(s=!0)}),s||r.push(e),s=!1}),r)}(this.dialog,'[role="dialog"]',e);this.focusableElements=t.length>0?t:[this.dialog],[this.firstFocusableElement]=this.focusableElements,this.lastFocusableElement=this.focusableElements[this.focusableElements.length-1]}[y](){this.config.enableAutoFocus&&window.setTimeout(()=>this.firstFocusableElement.focus(),this.config.delay)}[b](){this.config.enableAutoFocus&&window.setTimeout(()=>this.openingTrigger.focus(),this.config.delay),this.isOpen&&this.openingTrigger.addEventListener("keydown",this[E])}[E](e){e.key===a&&(this.openingTrigger.removeEventListener("keydown",this[E]),this[y]())}[w](e){e.shiftKey&&e.target===this.firstFocusableElement&&(e.preventDefault(),this.lastFocusableElement.focus()),e.shiftKey||e.target!==this.lastFocusableElement||(e.preventDefault(),this.firstFocusableElement.focus())}[S](){this.observer.observe(this.dialog,{childList:!0,attributes:!0,subtree:!0})}[k](){this.observer.disconnect()}open(){this.isInitialized&&this.isCreated&&!this.isOpen&&(this.isOpen=!0,this.documentIsAlreadyDisabled=this.document.classList.contains(this.config.documentDisabledClass),this[g](),this[h](),this[y](),this.config.onOpen(this.dialog,this.openingTrigger))}close(e){this.isInitialized&&this.isCreated&&this.isOpen&&(this.isOpen=!1,e&&e.preventDefault(),this[g](),this[f](),this.openingTrigger&&(!this.config.isTooltip||this.config.isTooltip&&e&&"click"!==e.type)&&this[b](),this.config.onClose(this.dialog,this.closingTrigger))}toggle(e){this.isInitialized&&this.isCreated&&(e&&e.preventDefault(),this.isOpen?this.close():this.open())}create(){this.isInitialized&&!this.isCreated&&(this.isCreated=!0,this[p](),this[v](),this[S](),this.config.isOpen&&this.open(),document.addEventListener("click",this[d],{capture:!0}))}destroy(){this.isInitialized&&this.isCreated&&(this.close(),this.isCreated=!1,this[m](),this[f](),this[k](),document.removeEventListener("click",this[d],{capture:!0}))}}},"1f8Y":function(e,t,i){!function(e){"use strict";var t=Object.assign||function(e){for(var t=1;tB",title:"Bold",state:function(){return a("bold")},result:function(){return l("bold")}},italic:{icon:"I",title:"Italic",state:function(){return a("italic")},result:function(){return l("italic")}},underline:{icon:"U",title:"Underline",state:function(){return a("underline")},result:function(){return l("underline")}},strikethrough:{icon:"S",title:"Strike-through",state:function(){return a("strikeThrough")},result:function(){return l("strikeThrough")}},heading1:{icon:"H1",title:"Heading 1",result:function(){return l(n,"
")}},heading2:{icon:"H2",title:"Heading 2",result:function(){return l(n,"
")}},paragraph:{icon:"¶",title:"Paragraph",result:function(){return l(n,"
")}},quote:{icon:"“ ”",title:"Quote",result:function(){return l(n,"
")}},olist:{icon:"#",title:"Ordered List",result:function(){return l("insertOrderedList")}},ulist:{icon:"•",title:"Unordered List",result:function(){return l("insertUnorderedList")}},code:{icon:"</>",title:"Code",result:function(){return l(n,"
")}},line:{icon:"―",title:"Horizontal Line",result:function(){return l("insertHorizontalRule")}},link:{icon:"🔗",title:"Link",result:function(){var e=window.prompt("Enter the link URL");e&&l("createLink",e)}},image:{icon:"📷",title:"Image",result:function(){var e=window.prompt("Enter the image URL");e&&l("insertImage",e)}}},u={actionbar:"pell-actionbar",button:"pell-button",content:"pell-content",selected:"pell-button-selected"},d=function(e){var a=e.actions?e.actions.map((function(e){return"string"==typeof e?c[e]:c[e.name]?t({},c[e.name],e):e})):Object.keys(c).map((function(e){return c[e]})),d=t({},u,e.classes),h=e[i]||"div",f=o("div");f.className=d.actionbar,s(e.element,f);var p=e.element.content=o("div");return p.contentEditable=!0,p.className=d.content,p.oninput=function(t){var i=t.target.firstChild;i&&3===i.nodeType?l(n,"<"+h+">"):"
"===p.innerHTML&&(p.innerHTML=""),e.onChange(p.innerHTML)},p.onkeydown=function(e){"Enter"===e.key&&"blockquote"===document.queryCommandValue("formatBlock")&&setTimeout((function(){return l(n,"<"+h+">")}),0)},s(e.element,p),a.forEach((function(e){var t=o("button");if(t.className=d.button,t.innerHTML=e.icon,t.title=e.title,t.setAttribute("type","button"),t.onclick=function(){return e.result()&&p.focus()},e.state){var i=function(){return t.classList[e.state()?"add":"remove"](d.selected)};r(p,"keyup",i),r(p,"mouseup",i),r(t,"click",i)}s(f,t)})),e.styleWithCSS&&l("styleWithCSS"),l(i,h),e.element},h={exec:l,init:d};e.exec=l,e.init=d,e.default=h,Object.defineProperty(e,"__esModule",{value:!0})}(t)},nbsC:function(e,t,i){e.exports=function(){"use strict";
 /*!
    * mustache.js - Logic-less {{mustache}} templates with JavaScript
    * http://github.com/janl/mustache.js
-   */var e=Object.prototype.toString,t=Array.isArray||function(t){return"[object Array]"===e.call(t)};function i(e){return"function"==typeof e}function n(e){return e.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&")}function r(e,t){return null!=e&&"object"==typeof e&&t in e}var s=RegExp.prototype.test,o=/\S/;function a(e){return!function(e,t){return s.call(e,t)}(o,e)}var l={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/","`":"`","=":"="},c=/\s*/,u=/\s+/,d=/\s*=/,h=/\s*\}/,f=/#|\^|\/|>|\{|&|=|!/;function p(e){this.string=e,this.tail=e,this.pos=0}function m(e,t){this.view=e,this.cache={".":this.view},this.parent=t}function g(){this.templateCache={_cache:{},set:function(e,t){this._cache[e]=t},get:function(e){return this._cache[e]},clear:function(){this._cache={}}}}p.prototype.eos=function(){return""===this.tail},p.prototype.scan=function(e){var t=this.tail.match(e);if(!t||0!==t.index)return"";var i=t[0];return this.tail=this.tail.substring(i.length),this.pos+=i.length,i},p.prototype.scanUntil=function(e){var t,i=this.tail.search(e);switch(i){case-1:t=this.tail,this.tail="";break;case 0:t="";break;default:t=this.tail.substring(0,i),this.tail=this.tail.substring(i)}return this.pos+=t.length,t},m.prototype.push=function(e){return new m(e,this)},m.prototype.lookup=function(e){var t,n,s,o=this.cache;if(o.hasOwnProperty(e))t=o[e];else{for(var a,l,c,u=this,d=!1;u;){if(e.indexOf(".")>0)for(a=u.view,l=e.split("."),c=0;null!=a&&c0?r[r.length-1][4]:i;break;default:n.push(t)}return i}(function(e){for(var t,i,n=[],r=0,s=e.length;r"===o?a=this.renderPartial(s,t,i,r):"&"===o?a=this.unescapedValue(s,t):"name"===o?a=this.escapedValue(s,t):"text"===o&&(a=this.rawValue(s)),void 0!==a&&(l+=a);return l},g.prototype.renderSection=function(e,n,r,s){var o=this,a="",l=n.lookup(e[1]);if(l){if(t(l))for(var c=0,u=l.length;c0||!i)&&(r[s]=n+r[s]);return r.join("\n")},g.prototype.renderPartial=function(e,t,n,r){if(n){var s=i(n)?n(e[1]):n[e[1]];if(null!=s){var o=e[6],a=e[5],l=e[4],c=s;return 0==a&&l&&(c=this.indentPartial(s,l,o)),this.renderTokens(this.parse(c,r),t,n,c,r)}}},g.prototype.unescapedValue=function(e,t){var i=t.lookup(e[1]);if(null!=i)return i},g.prototype.escapedValue=function(e,t){var i=t.lookup(e[1]);if(null!=i)return v.escape(i)},g.prototype.rawValue=function(e){return e[1]};var v={name:"mustache.js",version:"4.0.1",tags:["{{","}}"],clearCache:void 0,escape:void 0,parse:void 0,render:void 0,Scanner:void 0,Context:void 0,Writer:void 0,set templateCache(e){y.templateCache=e},get templateCache(){return y.templateCache}},y=new g;return v.clearCache=function(){return y.clearCache()},v.parse=function(e,t){return y.parse(e,t)},v.render=function(e,i,n,r){if("string"!=typeof e)throw new TypeError('Invalid template! Template should be a "string" but "'+(t(s=e)?"array":typeof s)+'" was given as the first argument for mustache#render(template, view, partials)');var s;return y.render(e,i,n,r)},v.escape=function(e){return String(e).replace(/[&<>"'`=\/]/g,(function(e){return l[e]}))},v.Scanner=p,v.Context=m,v.Writer=g,v}()},mf8f:function(e,t,i){"use strict";var n={documentSelector:".js-document",documentDisabledClass:"is-disabled",openingTriggerActiveClass:"is-active",delay:200},r=['[href]:not([tabindex^="-"])','input:not([disabled]):not([type="hidden"]):not([tabindex^="-"]):not([type="radio"])','input[type="radio"]:checked','select:not([disabled]):not([tabindex^="-"])','textarea:not([disabled]):not([tabindex^="-"])','button:not([disabled]):not([tabindex^="-"])','[tabindex]:not([tabindex^="-"])','[contenteditable="true"]:not([tabindex^="-"])'],s="Escape",o="Tab",a="F6";function l(e,t){let i=e;for(;i!==t&&i;)i=i.parentNode;return!!i}const c=Symbol("onClick"),u=Symbol("onKeydown"),d=Symbol("addEventDelegation"),h=Symbol("addEventListeners"),f=Symbol("removeEventListeners"),p=Symbol("addAttributes"),m=Symbol("removeAttributes"),g=Symbol("setAttributes"),v=Symbol("setFocusableElements"),y=Symbol("setFocus"),b=Symbol("restoreFocus"),E=Symbol("switchFocus"),w=Symbol("maintainFocus"),S=Symbol("addObserver"),k=Symbol("removeObserver");let C=n;t.a=class{constructor(e,{onOpen:t=(()=>{}),onClose:i=(()=>{}),openingSelector:n,closingSelector:r,backdropSelector:s,helperSelector:o,labelledby:a,describedby:l,isModal:h=!0,isTooltip:f=!1,isOpen:p=!1,isCreated:m=!0,disableScroll:g=!0,enableAutoFocus:y=!0,openingTriggerActiveClass:b=C.openingTriggerActiveClass,delay:w=C.delay}={}){document.querySelector(e)?(this.config={dialogSelector:e,onOpen:t,onClose:i,openingSelector:n,closingSelector:r,backdropSelector:s,helperSelector:o,labelledby:a,describedby:l,isModal:h,isTooltip:f,isCreated:m,isOpen:p,disableScroll:g,enableAutoFocus:y,documentSelector:C.documentSelector,documentDisabledClass:C.documentDisabledClass,openingTriggerActiveClass:b,delay:w},this.dialog=document.querySelector(e),this.dialogArea=`${e}, ${n}`,this.openingTriggers=document.querySelectorAll(n),this.backdropTrigger=document.querySelector(s),this.helpers=document.querySelectorAll(o),this.document=document.querySelector(this.config.documentSelector)||document.querySelector("html"),this.documentIsAlreadyDisabled=!1,this.focusableElements=[],this.firstFocusableElement=null,this.lastFocusableElement=null,this.openingTrigger=null,this.closingTrigger=null,this.isCreated=!1,this.isOpen=!1,this.close=this.close.bind(this),this.toggle=this.toggle.bind(this),this[c]=this[c].bind(this),this[u]=this[u].bind(this),this[d]=this[d].bind(this),this[E]=this[E].bind(this),this.observer=new MutationObserver(e=>e.forEach(()=>this[v]())),this.isInitialized=!0,m&&this.create()):this.isInitialized=!1}[c](e){this.config.isTooltip&&!e.target.closest(this.dialogArea)&&this.close(e),e.target===this.backdropTrigger&&this.close(e)}[u](e){switch(e.key){case s:e.stopPropagation(),this.close(e);break;case a:this.config.isModal||(this.config.isTooltip?this.close(e):this[b]());break;case o:this[w](e)}}[d](e){document.querySelectorAll(this.config.openingSelector).forEach(t=>{l(e.target,t)&&(this.openingTrigger=t,this.toggle(e))}),document.querySelectorAll(this.config.closingSelector).forEach(t=>{l(e.target,t)&&(this.closingTrigger=t,this.close())})}[h](){document.addEventListener("click",this[c],{capture:!0}),this.dialog.addEventListener("keydown",this[u])}[f](){document.removeEventListener("click",this[c],{capture:!0}),this.dialog.removeEventListener("keydown",this[u]),this.openingTrigger&&this.openingTrigger.removeEventListener("keydown",this[E])}[p](){this.dialog.setAttribute("role","dialog"),this.dialog.setAttribute("tabindex",-1),this.dialog.setAttribute("aria-hidden",!0),this.config.labelledby&&this.dialog.setAttribute("aria-labelledby",this.config.labelledby),this.config.describedby&&this.dialog.setAttribute("aria-describedby",this.config.describedby),this.config.isModal&&this.dialog.setAttribute("aria-modal",!0),this.openingTriggers.forEach(e=>e.setAttribute("aria-haspopup","dialog"))}[m](){this.dialog.removeAttribute("role"),this.dialog.removeAttribute("tabindex"),this.dialog.removeAttribute("aria-hidden"),this.dialog.removeAttribute("aria-labelledby"),this.dialog.removeAttribute("aria-describedby"),this.dialog.removeAttribute("aria-modal"),this.config.disableScroll&&this.isOpen&&!this.documentIsAlreadyDisabled&&this.document.classList.remove(this.config.documentDisabledClass),this.openingTriggers.forEach(e=>e.removeAttribute("aria-haspopup")),this.openingTrigger&&this.openingTrigger.classList.remove(this.config.openingTriggerActiveClass),this.helpers.forEach(e=>e.classList.remove(this.config.openingTriggerActiveClass))}[g](){this.dialog.setAttribute("aria-hidden",!this.isOpen),this.config.disableScroll&&!this.documentIsAlreadyDisabled&&(this.isOpen?this.document.classList.add(this.config.documentDisabledClass):this.document.classList.remove(this.config.documentDisabledClass)),this.openingTrigger&&(this.isOpen?this.openingTrigger.classList.add(this.config.openingTriggerActiveClass):this.openingTrigger.classList.remove(this.config.openingTriggerActiveClass)),this.helpers.forEach(e=>{this.isOpen?e.classList.add(this.config.openingTriggerActiveClass):e.classList.remove(this.config.openingTriggerActiveClass)})}[v](){const e=function(e){const t=[];return e.forEach(e=>{const i=e.getBoundingClientRect();(i.width>0||i.height>0)&&t.push(e)}),t}(this.dialog.querySelectorAll(r)),t=function(e,t,i){const n=e.querySelectorAll(t),r=[];let s=!1;return 0===n.length?i:(i.forEach(e=>{n.forEach(t=>{t.contains(e)&&(s=!0)}),s||r.push(e),s=!1}),r)}(this.dialog,'[role="dialog"]',e);this.focusableElements=t.length>0?t:[this.dialog],[this.firstFocusableElement]=this.focusableElements,this.lastFocusableElement=this.focusableElements[this.focusableElements.length-1]}[y](){this.config.enableAutoFocus&&window.setTimeout(()=>this.firstFocusableElement.focus(),this.config.delay)}[b](){this.config.enableAutoFocus&&window.setTimeout(()=>this.openingTrigger.focus(),this.config.delay),this.isOpen&&this.openingTrigger.addEventListener("keydown",this[E])}[E](e){e.key===a&&(this.openingTrigger.removeEventListener("keydown",this[E]),this[y]())}[w](e){e.shiftKey&&e.target===this.firstFocusableElement&&(e.preventDefault(),this.lastFocusableElement.focus()),e.shiftKey||e.target!==this.lastFocusableElement||(e.preventDefault(),this.firstFocusableElement.focus())}[S](){this.observer.observe(this.dialog,{childList:!0,attributes:!0,subtree:!0})}[k](){this.observer.disconnect()}open(){this.isInitialized&&this.isCreated&&!this.isOpen&&(this.isOpen=!0,this.documentIsAlreadyDisabled=this.document.classList.contains(this.config.documentDisabledClass),this[g](),this[h](),this[y](),this.config.onOpen(this.dialog,this.openingTrigger))}close(e){this.isInitialized&&this.isCreated&&this.isOpen&&(this.isOpen=!1,e&&e.preventDefault(),this[g](),this[f](),this.openingTrigger&&(!this.config.isTooltip||this.config.isTooltip&&e&&"click"!==e.type)&&this[b](),this.config.onClose(this.dialog,this.closingTrigger))}toggle(e){this.isInitialized&&this.isCreated&&(e&&e.preventDefault(),this.isOpen?this.close():this.open())}create(){this.isInitialized&&!this.isCreated&&(this.isCreated=!0,this[p](),this[v](),this[S](),this.config.isOpen&&this.open(),document.addEventListener("click",this[d],{capture:!0}))}destroy(){this.isInitialized&&this.isCreated&&(this.close(),this.isCreated=!1,this[m](),this[f](),this[k](),document.removeEventListener("click",this[d],{capture:!0}))}}},ng4s:function(e,t,i){"use strict";i.r(t),function(e){var t=i("P50k"),n=i.n(t),r=i("mf8f"),s=i("W4wD"),o=i.n(s);function a(e,t){var i;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(i=function(e,t){if(!e)return;if("string"==typeof e)return l(e,t);var i=Object.prototype.toString.call(e).slice(8,-1);"Object"===i&&e.constructor&&(i=e.constructor.name);if("Map"===i||"Set"===i)return Array.from(e);if("Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i))return l(e,t)}(e))||t&&e&&"number"==typeof e.length){i&&(e=i);var n=0,r=function(){};return{s:r,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:r}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var s,o=!0,a=!1;return{s:function(){i=e[Symbol.iterator]()},n:function(){var e=i.next();return o=e.done,e},e:function(e){a=!0,s=e},f:function(){try{o||null==i.return||i.return()}finally{if(a)throw s}}}}function l(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,n=new Array(t);i0)for(var r in n=!this.tagsAreExclusive,this.tags){var s=this.tags[r].replace(/^(-|\+)/,"");0<=this.config.uielements[i].tags.indexOf(s)&&(n=!this.tags[r].startsWith("-"))}n&&t.append(this.getNewUiElementCard(this.config.uielements[i],e))}this.newPanel.close(),this.selectionPanel.open()}},{key:"drawNewForm",value:function(e,t){this.newPanel.dialog.innerHTML=e;var i=this.newPanel.dialog;this.wysiwyg.load(i),this.dispatchInitFormEvent(i);var n=i.querySelector("form");n.manager=this,n.position=t,n.addEventListener("submit",(function(e){e.preventDefault();var t=e.currentTarget;return t.manager.submitUiElementForm(t,(function(){if(200===this.status){var e=JSON.parse(this.responseText);e.error?this.form.manager.drawNewForm(e.form_html,this.form.position):(this.form.manager.create(e.code,e.data,e.previewHtml,this.form.position),this.form.manager.newPanel.close(),this.form.manager.selectionPanel.close())}200!==this.status&&alert(this.form.manager.config.errorMessage)})),!1}));var r=i.querySelector(".js-uie-cancel");r.panel=this.newPanel,r.addEventListener("click",(function(e){e.currentTarget.panel.close()}));var s=i.querySelector(".js-uie-save");s.panel=this.newPanel,s.addEventListener("click",(function(e){e.currentTarget.panel.dialog.querySelector("form").dispatchEvent(new Event("submit",{cancelable:!0}))}))}},{key:"openNewPanel",value:function(e,t,i){this.newPanel.dialog.manager=this,this.newPanel.dialog.position=i,this.drawNewForm(e,i),this.newPanel.open()}},{key:"editUiElement",value:function(e){this.loadUiElementEditForm(e,(function(t){if(200===this.status){var i=JSON.parse(this.responseText);e.manager.openEditPanel(i.form_html,e)}}))}},{key:"drawEditForm",value:function(e,t){this.editPanel.dialog.querySelector(".js-uie-content").innerHTML=e;var i=this.editPanel.dialog;this.wysiwyg.load(i),this.dispatchInitFormEvent(i);var n=i.querySelector("form");n.manager=this,n.uiElement=t,n.addEventListener("submit",(function(e){e.preventDefault();var t=e.currentTarget;return t.manager.submitUiElementForm(t,(function(){if(200===this.status){var e=JSON.parse(this.responseText);e.error?this.form.manager.drawEditForm(e.form_html,this.form.uiElement):(this.form.uiElement.data=e.data,this.form.uiElement.previewHtml=e.previewHtml,this.form.manager.write(),this.form.manager.editPanel.close())}200!==this.status&&alert(this.config.errorMessage)})),!1}));var r=i.querySelector(".js-uie-cancel");r.panel=this.editPanel,r.addEventListener("click",(function(e){e.currentTarget.panel.close()}));var s=i.querySelector(".js-uie-save");s.panel=this.editPanel,s.addEventListener("click",(function(e){e.currentTarget.panel.dialog.querySelector("form").dispatchEvent(new Event("submit",{cancelable:!0}))}))}},{key:"openEditPanel",value:function(e,t){this.editPanel.dialog.manager=this,this.editPanel.dialog.uiElement=t,this.drawEditForm(e,t),this.editPanel.open()}},{key:"write",value:function(){this.input.value=this.uiElements.length>0?JSON.stringify(this.uiElements):"",this.drawUiElements(),document.dispatchEvent(new CustomEvent("mbiz:rich-editor:write-complete",{detail:{editorManager:this}}))}},{key:"create",value:function(e,t,i,n){var r=new MonsieurBizRichEditorUiElement(this.config,e,t,i);return this.uiElements.splice(n,0,r),this.write(),r}},{key:"moveUp",value:function(e){var t=this.uiElements.indexOf(e);0!==t&&(this.uiElements.splice(t,1),this.uiElements.splice(t-1,0,e),this.write())}},{key:"moveDown",value:function(e){var t=this.uiElements.indexOf(e);t!==this.uiElements.length-1&&(this.uiElements.splice(t,1),this.uiElements.splice(t+1,0,e),this.write())}},{key:"delete",value:function(e){var t=this.uiElements.indexOf(e);this.uiElements.splice(t,1),this.write()}},{key:"loadUiElementCreateForm",value:function(e,t){var i=new XMLHttpRequest;i.onload=t;var n=this.config.createElementFormUrl;i.open("get",n.replace("__CODE__",e.code),!0),i.setRequestHeader("X-Requested-With","XMLHttpRequest"),i.send()}},{key:"loadUiElementEditForm",value:function(e,t){var i=new XMLHttpRequest;i.onload=t;var n=this.config.editElementFormUrl;i.open("post",n.replace("__CODE__",e.code),!0),i.setRequestHeader("X-Requested-With","XMLHttpRequest"),i.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),i.send(new URLSearchParams({data:JSON.stringify(e.data)}).toString())}},{key:"submitUiElementForm",value:function(e,t){var i=new XMLHttpRequest;i.onload=t,i.form=e,i.open("post",e.action,!0),i.setRequestHeader("X-Requested-With","XMLHttpRequest"),i.send(new FormData(e))}},{key:"requestUiElementsHtml",value:function(e,t){var i=new XMLHttpRequest;i.onload=t,i.open("post",this.config.renderElementsUrl,!0),i.setRequestHeader("X-Requested-With","XMLHttpRequest");var n=new FormData;n.append("ui_elements",JSON.stringify(e)),this.input.dataset.locale&&n.append("locale",this.input.dataset.locale),i.uiElements=e,i.manager=this,i.send(n)}},{key:"isClipboardEmpty",value:function(){var e=window.sessionStorage.getItem("monsieurBizRichEditorClipboard");return null===e||""===e}},{key:"saveUiElementToClipboard",value:function(e,t){window.sessionStorage.setItem("monsieurBizRichEditorClipboard",JSON.stringify(e)),t(),document.dispatchEvent(new CustomEvent("mbiz:rich-editor:uielement:copied",{}))}},{key:"pasteUiElementFromClipboard",value:function(e){var t=window.sessionStorage.getItem("monsieurBizRichEditorClipboard");if(null!==t){var i=JSON.parse(t),n=this;n.requestUiElementsHtml([i],(function(){if(200===this.status){var t=JSON.parse(this.responseText).shift();void 0===i.code&&void 0!==i.type&&(i.code=i.type,i.data=i.fields,delete i.type,delete i.fields);var r=n.config.findUiElementByCode(i.code);if(null!==r)if(n.tags.length>0){var s=!1;for(var o in n.tags)0<=n.config.uielements[r.code].tags.indexOf(n.tags[o])&&(s=!0);s?n.create(r.code,i.data,t,e):alert(n.config.unallowedUiElementMessage)}else n.create(r.code,i.data,t,e)}}))}}},{key:"dispatchInitFormEvent",value:function(e){document.dispatchEvent(new CustomEvent("monsieurBizRichEditorInitForm",{detail:{form:e}}))}},{key:"input",get:function(){return this.config.input}},{key:"wysiwyg",get:function(){return this.config.wysiwyg}}]),e}()}.call(this,i("2mad"))}});
\ No newline at end of file
+   */var e=Object.prototype.toString,t=Array.isArray||function(t){return"[object Array]"===e.call(t)};function i(e){return"function"==typeof e}function n(e){return e.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&")}function r(e,t){return null!=e&&"object"==typeof e&&t in e}var s=RegExp.prototype.test,o=/\S/;function a(e){return!function(e,t){return s.call(e,t)}(o,e)}var l={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/","`":"`","=":"="},c=/\s*/,u=/\s+/,d=/\s*=/,h=/\s*\}/,f=/#|\^|\/|>|\{|&|=|!/;function p(e){this.string=e,this.tail=e,this.pos=0}function m(e,t){this.view=e,this.cache={".":this.view},this.parent=t}function g(){this.templateCache={_cache:{},set:function(e,t){this._cache[e]=t},get:function(e){return this._cache[e]},clear:function(){this._cache={}}}}p.prototype.eos=function(){return""===this.tail},p.prototype.scan=function(e){var t=this.tail.match(e);if(!t||0!==t.index)return"";var i=t[0];return this.tail=this.tail.substring(i.length),this.pos+=i.length,i},p.prototype.scanUntil=function(e){var t,i=this.tail.search(e);switch(i){case-1:t=this.tail,this.tail="";break;case 0:t="";break;default:t=this.tail.substring(0,i),this.tail=this.tail.substring(i)}return this.pos+=t.length,t},m.prototype.push=function(e){return new m(e,this)},m.prototype.lookup=function(e){var t,n,s,o=this.cache;if(o.hasOwnProperty(e))t=o[e];else{for(var a,l,c,u=this,d=!1;u;){if(e.indexOf(".")>0)for(a=u.view,l=e.split("."),c=0;null!=a&&c0?r[r.length-1][4]:i;break;default:n.push(t)}return i}(function(e){for(var t,i,n=[],r=0,s=e.length;r"===o?a=this.renderPartial(s,t,i,r):"&"===o?a=this.unescapedValue(s,t):"name"===o?a=this.escapedValue(s,t,r):"text"===o&&(a=this.rawValue(s)),void 0!==a&&(l+=a);return l},g.prototype.renderSection=function(e,n,r,s,o){var a=this,l="",c=n.lookup(e[1]);if(c){if(t(c))for(var u=0,d=c.length;u0||!i)&&(r[s]=n+r[s]);return r.join("\n")},g.prototype.renderPartial=function(e,t,n,r){if(n){var s=this.getConfigTags(r),o=i(n)?n(e[1]):n[e[1]];if(null!=o){var a=e[6],l=e[5],c=e[4],u=o;0==l&&c&&(u=this.indentPartial(o,c,a));var d=this.parse(u,s);return this.renderTokens(d,t,n,u,r)}}},g.prototype.unescapedValue=function(e,t){var i=t.lookup(e[1]);if(null!=i)return i},g.prototype.escapedValue=function(e,t,i){var n=this.getConfigEscape(i)||v.escape,r=t.lookup(e[1]);if(null!=r)return"number"==typeof r&&n===v.escape?String(r):n(r)},g.prototype.rawValue=function(e){return e[1]},g.prototype.getConfigTags=function(e){return t(e)?e:e&&"object"==typeof e?e.tags:void 0},g.prototype.getConfigEscape=function(e){return e&&"object"==typeof e&&!t(e)?e.escape:void 0};var v={name:"mustache.js",version:"4.2.0",tags:["{{","}}"],clearCache:void 0,escape:void 0,parse:void 0,render:void 0,Scanner:void 0,Context:void 0,Writer:void 0,set templateCache(e){y.templateCache=e},get templateCache(){return y.templateCache}},y=new g;return v.clearCache=function(){return y.clearCache()},v.parse=function(e,t){return y.parse(e,t)},v.render=function(e,i,n,r){if("string"!=typeof e)throw new TypeError('Invalid template! Template should be a "string" but "'+(t(s=e)?"array":typeof s)+'" was given as the first argument for mustache#render(template, view, partials)');var s;return y.render(e,i,n,r)},v.escape=function(e){return String(e).replace(/[&<>"'`=\/]/g,(function(e){return l[e]}))},v.Scanner=p,v.Context=m,v.Writer=g,v}()},ng4s:function(e,t,i){"use strict";i.r(t),function(e){var t=i("1f8Y"),n=i.n(t),r=i("/HGo"),s=i("nbsC"),o=i.n(s);function a(e){return(a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function l(e,t){var i="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!i){if(Array.isArray(e)||(i=function(e,t){if(!e)return;if("string"==typeof e)return c(e,t);var i=Object.prototype.toString.call(e).slice(8,-1);"Object"===i&&e.constructor&&(i=e.constructor.name);if("Map"===i||"Set"===i)return Array.from(e);if("Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i))return c(e,t)}(e))||t&&e&&"number"==typeof e.length){i&&(e=i);var n=0,r=function(){};return{s:r,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:r}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var s,o=!0,a=!1;return{s:function(){i=i.call(e)},n:function(){var e=i.next();return o=e.done,e},e:function(e){a=!0,s=e},f:function(){try{o||null==i.return||i.return()}finally{if(a)throw s}}}}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,n=new Array(t);i0)for(var r in n=!this.tagsAreExclusive,this.tags){var s=this.tags[r].replace(/^(-|\+)/,"");0<=this.config.uielements[i].tags.indexOf(s)&&(n=!this.tags[r].startsWith("-"))}n&&t.append(this.getNewUiElementCard(this.config.uielements[i],e))}this.newPanel.close(),this.selectionPanel.open()}},{key:"drawNewForm",value:function(e,t){this.newPanel.dialog.innerHTML=e;var i=this.newPanel.dialog;this.wysiwyg.load(i),this.dispatchInitFormEvent(i);var n=i.querySelector("form");n.manager=this,n.position=t,n.addEventListener("submit",(function(e){e.preventDefault();var t=e.currentTarget;return t.manager.submitUiElementForm(t,(function(){if(200===this.status){var e=JSON.parse(this.responseText);e.error?this.form.manager.drawNewForm(e.form_html,this.form.position):(this.form.manager.create(e.code,e.data,e.previewHtml,this.form.position),this.form.manager.newPanel.close(),this.form.manager.selectionPanel.close())}200!==this.status&&alert(this.form.manager.config.errorMessage)})),!1}));var r=i.querySelector(".js-uie-cancel");r.panel=this.newPanel,r.addEventListener("click",(function(e){e.currentTarget.panel.close()}));var s=i.querySelector(".js-uie-save");s.panel=this.newPanel,s.addEventListener("click",(function(e){e.currentTarget.panel.dialog.querySelector("form").dispatchEvent(new Event("submit",{cancelable:!0}))}))}},{key:"openNewPanel",value:function(e,t,i){this.newPanel.dialog.manager=this,this.newPanel.dialog.position=i,this.drawNewForm(e,i),this.newPanel.open()}},{key:"editUiElement",value:function(e){this.loadUiElementEditForm(e,(function(t){if(200===this.status){var i=JSON.parse(this.responseText);e.manager.openEditPanel(i.form_html,e)}}))}},{key:"drawEditForm",value:function(e,t){this.editPanel.dialog.querySelector(".js-uie-content").innerHTML=e;var i=this.editPanel.dialog;this.wysiwyg.load(i),this.dispatchInitFormEvent(i);var n=i.querySelector("form");n.manager=this,n.uiElement=t,n.addEventListener("submit",(function(e){e.preventDefault();var t=e.currentTarget;return t.manager.submitUiElementForm(t,(function(){if(200===this.status){var e=JSON.parse(this.responseText);e.error?this.form.manager.drawEditForm(e.form_html,this.form.uiElement):(this.form.uiElement.data=e.data,this.form.uiElement.previewHtml=e.previewHtml,this.form.manager.write(),this.form.manager.editPanel.close())}200!==this.status&&alert(this.config.errorMessage)})),!1}));var r=i.querySelector(".js-uie-cancel");r.panel=this.editPanel,r.addEventListener("click",(function(e){e.currentTarget.panel.close()}));var s=i.querySelector(".js-uie-save");s.panel=this.editPanel,s.addEventListener("click",(function(e){e.currentTarget.panel.dialog.querySelector("form").dispatchEvent(new Event("submit",{cancelable:!0}))}))}},{key:"openEditPanel",value:function(e,t){this.editPanel.dialog.manager=this,this.editPanel.dialog.uiElement=t,this.drawEditForm(e,t),this.editPanel.open()}},{key:"write",value:function(){this.input.value=this.uiElements.length>0?JSON.stringify(this.uiElements):"",this.drawUiElements(),document.dispatchEvent(new CustomEvent("mbiz:rich-editor:write-complete",{detail:{editorManager:this}}))}},{key:"create",value:function(e,t,i,n){var r=new MonsieurBizRichEditorUiElement(this.config,e,t,i);return this.uiElements.splice(n,0,r),this.write(),r}},{key:"moveUp",value:function(e){var t=this.uiElements.indexOf(e);0!==t&&(this.uiElements.splice(t,1),this.uiElements.splice(t-1,0,e),this.write())}},{key:"moveDown",value:function(e){var t=this.uiElements.indexOf(e);t!==this.uiElements.length-1&&(this.uiElements.splice(t,1),this.uiElements.splice(t+1,0,e),this.write())}},{key:"delete",value:function(e){var t=this.uiElements.indexOf(e);this.uiElements.splice(t,1),this.write()}},{key:"loadUiElementCreateForm",value:function(e,t){var i=new XMLHttpRequest;i.onload=t;var n=this.config.createElementFormUrl;i.open("get",n.replace("__CODE__",e.code),!0),i.setRequestHeader("X-Requested-With","XMLHttpRequest"),i.send()}},{key:"loadUiElementEditForm",value:function(e,t){var i=new XMLHttpRequest;i.onload=t;var n=this.config.editElementFormUrl;i.open("post",n.replace("__CODE__",e.code),!0),i.setRequestHeader("X-Requested-With","XMLHttpRequest"),i.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),i.send(new URLSearchParams({data:JSON.stringify(e.data)}).toString())}},{key:"submitUiElementForm",value:function(e,t){var i=new XMLHttpRequest;i.onload=t,i.form=e,i.open("post",e.action,!0),i.setRequestHeader("X-Requested-With","XMLHttpRequest"),i.send(new FormData(e))}},{key:"requestUiElementsHtml",value:function(e,t){var i=new XMLHttpRequest;i.onload=t,i.open("post",this.config.renderElementsUrl,!0),i.setRequestHeader("X-Requested-With","XMLHttpRequest");var n=new FormData;n.append("ui_elements",JSON.stringify(e)),this.input.dataset.locale&&n.append("locale",this.input.dataset.locale),i.uiElements=e,i.manager=this,i.send(n)}},{key:"isClipboardEmpty",value:function(){var e=window.sessionStorage.getItem("monsieurBizRichEditorClipboard");return null===e||""===e}},{key:"saveUiElementToClipboard",value:function(e,t){window.sessionStorage.setItem("monsieurBizRichEditorClipboard",JSON.stringify(e)),t(),document.dispatchEvent(new CustomEvent("mbiz:rich-editor:uielement:copied",{}))}},{key:"pasteUiElementFromClipboard",value:function(e){var t=window.sessionStorage.getItem("monsieurBizRichEditorClipboard");if(null!==t){var i=JSON.parse(t),n=this;n.requestUiElementsHtml([i],(function(){if(200===this.status){var t=JSON.parse(this.responseText).shift();void 0===i.code&&void 0!==i.type&&(i.code=i.type,i.data=i.fields,delete i.type,delete i.fields);var r=n.config.findUiElementByCode(i.code);if(null!==r)if(n.tags.length>0){var s=!1;for(var o in n.tags)0<=n.config.uielements[r.code].tags.indexOf(n.tags[o])&&(s=!0);s?n.create(r.code,i.data,t,e):alert(n.config.unallowedUiElementMessage)}else n.create(r.code,i.data,t,e)}}))}}},{key:"dispatchInitFormEvent",value:function(e){document.dispatchEvent(new CustomEvent("monsieurBizRichEditorInitForm",{detail:{form:e}}))}}]),e}()}.call(this,i("yLpj"))},yLpj:function(e,t){var i;i=function(){return this}();try{i=i||new Function("return this")()}catch(e){"object"==typeof window&&(i=window)}e.exports=i}});
\ No newline at end of file
diff --git a/src/Resources/views/Admin/app.html.twig b/src/Resources/views/Admin/app.html.twig
index 455f4d2d..f63a6a16 100644
--- a/src/Resources/views/Admin/app.html.twig
+++ b/src/Resources/views/Admin/app.html.twig
@@ -83,14 +83,16 @@
 {% endverbatim %}
 
 
-

-    

+
 
-

+