diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js index 9931ca54..df1b50b3 100644 --- a/client/dist/js/bundle.js +++ b/client/dist/js/bundle.js @@ -1,4 +1,4 @@ -!function(){"use strict";var e={2038:function(e,t,n){var r=a(n(4121)),o=a(n(1240));function a(e){return e&&e.__esModule?e:{default:e}}window.document.addEventListener("DOMContentLoaded",(()=>{(0,r.default)(),(0,o.default)()}))},4121:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=v(n(5207)),o=v(n(584)),a=v(n(7105)),l=v(n(6721)),i=v(n(2512)),u=v(n(5563)),d=v(n(5297)),s=v(n(7651)),c=v(n(1305)),f=v(n(7660)),p=v(n(7333)),m=v(n(2382)),g=v(n(8953)),b=v(n(1950)),h=v(n(6573));function v(e){return e&&e.__esModule?e:{default:e}}t.default=()=>{r.default.component.registerMany({ElementEditor:l.default,ElementToolbar:u.default,ElementAddNewButton:d.default,ElementList:i.default,Element:o.default,ElementActions:a.default,ElementHeader:s.default,ElementContent:c.default,ElementSummary:f.default,ElementInlineEditForm:p.default,AddElementPopover:m.default,HoverBar:g.default,DragPositionIndicator:b.default,TextCheckboxGroupField:h.default})}},1240:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=m(n(5207)),o=m(n(5071)),a=m(n(2977)),l=m(n(8633)),i=m(n(3521)),u=m(n(6283)),d=m(n(4)),s=m(n(9283)),c=m(n(8501)),f=m(n(2221)),p=m(n(5904));function m(e){return e&&e.__esModule?e:{default:e}}t.default=()=>{r.default.transform("elemental-fieldgroup",(e=>{e.component("FieldGroup.HistoryViewer.VersionDetail",a.default,"HistoricElement")}),{after:"field-holders"}),r.default.transform("elements-history",(e=>{e.component("HistoryViewer.Form_ItemEditForm",o.default,"ElementHistoryViewer")})),r.default.transform("blocks-history-revert",(e=>{e.component("HistoryViewerToolbar.VersionedAdmin.HistoryViewer.Element.HistoryViewerVersionDetail",l.default,"BlockRevertMutation")})),r.default.transform("cms-element-editor",(e=>{e.component("ElementList",i.default,"PageElements")})),r.default.transform("cms-element-adder",(e=>{e.component("AddElementPopover",u.default,"ElementAddButton")})),r.default.transform("element-actions",(e=>{e.component("ElementActions",c.default,"ElementActionsWithSave"),e.component("ElementActions",f.default,"ElementActionsWithPublish"),e.component("ElementActions",p.default,"ElementActionsWithUnpublish"),e.component("ElementActions",s.default,"ElementActionsWithDuplicate"),e.component("ElementActions",d.default,"ElementActionsWithArchive")}))}},26:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=u(n(1594)),o=u(n(6935)),a=u(n(6923)),l=n(3556),i=n(9791);function u(e){return e&&e.__esModule?e:{default:e}}const d=e=>{const{className:t,title:n,label:o}=e,i={className:(0,a.default)(t,"dropdown-item"),...e};return r.default.createElement(l.DropdownItem,i,o||n)};d.propTypes={disabled:o.default.bool,className:o.default.string,onClick:o.default.func,title:o.default.string,name:o.default.string,type:i.elementTypeType,active:o.default.bool,label:o.default.string},d.defaultProps={disabled:!1};t.default=d},4:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=u(n(1594)),o=n(9367),a=u(n(26)),l=u(n(1429)),i=u(n(5815));function u(e){return e&&e.__esModule?e:{default:e}}const d=e=>t=>{const n=void 0!==t.element.canDelete&&!t.element.canDelete,o=i.default._t("ElementArchiveAction.ARCHIVE","Archive"),l={label:o,title:n?i.default._t("ElementArchiveAction.ARCHIVE_PERMISSION_DENY","Archive, insufficient permissions"):o,disabled:n,className:"element-editor__actions-archive",onClick:e=>{e.stopPropagation();const{element:{id:n},isPublished:r,actions:{handleArchiveBlock:o}}=t;let a=i.default._t("ElementArchiveAction.CONFIRM_DELETE","Are you sure you want to send this block to the archive?");r&&(a=i.default._t("ElementArchiveAction.CONFIRM_DELETE_AND_UNPUBLISH","Warning: This block will be unpublished before being sent to the archive. Are you sure you want to proceed?")),o&&window.confirm(a)&&o(n).then((()=>{const e=window.jQuery(".cms-preview");e&&"function"==typeof e.entwine&&e.entwine("ss.preview")._loadUrl(e.find("iframe").attr("src"))}))},toggle:t.toggle};return r.default.createElement(e,t,t.children,r.default.createElement(a.default,l))};t.Component=d;t.default=(0,o.compose)(l.default,d)},9283:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=u(n(1594)),o=n(9367),a=u(n(26)),l=u(n(9324)),i=u(n(5815));function u(e){return e&&e.__esModule?e:{default:e}}const d=e=>t=>{if(t.type.broken)return r.default.createElement(e,t);const n=void 0!==t.element.canCreate&&!t.element.canCreate,o=i.default._t("ElementArchiveAction.DUPLICATE","Duplicate"),l={label:o,title:n?i.default._t("ElementArchiveAction.DUPLICATE_PERMISSION_DENY","Duplicate, insufficient permissions"):o,disabled:n,className:"element-editor__actions-duplicate",onClick:e=>{e.stopPropagation();const{element:{id:n},actions:{handleDuplicateBlock:r}}=t;r&&r(n).then((()=>{const e=window.jQuery(".cms-preview");e.entwine("ss.preview")._loadUrl(e.find("iframe").attr("src"))}))},toggle:t.toggle};return r.default.createElement(e,t,t.children,r.default.createElement(a.default,l))};t.Component=d;t.default=(0,o.compose)(l.default,d)},2221:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=u(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(n(1594)),o=i(n(26)),a=i(n(5815)),l=n(584);function i(e){return e&&e.__esModule?e:{default:e}}function u(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(u=function(e){return e?n:t})(e)}const d=e=>t=>{const{formDirty:n,onPublishButtonClick:i}=(0,r.useContext)(l.ElementContext),{element:u}=t,d=void 0!==t.element.canPublish&&!t.element.canPublish,s=a.default._t("ElementArchiveAction.PUBLISH","Publish"),c={label:s,title:d?a.default._t("ElementArchiveAction.PUBLISH_PERMISSION_DENY","Publish, insufficient permissions"):s,disabled:d,className:"element-editor__actions-publish",onClick:e=>{e.stopPropagation(),i()},toggle:t.toggle};return t.type.broken?r.default.createElement(e,t):r.default.createElement(e,t,t.children,(n||!u.isLiveVersion)&&r.default.createElement(o.default,c))};t.Component=d;t.default=d},8501:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=u(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(n(1594)),o=i(n(26)),a=i(n(5815)),l=n(584);function i(e){return e&&e.__esModule?e:{default:e}}function u(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(u=function(e){return e?n:t})(e)}const d=e=>t=>{const{onSaveButtonClick:n,formDirty:i}=(0,r.useContext)(l.ElementContext),u={title:a.default._t("ElementSaveAction.SAVE","Save"),className:"element-editor__actions-save",onClick:e=>{e.stopPropagation(),n()},toggle:t.toggle};return!t.expandable||t.type.broken?r.default.createElement(e,t):r.default.createElement(e,t,t.children,i&&r.default.createElement(o.default,u))};t.Component=d;t.default=d},5904:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=u(n(1594)),o=n(9367),a=u(n(26)),l=u(n(2393)),i=u(n(5815));function u(e){return e&&e.__esModule?e:{default:e}}const d=e=>t=>{if(t.type.broken)return r.default.createElement(e,t);const{element:n,type:o,actions:{handleUnpublishBlock:l}}=t,u=void 0!==t.element.canUnpublish&&!t.element.canUnpublish,d=i.default._t("ElementArchiveAction.UNPUBLISH","Unpublish"),s={label:d,title:u?i.default._t("ElementArchiveAction.UNPUBLISH_PERMISSION_DENY","Unpublish, insufficient permissions"):d,disabled:u,className:"element-editor__actions-unpublish",onClick:e=>{e.stopPropagation();const{jQuery:t}=window,r=i.default.inject(i.default._t("ElementHeader.NOTITLE","Untitled {type} block"),{type:o.title});l&&l(n.id).then((()=>{const e=t(".cms-preview");e.entwine("ss.preview")._loadUrl(e.find("iframe").attr("src")),t.noticeAdd({text:i.default.inject(i.default._t("ElementUnpublishAction.SUCCESS_NOTIFICATION","Removed '{title}' from the published page"),{title:n.title||r}),stay:!1,type:"success"})})).catch((()=>{t.noticeAdd({text:i.default.inject(i.default._t("ElementUnpublishAction.ERROR_NOTIFICATION","Error unpublishing '{title}'"),{title:n.title||r}),stay:!1,type:"error"})}))},toggle:t.toggle};return r.default.createElement(e,t,t.children,n.isPublished&&r.default.createElement(a.default,s))};t.Component=d;t.default=(0,o.compose)(l.default,d)},2382:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=s(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(n(1594)),o=d(n(6935)),a=d(n(6923)),l=n(5207),i=n(9791),u=d(n(5815));function d(e){return e&&e.__esModule?e:{default:e}}function s(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(s=function(e){return e?n:t})(e)}class c extends r.Component{constructor(e){super(e),this.handleToggle=this.handleToggle.bind(this)}getElementButtonClickHandler(e){return t=>{const{actions:{handleAddElementToArea:n},insertAfterElement:r}=this.props;t.preventDefault(),n(e.class,r).then((()=>{const e=window.jQuery(".cms-preview");e.entwine("ss.preview")._loadUrl(e.find("iframe").attr("src"))})),this.handleToggle()}}handleToggle(){const{toggle:e}=this.props;e()}render(){const{PopoverOptionSetComponent:e,elementTypes:t,container:n,extraClass:o,isOpen:l,placement:i,target:d}=this.props,s=(0,a.default)("element-editor-add-element",o),c=t.map((e=>({content:e.title,key:e.name,className:(0,a.default)(e.icon,"btn--icon-xl","element-editor-add-element__button"),onClick:this.getElementButtonClickHandler(e)})));return r.default.createElement(e,{buttons:c,searchPlaceholder:u.default._t("ElementAddElementPopover.SEARCH_BLOCKS","Search blocks"),extraClass:s,container:n,isOpen:l,placement:i,target:d,toggle:this.handleToggle})}}c.propTypes={container:o.default.oneOfType([o.default.string,o.default.func,o.default.object]),elementTypes:o.default.arrayOf(i.elementTypeType).isRequired,extraClass:o.default.oneOfType([o.default.string,o.default.array,o.default.object]),isOpen:o.default.bool.isRequired,placement:o.default.string,target:o.default.oneOfType([o.default.string,o.default.func,o.default.object]).isRequired,toggle:o.default.func.isRequired,areaId:o.default.number.isRequired,insertAfterElement:o.default.oneOfType([o.default.number,o.default.string])};t.default=(0,l.inject)(["PopoverOptionSet"],(e=>({PopoverOptionSetComponent:e})),(()=>"ElementEditor"))(c)},5297:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=s(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(n(1594)),o=d(n(6935)),a=n(3556),l=d(n(5815)),i=n(9791),u=n(5207);function d(e){return e&&e.__esModule?e:{default:e}}function s(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(s=function(e){return e?n:t})(e)}class c extends r.Component{constructor(e){super(e),this.toggle=this.toggle.bind(this),this.state={popoverOpen:!1}}toggle(){this.setState((e=>({popoverOpen:!e.popoverOpen})))}render(){const{AddElementPopoverComponent:e,elementTypes:t,areaId:n}=this.props,o={id:`ElementalArea${n}_AddButton`,color:"primary",onClick:this.toggle,className:"font-icon-plus"};return r.default.createElement("div",null,r.default.createElement(a.Button,o,l.default._t("ElementAddNewButton.ADD_BLOCK","Add block")),r.default.createElement(e,{placement:"bottom-start",target:o.id,isOpen:this.state.popoverOpen,elementTypes:t,toggle:this.toggle,areaId:n,insertAfterElement:0}))}}t.Component=c,c.defaultProps={},c.propTypes={elementTypes:o.default.arrayOf(i.elementTypeType).isRequired,areaId:o.default.number.isRequired};t.default=(0,u.inject)(["AddElementPopover"],(e=>({AddElementPopoverComponent:e})),(()=>"ElementEditor.ElementList.AddNewButton"))(c)},1305:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r,o=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=u(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(n(1594)),a=(r=n(6935))&&r.__esModule?r:{default:r},l=n(5207),i=n(9367);function u(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(u=function(e){return e?n:t})(e)}class d extends o.PureComponent{render(){const{id:e,fileUrl:t,fileTitle:n,content:r,previewExpanded:a,InlineEditFormComponent:l,SummaryComponent:i,activeTab:u,onFormInit:d,handleLoadingError:s,formDirty:c,broken:f,onFormSchemaSubmitResponse:p,ensureFormRendered:m,formHasRendered:g}=this.props,b=!a&&(m||g),h={"element-editor-editform--collapsed":!a,"element-editor-editform--rendered-not-visible":b};return o.default.createElement("div",{className:"element-editor-content"},!a&&o.default.createElement(i,{content:r,fileUrl:t,fileTitle:n,broken:f}),(a||m||g)&&o.default.createElement(l,{extraClass:h,onClick:e=>e.stopPropagation(),elementId:e,activeTab:u,onFormInit:d,handleLoadingError:s,onFormSchemaSubmitResponse:p,notVisible:b}),c&&o.default.createElement("input",{type:"hidden",name:"change-tracker",className:"element-form-dirty-state",value:"1"}))}}t.Component=d,d.propTypes={id:a.default.string,content:a.default.string,fileUrl:a.default.string,fileTitle:a.default.string,previewExpanded:a.default.bool,SummaryComponent:a.default.elementType,InlineEditFormComponent:a.default.elementType,handleLoadingError:a.default.func,broken:a.default.bool,onFormSchemaSubmitResponse:a.default.func,onFormInit:a.default.func,ensureFormRendered:a.default.bool,formHasRendered:a.default.bool,formDirty:a.default.object},d.defaultProps={};t.default=(0,i.compose)((0,l.inject)(["ElementSummary","ElementInlineEditForm"],((e,t)=>({SummaryComponent:e,InlineEditFormComponent:t})),(()=>"ElementEditor.ElementList.Element")))(d)},1950:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=o(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var l in e)if("default"!==l&&{}.hasOwnProperty.call(e,l)){var i=a?Object.getOwnPropertyDescriptor(e,l):null;i&&(i.get||i.set)?Object.defineProperty(r,l,i):r[l]=e[l]}return r.default=e,n&&n.set(e,r),r}(n(1594));function o(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(o=function(e){return e?n:t})(e)}class a extends r.PureComponent{render(){return r.default.createElement("div",{className:"elemental-editor-drag-indicator"},r.default.createElement("div",{className:"elemental-editor-drag-indicator__ball"}))}}t.default=a},584:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.ElementContext=t.Component=void 0;var r=P(n(1594)),o=n(8695),a=k(n(6935)),l=n(455),i=n(9791),u=n(9367),d=n(5207),s=k(n(5815)),c=k(n(6923)),f=n(9040),p=n(5381),m=n(2153),g=n(7785),b=n(4242),h=n(3521),v=P(n(5034)),y=n(1820),_=n(8724),E=n(9306),O=P(n(8918)),T=n(9077);function k(e){return e&&e.__esModule?e:{default:e}}function D(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(D=function(e){return e?n:t})(e)}function P(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=D(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}const I=t.ElementContext=(0,r.createContext)(null),w=e=>{const[t,n]=(0,r.useState)(!1),[a,l]=(0,r.useState)(""),[i,u]=(0,r.useState)(!1),[d,f]=(0,r.useState)(e.element.title),[p,m]=(0,r.useState)(!1),[g,v]=(0,r.useState)(!1),[y,E]=(0,r.useState)(!1),[O,T]=(0,r.useState)(!1),[k,D]=(0,r.useState)(!1),[P,w]=(0,r.useState)(!1),[C,S]=(0,r.useState)(!1),[j]=(0,o.useMutation)(b.publishBlockMutation);(0,r.useEffect)((()=>{e.connectDragPreview&&e.connectDragPreview((0,_.getEmptyImage)(),{captureDraggingState:!0}),e.formStateExists&&w(!0)}),[]),(0,r.useEffect)((()=>{p&&P&&(m(!1),e.formDirty?(e.submitForm(),T(!0)):E(!0))}),[p,P]),(0,r.useEffect)((()=>{C&&(S(!1),e.dispatchAddFormChanged())}),[C]);const M=()=>s.default.inject(s.default._t("ElementHeader.NOTITLE","Untitled {type} block"),{type:e.type.title}),A=()=>window.ss.apolloClient.queryManager.refetchQueries({include:[{query:h.query,variables:{id:e.areaId}}]}),N=t=>{(t=>{const n=d||M();if(t){const t=s.default.inject(s.default._t("ElementPublishAction.ERROR_NOTIFICATION","Error publishing '{title}'"),{title:n});e.actions.toasts.error(t)}else{const t=s.default.inject(s.default._t("ElementPublishAction.SUCCESS_NOTIFICATION","Published '{title}' successfully"),{title:n});e.actions.toasts.success(t)}})(t),E(!1),T(!1),Promise.all(A()).then((()=>{setTimeout((()=>e.dispatchRemoveFormChanged()),250)}))};(0,r.useEffect)((()=>{P&&g&&(e.submitForm(),v(!1))}),[P,g]),(0,r.useEffect)((()=>{P&&y&&j({variables:{blockId:e.element.id}}).then((()=>N(!1))).catch((()=>N(!0)))}),[P,y]);const R=t=>{const{tabSetName:n,onActivateTab:r}=e;if(a||l(t),t||a)r(n,t||a);else{r(n,"Main")}},x=r=>{const{type:o,link:a}=e;o.broken||("button"!==r.target.type?!o.inlineEditable||i?window.location=a:n(!t):r.stopPropagation())},{element:B,type:q,areaId:L,HeaderComponent:F,ContentComponent:$,link:W,activeTab:H,connectDragSource:V,connectDropTarget:U,isDragging:Q,isOver:K,onDragEnd:G,formDirty:Y}=e;if(!B.id)return null;const z=(0,c.default)("element-editor__element",{"element-editor__element--broken":q.broken,"element-editor__element--expandable":q.inlineEditable&&!q.broken,"element-editor__element--dragging":Q,"element-editor__element--dragged-over":K},(()=>{const{element:t}=e,n="element-editor__element";return t.isPublished?t.isPublished&&!t.isLiveVersion?`${n}--modified`:`${n}--published`:`${n}--draft`})()),J={formDirty:Y,onPublishButtonClick:()=>{m(!0),D(!0)},onSaveButtonClick:()=>{D(!0),v(!0)}},X=U(r.default.createElement("div",{className:z,onClick:x,onKeyUp:e=>{const{nodeName:t}=e.target;" "!==e.key&&"Enter"!==e.key||["input","textarea"].includes(t.toLowerCase())||x(e)},role:"button",tabIndex:0,title:(e=>e.broken?s.default._t("ElementalElement.ARCHIVE_BROKEN","Archive this block"):s.default.inject(s.default._t("ElementalElement.TITLE","Edit this {type} block"),{type:e.title}))(q),key:B.id},r.default.createElement(I.Provider,{value:J},r.default.createElement(F,{element:B,type:q,areaId:L,expandable:q.inlineEditable,link:W,previewExpanded:t,handleEditTabsClick:t=>{const{activeTab:r}=e;t===r||i||(n(!0),R(t))},activeTab:H,disableTooltip:Q,onDragEnd:G}),r.default.createElement($,{id:B.id,fileUrl:B.blockSchema.fileURL,fileTitle:B.blockSchema.fileTitle,content:((e,t)=>t.broken?e.title?s.default.inject(s.default._t("ElementalElement.BROKEN_DESCRIPTION_TITLE",'This block had the title "{title}". It is broken and will not display on the front-end. You can archive it to remove it from this elemental area.'),{title:e.title}):s.default._t("ElementalElement.BROKEN_DESCRIPTION","This block is broken and will not display on the front-end. You can archive it to remove it from this elemental area."):e.blockSchema.content)(B,q),previewExpanded:t&&!Q,ensureFormRendered:k,formHasRendered:P,activeTab:H,handleLoadingError:()=>{u(!0)},broken:q.broken,onFormSchemaSubmitResponse:(t,r)=>{if(t.id.match(/\/schema\/elemental-area\/([0-9]+)/))return e.type.inlineEditable&&n(!0),S(!0),void(O&&T(!1));f(r),O&&(T(!1),E(!0)),y||O||(t=>{const n=t||M(),r=s.default.inject(s.default._t("ElementSaveAction.SUCCESS_NOTIFICATION","Saved '{title}' successfully"),{title:n});e.actions.toasts.success(r)})(r),A()},onFormInit:()=>(e=>{R(e),w(!0)})(H)}))));return t?X:V(X)};t.Component=w,w.propTypes={element:l.elementType,type:i.elementTypeType.isRequired,areaId:a.default.number.isRequired,link:a.default.string.isRequired,activeTab:a.default.string,tabSetName:a.default.string,onActivateTab:a.default.func,connectDragSource:a.default.func.isRequired,connectDragPreview:a.default.func.isRequired,connectDropTarget:a.default.func.isRequired,isDragging:a.default.bool.isRequired,isOver:a.default.bool.isRequired,onDragOver:a.default.func,onDragEnd:a.default.func,onDragStart:a.default.func},w.defaultProps={element:null};const C={drop(e,t,n){const{element:r}=e;return{target:r.id,dropSpot:(0,E.isOverTop)(t,n)?"top":"bottom"}},hover(e,t,n){const{element:r,onDragOver:o}=e;o&&o(r,(0,E.isOverTop)(t,n))}};t.default=(0,u.compose)((0,y.DropTarget)("element",C,((e,t)=>({connectDropTarget:e.dropTarget(),isOver:t.isOver()}))),(0,y.DragSource)("element",E.elementDragSource,((e,t)=>({connectDragSource:e.dragSource(),connectDragPreview:e.dragPreview(),isDragging:t.isDragging()}))),(0,f.connect)((function(e,t){const n=t.element.id,r=(0,m.loadElementFormStateName)(n),o=(0,g.loadElementSchemaValue)("schemaUrl",n),a=e.form&&e.form.formSchemas[o]&&e.form.formSchemas[o].schema&&e.form.formSchemas[o].schema.fields.find((e=>"Tabs"===e.component)),l=a&&a.id,i=`element.${r}__${l}`,u=e.unsavedForms.find((e=>e.name===`element.${r}`)),d=e.form&&e.form.formState&&e.form.formState.element&&e.form.formState.element.hasOwnProperty(r);return{tabSetName:l,activeTab:e.tabs&&e.tabs.fields&&e.tabs.fields[i]&&e.tabs.fields[i].activeTab,formDirty:u,formStateExists:d}}),(function(e,t){const n=(0,m.loadElementFormStateName)(t.element.id);return{onActivateTab(t,r){e(v.activateTab(`element.${n}__${t}`,r))},submitForm(){e((0,p.submit)(`element.${n}`))},dispatchAddFormChanged(){e((0,T.addFormChanged)(`element.${n}`))},dispatchRemoveFormChanged(){e((0,T.removeFormChanged)(`element.${n}`))},actions:{toasts:(0,u.bindActionCreators)(O,e)}}})),(0,d.inject)(["ElementHeader","ElementContent"],((e,t)=>({HeaderComponent:e,ContentComponent:t})),(()=>"ElementEditor.ElementList.Element")))(w)},7105:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=f(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(n(1594)),o=c(n(6935)),a=n(9367),l=n(3556),i=n(5207),u=n(455),d=n(9791),s=c(n(26));function c(e){return e&&e.__esModule?e:{default:e}}function f(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(f=function(e){return e?n:t})(e)}class p extends r.Component{constructor(e){super(e),this.handleEditTabsClick=this.handleEditTabsClick.bind(this)}handleEditTabsClick(e){const{handleEditTabsClick:t}=this.props;t(e.target.name)}renderEditTabs(){const{editTabs:e,activeTab:t,type:n,expandable:o}=this.props;return!n.broken&&o&&e&&e.length?e.map((e=>{let{name:o,title:a}=e;return r.default.createElement(s.default,{key:o,name:o,title:a,type:n,onClick:this.handleEditTabsClick,active:o===t})})):null}renderDivider(){const{children:e,editTabs:t,expandable:n}=this.props;return n&&t&&t.length&&0!==r.default.Children.count(e)?r.default.createElement(l.DropdownItem,{divider:!0,role:"separator"}):null}render(){const{children:e,id:t,ActionMenuComponent:n}=this.props;return r.default.createElement(n,{id:`element-editor-actions-${t}`,className:"element-editor-header__actions-dropdown",dropdownMenuProps:{right:!0},dropdownToggleClassNames:["element-editor-header__actions-toggle","btn","btn-sm","btn--no-text","font-icon-dot-3"]},this.renderEditTabs(),this.renderDivider(),e)}}t.Component=p,p.propTypes={element:u.elementType,type:d.elementTypeType.isRequired,areaId:o.default.number.isRequired,activeTab:o.default.string,editTabs:o.default.arrayOf(o.default.shape({title:o.default.string,name:o.default.string})),handleEditTabsClick:o.default.func.isRequired,expandable:o.default.bool},p.defaultProps={editTabs:[],expandable:!0};t.default=(0,a.compose)((0,i.inject)(["ActionMenu"],(e=>({ActionMenuComponent:e})),(()=>"ElementEditor.ElementList.Element")))(p)},920:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=c(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(n(1594)),o=s(n(6935)),a=s(n(7651)),l=n(1820),i=n(455),u=n(9791),d=n(1135);function s(e){return e&&e.__esModule?e:{default:e}}function c(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(c=function(e){return e?n:t})(e)}class f extends r.Component{render(){const{isDragging:e,element:t,elementTypes:n,currentOffset:o}=this.props;if(!e||!o)return null;const{x:l,y:i}=o,u=`translate(${l}px, ${i}px)`,s={transform:u,WebkitTransform:u},c=(0,d.getElementTypeConfig)(t,n);return r.default.createElement("div",{className:"element-editor-drag-preview",style:s},r.default.createElement(a.default,{element:t,type:c,simple:!0}))}}f.propTypes={element:i.elementType,elementTypes:o.default.arrayOf(u.elementTypeType),isDragging:o.default.bool,currentOffset:o.default.shape({x:o.default.number.isRequired,y:o.default.number.isRequired})};t.default=(0,l.DragLayer)((e=>({element:e.getItem(),currentOffset:e.getSourceClientOffset(),isDragging:e.isDragging()})))(f)},6721:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=b(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(n(1594)),o=g(n(6935)),a=n(5207),l=n(9367),i=n(9791),u=n(9040),d=n(2153),s=n(1820),c=g(n(3695)),f=g(n(920)),p=g(n(5799)),m=n(2325);function g(e){return e&&e.__esModule?e:{default:e}}function b(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(b=function(e){return e?n:t})(e)}class h extends r.PureComponent{constructor(e){super(e),this.state={dragTargetElementId:null,dragSpot:null},this.handleDragOver=this.handleDragOver.bind(this),this.handleDragEnd=this.handleDragEnd.bind(this)}handleDragOver(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;const n=!!e&&e.id;this.setState({dragTargetElementId:n,dragSpot:!1===t?"bottom":"top"})}handleDragEnd(e,t){const{actions:{handleSortBlock:n},areaId:r}=this.props;n(e,t,r).then((()=>{const e=window.jQuery(".cms-preview");e.entwine("ss.preview")._loadUrl(e.find("iframe").attr("src"))})),this.setState({dragTargetElementId:null,dragSpot:null})}render(){const{fieldName:e,formState:t,ToolbarComponent:n,ListComponent:o,areaId:a,elementTypes:l,isDraggingOver:i,connectDropTarget:u,allowedElements:d}=this.props,{dragTargetElementId:s,dragSpot:c}=this.state,p=d.map((e=>l.find((t=>t.class===e))));return u(r.default.createElement("div",{className:"element-editor"},r.default.createElement(n,{elementTypes:p,areaId:a,onDragOver:this.handleDragOver}),r.default.createElement(o,{allowedElementTypes:p,elementTypes:l,areaId:a,onDragOver:this.handleDragOver,onDragStart:this.handleDragStart,onDragEnd:this.handleDragEnd,dragSpot:c,isDraggingOver:i,dragTargetElementId:s}),r.default.createElement(f.default,{elementTypes:l}),r.default.createElement("input",{name:e,type:"hidden",value:JSON.stringify(t)||"",className:"no-change-track"})))}}t.Component=h,h.propTypes={fieldName:o.default.string,elementTypes:o.default.arrayOf(i.elementTypeType).isRequired,allowedElements:o.default.arrayOf(o.default.string).isRequired,areaId:o.default.number.isRequired,actions:o.default.shape({handleSortBlock:o.default.func})};const v={},y=(0,m.createSelector)([e=>{const t=e.form.formState.element;return t||v}],(e=>{const t=(0,d.loadElementFormStateName)("[0-9]+");return Object.keys(e).filter((e=>e.match(t))).reduce(((t,n)=>({...t,[n]:e[n].values})),{})}));t.default=(0,l.compose)(p.default,(0,s.DropTarget)("element",{},((e,t)=>({connectDropTarget:e.dropTarget(),isDraggingOver:t.isOver()}))),(0,u.connect)((function(e){return{formState:y(e)}})),(0,a.inject)(["ElementToolbar","ElementList"],((e,t)=>({ToolbarComponent:e,ListComponent:t})),(()=>"ElementEditor")),c.default)(h)},2512:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=g(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(n(1594)),o=m(n(6935)),a=n(455),l=n(9791),i=n(9367),u=n(5207),d=m(n(6923)),s=m(n(5815)),c=n(1820),f=n(9306),p=n(1135);function m(e){return e&&e.__esModule?e:{default:e}}function g(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(g=function(e){return e?n:t})(e)}class b extends r.Component{getDragIndicatorIndex(){const{dragTargetElementId:e,draggedItem:t,blocks:n,dragSpot:r}=this.props;return(0,f.getDragIndicatorIndex)(n.map((e=>e.id)),e,t&&t.id,r)}renderBlocks(){const{ElementComponent:e,HoverBarComponent:t,DragIndicatorComponent:n,blocks:o,allowedElementTypes:a,elementTypes:l,areaId:i,onDragEnd:u,onDragOver:d,onDragStart:c,isDraggingOver:f}=this.props;if(!o)return null;if(o&&!o.length)return r.default.createElement("div",null,s.default._t("ElementList.ADD_BLOCKS","Add blocks to place your content"));let m=o.map((n=>r.default.createElement("div",{key:n.id},r.default.createElement(e,{element:n,areaId:i,type:(0,p.getElementTypeConfig)(n,l),link:n.blockSchema.actions.edit,onDragOver:d,onDragEnd:u,onDragStart:c}),f||r.default.createElement(t,{key:`create-after-${n.id}`,areaId:i,elementId:n.id,elementTypes:a}))));f||(m=[r.default.createElement(t,{key:0,areaId:i,elementId:0,elementTypes:a})].concat(m));const g=this.getDragIndicatorIndex();return f&&null!==g&&m.splice(g,0,r.default.createElement(n,{key:"DropIndicator"})),m}renderLoading(){const{loading:e,LoadingComponent:t}=this.props;return e?r.default.createElement(t,null):null}render(){const{blocks:e}=this.props,t=(0,d.default)("elemental-editor-list",{"elemental-editor-list--empty":!e||!e.length});return this.props.connectDropTarget(r.default.createElement("div",{className:t},this.renderLoading(),this.renderBlocks()))}}t.Component=b,b.propTypes={blocks:o.default.arrayOf(a.elementType),elementTypes:o.default.arrayOf(l.elementTypeType).isRequired,allowedElementTypes:o.default.arrayOf(l.elementTypeType).isRequired,loading:o.default.bool,areaId:o.default.number.isRequired,dragTargetElementId:o.default.oneOfType([o.default.string,o.default.bool]),onDragOver:o.default.func,onDragStart:o.default.func,onDragEnd:o.default.func},b.defaultProps={blocks:[],loading:!1};const h={drop(e,t){const{blocks:n}=e,r=t.getDropResult();if(!r)return{};const o=(0,f.getDragIndicatorIndex)(n.map((e=>e.id)),r.target,t.getItem(),r.dropSpot),a=n[o-1]?n[o-1].id:"0";return{...r,dropAfterID:a}}};t.default=(0,i.compose)((0,c.DropTarget)("element",h,((e,t)=>({connectDropTarget:e.dropTarget(),draggedItem:t.getItem()}))),(0,u.inject)(["Element","Loading","HoverBar","DragPositionIndicator"],((e,t,n,r)=>({ElementComponent:e,LoadingComponent:t,HoverBarComponent:n,DragIndicatorComponent:r})),(()=>"ElementEditor.ElementList")))(b)},7651:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=b(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(n(1594)),o=g(n(6935)),a=n(3556),l=n(455),i=n(9791),u=n(9367),d=n(5207),s=g(n(5815)),c=g(n(6923)),f=n(1820),p=n(9306),m=n(8724);function g(e){return e&&e.__esModule?e:{default:e}}function b(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(b=function(e){return e?n:t})(e)}class h extends r.Component{constructor(e){super(e),this.toggle=this.toggle.bind(this),this.state={tooltipOpen:!1}}componentDidMount(){const{connectDragPreview:e}=this.props;e&&e((0,m.getEmptyImage)(),{captureDraggingState:!0})}componentDidUpdate(){const{tooltipOpen:e}=this.state,{disableTooltip:t}=this.props;e&&t&&this.setState({tooltipOpen:!1})}getBlockTitle(e,t){return t.broken?s.default.inject(s.default._t("ElementHeader.BROKEN","This element is of obsolete type {type}."),{type:t.obsoleteClassName}):e.title?e.title:s.default.inject(s.default._t("ElementHeader.NOTITLE","Untitled {type} block"),{type:t.title})}toggle(){this.setState((e=>({tooltipOpen:!e.tooltipOpen})))}renderVersionedStateMessage(){const{element:{isLiveVersion:e,isPublished:t}}=this.props;if(t&&e)return null;let n="";const o=["element-editor-header__version-state"];return t?e||(n=s.default._t("ElementHeader.STATE_MODIFIED","Item has unpublished changes"),o.push("element-editor-header__version-state--modified")):(n=s.default._t("ElementHeader.STATE_DRAFT","Item has not been published yet"),o.push("element-editor-header__version-state--draft")),r.default.createElement("span",{className:(0,c.default)(o),title:n})}renderStatusBadge(){const{element:{isLiveVersion:e,isPublished:t}}=this.props;if(t&&e)return null;let n="",o="";const a=["badge"];return t?e||(n=s.default._t("ElementHeader.BADGE_MODIFIED","Modified"),o=s.default._t("ElementHeader.STATE_MODIFIED","Item has unpublished changes"),a.push("status-modified")):(n=s.default._t("ElementHeader.BADGE_DRAFT","Draft"),o=s.default._t("ElementHeader.STATE_DRAFT","Item has not been published yet"),a.push("status-addedtodraft")),r.default.createElement("span",{className:(0,c.default)(a),title:o},n)}render(){const{connectDragSource:e,element:t,type:n,areaId:o,previewExpanded:l,simple:i,disableTooltip:u,activeTab:d,expandable:f,ElementActionsComponent:p,handleEditTabsClick:m}=this.props,g=this.getBlockTitle(t,n),b=(0,c.default)({"element-editor-header__title":!0,"element-editor-header__title--none":!t.title}),h=s.default._t("ElementHeader.EXPAND","Show editable fields"),v=(0,c.default)("element-editor-header",{"element-editor-header--simple":i}),y=(0,c.default)("element-editor-header__icon-container",{"element-editor-header__icon-container--broken":n.broken}),_=(0,c.default)("element-editor-header__expand",{"font-icon-right-open-big":!f,"font-icon-up-open-big":f&&l,"font-icon-down-open-big":f&&!l}),E=`element-icon-${t.id}`,O=r.default.createElement("div",{className:v},r.default.createElement("div",{className:"element-editor-header__drag-handle"},r.default.createElement("i",{className:"font-icon-drag-handle"})),r.default.createElement("div",{className:"element-editor-header__info"},r.default.createElement("div",{className:y},r.default.createElement("i",{className:n.icon,id:E}),this.renderVersionedStateMessage(),!n.broken&&!i&&r.default.createElement(a.Tooltip,{placement:"top",isOpen:this.state.tooltipOpen&&!u,target:E,toggle:this.toggle},n.title)),r.default.createElement("h3",{className:b},g),this.renderStatusBadge()),!i&&r.default.createElement("div",{className:"element-editor-header__actions"},r.default.createElement("div",{role:"none",onClick:e=>e.stopPropagation()},r.default.createElement(p,{element:t,type:n,areaId:o,activeTab:d,editTabs:n.editTabs,handleEditTabsClick:m,expandable:f})),!n.broken&&r.default.createElement("i",{className:_,title:h})));return l?e(O):O}}t.Component=h,h.propTypes={element:l.elementType.isRequired,type:i.elementTypeType.isRequired,areaId:o.default.number,activeTab:o.default.string,simple:o.default.bool,ElementActionsComponent:o.default.elementType,previewExpanded:o.default.bool,disableTooltip:o.default.bool,connectDragSource:o.default.func.isRequired,connectDragPreview:o.default.func.isRequired,onDragEnd:o.default.func},h.defaultProps={expandable:!0};t.default=(0,u.compose)((0,f.DragSource)("element",p.elementDragSource,(e=>({connectDragSource:e.dragSource(),connectDragPreview:e.dragPreview()}))),(0,d.inject)(["ElementActions"],(e=>({ElementActionsComponent:e})),(()=>"ElementEditor.ElementList.Element")))(h)},8953:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=d(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(n(1594)),o=u(n(6935)),a=n(5207),l=n(9791),i=u(n(5815));function u(e){return e&&e.__esModule?e:{default:e}}function d(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(d=function(e){return e?n:t})(e)}const s=(0,u(n(7577)).default)("element-editor__hover-bar");function c(e){let{AddElementPopoverComponent:t,elementTypes:n,elementId:o,areaId:a,popoverOpen:l,onToggle:u}=e;const d=`${s("-line")} font-icon-plus-circled`,c=i.default._t("ElementAddNewButton.ADD_BLOCK","Add block"),f={className:s("-area",{"-area--focus":l}),onClick:u,"aria-label":c,title:c,id:`AddBlockHoverBarArea_${a}_${o}`};return r.default.createElement("div",{className:s(""),id:`AddBlockHoverBar_${a}_${o}`},r.default.createElement("button",f,r.default.createElement("span",{className:s("-area-inner")},r.default.createElement("span",{className:d}))),r.default.createElement(t,{placement:"bottom",target:`AddBlockHoverBarArea_${a}_${o}`,isOpen:l,elementTypes:n,toggle:u,container:`#AddBlockHoverBar_${a}_${o}`,areaId:a,insertAfterElement:o}))}class f extends r.Component{constructor(e){super(e),this.toggle=this.toggle.bind(this),this.state={popoverOpen:!1}}toggle(){this.setState((e=>({popoverOpen:!e.popoverOpen})))}render(){const e={...this.state,...this.props,onToggle:this.toggle};return r.default.createElement(c,e)}}t.Component=f,f.propTypes={elementTypes:o.default.arrayOf(l.elementTypeType).isRequired,elementId:o.default.oneOfType([o.default.string,o.default.number]).isRequired,areaId:o.default.oneOfType([o.default.number,o.default.string]).isRequired};t.default=(0,a.inject)(["AddElementPopover"],(e=>({AddElementPopoverComponent:e})),(()=>"ElementEditor.ElementList.HoverBar"))(f)},7333:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=f(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(n(1594)),o=c(n(6935)),a=c(n(6923)),l=c(n(55)),i=n(7785),u=c(n(5815)),d=n(2153),s=n(9040);function c(e){return e&&e.__esModule?e:{default:e}}function f(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(f=function(e){return e?n:t})(e)}function p(){return p=Object.assign?Object.assign.bind():function(e){for(var t=1;t{t.match(/PageElements_[0-9]+_Title/)&&(r=e[t])})),n().then((e=>this.props.onFormSchemaSubmitResponse(e,r)))}render(){const{elementId:e,extraClass:t,onClick:n,onFormInit:o,formHasState:u,notVisible:d}=this.props,{loadingError:s}=this.state,c=(0,a.default)("element-editor-editform",t),f={formTag:"form",schemaUrl:(0,i.loadElementSchemaValue)("schemaUrl",e),identifier:"element",refetchSchemaOnMount:!u,onLoadingError:this.handleLoadingError,onSubmit:this.handleSubmit};s&&(f.loading=!1),"function"==typeof o&&(f.onReduxFormInit=o);const m={};return d&&(m["aria-hidden"]="true"),r.default.createElement("div",p({className:c,onClick:n,role:"presentation"},m),r.default.createElement(l.default,f))}}m.propTypes={extraClass:o.default.oneOfType([o.default.string,o.default.object]),onClick:o.default.func,elementId:o.default.string,handleLoadingError:o.default.func,onFormSchemaSubmitResponse:o.default.func,notVisible:o.default.bool};t.default=(0,s.connect)((function(e,t){const n=(0,d.loadElementFormStateName)(t.elementId);return{formHasState:e.form.formState&&e.form.formState.element&&!!e.form.formState.element[n]}}))(m)},7660:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=u(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(n(1594)),o=i(n(6935)),a=i(n(6923)),l=i(n(5815));function i(e){return e&&e.__esModule?e:{default:e}}function u(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(u=function(e){return e?n:t})(e)}class d extends r.PureComponent{render(){const{fileUrl:e,fileTitle:t,content:n,broken:o}=this.props,i=l.default._t("ElementSummary.NO_PREVIEW","No preview available"),u=(0,a.default)("element-editor-summary__content",{"element-editor-summary__content--broken":o});return r.default.createElement("div",{className:"element-editor-summary"},e&&r.default.createElement("img",{className:"element-editor-summary__thumbnail-image",src:e,alt:t}),(n||!e)&&r.default.createElement("p",{className:u},n||i))}}d.defaultProps={},d.propTypes={content:o.default.string,fileUrl:o.default.string,fileTitle:o.default.string,broken:o.default.bool};t.default=d},5563:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r,o=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=d(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(n(1594)),a=(r=n(6935))&&r.__esModule?r:{default:r},l=n(5207),i=n(9791),u=n(1820);function d(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(d=function(e){return e?n:t})(e)}class s extends o.PureComponent{render(){const{AddNewButtonComponent:e,elementTypes:t,areaId:n,connectDropTarget:r}=this.props;return r(o.default.createElement("div",{className:"element-editor__toolbar"},o.default.createElement(e,{elementTypes:t,areaId:n})))}}s.defaultProps={},s.propTypes={elementTypes:a.default.arrayOf(i.elementTypeType).isRequired,areaId:a.default.number.isRequired,AddNewButtonComponent:a.default.elementType.isRequired,connectDropTarget:a.default.func.isRequired,onDragOver:a.default.func,onDragDrop:a.default.func};const c={hover(e){const{onDragOver:t}=e;t&&t()}};t.default=(0,u.DropTarget)("element",c,(e=>({connectDropTarget:e.dropTarget()})))((0,l.inject)(["ElementAddNewButton"],(e=>({AddNewButtonComponent:e})),(()=>"ElementEditor.ElementToolbar"))(s))},2977:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=l(n(1594)),o=l(n(5815)),a=l(n(6923));function l(e){return e&&e.__esModule?e:{default:e}}t.default=e=>class extends e{getClassName(){const e=[super.getClassName()];return this.props.data.ElementID&&e.unshift("elemental-area__element--historic-inner"),(0,a.default)(e)}render(){const e=this.getLegend(),t=this.props.data.tag||"div",n=this.getClassName(),{data:a}=this.props;return a.ElementID?r.default.createElement(t,{className:n},e,r.default.createElement("div",{className:"elemental-preview elemental-preview--historic"},a.ElementEditLink&&r.default.createElement("a",{className:"elemental-preview__link",href:a.ElementEditLink},r.default.createElement("span",{className:"elemental-preview__link-text"},o.default._t("HistoricElementView.VIEW_BLOCK_HISTORY","Block history")),r.default.createElement("i",{className:"font-icon-angle-right btn--icon-lg elemental-preview__link-caret"})),r.default.createElement("div",{className:"elemental-preview__icon"},r.default.createElement("i",{className:a.ElementIcon})),r.default.createElement("div",{className:"elemental-preview__detail"},r.default.createElement("h3",null,a.ElementTitle," ",r.default.createElement("small",null,a.ElementType)))),this.props.children):super.render()}}},6573:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=l(n(1594)),o=n(3556),a=l(n(2623));function l(e){return e&&e.__esModule?e:{default:e}}t.default=(0,a.default)((e=>{const{children:t}=e,n=r.default.Children.toArray(r.default.Children.map(t,((t,n)=>{const o={};return 0===n?(o.id=e.id,o.title=null):1===n&&(o.noHolder=!0),r.default.cloneElement(t,o)})));return e.readOnly?r.default.createElement("div",{className:"text-checkbox-group-field--read-only"},n):1===n.length?n[0]:r.default.createElement(o.InputGroup,{className:"text-checkbox-group-field"},n[0],r.default.createElement(o.InputGroupAddon,{addonType:"append"},r.default.createElement(o.InputGroupText,null,n[1])))}))},51:function(e,t,n){var r=d(n(1669)),o=d(n(1594)),a=n(5145),l=n(5207),i=n(1135),u=n(5381);function d(e){return e&&e.__esModule?e:{default:e}}const s=()=>{window.ss.apolloClient.resetStore(),setTimeout((()=>{const{store:e}=window.ss;e&&e.dispatch((0,u.destroy)(...Object.keys(e.getState().form.formState.element||{}).map((e=>`element.${e}`))))}),0)};r.default.entwine("ss",(e=>{e(".js-injector-boot .element-editor__container").entwine({ReactRoot:null,onmatch(){const e=(0,l.loadComponent)("ElementEditor",{}),t=this.data("schema"),n=(0,i.getConfig)().elementTypes,r={fieldName:this.attr("name"),areaId:t["elemental-area-id"],allowedElements:t["allowed-elements"],elementTypes:n};let u=this.getReactRoot();u||(u=(0,a.createRoot)(this[0]),this.setReactRoot(u)),u.render(o.default.createElement(e,r))},onunmatch(){e(".cms-edit-form").data("hasValidationErrors")||s();const t=this.getReactRoot();t&&(t.unmount(),this.setReactRoot(null))},"from .cms-edit-form":{onaftersubmitform(t,n){const r=JSON.parse(n.xhr.responseText).ValidationResult;JSON.parse(r.replace(/<\/?script[^>]*?>/g,"")).isValid?(e(".cms-edit-form").data("hasValidationErrors",!1),s()):e(".cms-edit-form").data("hasValidationErrors",!0)}}}),e(".js-injector-boot .element-editor__container .element-form-dirty-state").entwine({onmatch(){e(".cms-edit-form").trigger("change")},onunmatch(){e(".cms-edit-form").trigger("change")}}),e(".cms-edit-form").entwine({getChangeTrackerOptions(){const t=void 0===this.entwineData("ChangeTrackerOptions");let n=this._super();return t&&(n=e.extend({},n),n.ignoreFieldSelector+=", .elementalarea :input:not(.element-form-dirty-state)",this.setChangeTrackerOptions(n)),n}})}))},9306:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.isOverTop=t.getDragIndicatorIndex=t.elementDragSource=void 0;var r=n(4518);t.isOverTop=(e,t)=>{const n=e.getClientOffset(),o=(0,r.findDOMNode)(t).getBoundingClientRect();return n.y{if(null===t||!n)return null;let o=t?e.findIndex((e=>e===t)):0;const a=e.findIndex((e=>e===n));return"bottom"===r&&(o+=1),a===o||a+1===o?null:o};t.elementDragSource={beginDrag(e){return e.element},endDrag(e,t){const{onDragEnd:n}=e,r=t.getDropResult();if(!n||!r||!r.dropAfterID)return;const o=t.getItem().id,{dropAfterID:a}=r;o!==a&&n(o,a)}}},7577:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r,o=(r=n(6923))&&r.__esModule?r:{default:r};t.default=e=>function(){const t=t=>`${e}${t}`;for(var n=arguments.length,r=new Array(n),a=0;a!(!e&&""!==e)&&("object"==typeof e?Array.isArray(e)?e.map(t):Object.entries(e).reduce(((e,n)=>{let[r,o]=n;return Object.assign({},e,{[t(r)]:o})}),{}):t(e))));return(0,o.default)(...l)}},6283:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.mutation=t.default=t.config=void 0;var r,o=n(708),a=(r=n(7284))&&r.__esModule?r:{default:r},l=n(3521);const i=t.mutation=a.default` +!function(){"use strict";var e={2038:function(e,t,n){var r=a(n(4121)),o=a(n(1240));function a(e){return e&&e.__esModule?e:{default:e}}window.document.addEventListener("DOMContentLoaded",(()=>{(0,r.default)(),(0,o.default)()}))},4121:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=v(n(5207)),o=v(n(584)),a=v(n(7105)),l=v(n(6721)),i=v(n(2512)),s=v(n(5563)),d=v(n(5297)),u=v(n(7651)),c=v(n(1305)),f=v(n(7660)),p=v(n(7333)),m=v(n(2382)),g=v(n(8953)),h=v(n(1950)),b=v(n(6573));function v(e){return e&&e.__esModule?e:{default:e}}t.default=()=>{r.default.component.registerMany({ElementEditor:l.default,ElementToolbar:s.default,ElementAddNewButton:d.default,ElementList:i.default,Element:o.default,ElementActions:a.default,ElementHeader:u.default,ElementContent:c.default,ElementSummary:f.default,ElementInlineEditForm:p.default,AddElementPopover:m.default,HoverBar:g.default,DragPositionIndicator:h.default,TextCheckboxGroupField:b.default})}},1240:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=m(n(5207)),o=m(n(5071)),a=m(n(2977)),l=m(n(8633)),i=m(n(3521)),s=m(n(6283)),d=m(n(4)),u=m(n(9283)),c=m(n(8501)),f=m(n(2221)),p=m(n(5904));function m(e){return e&&e.__esModule?e:{default:e}}t.default=()=>{r.default.transform("elemental-fieldgroup",(e=>{e.component("FieldGroup.HistoryViewer.VersionDetail",a.default,"HistoricElement")}),{after:"field-holders"}),r.default.transform("elements-history",(e=>{e.component("HistoryViewer.Form_ItemEditForm",o.default,"ElementHistoryViewer")})),r.default.transform("blocks-history-revert",(e=>{e.component("HistoryViewerToolbar.VersionedAdmin.HistoryViewer.Element.HistoryViewerVersionDetail",l.default,"BlockRevertMutation")})),r.default.transform("cms-element-editor",(e=>{e.component("ElementList",i.default,"PageElements")})),r.default.transform("cms-element-adder",(e=>{e.component("AddElementPopover",s.default,"ElementAddButton")})),r.default.transform("element-actions",(e=>{e.component("ElementActions",c.default,"ElementActionsWithSave"),e.component("ElementActions",f.default,"ElementActionsWithPublish"),e.component("ElementActions",p.default,"ElementActionsWithUnpublish"),e.component("ElementActions",u.default,"ElementActionsWithDuplicate"),e.component("ElementActions",d.default,"ElementActionsWithArchive")}))}},26:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=s(n(1594)),o=s(n(6935)),a=s(n(6923)),l=n(3556),i=n(9791);function s(e){return e&&e.__esModule?e:{default:e}}const d=e=>{const{className:t,title:n,label:o}=e,i={className:(0,a.default)(t,"dropdown-item"),...e};return r.default.createElement(l.DropdownItem,i,o||n)};d.propTypes={disabled:o.default.bool,className:o.default.string,onClick:o.default.func,title:o.default.string,name:o.default.string,type:i.elementTypeType,active:o.default.bool,label:o.default.string},d.defaultProps={disabled:!1};t.default=d},4:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=s(n(1594)),o=n(9367),a=s(n(26)),l=s(n(1429)),i=s(n(5815));function s(e){return e&&e.__esModule?e:{default:e}}const d=e=>t=>{const n=void 0!==t.element.canDelete&&!t.element.canDelete,o=i.default._t("ElementArchiveAction.ARCHIVE","Archive"),l={label:o,title:n?i.default._t("ElementArchiveAction.ARCHIVE_PERMISSION_DENY","Archive, insufficient permissions"):o,disabled:n,className:"element-editor__actions-archive",onClick:e=>{e.stopPropagation();const{element:{id:n},isPublished:r,actions:{handleArchiveBlock:o}}=t;let a=i.default._t("ElementArchiveAction.CONFIRM_DELETE","Are you sure you want to send this block to the archive?");r&&(a=i.default._t("ElementArchiveAction.CONFIRM_DELETE_AND_UNPUBLISH","Warning: This block will be unpublished before being sent to the archive. Are you sure you want to proceed?")),o&&window.confirm(a)&&o(n).then((()=>{const e=window.jQuery(".cms-preview");e&&"function"==typeof e.entwine&&e.entwine("ss.preview")._loadUrl(e.find("iframe").attr("src"))}))},toggle:t.toggle};return r.default.createElement(e,t,t.children,r.default.createElement(a.default,l))};t.Component=d;t.default=(0,o.compose)(l.default,d)},9283:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=s(n(1594)),o=n(9367),a=s(n(26)),l=s(n(9324)),i=s(n(5815));function s(e){return e&&e.__esModule?e:{default:e}}const d=e=>t=>{if(t.type.broken)return r.default.createElement(e,t);const n=void 0!==t.element.canCreate&&!t.element.canCreate,o=i.default._t("ElementArchiveAction.DUPLICATE","Duplicate"),l={label:o,title:n?i.default._t("ElementArchiveAction.DUPLICATE_PERMISSION_DENY","Duplicate, insufficient permissions"):o,disabled:n,className:"element-editor__actions-duplicate",onClick:e=>{e.stopPropagation();const{element:{id:n},actions:{handleDuplicateBlock:r}}=t;r&&r(n).then((()=>{const e=window.jQuery(".cms-preview");e.entwine("ss.preview")._loadUrl(e.find("iframe").attr("src"))}))},toggle:t.toggle};return r.default.createElement(e,t,t.children,r.default.createElement(a.default,l))};t.Component=d;t.default=(0,o.compose)(l.default,d)},2221:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=s(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(n(1594)),o=i(n(26)),a=i(n(5815)),l=n(584);function i(e){return e&&e.__esModule?e:{default:e}}function s(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(s=function(e){return e?n:t})(e)}const d=e=>t=>{const{formDirty:n,onPublishButtonClick:i}=(0,r.useContext)(l.ElementContext),{element:s}=t,d=void 0!==t.element.canPublish&&!t.element.canPublish,u=a.default._t("ElementArchiveAction.PUBLISH","Publish"),c={label:u,title:d?a.default._t("ElementArchiveAction.PUBLISH_PERMISSION_DENY","Publish, insufficient permissions"):u,disabled:d,className:"element-editor__actions-publish",onClick:e=>{e.stopPropagation(),i()},toggle:t.toggle};return t.type.broken?r.default.createElement(e,t):r.default.createElement(e,t,t.children,(n||!s.isLiveVersion)&&r.default.createElement(o.default,c))};t.Component=d;t.default=d},8501:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=s(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(n(1594)),o=i(n(26)),a=i(n(5815)),l=n(584);function i(e){return e&&e.__esModule?e:{default:e}}function s(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(s=function(e){return e?n:t})(e)}const d=e=>t=>{const{onSaveButtonClick:n,formDirty:i}=(0,r.useContext)(l.ElementContext),s={title:a.default._t("ElementSaveAction.SAVE","Save"),className:"element-editor__actions-save",onClick:e=>{e.stopPropagation(),n()},toggle:t.toggle};return!t.expandable||t.type.broken?r.default.createElement(e,t):r.default.createElement(e,t,t.children,i&&r.default.createElement(o.default,s))};t.Component=d;t.default=d},5904:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=s(n(1594)),o=n(9367),a=s(n(26)),l=s(n(2393)),i=s(n(5815));function s(e){return e&&e.__esModule?e:{default:e}}const d=e=>t=>{if(t.type.broken)return r.default.createElement(e,t);const{element:n,type:o,actions:{handleUnpublishBlock:l}}=t,s=void 0!==t.element.canUnpublish&&!t.element.canUnpublish,d=i.default._t("ElementArchiveAction.UNPUBLISH","Unpublish"),u={label:d,title:s?i.default._t("ElementArchiveAction.UNPUBLISH_PERMISSION_DENY","Unpublish, insufficient permissions"):d,disabled:s,className:"element-editor__actions-unpublish",onClick:e=>{e.stopPropagation();const{jQuery:t}=window,r=i.default.inject(i.default._t("ElementHeader.NOTITLE","Untitled {type} block"),{type:o.title});l&&l(n.id).then((()=>{const e=t(".cms-preview");e.entwine("ss.preview")._loadUrl(e.find("iframe").attr("src")),t.noticeAdd({text:i.default.inject(i.default._t("ElementUnpublishAction.SUCCESS_NOTIFICATION","Removed '{title}' from the published page"),{title:n.title||r}),stay:!1,type:"success"})})).catch((()=>{t.noticeAdd({text:i.default.inject(i.default._t("ElementUnpublishAction.ERROR_NOTIFICATION","Error unpublishing '{title}'"),{title:n.title||r}),stay:!1,type:"error"})}))},toggle:t.toggle};return r.default.createElement(e,t,t.children,n.isPublished&&r.default.createElement(a.default,u))};t.Component=d;t.default=(0,o.compose)(l.default,d)},2382:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=u(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(n(1594)),o=d(n(6935)),a=d(n(6923)),l=n(5207),i=n(9791),s=d(n(5815));function d(e){return e&&e.__esModule?e:{default:e}}function u(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(u=function(e){return e?n:t})(e)}class c extends r.Component{constructor(e){super(e),this.handleToggle=this.handleToggle.bind(this)}getElementButtonClickHandler(e){return t=>{const{actions:{handleAddElementToArea:n},insertAfterElement:r}=this.props;t.preventDefault(),n(e.class,r).then((()=>{const e=window.jQuery(".cms-preview");e.entwine("ss.preview")._loadUrl(e.find("iframe").attr("src"))})),this.handleToggle()}}handleToggle(){const{toggle:e}=this.props;e()}render(){const{PopoverOptionSetComponent:e,elementTypes:t,container:n,extraClass:o,isOpen:l,placement:i,target:d}=this.props,u=(0,a.default)("element-editor-add-element",o),c=t.map((e=>({content:e.title,key:e.name,className:(0,a.default)(e.icon,"btn--icon-xl","element-editor-add-element__button"),onClick:this.getElementButtonClickHandler(e)})));return r.default.createElement(e,{buttons:c,searchPlaceholder:s.default._t("ElementAddElementPopover.SEARCH_BLOCKS","Search blocks"),extraClass:u,container:n,isOpen:l,placement:i,target:d,toggle:this.handleToggle})}}c.propTypes={container:o.default.oneOfType([o.default.string,o.default.func,o.default.object]),elementTypes:o.default.arrayOf(i.elementTypeType).isRequired,extraClass:o.default.oneOfType([o.default.string,o.default.array,o.default.object]),isOpen:o.default.bool.isRequired,placement:o.default.string,target:o.default.oneOfType([o.default.string,o.default.func,o.default.object]).isRequired,toggle:o.default.func.isRequired,areaId:o.default.number.isRequired,insertAfterElement:o.default.oneOfType([o.default.number,o.default.string])};t.default=(0,l.inject)(["PopoverOptionSet"],(e=>({PopoverOptionSetComponent:e})),(()=>"ElementEditor"))(c)},5297:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=u(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(n(1594)),o=d(n(6935)),a=n(3556),l=d(n(5815)),i=n(9791),s=n(5207);function d(e){return e&&e.__esModule?e:{default:e}}function u(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(u=function(e){return e?n:t})(e)}class c extends r.Component{constructor(e){super(e),this.toggle=this.toggle.bind(this),this.state={popoverOpen:!1}}toggle(){this.setState((e=>({popoverOpen:!e.popoverOpen})))}render(){const{AddElementPopoverComponent:e,elementTypes:t,areaId:n}=this.props,o={id:`ElementalArea${n}_AddButton`,color:"primary",onClick:this.toggle,className:"font-icon-plus"};return r.default.createElement("div",null,r.default.createElement(a.Button,o,l.default._t("ElementAddNewButton.ADD_BLOCK","Add block")),r.default.createElement(e,{placement:"bottom-start",target:o.id,isOpen:this.state.popoverOpen,elementTypes:t,toggle:this.toggle,areaId:n,insertAfterElement:0}))}}t.Component=c,c.defaultProps={},c.propTypes={elementTypes:o.default.arrayOf(i.elementTypeType).isRequired,areaId:o.default.number.isRequired};t.default=(0,s.inject)(["AddElementPopover"],(e=>({AddElementPopoverComponent:e})),(()=>"ElementEditor.ElementList.AddNewButton"))(c)},1305:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r,o=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=s(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(n(1594)),a=(r=n(6935))&&r.__esModule?r:{default:r},l=n(5207),i=n(9367);function s(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(s=function(e){return e?n:t})(e)}class d extends o.PureComponent{render(){const{id:e,fileUrl:t,fileTitle:n,content:r,previewExpanded:a,InlineEditFormComponent:l,SummaryComponent:i,activeTab:s,onFormInit:d,handleLoadingError:u,formDirty:c,broken:f,onFormSchemaSubmitResponse:p,ensureFormRendered:m,formHasRendered:g}=this.props,h=!a&&(m||g),b={"element-editor-editform--collapsed":!a,"element-editor-editform--rendered-not-visible":h};return o.default.createElement("div",{className:"element-editor-content"},!a&&o.default.createElement(i,{content:r,fileUrl:t,fileTitle:n,broken:f}),(a||m||g)&&o.default.createElement(l,{extraClass:b,onClick:e=>e.stopPropagation(),elementId:e,activeTab:s,onFormInit:d,handleLoadingError:u,onFormSchemaSubmitResponse:p,notVisible:h}),c&&o.default.createElement("input",{type:"hidden",name:"change-tracker",className:"element-form-dirty-state",value:"1"}))}}t.Component=d,d.propTypes={id:a.default.string,content:a.default.string,fileUrl:a.default.string,fileTitle:a.default.string,previewExpanded:a.default.bool,SummaryComponent:a.default.elementType,InlineEditFormComponent:a.default.elementType,handleLoadingError:a.default.func,broken:a.default.bool,onFormSchemaSubmitResponse:a.default.func,onFormInit:a.default.func,ensureFormRendered:a.default.bool,formHasRendered:a.default.bool,formDirty:a.default.object},d.defaultProps={};t.default=(0,i.compose)((0,l.inject)(["ElementSummary","ElementInlineEditForm"],((e,t)=>({SummaryComponent:e,InlineEditFormComponent:t})),(()=>"ElementEditor.ElementList.Element")))(d)},1950:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=o(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var l in e)if("default"!==l&&{}.hasOwnProperty.call(e,l)){var i=a?Object.getOwnPropertyDescriptor(e,l):null;i&&(i.get||i.set)?Object.defineProperty(r,l,i):r[l]=e[l]}return r.default=e,n&&n.set(e,r),r}(n(1594));function o(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(o=function(e){return e?n:t})(e)}class a extends r.PureComponent{render(){return r.default.createElement("div",{className:"elemental-editor-drag-indicator"},r.default.createElement("div",{className:"elemental-editor-drag-indicator__ball"}))}}t.default=a},584:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.ElementContext=t.Component=void 0;var r=I(n(1594)),o=n(8695),a=D(n(6935)),l=n(455),i=n(9791),s=n(9367),d=n(5207),u=D(n(5815)),c=D(n(6923)),f=n(9040),p=n(5381),m=n(2153),g=n(7785),h=n(4242),b=n(3521),v=I(n(5034)),y=n(1820),_=n(8724),E=n(9306),O=I(n(8918)),T=n(9077);function D(e){return e&&e.__esModule?e:{default:e}}function k(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(k=function(e){return e?n:t})(e)}function I(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=k(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}const C=t.ElementContext=(0,r.createContext)(null),P=e=>{const[t,n]=(0,r.useState)(!1),[a,l]=(0,r.useState)(""),[i,s]=(0,r.useState)(!1),[d,f]=(0,r.useState)(e.element.title),[p,m]=(0,r.useState)(!1),[g,v]=(0,r.useState)(!1),[y,E]=(0,r.useState)(!1),[O,T]=(0,r.useState)(!1),[D,k]=(0,r.useState)(!1),[I,P]=(0,r.useState)(!1),[S,w]=(0,r.useState)(!1),[j,A]=(0,r.useState)(!1),[M]=(0,o.useMutation)(h.publishBlockMutation);(0,r.useEffect)((()=>{void 0!==e.formDirty&&!j&&A(!0)}),[e.formDirty]),(0,r.useEffect)((()=>{e.onChangeHasUnsavedChanges(j)}),[j]),(0,r.useEffect)((()=>{e.saveElement&&j&&!g&&v(!0)}),[e.saveElement,j,e.increment]),(0,r.useEffect)((()=>{e.connectDragPreview&&e.connectDragPreview((0,_.getEmptyImage)(),{captureDraggingState:!0})}),[]),(0,r.useEffect)((()=>{p&&I&&(m(!1),j?(e.submitForm(),T(!0)):E(!0))}),[p,I]),(0,r.useEffect)((()=>{S&&(w(!1),e.dispatchAddFormChanged())}),[S]);const R=()=>u.default.inject(u.default._t("ElementHeader.NOTITLE","Untitled {type} block"),{type:e.type.title}),N=()=>window.ss.apolloClient.queryManager.refetchQueries({include:[{query:b.query,variables:{id:e.areaId}}]}),B=t=>{(t=>{const n=d||R();if(t){const t=u.default.inject(u.default._t("ElementPublishAction.ERROR_NOTIFICATION","Error publishing '{title}'"),{title:n});e.actions.toasts.error(t)}else{const t=u.default.inject(u.default._t("ElementPublishAction.SUCCESS_NOTIFICATION","Published '{title}' successfully"),{title:n});e.actions.toasts.success(t)}})(t),E(!1),T(!1),Promise.all(N()).then((()=>{setTimeout((()=>e.dispatchRemoveFormChanged()),250)}))};(0,r.useEffect)((()=>{I&&g&&(e.submitForm(),v(!1))}),[I,g]),(0,r.useEffect)((()=>{I&&y&&M({variables:{blockId:e.element.id}}).then((()=>B(!1))).catch((()=>B(!0)))}),[I,y]);const x=t=>{const{tabSetName:n,onActivateTab:r}=e;if(a||l(t),t||a)r(n,t||a);else{r(n,"Main")}},q=r=>{const{type:o,link:a}=e;o.broken||("button"!==r.target.type?!o.inlineEditable||i?window.location=a:n(!t):r.stopPropagation())},{element:L,type:F,areaId:$,HeaderComponent:U,ContentComponent:H,link:W,activeTab:V,connectDragSource:Q,connectDropTarget:K,isDragging:G,isOver:Y,onDragEnd:J,formDirty:X}=e;if(!L.id)return null;const z=(0,c.default)("element-editor__element",{"element-editor__element--broken":F.broken,"element-editor__element--expandable":F.inlineEditable&&!F.broken,"element-editor__element--dragging":G,"element-editor__element--dragged-over":Y},(()=>{const{element:t}=e,n="element-editor__element";return t.isPublished?t.isPublished&&!t.isLiveVersion?`${n}--modified`:`${n}--published`:`${n}--draft`})()),Z={formDirty:X,onPublishButtonClick:()=>{m(!0),k(!0)},onSaveButtonClick:()=>{k(!0),v(!0)}},ee=K(r.default.createElement("div",{className:z,onClick:q,onKeyUp:e=>{const{nodeName:t}=e.target;" "!==e.key&&"Enter"!==e.key||["input","textarea"].includes(t.toLowerCase())||q(e)},role:"button",tabIndex:0,title:(e=>e.broken?u.default._t("ElementalElement.ARCHIVE_BROKEN","Archive this block"):u.default.inject(u.default._t("ElementalElement.TITLE","Edit this {type} block"),{type:e.title}))(F),key:L.id},r.default.createElement(C.Provider,{value:Z},r.default.createElement(U,{element:L,type:F,areaId:$,expandable:F.inlineEditable,link:W,previewExpanded:t,handleEditTabsClick:t=>{const{activeTab:r}=e;t===r||i||(n(!0),x(t))},activeTab:V,disableTooltip:G,onDragEnd:J}),r.default.createElement(H,{id:L.id,fileUrl:L.blockSchema.fileURL,fileTitle:L.blockSchema.fileTitle,content:((e,t)=>t.broken?e.title?u.default.inject(u.default._t("ElementalElement.BROKEN_DESCRIPTION_TITLE",'This block had the title "{title}". It is broken and will not display on the front-end. You can archive it to remove it from this elemental area.'),{title:e.title}):u.default._t("ElementalElement.BROKEN_DESCRIPTION","This block is broken and will not display on the front-end. You can archive it to remove it from this elemental area."):e.blockSchema.content)(L,F),previewExpanded:t&&!G,ensureFormRendered:D,formHasRendered:I,activeTab:V,handleLoadingError:()=>{s(!0)},broken:F.broken,onFormSchemaSubmitResponse:(t,r)=>{if(t.id.match(/\/schema\/elemental-area\/([0-9]+)/))return e.type.inlineEditable&&n(!0),w(!0),O&&T(!1),void e.onAfterSubmitResponse(!1);A(!1),f(r),O&&(T(!1),E(!0)),y||O||(t=>{const n=t||R(),r=u.default.inject(u.default._t("ElementSaveAction.SUCCESS_NOTIFICATION","Saved '{title}' successfully"),{title:n});e.actions.toasts.success(r)})(r),N(),e.onAfterSubmitResponse(!0)},onFormInit:()=>(e=>{x(e),P(!0)})(V)}))));return t?ee:Q(ee)};t.Component=P,P.propTypes={element:l.elementType,type:i.elementTypeType.isRequired,areaId:a.default.number.isRequired,link:a.default.string.isRequired,activeTab:a.default.string,tabSetName:a.default.string,onActivateTab:a.default.func,connectDragSource:a.default.func.isRequired,connectDragPreview:a.default.func.isRequired,connectDropTarget:a.default.func.isRequired,isDragging:a.default.bool.isRequired,isOver:a.default.bool.isRequired,onDragOver:a.default.func,onDragEnd:a.default.func,onDragStart:a.default.func,saveElement:a.default.bool.isRequired,onBeforeSubmitForm:a.default.func.isRequired,onAfterSubmitResponse:a.default.func.isRequired,increment:a.default.number.isRequired},P.defaultProps={element:null};const S={drop(e,t,n){const{element:r}=e;return{target:r.id,dropSpot:(0,E.isOverTop)(t,n)?"top":"bottom"}},hover(e,t,n){const{element:r,onDragOver:o}=e;o&&o(r,(0,E.isOverTop)(t,n))}};t.default=(0,s.compose)((0,y.DropTarget)("element",S,((e,t)=>({connectDropTarget:e.dropTarget(),isOver:t.isOver()}))),(0,y.DragSource)("element",E.elementDragSource,((e,t)=>({connectDragSource:e.dragSource(),connectDragPreview:e.dragPreview(),isDragging:t.isDragging()}))),(0,f.connect)((function(e,t){const n=t.element.id,r=(0,m.loadElementFormStateName)(n),o=(0,g.loadElementSchemaValue)("schemaUrl",n),a=e.form&&e.form.formSchemas[o]&&e.form.formSchemas[o].schema&&e.form.formSchemas[o].schema.fields.find((e=>"Tabs"===e.component)),l=a&&a.id,i=`element.${r}__${l}`,s=e.unsavedForms.find((e=>e.name===`element.${r}`));return{tabSetName:l,activeTab:e.tabs&&e.tabs.fields&&e.tabs.fields[i]&&e.tabs.fields[i].activeTab,formDirty:s}}),(function(e,t){const n=(0,m.loadElementFormStateName)(t.element.id);return{onActivateTab(t,r){e(v.activateTab(`element.${n}__${t}`,r))},submitForm(){t.onBeforeSubmitForm(t.element.id),e((0,p.submit)(`element.${n}`))},dispatchAddFormChanged(){e((0,T.addFormChanged)(`element.${n}`))},dispatchRemoveFormChanged(){e((0,T.removeFormChanged)(`element.${n}`))},actions:{toasts:(0,s.bindActionCreators)(O,e)}}})),(0,d.inject)(["ElementHeader","ElementContent"],((e,t)=>({HeaderComponent:e,ContentComponent:t})),(()=>"ElementEditor.ElementList.Element")))(P)},7105:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=f(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(n(1594)),o=c(n(6935)),a=n(9367),l=n(3556),i=n(5207),s=n(455),d=n(9791),u=c(n(26));function c(e){return e&&e.__esModule?e:{default:e}}function f(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(f=function(e){return e?n:t})(e)}class p extends r.Component{constructor(e){super(e),this.handleEditTabsClick=this.handleEditTabsClick.bind(this)}handleEditTabsClick(e){const{handleEditTabsClick:t}=this.props;t(e.target.name)}renderEditTabs(){const{editTabs:e,activeTab:t,type:n,expandable:o}=this.props;return!n.broken&&o&&e&&e.length?e.map((e=>{let{name:o,title:a}=e;return r.default.createElement(u.default,{key:o,name:o,title:a,type:n,onClick:this.handleEditTabsClick,active:o===t})})):null}renderDivider(){const{children:e,editTabs:t,expandable:n}=this.props;return n&&t&&t.length&&0!==r.default.Children.count(e)?r.default.createElement(l.DropdownItem,{divider:!0,role:"separator"}):null}render(){const{children:e,id:t,ActionMenuComponent:n}=this.props;return r.default.createElement(n,{id:`element-editor-actions-${t}`,className:"element-editor-header__actions-dropdown",dropdownMenuProps:{right:!0},dropdownToggleClassNames:["element-editor-header__actions-toggle","btn","btn-sm","btn--no-text","font-icon-dot-3"]},this.renderEditTabs(),this.renderDivider(),e)}}t.Component=p,p.propTypes={element:s.elementType,type:d.elementTypeType.isRequired,areaId:o.default.number.isRequired,activeTab:o.default.string,editTabs:o.default.arrayOf(o.default.shape({title:o.default.string,name:o.default.string})),handleEditTabsClick:o.default.func.isRequired,expandable:o.default.bool},p.defaultProps={editTabs:[],expandable:!0};t.default=(0,a.compose)((0,i.inject)(["ActionMenu"],(e=>({ActionMenuComponent:e})),(()=>"ElementEditor.ElementList.Element")))(p)},920:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=c(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(n(1594)),o=u(n(6935)),a=u(n(7651)),l=n(1820),i=n(455),s=n(9791),d=n(1135);function u(e){return e&&e.__esModule?e:{default:e}}function c(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(c=function(e){return e?n:t})(e)}class f extends r.Component{render(){const{isDragging:e,element:t,elementTypes:n,currentOffset:o}=this.props;if(!e||!o)return null;const{x:l,y:i}=o,s=`translate(${l}px, ${i}px)`,u={transform:s,WebkitTransform:s},c=(0,d.getElementTypeConfig)(t,n);return r.default.createElement("div",{className:"element-editor-drag-preview",style:u},r.default.createElement(a.default,{element:t,type:c,simple:!0}))}}f.propTypes={element:i.elementType,elementTypes:o.default.arrayOf(s.elementTypeType),isDragging:o.default.bool,currentOffset:o.default.shape({x:o.default.number.isRequired,y:o.default.number.isRequired})};t.default=(0,l.DragLayer)((e=>({element:e.getItem(),currentOffset:e.getSourceClientOffset(),isDragging:e.isDragging()})))(f)},6721:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=p(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(n(1594)),o=f(n(6935)),a=n(5207),l=n(9367),i=n(9791),s=n(1820),d=f(n(3695)),u=f(n(920)),c=f(n(5799));function f(e){return e&&e.__esModule?e:{default:e}}function p(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(p=function(e){return e?n:t})(e)}class m extends r.PureComponent{constructor(e){super(e),this.state={dragTargetElementId:null,dragSpot:null},this.handleDragOver=this.handleDragOver.bind(this),this.handleDragEnd=this.handleDragEnd.bind(this)}handleDragOver(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;const n=!!e&&e.id;this.setState({dragTargetElementId:n,dragSpot:!1===t?"bottom":"top"})}handleDragEnd(e,t){const{actions:{handleSortBlock:n},areaId:r}=this.props;n(e,t,r).then((()=>{const e=window.jQuery(".cms-preview");e.entwine("ss.preview")._loadUrl(e.find("iframe").attr("src"))})),this.setState({dragTargetElementId:null,dragSpot:null})}render(){const{ToolbarComponent:e,ListComponent:t,areaId:n,elementTypes:o,isDraggingOver:a,connectDropTarget:l,allowedElements:i,sharedObject:s}=this.props,{dragTargetElementId:d,dragSpot:c}=this.state,f=i.map((e=>o.find((t=>t.class===e))));return l(r.default.createElement("div",{className:"element-editor"},r.default.createElement(e,{elementTypes:f,areaId:n,onDragOver:this.handleDragOver}),r.default.createElement(t,{allowedElementTypes:f,elementTypes:o,areaId:n,onDragOver:this.handleDragOver,onDragStart:this.handleDragStart,onDragEnd:this.handleDragEnd,dragSpot:c,isDraggingOver:a,dragTargetElementId:d,sharedObject:s}),r.default.createElement(u.default,{elementTypes:o})))}}t.Component=m,m.propTypes={elementTypes:o.default.arrayOf(i.elementTypeType).isRequired,allowedElements:o.default.arrayOf(o.default.string).isRequired,areaId:o.default.number.isRequired,actions:o.default.shape({handleSortBlock:o.default.func})};t.default=(0,l.compose)(c.default,(0,s.DropTarget)("element",{},((e,t)=>({connectDropTarget:e.dropTarget(),isDraggingOver:t.isOver()}))),(0,a.inject)(["ElementToolbar","ElementList"],((e,t)=>({ToolbarComponent:e,ListComponent:t})),(()=>"ElementEditor")),d.default)(m)},2512:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=g(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(n(1594)),o=m(n(6935)),a=n(455),l=n(9791),i=n(9367),s=n(5207),d=m(n(6923)),u=m(n(5815)),c=n(1820),f=n(9306),p=n(1135);function m(e){return e&&e.__esModule?e:{default:e}}function g(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(g=function(e){return e?n:t})(e)}class h extends r.Component{constructor(e){super(e),this.resetState=this.resetState.bind(this),this.handleBeforeSubmitForm=this.handleBeforeSubmitForm.bind(this),this.handleAfterSubmitResponse=this.handleAfterSubmitResponse.bind(this),this.state={saveAllElements:!1,increment:0,hasUnsavedChangesBlockIDs:{},validBlockIDs:{}},this.props.sharedObject.setState=this.setState.bind(this)}componentDidUpdate(e,t){if(this.props.blocks===e.blocks){if(this.state.saveAllElements){const e=this.props.blocks.map((e=>parseInt(e.id,10))).filter((e=>this.state.hasUnsavedChangesBlockIDs[e]));if(e.every((e=>null!==this.state.validBlockIDs[e]))){const n=e.every((e=>this.state.validBlockIDs[e])),r={success:n,reason:n?"":"invalid"};this.props.sharedObject.entwineResolve(r),this.resetState(t,n),this.setState({saveAllElements:!1})}}}else this.resetState(t,!1)}resetState(e,t){const n={},r={};(this.props.blocks||[]).forEach((o=>{const a=parseInt(o.id,10);t?n[a]=!1:e.hasUnsavedChangesBlockIDs.hasOwnProperty(a)?n[a]=e.hasUnsavedChangesBlockIDs[a]:n[a]=!1,r[a]=null})),this.setState({hasUnsavedChangesBlockIDs:n,validBlockIDs:r})}handleChangeHasUnsavedChanges(e,t){this.setState((n=>({hasUnsavedChangesBlockIDs:{...n.hasUnsavedChangesBlockIDs,[e]:t}})))}handleBeforeSubmitForm(e){this.setState((t=>({validBlockIDs:{...t.validBlockIDs,[e]:null}})))}handleAfterSubmitResponse(e,t){this.setState((n=>({hasUnsavedChangesBlockIDs:{...n.hasUnsavedChangesBlockIDs,[e]:!t},validBlockIDs:{...n.validBlockIDs,[e]:t}})))}getDragIndicatorIndex(){const{dragTargetElementId:e,draggedItem:t,blocks:n,dragSpot:r}=this.props;return(0,f.getDragIndicatorIndex)(n.map((e=>e.id)),e,t&&t.id,r)}renderBlocks(){const{ElementComponent:e,HoverBarComponent:t,DragIndicatorComponent:n,blocks:o,allowedElementTypes:a,elementTypes:l,areaId:i,onDragEnd:s,onDragOver:d,onDragStart:c,isDraggingOver:f}=this.props;if(!o)return null;if(o&&!o.length)return r.default.createElement("div",null,u.default._t("ElementList.ADD_BLOCKS","Add blocks to place your content"));let m=o.map((n=>{const o=this.state.saveAllElements&&this.state.hasUnsavedChangesBlockIDs[n.id]&&null===this.state.validBlockIDs[n.id];return r.default.createElement("div",{key:n.id},r.default.createElement(e,{element:n,areaId:i,type:(0,p.getElementTypeConfig)(n,l),link:n.blockSchema.actions.edit,onDragOver:d,onDragEnd:s,onDragStart:c,saveElement:o,onChangeHasUnsavedChanges:e=>this.handleChangeHasUnsavedChanges(n.id,e),onBeforeSubmitForm:()=>this.handleBeforeSubmitForm(n.id),onAfterSubmitResponse:e=>this.handleAfterSubmitResponse(n.id,e),increment:this.state.increment}),f||r.default.createElement(t,{key:`create-after-${n.id}`,areaId:i,elementId:n.id,elementTypes:a}))}));f||(m=[r.default.createElement(t,{key:0,areaId:i,elementId:0,elementTypes:a})].concat(m));const g=this.getDragIndicatorIndex();return f&&null!==g&&m.splice(g,0,r.default.createElement(n,{key:"DropIndicator"})),m}renderLoading(){const{loading:e,LoadingComponent:t}=this.props;return e?r.default.createElement(t,null):null}render(){const{blocks:e}=this.props,t=(0,d.default)("elemental-editor-list",{"elemental-editor-list--empty":!e||!e.length});return this.props.connectDropTarget(r.default.createElement("div",{className:t},this.renderLoading(),this.renderBlocks()))}}t.Component=h,h.propTypes={blocks:o.default.arrayOf(a.elementType),elementTypes:o.default.arrayOf(l.elementTypeType).isRequired,allowedElementTypes:o.default.arrayOf(l.elementTypeType).isRequired,loading:o.default.bool,areaId:o.default.number.isRequired,dragTargetElementId:o.default.oneOfType([o.default.string,o.default.bool]),onDragOver:o.default.func,onDragStart:o.default.func,onDragEnd:o.default.func,sharedObject:o.default.object.isRequired},h.defaultProps={blocks:[],loading:!1,sharedObject:{entwineResolve:()=>{},setState:null}};const b={drop(e,t){const{blocks:n}=e,r=t.getDropResult();if(!r)return{};const o=(0,f.getDragIndicatorIndex)(n.map((e=>e.id)),r.target,t.getItem(),r.dropSpot),a=n[o-1]?n[o-1].id:"0";return{...r,dropAfterID:a}}};t.default=(0,i.compose)((0,c.DropTarget)("element",b,((e,t)=>({connectDropTarget:e.dropTarget(),draggedItem:t.getItem()}))),(0,s.inject)(["Element","Loading","HoverBar","DragPositionIndicator"],((e,t,n,r)=>({ElementComponent:e,LoadingComponent:t,HoverBarComponent:n,DragIndicatorComponent:r})),(()=>"ElementEditor.ElementList")))(h)},7651:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=h(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(n(1594)),o=g(n(6935)),a=n(3556),l=n(455),i=n(9791),s=n(9367),d=n(5207),u=g(n(5815)),c=g(n(6923)),f=n(1820),p=n(9306),m=n(8724);function g(e){return e&&e.__esModule?e:{default:e}}function h(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(h=function(e){return e?n:t})(e)}class b extends r.Component{constructor(e){super(e),this.toggle=this.toggle.bind(this),this.state={tooltipOpen:!1}}componentDidMount(){const{connectDragPreview:e}=this.props;e&&e((0,m.getEmptyImage)(),{captureDraggingState:!0})}componentDidUpdate(){const{tooltipOpen:e}=this.state,{disableTooltip:t}=this.props;e&&t&&this.setState({tooltipOpen:!1})}getBlockTitle(e,t){return t.broken?u.default.inject(u.default._t("ElementHeader.BROKEN","This element is of obsolete type {type}."),{type:t.obsoleteClassName}):e.title?e.title:u.default.inject(u.default._t("ElementHeader.NOTITLE","Untitled {type} block"),{type:t.title})}toggle(){this.setState((e=>({tooltipOpen:!e.tooltipOpen})))}renderVersionedStateMessage(){const{element:{isLiveVersion:e,isPublished:t}}=this.props;if(t&&e)return null;let n="";const o=["element-editor-header__version-state"];return t?e||(n=u.default._t("ElementHeader.STATE_MODIFIED","Item has unpublished changes"),o.push("element-editor-header__version-state--modified")):(n=u.default._t("ElementHeader.STATE_DRAFT","Item has not been published yet"),o.push("element-editor-header__version-state--draft")),r.default.createElement("span",{className:(0,c.default)(o),title:n})}renderStatusBadge(){const{element:{isLiveVersion:e,isPublished:t}}=this.props;if(t&&e)return null;let n="",o="";const a=["badge"];return t?e||(n=u.default._t("ElementHeader.BADGE_MODIFIED","Modified"),o=u.default._t("ElementHeader.STATE_MODIFIED","Item has unpublished changes"),a.push("status-modified")):(n=u.default._t("ElementHeader.BADGE_DRAFT","Draft"),o=u.default._t("ElementHeader.STATE_DRAFT","Item has not been published yet"),a.push("status-addedtodraft")),r.default.createElement("span",{className:(0,c.default)(a),title:o},n)}render(){const{connectDragSource:e,element:t,type:n,areaId:o,previewExpanded:l,simple:i,disableTooltip:s,activeTab:d,expandable:f,ElementActionsComponent:p,handleEditTabsClick:m}=this.props,g=this.getBlockTitle(t,n),h=(0,c.default)({"element-editor-header__title":!0,"element-editor-header__title--none":!t.title}),b=u.default._t("ElementHeader.EXPAND","Show editable fields"),v=(0,c.default)("element-editor-header",{"element-editor-header--simple":i}),y=(0,c.default)("element-editor-header__icon-container",{"element-editor-header__icon-container--broken":n.broken}),_=(0,c.default)("element-editor-header__expand",{"font-icon-right-open-big":!f,"font-icon-up-open-big":f&&l,"font-icon-down-open-big":f&&!l}),E=`element-icon-${t.id}`,O=r.default.createElement("div",{className:v},r.default.createElement("div",{className:"element-editor-header__drag-handle"},r.default.createElement("i",{className:"font-icon-drag-handle"})),r.default.createElement("div",{className:"element-editor-header__info"},r.default.createElement("div",{className:y},r.default.createElement("i",{className:n.icon,id:E}),this.renderVersionedStateMessage(),!n.broken&&!i&&r.default.createElement(a.Tooltip,{placement:"top",isOpen:this.state.tooltipOpen&&!s,target:E,toggle:this.toggle},n.title)),r.default.createElement("h3",{className:h},g),this.renderStatusBadge()),!i&&r.default.createElement("div",{className:"element-editor-header__actions"},r.default.createElement("div",{role:"none",onClick:e=>e.stopPropagation()},r.default.createElement(p,{element:t,type:n,areaId:o,activeTab:d,editTabs:n.editTabs,handleEditTabsClick:m,expandable:f})),!n.broken&&r.default.createElement("i",{className:_,title:b})));return l?e(O):O}}t.Component=b,b.propTypes={element:l.elementType.isRequired,type:i.elementTypeType.isRequired,areaId:o.default.number,activeTab:o.default.string,simple:o.default.bool,ElementActionsComponent:o.default.elementType,previewExpanded:o.default.bool,disableTooltip:o.default.bool,connectDragSource:o.default.func.isRequired,connectDragPreview:o.default.func.isRequired,onDragEnd:o.default.func},b.defaultProps={expandable:!0};t.default=(0,s.compose)((0,f.DragSource)("element",p.elementDragSource,(e=>({connectDragSource:e.dragSource(),connectDragPreview:e.dragPreview()}))),(0,d.inject)(["ElementActions"],(e=>({ElementActionsComponent:e})),(()=>"ElementEditor.ElementList.Element")))(b)},8953:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=d(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(n(1594)),o=s(n(6935)),a=n(5207),l=n(9791),i=s(n(5815));function s(e){return e&&e.__esModule?e:{default:e}}function d(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(d=function(e){return e?n:t})(e)}const u=(0,s(n(7577)).default)("element-editor__hover-bar");function c(e){let{AddElementPopoverComponent:t,elementTypes:n,elementId:o,areaId:a,popoverOpen:l,onToggle:s}=e;const d=`${u("-line")} font-icon-plus-circled`,c=i.default._t("ElementAddNewButton.ADD_BLOCK","Add block"),f={className:u("-area",{"-area--focus":l}),onClick:s,"aria-label":c,title:c,id:`AddBlockHoverBarArea_${a}_${o}`};return r.default.createElement("div",{className:u(""),id:`AddBlockHoverBar_${a}_${o}`},r.default.createElement("button",f,r.default.createElement("span",{className:u("-area-inner")},r.default.createElement("span",{className:d}))),r.default.createElement(t,{placement:"bottom",target:`AddBlockHoverBarArea_${a}_${o}`,isOpen:l,elementTypes:n,toggle:s,container:`#AddBlockHoverBar_${a}_${o}`,areaId:a,insertAfterElement:o}))}class f extends r.Component{constructor(e){super(e),this.toggle=this.toggle.bind(this),this.state={popoverOpen:!1}}toggle(){this.setState((e=>({popoverOpen:!e.popoverOpen})))}render(){const e={...this.state,...this.props,onToggle:this.toggle};return r.default.createElement(c,e)}}t.Component=f,f.propTypes={elementTypes:o.default.arrayOf(l.elementTypeType).isRequired,elementId:o.default.oneOfType([o.default.string,o.default.number]).isRequired,areaId:o.default.oneOfType([o.default.number,o.default.string]).isRequired};t.default=(0,a.inject)(["AddElementPopover"],(e=>({AddElementPopoverComponent:e})),(()=>"ElementEditor.ElementList.HoverBar"))(f)},7333:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=f(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(n(1594)),o=c(n(6935)),a=c(n(6923)),l=c(n(55)),i=n(7785),s=c(n(5815)),d=n(2153),u=n(9040);function c(e){return e&&e.__esModule?e:{default:e}}function f(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(f=function(e){return e?n:t})(e)}function p(){return p=Object.assign?Object.assign.bind():function(e){for(var t=1;t{t.match(/PageElements_[0-9]+_Title/)&&(r=e[t])})),n().then((e=>this.props.onFormSchemaSubmitResponse(e,r)))}render(){const{elementId:e,extraClass:t,onClick:n,onFormInit:o,formHasState:s,notVisible:d}=this.props,{loadingError:u}=this.state,c=(0,a.default)("element-editor-editform",t),f={formTag:"form",schemaUrl:(0,i.loadElementSchemaValue)("schemaUrl",e),identifier:"element",refetchSchemaOnMount:!s,onLoadingError:this.handleLoadingError,onSubmit:this.handleSubmit};u&&(f.loading=!1),"function"==typeof o&&(f.onReduxFormInit=o);const m={};return d&&(m["aria-hidden"]="true"),r.default.createElement("div",p({className:c,onClick:n,role:"presentation"},m),r.default.createElement(l.default,f))}}m.propTypes={extraClass:o.default.oneOfType([o.default.string,o.default.object]),onClick:o.default.func,elementId:o.default.string,handleLoadingError:o.default.func,onFormSchemaSubmitResponse:o.default.func,notVisible:o.default.bool};t.default=(0,u.connect)((function(e,t){const n=(0,d.loadElementFormStateName)(t.elementId);return{formHasState:e.form.formState&&e.form.formState.element&&!!e.form.formState.element[n]}}))(m)},7660:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=s(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(n(1594)),o=i(n(6935)),a=i(n(6923)),l=i(n(5815));function i(e){return e&&e.__esModule?e:{default:e}}function s(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(s=function(e){return e?n:t})(e)}class d extends r.PureComponent{render(){const{fileUrl:e,fileTitle:t,content:n,broken:o}=this.props,i=l.default._t("ElementSummary.NO_PREVIEW","No preview available"),s=(0,a.default)("element-editor-summary__content",{"element-editor-summary__content--broken":o});return r.default.createElement("div",{className:"element-editor-summary"},e&&r.default.createElement("img",{className:"element-editor-summary__thumbnail-image",src:e,alt:t}),(n||!e)&&r.default.createElement("p",{className:s},n||i))}}d.defaultProps={},d.propTypes={content:o.default.string,fileUrl:o.default.string,fileTitle:o.default.string,broken:o.default.bool};t.default=d},5563:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r,o=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=d(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&{}.hasOwnProperty.call(e,a)){var l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(n(1594)),a=(r=n(6935))&&r.__esModule?r:{default:r},l=n(5207),i=n(9791),s=n(1820);function d(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(d=function(e){return e?n:t})(e)}class u extends o.PureComponent{render(){const{AddNewButtonComponent:e,elementTypes:t,areaId:n,connectDropTarget:r}=this.props;return r(o.default.createElement("div",{className:"element-editor__toolbar"},o.default.createElement(e,{elementTypes:t,areaId:n})))}}u.defaultProps={},u.propTypes={elementTypes:a.default.arrayOf(i.elementTypeType).isRequired,areaId:a.default.number.isRequired,AddNewButtonComponent:a.default.elementType.isRequired,connectDropTarget:a.default.func.isRequired,onDragOver:a.default.func,onDragDrop:a.default.func};const c={hover(e){const{onDragOver:t}=e;t&&t()}};t.default=(0,s.DropTarget)("element",c,(e=>({connectDropTarget:e.dropTarget()})))((0,l.inject)(["ElementAddNewButton"],(e=>({AddNewButtonComponent:e})),(()=>"ElementEditor.ElementToolbar"))(u))},2977:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=l(n(1594)),o=l(n(5815)),a=l(n(6923));function l(e){return e&&e.__esModule?e:{default:e}}t.default=e=>class extends e{getClassName(){const e=[super.getClassName()];return this.props.data.ElementID&&e.unshift("elemental-area__element--historic-inner"),(0,a.default)(e)}render(){const e=this.getLegend(),t=this.props.data.tag||"div",n=this.getClassName(),{data:a}=this.props;return a.ElementID?r.default.createElement(t,{className:n},e,r.default.createElement("div",{className:"elemental-preview elemental-preview--historic"},a.ElementEditLink&&r.default.createElement("a",{className:"elemental-preview__link",href:a.ElementEditLink},r.default.createElement("span",{className:"elemental-preview__link-text"},o.default._t("HistoricElementView.VIEW_BLOCK_HISTORY","Block history")),r.default.createElement("i",{className:"font-icon-angle-right btn--icon-lg elemental-preview__link-caret"})),r.default.createElement("div",{className:"elemental-preview__icon"},r.default.createElement("i",{className:a.ElementIcon})),r.default.createElement("div",{className:"elemental-preview__detail"},r.default.createElement("h3",null,a.ElementTitle," ",r.default.createElement("small",null,a.ElementType)))),this.props.children):super.render()}}},6573:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=l(n(1594)),o=n(3556),a=l(n(2623));function l(e){return e&&e.__esModule?e:{default:e}}t.default=(0,a.default)((e=>{const{children:t}=e,n=r.default.Children.toArray(r.default.Children.map(t,((t,n)=>{const o={};return 0===n?(o.id=e.id,o.title=null):1===n&&(o.noHolder=!0),r.default.cloneElement(t,o)})));return e.readOnly?r.default.createElement("div",{className:"text-checkbox-group-field--read-only"},n):1===n.length?n[0]:r.default.createElement(o.InputGroup,{className:"text-checkbox-group-field"},n[0],r.default.createElement(o.InputGroupAddon,{addonType:"append"},r.default.createElement(o.InputGroupText,null,n[1])))}))},51:function(e,t,n){var r=d(n(1669)),o=d(n(1594)),a=n(5145),l=n(5207),i=n(1135),s=n(5381);function d(e){return e&&e.__esModule?e:{default:e}}const u=()=>{window.ss.apolloClient.resetStore(),setTimeout((()=>{const{store:e}=window.ss;e&&e.dispatch((0,s.destroy)(...Object.keys(e.getState().form.formState.element||{}).map((e=>`element.${e}`))))}),0)};r.default.entwine("ss",(e=>{e(".js-injector-boot .element-editor__container").entwine({ReactRoot:null,AreaIDsSharedObject:{},Increment:0,onmatch(){const e=(0,l.loadComponent)("ElementEditor",{}),t=this.data("schema"),n=(0,i.getConfig)().elementTypes,r=t["elemental-area-id"],s=this.getAreaIDsSharedObject();s.hasOwnProperty(r)||(s[r]={entwineResolve:null,setState:null});const d={areaId:r,allowedElements:t["allowed-elements"],elementTypes:n,sharedObject:s[r]};let u=this.getReactRoot();u||(u=(0,a.createRoot)(this[0]),this.setReactRoot(u)),u.render(o.default.createElement(e,d))},onunmatch(){e(".cms-edit-form").data("hasValidationErrors")||u(),this.unmountComponent()},unmountComponent(){const e=this.getReactRoot();e&&(e.unmount(),this.setReactRoot(null))},"from .cms-edit-form":{onbeforesubmitform(e,t){if(!t)return;let n;const r=new Promise((e=>{n=e}));t.promises.push(r),t.onAjaxSuccessCallbacks.push(this.unmountComponent.bind(this));const o=this.data("schema")["elemental-area-id"],a=this.getAreaIDsSharedObject()[o],l=this.getIncrement()+1;this.setIncrement(l),a.entwineResolve=n,a.setState({saveAllElements:!0,increment:l})},onaftersubmitform(t,n){const r=JSON.parse(n.xhr.responseText).ValidationResult;JSON.parse(r.replace(/<\/?script[^>]*?>/g,"")).isValid?(e(".cms-edit-form").data("hasValidationErrors",!1),u()):e(".cms-edit-form").data("hasValidationErrors",!0)}}}),e(".js-injector-boot .element-editor__container .element-form-dirty-state").entwine({onmatch(){e(".cms-edit-form").trigger("change")},onunmatch(){e(".cms-edit-form").trigger("change")}}),e(".cms-edit-form").entwine({getChangeTrackerOptions(){const t=void 0===this.entwineData("ChangeTrackerOptions");let n=this._super();return t&&(n=e.extend({},n),n.ignoreFieldSelector+=", .elementalarea :input:not(.element-form-dirty-state)",this.setChangeTrackerOptions(n)),n}})}))},9306:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.isOverTop=t.getDragIndicatorIndex=t.elementDragSource=void 0;var r=n(4518);t.isOverTop=(e,t)=>{const n=e.getClientOffset(),o=(0,r.findDOMNode)(t).getBoundingClientRect();return n.y{if(null===t||!n)return null;let o=t?e.findIndex((e=>e===t)):0;const a=e.findIndex((e=>e===n));return"bottom"===r&&(o+=1),a===o||a+1===o?null:o};t.elementDragSource={beginDrag(e){return e.element},endDrag(e,t){const{onDragEnd:n}=e,r=t.getDropResult();if(!n||!r||!r.dropAfterID)return;const o=t.getItem().id,{dropAfterID:a}=r;o!==a&&n(o,a)}}},7577:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r,o=(r=n(6923))&&r.__esModule?r:{default:r};t.default=e=>function(){const t=t=>`${e}${t}`;for(var n=arguments.length,r=new Array(n),a=0;a!(!e&&""!==e)&&("object"==typeof e?Array.isArray(e)?e.map(t):Object.entries(e).reduce(((e,n)=>{let[r,o]=n;return Object.assign({},e,{[t(r)]:o})}),{}):t(e))));return(0,o.default)(...l)}},6283:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.mutation=t.default=t.config=void 0;var r,o=n(708),a=(r=n(7284))&&r.__esModule?r:{default:r},l=n(3521);const i=t.mutation=a.default` mutation AddElementToArea($className: String!, $elementalAreaID: ID!, $afterElementID: ID) { addElementToArea( className: $className, @@ -8,17 +8,17 @@ mutation AddElementToArea($className: String!, $elementalAreaID: ID!, $afterElem id } } -`,u=t.config={props:e=>{let{mutate:t,ownProps:{actions:n,areaId:r}}=e;return{actions:{...n,handleAddElementToArea:(e,n)=>t({variables:{className:e,elementalAreaID:r,afterElementID:n}})}}},options:e=>{let{areaId:t}=e;return{refetchQueries:[{query:l.query,variables:l.config.options({areaId:t}).variables}]}}};t.default=(0,o.graphql)(i,u)},1429:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.mutation=t.default=t.config=void 0;var r,o=n(708),a=(r=n(7284))&&r.__esModule?r:{default:r},l=n(3521);const i=t.mutation=a.default` +`,s=t.config={props:e=>{let{mutate:t,ownProps:{actions:n,areaId:r}}=e;return{actions:{...n,handleAddElementToArea:(e,n)=>t({variables:{className:e,elementalAreaID:r,afterElementID:n}})}}},options:e=>{let{areaId:t}=e;return{refetchQueries:[{query:l.query,variables:l.config.options({areaId:t}).variables}]}}};t.default=(0,o.graphql)(i,s)},1429:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.mutation=t.default=t.config=void 0;var r,o=n(708),a=(r=n(7284))&&r.__esModule?r:{default:r},l=n(3521);const i=t.mutation=a.default` mutation ArchiveBlock($blockId: ID!) { deleteBlocks(ids: [$blockId]) } -`,u=t.config={props:e=>{let{mutate:t,ownProps:{actions:n}}=e;return{actions:{...n,handleArchiveBlock:e=>t({variables:{blockId:e}})}}},options:e=>{let{areaId:t}=e;return{refetchQueries:[{query:l.query,variables:l.config.options({areaId:t}).variables}]}}};t.default=(0,o.graphql)(i,u)},9324:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.mutation=t.default=t.config=void 0;var r,o=n(708),a=(r=n(7284))&&r.__esModule?r:{default:r},l=n(3521);const i=t.mutation=a.default` +`,s=t.config={props:e=>{let{mutate:t,ownProps:{actions:n}}=e;return{actions:{...n,handleArchiveBlock:e=>t({variables:{blockId:e}})}}},options:e=>{let{areaId:t}=e;return{refetchQueries:[{query:l.query,variables:l.config.options({areaId:t}).variables}]}}};t.default=(0,o.graphql)(i,s)},9324:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.mutation=t.default=t.config=void 0;var r,o=n(708),a=(r=n(7284))&&r.__esModule?r:{default:r},l=n(3521);const i=t.mutation=a.default` mutation DuplicateBlock($blockId: ID!) { duplicateBlock(id: $blockId) { id } } -`,u=t.config={props:e=>{let{mutate:t,ownProps:{actions:n}}=e;return{actions:{...n,handleDuplicateBlock:e=>t({variables:{blockId:e}})}}},options:e=>{let{areaId:t}=e;return{refetchQueries:[{query:l.query,variables:l.config.options({areaId:t}).variables}]}}};t.default=(0,o.graphql)(i,u)},1135:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.getElementTypeConfig=t.getConfig=void 0;var r,o=(r=n(6177))&&r.__esModule?r:{default:r};const a=()=>o.default.getSection("DNADesign\\Elemental\\Controllers\\ElementalAreaController");t.getConfig=a;t.getElementTypeConfig=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;const n=e.blockSchema.typeName;let r=(Array.isArray(t)?t:a().elementTypes).find((e=>e.class===n||e.name===n));return e.obsoleteClassName&&(r=Object.assign({obsoleteClassName:e.obsoleteClassName},r),Object.preventExtensions(r)),r}},2153:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.loadElementFormStateName=void 0;var r,o=(r=n(6177))&&r.__esModule?r:{default:r};t.loadElementFormStateName=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;const t=o.default.getSection("DNADesign\\Elemental\\Controllers\\ElementalAreaController").form.elementForm.formNameTemplate;return e?t.replace("{id}",e):t}},7785:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.loadElementSchemaValue=void 0;var r,o=(r=n(6177))&&r.__esModule?r:{default:r};t.loadElementSchemaValue=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;const n=o.default.getSection("DNADesign\\Elemental\\Controllers\\ElementalAreaController").form.elementForm[e]||"";return t?`${n}/${t}`:n}},4242:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.publishBlockMutation=void 0;var r,o=(r=n(7284))&&r.__esModule?r:{default:r};t.publishBlockMutation=o.default` +`,s=t.config={props:e=>{let{mutate:t,ownProps:{actions:n}}=e;return{actions:{...n,handleDuplicateBlock:e=>t({variables:{blockId:e}})}}},options:e=>{let{areaId:t}=e;return{refetchQueries:[{query:l.query,variables:l.config.options({areaId:t}).variables}]}}};t.default=(0,o.graphql)(i,s)},1135:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.getElementTypeConfig=t.getConfig=void 0;var r,o=(r=n(6177))&&r.__esModule?r:{default:r};const a=()=>o.default.getSection("DNADesign\\Elemental\\Controllers\\ElementalAreaController");t.getConfig=a;t.getElementTypeConfig=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;const n=e.blockSchema.typeName;let r=(Array.isArray(t)?t:a().elementTypes).find((e=>e.class===n||e.name===n));return e.obsoleteClassName&&(r=Object.assign({obsoleteClassName:e.obsoleteClassName},r),Object.preventExtensions(r)),r}},2153:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.loadElementFormStateName=void 0;var r,o=(r=n(6177))&&r.__esModule?r:{default:r};t.loadElementFormStateName=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;const t=o.default.getSection("DNADesign\\Elemental\\Controllers\\ElementalAreaController").form.elementForm.formNameTemplate;return e?t.replace("{id}",e):t}},7785:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.loadElementSchemaValue=void 0;var r,o=(r=n(6177))&&r.__esModule?r:{default:r};t.loadElementSchemaValue=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;const n=o.default.getSection("DNADesign\\Elemental\\Controllers\\ElementalAreaController").form.elementForm[e]||"";return t?`${n}/${t}`:n}},4242:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.publishBlockMutation=void 0;var r,o=(r=n(7284))&&r.__esModule?r:{default:r};t.publishBlockMutation=o.default` mutation PublishBlock($blockId:ID!) { publishBlock(id: $blockId) { id @@ -55,7 +55,7 @@ mutation SortBlockMutation($blockId:ID!, $afterBlockId:ID!) { isPublished } } -`,u=t.config={props:e=>{let{mutate:t,ownProps:{actions:n}}=e;return{actions:{...n,handleSortBlock:(e,n,r)=>t({variables:{blockId:e,afterBlockId:n},optimisticResponse:{sortBlock:{id:e,isLiveVersion:!1,isPublished:!1,__typename:"Block"}},update:(t,o)=>{let{data:{sortBlock:a}}=o;const i=l.config.options({areaId:r}).variables,u=t.readQuery({query:l.query,variables:i}),d=JSON.parse(JSON.stringify(u));let s=d.readOneElementalArea.elements;const c=s.findIndex((t=>t.id===e)),f=s[c];if(Object.entries(a).forEach((e=>{let[t,n]=e;"__typename"!==t&&(f[t]=n)})),s.splice(c,1),"0"===n)s.unshift(f);else{let e=s.findIndex((e=>e.id===n));-1===e&&(e=c-1);const t=s.slice(e+1);s=s.slice(0,e+1),s.push(f),s=s.concat(t)}d.readOneElementalArea.elements=s,t.writeQuery({query:l.query,data:d,variables:i})}})}}}};t.default=(0,o.graphql)(i,u)},2393:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.mutation=t.default=t.config=void 0;var r,o=n(708),a=(r=n(7284))&&r.__esModule?r:{default:r},l=n(3521);const i=t.mutation=a.default` +`,s=t.config={props:e=>{let{mutate:t,ownProps:{actions:n}}=e;return{actions:{...n,handleSortBlock:(e,n,r)=>t({variables:{blockId:e,afterBlockId:n},optimisticResponse:{sortBlock:{id:e,isLiveVersion:!1,isPublished:!1,__typename:"Block"}},update:(t,o)=>{let{data:{sortBlock:a}}=o;const i=l.config.options({areaId:r}).variables,s=t.readQuery({query:l.query,variables:i}),d=JSON.parse(JSON.stringify(s));let u=d.readOneElementalArea.elements;const c=u.findIndex((t=>t.id===e)),f=u[c];if(Object.entries(a).forEach((e=>{let[t,n]=e;"__typename"!==t&&(f[t]=n)})),u.splice(c,1),"0"===n)u.unshift(f);else{let e=u.findIndex((e=>e.id===n));-1===e&&(e=c-1);const t=u.slice(e+1);u=u.slice(0,e+1),u.push(f),u=u.concat(t)}d.readOneElementalArea.elements=u,t.writeQuery({query:l.query,data:d,variables:i})}})}}}};t.default=(0,o.graphql)(i,s)},2393:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.mutation=t.default=t.config=void 0;var r,o=n(708),a=(r=n(7284))&&r.__esModule?r:{default:r},l=n(3521);const i=t.mutation=a.default` mutation UnpublishBlock($blockId:ID!) { unpublishBlock( id: $blockId @@ -63,7 +63,7 @@ mutation UnpublishBlock($blockId:ID!) { id } } -`,u=t.config={props:e=>{let{mutate:t,ownProps:{actions:n}}=e;return{actions:{...n,handleUnpublishBlock:(e,n,r,o)=>t({variables:{blockId:e,fromStage:n,toStage:r,fromVersion:o}})}}},options:e=>{let{areaId:t}=e;return{refetchQueries:[{query:l.query,variables:l.config.options({areaId:t}).variables}]}}};t.default=(0,o.graphql)(i,u)},5071:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.query=t.default=t.config=void 0;var r,o=n(708),a=(r=n(7284))&&r.__esModule?r:{default:r};const l=t.query=a.default` +`,s=t.config={props:e=>{let{mutate:t,ownProps:{actions:n}}=e;return{actions:{...n,handleUnpublishBlock:(e,n,r,o)=>t({variables:{blockId:e,fromStage:n,toStage:r,fromVersion:o}})}}},options:e=>{let{areaId:t}=e;return{refetchQueries:[{query:l.query,variables:l.config.options({areaId:t}).variables}]}}};t.default=(0,o.graphql)(i,s)},5071:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.query=t.default=t.config=void 0;var r,o=n(708),a=(r=n(7284))&&r.__esModule?r:{default:r};const l=t.query=a.default` query ReadHistoryViewerBlock ($block_id: ID!, $limit: Int!, $offset: Int!) { readOneBlock( versioning: { @@ -95,7 +95,7 @@ query ReadHistoryViewerBlock ($block_id: ID!, $limit: Int!, $offset: Int!) { } } } -`,i=t.config={options(e){let{recordId:t,limit:n,page:r}=e;return{variables:{limit:n,offset:((r||1)-1)*n,block_id:t}}},props(e){let{data:{error:t,refetch:n,readOneBlock:r,loading:o},ownProps:{actions:a={versions:{}},limit:l,recordId:i}}=e;const u=r||null;return{loading:o||!u,versions:u,graphQLErrors:t&&t.graphQLErrors&&t.graphQLErrors.map((e=>e.message)),actions:{...a,versions:{...u,goToPage(e){n({offset:((e||1)-1)*l,limit:l,block_id:i})}}}}}};t.default=(0,o.graphql)(l,i)},8633:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.mutation=t.default=t.config=void 0;var r,o=n(708),a=(r=n(7284))&&r.__esModule?r:{default:r};const l=t.mutation=a.default` +`,i=t.config={options(e){let{recordId:t,limit:n,page:r}=e;return{variables:{limit:n,offset:((r||1)-1)*n,block_id:t}}},props(e){let{data:{error:t,refetch:n,readOneBlock:r,loading:o},ownProps:{actions:a={versions:{}},limit:l,recordId:i}}=e;const s=r||null;return{loading:o||!s,versions:s,graphQLErrors:t&&t.graphQLErrors&&t.graphQLErrors.map((e=>e.message)),actions:{...a,versions:{...s,goToPage(e){n({offset:((e||1)-1)*l,limit:l,block_id:i})}}}}}};t.default=(0,o.graphql)(l,i)},8633:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.mutation=t.default=t.config=void 0;var r,o=n(708),a=(r=n(7284))&&r.__esModule?r:{default:r};const l=t.mutation=a.default` mutation revertBlockToVersion($id:ID!, $fromStage:VersionedStage!, $toStage:VersionedStage!, $fromVersion:Int!) { copyBlockToStage(input: { id: $id @@ -106,4 +106,4 @@ mutation revertBlockToVersion($id:ID!, $fromStage:VersionedStage!, $toStage:Vers id } } -`,i=t.config={props:e=>{let{mutate:t,ownProps:{actions:n}}=e;return{actions:{...n,revertToVersion:(e,n,r,o)=>t({variables:{id:e,fromVersion:n,fromStage:r,toStage:o}})}}},options:{refetchQueries:["ReadHistoryViewerBlock"]}};t.default=(0,o.graphql)(l,i)},455:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.elementType=void 0;var r,o=(r=n(6935))&&r.__esModule?r:{default:r};t.elementType=o.default.shape({id:o.default.string.isRequired,title:o.default.string,blockSchema:o.default.object,inlineEditable:o.default.bool,published:o.default.bool,liveVersion:o.default.bool,version:o.default.number})},9791:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.elementTypeType=void 0;var r,o=(r=n(6935))&&r.__esModule?r:{default:r};t.elementTypeType=o.default.shape({name:o.default.string,title:o.default.string,icon:o.default.string,inlineEditable:o.default.bool,editTabs:o.default.arrayOf(o.default.shape({title:o.default.string,name:o.default.string})),config:o.default.object})},2325:function(e,t,n){n.r(t),n.d(t,{createSelector:function(){return i},createSelectorCreator:function(){return l},createStructuredSelector:function(){return u},defaultEqualityCheck:function(){return o},defaultMemoize:function(){return a}});var r="NOT_FOUND";var o=function(e,t){return e===t};function a(e,t){var n,a,l="object"==typeof t?t:{equalityCheck:t},i=l.equalityCheck,u=void 0===i?o:i,d=l.maxSize,s=void 0===d?1:d,c=l.resultEqualityCheck,f=function(e){return function(t,n){if(null===t||null===n||t.length!==n.length)return!1;for(var r=t.length,o=0;o-1){var a=n[o];return o>0&&(n.splice(o,1),n.unshift(a)),a.value}return r}return{get:o,put:function(t,a){o(t)===r&&(n.unshift({key:t,value:a}),n.length>e&&n.pop())},getEntries:function(){return n},clear:function(){n=[]}}}(s,f);function m(){var t=p.get(arguments);if(t===r){if(t=e.apply(null,arguments),c){var n=p.getEntries().find((function(e){return c(e.value,t)}));n&&(t=n.value)}p.put(arguments,t)}return t}return m.clearCache=function(){return p.clear()},m}function l(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r{let{mutate:t,ownProps:{actions:n}}=e;return{actions:{...n,revertToVersion:(e,n,r,o)=>t({variables:{id:e,fromVersion:n,fromStage:r,toStage:o}})}}},options:{refetchQueries:["ReadHistoryViewerBlock"]}};t.default=(0,o.graphql)(l,i)},455:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.elementType=void 0;var r,o=(r=n(6935))&&r.__esModule?r:{default:r};t.elementType=o.default.shape({id:o.default.string.isRequired,title:o.default.string,blockSchema:o.default.object,inlineEditable:o.default.bool,published:o.default.bool,liveVersion:o.default.bool,version:o.default.number})},9791:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.elementTypeType=void 0;var r,o=(r=n(6935))&&r.__esModule?r:{default:r};t.elementTypeType=o.default.shape({name:o.default.string,title:o.default.string,icon:o.default.string,inlineEditable:o.default.bool,editTabs:o.default.arrayOf(o.default.shape({title:o.default.string,name:o.default.string})),config:o.default.object})},8695:function(e){e.exports=ApolloClient},708:function(e){e.exports=ApolloClientReactHoc},6177:function(e){e.exports=Config},2623:function(e){e.exports=FieldHolder},55:function(e){e.exports=FormBuilderLoader},7284:function(e){e.exports=GraphQLTag},5207:function(e){e.exports=Injector},6935:function(e){e.exports=PropTypes},1594:function(e){e.exports=React},1820:function(e){e.exports=ReactDND},8724:function(e){e.exports=ReactDNDHtml5Backend},4518:function(e){e.exports=ReactDom},5145:function(e){e.exports=ReactDomClient},9040:function(e){e.exports=ReactRedux},3556:function(e){e.exports=Reactstrap},9367:function(e){e.exports=Redux},5381:function(e){e.exports=ReduxForm},5034:function(e){e.exports=TabsActions},8918:function(e){e.exports=ToastsActions},9077:function(e){e.exports=UnsavedFormsActions},6923:function(e){e.exports=classnames},5815:function(e){e.exports=i18n},1669:function(e){e.exports=jQuery},5799:function(e){e.exports=withDragDropContext}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var a=t[r]={exports:{}};return e[r](a,a.exports,n),a.exports}n(51),n(2038)}(); \ No newline at end of file diff --git a/client/src/components/ElementEditor/Element.js b/client/src/components/ElementEditor/Element.js index df124704..ee7f5f33 100644 --- a/client/src/components/ElementEditor/Element.js +++ b/client/src/components/ElementEditor/Element.js @@ -40,8 +40,30 @@ const Element = (props) => { const [ensureFormRendered, setEnsureFormRendered] = useState(false); const [formHasRendered, setFormHasRendered] = useState(false); const [doDispatchAddFormChanged, setDoDispatchAddFormChanged] = useState(false); + const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false); const [publishBlock] = useMutation(publishBlockMutation); + useEffect(() => { + // Note that formDirty from redux can be set to undefined after failed validation + // which is confusing as the block still has unsaved changes, hence why we create + // this state variable to track this instead + // props.formDirty is either undefined (when pristine) or an object (when dirty) + const formDirty = typeof props.formDirty !== 'undefined'; + if (formDirty && !hasUnsavedChanges) { + setHasUnsavedChanges(true); + } + }, [props.formDirty]); + + useEffect(() => { + props.onChangeHasUnsavedChanges(hasUnsavedChanges); + }, [hasUnsavedChanges]); + + useEffect(() => { + if (props.saveElement && hasUnsavedChanges && !doSaveElement) { + setDoSaveElement(true); + } + }, [props.saveElement, hasUnsavedChanges, props.increment]); + useEffect(() => { if (props.connectDragPreview) { // Use empty image as a drag preview so browsers don't draw it @@ -52,17 +74,12 @@ const Element = (props) => { captureDraggingState: true, }); } - // Check if formSchema state has already been loaded before opening a block - // This can happen if there was a validation error on a block after performing a Page save - if (props.formStateExists) { - setFormHasRendered(true); - } }, []); useEffect(() => { if (justClickedPublishButton && formHasRendered) { setJustClickedPublishButton(false); - if (props.formDirty) { + if (hasUnsavedChanges) { // Save the element first before publishing, which may trigger validation errors props.submitForm(); setDoPublishElementAfterSave(true); @@ -324,9 +341,11 @@ const Element = (props) => { if (doPublishElementAfterSave) { setDoPublishElementAfterSave(false); } + props.onAfterSubmitResponse(false); return; } // Form is valid + setHasUnsavedChanges(false); setNewTitle(title); if (doPublishElementAfterSave) { setDoPublishElementAfterSave(false); @@ -336,6 +355,7 @@ const Element = (props) => { showSavedElementToast(title); } refetchElementalArea(); + props.onAfterSubmitResponse(true); }; const { @@ -439,10 +459,6 @@ function mapStateToProps(state, ownProps) { const tabSetName = tabSet && tabSet.id; const uniqueFieldId = `element.${elementName}__${tabSetName}`; const formDirty = state.unsavedForms.find((unsaved) => unsaved.name === `element.${elementName}`); - const formStateExists = state.form - && state.form.formState - && state.form.formState.element - && state.form.formState.element.hasOwnProperty(elementName); // Find name of the active tab in the tab set // Only defined once an element form is expanded for the first time @@ -455,7 +471,6 @@ function mapStateToProps(state, ownProps) { tabSetName, activeTab, formDirty, - formStateExists, }; } @@ -467,6 +482,7 @@ function mapDispatchToProps(dispatch, ownProps) { dispatch(TabsActions.activateTab(`element.${elementName}__${tabSetName}`, activeTabName)); }, submitForm() { + ownProps.onBeforeSubmitForm(ownProps.element.id); // Perform a redux-form remote-submit dispatch(submit(`element.${elementName}`)); }, @@ -503,6 +519,11 @@ Element.propTypes = { onDragOver: PropTypes.func, // eslint-disable-line react/no-unused-prop-types onDragEnd: PropTypes.func, // eslint-disable-line react/no-unused-prop-types onDragStart: PropTypes.func, // eslint-disable-line react/no-unused-prop-types + saveElement: PropTypes.bool.isRequired, + onBeforeSubmitForm: PropTypes.func.isRequired, // eslint-disable-line react/no-unused-prop-types + onAfterSubmitResponse: PropTypes.func.isRequired, + // Used to ensure form gets re-rendered on submission so it can be submitted again if there are validation errors + increment: PropTypes.number.isRequired, }; Element.defaultProps = { diff --git a/client/src/components/ElementEditor/ElementEditor.js b/client/src/components/ElementEditor/ElementEditor.js index 4373cbd9..99a7cb5f 100644 --- a/client/src/components/ElementEditor/ElementEditor.js +++ b/client/src/components/ElementEditor/ElementEditor.js @@ -4,13 +4,10 @@ import PropTypes from 'prop-types'; import { inject } from 'lib/Injector'; import { compose } from 'redux'; import { elementTypeType } from 'types/elementTypeType'; -import { connect } from 'react-redux'; -import { loadElementFormStateName } from 'state/editor/loadElementFormStateName'; import { DropTarget } from 'react-dnd'; import sortBlockMutation from 'state/editor/sortBlockMutation'; import ElementDragPreview from 'components/ElementEditor/ElementDragPreview'; import withDragDropContext from 'lib/withDragDropContext'; -import { createSelector } from 'reselect'; /** * The ElementEditor is used in the CMS to manage a list or nested lists of @@ -71,8 +68,6 @@ class ElementEditor extends PureComponent { render() { const { - fieldName, - formState, ToolbarComponent, ListComponent, areaId, @@ -80,6 +75,7 @@ class ElementEditor extends PureComponent { isDraggingOver, connectDropTarget, allowedElements, + sharedObject, } = this.props; const { dragTargetElementId, dragSpot } = this.state; @@ -105,21 +101,15 @@ class ElementEditor extends PureComponent { dragSpot={dragSpot} isDraggingOver={isDraggingOver} dragTargetElementId={dragTargetElementId} + sharedObject={sharedObject} /> - ); } } ElementEditor.propTypes = { - fieldName: PropTypes.string, elementTypes: PropTypes.arrayOf(elementTypeType).isRequired, allowedElements: PropTypes.arrayOf(PropTypes.string).isRequired, areaId: PropTypes.number.isRequired, @@ -128,42 +118,6 @@ ElementEditor.propTypes = { }), }; -const defaultElementFormState = {}; - -// Use a memoization to prevent mapStateToProps() re-rendering on formstate changes -// Any formstate change, including unrelated ones such as from another FormBuilderLoader component -// will trigger the ElementalEditor to re-render -const elementFormSelector = createSelector([ - (state) => { - const elementFormState = state.form.formState.element; - - if (!elementFormState) { - // This needs to a reference to the defaultElementFormState variable rather than a new object - // or redux will think the state has changed and cause the component to re-render - return defaultElementFormState; - } - - return elementFormState; - }], (elementFormState) => { - const formNamePattern = loadElementFormStateName('[0-9]+'); - - const filteredElementFormState = Object.keys(elementFormState) - .filter(key => key.match(formNamePattern)) - .reduce((accumulator, key) => ({ - ...accumulator, - [key]: elementFormState[key].values - }), {}); - - return filteredElementFormState; -}); - -function mapStateToProps(state) { - // Memoize form state and value changes - const formState = elementFormSelector(state); - - return { formState }; -} - export { ElementEditor as Component }; export default compose( withDragDropContext, @@ -171,7 +125,6 @@ export default compose( connectDropTarget: connector.dropTarget(), isDraggingOver: monitor.isOver(), // isDragging is not available on DropTargetMonitor })), - connect(mapStateToProps), inject( ['ElementToolbar', 'ElementList'], (ToolbarComponent, ListComponent) => ({ diff --git a/client/src/components/ElementEditor/ElementList.js b/client/src/components/ElementEditor/ElementList.js index 8d462a07..8ee7adb4 100644 --- a/client/src/components/ElementEditor/ElementList.js +++ b/client/src/components/ElementEditor/ElementList.js @@ -11,6 +11,105 @@ import { getDragIndicatorIndex } from 'lib/dragHelpers'; import { getElementTypeConfig } from 'state/editor/elementConfig'; class ElementList extends Component { + constructor(props) { + super(props); + this.resetState = this.resetState.bind(this); + this.handleBeforeSubmitForm = this.handleBeforeSubmitForm.bind(this); + this.handleAfterSubmitResponse = this.handleAfterSubmitResponse.bind(this); + this.state = { + // saveAllElements will be set to true in entwine.js in the 'onbeforesubmitform' "hook" + // which is triggered by LeftAndMain submitForm() + saveAllElements: false, + // increment is also set in entwine.js in the 'onbeforesubmitform' "hook" + increment: 0, + hasUnsavedChangesBlockIDs: {}, + validBlockIDs: {}, + }; + // Update the sharedObject so that setState() can be called from entwine.js + this.props.sharedObject.setState = this.setState.bind(this); + } + + componentDidUpdate(prevProps, prevState) { + // Scenario: blocks props just changed after a graphql query response updated it + if (this.props.blocks !== prevProps.blocks) { + this.resetState(prevState, false); + return; + } + // Scenario Saving all elements and state has just updated because of a formSchema response from + // an inline save - see Element.js handleFormSchemaSubmitResponse() + if (this.state.saveAllElements) { + const unsavedChangesBlockIDs = this.props.blocks + .map(block => parseInt(block.id, 10)) + .filter(blockID => this.state.hasUnsavedChangesBlockIDs[blockID]); + const allValidated = unsavedChangesBlockIDs.every(blockID => this.state.validBlockIDs[blockID] !== null); + if (allValidated) { + const allValid = unsavedChangesBlockIDs.every(blockID => this.state.validBlockIDs[blockID]); + // entwineResolve is bound in entwine.js + const result = { + success: allValid, + reason: allValid ? '' : 'invalid', + }; + this.props.sharedObject.entwineResolve(result); + this.resetState(prevState, allValid); + this.setState({ saveAllElements: false }); + } + } + } + + resetState(prevState, resetHasUnsavedChangesBlockIDs) { + // hasUnsavedChangesBlockIDs is the block dirty state and uses a boolean + const hasUnsavedChangesBlockIDs = {}; + // validBlockIDs is the block validation state and uses a tri-state + // - null: not saved + // - true: saved, valid + // - false: attempted save, invalid + const validBlockIDs = {}; + const blocks = this.props.blocks || []; + blocks.forEach(block => { + const blockID = parseInt(block.id, 10); + if (resetHasUnsavedChangesBlockIDs) { + hasUnsavedChangesBlockIDs[blockID] = false; + } else if (prevState.hasUnsavedChangesBlockIDs.hasOwnProperty(blockID)) { + hasUnsavedChangesBlockIDs[blockID] = prevState.hasUnsavedChangesBlockIDs[blockID]; + } else { + hasUnsavedChangesBlockIDs[blockID] = false; + } + validBlockIDs[blockID] = null; + }); + this.setState({ hasUnsavedChangesBlockIDs, validBlockIDs }); + } + + handleChangeHasUnsavedChanges(elementID, hasUnsavedChanges) { + this.setState(prevState => ({ + hasUnsavedChangesBlockIDs: { + ...prevState.hasUnsavedChangesBlockIDs, + [elementID]: hasUnsavedChanges, + }, + })); + } + + handleBeforeSubmitForm(elementID) { + this.setState(prevState => ({ + validBlockIDs: { + ...prevState.validBlockIDs, + [elementID]: null, + }, + })); + } + + handleAfterSubmitResponse(elementID, valid) { + this.setState(prevState => ({ + hasUnsavedChangesBlockIDs: { + ...prevState.hasUnsavedChangesBlockIDs, + [elementID]: !valid, + }, + validBlockIDs: { + ...prevState.validBlockIDs, + [elementID]: valid, + }, + })); + } + getDragIndicatorIndex() { const { dragTargetElementId, draggedItem, blocks, dragSpot } = this.props; return getDragIndicatorIndex( @@ -50,8 +149,11 @@ class ElementList extends Component { return
{i18n._t('ElementList.ADD_BLOCKS', 'Add blocks to place your content')}
; } - let output = blocks.map((element) => ( -
+ let output = blocks.map(element => { + const saveElement = this.state.saveAllElements + && this.state.hasUnsavedChangesBlockIDs[element.id] + && this.state.validBlockIDs[element.id] === null; + return
this.handleChangeHasUnsavedChanges(element.id, hasUnsavedChanges)} + onBeforeSubmitForm={() => this.handleBeforeSubmitForm(element.id)} + onAfterSubmitResponse={(valid) => this.handleAfterSubmitResponse(element.id, valid)} + increment={this.state.increment} /> {isDraggingOver || } -
- )); +
; + }); // Add a insert point above the first block for consistency if (!isDraggingOver) { @@ -130,11 +237,16 @@ ElementList.propTypes = { onDragOver: PropTypes.func, onDragStart: PropTypes.func, onDragEnd: PropTypes.func, + sharedObject: PropTypes.object.isRequired, }; ElementList.defaultProps = { blocks: [], loading: false, + sharedObject: { + entwineResolve: () => {}, + setState: null, + }, }; export { ElementList as Component }; diff --git a/client/src/components/ElementEditor/tests/Element-test.js b/client/src/components/ElementEditor/tests/Element-test.js index 9304cb88..ba564b0b 100644 --- a/client/src/components/ElementEditor/tests/Element-test.js +++ b/client/src/components/ElementEditor/tests/Element-test.js @@ -36,6 +36,11 @@ function makeProps(obj = {}) { connectDropTarget: (el) => el, isDragging: false, isOver: false, + onChangeHasUnsavedChanges: () => {}, + onBeforeSubmitForm: () => {}, + onAfterSubmitResponse: () => {}, + saveElement: false, + increment: 0, ...obj, }; } diff --git a/client/src/legacy/ElementEditor/entwine.js b/client/src/legacy/ElementEditor/entwine.js index 41f34aad..68fd4024 100644 --- a/client/src/legacy/ElementEditor/entwine.js +++ b/client/src/legacy/ElementEditor/entwine.js @@ -43,19 +43,37 @@ jQuery.entwine('ss', ($) => { $('.js-injector-boot .element-editor__container').entwine({ ReactRoot: null, + // This object is shared between entwine.js and the ElementList react component. It allows: + // - entwine to call setState() on ElementList + // - ElementList to call entwineResolve() on entwine + AreaIDsSharedObject: {}, + + // Increment is in Element.js to force subsequent form submissions on failed client-side validation + // If elements fail client-side validation in Validator.js e.g. RequiredFields then + // they'll end up in a state where they need to re-render in order to re-submit + // because the form submission is blocked by the client-side validation, meaning that + // no formSchema response is received which is normally used to trigger a state update + Increment: 0, + onmatch() { const context = {}; const ElementEditorComponent = loadComponent('ElementEditor', context); const schemaData = this.data('schema'); const elementTypes = getConfig().elementTypes; - + const areaID = schemaData['elemental-area-id']; + const areaIDsSharedObject = this.getAreaIDsSharedObject(); + if (!areaIDsSharedObject.hasOwnProperty(areaID)) { + areaIDsSharedObject[areaID] = { + entwineResolve: null, + setState: null, + }; + } const props = { - fieldName: this.attr('name'), - areaId: schemaData['elemental-area-id'], + areaId: areaID, allowedElements: schemaData['allowed-elements'], elementTypes, + sharedObject: areaIDsSharedObject[areaID], }; - let root = this.getReactRoot(); if (!root) { root = createRoot(this[0]); @@ -70,6 +88,10 @@ jQuery.entwine('ss', ($) => { if (!$('.cms-edit-form').data('hasValidationErrors')) { resetStores(); } + this.unmountComponent(); + }, + + unmountComponent() { const root = this.getReactRoot(); if (root) { root.unmount(); @@ -78,6 +100,35 @@ jQuery.entwine('ss', ($) => { }, 'from .cms-edit-form': { + onbeforesubmitform(event, data) { + if (!data) { + return; + } + // Create a promise and expose the resolve function + // The promise is added to the data object when is used in LeftAndMain submitForm() + // as a condition for submitting the form + // The resolve function is called from the ElementList react component once all + // dirty element forms have been validated and saved + let entwineResolve; + const entwinePromise = new Promise((resolve) => { + entwineResolve = resolve; + }); + data.promises.push(entwinePromise); + data.onAjaxSuccessCallbacks.push(this.unmountComponent.bind(this)); + const areaID = this.data('schema')['elemental-area-id']; + const areaIDsSharedObject = this.getAreaIDsSharedObject(); + const sharedObject = areaIDsSharedObject[areaID]; + const increment = this.getIncrement() + 1; + this.setIncrement(increment); + sharedObject.entwineResolve = entwineResolve; + // setState() is bound in the constructor of the ElementList react component + // setting saveAllElementst to true will trigger a re-render in the react component + sharedObject.setState({ + saveAllElements: true, + increment + }); + }, + onaftersubmitform(event, data) { const validationResultPjax = JSON.parse(data.xhr.responseText).ValidationResult; const validationResult = JSON.parse(validationResultPjax.replace(/<\/?script[^>]*?>/g, '')); diff --git a/package.json b/package.json index b0475451..8ea978eb 100644 --- a/package.json +++ b/package.json @@ -47,8 +47,7 @@ "react-redux": "^8.0.4", "reactstrap": "^8.9.0", "redux": "^4.2.0", - "redux-form": "^8.3.8", - "reselect": "^4.1.7" + "redux-form": "^8.3.8" }, "devDependencies": { "@silverstripe/eslint-config": "^1.3.0", diff --git a/src/Forms/ElementalAreaField.php b/src/Forms/ElementalAreaField.php index c95b2c27..845de3bf 100644 --- a/src/Forms/ElementalAreaField.php +++ b/src/Forms/ElementalAreaField.php @@ -216,85 +216,4 @@ public function setSubmittedValue($value, $data = null) // Content comes through as a JSON encoded list through a hidden field. return $this->setValue(json_decode($value ?? '', true)); } - - /** - * This will perform FormField validation - * DataObject validation will happen in saveInto() as part of $element->write() - */ - public function validate($validator) - { - $result = true; - foreach ($this->getElementData() as $arr) { - /** @var BaseElement $element */ - /** @var array $data */ - $element = $arr['element']; - $data = $arr['data']; - $elementForm = $this->getElementForm($element); - if (!$elementForm) { - continue; - } - $elementForm->loadDataFrom($data); - $formValidatorResult = $elementForm->getValidator()->validate(); - if (!$formValidatorResult->isValid()) { - $validator->getResult()->combineAnd($formValidatorResult); - $result = false; - } - } - return $this->extendValidationResult($result, $validator); - } - - public function saveInto(DataObjectInterface $dataObject) - { - parent::saveInto($dataObject); - foreach ($this->getElementData() as $arr) { - /** @var BaseElement $element */ - /** @var array $data */ - $element = $arr['element']; - $data = $arr['data']; - $element->updateFromFormData($data); - $element->write(); - } - } - - private function getElementData(): array - { - $elementData = []; - $value = $this->Value(); - if (!$value) { - return []; - } - $idPrefixLength = strlen(sprintf(ElementalAreaController::FORM_NAME_TEMPLATE ?? '', '')); - foreach ($value as $form => $data) { - // Extract the ID - $elementId = (int) substr($form ?? '', $idPrefixLength ?? 0); - $element = $this->getArea()->Elements()->byID($elementId); - if (!$element) { - // Ignore invalid elements - continue; - } - $data = ElementalAreaController::removeNamespacesFromFields($data, $element->ID); - $elementData[] = ['element' => $element, 'data' => $data]; - } - return $elementData; - } - - private function getElementForm(BaseElement $element): ?Form - { - // This is essentially the same method used to generate a form to edit an element - // that a non-inline edit form will use - see GridFieldDetailForm::handleItem() - $requestHandler = $requestHandler = $this->getForm()->getController(); - $gridFieldDetailForm = new GridFieldDetailForm(); - // The validator needs to be explicitly copied from the element to the form - $validator = $element->getCMSCompositeValidator(); - $gridFieldDetailForm->setValidator($validator); - $gridFieldDetailFormItemRequest = new GridFieldDetailForm_ItemRequest( - $this, - $gridFieldDetailForm, - $element, - $requestHandler, - '' - ); - $form = $gridFieldDetailFormItemRequest->ItemEditForm(); - return $form; - } } diff --git a/tests/Behat/features/edit-block-element.feature b/tests/Behat/features/edit-block-element.feature index 53596e74..84ab1d5f 100644 --- a/tests/Behat/features/edit-block-element.feature +++ b/tests/Behat/features/edit-block-element.feature @@ -86,7 +86,10 @@ Feature: Edit elements in the CMS Then I fill in "

Alternate HTML within element 2

" for "Content" for block 2 And I fill in "Bob's Radically Redesigned Revolutionary Element" for "Title" for block 2 When I press the "Save" button - Then I should see a "Saved 'Blocks Page' successfully" success toast + Then I should see a "Saved 'Alice's Much Improved Block' successfully" success toast + And I should see a "Saved 'Bob's Radically Redesigned Revolutionary Element' successfully" success toast + And I should see a "Saved 'Blocks Page' successfully." success toast + When I dismiss all toasts And I should see "Alice's Much Improved Block" And I should see "New content for block 1" And I should see "Bob's Radically Redesigned Revolutionary Element" @@ -95,5 +98,3 @@ Feature: Edit elements in the CMS And I click on block 2 Then the "Content" field for block 2 should contain "

Alternate HTML within element 2

" And the "Title" field for block 2 should contain "Alice's Much Improved Block" - - diff --git a/tests/Behat/features/elemental-reports.feature b/tests/Behat/features/elemental-reports.feature index ac96fe07..cb69a315 100644 --- a/tests/Behat/features/elemental-reports.feature +++ b/tests/Behat/features/elemental-reports.feature @@ -1,4 +1,4 @@ -@retry @job5 +@retry @job4 Feature: View types of elements in a report As a CMS user I want to view a report of element types in the CMS diff --git a/tests/Behat/features/inline-block-validation.feature b/tests/Behat/features/inline-block-validation.feature index 894a8bd8..4b583393 100644 --- a/tests/Behat/features/inline-block-validation.feature +++ b/tests/Behat/features/inline-block-validation.feature @@ -29,13 +29,6 @@ Feature: Blocks are validated when inline saving individual blocks # be faster due to a limitation with behat testing react where changing the value of a field can # sometimes lead to the value of field being suffixed rather than replaced - Scenario: Required field validation error with javascript - When I fill in "" for "Title" for block 1 - Then I should see "Title is required" in the ".form__validation-message" element - When I press the "View actions" button - # Will not be an inline save button because formDirty not set yet, intercepted by JS validation - Then I should not see a ".element-editor__actions-save" element - Scenario: Field validation error When I fill in "x" for "Title" for block 1 When I press the "View actions" button diff --git a/tests/Behat/features/multiple-wysiwyg-configs.feature b/tests/Behat/features/multiple-wysiwyg-configs.feature index 1ebdf09b..3afb1785 100644 --- a/tests/Behat/features/multiple-wysiwyg-configs.feature +++ b/tests/Behat/features/multiple-wysiwyg-configs.feature @@ -1,4 +1,4 @@ -@retry @job5 +@retry @job2 Feature: multiple elemental blocks with different HTMLEditorConfig instances As a developer I want my elemental blocks to have different HTMLEditorConfig instances diff --git a/tests/Behat/features/non-page-save-validation.feature b/tests/Behat/features/non-page-save-validation.feature new file mode 100644 index 00000000..b7d6982a --- /dev/null +++ b/tests/Behat/features/non-page-save-validation.feature @@ -0,0 +1,89 @@ +@retry @job5 +Feature: Blocks are validated when saving blocks on a non-page dataobject + As a CMS user + I want to blocks be validated when page saving blocks + So that I can see what content needs to be fixed + + Background: + And I add an extension "SilverStripe\FrameworkTest\Elemental\Extension\ElementContentExtension" to the "DNADesign\Elemental\Models\ElementContent" class + And I add an extension "SilverStripe\FrameworkTest\Elemental\Extension\NumericFieldExtension" to the "SilverStripe\Forms\NumericField" class + And a "image" "file1.jpg" + And I go to "/dev/build?flush" + And the "SilverStripe\FrameworkTest\Elemental\Model\MultiElementalBehatTestObject" "Blocks Object" + And the "group" "EDITOR" has permissions "Access to 'Pages' section" + And I am logged in as a member of "EDITOR" group + And I go to "/admin/multi-elemental-behat-test-admin" + And I click "Blocks Object" in the ".ss-gridfield-items" element + + Scenario: Validation when parent saving inline blocks + # ElementalArea 1 - Blank title - RequiredFields + # Click "Add element" button + And I click on the "#Form_ItemEditForm_ElementalArea1 .element-editor__toolbar button" element + # Select ElementContent block type + And I click "Content" in the ".popover-option-set__button-container" element + # Open the inline edit form for the newly added block + And I click on the caret button for block 1 + # Need to fill in at least one field so that the form is in a dirty state in + # order for it be submitted on page object save + And I fill in "Lorem" for "My Field" for block 1 + And I click on the "#Form_ElementForm_1_PageElements_1_MyPageID" element + And I click on the ".ss-searchable-dropdown-field__option:nth-of-type(2)" element + And I click "Choose existing" in the "#Form_ItemEditForm_ElementalArea1 .uploadfield" element + And I press the "Back" HTML field button + And I click on the file named "file1" in the gallery + And I press the "Insert" button + + # ElementalArea 2 - Title=x - DataObject validate() method + And I scroll to the bottom of the edit form panel + # Click "Add element" button + And I click on the "#Form_ItemEditForm_ElementalArea2 .element-editor__toolbar button" element + # Select ElementContent block type + # And I click on the ".font-icon-block-content" element + And I click "Content" in the ".popover-option-set__button-container" element + # Open the inline edit form for the newly added block + And I click on the caret button for block 2 + And I fill in "x" for "Title" for block 2 + And I click on the "#Form_ElementForm_2_PageElements_2_MyPageID" element + And I click on the ".ss-searchable-dropdown-field__option:nth-of-type(2)" element + And I click "Choose existing" in the "#Form_ItemEditForm_ElementalArea2 .uploadfield" element + And I press the "Back" HTML field button + And I click on the file named "file1" in the gallery + And I press the "Insert" button + And I click on the caret button for block 2 + + # Save the parent Object + # Check that that client side validation for RequiredFields has been disabled + # and that an error response triggers a single validation error toast + When I press the "Save" button + When I click on the ".toast__close" element + Then I should see a "Validation Error" error toast + Then I should not see a ".toast__close" element + Then I should see "Title cannot be x" + And I scroll to the top of the edit form panel + Then I should see "\"Title\" is required" + + # Provide a valid value for the DataObject validate() test + When I scroll to the bottom of the edit form panel + And I fill in "Valid block two" for "Title" for block 2 + And I press the "Save" button + + # Only one success toast should show for the valid block, + # We should see a failure toast for the invalid parent object + Then I should see a "Saved 'Valid block two' successfully" success toast + When I click on the ".toast__close" element + Then I should see a "Validation Error" error toast + When I click on the ".toast__close" element + Then I should not see a ".toast__close" element + + # Provide a valid value for the RequiredFields test + # The parent object will save after this is resolved + When I scroll to the top of the edit form panel + And I fill in "Valid block one" for "Title" for block 1 + And I press the "Save" button + + # Now should see 2x success toast messages, one for the block, the other for the parent object + Then I should see a "Saved 'Valid block one' successfully" success toast + When I click on the ".toast__close" element + Then I should see a "Saved Multi Elemental Behat Test Object "Blocks Object" successfully." success toast + When I click on the ".toast__close" element + Then I should not see a ".toast__close" element diff --git a/tests/Behat/features/page-save-validation.feature b/tests/Behat/features/page-save-validation.feature index 9c1a55f7..ff74381e 100644 --- a/tests/Behat/features/page-save-validation.feature +++ b/tests/Behat/features/page-save-validation.feature @@ -5,75 +5,87 @@ Feature: Blocks are validated when page saving blocks So that I can see what content needs to be fixed Background: - Given I add an extension "DNADesign\Elemental\Extensions\ElementalPageExtension" to the "Page" class + Given I add an extension "SilverStripe\FrameworkTest\Elemental\Extension\MultiElementalAreasExtension" to the "Page" class And I add an extension "SilverStripe\FrameworkTest\Elemental\Extension\ElementContentExtension" to the "DNADesign\Elemental\Models\ElementContent" class And I add an extension "SilverStripe\FrameworkTest\Elemental\Extension\NumericFieldExtension" to the "SilverStripe\Forms\NumericField" class And a "image" "file1.jpg" And I go to "/dev/build?flush" - And a "page" "Blocks Page" with a "My title" content element with "My content" content + And the "page" "Blocks Page" And the "group" "EDITOR" has permissions "Access to 'Pages' section" And I am logged in as a member of "EDITOR" group And I go to "/admin/pages" And I follow "Blocks Page" + + Scenario: Validation when page saving inline blocks + + # ElementalArea 1 - Blank title - RequiredFields + # Click "Add element" button + And I click on the "#Form_EditForm_ElementalArea1 .element-editor__toolbar button" element + # Select ElementContent block type + And I click "Content" in the ".popover-option-set__button-container" element + # Open the inline edit form for the newly added block And I click on the caret button for block 1 + # Need to fill in at least one field so that the form is in a dirty state in + # order for it be submitted on page save + And I fill in "Lorem" for "My Field" for block 1 And I click on the "#Form_ElementForm_1_PageElements_1_MyPageID" element And I click on the ".ss-searchable-dropdown-field__option:nth-of-type(2)" element - And I click "Choose existing" in the ".uploadfield" element + And I click "Choose existing" in the "#Form_EditForm_ElementalArea1 .uploadfield" element And I press the "Back" HTML field button And I click on the file named "file1" in the gallery And I press the "Insert" button - And I press the "Save" button - And I click on the caret button for block 1 - Scenario: Validation when page saving inline blocks - - # Related has_one RequiredFields with ID suffix (MyPageID) - When I click on the "#Form_ElementForm_1_PageElements_1_MyPageID" element - And I click on the ".ss-searchable-dropdown-field__option:nth-of-type(1)" element - And I press the "Save" button - Then I should see "\"My page\" is required" in the "#Form_EditForm_error" element - When I click on the caret button for block 1 - And I click on the "#Form_ElementForm_1_PageElements_1_MyPageID" element + # ElementalArea 2 - Title=x - DataObject validate() method + And I scroll to the bottom of the edit form panel + # Click "Add element" button + And I click on the "#Form_EditForm_ElementalArea2 .element-editor__toolbar button" element + # Select ElementContent block type + # And I click on the ".font-icon-block-content" element + And I click "Content" in the ".popover-option-set__button-container" element + # Open the inline edit form for the newly added block + And I click on the caret button for block 2 + And I fill in "x" for "Title" for block 2 + And I click on the "#Form_ElementForm_2_PageElements_2_MyPageID" element And I click on the ".ss-searchable-dropdown-field__option:nth-of-type(2)" element + And I click "Choose existing" in the "#Form_EditForm_ElementalArea2 .uploadfield" element + And I press the "Back" HTML field button + And I click on the file named "file1" in the gallery + And I press the "Insert" button + And I click on the caret button for block 2 - # Related has_one RequiredFields without ID suffix (MyFile) - When I click on the ".uploadfield-item__remove-btn" element - And I press the "Save" button - Then I should see "\"My file\" is required" in the "#Form_EditForm_error" element - # Old file will be selected at this point, so don't need to reselect - And I click on the caret button for block 1 + # Save the page + # Check that that client side validation for RequiredFields has been disabled + # and that an error response triggers a single validation error toast + When I press the "Save" button + When I click on the ".toast__close" element + Then I should see a "Validation Error" error toast + Then I should not see a ".toast__close" element + Then I should see "Title cannot be x" + And I scroll to the top of the edit form panel + Then I should see "\"Title\" is required" - # FormField::validate() - And I fill in "1" for "My Int" for block 1 + # Provide a valid value for the DataObject validate() test + When I scroll to the bottom of the edit form panel + And I fill in "Valid block two" for "Title" for block 2 And I press the "Save" button - Then I should see "This field cannot be 1" in the "#Form_EditForm_error" element - And I click on the caret button for block 1 - And I fill in "2" for "My Int" for block 1 - # DataObject::validate() addFieldError() - # Note that this currently has poor UX and will show the validation message on the - # page Title field, rather than on the element Title field. This is expected. - And I fill in "x" for "Title" for block 1 - And I press the "Save" button - Then I should see "There are validation errors on this page, please fix them before saving or publishing." in the "#Form_EditForm_error" element - Then I should see "Title cannot be x" in the "#message-Form_EditForm_Title" element - And I click on the caret button for block 1 - And I fill in "lorem" for "Title" for block 1 + # Only one success toast should show for the valid block, + # We should see a failure toast for the invalid page + Then I should see a "Saved 'Valid block two' successfully" success toast + When I click on the ".toast__close" element + Then I should see a "Validation Error" error toast + When I click on the ".toast__close" element + Then I should not see a ".toast__close" element - # DataObject::validate() addError() - And I fill in "z" for "Title" for block 1 - And I fill in "z" for "My Field" for block 1 + # Provide a valid value for the RequiredFields test + # The page will save after this is resolved + When I scroll to the top of the edit form panel + And I fill in "Valid block one" for "Title" for block 1 And I press the "Save" button - Then I should see "This is a general error message" in the "#Form_EditForm_error" element - And I click on the caret button for block 1 - And I fill in "some title" for "Title" for block 1 - And I fill in "lorem" for "My Field" for block 1 - # Success message - When I press the "Save" button + # Now should see 2x success toast messages, one for the block, the other for the page + Then I should see a "Saved 'Valid block one' successfully" success toast + When I click on the ".toast__close" element Then I should see a "Saved 'Blocks Page' successfully." success toast - - # Validate that related data saved correctly - When I click on the caret button for block 1 - Then I should see "Home" in the "#Form_ElementForm_1_PageElements_1_MyPageID" element - And I should see "file1" in the ".uploadfield-item__title" element + When I click on the ".toast__close" element + Then I should not see a ".toast__close" element diff --git a/tests/Behat/features/publish-block-element.feature b/tests/Behat/features/publish-block-element.feature index cd227a12..deaadde1 100644 --- a/tests/Behat/features/publish-block-element.feature +++ b/tests/Behat/features/publish-block-element.feature @@ -1,4 +1,4 @@ -@javascript @retry @job5 +@javascript @retry @job6 Feature: Publish elements in the CMS As a CMS user I want to publish elements in the CMS diff --git a/tests/Behat/features/validation-failure.feature b/tests/Behat/features/validation-failure.feature deleted file mode 100644 index 989a352d..00000000 --- a/tests/Behat/features/validation-failure.feature +++ /dev/null @@ -1,52 +0,0 @@ -@javascript @retry @job6 -Feature: Don't lose content when page or block is invalid - As a CMS user - I want to retain my unsaved content when a validation error occurs - So that I can fix the content and save it without recreating content - - Background: - Given I add an extension "DNADesign\Elemental\Extensions\ElementalPageExtension" to the "Page" class - And a "page" "Blocks Page" with a "Alice's Block" content element with "original content" content - And the "group" "EDITOR" has permissions "Access to 'Pages' section" - And I am logged in as a member of "EDITOR" group - - # The "unsaved changes" dialog causes errors unless this is tagged with "@unsavedChanges" - @unsavedChanges - Scenario: If a page is invalid, changes aren't lost - Given I add an extension "DNADesign\Elemental\Tests\Src\ValidationFailedExtension" to the "Page" class - And I go to "/admin/pages" - And I left click on "Blocks Page" in the tree - Then I should see a list of blocks - And I should see "Alice's Block" - And I should see the ".element-editor-header__version-state--draft" element - When I click on the caret button for block 1 - And I fill in "

New sample content

" for "Content" for block 1 - And I fill in "Charlie's Block" for "Title" for block 1 - And I press the "Save" button - Then I should see a "Validation error" error toast - And I should see "Page is invalid" - And I should see the ".element-editor-header__version-state--draft" element - When I click on the caret button for block 1 - Then the "Content" field for block 1 should contain "New sample content" - And the "Title" field for block 1 should contain "Charlie's Block" - And I should see the ".element-editor-header__version-state--draft" element - - @unsavedChanges - Scenario: If a block is invalid, changes aren't lost - Given I add an extension "DNADesign\Elemental\Tests\Src\ValidationFailedExtension" to the "DNADesign\Elemental\Models\BaseElement" class - And I go to "/admin/pages" - And I left click on "Blocks Page" in the tree - Then I should see a list of blocks - And I should see "Alice's Block" - And I should see the ".element-editor-header__version-state--draft" element - When I click on the caret button for block 1 - And I fill in "

New sample content

" for "Content" for block 1 - And I fill in "Charlie's Block" for "Title" for block 1 - And I press the "Save" button - Then I should see a "Validation error" error toast - And I should see "ElementContent is invalid" - And I should see the ".element-editor-header__version-state--draft" element - When I click on the caret button for block 1 - Then the "Content" field for block 1 should contain "New sample content" - And the "Title" field for block 1 should contain "Charlie's Block" - And I should see the ".element-editor-header__version-state--draft" element diff --git a/yarn.lock b/yarn.lock index 79978c28..8ac31e84 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2646,7 +2646,7 @@ cacache@^16.0.0, cacache@^16.1.0, cacache@^16.1.3: tar "^6.1.11" unique-filename "^2.0.0" -call-bind@^1.0.2, call-bind@^1.0.5, call-bind@^1.0.6, call-bind@^1.0.7: +call-bind@^1.0.0, call-bind@^1.0.2, call-bind@^1.0.5, call-bind@^1.0.6, call-bind@^1.0.7: version "1.0.7" resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.7.tgz#06016599c40c56498c18769d2730be242b6fa3b9" integrity sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w== @@ -2672,6 +2672,11 @@ camelcase@^6.2.0: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a" integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA== +caniuse-lite@^1.0.30001565: + version "1.0.30001636" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001636.tgz#b15f52d2bdb95fad32c2f53c0b68032b85188a78" + integrity sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg== + caniuse-lite@^1.0.30001587, caniuse-lite@^1.0.30001599: version "1.0.30001603" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001603.tgz#605046a5bdc95ba4a92496d67e062522dce43381" @@ -3300,6 +3305,11 @@ duplexer@^0.1.2: resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6" integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg== +electron-to-chromium@^1.4.601: + version "1.4.810" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.810.tgz#7dee01b090b9e048e6db752f7b30921790230654" + integrity sha512-Kaxhu4T7SJGpRQx99tq216gCq2nMxJo+uuT6uzz9l8TVN2stL7M06MIIXAtr9jsrLs2Glflgf2vMQRepxawOdQ== + electron-to-chromium@^1.4.668: version "1.4.722" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.722.tgz#99ae3484c5fc0f387d39ad98d77e1f259b9f4074" @@ -4045,7 +4055,7 @@ get-caller-file@^2.0.1, get-caller-file@^2.0.5: resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e" integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg== -get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.2, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4: +get-intrinsic@^1.0.2, get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.2, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4: version "1.2.4" resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd" integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ== @@ -6163,6 +6173,11 @@ object-inspect@^1.13.1: resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.1.tgz#b96c6109324ccfef6b12216a956ca4dc2ff94bc2" integrity sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ== +object-inspect@^1.9.0: + version "1.13.2" + resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.2.tgz#dea0088467fb991e67af4058147a24824a3043ff" + integrity sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g== + object-is@^1.1.5: version "1.1.6" resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.6.tgz#1a6a53aed2dd8f7e6775ff870bea58545956ab07" @@ -6987,11 +7002,6 @@ requires-port@^1.0.0: resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ== -reselect@^4.1.7: - version "4.1.8" - resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.8.tgz#3f5dc671ea168dccdeb3e141236f69f02eaec524" - integrity sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ== - resolve-cwd@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d" @@ -7174,7 +7184,7 @@ set-blocking@^2.0.0: resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7" integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw== -set-function-length@^1.1.1: +set-function-length@^1.2.1: version "1.2.2" resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449" integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==