From e387931e1c712751e9b71ab2392f2d4f0285b161 Mon Sep 17 00:00:00 2001 From: Steve Boyd Date: Thu, 21 Mar 2024 13:21:10 +1300 Subject: [PATCH] NEW Validation of fields when inline saving --- client/dist/js/bundle.js | 6 +- client/dist/styles/bundle.css | 2 +- client/src/boot/registerTransforms.js | 2 +- .../ElementActions/PublishAction.js | 164 ++-------- .../components/ElementActions/SaveAction.js | 135 ++------ .../tests/PublishAction-test.js | 134 ++++++-- .../ElementActions/tests/SaveAction-test.js | 149 +++++++-- .../src/components/ElementEditor/Content.js | 19 +- .../src/components/ElementEditor/Element.js | 294 ++++++++++++++++-- .../ElementEditor/InlineEditForm.js | 30 +- .../ElementEditor/InlineEditForm.scss | 21 ++ .../ElementEditor/tests/Content-test.js | 86 ++++- .../TextCheckboxGroupField.js | 5 +- docs/en/advanced_setup.md | 44 +++ src/Controllers/ElementalAreaController.php | 276 ++++++++++------ src/Forms/EditFormFactory.php | 30 +- tests/Behat/Context/FeatureContext.php | 7 +- tests/Behat/features/element-editor.feature | 20 +- .../individual-block-validation.feature | 88 ++++++ .../features/publish-block-element.feature | 21 ++ .../features/unpublish-block-element.feature | 1 + tests/Blocks/TestElementContent.php | 52 ++++ .../ElementalAreaControllerTest.php | 275 ++++++++++++++++ .../ElementalAreaControllerTest.yml | 17 + 24 files changed, 1432 insertions(+), 446 deletions(-) create mode 100644 tests/Behat/features/individual-block-validation.feature create mode 100644 tests/Blocks/TestElementContent.php create mode 100644 tests/Controllers/ElementalAreaControllerTest.php create mode 100644 tests/Controllers/ElementalAreaControllerTest.yml diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js index 87e81532..5d81727b 100644 --- a/client/dist/js/bundle.js +++ b/client/dist/js/bundle.js @@ -1,4 +1,4 @@ -!function(){"use strict";var e={7274:function(e,t,n){var r=a(n(9521)),o=a(n(4437));function a(e){return e&&e.__esModule?e:{default:e}}window.document.addEventListener("DOMContentLoaded",(()=>{(0,r.default)(),(0,o.default)()}))},9521:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=v(n(6648)),o=v(n(176)),a=v(n(7328)),l=v(n(2111)),i=v(n(6249)),d=v(n(8792)),u=v(n(4415)),s=v(n(9397)),c=v(n(8947)),f=v(n(9097)),p=v(n(9192)),m=v(n(79)),g=v(n(8544)),h=v(n(9475)),y=v(n(5515));function v(e){return e&&e.__esModule?e:{default:e}}t.default=()=>{r.default.component.registerMany({ElementEditor:l.default,ElementToolbar:d.default,ElementAddNewButton:u.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:h.default,TextCheckboxGroupField:y.default})}},4437:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=m(n(6648)),o=m(n(2939)),a=m(n(9405)),l=m(n(9650)),i=m(n(2806)),d=m(n(1637)),u=m(n(7867)),s=m(n(6380)),c=m(n(4566)),f=m(n(9355)),p=m(n(6095));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",d.default,"ElementAddButton")})),r.default.transform("element-actions",(e=>{e.component("ElementActions",f.default,"ElementActionsWithSave"),e.component("ElementActions",c.default,"ElementActionsWithPublish"),e.component("ElementActions",p.default,"ElementActionsWithUnpublish"),e.component("ElementActions",s.default,"ElementActionsWithDuplicate"),e.component("ElementActions",u.default,"ElementActionsWithArchive")}))}},3363:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=d(n(7363)),o=d(n(7086)),a=d(n(7820)),l=n(8127),i=n(7286);function d(e){return e&&e.__esModule?e:{default:e}}const u=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)};u.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},u.defaultProps={disabled:!1};t.default=u},7867:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=d(n(7363)),o=n(2827),a=d(n(3363)),l=d(n(2409)),i=d(n(4754));function d(e){return e&&e.__esModule?e:{default:e}}const u=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=u;t.default=(0,o.compose)(l.default,u)},6380:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=d(n(7363)),o=n(2827),a=d(n(3363)),l=d(n(8046)),i=d(n(4754));function d(e){return e&&e.__esModule?e:{default:e}}const u=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=u;t.default=(0,o.compose)(l.default,u)},4566:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=p(n(7363)),o=n(2827),a=p(n(3363)),l=p(n(6426)),i=p(n(4754)),d=p(n(5159)),u=n(1624),s=n(9536),c=n(920),f=n(5762);function p(e){return e&&e.__esModule?e:{default:e}}const m=(e,t,n)=>{const r=i.default.inject(i.default._t("ElementHeader.NOTITLE","Untitled {type} block"),{type:e}),o=i.default.inject(i.default._t("ElementPublishAction.SUCCESS_NOTIFICATION","Published '{title}' successfully"),{title:t||r}),a=i.default.inject(i.default._t("ElementPublishAction.ERROR_NOTIFICATION","Error publishing '{title}'"),{title:t||r});window.jQuery.noticeAdd({text:n?o:a,stay:!1,type:n?"success":"error"})},g=e=>t=>{if(t.type.broken)return r.default.createElement(e,t);const{element:n,formDirty:o}=t,l=void 0!==t.element.canPublish&&!t.element.canPublish,u=i.default._t("ElementArchiveAction.PUBLISH","Publish"),c={label:u,title:l?i.default._t("ElementArchiveAction.PUBLISH_PERMISSION_DENY","Publish, insufficient permissions"):u,disabled:l,className:"element-editor__actions-publish",onClick:e=>{e.stopPropagation();const{element:{id:n,title:r},type:a,securityId:l,formData:i,actions:{handlePublishBlock:u},reinitialiseForm:c}=t;let f=new Promise((e=>e()));o&&(f=((e,t,n)=>d.default.createEndpointFetcher({url:(0,s.loadElementSchemaValue)("saveUrl",e),method:(0,s.loadElementSchemaValue)("saveMethod"),payloadFormat:(0,s.loadElementSchemaValue)("payloadFormat"),defaultData:{SecurityID:n}})(t).then((()=>window.ss.apolloClient.queryManager.reFetchObservableQueries())).then((e=>{const t=window.jQuery(".cms-preview");return t.entwine("ss.preview")._loadUrl(t.find("iframe").attr("src")),e})).then((t=>{const n=t[0]&&t[0].data.readOneElementalArea.elements.find((t=>t.id===e));return n&&n.version})))(n,i,l).then((e=>(c(i),e)))),f.then((()=>u(n))).then((()=>m(a.title,r,!0))).catch((()=>m(a.title,r,!1)))},toggle:t.toggle};return r.default.createElement(e,t,t.children,(o||!n.isLiveVersion)&&r.default.createElement(a.default,c))};t.Component=g;t.default=(0,o.compose)(l.default,(0,u.connect)((function(e,t){const n=(0,c.loadElementFormStateName)(t.element.id);let r=null;return e.form.formState.element&&e.form.formState.element[n]&&(r=e.form.formState.element[n].values),{formData:r,securityId:e.config.SecurityID,formDirty:e.unsavedForms.find((e=>e.name===`element.${n}`))}}),(function(e,t){const n=(0,c.loadElementFormStateName)(t.element.id);return{reinitialiseForm(t){e((0,f.initialize)(`element.${n}`,t))}}})),g)},9355:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=f(n(7363)),o=n(2827),a=n(1624),l=f(n(3363)),i=f(n(5159)),d=f(n(4754)),u=n(9536),s=n(920),c=n(5762);function f(e){return e&&e.__esModule?e:{default:e}}const p=e=>t=>{if(!t.expandable||t.type.broken)return r.default.createElement(e,t);const n={title:d.default._t("ElementSaveAction.SAVE","Save"),className:"element-editor__actions-save",onClick:e=>{e.stopPropagation();const{element:n,type:r,securityId:o,formData:a,reinitialiseForm:l}=t,{jQuery:s}=window,c=d.default.inject(d.default._t("ElementHeader.NOTITLE","Untitled {type} block"),{type:r.title}),f={url:(0,u.loadElementSchemaValue)("saveUrl",n.id),method:(0,u.loadElementSchemaValue)("saveMethod"),payloadFormat:(0,u.loadElementSchemaValue)("payloadFormat"),defaultData:{SecurityID:o}};i.default.createEndpointFetcher(f)(a).then((()=>{const{apolloClient:e}=window.ss;e.queryManager.reFetchObservableQueries(),l(a);const t=s(".cms-preview");t.entwine("ss.preview")._loadUrl(t.find("iframe").attr("src"));const r=a?a[`PageElements_${n.id}_Title`]:null;s.noticeAdd({text:d.default.inject(d.default._t("ElementSaveAction.SUCCESS_NOTIFICATION","Saved '{title}' successfully"),{title:r||c}),stay:!1,type:"success"})})).catch((()=>{s.noticeAdd({text:d.default.inject(d.default._t("ElementSaveAction.ERROR_NOTIFICATION","Error saving '{title}'"),{title:n.Title||c}),stay:!1,type:"error"})}))}};return r.default.createElement(e,t,t.children,r.default.createElement(l.default,n))};t.Component=p;t.default=(0,o.compose)((0,a.connect)((function(e,t){const n=(0,s.loadElementFormStateName)(t.element.id);let r=null;return e.form.formState.element&&e.form.formState.element[n]&&(r=e.form.formState.element[n].values),{formData:r,securityId:e.config.SecurityID}}),(function(e,t){const n=(0,s.loadElementFormStateName)(t.element.id);return{reinitialiseForm(t){e((0,c.initialize)(`element.${n}`,t))}}})),p)},6095:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=d(n(7363)),o=n(2827),a=d(n(3363)),l=d(n(495)),i=d(n(4754));function d(e){return e&&e.__esModule?e:{default:e}}const u=e=>t=>{if(t.type.broken)return r.default.createElement(e,t);const{element:n,type:o,actions:{handleUnpublishBlock:l}}=t,d=void 0!==t.element.canUnpublish&&!t.element.canUnpublish,u=i.default._t("ElementArchiveAction.UNPUBLISH","Unpublish"),s={label:u,title:d?i.default._t("ElementArchiveAction.UNPUBLISH_PERMISSION_DENY","Unpublish, insufficient permissions"):u,disabled:d,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=u;t.default=(0,o.compose)(l.default,u)},79: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&&Object.prototype.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(7363)),o=u(n(7086)),a=u(n(7820)),l=n(6648),i=n(7286),d=u(n(4754));function u(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:u}=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:d.default._t("ElementAddElementPopover.SEARCH_BLOCKS","Search blocks"),extraClass:s,container:n,isOpen:l,placement:i,target:u,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)},4415: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&&Object.prototype.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(7363)),o=u(n(7086)),a=n(8127),l=u(n(4754)),i=n(7286),d=n(6648);function u(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,d.inject)(["AddElementPopover"],(e=>({AddElementPopoverComponent:e})),(()=>"ElementEditor.ElementList.AddNewButton"))(c)},8947: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&&Object.prototype.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(7363)),o=c(n(7086)),a=n(6648),l=n(2827),i=n(1624),d=n(920),u=n(5762),s=c(n(720));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.PureComponent{render(){const{id:e,fileUrl:t,fileTitle:n,content:o,previewExpanded:a,InlineEditFormComponent:l,SummaryComponent:i,activeTab:d,onFormInit:u,handleLoadingError:s,formDirty:c,broken:f}=this.props;return r.default.createElement("div",{className:"element-editor-content"},!a&&r.default.createElement(i,{content:o,fileUrl:t,fileTitle:n,broken:f}),a&&r.default.createElement(l,{extraClass:{"element-editor-editform--collapsed":!a},onClick:e=>e.stopPropagation(),elementId:e,activeTab:d,onFormInit:u,handleLoadingError:s}),c&&r.default.createElement("input",{type:"hidden",name:"change-tracker",className:"element-form-dirty-state",value:"1"}))}}t.Component=p,p.propTypes={id:o.default.string,content:o.default.string,fileUrl:o.default.string,fileTitle:o.default.string,previewExpanded:o.default.bool,SummaryComponent:o.default.elementType,InlineEditFormComponent:o.default.elementType,handleLoadingError:o.default.func,broken:o.default.bool},p.defaultProps={};t.default=(0,l.compose)((0,a.inject)(["ElementSummary","ElementInlineEditForm"],((e,t)=>({SummaryComponent:e,InlineEditFormComponent:t})),(()=>"ElementEditor.ElementList.Element")),(0,i.connect)((function(e,t){const n=(0,d.loadElementFormStateName)(t.id);return{formDirty:(0,u.isDirty)(`element.${n}`,s.default)(e)}})))(p)},9475: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&&Object.prototype.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(7363));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},176:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=E(n(7363)),o=v(n(7086)),a=n(5407),l=n(7286),i=n(2827),d=n(6648),u=v(n(4754)),s=v(n(7820)),c=n(1624),f=n(920),p=n(9536),m=E(n(1789)),g=n(2084),h=n(1211),y=n(8883);function v(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)}function E(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&&Object.prototype.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}class _ extends r.Component{static getDerivedStateFromError(){return{childRenderingError:!0}}constructor(e){super(e),this.handleKeyUp=this.handleKeyUp.bind(this),this.handleExpand=this.handleExpand.bind(this),this.handleLoadingError=this.handleLoadingError.bind(this),this.handleTabClick=this.handleTabClick.bind(this),this.updateFormTab=this.updateFormTab.bind(this),this.state={previewExpanded:!1,initialTab:"",loadingError:!1,childRenderingError:!1}}componentDidMount(){const{connectDragPreview:e}=this.props;e&&e((0,h.getEmptyImage)(),{captureDraggingState:!0})}getVersionedStateClassName(){const{element:e}=this.props,t="element-editor__element";return e.isPublished?e.isPublished&&!e.isLiveVersion?`${t}--modified`:`${t}--published`:`${t}--draft`}getLinkTitle(e){return 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})}getSummary(e,t){return 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}handleLoadingError(){this.setState({loadingError:!0})}updateFormTab(e){const{tabSetName:t,onActivateTab:n}=this.props,{initialTab:r}=this.state;if(r||this.setState({initialTab:e}),e||r)n(t,e||r);else{n(t,"Main")}}handleTabClick(e){const{activeTab:t}=this.props,{loadingError:n}=this.state;e===t||n||(this.setState({previewExpanded:!0}),this.updateFormTab(e))}handleExpand(e){const{type:t,link:n}=this.props,{loadingError:r}=this.state;t.broken||("button"!==e.target.type?!t.inlineEditable||r?window.location=n:this.setState((e=>({previewExpanded:!e.previewExpanded}))):e.stopPropagation())}handleKeyUp(e){const{nodeName:t}=e.target;" "!==e.key&&"Enter"!==e.key||["input","textarea"].includes(t.toLowerCase())||this.handleExpand(e)}render(){const{element:e,type:t,areaId:n,HeaderComponent:o,ContentComponent:a,link:l,activeTab:i,connectDragSource:d,connectDropTarget:c,isDragging:f,isOver:p,onDragEnd:m}=this.props,{childRenderingError:g,previewExpanded:h}=this.state;if(!e.id)return null;const y=(0,s.default)("element-editor__element",{"element-editor__element--broken":t.broken,"element-editor__element--expandable":t.inlineEditable&&!t.broken,"element-editor__element--dragging":f,"element-editor__element--dragged-over":p},this.getVersionedStateClassName()),v=c(r.default.createElement("div",{className:y,onClick:this.handleExpand,onKeyUp:this.handleKeyUp,role:"button",tabIndex:0,title:this.getLinkTitle(t),key:e.id},r.default.createElement(o,{element:e,type:t,areaId:n,expandable:t.inlineEditable,link:l,previewExpanded:h&&!g,handleEditTabsClick:this.handleTabClick,activeTab:i,disableTooltip:f,onDragEnd:m}),!g&&r.default.createElement(a,{id:e.id,fileUrl:e.blockSchema.fileURL,fileTitle:e.blockSchema.fileTitle,content:this.getSummary(e,t),previewExpanded:h&&!f,activeTab:i,onFormInit:()=>this.updateFormTab(i),handleLoadingError:this.handleLoadingError,broken:t.broken}),g&&r.default.createElement("div",{className:"alert alert-danger mt-2"},u.default._t("ElementalElement.CHILD_RENDERING_ERROR","Something went wrong with this block. Please try saving and refreshing the CMS."))));return h?v:d(v)}}t.Component=_,_.propTypes={element:a.elementType,type:l.elementTypeType.isRequired,areaId:o.default.number.isRequired,link:o.default.string.isRequired,activeTab:o.default.string,tabSetName:o.default.string,onActivateTab:o.default.func,connectDragSource:o.default.func.isRequired,connectDragPreview:o.default.func.isRequired,connectDropTarget:o.default.func.isRequired,isDragging:o.default.bool.isRequired,isOver:o.default.bool.isRequired,onDragOver:o.default.func,onDragEnd:o.default.func,onDragStart:o.default.func},_.defaultProps={element:null};const O={drop(e,t,n){const{element:r}=e;return{target:r.id,dropSpot:(0,y.isOverTop)(t,n)?"top":"bottom"}},hover(e,t,n){const{element:r,onDragOver:o}=e;o&&o(r,(0,y.isOverTop)(t,n))}};t.default=(0,i.compose)((0,g.DropTarget)("element",O,((e,t)=>({connectDropTarget:e.dropTarget(),isOver:t.isOver()}))),(0,g.DragSource)("element",y.elementDragSource,((e,t)=>({connectDragSource:e.dragSource(),connectDragPreview:e.dragPreview(),isDragging:t.isDragging()}))),(0,c.connect)((function(e,t){const n=t.element.id,r=(0,f.loadElementFormStateName)(n),o=(0,p.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}`;return{tabSetName:l,activeTab:e.tabs&&e.tabs.fields&&e.tabs.fields[i]&&e.tabs.fields[i].activeTab}}),(function(e,t){const n=(0,f.loadElementFormStateName)(t.element.id);return{onActivateTab(t,r){e(m.activateTab(`element.${n}__${t}`,r))}}})),(0,d.inject)(["ElementHeader","ElementContent"],((e,t)=>({HeaderComponent:e,ContentComponent:t})),(()=>"ElementEditor.ElementList.Element")))(_)},7328: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&&Object.prototype.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(7363)),o=c(n(7086)),a=n(2827),l=n(8127),i=n(6648),d=n(5407),u=n(7286),s=c(n(3363));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:d.elementType,type:u.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)},2964: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&&Object.prototype.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(7363)),o=s(n(7086)),a=s(n(9397)),l=n(2084),i=n(5407),d=n(7286),u=n(3558);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,d=`translate(${l}px, ${i}px)`,s={transform:d,WebkitTransform:d},c=(0,u.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(d.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)},2111: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&&Object.prototype.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(7363)),o=g(n(7086)),a=n(6648),l=n(2827),i=n(7286),d=n(1624),u=n(920),s=n(2084),c=g(n(5386)),f=g(n(2964)),p=g(n(7431)),m=n(573);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 y 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:d,allowedElements:u}=this.props,{dragTargetElementId:s,dragSpot:c}=this.state,p=u.map((e=>l.find((t=>t.class===e))));return d(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=y,y.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={},b=(0,m.createSelector)([e=>{const t=e.form.formState.element;return t||v}],(e=>{const t=(0,u.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,d.connect)((function(e){return{formState:b(e)}})),(0,a.inject)(["ElementToolbar","ElementList"],((e,t)=>({ToolbarComponent:e,ListComponent:t})),(()=>"ElementEditor")),c.default)(y)},6249: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&&Object.prototype.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(7363)),o=m(n(7086)),a=n(5407),l=n(7286),i=n(2827),d=n(6648),u=m(n(7820)),s=m(n(4754)),c=n(2084),f=n(8883),p=n(3558);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{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:d,onDragOver:u,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:u,onDragEnd:d,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,u.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},h.defaultProps={blocks:[],loading:!1};const y={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",y,((e,t)=>({connectDropTarget:e.dropTarget(),draggedItem:t.getItem()}))),(0,d.inject)(["Element","Loading","HoverBar","DragPositionIndicator"],((e,t,n,r)=>({ElementComponent:e,LoadingComponent:t,HoverBarComponent:n,DragIndicatorComponent:r})),(()=>"ElementEditor.ElementList")))(h)},9397: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&&Object.prototype.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(7363)),o=g(n(7086)),a=n(8127),l=n(5407),i=n(7286),d=n(2827),u=n(6648),s=g(n(4754)),c=g(n(7820)),f=n(2084),p=n(8883),m=n(1211);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 y 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:d,activeTab:u,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}),y=s.default._t("ElementHeader.EXPAND","Show editable fields"),v=(0,c.default)("element-editor-header",{"element-editor-header--simple":i}),b=(0,c.default)("element-editor-header__icon-container",{"element-editor-header__icon-container--broken":n.broken}),E=(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}),_=`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:b},r.default.createElement("i",{className:n.icon,id:_}),this.renderVersionedStateMessage(),!n.broken&&!i&&r.default.createElement(a.Tooltip,{placement:"top",isOpen:this.state.tooltipOpen&&!d,target:_,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:u,editTabs:n.editTabs,handleEditTabsClick:m,expandable:f})),!n.broken&&r.default.createElement("i",{className:E,title:y})));return l?e(O):O}}t.Component=y,y.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},y.defaultProps={expandable:!0};t.default=(0,d.compose)((0,f.DragSource)("element",p.elementDragSource,(e=>({connectDragSource:e.dragSource(),connectDragPreview:e.dragPreview()}))),(0,u.inject)(["ElementActions"],(e=>({ElementActionsComponent:e})),(()=>"ElementEditor.ElementList.Element")))(y)},8544: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&&Object.prototype.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(7363)),o=d(n(7086)),a=n(6648),l=n(7286),i=d(n(4754));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)}const s=(0,d(n(8665)).default)("element-editor__hover-bar");function c(e){let{AddElementPopoverComponent:t,elementTypes:n,elementId:o,areaId:a,popoverOpen:l,onToggle:d}=e;const u=`${s("-line")} font-icon-plus-circled`,c=i.default._t("ElementAddNewButton.ADD_BLOCK","Add block"),f={className:s("-area",{"-area--focus":l}),onClick:d,"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:u}))),r.default.createElement(t,{placement:"bottom",target:`AddBlockHoverBarArea_${a}_${o}`,isOpen:l,elementTypes:n,toggle:d,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)},9192: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&&Object.prototype.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(7363)),o=c(n(7086)),a=c(n(7820)),l=c(n(8238)),i=n(9536),d=c(n(4754)),u=n(920),s=n(1624);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.PureComponent{constructor(e){super(e),this.handleLoadingError=this.handleLoadingError.bind(this),this.state={loadingError:null}}handleLoadingError(){const{jQuery:e}=window,{handleLoadingError:t}=this.props;this.setState({loadingError:!0}),e.noticeAdd({text:d.default.inject(d.default._t("ElementEditForm.ERROR_NOTIFICATION","Error displaying the edit form for this block")),stay:!0,type:"notice"}),t()}render(){const{elementId:e,extraClass:t,onClick:n,onFormInit:o,formHasState:d}=this.props,{loadingError:u}=this.state,s=(0,a.default)("element-editor-editform",t),c={formTag:"div",schemaUrl:(0,i.loadElementSchemaValue)("schemaUrl",e),identifier:"element",refetchSchemaOnMount:!d,onLoadingError:this.handleLoadingError};return u&&(c.loading=!1),"function"==typeof o&&(c.onReduxFormInit=o),r.default.createElement("div",{className:s,onClick:n,role:"presentation"},r.default.createElement(l.default,c))}}p.propTypes={extraClass:o.default.oneOfType([o.default.string,o.default.object]),onClick:o.default.func,elementId:o.default.string,handleLoadingError:o.default.func};t.default=(0,s.connect)((function(e,t){const n=(0,u.loadElementFormStateName)(t.elementId);return{formHasState:e.form.formState&&e.form.formState.element&&!!e.form.formState.element[n]}}))(p)},9097: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=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&&Object.prototype.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(7363)),o=i(n(7086)),a=i(n(7820)),l=i(n(4754));function i(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)}class u 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"),d=(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:d},n||i))}}u.defaultProps={},u.propTypes={content:o.default.string,fileUrl:o.default.string,fileTitle:o.default.string,broken:o.default.bool};t.default=u},8792: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=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&&Object.prototype.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(7363)),a=(r=n(7086))&&r.__esModule?r:{default:r},l=n(6648),i=n(7286),d=n(2084);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 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,d.DropTarget)("element",c,(e=>({connectDropTarget:e.dropTarget()})))((0,l.inject)(["ElementAddNewButton"],(e=>({AddNewButtonComponent:e})),(()=>"ElementEditor.ElementToolbar"))(s))},9405:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=l(n(7363)),o=l(n(4754)),a=l(n(7820));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()}}},5515:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=l(n(7363)),o=n(8127),a=l(n(1042));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={noHolder:!0};return 0===n&&(o.id=e.id),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])))}))},7489:function(e,t,n){var r=u(n(5311)),o=u(n(7363)),a=n(9691),l=n(6648),i=n(3558),d=n(5762);function u(e){return e&&e.__esModule?e:{default:e}}const s=()=>{window.ss.apolloClient.resetStore(),setTimeout((()=>{const{store:e}=window.ss;e&&e.dispatch((0,d.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 d=this.getReactRoot();d||(d=(0,a.createRoot)(this[0]),this.setReactRoot(d)),d.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}})}))},8883:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.isOverTop=t.getDragIndicatorIndex=t.elementDragSource=void 0;var r=n(394);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)}}},8665:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r,o=(r=n(7820))&&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)}},1637:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.mutation=t.default=t.config=void 0;var r,o=n(3732),a=(r=n(1306))&&r.__esModule?r:{default:r},l=n(2806);const i=t.mutation=a.default` +!function(){"use strict";var e={7274:function(e,t,n){var r=a(n(9521)),o=a(n(4437));function a(e){return e&&e.__esModule?e:{default:e}}window.document.addEventListener("DOMContentLoaded",(()=>{(0,r.default)(),(0,o.default)()}))},9521:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=v(n(6648)),o=v(n(176)),a=v(n(7328)),l=v(n(2111)),i=v(n(6249)),d=v(n(8792)),s=v(n(4415)),u=v(n(9397)),c=v(n(8947)),f=v(n(9097)),p=v(n(9192)),m=v(n(79)),h=v(n(8544)),g=v(n(9475)),b=v(n(5515));function v(e){return e&&e.__esModule?e:{default:e}}t.default=()=>{r.default.component.registerMany({ElementEditor:l.default,ElementToolbar:d.default,ElementAddNewButton:s.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:h.default,DragPositionIndicator:g.default,TextCheckboxGroupField:b.default})}},4437:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=m(n(6648)),o=m(n(2939)),a=m(n(9405)),l=m(n(9650)),i=m(n(2806)),d=m(n(1637)),s=m(n(7867)),u=m(n(6380)),c=m(n(9355)),f=m(n(4566)),p=m(n(6095));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",d.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",s.default,"ElementActionsWithArchive")}))}},3363:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=d(n(7363)),o=d(n(7086)),a=d(n(7820)),l=n(8127),i=n(7286);function d(e){return e&&e.__esModule?e:{default:e}}const s=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)};s.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},s.defaultProps={disabled:!1};t.default=s},7867:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=d(n(7363)),o=n(2827),a=d(n(3363)),l=d(n(2409)),i=d(n(4754));function d(e){return e&&e.__esModule?e:{default:e}}const s=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=s;t.default=(0,o.compose)(l.default,s)},6380:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=d(n(7363)),o=n(2827),a=d(n(3363)),l=d(n(8046)),i=d(n(4754));function d(e){return e&&e.__esModule?e:{default:e}}const s=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=s;t.default=(0,o.compose)(l.default,s)},4566: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&&Object.prototype.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(7363)),o=n(2827),a=s(n(3363)),l=s(n(6426)),i=s(n(4754)),d=n(176);function s(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 c=e=>t=>{const{doPublishElement:n,formDirty:o,formHasRendered:l,onAfterPublish:s,onPublishButtonClick:u}=(0,r.useContext)(d.ElementContext),{element:c,actions:f}=t,p=void 0!==t.element.canPublish&&!t.element.canPublish,m=i.default._t("ElementArchiveAction.PUBLISH","Publish"),h={label:m,title:p?i.default._t("ElementArchiveAction.PUBLISH_PERMISSION_DENY","Publish, insufficient permissions"):m,disabled:p,className:"element-editor__actions-publish",onClick:e=>{e.stopPropagation(),u()},toggle:t.toggle};return(0,r.useEffect)((()=>{l&&n&&f.handlePublishBlock(c.id).then((()=>s(!1))).catch((()=>s(!0)))}),[l,n]),t.type.broken?r.default.createElement(e,t):r.default.createElement(e,t,t.children,(o||!c.isLiveVersion)&&r.default.createElement(a.default,h))};t.Component=c;t.default=(0,o.compose)(l.default,c)},9355: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&&Object.prototype.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(7363)),o=i(n(3363)),a=i(n(4754)),l=n(176);function i(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=e=>t=>{const{doSaveElement:n,onSaveButtonClick:i,onAfterSave:d,submitForm:s,formHasRendered:u,formDirty:c}=(0,r.useContext)(l.ElementContext),f={title:a.default._t("ElementSaveAction.SAVE","Save"),className:"element-editor__actions-save",onClick:e=>{e.stopPropagation(),i()},toggle:t.toggle};return(0,r.useEffect)((()=>{u&&n&&(s(),d())}),[u,n]),!t.expandable||t.type.broken?r.default.createElement(e,t):r.default.createElement(e,t,t.children,c&&r.default.createElement(o.default,f))};t.Component=s;t.default=s},6095:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.Component=void 0;var r=d(n(7363)),o=n(2827),a=d(n(3363)),l=d(n(495)),i=d(n(4754));function d(e){return e&&e.__esModule?e:{default:e}}const s=e=>t=>{if(t.type.broken)return r.default.createElement(e,t);const{element:n,type:o,actions:{handleUnpublishBlock:l}}=t,d=void 0!==t.element.canUnpublish&&!t.element.canUnpublish,s=i.default._t("ElementArchiveAction.UNPUBLISH","Unpublish"),u={label:s,title:d?i.default._t("ElementArchiveAction.UNPUBLISH_PERMISSION_DENY","Unpublish, insufficient permissions"):s,disabled:d,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=s;t.default=(0,o.compose)(l.default,s)},79: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&&Object.prototype.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(7363)),o=s(n(7086)),a=s(n(7820)),l=n(6648),i=n(7286),d=s(n(4754));function s(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:s}=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:d.default._t("ElementAddElementPopover.SEARCH_BLOCKS","Search blocks"),extraClass:u,container:n,isOpen:l,placement:i,target:s,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)},4415: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&&Object.prototype.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(7363)),o=s(n(7086)),a=n(8127),l=s(n(4754)),i=n(7286),d=n(6648);function s(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,d.inject)(["AddElementPopover"],(e=>({AddElementPopoverComponent:e})),(()=>"ElementEditor.ElementList.AddNewButton"))(c)},8947: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&&Object.prototype.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(7363)),o=c(n(7086)),a=n(6648),l=n(2827),i=n(1624),d=n(920),s=n(5762),u=c(n(720));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.PureComponent{render(){const{id:e,fileUrl:t,fileTitle:n,content:o,previewExpanded:a,InlineEditFormComponent:l,SummaryComponent:i,activeTab:d,onFormInit:s,handleLoadingError:u,formDirty:c,broken:f,onFormSchemaSubmitResponse:p,ensureFormRendered:m,formHasRendered:h}=this.props,g=!a&&(m||h),b={"element-editor-editform--collapsed":!a,"element-editor-editform--rendered-not-visible":g};return r.default.createElement("div",{className:"element-editor-content"},!a&&r.default.createElement(i,{content:o,fileUrl:t,fileTitle:n,broken:f}),(a||m||h)&&r.default.createElement(l,{extraClass:b,onClick:e=>e.stopPropagation(),elementId:e,activeTab:d,onFormInit:s,handleLoadingError:u,onFormSchemaSubmitResponse:p,notVisible:g}),c&&r.default.createElement("input",{type:"hidden",name:"change-tracker",className:"element-form-dirty-state",value:"1"}))}}t.Component=p,p.propTypes={id:o.default.string,content:o.default.string,fileUrl:o.default.string,fileTitle:o.default.string,previewExpanded:o.default.bool,SummaryComponent:o.default.elementType,InlineEditFormComponent:o.default.elementType,handleLoadingError:o.default.func,broken:o.default.bool,onFormSchemaSubmitResponse:o.default.func,onFormInit:o.default.func,ensureFormRendered:o.default.bool,formHasRendered:o.default.bool},p.defaultProps={};t.default=(0,l.compose)((0,a.inject)(["ElementSummary","ElementInlineEditForm"],((e,t)=>({SummaryComponent:e,InlineEditFormComponent:t})),(()=>"ElementEditor.ElementList.Element")),(0,i.connect)((function(e,t){const n=(0,d.loadElementFormStateName)(t.id);return{formDirty:(0,s.isDirty)(`element.${n}`,u.default)(e)}})))(p)},9475: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&&Object.prototype.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(7363));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},176:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.ElementContext=t.Component=void 0;var r=T(n(7363)),o=_(n(7086)),a=n(5407),l=n(7286),i=n(2827),d=n(6648),s=_(n(4754)),u=_(n(7820)),c=n(1624),f=n(5762),p=n(920),m=n(9536),h=T(n(1789)),g=n(2084),b=n(1211),v=n(8883),y=T(n(5123)),E=n(5910);function _(e){return e&&e.__esModule?e:{default:e}}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)}function T(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},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&Object.prototype.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 k=t.ElementContext=(0,r.createContext)(null);class S extends r.Component{static getDerivedStateFromError(){return{childRenderingError:!0}}constructor(e){super(e),this.showSavedElementToast=this.showSavedElementToast.bind(this),this.handleKeyUp=this.handleKeyUp.bind(this),this.handleExpand=this.handleExpand.bind(this),this.handleLoadingError=this.handleLoadingError.bind(this),this.handleTabClick=this.handleTabClick.bind(this),this.updateFormTab=this.updateFormTab.bind(this),this.handleFormSchemaSubmitResponse=this.handleFormSchemaSubmitResponse.bind(this),this.handleFormInit=this.handleFormInit.bind(this),this.handleSaveButtonClick=this.handleSaveButtonClick.bind(this),this.handlePublishButtonClick=this.handlePublishButtonClick.bind(this),this.handleAfterSave=this.handleAfterSave.bind(this),this.handleAfterPublish=this.handleAfterPublish.bind(this),this.refetchElementalArea=this.refetchElementalArea.bind(this),this.state={previewExpanded:!1,initialTab:"",loadingError:!1,childRenderingError:!1,newTitle:this.props.element.title,justClickedPublishButton:!1,doSaveElement:!1,doPublishElement:!1,doPublishElementAfterSave:!1,ensureFormRendered:!1,formHasRendered:!1,doDispatchAddFormChanged:!1}}componentDidMount(){const{connectDragPreview:e}=this.props;e&&e((0,b.getEmptyImage)(),{captureDraggingState:!0}),this.props.formStateExists&&this.setState({formHasRendered:!0})}componentDidUpdate(){this.state.justClickedPublishButton&&this.state.formHasRendered&&(this.setState({justClickedPublishButton:!1}),this.props.formDirty?(this.props.submitForm(),this.setState({doPublishElementAfterSave:!0})):this.setState({doPublishElement:!0})),this.state.doDispatchAddFormChanged&&(this.setState({doDispatchAddFormChanged:!1}),this.props.dispatchAddFormChanged())}showSavedElementToast(e){const t=e||this.getNoTitle(),n=s.default.inject(s.default._t("ElementSaveAction.SUCCESS_NOTIFICATION","Saved '{title}' successfully"),{title:t});this.props.actions.toasts.success(n)}showPublishedElementToast(e){const t=this.state.newTitle||this.getNoTitle();if(e){const e=s.default.inject(s.default._t("ElementPublishAction.ERROR_NOTIFICATION","Error publishing '{title}'"),{title:t});this.props.actions.toasts.error(e)}else{const e=s.default.inject(s.default._t("ElementPublishAction.SUCCESS_NOTIFICATION","Published '{title}' successfully"),{title:t});this.props.actions.toasts.success(e)}}getNoTitle(){return s.default.inject(s.default._t("ElementHeader.NOTITLE","Untitled {type} block"),{type:this.props.type.title})}getVersionedStateClassName(){const{element:e}=this.props,t="element-editor__element";return e.isPublished?e.isPublished&&!e.isLiveVersion?`${t}--modified`:`${t}--published`:`${t}--draft`}getLinkTitle(e){return 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})}getSummary(e,t){return 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}handleLoadingError(){this.setState({loadingError:!0})}updateFormTab(e){const{tabSetName:t,onActivateTab:n}=this.props,{initialTab:r}=this.state;if(r||this.setState({initialTab:e}),e||r)n(t,e||r);else{n(t,"Main")}}handleTabClick(e){const{activeTab:t}=this.props,{loadingError:n}=this.state;e===t||n||(this.setState({previewExpanded:!0}),this.updateFormTab(e))}handleExpand(e){const{type:t,link:n}=this.props,{loadingError:r}=this.state;t.broken||("button"!==e.target.type?!t.inlineEditable||r?window.location=n:this.setState((e=>({previewExpanded:!e.previewExpanded}))):e.stopPropagation())}handleKeyUp(e){const{nodeName:t}=e.target;" "!==e.key&&"Enter"!==e.key||["input","textarea"].includes(t.toLowerCase())||this.handleExpand(e)}handleSaveButtonClick(){this.setState({ensureFormRendered:!0,doSaveElement:!0})}handlePublishButtonClick(){this.setState({justClickedPublishButton:!0,ensureFormRendered:!0})}handleAfterSave(){this.setState({doSaveElement:!1})}handleAfterPublish(e){this.showPublishedElementToast(e),this.setState({doPublishElement:!1,doPublishElementAfterSave:!1}),setTimeout((()=>{this.props.dispatchRemoveFormChanged()}),500),this.refetchElementalArea()}handleFormInit(e){this.updateFormTab(e),this.setState({formHasRendered:!0})}handleFormSchemaSubmitResponse(e,t){if(e.id.match(/\/schema\/elemental-area\/([0-9]+)/))return this.props.type.inlineEditable&&this.setState({previewExpanded:!0}),this.setState({doDispatchAddFormChanged:!0}),void(this.state.doPublishElementAfterSave&&this.setState({doPublishElementAfterSave:!1}));this.setState({newTitle:t}),this.state.doPublishElementAfterSave&&this.setState({doPublishElementAfterSave:!1,doPublishElement:!0}),this.state.doPublishElement||this.state.doPublishElementAfterSave||this.showSavedElementToast(t),this.refetchElementalArea()}refetchElementalArea(){window.ss.apolloClient.queryManager.reFetchObservableQueries()}render(){const{element:e,type:t,areaId:n,HeaderComponent:o,ContentComponent:a,link:l,activeTab:i,connectDragSource:d,connectDropTarget:c,isDragging:f,isOver:p,onDragEnd:m,submitForm:h,formDirty:g}=this.props,{childRenderingError:b,previewExpanded:v}=this.state;if(!e.id)return null;const y=(0,u.default)("element-editor__element",{"element-editor__element--broken":t.broken,"element-editor__element--expandable":t.inlineEditable&&!t.broken,"element-editor__element--dragging":f,"element-editor__element--dragged-over":p},this.getVersionedStateClassName()),E={formDirty:g,formHasRendered:this.state.formHasRendered,onPublishButtonClick:this.handlePublishButtonClick,doPublishElement:this.state.doPublishElement,onSaveButtonClick:this.handleSaveButtonClick,doSaveElement:this.state.doSaveElement,onAfterSave:this.handleAfterSave,onAfterPublish:this.handleAfterPublish,submitForm:h},_=c(r.default.createElement("div",{className:y,onClick:this.handleExpand,onKeyUp:this.handleKeyUp,role:"button",tabIndex:0,title:this.getLinkTitle(t),key:e.id},r.default.createElement(k.Provider,{value:E},r.default.createElement(o,{element:e,type:t,areaId:n,expandable:t.inlineEditable,link:l,previewExpanded:v&&!b,handleEditTabsClick:this.handleTabClick,activeTab:i,disableTooltip:f,onDragEnd:m}),!b&&r.default.createElement(a,{id:e.id,fileUrl:e.blockSchema.fileURL,fileTitle:e.blockSchema.fileTitle,content:this.getSummary(e,t),previewExpanded:v&&!f,ensureFormRendered:this.state.ensureFormRendered,formHasRendered:this.state.formHasRendered,activeTab:i,handleLoadingError:this.handleLoadingError,broken:t.broken,onFormSchemaSubmitResponse:this.handleFormSchemaSubmitResponse,onFormInit:()=>this.handleFormInit(i)}),b&&r.default.createElement("div",{className:"alert alert-danger mt-2"},s.default._t("ElementalElement.CHILD_RENDERING_ERROR","Something went wrong with this block. Please try saving and refreshing the CMS.")))));return v?_:d(_)}}t.Component=S,S.propTypes={element:a.elementType,type:l.elementTypeType.isRequired,areaId:o.default.number.isRequired,link:o.default.string.isRequired,activeTab:o.default.string,tabSetName:o.default.string,onActivateTab:o.default.func,connectDragSource:o.default.func.isRequired,connectDragPreview:o.default.func.isRequired,connectDropTarget:o.default.func.isRequired,isDragging:o.default.bool.isRequired,isOver:o.default.bool.isRequired,onDragOver:o.default.func,onDragEnd:o.default.func,onDragStart:o.default.func},S.defaultProps={element:null};const P={drop(e,t,n){const{element:r}=e;return{target:r.id,dropSpot:(0,v.isOverTop)(t,n)?"top":"bottom"}},hover(e,t,n){const{element:r,onDragOver:o}=e;o&&o(r,(0,v.isOverTop)(t,n))}};t.default=(0,i.compose)((0,g.DropTarget)("element",P,((e,t)=>({connectDropTarget:e.dropTarget(),isOver:t.isOver()}))),(0,g.DragSource)("element",v.elementDragSource,((e,t)=>({connectDragSource:e.dragSource(),connectDragPreview:e.dragPreview(),isDragging:t.isDragging()}))),(0,c.connect)((function(e,t){const n=t.element.id,r=(0,p.loadElementFormStateName)(n),o=(0,m.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}`,d=e.unsavedForms.find((e=>e.name===`element.${r}`)),s=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:d,formStateExists:s}}),(function(e,t){const n=(0,p.loadElementFormStateName)(t.element.id);return{onActivateTab(t,r){e(h.activateTab(`element.${n}__${t}`,r))},submitForm(){e((0,f.submit)(`element.${n}`))},dispatchAddFormChanged(){e((0,E.addFormChanged)(`element.${n}`))},dispatchRemoveFormChanged(){e((0,E.removeFormChanged)(`element.${n}`))},actions:{toasts:(0,i.bindActionCreators)(y,e)}}})),(0,d.inject)(["ElementHeader","ElementContent"],((e,t)=>({HeaderComponent:e,ContentComponent:t})),(()=>"ElementEditor.ElementList.Element")))(S)},7328: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&&Object.prototype.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(7363)),o=c(n(7086)),a=n(2827),l=n(8127),i=n(6648),d=n(5407),s=n(7286),u=c(n(3363));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:d.elementType,type:s.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)},2964: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&&Object.prototype.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(7363)),o=u(n(7086)),a=u(n(9397)),l=n(2084),i=n(5407),d=n(7286),s=n(3558);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,d=`translate(${l}px, ${i}px)`,u={transform:d,WebkitTransform:d},c=(0,s.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(d.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)},2111: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&&Object.prototype.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(7363)),o=h(n(7086)),a=n(6648),l=n(2827),i=n(7286),d=n(1624),s=n(920),u=n(2084),c=h(n(5386)),f=h(n(2964)),p=h(n(7431)),m=n(573);function h(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.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:d,allowedElements:s}=this.props,{dragTargetElementId:u,dragSpot:c}=this.state,p=s.map((e=>l.find((t=>t.class===e))));return d(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:u}),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=b,b.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,s.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,u.DropTarget)("element",{},((e,t)=>({connectDropTarget:e.dropTarget(),isDraggingOver:t.isOver()}))),(0,d.connect)((function(e){return{formState:y(e)}})),(0,a.inject)(["ElementToolbar","ElementList"],((e,t)=>({ToolbarComponent:e,ListComponent:t})),(()=>"ElementEditor")),c.default)(b)},6249: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&&Object.prototype.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(7363)),o=m(n(7086)),a=n(5407),l=n(7286),i=n(2827),d=n(6648),s=m(n(7820)),u=m(n(4754)),c=n(2084),f=n(8883),p=n(3558);function m(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 g 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:d,onDragOver:s,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=>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:s,onDragEnd:d,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 h=this.getDragIndicatorIndex();return f&&null!==h&&m.splice(h,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,s.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=g,g.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},g.defaultProps={blocks:[],loading:!1};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,d.inject)(["Element","Loading","HoverBar","DragPositionIndicator"],((e,t,n,r)=>({ElementComponent:e,LoadingComponent:t,HoverBarComponent:n,DragIndicatorComponent:r})),(()=>"ElementEditor.ElementList")))(g)},9397: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&&Object.prototype.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(7363)),o=h(n(7086)),a=n(8127),l=n(5407),i=n(7286),d=n(2827),s=n(6648),u=h(n(4754)),c=h(n(7820)),f=n(2084),p=n(8883),m=n(1211);function h(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{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:d,activeTab:s,expandable:f,ElementActionsComponent:p,handleEditTabsClick:m}=this.props,h=this.getBlockTitle(t,n),g=(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}),E=(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}),_=`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:_}),this.renderVersionedStateMessage(),!n.broken&&!i&&r.default.createElement(a.Tooltip,{placement:"top",isOpen:this.state.tooltipOpen&&!d,target:_,toggle:this.toggle},n.title)),r.default.createElement("h3",{className:g},h),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:s,editTabs:n.editTabs,handleEditTabsClick:m,expandable:f})),!n.broken&&r.default.createElement("i",{className:E,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,d.compose)((0,f.DragSource)("element",p.elementDragSource,(e=>({connectDragSource:e.dragSource(),connectDragPreview:e.dragPreview()}))),(0,s.inject)(["ElementActions"],(e=>({ElementActionsComponent:e})),(()=>"ElementEditor.ElementList.Element")))(b)},8544: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&&Object.prototype.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(7363)),o=d(n(7086)),a=n(6648),l=n(7286),i=d(n(4754));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)}const u=(0,d(n(8665)).default)("element-editor__hover-bar");function c(e){let{AddElementPopoverComponent:t,elementTypes:n,elementId:o,areaId:a,popoverOpen:l,onToggle:d}=e;const s=`${u("-line")} font-icon-plus-circled`,c=i.default._t("ElementAddNewButton.ADD_BLOCK","Add block"),f={className:u("-area",{"-area--focus":l}),onClick:d,"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:s}))),r.default.createElement(t,{placement:"bottom",target:`AddBlockHoverBarArea_${a}_${o}`,isOpen:l,elementTypes:n,toggle:d,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)},9192: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&&Object.prototype.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(7363)),o=c(n(7086)),a=c(n(7820)),l=c(n(8238)),i=n(9536),d=c(n(4754)),s=n(920),u=n(1624);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:d,notVisible:s}=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:!d,onLoadingError:this.handleLoadingError,onSubmit:this.handleSubmit};u&&(f.loading=!1),"function"==typeof o&&(f.onReduxFormInit=o);const m={};return s&&(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,s.loadElementFormStateName)(t.elementId);return{formHasState:e.form.formState&&e.form.formState.element&&!!e.form.formState.element[n]}}))(m)},9097: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=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&&Object.prototype.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(7363)),o=i(n(7086)),a=i(n(7820)),l=i(n(4754));function i(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)}class s 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"),d=(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:d},n||i))}}s.defaultProps={},s.propTypes={content:o.default.string,fileUrl:o.default.string,fileTitle:o.default.string,broken:o.default.bool};t.default=s},8792: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=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&&Object.prototype.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(7363)),a=(r=n(7086))&&r.__esModule?r:{default:r},l=n(6648),i=n(7286),d=n(2084);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 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,d.DropTarget)("element",c,(e=>({connectDropTarget:e.dropTarget()})))((0,l.inject)(["ElementAddNewButton"],(e=>({AddNewButtonComponent:e})),(()=>"ElementEditor.ElementToolbar"))(u))},9405:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=l(n(7363)),o=l(n(4754)),a=l(n(7820));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()}}},5515:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=l(n(7363)),o=n(8127),a=l(n(1042));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])))}))},7489:function(e,t,n){var r=s(n(5311)),o=s(n(7363)),a=n(9691),l=n(6648),i=n(3558),d=n(5762);function s(e){return e&&e.__esModule?e:{default:e}}const u=()=>{window.ss.apolloClient.resetStore(),setTimeout((()=>{const{store:e}=window.ss;e&&e.dispatch((0,d.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 d=this.getReactRoot();d||(d=(0,a.createRoot)(this[0]),this.setReactRoot(d)),d.render(o.default.createElement(e,r))},onunmatch(){e(".cms-edit-form").data("hasValidationErrors")||u();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),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}})}))},8883:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.isOverTop=t.getDragIndicatorIndex=t.elementDragSource=void 0;var r=n(394);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)}}},8665:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r,o=(r=n(7820))&&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)}},1637:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.mutation=t.default=t.config=void 0;var r,o=n(3732),a=(r=n(1306))&&r.__esModule?r:{default:r},l=n(2806);const i=t.mutation=a.default` mutation AddElementToArea($className: String!, $elementalAreaID: ID!, $afterElementID: ID) { addElementToArea( className: $className, @@ -55,7 +55,7 @@ mutation SortBlockMutation($blockId:ID!, $afterBlockId:ID!) { isPublished } } -`,d=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,d=t.readQuery({query:l.query,variables:i}),u=JSON.parse(JSON.stringify(d));let s=u.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)}u.readOneElementalArea.elements=s,t.writeQuery({query:l.query,data:u,variables:i})}})}}}};t.default=(0,o.graphql)(i,d)},495:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.mutation=t.default=t.config=void 0;var r,o=n(3732),a=(r=n(1306))&&r.__esModule?r:{default:r},l=n(2806);const i=t.mutation=a.default` +`,d=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,d=t.readQuery({query:l.query,variables:i}),s=JSON.parse(JSON.stringify(d));let u=s.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)}s.readOneElementalArea.elements=u,t.writeQuery({query:l.query,data:s,variables:i})}})}}}};t.default=(0,o.graphql)(i,d)},495:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.mutation=t.default=t.config=void 0;var r,o=n(3732),a=(r=n(1306))&&r.__esModule?r:{default:r},l=n(2806);const i=t.mutation=a.default` mutation UnpublishBlock($blockId:ID!) { unpublishBlock( id: $blockId @@ -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)},5407:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.elementType=void 0;var r,o=(r=n(7086))&&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})},7286:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.elementTypeType=void 0;var r,o=(r=n(7086))&&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})},573:function(e,t,n){n.r(t),n.d(t,{createSelector:function(){return i},createSelectorCreator:function(){return l},createStructuredSelector:function(){return d},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,d=void 0===i?o:i,u=l.maxSize,s=void 0===u?1:u,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)},5407:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.elementType=void 0;var r,o=(r=n(7086))&&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})},7286:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.elementTypeType=void 0;var r,o=(r=n(7086))&&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})},573:function(e,t,n){n.r(t),n.d(t,{createSelector:function(){return i},createSelectorCreator:function(){return l},createStructuredSelector:function(){return d},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,d=void 0===i?o:i,s=l.maxSize,u=void 0===s?1:s,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=[]}}}(u,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 { diff --git a/client/src/components/ElementActions/PublishAction.js b/client/src/components/ElementActions/PublishAction.js index 60cdf4d7..69d25f90 100644 --- a/client/src/components/ElementActions/PublishAction.js +++ b/client/src/components/ElementActions/PublishAction.js @@ -1,121 +1,35 @@ /* global window */ -import React from 'react'; +import React, { useContext, useEffect } from 'react'; import { compose } from 'redux'; import AbstractAction from 'components/ElementActions/AbstractAction'; import publishBlockMutation from 'state/editor/publishBlockMutation'; import i18n from 'i18n'; -import backend from 'lib/Backend'; -import { connect } from 'react-redux'; -import { loadElementSchemaValue } from 'state/editor/loadElementSchemaValue'; -import { loadElementFormStateName } from 'state/editor/loadElementFormStateName'; -import { initialize } from 'redux-form'; - -/** - * Show a toast message reporting whether publication of Element was successful - * - * @param {string} type E.g. "Content" - human friendly element type (not PHP FQCN) - * @param {string} title Title of the element, or a false value if unset (e.g. undefined) - * @param {boolean} success Show a success message (true), or an error message (false) - */ -const reportPublicationStatus = (type, title, success) => { - const noTitle = i18n.inject( - i18n._t('ElementHeader.NOTITLE', 'Untitled {type} block'), - { type } - ); - const successMessage = i18n.inject( - i18n._t('ElementPublishAction.SUCCESS_NOTIFICATION', 'Published \'{title}\' successfully'), - { title: title || noTitle } - ); - const errorMessage = i18n.inject( - i18n._t('ElementPublishAction.ERROR_NOTIFICATION', 'Error publishing \'{title}\''), - { title: title || noTitle } - ); - window.jQuery.noticeAdd({ - text: success ? successMessage : errorMessage, - stay: false, - type: success ? 'success' : 'error', - }); -}; - -/** - * Post updated Element data to save it - * - * @param {number} id Element ID - * @param {object} formData Information to be saved - * @param {string} securityId Security ID for form submission - */ -const performSaveForElementWithFormData = (id, formData, securityId) => { - const saveEndpoint = backend.createEndpointFetcher({ - url: loadElementSchemaValue('saveUrl', id), - method: loadElementSchemaValue('saveMethod'), - payloadFormat: loadElementSchemaValue('payloadFormat'), - defaultData: { - SecurityID: securityId - }, - }); - - // Perform save & get new version number to publish - return saveEndpoint(formData) - .then(() => window.ss.apolloClient.queryManager.reFetchObservableQueries()) - .then((input) => { - const preview = window.jQuery('.cms-preview'); - preview.entwine('ss.preview')._loadUrl(preview.find('iframe').attr('src')); - return input; - }) - .then((newPageData) => { - const newElementData = newPageData[0] && newPageData[0] - .data - .readOneElementalArea - .elements - .find((elementData) => elementData.id === id); - return newElementData && newElementData.version; - }); -}; +import { ElementContext } from 'components/ElementEditor/Element'; /** * Adds the elemental menu action to publish a draft/modified block */ const PublishAction = (MenuComponent) => (props) => { - if (props.type.broken) { - // Don't allow this action for a broken element. - return ( - - ); - } - - const { element, formDirty } = props; + const { + doPublishElement, + formDirty, + formHasRendered, + onAfterPublish, + onPublishButtonClick, + } = useContext(ElementContext); + + const { element, actions } = props; + + const publishElement = () => { + // handlePublishBlock is a graphql mutation defined in publishBlockMutation.js + actions.handlePublishBlock(element.id) + .then(() => onAfterPublish(false)) + .catch(() => onAfterPublish(true)); + }; const handleClick = (event) => { event.stopPropagation(); - - const { - element: { - id, - title, - }, - type, - securityId, - formData, - actions: { handlePublishBlock }, - reinitialiseForm, - } = props; - - let actionFlow = new Promise((resolve) => resolve()); - - // Edits have been made to the form. Peform a "Save & Publish" - if (formDirty) { - actionFlow = performSaveForElementWithFormData(id, formData, securityId) - .then((passthrough) => { - reinitialiseForm(formData); - return passthrough; - }); - } - - // Perform publish. Data is assumed to be up to date - actionFlow - .then(() => handlePublishBlock(id)) - .then(() => reportPublicationStatus(type.title, title, true)) - .catch(() => reportPublicationStatus(type.title, title, false)); + onPublishButtonClick(); }; const disabled = props.element.canPublish !== undefined && !props.element.canPublish; @@ -132,6 +46,19 @@ const PublishAction = (MenuComponent) => (props) => { toggle: props.toggle, }; + useEffect(() => { + if (formHasRendered && doPublishElement) { + publishElement(); + } + }, [formHasRendered, doPublishElement]); + + if (props.type.broken) { + // Don't allow this action for a broken element. + return ( + + ); + } + return ( {props.children} @@ -140,36 +67,9 @@ const PublishAction = (MenuComponent) => (props) => { ); }; -function mapStateToProps(state, ownProps) { - const formName = loadElementFormStateName(ownProps.element.id); - - let formData = null; - - if (state.form.formState.element && state.form.formState.element[formName]) { - formData = state.form.formState.element[formName].values; - } - - return { - formData, - securityId: state.config.SecurityID, - formDirty: state.unsavedForms.find((unsaved) => unsaved.name === `element.${formName}`), - }; -} - -function mapDispatchToProps(dispatch, ownProps) { - const formName = loadElementFormStateName(ownProps.element.id); - - return { - reinitialiseForm(savedData) { - dispatch(initialize(`element.${formName}`, savedData)); - } - }; -} - export { PublishAction as Component }; export default compose( publishBlockMutation, - connect(mapStateToProps, mapDispatchToProps), PublishAction ); diff --git a/client/src/components/ElementActions/SaveAction.js b/client/src/components/ElementActions/SaveAction.js index 8b80a8d3..1aea2655 100644 --- a/client/src/components/ElementActions/SaveAction.js +++ b/client/src/components/ElementActions/SaveAction.js @@ -1,128 +1,57 @@ -import React from 'react'; -import { compose } from 'redux'; -import { connect } from 'react-redux'; +import React, { useContext, useEffect } from 'react'; import AbstractAction from 'components/ElementActions/AbstractAction'; -import backend from 'lib/Backend'; import i18n from 'i18n'; -import { loadElementSchemaValue } from 'state/editor/loadElementSchemaValue'; -import { loadElementFormStateName } from 'state/editor/loadElementFormStateName'; -import { initialize } from 'redux-form'; +import { ElementContext } from 'components/ElementEditor/Element'; -/** - * Using a REST backend, serialize the current form data and post it to the backend endpoint to save - * the inline edit form's data for the current block. - */ const SaveAction = (MenuComponent) => (props) => { - if (!props.expandable || props.type.broken) { - // Some elemental blocks can not be edited inline (e.g. User form blocks) - // We don't want to add a "Save" action for those blocks. - return ( - - ); - } + const { + doSaveElement, + onSaveButtonClick, + onAfterSave, + submitForm, + formHasRendered, + formDirty, + } = useContext(ElementContext); const handleClick = (event) => { event.stopPropagation(); + onSaveButtonClick(); + }; - const { element, type, securityId, formData, reinitialiseForm } = props; - const { jQuery: $ } = window; - const noTitle = i18n.inject( - i18n._t( - 'ElementHeader.NOTITLE', - 'Untitled {type} block' - ), - { type: type.title } - ); - - const endpointSpec = { - url: loadElementSchemaValue('saveUrl', element.id), - method: loadElementSchemaValue('saveMethod'), - payloadFormat: loadElementSchemaValue('payloadFormat'), - defaultData: { - SecurityID: securityId - }, - }; - - const endpoint = backend.createEndpointFetcher(endpointSpec); - endpoint(formData) - .then(() => { - // Update the Apollo query cache with the new form data - const { apolloClient } = window.ss; - - apolloClient.queryManager.reFetchObservableQueries(); - reinitialiseForm(formData); - - const preview = $('.cms-preview'); - preview.entwine('ss.preview')._loadUrl(preview.find('iframe').attr('src')); - - const newTitle = formData ? formData[`PageElements_${element.id}_Title`] : null; - $.noticeAdd({ - text: i18n.inject( - i18n._t( - 'ElementSaveAction.SUCCESS_NOTIFICATION', - 'Saved \'{title}\' successfully' - ), - { title: newTitle || noTitle } - ), - stay: false, - type: 'success' - }); - }) - .catch(() => { - $.noticeAdd({ - text: i18n.inject( - i18n._t( - 'ElementSaveAction.ERROR_NOTIFICATION', - 'Error saving \'{title}\'' - ), - { title: element.Title || noTitle } - ), - stay: false, - type: 'error' - }); - }); + const saveElement = () => { + submitForm(); + onAfterSave(); }; const newProps = { title: i18n._t('ElementSaveAction.SAVE', 'Save'), className: 'element-editor__actions-save', onClick: handleClick, + toggle: props.toggle, }; + useEffect(() => { + if (formHasRendered && doSaveElement) { + saveElement(); + } + }, [formHasRendered, doSaveElement]); + + if (!props.expandable || props.type.broken) { + // Some elemental blocks can not be edited inline (e.g. User form blocks) + // We don't want to add a "Save" action for those blocks. + return ( + + ); + } + return ( {props.children} - - + { formDirty && } ); }; -function mapStateToProps(state, ownProps) { - const formName = loadElementFormStateName(ownProps.element.id); - - let formData = null; - - if (state.form.formState.element && state.form.formState.element[formName]) { - formData = state.form.formState.element[formName].values; - } - - return { - formData, - securityId: state.config.SecurityID, - }; -} - -function mapDispatchToProps(dispatch, ownProps) { - const formName = loadElementFormStateName(ownProps.element.id); - - return { - reinitialiseForm(savedData) { - dispatch(initialize(`element.${formName}`, savedData)); - } - }; -} - export { SaveAction as Component }; -export default compose(connect(mapStateToProps, mapDispatchToProps), SaveAction); +export default SaveAction; diff --git a/client/src/components/ElementActions/tests/PublishAction-test.js b/client/src/components/ElementActions/tests/PublishAction-test.js index bd43c577..80a3b83c 100644 --- a/client/src/components/ElementActions/tests/PublishAction-test.js +++ b/client/src/components/ElementActions/tests/PublishAction-test.js @@ -3,20 +3,12 @@ import React from 'react'; import { fireEvent, render } from '@testing-library/react'; import { Component as PublishAction } from '../PublishAction'; - -jest.mock('isomorphic-fetch', () => - () => Promise.resolve({ - json: () => ({}), - }) -); +import { ElementContext } from '../../ElementEditor/Element'; window.jQuery = { noticeAdd: () => null }; -const WrappedComponent = (props) =>
{props.children}
; -const ActionComponent = PublishAction(WrappedComponent); - function makeProps(obj = {}) { return { element: { @@ -36,29 +28,32 @@ function makeProps(obj = {}) { }; } +function makeProviderValue(obj = {}) { + return { + doPublishElement: false, + formHasRendered: false, + onAfterPublish: () => {}, + onPublishButtonClick: () => {}, + ...obj, + }; +} + +const WrappedComponent = (props) =>
{props.children}
; +const ActionComponent = PublishAction(WrappedComponent); +const ProvidedActionComponent = (props) => ( + + + +); + test('PublishAction renders the title and class', () => { - const { container } = render(); + const { container } = render(); expect(container.querySelector('button.element-editor__actions-publish').textContent).toBe('Publish'); }); -test('PublishAction publishes from draft to live', async () => { - const mockMutation = jest.fn(() => new Promise((resolve) => resolve())); - const { container } = render( - - ); - fireEvent.click(container.querySelector('button.element-editor__actions-publish')); - await new Promise((resolve) => resolve()); - expect(mockMutation).toHaveBeenCalledWith(123); -}); - test('PublishAction returns null when is the live version', () => { const { container } = render( - { test('PublishAction is disabled when user doesn\'t have correct permissions', () => { const { container } = render( - { const { container } = render( - { ); expect(container.querySelectorAll('button.element-editor__actions-publish')).toHaveLength(0); }); + +test('Clicking button calls onPublishButtonClick', () => { + const onPublishButtonClick = jest.fn(); + const { container } = render( + + + + ); + fireEvent.click(container.querySelector('button.element-editor__actions-publish')); + expect(onPublishButtonClick).toHaveBeenCalled(); +}); + +test('Do trigger graphql mutation if doPublishElement is true and formHasRendered is true', () => { + const handlePublishBlock = jest.fn(() => Promise.resolve()); + render( + + + + ); + expect(handlePublishBlock).toHaveBeenCalledWith(123); +}); + +test('Do not trigger graphql mutation if doPublishElement is true and formHasRendered is false', () => { + // handlePublishBlock is a graphql mutation defined in publishBlockMutation.js + const handlePublishBlock = jest.fn(() => Promise.resolve()); + render( + + + + ); + expect(handlePublishBlock).not.toHaveBeenCalled(); +}); + +test('Do not trigger graphql mutation if doPublishElement is false and formHasRendered is true', () => { + const handlePublishBlock = jest.fn(() => Promise.resolve()); + render( + + + + ); + expect(handlePublishBlock).not.toHaveBeenCalled(); +}); + +test('onAfterPublish is called after graphql mutation', async () => { + let value = 1; + const handlePublishBlock = jest.fn(() => { + value = 2; + return Promise.resolve(); + }); + const onAfterPublish = jest.fn(() => { + value = 3; + }); + render( + + + + ); + // This is required to ensure the resolved promised returned by handlePublishBlock is handled + await new Promise(resolve => setTimeout(resolve, 0)); + expect(handlePublishBlock).toHaveBeenCalled(); + expect(onAfterPublish).toHaveBeenCalled(); + expect(value).toBe(3); +}); diff --git a/client/src/components/ElementActions/tests/SaveAction-test.js b/client/src/components/ElementActions/tests/SaveAction-test.js index 6e418723..692a30d8 100644 --- a/client/src/components/ElementActions/tests/SaveAction-test.js +++ b/client/src/components/ElementActions/tests/SaveAction-test.js @@ -2,44 +2,70 @@ /* global jest, test, describe, it, expect */ import React from 'react'; -import { render } from '@testing-library/react'; +import { fireEvent, render } from '@testing-library/react'; import { Component as SaveAction } from '../SaveAction'; - -jest.mock('isomorphic-fetch', () => - () => Promise.resolve({ - json: () => ({}), - }) -); - -const WrappedComponent = (props) =>
{props.children}
; -const ActionComponent = SaveAction(WrappedComponent); +import { ElementContext } from '../../ElementEditor/Element'; function makeProps(obj = {}) { return { - title: 'My save action', element: { - ID: 123, - BlockSchema: { type: 'Test' }, - canCreate: true, + id: 123, + version: 234, + liveVersion: false, + blockSchema: { type: 'Test' } + }, + type: { + broken: false + }, + actions: { + handlePublishBlock: () => {} }, - type: { broken: false }, expandable: true, - actions: { handlePublishBlock: () => { } }, toggle: false, ...obj, }; } -test('SaveAction renders a button when block is expandable', () => { +function makeProviderValue(obj = {}) { + return { + formHasRendered: false, + onAfterSave: () => {}, + doSaveElement: false, + onSaveButtonClick: () => {}, + submitForm: () => {}, + formDirty: true, + ...obj, + }; +} + +const WrappedComponent = (props) =>
{props.children}
; +const ActionComponent = SaveAction(WrappedComponent); +const ProvidedActionComponent = (props) => ( + + + +); +test('SaveAction does not render a button when block is expandable and not formDirty', () => { + const { container } = render( + + + + ); + expect(container.querySelectorAll('button.element-editor__actions-save')).toHaveLength(0); +}); +test('SaveAction renders a button when block is expandable and formDirty', () => { const { container } = render( - + ); expect(container.querySelectorAll('button.element-editor__actions-save')).toHaveLength(1); }); test('SaveAction does not render a button when block is not expandable', () => { const { container } = render( - @@ -49,7 +75,7 @@ test('SaveAction does not render a button when block is not expandable', () => { test('SaveAction does not render a button when block is broken', () => { const { container } = render( - { ); expect(container.querySelectorAll('button.element-editor__actions-save')).toHaveLength(0); }); + +test('Clicking button calls onSaveButtonClick', () => { + const onSaveButtonClick = jest.fn(); + const { container } = render( + + + + ); + fireEvent.click(container.querySelector('button.element-editor__actions-save')); + expect(onSaveButtonClick).toHaveBeenCalled(); +}); + +test('submitForm is called if formHasRendered is true and doSaveElement is true', () => { + const submitForm = jest.fn(); + render( + + + + ); + expect(submitForm).toHaveBeenCalled(); +}); + +test('submitForm is not called if formHasRendered is false and doSaveElement is true', () => { + const submitForm = jest.fn(); + render( + + + + ); + expect(submitForm).not.toHaveBeenCalled(); +}); + +test('submitForm is not called if formHasRendered is true and doSaveElement is false', () => { + const submitForm = jest.fn(); + render( + + + + ); + expect(submitForm).not.toHaveBeenCalled(); +}); + +test('onAfterSave is called after submitForm', () => { + let value = 1; + const submitForm = jest.fn(() => { + value = 2; + }); + const onAfterSave = jest.fn(() => { + value = 3; + }); + render( + + + + ); + expect(submitForm).toHaveBeenCalled(); + expect(onAfterSave).toHaveBeenCalled(); + expect(value).toBe(3); +}); diff --git a/client/src/components/ElementEditor/Content.js b/client/src/components/ElementEditor/Content.js index 451fc140..997eb4ec 100644 --- a/client/src/components/ElementEditor/Content.js +++ b/client/src/components/ElementEditor/Content.js @@ -22,8 +22,17 @@ class Content extends PureComponent { handleLoadingError, formDirty, broken, + onFormSchemaSubmitResponse, + ensureFormRendered, + formHasRendered, } = this.props; + const notVisible = !previewExpanded && (ensureFormRendered || formHasRendered); + const extraClass = { + 'element-editor-editform--collapsed': !previewExpanded, + 'element-editor-editform--rendered-not-visible': notVisible, + }; + return (
{!previewExpanded && @@ -35,15 +44,17 @@ class Content extends PureComponent { broken={broken} /> } - {previewExpanded && + {(previewExpanded || ensureFormRendered || formHasRendered) && // Show inline editable fields event.stopPropagation()} elementId={id} activeTab={activeTab} onFormInit={onFormInit} handleLoadingError={handleLoadingError} + onFormSchemaSubmitResponse={onFormSchemaSubmitResponse} + notVisible={notVisible} /> } {formDirty && @@ -69,6 +80,10 @@ Content.propTypes = { InlineEditFormComponent: PropTypes.elementType, handleLoadingError: PropTypes.func, broken: PropTypes.bool, + onFormSchemaSubmitResponse: PropTypes.func, + onFormInit: PropTypes.func, + ensureFormRendered: PropTypes.bool, + formHasRendered: PropTypes.bool, }; Content.defaultProps = {}; diff --git a/client/src/components/ElementEditor/Element.js b/client/src/components/ElementEditor/Element.js index 867941a2..cb8a34a4 100644 --- a/client/src/components/ElementEditor/Element.js +++ b/client/src/components/ElementEditor/Element.js @@ -1,20 +1,25 @@ /* global window */ -import React, { Component } from 'react'; +import React, { Component, createContext } from 'react'; import PropTypes from 'prop-types'; import { elementType } from 'types/elementType'; import { elementTypeType } from 'types/elementTypeType'; -import { compose } from 'redux'; +import { bindActionCreators, compose } from 'redux'; import { inject } from 'lib/Injector'; import i18n from 'i18n'; import classNames from 'classnames'; import { connect } from 'react-redux'; +import { submit } from 'redux-form'; import { loadElementFormStateName } from 'state/editor/loadElementFormStateName'; import { loadElementSchemaValue } from 'state/editor/loadElementSchemaValue'; import * as TabsActions from 'state/tabs/TabsActions'; import { DragSource, DropTarget } from 'react-dnd'; import { getEmptyImage } from 'react-dnd-html5-backend'; import { elementDragSource, isOverTop } from 'lib/dragHelpers'; +import * as toastsActions from 'state/toasts/ToastsActions'; +import { addFormChanged, removeFormChanged } from 'state/unsavedForms/UnsavedFormsActions'; + +export const ElementContext = createContext(null); /** * The Element component used in the context of an ElementEditor shows the summary @@ -28,17 +33,33 @@ class Element extends Component { constructor(props) { super(props); + this.showSavedElementToast = this.showSavedElementToast.bind(this); this.handleKeyUp = this.handleKeyUp.bind(this); this.handleExpand = this.handleExpand.bind(this); this.handleLoadingError = this.handleLoadingError.bind(this); this.handleTabClick = this.handleTabClick.bind(this); this.updateFormTab = this.updateFormTab.bind(this); + this.handleFormSchemaSubmitResponse = this.handleFormSchemaSubmitResponse.bind(this); + this.handleFormInit = this.handleFormInit.bind(this); + this.handleSaveButtonClick = this.handleSaveButtonClick.bind(this); + this.handlePublishButtonClick = this.handlePublishButtonClick.bind(this); + this.handleAfterSave = this.handleAfterSave.bind(this); + this.handleAfterPublish = this.handleAfterPublish.bind(this); + this.refetchElementalArea = this.refetchElementalArea.bind(this); this.state = { previewExpanded: false, initialTab: '', loadingError: false, childRenderingError: false, + newTitle: this.props.element.title, + justClickedPublishButton: false, + doSaveElement: false, + doPublishElement: false, + doPublishElementAfterSave: false, + ensureFormRendered: false, + formHasRendered: false, + doDispatchAddFormChanged: false, }; } @@ -53,6 +74,72 @@ class Element extends Component { 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 (this.props.formStateExists) { + this.setState({ + formHasRendered: true + }); + } + } + + componentDidUpdate() { + if (this.state.justClickedPublishButton && this.state.formHasRendered) { + this.setState({ + justClickedPublishButton: false, + }); + if (this.props.formDirty) { + // Save the element first before publishing, which may trigger validation errors + this.props.submitForm(); + this.setState({ + doPublishElementAfterSave: true, + }); + } else { + // Just publish the element straight away without saving first + this.setState({ + doPublishElement: true, + }); + } + } + if (this.state.doDispatchAddFormChanged) { + this.setState({ + doDispatchAddFormChanged: false, + }); + this.props.dispatchAddFormChanged(); + } + } + + showSavedElementToast(newTitle) { + const title = newTitle || this.getNoTitle(); + const message = i18n.inject( + i18n._t('ElementSaveAction.SUCCESS_NOTIFICATION', 'Saved \'{title}\' successfully'), + { title } + ); + this.props.actions.toasts.success(message); + } + + showPublishedElementToast(wasError) { + const title = this.state.newTitle || this.getNoTitle(); + if (wasError) { + const message = i18n.inject( + i18n._t('ElementPublishAction.ERROR_NOTIFICATION', 'Error publishing \'{title}\''), + { title } + ); + this.props.actions.toasts.error(message); + } else { + const message = i18n.inject( + i18n._t('ElementPublishAction.SUCCESS_NOTIFICATION', 'Published \'{title}\' successfully'), + { title } + ); + this.props.actions.toasts.success(message); + } + } + + getNoTitle() { + return i18n.inject( + i18n._t('ElementHeader.NOTITLE', 'Untitled {type} block'), + { type: this.props.type.title } + ); } /** @@ -215,6 +302,102 @@ class Element extends Component { } } + handleSaveButtonClick() { + this.setState({ + ensureFormRendered: true, + doSaveElement: true, + }); + } + + handlePublishButtonClick() { + this.setState({ + justClickedPublishButton: true, + ensureFormRendered: true, + }); + } + + handleAfterSave() { + this.setState({ + doSaveElement: false, + }); + } + + handleAfterPublish(wasError) { + this.showPublishedElementToast(wasError); + this.setState({ + doPublishElement: false, + doPublishElementAfterSave: false, + }); + // Ensure that formDirty becomes falsey after publishing + // We need to call at a later render rather than straight away or redux-form may override this + // and set the form state to dirty under certain conditions + // setTimeout is a hackish way to do this, though I'm not sure how else we can do this + // The core issue is that redux-form will detect changes when a form is hydrated for the first + // time under certain conditions, specifically during a behat test when trying to publish a closed + // block when presumably the apollo cache is empty (or something like that). This happens late and + // there are no hooks/callbacks available after this happens the input onchange handlers are fired + setTimeout(() => { + this.props.dispatchRemoveFormChanged(); + }, 500); + this.refetchElementalArea(); + } + + handleFormInit(activeTab) { + this.updateFormTab(activeTab); + this.setState({ + formHasRendered: true, + }); + } + + handleFormSchemaSubmitResponse(formSchema, title) { + // Slightly annoyingly, on validation error formSchema at this point will not have an errors node + // Instead it will have the original formSchema id used for the GET request to get the formSchema i.e. + // admin/elemental-area/schema/ + // Instead of the one used by the POST submission i.e. + // admin/elemental-area/elementForm/ + const hasValidationErrors = formSchema.id.match(/\/schema\/elemental-area\/([0-9]+)/); + if (hasValidationErrors) { + if (this.props.type.inlineEditable) { + this.setState({ + previewExpanded: true, + }); + } + // Ensure that formDirty remains truthy + // Note we need to call this.props.dispatchAddFormChanged() on the next render rather than straight away + // or it will get unset by code somewhere else, probably redux-form + this.setState({ + doDispatchAddFormChanged: true, + }); + // Don't accidentally auto publish the element once validation errors are fixed + if (this.state.doPublishElementAfterSave) { + this.setState({ + doPublishElementAfterSave: false, + }); + } + return; + } + // Form is valid + this.setState({ + newTitle: title, + }); + if (this.state.doPublishElementAfterSave) { + this.setState({ + doPublishElementAfterSave: false, + doPublishElement: true, + }); + } + if (!this.state.doPublishElement && !this.state.doPublishElementAfterSave) { + this.showSavedElementToast(title); + } + this.refetchElementalArea(); + } + + refetchElementalArea() { + // This will trigger a graphql readOneElementalArea request that will cause this + // element to re-render including any updated title and versioned badge + window.ss.apolloClient.queryManager.reFetchObservableQueries(); + } + render() { const { element, @@ -229,6 +412,8 @@ class Element extends Component { isDragging, isOver, onDragEnd, + submitForm, + formDirty, } = this.props; const { childRenderingError, previewExpanded } = this.state; @@ -248,6 +433,19 @@ class Element extends Component { this.getVersionedStateClassName() ); + // eslint-disable-next-line react/jsx-no-constructed-context-values + const providerValue = { + formDirty, + formHasRendered: this.state.formHasRendered, + onPublishButtonClick: this.handlePublishButtonClick, + doPublishElement: this.state.doPublishElement, + onSaveButtonClick: this.handleSaveButtonClick, + doSaveElement: this.state.doSaveElement, + onAfterSave: this.handleAfterSave, + onAfterPublish: this.handleAfterPublish, + submitForm, + }; + const content = connectDropTarget(
- - - { - !childRenderingError && - + this.updateFormTab(activeTab)} - handleLoadingError={this.handleLoadingError} - broken={type.broken} + disableTooltip={isDragging} + onDragEnd={onDragEnd} /> - } - { - childRenderingError && -
- {i18n._t('ElementalElement.CHILD_RENDERING_ERROR', 'Something went wrong with this block. Please try saving and refreshing the CMS.')} -
- } + { + !childRenderingError && + this.handleFormInit(activeTab)} + /> + } + + { + childRenderingError && +
+ {i18n._t('ElementalElement.CHILD_RENDERING_ERROR', 'Something went wrong with this block. Please try saving and refreshing the CMS.')} +
+ } +
); if (!previewExpanded) { @@ -305,7 +508,6 @@ function mapStateToProps(state, ownProps) { const elementId = ownProps.element.id; const elementName = loadElementFormStateName(elementId); const elementFormSchema = loadElementSchemaValue('schemaUrl', elementId); - const filterFieldsForTabs = (field) => field.component === 'Tabs'; // Find name of the first Tabs component in the form @@ -318,6 +520,11 @@ 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 @@ -329,6 +536,8 @@ function mapStateToProps(state, ownProps) { return { tabSetName, activeTab, + formDirty, + formStateExists, }; } @@ -339,6 +548,23 @@ function mapDispatchToProps(dispatch, ownProps) { onActivateTab(tabSetName, activeTabName) { dispatch(TabsActions.activateTab(`element.${elementName}__${tabSetName}`, activeTabName)); }, + submitForm() { + // Perform a redux-form remote-submit + dispatch(submit(`element.${elementName}`)); + }, + dispatchAddFormChanged() { + // Ensures the form identifier is in unsavedForms in the global redux state + // This is used to derive the formDirty prop in mapStateToProps + dispatch(addFormChanged(`element.${elementName}`)); + }, + dispatchRemoveFormChanged() { + // Removes the form identifier from unsavedForms in the global redux store + // Opposite of beheaviour of dispatchAddFormChanged() + dispatch(removeFormChanged(`element.${elementName}`)); + }, + actions: { + toasts: bindActionCreators(toastsActions, dispatch), + }, }; } diff --git a/client/src/components/ElementEditor/InlineEditForm.js b/client/src/components/ElementEditor/InlineEditForm.js index 819167e4..419e16b1 100644 --- a/client/src/components/ElementEditor/InlineEditForm.js +++ b/client/src/components/ElementEditor/InlineEditForm.js @@ -13,6 +13,7 @@ class InlineEditForm extends PureComponent { super(props); this.handleLoadingError = this.handleLoadingError.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); this.state = { loadingError: null @@ -41,19 +42,35 @@ class InlineEditForm extends PureComponent { handleLoadingError(); } + handleSubmit(data, action, submitFn) { + let title = ''; + Object.keys(data).forEach(key => { + if (key.match(/PageElements_[0-9]+_Title/)) { + title = data[key]; + } + }); + return submitFn() + .then(formSchema => this.props.onFormSchemaSubmitResponse(formSchema, title)); + } + render() { - const { elementId, extraClass, onClick, onFormInit, formHasState } = this.props; + const { elementId, extraClass, onClick, onFormInit, formHasState, notVisible } = this.props; const { loadingError } = this.state; const classNames = classnames('element-editor-editform', extraClass); const schemaUrl = loadElementSchemaValue('schemaUrl', elementId); + // formTag needs to be a form rather than a div so that the php FormAction that turns into + // a