diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
index ade85f4d..de4759bb 100644
--- a/client/dist/js/bundle.js
+++ b/client/dist/js/bundle.js
@@ -1,4 +1,2602 @@
-!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,onSubmit:()=>new Promise((e=>e))};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<o.y+o.height/2};t.getDragIndicatorIndex=(e,t,n,r)=>{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<n;a++)r[a]=arguments[a];const l=r.map((e=>!(!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() { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./client/src/boot/index.js":
+/*!**********************************!*\
+  !*** ./client/src/boot/index.js ***!
+  \**********************************/
+/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {
+
+
+
+var _registerComponents = _interopRequireDefault(__webpack_require__(/*! boot/registerComponents */ "./client/src/boot/registerComponents.js"));
+var _registerTransforms = _interopRequireDefault(__webpack_require__(/*! boot/registerTransforms */ "./client/src/boot/registerTransforms.js"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+window.document.addEventListener('DOMContentLoaded', () => {
+  (0, _registerComponents.default)();
+  (0, _registerTransforms.default)();
+});
+
+/***/ }),
+
+/***/ "./client/src/boot/registerComponents.js":
+/*!***********************************************!*\
+  !*** ./client/src/boot/registerComponents.js ***!
+  \***********************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = void 0;
+var _Injector = _interopRequireDefault(__webpack_require__(/*! lib/Injector */ "lib/Injector"));
+var _Element = _interopRequireDefault(__webpack_require__(/*! components/ElementEditor/Element */ "./client/src/components/ElementEditor/Element.js"));
+var _ElementActions = _interopRequireDefault(__webpack_require__(/*! components/ElementEditor/ElementActions */ "./client/src/components/ElementEditor/ElementActions.js"));
+var _ElementEditor = _interopRequireDefault(__webpack_require__(/*! components/ElementEditor/ElementEditor */ "./client/src/components/ElementEditor/ElementEditor.js"));
+var _ElementList = _interopRequireDefault(__webpack_require__(/*! components/ElementEditor/ElementList */ "./client/src/components/ElementEditor/ElementList.js"));
+var _Toolbar = _interopRequireDefault(__webpack_require__(/*! components/ElementEditor/Toolbar */ "./client/src/components/ElementEditor/Toolbar.js"));
+var _AddNewButton = _interopRequireDefault(__webpack_require__(/*! components/ElementEditor/AddNewButton */ "./client/src/components/ElementEditor/AddNewButton.js"));
+var _Header = _interopRequireDefault(__webpack_require__(/*! components/ElementEditor/Header */ "./client/src/components/ElementEditor/Header.js"));
+var _Content = _interopRequireDefault(__webpack_require__(/*! components/ElementEditor/Content */ "./client/src/components/ElementEditor/Content.js"));
+var _Summary = _interopRequireDefault(__webpack_require__(/*! components/ElementEditor/Summary */ "./client/src/components/ElementEditor/Summary.js"));
+var _InlineEditForm = _interopRequireDefault(__webpack_require__(/*! components/ElementEditor/InlineEditForm */ "./client/src/components/ElementEditor/InlineEditForm.js"));
+var _AddElementPopover = _interopRequireDefault(__webpack_require__(/*! components/ElementEditor/AddElementPopover */ "./client/src/components/ElementEditor/AddElementPopover.js"));
+var _HoverBar = _interopRequireDefault(__webpack_require__(/*! components/ElementEditor/HoverBar */ "./client/src/components/ElementEditor/HoverBar.js"));
+var _DragPositionIndicator = _interopRequireDefault(__webpack_require__(/*! components/ElementEditor/DragPositionIndicator */ "./client/src/components/ElementEditor/DragPositionIndicator.js"));
+var _TextCheckboxGroupField = _interopRequireDefault(__webpack_require__(/*! components/TextCheckboxGroupField/TextCheckboxGroupField */ "./client/src/components/TextCheckboxGroupField/TextCheckboxGroupField.js"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = () => {
+  _Injector.default.component.registerMany({
+    ElementEditor: _ElementEditor.default,
+    ElementToolbar: _Toolbar.default,
+    ElementAddNewButton: _AddNewButton.default,
+    ElementList: _ElementList.default,
+    Element: _Element.default,
+    ElementActions: _ElementActions.default,
+    ElementHeader: _Header.default,
+    ElementContent: _Content.default,
+    ElementSummary: _Summary.default,
+    ElementInlineEditForm: _InlineEditForm.default,
+    AddElementPopover: _AddElementPopover.default,
+    HoverBar: _HoverBar.default,
+    DragPositionIndicator: _DragPositionIndicator.default,
+    TextCheckboxGroupField: _TextCheckboxGroupField.default
+  });
+};
+exports["default"] = _default;
+
+/***/ }),
+
+/***/ "./client/src/boot/registerTransforms.js":
+/*!***********************************************!*\
+  !*** ./client/src/boot/registerTransforms.js ***!
+  \***********************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = void 0;
+var _Injector = _interopRequireDefault(__webpack_require__(/*! lib/Injector */ "lib/Injector"));
+var _readOneBlockQuery = _interopRequireDefault(__webpack_require__(/*! state/history/readOneBlockQuery */ "./client/src/state/history/readOneBlockQuery.js"));
+var _HistoricElementView = _interopRequireDefault(__webpack_require__(/*! components/HistoricElementView/HistoricElementView */ "./client/src/components/HistoricElementView/HistoricElementView.js"));
+var _revertToBlockVersionMutation = _interopRequireDefault(__webpack_require__(/*! state/history/revertToBlockVersionMutation */ "./client/src/state/history/revertToBlockVersionMutation.js"));
+var _readBlocksForAreaQuery = _interopRequireDefault(__webpack_require__(/*! state/editor/readBlocksForAreaQuery */ "./client/src/state/editor/readBlocksForAreaQuery.js"));
+var _addElementMutation = _interopRequireDefault(__webpack_require__(/*! state/editor/addElementMutation */ "./client/src/state/editor/addElementMutation.js"));
+var _ArchiveAction = _interopRequireDefault(__webpack_require__(/*! components/ElementActions/ArchiveAction */ "./client/src/components/ElementActions/ArchiveAction.js"));
+var _DuplicateAction = _interopRequireDefault(__webpack_require__(/*! components/ElementActions/DuplicateAction */ "./client/src/components/ElementActions/DuplicateAction.js"));
+var _SaveAction = _interopRequireDefault(__webpack_require__(/*! components/ElementActions/SaveAction */ "./client/src/components/ElementActions/SaveAction.js"));
+var _PublishAction = _interopRequireDefault(__webpack_require__(/*! components/ElementActions/PublishAction */ "./client/src/components/ElementActions/PublishAction.js"));
+var _UnpublishAction = _interopRequireDefault(__webpack_require__(/*! components/ElementActions/UnpublishAction */ "./client/src/components/ElementActions/UnpublishAction.js"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = () => {
+  _Injector.default.transform('elemental-fieldgroup', updater => {
+    updater.component('FieldGroup.HistoryViewer.VersionDetail', _HistoricElementView.default, 'HistoricElement');
+  }, {
+    after: 'field-holders'
+  });
+  _Injector.default.transform('elements-history', updater => {
+    updater.component('HistoryViewer.Form_ItemEditForm', _readOneBlockQuery.default, 'ElementHistoryViewer');
+  });
+  _Injector.default.transform('blocks-history-revert', updater => {
+    updater.component('HistoryViewerToolbar.VersionedAdmin.HistoryViewer.Element.HistoryViewerVersionDetail', _revertToBlockVersionMutation.default, 'BlockRevertMutation');
+  });
+  _Injector.default.transform('cms-element-editor', updater => {
+    updater.component('ElementList', _readBlocksForAreaQuery.default, 'PageElements');
+  });
+  _Injector.default.transform('cms-element-adder', updater => {
+    updater.component('AddElementPopover', _addElementMutation.default, 'ElementAddButton');
+  });
+  _Injector.default.transform('element-actions', updater => {
+    updater.component('ElementActions', _SaveAction.default, 'ElementActionsWithSave');
+    updater.component('ElementActions', _PublishAction.default, 'ElementActionsWithPublish');
+    updater.component('ElementActions', _UnpublishAction.default, 'ElementActionsWithUnpublish');
+    updater.component('ElementActions', _DuplicateAction.default, 'ElementActionsWithDuplicate');
+    updater.component('ElementActions', _ArchiveAction.default, 'ElementActionsWithArchive');
+  });
+};
+exports["default"] = _default;
+
+/***/ }),
+
+/***/ "./client/src/components/ElementActions/AbstractAction.js":
+/*!****************************************************************!*\
+  !*** ./client/src/components/ElementActions/AbstractAction.js ***!
+  \****************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = void 0;
+var _react = _interopRequireDefault(__webpack_require__(/*! react */ "react"));
+var _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ "prop-types"));
+var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "classnames"));
+var _reactstrap = __webpack_require__(/*! reactstrap */ "reactstrap");
+var _elementTypeType = __webpack_require__(/*! types/elementTypeType */ "./client/src/types/elementTypeType.js");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const AbstractAction = props => {
+  const {
+    className,
+    title,
+    label
+  } = props;
+  const itemProps = {
+    className: (0, _classnames.default)(className, 'dropdown-item'),
+    ...props
+  };
+  return _react.default.createElement(_reactstrap.DropdownItem, itemProps, label || title);
+};
+AbstractAction.propTypes = {
+  disabled: _propTypes.default.bool,
+  className: _propTypes.default.string,
+  onClick: _propTypes.default.func,
+  title: _propTypes.default.string,
+  name: _propTypes.default.string,
+  type: _elementTypeType.elementTypeType,
+  active: _propTypes.default.bool,
+  label: _propTypes.default.string
+};
+AbstractAction.defaultProps = {
+  disabled: false
+};
+var _default = exports["default"] = AbstractAction;
+
+/***/ }),
+
+/***/ "./client/src/components/ElementActions/ArchiveAction.js":
+/*!***************************************************************!*\
+  !*** ./client/src/components/ElementActions/ArchiveAction.js ***!
+  \***************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = exports.Component = void 0;
+var _react = _interopRequireDefault(__webpack_require__(/*! react */ "react"));
+var _redux = __webpack_require__(/*! redux */ "redux");
+var _AbstractAction = _interopRequireDefault(__webpack_require__(/*! components/ElementActions/AbstractAction */ "./client/src/components/ElementActions/AbstractAction.js"));
+var _archiveBlockMutation = _interopRequireDefault(__webpack_require__(/*! state/editor/archiveBlockMutation */ "./client/src/state/editor/archiveBlockMutation.js"));
+var _i18n = _interopRequireDefault(__webpack_require__(/*! i18n */ "i18n"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ArchiveAction = MenuComponent => props => {
+  const handleClick = event => {
+    event.stopPropagation();
+    const {
+      element: {
+        id
+      },
+      isPublished,
+      actions: {
+        handleArchiveBlock
+      }
+    } = props;
+    let archiveMessage = _i18n.default._t('ElementArchiveAction.CONFIRM_DELETE', 'Are you sure you want to send this block to the archive?');
+    if (isPublished) {
+      archiveMessage = _i18n.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?');
+    }
+    if (handleArchiveBlock && window.confirm(archiveMessage)) {
+      handleArchiveBlock(id).then(() => {
+        const preview = window.jQuery('.cms-preview');
+        if (preview && typeof preview.entwine === 'function') {
+          preview.entwine('ss.preview')._loadUrl(preview.find('iframe').attr('src'));
+        }
+      });
+    }
+  };
+  const disabled = props.element.canDelete !== undefined && !props.element.canDelete;
+  const label = _i18n.default._t('ElementArchiveAction.ARCHIVE', 'Archive');
+  const title = disabled ? _i18n.default._t('ElementArchiveAction.ARCHIVE_PERMISSION_DENY', 'Archive, insufficient permissions') : label;
+  const newProps = {
+    label,
+    title,
+    disabled,
+    className: 'element-editor__actions-archive',
+    onClick: handleClick,
+    toggle: props.toggle
+  };
+  return _react.default.createElement(MenuComponent, props, props.children, _react.default.createElement(_AbstractAction.default, newProps));
+};
+exports.Component = ArchiveAction;
+var _default = exports["default"] = (0, _redux.compose)(_archiveBlockMutation.default, ArchiveAction);
+
+/***/ }),
+
+/***/ "./client/src/components/ElementActions/DuplicateAction.js":
+/*!*****************************************************************!*\
+  !*** ./client/src/components/ElementActions/DuplicateAction.js ***!
+  \*****************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = exports.Component = void 0;
+var _react = _interopRequireDefault(__webpack_require__(/*! react */ "react"));
+var _redux = __webpack_require__(/*! redux */ "redux");
+var _AbstractAction = _interopRequireDefault(__webpack_require__(/*! components/ElementActions/AbstractAction */ "./client/src/components/ElementActions/AbstractAction.js"));
+var _duplicateBlockMutation = _interopRequireDefault(__webpack_require__(/*! state/editor/duplicateBlockMutation */ "./client/src/state/editor/duplicateBlockMutation.js"));
+var _i18n = _interopRequireDefault(__webpack_require__(/*! i18n */ "i18n"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const DuplicateAction = MenuComponent => props => {
+  if (props.type.broken) {
+    return _react.default.createElement(MenuComponent, props);
+  }
+  const handleClick = event => {
+    event.stopPropagation();
+    const {
+      element: {
+        id
+      },
+      actions: {
+        handleDuplicateBlock
+      }
+    } = props;
+    if (handleDuplicateBlock) {
+      handleDuplicateBlock(id).then(() => {
+        const preview = window.jQuery('.cms-preview');
+        preview.entwine('ss.preview')._loadUrl(preview.find('iframe').attr('src'));
+      });
+    }
+  };
+  const disabled = props.element.canCreate !== undefined && !props.element.canCreate;
+  const label = _i18n.default._t('ElementArchiveAction.DUPLICATE', 'Duplicate');
+  const title = disabled ? _i18n.default._t('ElementArchiveAction.DUPLICATE_PERMISSION_DENY', 'Duplicate, insufficient permissions') : label;
+  const newProps = {
+    label,
+    title,
+    disabled,
+    className: 'element-editor__actions-duplicate',
+    onClick: handleClick,
+    toggle: props.toggle
+  };
+  return _react.default.createElement(MenuComponent, props, props.children, _react.default.createElement(_AbstractAction.default, newProps));
+};
+exports.Component = DuplicateAction;
+var _default = exports["default"] = (0, _redux.compose)(_duplicateBlockMutation.default, DuplicateAction);
+
+/***/ }),
+
+/***/ "./client/src/components/ElementActions/PublishAction.js":
+/*!***************************************************************!*\
+  !*** ./client/src/components/ElementActions/PublishAction.js ***!
+  \***************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = exports.Component = void 0;
+var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react"));
+var _redux = __webpack_require__(/*! redux */ "redux");
+var _AbstractAction = _interopRequireDefault(__webpack_require__(/*! components/ElementActions/AbstractAction */ "./client/src/components/ElementActions/AbstractAction.js"));
+var _publishBlockMutation = _interopRequireDefault(__webpack_require__(/*! state/editor/publishBlockMutation */ "./client/src/state/editor/publishBlockMutation.js"));
+var _i18n = _interopRequireDefault(__webpack_require__(/*! i18n */ "i18n"));
+var _Element = __webpack_require__(/*! components/ElementEditor/Element */ "./client/src/components/ElementEditor/Element.js");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const reportPublicationStatus = (type, title, success) => {
+  const noTitle = _i18n.default.inject(_i18n.default._t('ElementHeader.NOTITLE', 'Untitled {type} block'), {
+    type
+  });
+  const successMessage = _i18n.default.inject(_i18n.default._t('ElementPublishAction.SUCCESS_NOTIFICATION', 'Published \'{title}\' successfully'), {
+    title: title || noTitle
+  });
+  const errorMessage = _i18n.default.inject(_i18n.default._t('ElementPublishAction.ERROR_NOTIFICATION', 'Error publishing \'{title}\''), {
+    title: title || noTitle
+  });
+  window.jQuery.noticeAdd({
+    text: success ? successMessage : errorMessage,
+    stay: false,
+    type: success ? 'success' : 'error'
+  });
+};
+const PublishAction = MenuComponent => props => {
+  const {
+    formDirty,
+    onPublishButtonClick,
+    doPublishElement,
+    onAfterPublish,
+    formHasRendered
+  } = (0, _react.useContext)(_Element.ElementContext);
+  const {
+    element,
+    type,
+    actions
+  } = props;
+  const publishElement = () => {
+    actions.handlePublishBlock(element.id).then(() => reportPublicationStatus(type.title, element.title, true)).catch(() => reportPublicationStatus(type.title, element.title, false));
+    onAfterPublish();
+  };
+  const handleClick = event => {
+    event.stopPropagation();
+    onPublishButtonClick();
+  };
+  const disabled = props.element.canPublish !== undefined && !props.element.canPublish;
+  const label = _i18n.default._t('ElementArchiveAction.PUBLISH', 'Publish');
+  const title = disabled ? _i18n.default._t('ElementArchiveAction.PUBLISH_PERMISSION_DENY', 'Publish, insufficient permissions') : label;
+  const newProps = {
+    label,
+    title,
+    disabled,
+    className: 'element-editor__actions-publish',
+    onClick: handleClick,
+    toggle: props.toggle
+  };
+  (0, _react.useEffect)(() => {
+    if (formHasRendered && doPublishElement) {
+      publishElement();
+    }
+  }, [formHasRendered, doPublishElement]);
+  if (props.type.broken) {
+    return _react.default.createElement(MenuComponent, props);
+  }
+  return _react.default.createElement(MenuComponent, props, props.children, (formDirty || !element.isLiveVersion) && _react.default.createElement(_AbstractAction.default, newProps));
+};
+exports.Component = PublishAction;
+var _default = exports["default"] = (0, _redux.compose)(_publishBlockMutation.default, PublishAction);
+
+/***/ }),
+
+/***/ "./client/src/components/ElementActions/SaveAction.js":
+/*!************************************************************!*\
+  !*** ./client/src/components/ElementActions/SaveAction.js ***!
+  \************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = exports.Component = void 0;
+var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react"));
+var _redux = __webpack_require__(/*! redux */ "redux");
+var _reactRedux = __webpack_require__(/*! react-redux */ "react-redux");
+var _AbstractAction = _interopRequireDefault(__webpack_require__(/*! components/ElementActions/AbstractAction */ "./client/src/components/ElementActions/AbstractAction.js"));
+var _i18n = _interopRequireDefault(__webpack_require__(/*! i18n */ "i18n"));
+var _loadElementFormStateName = __webpack_require__(/*! state/editor/loadElementFormStateName */ "./client/src/state/editor/loadElementFormStateName.js");
+var _Element = __webpack_require__(/*! components/ElementEditor/Element */ "./client/src/components/ElementEditor/Element.js");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const SaveAction = MenuComponent => props => {
+  const {
+    doSaveElement,
+    onSaveButtonClick,
+    onAfterSave,
+    formHasRendered,
+    submitForm
+  } = (0, _react.useContext)(_Element.ElementContext);
+  const handleClick = event => {
+    event.stopPropagation();
+    onSaveButtonClick();
+  };
+  const saveElement = () => {
+    submitForm();
+    onAfterSave();
+  };
+  const newProps = {
+    title: _i18n.default._t('ElementSaveAction.SAVE', 'Save'),
+    className: 'element-editor__actions-save',
+    onClick: handleClick
+  };
+  (0, _react.useEffect)(() => {
+    if (formHasRendered && doSaveElement) {
+      saveElement();
+    }
+  }, [formHasRendered, doSaveElement]);
+  if (!props.expandable || props.type.broken) {
+    return _react.default.createElement(MenuComponent, props);
+  }
+  return _react.default.createElement(MenuComponent, props, props.children, _react.default.createElement(_AbstractAction.default, newProps));
+};
+exports.Component = SaveAction;
+function mapStateToProps(state, ownProps) {
+  const formName = (0, _loadElementFormStateName.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
+  };
+}
+var _default = exports["default"] = (0, _redux.compose)((0, _reactRedux.connect)(mapStateToProps), SaveAction);
+
+/***/ }),
+
+/***/ "./client/src/components/ElementActions/UnpublishAction.js":
+/*!*****************************************************************!*\
+  !*** ./client/src/components/ElementActions/UnpublishAction.js ***!
+  \*****************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = exports.Component = void 0;
+var _react = _interopRequireDefault(__webpack_require__(/*! react */ "react"));
+var _redux = __webpack_require__(/*! redux */ "redux");
+var _AbstractAction = _interopRequireDefault(__webpack_require__(/*! components/ElementActions/AbstractAction */ "./client/src/components/ElementActions/AbstractAction.js"));
+var _unpublishBlockMutation = _interopRequireDefault(__webpack_require__(/*! state/editor/unpublishBlockMutation */ "./client/src/state/editor/unpublishBlockMutation.js"));
+var _i18n = _interopRequireDefault(__webpack_require__(/*! i18n */ "i18n"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const UnpublishAction = MenuComponent => props => {
+  if (props.type.broken) {
+    return _react.default.createElement(MenuComponent, props);
+  }
+  const {
+    element,
+    type,
+    actions: {
+      handleUnpublishBlock
+    }
+  } = props;
+  const handleClick = event => {
+    event.stopPropagation();
+    const {
+      jQuery: $
+    } = window;
+    const noTitle = _i18n.default.inject(_i18n.default._t('ElementHeader.NOTITLE', 'Untitled {type} block'), {
+      type: type.title
+    });
+    if (handleUnpublishBlock) {
+      handleUnpublishBlock(element.id).then(() => {
+        const preview = $('.cms-preview');
+        preview.entwine('ss.preview')._loadUrl(preview.find('iframe').attr('src'));
+        $.noticeAdd({
+          text: _i18n.default.inject(_i18n.default._t('ElementUnpublishAction.SUCCESS_NOTIFICATION', 'Removed \'{title}\' from the published page'), {
+            title: element.title || noTitle
+          }),
+          stay: false,
+          type: 'success'
+        });
+      }).catch(() => {
+        $.noticeAdd({
+          text: _i18n.default.inject(_i18n.default._t('ElementUnpublishAction.ERROR_NOTIFICATION', 'Error unpublishing \'{title}\''), {
+            title: element.title || noTitle
+          }),
+          stay: false,
+          type: 'error'
+        });
+      });
+    }
+  };
+  const disabled = props.element.canUnpublish !== undefined && !props.element.canUnpublish;
+  const label = _i18n.default._t('ElementArchiveAction.UNPUBLISH', 'Unpublish');
+  const title = disabled ? _i18n.default._t('ElementArchiveAction.UNPUBLISH_PERMISSION_DENY', 'Unpublish, insufficient permissions') : label;
+  const newProps = {
+    label,
+    title,
+    disabled,
+    className: 'element-editor__actions-unpublish',
+    onClick: handleClick,
+    toggle: props.toggle
+  };
+  return _react.default.createElement(MenuComponent, props, props.children, element.isPublished && _react.default.createElement(_AbstractAction.default, newProps));
+};
+exports.Component = UnpublishAction;
+var _default = exports["default"] = (0, _redux.compose)(_unpublishBlockMutation.default, UnpublishAction);
+
+/***/ }),
+
+/***/ "./client/src/components/ElementEditor/AddElementPopover.js":
+/*!******************************************************************!*\
+  !*** ./client/src/components/ElementEditor/AddElementPopover.js ***!
+  \******************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react"));
+var _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ "prop-types"));
+var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "classnames"));
+var _Injector = __webpack_require__(/*! lib/Injector */ "lib/Injector");
+var _elementTypeType = __webpack_require__(/*! types/elementTypeType */ "./client/src/types/elementTypeType.js");
+var _i18n = _interopRequireDefault(__webpack_require__(/*! i18n */ "i18n"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+class AddElementPopover extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.handleToggle = this.handleToggle.bind(this);
+  }
+  getElementButtonClickHandler(elementType) {
+    return event => {
+      const {
+        actions: {
+          handleAddElementToArea
+        },
+        insertAfterElement
+      } = this.props;
+      event.preventDefault();
+      handleAddElementToArea(elementType.class, insertAfterElement).then(() => {
+        const preview = window.jQuery('.cms-preview');
+        preview.entwine('ss.preview')._loadUrl(preview.find('iframe').attr('src'));
+      });
+      this.handleToggle();
+    };
+  }
+  handleToggle() {
+    const {
+      toggle
+    } = this.props;
+    toggle();
+  }
+  render() {
+    const {
+      PopoverOptionSetComponent,
+      elementTypes,
+      container,
+      extraClass,
+      isOpen,
+      placement,
+      target
+    } = this.props;
+    const popoverClassNames = (0, _classnames.default)('element-editor-add-element', extraClass);
+    const buttons = elementTypes.map(elementType => ({
+      content: elementType.title,
+      key: elementType.name,
+      className: (0, _classnames.default)(elementType.icon, 'btn--icon-xl', 'element-editor-add-element__button'),
+      onClick: this.getElementButtonClickHandler(elementType)
+    }));
+    return _react.default.createElement(PopoverOptionSetComponent, {
+      buttons: buttons,
+      searchPlaceholder: _i18n.default._t('ElementAddElementPopover.SEARCH_BLOCKS', 'Search blocks'),
+      extraClass: popoverClassNames,
+      container: container,
+      isOpen: isOpen,
+      placement: placement,
+      target: target,
+      toggle: this.handleToggle
+    });
+  }
+}
+AddElementPopover.propTypes = {
+  container: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.object]),
+  elementTypes: _propTypes.default.arrayOf(_elementTypeType.elementTypeType).isRequired,
+  extraClass: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array, _propTypes.default.object]),
+  isOpen: _propTypes.default.bool.isRequired,
+  placement: _propTypes.default.string,
+  target: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.object]).isRequired,
+  toggle: _propTypes.default.func.isRequired,
+  areaId: _propTypes.default.number.isRequired,
+  insertAfterElement: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+};
+var _default = exports["default"] = (0, _Injector.inject)(['PopoverOptionSet'], PopoverOptionSetComponent => ({
+  PopoverOptionSetComponent
+}), () => 'ElementEditor')(AddElementPopover);
+
+/***/ }),
+
+/***/ "./client/src/components/ElementEditor/AddNewButton.js":
+/*!*************************************************************!*\
+  !*** ./client/src/components/ElementEditor/AddNewButton.js ***!
+  \*************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = exports.Component = void 0;
+var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react"));
+var _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ "prop-types"));
+var _reactstrap = __webpack_require__(/*! reactstrap */ "reactstrap");
+var _i18n = _interopRequireDefault(__webpack_require__(/*! i18n */ "i18n"));
+var _elementTypeType = __webpack_require__(/*! types/elementTypeType */ "./client/src/types/elementTypeType.js");
+var _Injector = __webpack_require__(/*! lib/Injector */ "lib/Injector");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+class AddNewButton extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      popoverOpen: false
+    };
+  }
+  toggle() {
+    this.setState(prevState => ({
+      popoverOpen: !prevState.popoverOpen
+    }));
+  }
+  render() {
+    const {
+      AddElementPopoverComponent,
+      elementTypes,
+      areaId
+    } = this.props;
+    const buttonAttributes = {
+      id: `ElementalArea${areaId}_AddButton`,
+      color: 'primary',
+      onClick: this.toggle,
+      className: 'font-icon-plus'
+    };
+    return _react.default.createElement("div", null, _react.default.createElement(_reactstrap.Button, buttonAttributes, _i18n.default._t('ElementAddNewButton.ADD_BLOCK', 'Add block')), _react.default.createElement(AddElementPopoverComponent, {
+      placement: "bottom-start",
+      target: buttonAttributes.id,
+      isOpen: this.state.popoverOpen,
+      elementTypes: elementTypes,
+      toggle: this.toggle,
+      areaId: areaId,
+      insertAfterElement: 0
+    }));
+  }
+}
+exports.Component = AddNewButton;
+AddNewButton.defaultProps = {};
+AddNewButton.propTypes = {
+  elementTypes: _propTypes.default.arrayOf(_elementTypeType.elementTypeType).isRequired,
+  areaId: _propTypes.default.number.isRequired
+};
+var _default = exports["default"] = (0, _Injector.inject)(['AddElementPopover'], AddElementPopoverComponent => ({
+  AddElementPopoverComponent
+}), () => 'ElementEditor.ElementList.AddNewButton')(AddNewButton);
+
+/***/ }),
+
+/***/ "./client/src/components/ElementEditor/Content.js":
+/*!********************************************************!*\
+  !*** ./client/src/components/ElementEditor/Content.js ***!
+  \********************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = exports.Component = void 0;
+var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react"));
+var _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ "prop-types"));
+var _Injector = __webpack_require__(/*! lib/Injector */ "lib/Injector");
+var _redux = __webpack_require__(/*! redux */ "redux");
+var _reactRedux = __webpack_require__(/*! react-redux */ "react-redux");
+var _loadElementFormStateName = __webpack_require__(/*! state/editor/loadElementFormStateName */ "./client/src/state/editor/loadElementFormStateName.js");
+var _reduxForm = __webpack_require__(/*! redux-form */ "redux-form");
+var _getFormState = _interopRequireDefault(__webpack_require__(/*! lib/getFormState */ "lib/getFormState"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+class Content extends _react.PureComponent {
+  render() {
+    const {
+      id,
+      fileUrl,
+      fileTitle,
+      content,
+      previewExpanded,
+      InlineEditFormComponent,
+      SummaryComponent,
+      activeTab,
+      onFormInit,
+      handleLoadingError,
+      formDirty,
+      broken,
+      onFormSchemaFetchResponse,
+      onFormSchemaSubmitResponse,
+      ensureFormRendered,
+      formHasRendered
+    } = this.props;
+    const extraClass = {
+      'element-editor-editform--collapsed': !previewExpanded,
+      'element-editor-editform--rendered-not-visible': !previewExpanded && (ensureFormRendered || formHasRendered)
+    };
+    return _react.default.createElement("div", {
+      className: "element-editor-content"
+    }, !previewExpanded && _react.default.createElement(SummaryComponent, {
+      content: content,
+      fileUrl: fileUrl,
+      fileTitle: fileTitle,
+      broken: broken
+    }), (previewExpanded || ensureFormRendered || formHasRendered) && _react.default.createElement(InlineEditFormComponent, {
+      extraClass: extraClass,
+      onClick: event => event.stopPropagation(),
+      elementId: id,
+      activeTab: activeTab,
+      onFormInit: onFormInit,
+      handleLoadingError: handleLoadingError,
+      onFormSchemaFetchResponse: onFormSchemaFetchResponse,
+      onFormSchemaSubmitResponse: onFormSchemaSubmitResponse
+    }), formDirty && _react.default.createElement("input", {
+      type: "hidden",
+      name: "change-tracker",
+      className: "element-form-dirty-state",
+      value: "1"
+    }));
+  }
+}
+exports.Component = Content;
+Content.propTypes = {
+  id: _propTypes.default.string,
+  content: _propTypes.default.string,
+  fileUrl: _propTypes.default.string,
+  fileTitle: _propTypes.default.string,
+  previewExpanded: _propTypes.default.bool,
+  SummaryComponent: _propTypes.default.elementType,
+  InlineEditFormComponent: _propTypes.default.elementType,
+  handleLoadingError: _propTypes.default.func,
+  broken: _propTypes.default.bool,
+  onFormSchemaFetchResponse: _propTypes.default.func,
+  onFormSchemaSubmitResponse: _propTypes.default.func,
+  ensureFormRendered: _propTypes.default.bool,
+  formHasRendered: _propTypes.default.bool
+};
+Content.defaultProps = {};
+function mapStateToProps(state, ownProps) {
+  const formName = (0, _loadElementFormStateName.loadElementFormStateName)(ownProps.id);
+  return {
+    formDirty: (0, _reduxForm.isDirty)(`element.${formName}`, _getFormState.default)(state)
+  };
+}
+var _default = exports["default"] = (0, _redux.compose)((0, _Injector.inject)(['ElementSummary', 'ElementInlineEditForm'], (SummaryComponent, InlineEditFormComponent) => ({
+  SummaryComponent,
+  InlineEditFormComponent
+}), () => 'ElementEditor.ElementList.Element'), (0, _reactRedux.connect)(mapStateToProps))(Content);
+
+/***/ }),
+
+/***/ "./client/src/components/ElementEditor/DragPositionIndicator.js":
+/*!**********************************************************************!*\
+  !*** ./client/src/components/ElementEditor/DragPositionIndicator.js ***!
+  \**********************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+class DragPositionIndicator extends _react.PureComponent {
+  render() {
+    return _react.default.createElement("div", {
+      className: "elemental-editor-drag-indicator"
+    }, _react.default.createElement("div", {
+      className: "elemental-editor-drag-indicator__ball"
+    }));
+  }
+}
+var _default = exports["default"] = DragPositionIndicator;
+
+/***/ }),
+
+/***/ "./client/src/components/ElementEditor/Element.js":
+/*!********************************************************!*\
+  !*** ./client/src/components/ElementEditor/Element.js ***!
+  \********************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = exports.ElementContext = exports.Component = void 0;
+var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react"));
+var _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ "prop-types"));
+var _elementType = __webpack_require__(/*! types/elementType */ "./client/src/types/elementType.js");
+var _elementTypeType = __webpack_require__(/*! types/elementTypeType */ "./client/src/types/elementTypeType.js");
+var _redux = __webpack_require__(/*! redux */ "redux");
+var _Injector = __webpack_require__(/*! lib/Injector */ "lib/Injector");
+var _i18n = _interopRequireDefault(__webpack_require__(/*! i18n */ "i18n"));
+var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "classnames"));
+var _reactRedux = __webpack_require__(/*! react-redux */ "react-redux");
+var _reduxForm = __webpack_require__(/*! redux-form */ "redux-form");
+var _loadElementFormStateName = __webpack_require__(/*! state/editor/loadElementFormStateName */ "./client/src/state/editor/loadElementFormStateName.js");
+var _loadElementSchemaValue = __webpack_require__(/*! state/editor/loadElementSchemaValue */ "./client/src/state/editor/loadElementSchemaValue.js");
+var TabsActions = _interopRequireWildcard(__webpack_require__(/*! state/tabs/TabsActions */ "state/tabs/TabsActions"));
+var _reactDnd = __webpack_require__(/*! react-dnd */ "react-dnd");
+var _reactDndHtml5Backend = __webpack_require__(/*! react-dnd-html5-backend */ "react-dnd-html5-backend");
+var _dragHelpers = __webpack_require__(/*! lib/dragHelpers */ "./client/src/lib/dragHelpers.js");
+var toastsActions = _interopRequireWildcard(__webpack_require__(/*! state/toasts/ToastsActions */ "state/toasts/ToastsActions"));
+var _UnsavedFormsActions = __webpack_require__(/*! state/unsavedForms/UnsavedFormsActions */ "state/unsavedForms/UnsavedFormsActions");
+var _memoizeOne = _interopRequireDefault(__webpack_require__(/*! memoize-one */ "./node_modules/memoize-one/dist/memoize-one.esm.js"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const ElementContext = exports.ElementContext = (0, _react.createContext)(null);
+class Element extends _react.Component {
+  static getDerivedStateFromError() {
+    return {
+      childRenderingError: true
+    };
+  }
+  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.handleFormSchemaFetchResponse = this.handleFormSchemaFetchResponse.bind(this);
+    this.handleFormSchemaSubmitResponse = this.handleFormSchemaSubmitResponse.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.state = {
+      previewExpanded: false,
+      initialTab: '',
+      loadingError: false,
+      childRenderingError: false,
+      newTitle: '',
+      justSavedElement: false,
+      justClickedPublishButton: false,
+      doSaveElement: false,
+      doPublishElement: false,
+      ensureFormRendered: false,
+      formHasRendered: false,
+      doSetFormChanged: false
+    };
+  }
+  componentDidMount() {
+    const {
+      connectDragPreview
+    } = this.props;
+    if (connectDragPreview) {
+      connectDragPreview((0, _reactDndHtml5Backend.getEmptyImage)(), {
+        captureDraggingState: true
+      });
+    }
+  }
+  componentDidUpdate() {
+    if (this.state.justSavedElement) {
+      this.setState({
+        justSavedElement: false
+      });
+      if (!this.state.doPublishElement) {
+        this.showSavedElementToast();
+      }
+      window.ss.apolloClient.queryManager.reFetchObservableQueries();
+    }
+    if (this.state.doSetFormChanged) {
+      this.setState({
+        doSetFormChanged: false
+      });
+      this.props.setFormChanged();
+    }
+  }
+  showSavedElementToast() {
+    const message = _i18n.default.inject(_i18n.default._t('ElementSaveAction.SUCCESS_NOTIFICATION', 'Saved \'{title}\' successfully'), {
+      title: this.state.newTitle
+    });
+    this.props.actions.toasts.success(message);
+  }
+  getVersionedStateClassName() {
+    const {
+      element
+    } = this.props;
+    const baseClassName = 'element-editor__element';
+    if (!element.isPublished) {
+      return `${baseClassName}--draft`;
+    }
+    if (element.isPublished && !element.isLiveVersion) {
+      return `${baseClassName}--modified`;
+    }
+    return `${baseClassName}--published`;
+  }
+  getLinkTitle(type) {
+    if (type.broken) {
+      return _i18n.default._t('ElementalElement.ARCHIVE_BROKEN', 'Archive this block');
+    }
+    return _i18n.default.inject(_i18n.default._t('ElementalElement.TITLE', 'Edit this {type} block'), {
+      type: type.title
+    });
+  }
+  getSummary(element, type) {
+    if (type.broken) {
+      return element.title ? _i18n.default.inject(_i18n.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: element.title
+      }) : _i18n.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.');
+    }
+    return element.blockSchema.content;
+  }
+  handleLoadingError() {
+    this.setState({
+      loadingError: true
+    });
+  }
+  updateFormTab(activeTab) {
+    const {
+      tabSetName,
+      onActivateTab
+    } = this.props;
+    const {
+      initialTab
+    } = this.state;
+    if (!initialTab) {
+      this.setState({
+        initialTab: activeTab
+      });
+    }
+    if (activeTab || initialTab) {
+      onActivateTab(tabSetName, activeTab || initialTab);
+    } else {
+      const defaultFirstTab = 'Main';
+      onActivateTab(tabSetName, defaultFirstTab);
+    }
+  }
+  handleTabClick(toBeActiveTab) {
+    const {
+      activeTab
+    } = this.props;
+    const {
+      loadingError
+    } = this.state;
+    if (toBeActiveTab !== activeTab && !loadingError) {
+      this.setState({
+        previewExpanded: true
+      });
+      this.updateFormTab(toBeActiveTab);
+    }
+  }
+  handleExpand(event) {
+    const {
+      type,
+      link
+    } = this.props;
+    const {
+      loadingError
+    } = this.state;
+    if (type.broken) {
+      return;
+    }
+    if (event.target.type === 'button') {
+      event.stopPropagation();
+      return;
+    }
+    if (type.inlineEditable && !loadingError) {
+      this.setState(prevState => ({
+        previewExpanded: !prevState.previewExpanded
+      }));
+      return;
+    }
+    window.location = link;
+  }
+  handleKeyUp(event) {
+    const {
+      nodeName
+    } = event.target;
+    if ((event.key === ' ' || event.key === 'Enter') && !['input', 'textarea'].includes(nodeName.toLowerCase())) {
+      this.handleExpand(event);
+    }
+  }
+  handleSaveButtonClick() {
+    this.setState({
+      ensureFormRendered: true,
+      doSaveElement: true
+    });
+  }
+  handlePublishButtonClick() {
+    this.setState({
+      justClickedPublishButton: true,
+      ensureFormRendered: true
+    });
+    if (this.props.formDirty) {
+      this.props.submitForm();
+    } else {
+      this.setState({
+        doPublishElement: true
+      });
+    }
+  }
+  handleAfterSave() {
+    this.setState({
+      doSaveElement: false
+    });
+  }
+  handleAfterPublish() {
+    this.setState({
+      doPublishElement: false
+    });
+  }
+  handleFormSchemaFetchResponse() {
+    this.setState({
+      formHasRendered: true
+    });
+  }
+  handleFormSchemaSubmitResponse(formSchema, title) {
+    const hasValidationErrors = formSchema.id.match(/\/schema\/elemental-area\/([0-9]+)/);
+    if (hasValidationErrors) {
+      if (this.props.type.inlineEditable) {
+        this.setState({
+          previewExpanded: true
+        });
+      }
+      this.setState({
+        doSetFormChanged: true
+      });
+      return;
+    }
+    this.setState({
+      justSavedElement: true,
+      newTitle: title
+    });
+    if (this.state.justClickedPublishButton) {
+      this.setState({
+        justClickedPublishButton: false,
+        doPublishElement: true
+      });
+    }
+  }
+  render() {
+    const {
+      element,
+      type,
+      areaId,
+      HeaderComponent,
+      ContentComponent,
+      link,
+      activeTab,
+      connectDragSource,
+      connectDropTarget,
+      isDragging,
+      isOver,
+      onDragEnd,
+      submitForm,
+      formDirty
+    } = this.props;
+    const {
+      childRenderingError,
+      previewExpanded
+    } = this.state;
+    if (!element.id) {
+      return null;
+    }
+    const elementClassNames = (0, _classnames.default)('element-editor__element', {
+      'element-editor__element--broken': type.broken,
+      'element-editor__element--expandable': type.inlineEditable && !type.broken,
+      'element-editor__element--dragging': isDragging,
+      'element-editor__element--dragged-over': isOver
+    }, this.getVersionedStateClassName());
+    const providerValue = (0, _memoizeOne.default)({
+      submitForm,
+      formDirty,
+      onSaveButtonClick: this.handleSaveButtonClick,
+      onPublishButtonClick: this.handlePublishButtonClick,
+      doSaveElement: this.state.doSaveElement,
+      doPublishElement: this.state.doPublishElement,
+      onAfterSave: this.handleAfterSave,
+      onAfterPublish: this.handleAfterPublish,
+      formHasRendered: this.state.formHasRendered
+    });
+    const content = connectDropTarget(_react.default.createElement("div", {
+      className: elementClassNames,
+      onClick: this.handleExpand,
+      onKeyUp: this.handleKeyUp,
+      role: "button",
+      tabIndex: 0,
+      title: this.getLinkTitle(type),
+      key: element.id
+    }, _react.default.createElement(ElementContext.Provider, {
+      value: providerValue
+    }, _react.default.createElement(HeaderComponent, {
+      element: element,
+      type: type,
+      areaId: areaId,
+      expandable: type.inlineEditable,
+      link: link,
+      previewExpanded: previewExpanded && !childRenderingError,
+      handleEditTabsClick: this.handleTabClick,
+      activeTab: activeTab,
+      disableTooltip: isDragging,
+      onDragEnd: onDragEnd
+    }), !childRenderingError && _react.default.createElement(ContentComponent, {
+      id: element.id,
+      fileUrl: element.blockSchema.fileURL,
+      fileTitle: element.blockSchema.fileTitle,
+      content: this.getSummary(element, type),
+      previewExpanded: previewExpanded && !isDragging,
+      ensureFormRendered: this.state.ensureFormRendered,
+      formHasRendered: this.state.formHasRendered,
+      activeTab: activeTab,
+      onFormInit: () => this.updateFormTab(activeTab),
+      handleLoadingError: this.handleLoadingError,
+      broken: type.broken,
+      onFormSchemaFetchResponse: this.handleFormSchemaFetchResponse,
+      onFormSchemaSubmitResponse: this.handleFormSchemaSubmitResponse
+    }), childRenderingError && _react.default.createElement("div", {
+      className: "alert alert-danger mt-2"
+    }, _i18n.default._t('ElementalElement.CHILD_RENDERING_ERROR', 'Something went wrong with this block. Please try saving and refreshing the CMS.')))));
+    if (!previewExpanded) {
+      return connectDragSource(content);
+    }
+    return content;
+  }
+}
+exports.Component = Element;
+function mapStateToProps(state, ownProps) {
+  const elementId = ownProps.element.id;
+  const elementName = (0, _loadElementFormStateName.loadElementFormStateName)(elementId);
+  const elementFormSchema = (0, _loadElementSchemaValue.loadElementSchemaValue)('schemaUrl', elementId);
+  const filterFieldsForTabs = field => field.component === 'Tabs';
+  const tabSet = state.form && state.form.formSchemas[elementFormSchema] && state.form.formSchemas[elementFormSchema].schema && state.form.formSchemas[elementFormSchema].schema.fields.find(filterFieldsForTabs);
+  const tabSetName = tabSet && tabSet.id;
+  const uniqueFieldId = `element.${elementName}__${tabSetName}`;
+  const formDirty = state.unsavedForms.find(unsaved => unsaved.name === `element.${elementName}`);
+  const activeTab = state.tabs && state.tabs.fields && state.tabs.fields[uniqueFieldId] && state.tabs.fields[uniqueFieldId].activeTab;
+  return {
+    tabSetName,
+    activeTab,
+    formDirty
+  };
+}
+function mapDispatchToProps(dispatch, ownProps) {
+  const elementName = (0, _loadElementFormStateName.loadElementFormStateName)(ownProps.element.id);
+  return {
+    onActivateTab(tabSetName, activeTabName) {
+      dispatch(TabsActions.activateTab(`element.${elementName}__${tabSetName}`, activeTabName));
+    },
+    submitForm() {
+      dispatch((0, _reduxForm.submit)(`element.${elementName}`));
+    },
+    setFormChanged() {
+      dispatch((0, _UnsavedFormsActions.addFormChanged)(`element.${elementName}`));
+    },
+    actions: {
+      toasts: (0, _redux.bindActionCreators)(toastsActions, dispatch)
+    }
+  };
+}
+Element.propTypes = {
+  element: _elementType.elementType,
+  type: _elementTypeType.elementTypeType.isRequired,
+  areaId: _propTypes.default.number.isRequired,
+  link: _propTypes.default.string.isRequired,
+  activeTab: _propTypes.default.string,
+  tabSetName: _propTypes.default.string,
+  onActivateTab: _propTypes.default.func,
+  connectDragSource: _propTypes.default.func.isRequired,
+  connectDragPreview: _propTypes.default.func.isRequired,
+  connectDropTarget: _propTypes.default.func.isRequired,
+  isDragging: _propTypes.default.bool.isRequired,
+  isOver: _propTypes.default.bool.isRequired,
+  onDragOver: _propTypes.default.func,
+  onDragEnd: _propTypes.default.func,
+  onDragStart: _propTypes.default.func
+};
+Element.defaultProps = {
+  element: null
+};
+const elementTarget = {
+  drop(props, monitor, component) {
+    const {
+      element
+    } = props;
+    return {
+      target: element.id,
+      dropSpot: (0, _dragHelpers.isOverTop)(monitor, component) ? 'top' : 'bottom'
+    };
+  },
+  hover(props, monitor, component) {
+    const {
+      element,
+      onDragOver
+    } = props;
+    if (onDragOver) {
+      onDragOver(element, (0, _dragHelpers.isOverTop)(monitor, component));
+    }
+  }
+};
+var _default = exports["default"] = (0, _redux.compose)((0, _reactDnd.DropTarget)('element', elementTarget, (connector, monitor) => ({
+  connectDropTarget: connector.dropTarget(),
+  isOver: monitor.isOver()
+})), (0, _reactDnd.DragSource)('element', _dragHelpers.elementDragSource, (connector, monitor) => ({
+  connectDragSource: connector.dragSource(),
+  connectDragPreview: connector.dragPreview(),
+  isDragging: monitor.isDragging()
+})), (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps), (0, _Injector.inject)(['ElementHeader', 'ElementContent'], (HeaderComponent, ContentComponent) => ({
+  HeaderComponent,
+  ContentComponent
+}), () => 'ElementEditor.ElementList.Element'))(Element);
+
+/***/ }),
+
+/***/ "./client/src/components/ElementEditor/ElementActions.js":
+/*!***************************************************************!*\
+  !*** ./client/src/components/ElementEditor/ElementActions.js ***!
+  \***************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = exports.Component = void 0;
+var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react"));
+var _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ "prop-types"));
+var _redux = __webpack_require__(/*! redux */ "redux");
+var _reactstrap = __webpack_require__(/*! reactstrap */ "reactstrap");
+var _Injector = __webpack_require__(/*! lib/Injector */ "lib/Injector");
+var _elementType = __webpack_require__(/*! types/elementType */ "./client/src/types/elementType.js");
+var _elementTypeType = __webpack_require__(/*! types/elementTypeType */ "./client/src/types/elementTypeType.js");
+var _AbstractAction = _interopRequireDefault(__webpack_require__(/*! components/ElementActions/AbstractAction */ "./client/src/components/ElementActions/AbstractAction.js"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+class ElementActions extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.handleEditTabsClick = this.handleEditTabsClick.bind(this);
+  }
+  handleEditTabsClick(event) {
+    const {
+      handleEditTabsClick
+    } = this.props;
+    handleEditTabsClick(event.target.name);
+  }
+  renderEditTabs() {
+    const {
+      editTabs,
+      activeTab,
+      type,
+      expandable
+    } = this.props;
+    if (type.broken || !expandable || !editTabs || !editTabs.length) {
+      return null;
+    }
+    return editTabs.map(_ref => {
+      let {
+        name,
+        title
+      } = _ref;
+      return _react.default.createElement(_AbstractAction.default, {
+        key: name,
+        name: name,
+        title: title,
+        type: type,
+        onClick: this.handleEditTabsClick,
+        active: name === activeTab
+      });
+    });
+  }
+  renderDivider() {
+    const {
+      children,
+      editTabs,
+      expandable
+    } = this.props;
+    if (!expandable || !editTabs || !editTabs.length || _react.default.Children.count(children) === 0) {
+      return null;
+    }
+    return _react.default.createElement(_reactstrap.DropdownItem, {
+      divider: true,
+      role: "separator"
+    });
+  }
+  render() {
+    const {
+      children,
+      id,
+      ActionMenuComponent
+    } = this.props;
+    const dropdownToggleClassNames = ['element-editor-header__actions-toggle', 'btn', 'btn-sm', 'btn--no-text', 'font-icon-dot-3'];
+    return _react.default.createElement(ActionMenuComponent, {
+      id: `element-editor-actions-${id}`,
+      className: "element-editor-header__actions-dropdown",
+      dropdownMenuProps: {
+        right: true
+      },
+      dropdownToggleClassNames: dropdownToggleClassNames
+    }, this.renderEditTabs(), this.renderDivider(), children);
+  }
+}
+exports.Component = ElementActions;
+ElementActions.propTypes = {
+  element: _elementType.elementType,
+  type: _elementTypeType.elementTypeType.isRequired,
+  areaId: _propTypes.default.number.isRequired,
+  activeTab: _propTypes.default.string,
+  editTabs: _propTypes.default.arrayOf(_propTypes.default.shape({
+    title: _propTypes.default.string,
+    name: _propTypes.default.string
+  })),
+  handleEditTabsClick: _propTypes.default.func.isRequired,
+  expandable: _propTypes.default.bool
+};
+ElementActions.defaultProps = {
+  editTabs: [],
+  expandable: true
+};
+var _default = exports["default"] = (0, _redux.compose)((0, _Injector.inject)(['ActionMenu'], ActionMenuComponent => ({
+  ActionMenuComponent
+}), () => 'ElementEditor.ElementList.Element'))(ElementActions);
+
+/***/ }),
+
+/***/ "./client/src/components/ElementEditor/ElementDragPreview.js":
+/*!*******************************************************************!*\
+  !*** ./client/src/components/ElementEditor/ElementDragPreview.js ***!
+  \*******************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react"));
+var _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ "prop-types"));
+var _Header = _interopRequireDefault(__webpack_require__(/*! components/ElementEditor/Header */ "./client/src/components/ElementEditor/Header.js"));
+var _reactDnd = __webpack_require__(/*! react-dnd */ "react-dnd");
+var _elementType = __webpack_require__(/*! types/elementType */ "./client/src/types/elementType.js");
+var _elementTypeType = __webpack_require__(/*! types/elementTypeType */ "./client/src/types/elementTypeType.js");
+var _elementConfig = __webpack_require__(/*! state/editor/elementConfig */ "./client/src/state/editor/elementConfig.js");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+class ElementDragPreview extends _react.Component {
+  render() {
+    const {
+      isDragging,
+      element,
+      elementTypes,
+      currentOffset
+    } = this.props;
+    if (!isDragging || !currentOffset) {
+      return null;
+    }
+    const {
+      x,
+      y
+    } = currentOffset;
+    const transform = `translate(${x}px, ${y}px)`;
+    const style = {
+      transform,
+      WebkitTransform: transform
+    };
+    const type = (0, _elementConfig.getElementTypeConfig)(element, elementTypes);
+    return _react.default.createElement("div", {
+      className: "element-editor-drag-preview",
+      style: style
+    }, _react.default.createElement(_Header.default, {
+      element: element,
+      type: type,
+      simple: true
+    }));
+  }
+}
+ElementDragPreview.propTypes = {
+  element: _elementType.elementType,
+  elementTypes: _propTypes.default.arrayOf(_elementTypeType.elementTypeType),
+  isDragging: _propTypes.default.bool,
+  currentOffset: _propTypes.default.shape({
+    x: _propTypes.default.number.isRequired,
+    y: _propTypes.default.number.isRequired
+  })
+};
+var _default = exports["default"] = (0, _reactDnd.DragLayer)(monitor => ({
+  element: monitor.getItem(),
+  currentOffset: monitor.getSourceClientOffset(),
+  isDragging: monitor.isDragging()
+}))(ElementDragPreview);
+
+/***/ }),
+
+/***/ "./client/src/components/ElementEditor/ElementEditor.js":
+/*!**************************************************************!*\
+  !*** ./client/src/components/ElementEditor/ElementEditor.js ***!
+  \**************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = exports.Component = void 0;
+var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react"));
+var _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ "prop-types"));
+var _Injector = __webpack_require__(/*! lib/Injector */ "lib/Injector");
+var _redux = __webpack_require__(/*! redux */ "redux");
+var _elementTypeType = __webpack_require__(/*! types/elementTypeType */ "./client/src/types/elementTypeType.js");
+var _reactRedux = __webpack_require__(/*! react-redux */ "react-redux");
+var _loadElementFormStateName = __webpack_require__(/*! state/editor/loadElementFormStateName */ "./client/src/state/editor/loadElementFormStateName.js");
+var _reactDnd = __webpack_require__(/*! react-dnd */ "react-dnd");
+var _sortBlockMutation = _interopRequireDefault(__webpack_require__(/*! state/editor/sortBlockMutation */ "./client/src/state/editor/sortBlockMutation.js"));
+var _ElementDragPreview = _interopRequireDefault(__webpack_require__(/*! components/ElementEditor/ElementDragPreview */ "./client/src/components/ElementEditor/ElementDragPreview.js"));
+var _withDragDropContext = _interopRequireDefault(__webpack_require__(/*! lib/withDragDropContext */ "lib/withDragDropContext"));
+var _reselect = __webpack_require__(/*! reselect */ "./node_modules/reselect/es/index.js");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+class ElementEditor extends _react.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dragTargetElementId: null,
+      dragSpot: null
+    };
+    this.handleDragOver = this.handleDragOver.bind(this);
+    this.handleDragEnd = this.handleDragEnd.bind(this);
+  }
+  handleDragOver() {
+    let element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    let isOverTop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    const id = element ? element.id : false;
+    this.setState({
+      dragTargetElementId: id,
+      dragSpot: isOverTop === false ? 'bottom' : 'top'
+    });
+  }
+  handleDragEnd(sourceId, afterId) {
+    const {
+      actions: {
+        handleSortBlock
+      },
+      areaId
+    } = this.props;
+    handleSortBlock(sourceId, afterId, areaId).then(() => {
+      const preview = window.jQuery('.cms-preview');
+      preview.entwine('ss.preview')._loadUrl(preview.find('iframe').attr('src'));
+    });
+    this.setState({
+      dragTargetElementId: null,
+      dragSpot: null
+    });
+  }
+  render() {
+    const {
+      fieldName,
+      formState,
+      ToolbarComponent,
+      ListComponent,
+      areaId,
+      elementTypes,
+      isDraggingOver,
+      connectDropTarget,
+      allowedElements
+    } = this.props;
+    const {
+      dragTargetElementId,
+      dragSpot
+    } = this.state;
+    const allowedElementTypes = allowedElements.map(className => elementTypes.find(type => type.class === className));
+    return connectDropTarget(_react.default.createElement("div", {
+      className: "element-editor"
+    }, _react.default.createElement(ToolbarComponent, {
+      elementTypes: allowedElementTypes,
+      areaId: areaId,
+      onDragOver: this.handleDragOver
+    }), _react.default.createElement(ListComponent, {
+      allowedElementTypes: allowedElementTypes,
+      elementTypes: elementTypes,
+      areaId: areaId,
+      onDragOver: this.handleDragOver,
+      onDragStart: this.handleDragStart,
+      onDragEnd: this.handleDragEnd,
+      dragSpot: dragSpot,
+      isDraggingOver: isDraggingOver,
+      dragTargetElementId: dragTargetElementId
+    }), _react.default.createElement(_ElementDragPreview.default, {
+      elementTypes: elementTypes
+    }), _react.default.createElement("input", {
+      name: fieldName,
+      type: "hidden",
+      value: JSON.stringify(formState) || '',
+      className: "no-change-track"
+    })));
+  }
+}
+exports.Component = ElementEditor;
+ElementEditor.propTypes = {
+  fieldName: _propTypes.default.string,
+  elementTypes: _propTypes.default.arrayOf(_elementTypeType.elementTypeType).isRequired,
+  allowedElements: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+  areaId: _propTypes.default.number.isRequired,
+  actions: _propTypes.default.shape({
+    handleSortBlock: _propTypes.default.func
+  })
+};
+const defaultElementFormState = {};
+const elementFormSelector = (0, _reselect.createSelector)([state => {
+  const elementFormState = state.form.formState.element;
+  if (!elementFormState) {
+    return defaultElementFormState;
+  }
+  return elementFormState;
+}], elementFormState => {
+  const formNamePattern = (0, _loadElementFormStateName.loadElementFormStateName)('[0-9]+');
+  const filteredElementFormState = Object.keys(elementFormState).filter(key => key.match(formNamePattern)).reduce((accumulator, key) => ({
+    ...accumulator,
+    [key]: elementFormState[key].values
+  }), {});
+  return filteredElementFormState;
+});
+function mapStateToProps(state) {
+  const formState = elementFormSelector(state);
+  return {
+    formState
+  };
+}
+var _default = exports["default"] = (0, _redux.compose)(_withDragDropContext.default, (0, _reactDnd.DropTarget)('element', {}, (connector, monitor) => ({
+  connectDropTarget: connector.dropTarget(),
+  isDraggingOver: monitor.isOver()
+})), (0, _reactRedux.connect)(mapStateToProps), (0, _Injector.inject)(['ElementToolbar', 'ElementList'], (ToolbarComponent, ListComponent) => ({
+  ToolbarComponent,
+  ListComponent
+}), () => 'ElementEditor'), _sortBlockMutation.default)(ElementEditor);
+
+/***/ }),
+
+/***/ "./client/src/components/ElementEditor/ElementList.js":
+/*!************************************************************!*\
+  !*** ./client/src/components/ElementEditor/ElementList.js ***!
+  \************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = exports.Component = void 0;
+var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react"));
+var _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ "prop-types"));
+var _elementType = __webpack_require__(/*! types/elementType */ "./client/src/types/elementType.js");
+var _elementTypeType = __webpack_require__(/*! types/elementTypeType */ "./client/src/types/elementTypeType.js");
+var _redux = __webpack_require__(/*! redux */ "redux");
+var _Injector = __webpack_require__(/*! lib/Injector */ "lib/Injector");
+var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "classnames"));
+var _i18n = _interopRequireDefault(__webpack_require__(/*! i18n */ "i18n"));
+var _reactDnd = __webpack_require__(/*! react-dnd */ "react-dnd");
+var _dragHelpers = __webpack_require__(/*! lib/dragHelpers */ "./client/src/lib/dragHelpers.js");
+var _elementConfig = __webpack_require__(/*! state/editor/elementConfig */ "./client/src/state/editor/elementConfig.js");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+class ElementList extends _react.Component {
+  getDragIndicatorIndex() {
+    const {
+      dragTargetElementId,
+      draggedItem,
+      blocks,
+      dragSpot
+    } = this.props;
+    return (0, _dragHelpers.getDragIndicatorIndex)(blocks.map(element => element.id), dragTargetElementId, draggedItem && draggedItem.id, dragSpot);
+  }
+  renderBlocks() {
+    const {
+      ElementComponent,
+      HoverBarComponent,
+      DragIndicatorComponent,
+      blocks,
+      allowedElementTypes,
+      elementTypes,
+      areaId,
+      onDragEnd,
+      onDragOver,
+      onDragStart,
+      isDraggingOver
+    } = this.props;
+    if (!blocks) {
+      return null;
+    }
+    if (blocks && !blocks.length) {
+      return _react.default.createElement("div", null, _i18n.default._t('ElementList.ADD_BLOCKS', 'Add blocks to place your content'));
+    }
+    let output = blocks.map(element => _react.default.createElement("div", {
+      key: element.id
+    }, _react.default.createElement(ElementComponent, {
+      element: element,
+      areaId: areaId,
+      type: (0, _elementConfig.getElementTypeConfig)(element, elementTypes),
+      link: element.blockSchema.actions.edit,
+      onDragOver: onDragOver,
+      onDragEnd: onDragEnd,
+      onDragStart: onDragStart
+    }), isDraggingOver || _react.default.createElement(HoverBarComponent, {
+      key: `create-after-${element.id}`,
+      areaId: areaId,
+      elementId: element.id,
+      elementTypes: allowedElementTypes
+    })));
+    if (!isDraggingOver) {
+      output = [_react.default.createElement(HoverBarComponent, {
+        key: 0,
+        areaId: areaId,
+        elementId: 0,
+        elementTypes: allowedElementTypes
+      })].concat(output);
+    }
+    const dragIndicatorIndex = this.getDragIndicatorIndex();
+    if (isDraggingOver && dragIndicatorIndex !== null) {
+      output.splice(dragIndicatorIndex, 0, _react.default.createElement(DragIndicatorComponent, {
+        key: "DropIndicator"
+      }));
+    }
+    return output;
+  }
+  renderLoading() {
+    const {
+      loading,
+      LoadingComponent
+    } = this.props;
+    if (loading) {
+      return _react.default.createElement(LoadingComponent, null);
+    }
+    return null;
+  }
+  render() {
+    const {
+      blocks
+    } = this.props;
+    const listClassNames = (0, _classnames.default)('elemental-editor-list', {
+      'elemental-editor-list--empty': !blocks || !blocks.length
+    });
+    return this.props.connectDropTarget(_react.default.createElement("div", {
+      className: listClassNames
+    }, this.renderLoading(), this.renderBlocks()));
+  }
+}
+exports.Component = ElementList;
+ElementList.propTypes = {
+  blocks: _propTypes.default.arrayOf(_elementType.elementType),
+  elementTypes: _propTypes.default.arrayOf(_elementTypeType.elementTypeType).isRequired,
+  allowedElementTypes: _propTypes.default.arrayOf(_elementTypeType.elementTypeType).isRequired,
+  loading: _propTypes.default.bool,
+  areaId: _propTypes.default.number.isRequired,
+  dragTargetElementId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  onDragOver: _propTypes.default.func,
+  onDragStart: _propTypes.default.func,
+  onDragEnd: _propTypes.default.func
+};
+ElementList.defaultProps = {
+  blocks: [],
+  loading: false
+};
+const elementListTarget = {
+  drop(props, monitor) {
+    const {
+      blocks
+    } = props;
+    const elementTargetDropResult = monitor.getDropResult();
+    if (!elementTargetDropResult) {
+      return {};
+    }
+    const dropIndex = (0, _dragHelpers.getDragIndicatorIndex)(blocks.map(element => element.id), elementTargetDropResult.target, monitor.getItem(), elementTargetDropResult.dropSpot);
+    const dropAfterID = blocks[dropIndex - 1] ? blocks[dropIndex - 1].id : '0';
+    return {
+      ...elementTargetDropResult,
+      dropAfterID
+    };
+  }
+};
+var _default = exports["default"] = (0, _redux.compose)((0, _reactDnd.DropTarget)('element', elementListTarget, (connector, monitor) => ({
+  connectDropTarget: connector.dropTarget(),
+  draggedItem: monitor.getItem()
+})), (0, _Injector.inject)(['Element', 'Loading', 'HoverBar', 'DragPositionIndicator'], (ElementComponent, LoadingComponent, HoverBarComponent, DragIndicatorComponent) => ({
+  ElementComponent,
+  LoadingComponent,
+  HoverBarComponent,
+  DragIndicatorComponent
+}), () => 'ElementEditor.ElementList'))(ElementList);
+
+/***/ }),
+
+/***/ "./client/src/components/ElementEditor/Header.js":
+/*!*******************************************************!*\
+  !*** ./client/src/components/ElementEditor/Header.js ***!
+  \*******************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = exports.Component = void 0;
+var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react"));
+var _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ "prop-types"));
+var _reactstrap = __webpack_require__(/*! reactstrap */ "reactstrap");
+var _elementType = __webpack_require__(/*! types/elementType */ "./client/src/types/elementType.js");
+var _elementTypeType = __webpack_require__(/*! types/elementTypeType */ "./client/src/types/elementTypeType.js");
+var _redux = __webpack_require__(/*! redux */ "redux");
+var _Injector = __webpack_require__(/*! lib/Injector */ "lib/Injector");
+var _i18n = _interopRequireDefault(__webpack_require__(/*! i18n */ "i18n"));
+var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "classnames"));
+var _reactDnd = __webpack_require__(/*! react-dnd */ "react-dnd");
+var _dragHelpers = __webpack_require__(/*! lib/dragHelpers */ "./client/src/lib/dragHelpers.js");
+var _reactDndHtml5Backend = __webpack_require__(/*! react-dnd-html5-backend */ "react-dnd-html5-backend");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+class Header extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      tooltipOpen: false
+    };
+  }
+  componentDidMount() {
+    const {
+      connectDragPreview
+    } = this.props;
+    if (connectDragPreview) {
+      connectDragPreview((0, _reactDndHtml5Backend.getEmptyImage)(), {
+        captureDraggingState: true
+      });
+    }
+  }
+  componentDidUpdate() {
+    const {
+      tooltipOpen
+    } = this.state;
+    const {
+      disableTooltip
+    } = this.props;
+    if (tooltipOpen && disableTooltip) {
+      this.setState({
+        tooltipOpen: false
+      });
+    }
+  }
+  getBlockTitle(element, type) {
+    if (type.broken) {
+      return _i18n.default.inject(_i18n.default._t('ElementHeader.BROKEN', 'This element is of obsolete type {type}.'), {
+        type: type.obsoleteClassName
+      });
+    }
+    if (element.title) {
+      return element.title;
+    }
+    return _i18n.default.inject(_i18n.default._t('ElementHeader.NOTITLE', 'Untitled {type} block'), {
+      type: type.title
+    });
+  }
+  toggle() {
+    this.setState(prevState => ({
+      tooltipOpen: !prevState.tooltipOpen
+    }));
+  }
+  renderVersionedStateMessage() {
+    const {
+      element: {
+        isLiveVersion,
+        isPublished
+      }
+    } = this.props;
+    if (isPublished && isLiveVersion) {
+      return null;
+    }
+    let versionStateButtonTitle = '';
+    const stateClassNames = ['element-editor-header__version-state'];
+    if (!isPublished) {
+      versionStateButtonTitle = _i18n.default._t('ElementHeader.STATE_DRAFT', 'Item has not been published yet');
+      stateClassNames.push('element-editor-header__version-state--draft');
+    } else if (!isLiveVersion) {
+      versionStateButtonTitle = _i18n.default._t('ElementHeader.STATE_MODIFIED', 'Item has unpublished changes');
+      stateClassNames.push('element-editor-header__version-state--modified');
+    }
+    return _react.default.createElement("span", {
+      className: (0, _classnames.default)(stateClassNames),
+      title: versionStateButtonTitle
+    });
+  }
+  renderStatusBadge() {
+    const {
+      element: {
+        isLiveVersion,
+        isPublished
+      }
+    } = this.props;
+    if (isPublished && isLiveVersion) {
+      return null;
+    }
+    let versionStateTitle = '';
+    let versionStateButtonTitle = '';
+    const stateClassNames = ['badge'];
+    if (!isPublished) {
+      versionStateTitle = _i18n.default._t('ElementHeader.BADGE_DRAFT', 'Draft');
+      versionStateButtonTitle = _i18n.default._t('ElementHeader.STATE_DRAFT', 'Item has not been published yet');
+      stateClassNames.push('status-addedtodraft');
+    } else if (!isLiveVersion) {
+      versionStateTitle = _i18n.default._t('ElementHeader.BADGE_MODIFIED', 'Modified');
+      versionStateButtonTitle = _i18n.default._t('ElementHeader.STATE_MODIFIED', 'Item has unpublished changes');
+      stateClassNames.push('status-modified');
+    }
+    return _react.default.createElement("span", {
+      className: (0, _classnames.default)(stateClassNames),
+      title: versionStateButtonTitle
+    }, versionStateTitle);
+  }
+  render() {
+    const {
+      connectDragSource,
+      element,
+      type,
+      areaId,
+      previewExpanded,
+      simple,
+      disableTooltip,
+      activeTab,
+      expandable,
+      ElementActionsComponent,
+      handleEditTabsClick
+    } = this.props;
+    const title = this.getBlockTitle(element, type);
+    const titleClasses = (0, _classnames.default)({
+      'element-editor-header__title': true,
+      'element-editor-header__title--none': !element.title
+    });
+    const expandTitle = _i18n.default._t('ElementHeader.EXPAND', 'Show editable fields');
+    const containerClasses = (0, _classnames.default)('element-editor-header', {
+      'element-editor-header--simple': simple
+    });
+    const iconContainerClasses = (0, _classnames.default)('element-editor-header__icon-container', {
+      'element-editor-header__icon-container--broken': type.broken
+    });
+    const expandCaretClasses = (0, _classnames.default)('element-editor-header__expand', {
+      'font-icon-right-open-big': !expandable,
+      'font-icon-up-open-big': expandable && previewExpanded,
+      'font-icon-down-open-big': expandable && !previewExpanded
+    });
+    const blockIconId = `element-icon-${element.id}`;
+    const content = _react.default.createElement("div", {
+      className: containerClasses
+    }, _react.default.createElement("div", {
+      className: "element-editor-header__drag-handle"
+    }, _react.default.createElement("i", {
+      className: "font-icon-drag-handle"
+    })), _react.default.createElement("div", {
+      className: "element-editor-header__info"
+    }, _react.default.createElement("div", {
+      className: iconContainerClasses
+    }, _react.default.createElement("i", {
+      className: type.icon,
+      id: blockIconId
+    }), this.renderVersionedStateMessage(), !type.broken && !simple && _react.default.createElement(_reactstrap.Tooltip, {
+      placement: "top",
+      isOpen: this.state.tooltipOpen && !disableTooltip,
+      target: blockIconId,
+      toggle: this.toggle
+    }, type.title)), _react.default.createElement("h3", {
+      className: titleClasses
+    }, title), this.renderStatusBadge()), !simple && _react.default.createElement("div", {
+      className: "element-editor-header__actions"
+    }, _react.default.createElement("div", {
+      role: "none",
+      onClick: event => event.stopPropagation()
+    }, _react.default.createElement(ElementActionsComponent, {
+      element: element,
+      type: type,
+      areaId: areaId,
+      activeTab: activeTab,
+      editTabs: type.editTabs,
+      handleEditTabsClick: handleEditTabsClick,
+      expandable: expandable
+    })), !type.broken && _react.default.createElement("i", {
+      className: expandCaretClasses,
+      title: expandTitle
+    })));
+    if (previewExpanded) {
+      return connectDragSource(content);
+    }
+    return content;
+  }
+}
+exports.Component = Header;
+Header.propTypes = {
+  element: _elementType.elementType.isRequired,
+  type: _elementTypeType.elementTypeType.isRequired,
+  areaId: _propTypes.default.number,
+  activeTab: _propTypes.default.string,
+  simple: _propTypes.default.bool,
+  ElementActionsComponent: _propTypes.default.elementType,
+  previewExpanded: _propTypes.default.bool,
+  disableTooltip: _propTypes.default.bool,
+  connectDragSource: _propTypes.default.func.isRequired,
+  connectDragPreview: _propTypes.default.func.isRequired,
+  onDragEnd: _propTypes.default.func
+};
+Header.defaultProps = {
+  expandable: true
+};
+var _default = exports["default"] = (0, _redux.compose)((0, _reactDnd.DragSource)('element', _dragHelpers.elementDragSource, connector => ({
+  connectDragSource: connector.dragSource(),
+  connectDragPreview: connector.dragPreview()
+})), (0, _Injector.inject)(['ElementActions'], ElementActionsComponent => ({
+  ElementActionsComponent
+}), () => 'ElementEditor.ElementList.Element'))(Header);
+
+/***/ }),
+
+/***/ "./client/src/components/ElementEditor/HoverBar.js":
+/*!*********************************************************!*\
+  !*** ./client/src/components/ElementEditor/HoverBar.js ***!
+  \*********************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = exports.Component = void 0;
+var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react"));
+var _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ "prop-types"));
+var _Injector = __webpack_require__(/*! lib/Injector */ "lib/Injector");
+var _elementTypeType = __webpack_require__(/*! types/elementTypeType */ "./client/src/types/elementTypeType.js");
+var _i18n = _interopRequireDefault(__webpack_require__(/*! i18n */ "i18n"));
+var _prefixClassNames = _interopRequireDefault(__webpack_require__(/*! ../../lib/prefixClassNames */ "./client/src/lib/prefixClassNames.js"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const classNames = (0, _prefixClassNames.default)('element-editor__hover-bar');
+function StatelessHoverBar(_ref) {
+  let {
+    AddElementPopoverComponent,
+    elementTypes,
+    elementId,
+    areaId,
+    popoverOpen,
+    onToggle
+  } = _ref;
+  const lineClasses = `${classNames('-line')} font-icon-plus-circled`;
+  const label = _i18n.default._t('ElementAddNewButton.ADD_BLOCK', 'Add block');
+  const btnProps = {
+    className: classNames('-area', {
+      '-area--focus': popoverOpen
+    }),
+    onClick: onToggle,
+    'aria-label': label,
+    title: label,
+    id: `AddBlockHoverBarArea_${areaId}_${elementId}`
+  };
+  return _react.default.createElement("div", {
+    className: classNames(''),
+    id: `AddBlockHoverBar_${areaId}_${elementId}`
+  }, _react.default.createElement("button", btnProps, _react.default.createElement("span", {
+    className: classNames('-area-inner')
+  }, _react.default.createElement("span", {
+    className: lineClasses
+  }))), _react.default.createElement(AddElementPopoverComponent, {
+    placement: "bottom",
+    target: `AddBlockHoverBarArea_${areaId}_${elementId}`,
+    isOpen: popoverOpen,
+    elementTypes: elementTypes,
+    toggle: onToggle,
+    container: `#AddBlockHoverBar_${areaId}_${elementId}`,
+    areaId: areaId,
+    insertAfterElement: elementId
+  }));
+}
+class HoverBar extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      popoverOpen: false
+    };
+  }
+  toggle() {
+    this.setState(prevState => ({
+      popoverOpen: !prevState.popoverOpen
+    }));
+  }
+  render() {
+    const props = {
+      ...this.state,
+      ...this.props,
+      onToggle: this.toggle
+    };
+    return _react.default.createElement(StatelessHoverBar, props);
+  }
+}
+exports.Component = HoverBar;
+HoverBar.propTypes = {
+  elementTypes: _propTypes.default.arrayOf(_elementTypeType.elementTypeType).isRequired,
+  elementId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+  areaId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
+};
+var _default = exports["default"] = (0, _Injector.inject)(['AddElementPopover'], AddElementPopoverComponent => ({
+  AddElementPopoverComponent
+}), () => 'ElementEditor.ElementList.HoverBar')(HoverBar);
+
+/***/ }),
+
+/***/ "./client/src/components/ElementEditor/InlineEditForm.js":
+/*!***************************************************************!*\
+  !*** ./client/src/components/ElementEditor/InlineEditForm.js ***!
+  \***************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react"));
+var _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ "prop-types"));
+var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "classnames"));
+var _FormBuilderLoader = _interopRequireDefault(__webpack_require__(/*! containers/FormBuilderLoader/FormBuilderLoader */ "containers/FormBuilderLoader/FormBuilderLoader"));
+var _loadElementSchemaValue = __webpack_require__(/*! state/editor/loadElementSchemaValue */ "./client/src/state/editor/loadElementSchemaValue.js");
+var _i18n = _interopRequireDefault(__webpack_require__(/*! i18n */ "i18n"));
+var _loadElementFormStateName = __webpack_require__(/*! state/editor/loadElementFormStateName */ "./client/src/state/editor/loadElementFormStateName.js");
+var _reactRedux = __webpack_require__(/*! react-redux */ "react-redux");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+class InlineEditForm extends _react.PureComponent {
+  constructor(props) {
+    super(props);
+    this.handleLoadingError = this.handleLoadingError.bind(this);
+    this.handleLoadingSuccess = this.handleLoadingSuccess.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.state = {
+      loadingError: null
+    };
+  }
+  handleLoadingError() {
+    const {
+      jQuery: $
+    } = window;
+    const {
+      handleLoadingError
+    } = this.props;
+    this.setState({
+      loadingError: true
+    });
+    $.noticeAdd({
+      text: _i18n.default.inject(_i18n.default._t('ElementEditForm.ERROR_NOTIFICATION', 'Error displaying the edit form for this block')),
+      stay: true,
+      type: 'notice'
+    });
+    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));
+  }
+  handleLoadingSuccess() {
+    this.props.onFormSchemaFetchResponse();
+  }
+  render() {
+    const {
+      elementId,
+      extraClass,
+      onClick,
+      onFormInit,
+      formHasState
+    } = this.props;
+    const {
+      loadingError
+    } = this.state;
+    const classNames = (0, _classnames.default)('element-editor-editform', extraClass);
+    const schemaUrl = (0, _loadElementSchemaValue.loadElementSchemaValue)('schemaUrl', elementId);
+    const formTag = 'form';
+    const formProps = {
+      formTag,
+      schemaUrl,
+      identifier: 'element',
+      refetchSchemaOnMount: !formHasState,
+      onLoadingError: this.handleLoadingError,
+      onSubmit: this.handleSubmit,
+      onLoadingSuccess: this.handleLoadingSuccess
+    };
+    if (loadingError) {
+      formProps.loading = false;
+    }
+    if (typeof onFormInit === 'function') {
+      formProps.onReduxFormInit = onFormInit;
+    }
+    return _react.default.createElement("div", {
+      className: classNames,
+      onClick: onClick,
+      role: "presentation"
+    }, _react.default.createElement(_FormBuilderLoader.default, formProps));
+  }
+}
+InlineEditForm.propTypes = {
+  extraClass: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
+  onClick: _propTypes.default.func,
+  elementId: _propTypes.default.string,
+  handleLoadingError: _propTypes.default.func,
+  onFormSchemaFetchResponse: _propTypes.default.func,
+  onFormSchemaSubmitResponse: _propTypes.default.func
+};
+function mapStateToProps(state, ownProps) {
+  const formName = (0, _loadElementFormStateName.loadElementFormStateName)(ownProps.elementId);
+  return {
+    formHasState: state.form.formState && state.form.formState.element && !!state.form.formState.element[formName]
+  };
+}
+var _default = exports["default"] = (0, _reactRedux.connect)(mapStateToProps)(InlineEditForm);
+
+/***/ }),
+
+/***/ "./client/src/components/ElementEditor/Summary.js":
+/*!********************************************************!*\
+  !*** ./client/src/components/ElementEditor/Summary.js ***!
+  \********************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react"));
+var _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ "prop-types"));
+var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "classnames"));
+var _i18n = _interopRequireDefault(__webpack_require__(/*! i18n */ "i18n"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+class Summary extends _react.PureComponent {
+  render() {
+    const {
+      fileUrl,
+      fileTitle,
+      content,
+      broken
+    } = this.props;
+    const noContent = _i18n.default._t('ElementSummary.NO_PREVIEW', 'No preview available');
+    const summaryClassNames = (0, _classnames.default)('element-editor-summary__content', {
+      'element-editor-summary__content--broken': broken
+    });
+    return _react.default.createElement("div", {
+      className: "element-editor-summary"
+    }, fileUrl && _react.default.createElement("img", {
+      className: "element-editor-summary__thumbnail-image",
+      src: fileUrl,
+      alt: fileTitle
+    }), (content || !fileUrl) && _react.default.createElement("p", {
+      className: summaryClassNames
+    }, content || noContent));
+  }
+}
+Summary.defaultProps = {};
+Summary.propTypes = {
+  content: _propTypes.default.string,
+  fileUrl: _propTypes.default.string,
+  fileTitle: _propTypes.default.string,
+  broken: _propTypes.default.bool
+};
+var _default = exports["default"] = Summary;
+
+/***/ }),
+
+/***/ "./client/src/components/ElementEditor/Toolbar.js":
+/*!********************************************************!*\
+  !*** ./client/src/components/ElementEditor/Toolbar.js ***!
+  \********************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react"));
+var _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ "prop-types"));
+var _Injector = __webpack_require__(/*! lib/Injector */ "lib/Injector");
+var _elementTypeType = __webpack_require__(/*! types/elementTypeType */ "./client/src/types/elementTypeType.js");
+var _reactDnd = __webpack_require__(/*! react-dnd */ "react-dnd");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+class Toolbar extends _react.PureComponent {
+  render() {
+    const {
+      AddNewButtonComponent,
+      elementTypes,
+      areaId,
+      connectDropTarget
+    } = this.props;
+    return connectDropTarget(_react.default.createElement("div", {
+      className: "element-editor__toolbar"
+    }, _react.default.createElement(AddNewButtonComponent, {
+      elementTypes: elementTypes,
+      areaId: areaId
+    })));
+  }
+}
+Toolbar.defaultProps = {};
+Toolbar.propTypes = {
+  elementTypes: _propTypes.default.arrayOf(_elementTypeType.elementTypeType).isRequired,
+  areaId: _propTypes.default.number.isRequired,
+  AddNewButtonComponent: _propTypes.default.elementType.isRequired,
+  connectDropTarget: _propTypes.default.func.isRequired,
+  onDragOver: _propTypes.default.func,
+  onDragDrop: _propTypes.default.func
+};
+const toolbarTarget = {
+  hover(props) {
+    const {
+      onDragOver
+    } = props;
+    if (onDragOver) {
+      onDragOver();
+    }
+  }
+};
+var _default = exports["default"] = (0, _reactDnd.DropTarget)('element', toolbarTarget, connect => ({
+  connectDropTarget: connect.dropTarget()
+}))((0, _Injector.inject)(['ElementAddNewButton'], AddNewButtonComponent => ({
+  AddNewButtonComponent
+}), () => 'ElementEditor.ElementToolbar')(Toolbar));
+
+/***/ }),
+
+/***/ "./client/src/components/HistoricElementView/HistoricElementView.js":
+/*!**************************************************************************!*\
+  !*** ./client/src/components/HistoricElementView/HistoricElementView.js ***!
+  \**************************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = void 0;
+var _react = _interopRequireDefault(__webpack_require__(/*! react */ "react"));
+var _i18n = _interopRequireDefault(__webpack_require__(/*! i18n */ "i18n"));
+var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "classnames"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ElementalAreaHistoryFactory = FieldGroup => class HistoricElementView extends FieldGroup {
+  getClassName() {
+    const classlist = [super.getClassName()];
+    if (this.props.data.ElementID) {
+      classlist.unshift('elemental-area__element--historic-inner');
+    }
+    return (0, _classnames.default)(classlist);
+  }
+  render() {
+    const legend = this.getLegend();
+    const Tag = this.props.data.tag || 'div';
+    const classNames = this.getClassName();
+    const {
+      data
+    } = this.props;
+    if (!data.ElementID) {
+      return super.render();
+    }
+    return _react.default.createElement(Tag, {
+      className: classNames
+    }, legend, _react.default.createElement("div", {
+      className: "elemental-preview elemental-preview--historic"
+    }, data.ElementEditLink && _react.default.createElement("a", {
+      className: "elemental-preview__link",
+      href: data.ElementEditLink
+    }, _react.default.createElement("span", {
+      className: "elemental-preview__link-text"
+    }, _i18n.default._t('HistoricElementView.VIEW_BLOCK_HISTORY', 'Block history')), _react.default.createElement("i", {
+      className: "font-icon-angle-right btn--icon-lg elemental-preview__link-caret"
+    })), _react.default.createElement("div", {
+      className: "elemental-preview__icon"
+    }, _react.default.createElement("i", {
+      className: data.ElementIcon
+    })), _react.default.createElement("div", {
+      className: "elemental-preview__detail"
+    }, _react.default.createElement("h3", null, data.ElementTitle, " ", _react.default.createElement("small", null, data.ElementType)))), this.props.children);
+  }
+};
+var _default = exports["default"] = ElementalAreaHistoryFactory;
+
+/***/ }),
+
+/***/ "./client/src/components/TextCheckboxGroupField/TextCheckboxGroupField.js":
+/*!********************************************************************************!*\
+  !*** ./client/src/components/TextCheckboxGroupField/TextCheckboxGroupField.js ***!
+  \********************************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = void 0;
+var _react = _interopRequireDefault(__webpack_require__(/*! react */ "react"));
+var _reactstrap = __webpack_require__(/*! reactstrap */ "reactstrap");
+var _FieldHolder = _interopRequireDefault(__webpack_require__(/*! components/FieldHolder/FieldHolder */ "components/FieldHolder/FieldHolder"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const TextCheckboxGroupField = props => {
+  const {
+    children
+  } = props;
+  const childrenWithProps = _react.default.Children.toArray(_react.default.Children.map(children, (child, index) => {
+    const additionalProps = {};
+    if (index === 0) {
+      additionalProps.id = props.id;
+      additionalProps.title = null;
+    } else if (index === 1) {
+      additionalProps.noHolder = true;
+    }
+    return _react.default.cloneElement(child, additionalProps);
+  }));
+  if (props.readOnly) {
+    return _react.default.createElement("div", {
+      className: "text-checkbox-group-field--read-only"
+    }, childrenWithProps);
+  }
+  if (childrenWithProps.length === 1) {
+    return childrenWithProps[0];
+  }
+  return _react.default.createElement(_reactstrap.InputGroup, {
+    className: "text-checkbox-group-field"
+  }, childrenWithProps[0], _react.default.createElement(_reactstrap.InputGroupAddon, {
+    addonType: "append"
+  }, _react.default.createElement(_reactstrap.InputGroupText, null, childrenWithProps[1])));
+};
+var _default = exports["default"] = (0, _FieldHolder.default)(TextCheckboxGroupField);
+
+/***/ }),
+
+/***/ "./client/src/legacy/ElementEditor/entwine.js":
+/*!****************************************************!*\
+  !*** ./client/src/legacy/ElementEditor/entwine.js ***!
+  \****************************************************/
+/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {
+
+
+
+var _jquery = _interopRequireDefault(__webpack_require__(/*! jquery */ "jquery"));
+var _react = _interopRequireDefault(__webpack_require__(/*! react */ "react"));
+var _client = __webpack_require__(/*! react-dom/client */ "react-dom/client");
+var _Injector = __webpack_require__(/*! lib/Injector */ "lib/Injector");
+var _elementConfig = __webpack_require__(/*! state/editor/elementConfig */ "./client/src/state/editor/elementConfig.js");
+var _reduxForm = __webpack_require__(/*! redux-form */ "redux-form");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const resetStores = () => {
+  window.ss.apolloClient.resetStore();
+  setTimeout(() => {
+    const {
+      store
+    } = window.ss;
+    if (!store) {
+      return;
+    }
+    store.dispatch((0, _reduxForm.destroy)(...Object.keys(store.getState().form.formState.element || {}).map(name => `element.${name}`)));
+  }, 0);
+};
+_jquery.default.entwine('ss', $ => {
+  $('.js-injector-boot .element-editor__container').entwine({
+    ReactRoot: null,
+    onmatch() {
+      const context = {};
+      const ElementEditorComponent = (0, _Injector.loadComponent)('ElementEditor', context);
+      const schemaData = this.data('schema');
+      const elementTypes = (0, _elementConfig.getConfig)().elementTypes;
+      const props = {
+        fieldName: this.attr('name'),
+        areaId: schemaData['elemental-area-id'],
+        allowedElements: schemaData['allowed-elements'],
+        elementTypes
+      };
+      let root = this.getReactRoot();
+      if (!root) {
+        root = (0, _client.createRoot)(this[0]);
+        this.setReactRoot(root);
+      }
+      root.render(_react.default.createElement(ElementEditorComponent, props));
+    },
+    onunmatch() {
+      if (!$('.cms-edit-form').data('hasValidationErrors')) {
+        resetStores();
+      }
+      const root = this.getReactRoot();
+      if (root) {
+        root.unmount();
+        this.setReactRoot(null);
+      }
+    },
+    'from .cms-edit-form': {
+      onaftersubmitform(event, data) {
+        const validationResultPjax = JSON.parse(data.xhr.responseText).ValidationResult;
+        const validationResult = JSON.parse(validationResultPjax.replace(/<\/?script[^>]*?>/g, ''));
+        if (validationResult.isValid) {
+          $('.cms-edit-form').data('hasValidationErrors', false);
+          resetStores();
+        } else {
+          $('.cms-edit-form').data('hasValidationErrors', true);
+        }
+      }
+    }
+  });
+  $('.js-injector-boot .element-editor__container .element-form-dirty-state').entwine({
+    onmatch() {
+      $('.cms-edit-form').trigger('change');
+    },
+    onunmatch() {
+      $('.cms-edit-form').trigger('change');
+    }
+  });
+  $('.cms-edit-form').entwine({
+    getChangeTrackerOptions() {
+      const isDefault = this.entwineData('ChangeTrackerOptions') === undefined;
+      let opts = this._super();
+      if (isDefault) {
+        opts = $.extend({}, opts);
+        opts.ignoreFieldSelector += ', .elementalarea :input:not(.element-form-dirty-state)';
+        this.setChangeTrackerOptions(opts);
+      }
+      return opts;
+    }
+  });
+});
+
+/***/ }),
+
+/***/ "./client/src/lib/dragHelpers.js":
+/*!***************************************!*\
+  !*** ./client/src/lib/dragHelpers.js ***!
+  \***************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.isOverTop = exports.getDragIndicatorIndex = exports.elementDragSource = void 0;
+var _reactDom = __webpack_require__(/*! react-dom */ "react-dom");
+const isOverTop = (monitor, component) => {
+  const clientOffset = monitor.getClientOffset();
+  const componentRect = (0, _reactDom.findDOMNode)(component).getBoundingClientRect();
+  return clientOffset.y < componentRect.y + componentRect.height / 2;
+};
+exports.isOverTop = isOverTop;
+const getDragIndicatorIndex = (items, dragTarget, draggedItem, dragSpot) => {
+  if (dragTarget === null || !draggedItem) {
+    return null;
+  }
+  let targetIndex = dragTarget ? items.findIndex(element => element === dragTarget) : 0;
+  const sourceIndex = items.findIndex(item => item === draggedItem);
+  if (dragSpot === 'bottom') {
+    targetIndex += 1;
+  }
+  if (sourceIndex === targetIndex || sourceIndex + 1 === targetIndex) {
+    return null;
+  }
+  return targetIndex;
+};
+exports.getDragIndicatorIndex = getDragIndicatorIndex;
+const elementDragSource = exports.elementDragSource = {
+  beginDrag(props) {
+    return props.element;
+  },
+  endDrag(props, monitor) {
+    const {
+      onDragEnd
+    } = props;
+    const dropResult = monitor.getDropResult();
+    if (!onDragEnd || !dropResult || !dropResult.dropAfterID) {
+      return;
+    }
+    const itemID = monitor.getItem().id;
+    const {
+      dropAfterID
+    } = dropResult;
+    if (itemID !== dropAfterID) {
+      onDragEnd(itemID, dropAfterID);
+    }
+  }
+};
+
+/***/ }),
+
+/***/ "./client/src/lib/prefixClassNames.js":
+/*!********************************************!*\
+  !*** ./client/src/lib/prefixClassNames.js ***!
+  \********************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = void 0;
+var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "classnames"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const prefixClassNames = cssPrefix => function () {
+  const prefix = str => `${cssPrefix}${str}`;
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  const prefixArgs = args.map(arg => {
+    if (!arg && arg !== '') {
+      return false;
+    }
+    if (typeof arg === 'object') {
+      return Array.isArray(arg) ? arg.map(prefix) : Object.entries(arg).reduce((accumulator, _ref) => {
+        let [key, value] = _ref;
+        return Object.assign({}, accumulator, {
+          [prefix(key)]: value
+        });
+      }, {});
+    }
+    return prefix(arg);
+  });
+  return (0, _classnames.default)(...prefixArgs);
+};
+var _default = exports["default"] = prefixClassNames;
+
+/***/ }),
+
+/***/ "./client/src/state/editor/addElementMutation.js":
+/*!*******************************************************!*\
+  !*** ./client/src/state/editor/addElementMutation.js ***!
+  \*******************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.mutation = exports["default"] = exports.config = void 0;
+var _hoc = __webpack_require__(/*! @apollo/client/react/hoc */ "@apollo/client/react/hoc");
+var _graphqlTag = _interopRequireDefault(__webpack_require__(/*! graphql-tag */ "graphql-tag"));
+var _readBlocksForAreaQuery = __webpack_require__(/*! ./readBlocksForAreaQuery */ "./client/src/state/editor/readBlocksForAreaQuery.js");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const mutation = exports.mutation = (0, _graphqlTag.default)`
 mutation AddElementToArea($className: String!, $elementalAreaID: ID!, $afterElementID: ID) {
   addElementToArea(
     className: $className,
@@ -8,23 +2606,334 @@ mutation AddElementToArea($className: String!, $elementalAreaID: ID!, $afterElem
     id
   }
 }
-`,d=t.config={props:e=>{let{mutate:t,ownProps:{actions:n,areaId:r}}=e;return{actions:{...n,handleAddElementToArea:(e,n)=>t({variables:{className:e,elementalAreaID:r,afterElementID:n}})}}},options:e=>{let{areaId:t}=e;return{refetchQueries:[{query:l.query,variables:l.config.options({areaId:t}).variables}]}}};t.default=(0,o.graphql)(i,d)},2409: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`
+`;
+const config = exports.config = {
+  props: _ref => {
+    let {
+      mutate,
+      ownProps: {
+        actions,
+        areaId
+      }
+    } = _ref;
+    const handleAddElementToArea = (className, afterElementID) => mutate({
+      variables: {
+        className,
+        elementalAreaID: areaId,
+        afterElementID
+      }
+    });
+    return {
+      actions: {
+        ...actions,
+        handleAddElementToArea
+      }
+    };
+  },
+  options: _ref2 => {
+    let {
+      areaId
+    } = _ref2;
+    return {
+      refetchQueries: [{
+        query: _readBlocksForAreaQuery.query,
+        variables: _readBlocksForAreaQuery.config.options({
+          areaId
+        }).variables
+      }]
+    };
+  }
+};
+var _default = exports["default"] = (0, _hoc.graphql)(mutation, config);
+
+/***/ }),
+
+/***/ "./client/src/state/editor/archiveBlockMutation.js":
+/*!*********************************************************!*\
+  !*** ./client/src/state/editor/archiveBlockMutation.js ***!
+  \*********************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.mutation = exports["default"] = exports.config = void 0;
+var _hoc = __webpack_require__(/*! @apollo/client/react/hoc */ "@apollo/client/react/hoc");
+var _graphqlTag = _interopRequireDefault(__webpack_require__(/*! graphql-tag */ "graphql-tag"));
+var _readBlocksForAreaQuery = __webpack_require__(/*! ./readBlocksForAreaQuery */ "./client/src/state/editor/readBlocksForAreaQuery.js");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const mutation = exports.mutation = (0, _graphqlTag.default)`
 mutation ArchiveBlock($blockId: ID!) {
   deleteBlocks(ids: [$blockId])
 }
-`,d=t.config={props:e=>{let{mutate:t,ownProps:{actions:n}}=e;return{actions:{...n,handleArchiveBlock:e=>t({variables:{blockId:e}})}}},options:e=>{let{areaId:t}=e;return{refetchQueries:[{query:l.query,variables:l.config.options({areaId:t}).variables}]}}};t.default=(0,o.graphql)(i,d)},8046: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`
+`;
+const config = exports.config = {
+  props: _ref => {
+    let {
+      mutate,
+      ownProps: {
+        actions
+      }
+    } = _ref;
+    const handleArchiveBlock = blockId => mutate({
+      variables: {
+        blockId
+      }
+    });
+    return {
+      actions: {
+        ...actions,
+        handleArchiveBlock
+      }
+    };
+  },
+  options: _ref2 => {
+    let {
+      areaId
+    } = _ref2;
+    return {
+      refetchQueries: [{
+        query: _readBlocksForAreaQuery.query,
+        variables: _readBlocksForAreaQuery.config.options({
+          areaId
+        }).variables
+      }]
+    };
+  }
+};
+var _default = exports["default"] = (0, _hoc.graphql)(mutation, config);
+
+/***/ }),
+
+/***/ "./client/src/state/editor/duplicateBlockMutation.js":
+/*!***********************************************************!*\
+  !*** ./client/src/state/editor/duplicateBlockMutation.js ***!
+  \***********************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.mutation = exports["default"] = exports.config = void 0;
+var _hoc = __webpack_require__(/*! @apollo/client/react/hoc */ "@apollo/client/react/hoc");
+var _graphqlTag = _interopRequireDefault(__webpack_require__(/*! graphql-tag */ "graphql-tag"));
+var _readBlocksForAreaQuery = __webpack_require__(/*! ./readBlocksForAreaQuery */ "./client/src/state/editor/readBlocksForAreaQuery.js");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const mutation = exports.mutation = (0, _graphqlTag.default)`
 mutation DuplicateBlock($blockId: ID!) {
   duplicateBlock(id: $blockId) {
     id
   }
 }
-`,d=t.config={props:e=>{let{mutate:t,ownProps:{actions:n}}=e;return{actions:{...n,handleDuplicateBlock:e=>t({variables:{blockId:e}})}}},options:e=>{let{areaId:t}=e;return{refetchQueries:[{query:l.query,variables:l.config.options({areaId:t}).variables}]}}};t.default=(0,o.graphql)(i,d)},3558:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.getElementTypeConfig=t.getConfig=void 0;var r,o=(r=n(4510))&&r.__esModule?r:{default:r};const a=()=>o.default.getSection("DNADesign\\Elemental\\Controllers\\ElementalAreaController");t.getConfig=a;t.getElementTypeConfig=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;const n=e.blockSchema.typeName;let r=(Array.isArray(t)?t:a().elementTypes).find((e=>e.class===n||e.name===n));return e.obsoleteClassName&&(r=Object.assign({obsoleteClassName:e.obsoleteClassName},r),Object.preventExtensions(r)),r}},920:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.loadElementFormStateName=void 0;var r,o=(r=n(4510))&&r.__esModule?r:{default:r};t.loadElementFormStateName=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;const t=o.default.getSection("DNADesign\\Elemental\\Controllers\\ElementalAreaController").form.elementForm.formNameTemplate;return e?t.replace("{id}",e):t}},9536:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.loadElementSchemaValue=void 0;var r,o=(r=n(4510))&&r.__esModule?r:{default:r};t.loadElementSchemaValue=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;const n=o.default.getSection("DNADesign\\Elemental\\Controllers\\ElementalAreaController").form.elementForm[e]||"";return t?`${n}/${t}`:n}},6426: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`
+`;
+const config = exports.config = {
+  props: _ref => {
+    let {
+      mutate,
+      ownProps: {
+        actions
+      }
+    } = _ref;
+    const handleDuplicateBlock = blockId => mutate({
+      variables: {
+        blockId
+      }
+    });
+    return {
+      actions: {
+        ...actions,
+        handleDuplicateBlock
+      }
+    };
+  },
+  options: _ref2 => {
+    let {
+      areaId
+    } = _ref2;
+    return {
+      refetchQueries: [{
+        query: _readBlocksForAreaQuery.query,
+        variables: _readBlocksForAreaQuery.config.options({
+          areaId
+        }).variables
+      }]
+    };
+  }
+};
+var _default = exports["default"] = (0, _hoc.graphql)(mutation, config);
+
+/***/ }),
+
+/***/ "./client/src/state/editor/elementConfig.js":
+/*!**************************************************!*\
+  !*** ./client/src/state/editor/elementConfig.js ***!
+  \**************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.getElementTypeConfig = exports.getConfig = void 0;
+var _Config = _interopRequireDefault(__webpack_require__(/*! lib/Config */ "lib/Config"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const getConfig = () => _Config.default.getSection('DNADesign\\Elemental\\Controllers\\ElementalAreaController');
+exports.getConfig = getConfig;
+const getElementTypeConfig = function (element) {
+  let typeConfig = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  const elementType = element.blockSchema.typeName;
+  const types = Array.isArray(typeConfig) ? typeConfig : getConfig().elementTypes;
+  let type = types.find(value => value.class === elementType || value.name === elementType);
+  if (element.obsoleteClassName) {
+    type = Object.assign({
+      obsoleteClassName: element.obsoleteClassName
+    }, type);
+    Object.preventExtensions(type);
+  }
+  return type;
+};
+exports.getElementTypeConfig = getElementTypeConfig;
+
+/***/ }),
+
+/***/ "./client/src/state/editor/loadElementFormStateName.js":
+/*!*************************************************************!*\
+  !*** ./client/src/state/editor/loadElementFormStateName.js ***!
+  \*************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.loadElementFormStateName = void 0;
+var _Config = _interopRequireDefault(__webpack_require__(/*! lib/Config */ "lib/Config"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const loadElementFormStateName = function () {
+  let elementId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  const sectionKey = 'DNADesign\\Elemental\\Controllers\\ElementalAreaController';
+  const section = _Config.default.getSection(sectionKey);
+  const formNameTemplate = section.form.elementForm.formNameTemplate;
+  if (elementId) {
+    return formNameTemplate.replace('{id}', elementId);
+  }
+  return formNameTemplate;
+};
+exports.loadElementFormStateName = loadElementFormStateName;
+
+/***/ }),
+
+/***/ "./client/src/state/editor/loadElementSchemaValue.js":
+/*!***********************************************************!*\
+  !*** ./client/src/state/editor/loadElementSchemaValue.js ***!
+  \***********************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.loadElementSchemaValue = void 0;
+var _Config = _interopRequireDefault(__webpack_require__(/*! lib/Config */ "lib/Config"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const loadElementSchemaValue = function (key) {
+  let elementId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  const sectionKey = 'DNADesign\\Elemental\\Controllers\\ElementalAreaController';
+  const section = _Config.default.getSection(sectionKey);
+  const schemaValue = section.form.elementForm[key] || '';
+  if (elementId) {
+    return `${schemaValue}/${elementId}`;
+  }
+  return schemaValue;
+};
+exports.loadElementSchemaValue = loadElementSchemaValue;
+
+/***/ }),
+
+/***/ "./client/src/state/editor/publishBlockMutation.js":
+/*!*********************************************************!*\
+  !*** ./client/src/state/editor/publishBlockMutation.js ***!
+  \*********************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.mutation = exports["default"] = exports.config = void 0;
+var _hoc = __webpack_require__(/*! @apollo/client/react/hoc */ "@apollo/client/react/hoc");
+var _graphqlTag = _interopRequireDefault(__webpack_require__(/*! graphql-tag */ "graphql-tag"));
+var _readBlocksForAreaQuery = __webpack_require__(/*! ./readBlocksForAreaQuery */ "./client/src/state/editor/readBlocksForAreaQuery.js");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const mutation = exports.mutation = (0, _graphqlTag.default)`
 mutation PublishBlock($blockId:ID!) {
   publishBlock(id: $blockId) {
     id
   }
 }
-`,d=t.config={props:e=>{let{mutate:t,ownProps:{actions:n}}=e;return{actions:{...n,handlePublishBlock:e=>t({variables:{blockId:e}})}}},options:e=>{let{areaId:t}=e;return{refetchQueries:[{query:l.query,variables:l.config.options({areaId:t}).variables}]}}};t.default=(0,o.graphql)(i,d)},2806:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.query=t.default=t.config=void 0;var r,o=n(3732),a=(r=n(1306))&&r.__esModule?r:{default:r};const l=t.query=a.default`
+`;
+const config = exports.config = {
+  props: _ref => {
+    let {
+      mutate,
+      ownProps: {
+        actions
+      }
+    } = _ref;
+    const handlePublishBlock = blockId => mutate({
+      variables: {
+        blockId
+      }
+    });
+    return {
+      actions: {
+        ...actions,
+        handlePublishBlock
+      }
+    };
+  },
+  options: _ref2 => {
+    let {
+      areaId
+    } = _ref2;
+    return {
+      refetchQueries: [{
+        query: _readBlocksForAreaQuery.query,
+        variables: _readBlocksForAreaQuery.config.options({
+          areaId
+        }).variables
+      }]
+    };
+  }
+};
+var _default = exports["default"] = (0, _hoc.graphql)(mutation, config);
+
+/***/ }),
+
+/***/ "./client/src/state/editor/readBlocksForAreaQuery.js":
+/*!***********************************************************!*\
+  !*** ./client/src/state/editor/readBlocksForAreaQuery.js ***!
+  \***********************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.query = exports["default"] = exports.config = void 0;
+var _hoc = __webpack_require__(/*! @apollo/client/react/hoc */ "@apollo/client/react/hoc");
+var _graphqlTag = _interopRequireDefault(__webpack_require__(/*! graphql-tag */ "graphql-tag"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const query = exports.query = (0, _graphqlTag.default)`
 query ReadBlocksForArea($id:ID!) {
   readOneElementalArea(filter: { id: { eq: $id } }, versioning: {
     mode: DRAFT
@@ -44,7 +2953,59 @@ query ReadBlocksForArea($id:ID!) {
     }
   }
 }
-`,i=t.config={options(e){let{areaId:t}=e;return{variables:{id:t}}},props(e){let{data:{error:t,readOneElementalArea:n,loading:r}}=e,o=null;n&&(o=n.elements);return{loading:r||!o,blocks:o,graphQLErrors:t&&t.graphQLErrors&&t.graphQLErrors.map((e=>e.message))}}};t.default=(0,o.graphql)(l,i)},5386: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`
+`;
+const config = exports.config = {
+  options(_ref) {
+    let {
+      areaId
+    } = _ref;
+    return {
+      variables: {
+        id: areaId
+      }
+    };
+  },
+  props(_ref2) {
+    let {
+      data: {
+        error,
+        readOneElementalArea,
+        loading: networkLoading
+      }
+    } = _ref2;
+    let blocks = null;
+    if (readOneElementalArea) {
+      blocks = readOneElementalArea.elements;
+    }
+    const errors = error && error.graphQLErrors && error.graphQLErrors.map(graphQLError => graphQLError.message);
+    return {
+      loading: networkLoading || !blocks,
+      blocks,
+      graphQLErrors: errors
+    };
+  }
+};
+var _default = exports["default"] = (0, _hoc.graphql)(query, config);
+
+/***/ }),
+
+/***/ "./client/src/state/editor/sortBlockMutation.js":
+/*!******************************************************!*\
+  !*** ./client/src/state/editor/sortBlockMutation.js ***!
+  \******************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.mutation = exports["default"] = exports.config = void 0;
+var _hoc = __webpack_require__(/*! @apollo/client/react/hoc */ "@apollo/client/react/hoc");
+var _graphqlTag = _interopRequireDefault(__webpack_require__(/*! graphql-tag */ "graphql-tag"));
+var _readBlocksForAreaQuery = __webpack_require__(/*! ./readBlocksForAreaQuery */ "./client/src/state/editor/readBlocksForAreaQuery.js");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const mutation = exports.mutation = (0, _graphqlTag.default)`
 mutation SortBlockMutation($blockId:ID!, $afterBlockId:ID!) {
   sortBlock(
     id: $blockId
@@ -55,7 +3016,102 @@ 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`
+`;
+const config = exports.config = {
+  props: _ref => {
+    let {
+      mutate,
+      ownProps: {
+        actions
+      }
+    } = _ref;
+    const handleSortBlock = (blockId, afterBlockId, areaId) => mutate({
+      variables: {
+        blockId,
+        afterBlockId
+      },
+      optimisticResponse: {
+        sortBlock: {
+          id: blockId,
+          isLiveVersion: false,
+          isPublished: false,
+          __typename: 'Block'
+        }
+      },
+      update: (store, _ref2) => {
+        let {
+          data: {
+            sortBlock: updatedElementData
+          }
+        } = _ref2;
+        const variables = _readBlocksForAreaQuery.config.options({
+          areaId
+        }).variables;
+        const cachedData = store.readQuery({
+          query: _readBlocksForAreaQuery.query,
+          variables
+        });
+        const newData = JSON.parse(JSON.stringify(cachedData));
+        let blocks = newData.readOneElementalArea.elements;
+        const movedBlockIndex = blocks.findIndex(block => block.id === blockId);
+        const movedBlock = blocks[movedBlockIndex];
+        Object.entries(updatedElementData).forEach(_ref3 => {
+          let [key, value] = _ref3;
+          if (key === '__typename') {
+            return;
+          }
+          movedBlock[key] = value;
+        });
+        blocks.splice(movedBlockIndex, 1);
+        if (afterBlockId === '0') {
+          blocks.unshift(movedBlock);
+        } else {
+          let targetBlockIndex = blocks.findIndex(block => block.id === afterBlockId);
+          if (targetBlockIndex === -1) {
+            targetBlockIndex = movedBlockIndex - 1;
+          }
+          const end = blocks.slice(targetBlockIndex + 1);
+          blocks = blocks.slice(0, targetBlockIndex + 1);
+          blocks.push(movedBlock);
+          blocks = blocks.concat(end);
+        }
+        newData.readOneElementalArea.elements = blocks;
+        store.writeQuery({
+          query: _readBlocksForAreaQuery.query,
+          data: newData,
+          variables
+        });
+      }
+    });
+    return {
+      actions: {
+        ...actions,
+        handleSortBlock
+      }
+    };
+  }
+};
+var _default = exports["default"] = (0, _hoc.graphql)(mutation, config);
+
+/***/ }),
+
+/***/ "./client/src/state/editor/unpublishBlockMutation.js":
+/*!***********************************************************!*\
+  !*** ./client/src/state/editor/unpublishBlockMutation.js ***!
+  \***********************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.mutation = exports["default"] = exports.config = void 0;
+var _hoc = __webpack_require__(/*! @apollo/client/react/hoc */ "@apollo/client/react/hoc");
+var _graphqlTag = _interopRequireDefault(__webpack_require__(/*! graphql-tag */ "graphql-tag"));
+var _readBlocksForAreaQuery = __webpack_require__(/*! ./readBlocksForAreaQuery */ "./client/src/state/editor/readBlocksForAreaQuery.js");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const mutation = exports.mutation = (0, _graphqlTag.default)`
 mutation UnpublishBlock($blockId:ID!) {
   unpublishBlock(
     id: $blockId
@@ -63,7 +3119,64 @@ mutation UnpublishBlock($blockId:ID!) {
     id
   }
 }
-`,d=t.config={props:e=>{let{mutate:t,ownProps:{actions:n}}=e;return{actions:{...n,handleUnpublishBlock:(e,n,r,o)=>t({variables:{blockId:e,fromStage:n,toStage:r,fromVersion:o}})}}},options:e=>{let{areaId:t}=e;return{refetchQueries:[{query:l.query,variables:l.config.options({areaId:t}).variables}]}}};t.default=(0,o.graphql)(i,d)},2939:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.query=t.default=t.config=void 0;var r,o=n(3732),a=(r=n(1306))&&r.__esModule?r:{default:r};const l=t.query=a.default`
+`;
+const config = exports.config = {
+  props: _ref => {
+    let {
+      mutate,
+      ownProps: {
+        actions
+      }
+    } = _ref;
+    const handleUnpublishBlock = (blockId, fromStage, toStage, fromVersion) => mutate({
+      variables: {
+        blockId,
+        fromStage,
+        toStage,
+        fromVersion
+      }
+    });
+    return {
+      actions: {
+        ...actions,
+        handleUnpublishBlock
+      }
+    };
+  },
+  options: _ref2 => {
+    let {
+      areaId
+    } = _ref2;
+    return {
+      refetchQueries: [{
+        query: _readBlocksForAreaQuery.query,
+        variables: _readBlocksForAreaQuery.config.options({
+          areaId
+        }).variables
+      }]
+    };
+  }
+};
+var _default = exports["default"] = (0, _hoc.graphql)(mutation, config);
+
+/***/ }),
+
+/***/ "./client/src/state/history/readOneBlockQuery.js":
+/*!*******************************************************!*\
+  !*** ./client/src/state/history/readOneBlockQuery.js ***!
+  \*******************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.query = exports["default"] = exports.config = void 0;
+var _hoc = __webpack_require__(/*! @apollo/client/react/hoc */ "@apollo/client/react/hoc");
+var _graphqlTag = _interopRequireDefault(__webpack_require__(/*! graphql-tag */ "graphql-tag"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const query = exports.query = (0, _graphqlTag.default)`
 query ReadHistoryViewerBlock ($block_id: ID!, $limit: Int!, $offset: Int!) {
   readOneBlock(
     versioning: {
@@ -95,7 +3208,80 @@ query ReadHistoryViewerBlock ($block_id: ID!, $limit: Int!, $offset: Int!) {
     }
   }
 }
-`,i=t.config={options(e){let{recordId:t,limit:n,page:r}=e;return{variables:{limit:n,offset:((r||1)-1)*n,block_id:t}}},props(e){let{data:{error:t,refetch:n,readOneBlock:r,loading:o},ownProps:{actions:a={versions:{}},limit:l,recordId:i}}=e;const d=r||null;return{loading:o||!d,versions:d,graphQLErrors:t&&t.graphQLErrors&&t.graphQLErrors.map((e=>e.message)),actions:{...a,versions:{...d,goToPage(e){n({offset:((e||1)-1)*l,limit:l,block_id:i})}}}}}};t.default=(0,o.graphql)(l,i)},9650: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};const l=t.mutation=a.default`
+`;
+const config = exports.config = {
+  options(_ref) {
+    let {
+      recordId,
+      limit,
+      page
+    } = _ref;
+    return {
+      variables: {
+        limit,
+        offset: ((page || 1) - 1) * limit,
+        block_id: recordId
+      }
+    };
+  },
+  props(_ref2) {
+    let {
+      data: {
+        error,
+        refetch,
+        readOneBlock,
+        loading: networkLoading
+      },
+      ownProps: {
+        actions = {
+          versions: {}
+        },
+        limit,
+        recordId
+      }
+    } = _ref2;
+    const versions = readOneBlock || null;
+    const errors = error && error.graphQLErrors && error.graphQLErrors.map(graphQLError => graphQLError.message);
+    return {
+      loading: networkLoading || !versions,
+      versions,
+      graphQLErrors: errors,
+      actions: {
+        ...actions,
+        versions: {
+          ...versions,
+          goToPage(page) {
+            refetch({
+              offset: ((page || 1) - 1) * limit,
+              limit,
+              block_id: recordId
+            });
+          }
+        }
+      }
+    };
+  }
+};
+var _default = exports["default"] = (0, _hoc.graphql)(query, config);
+
+/***/ }),
+
+/***/ "./client/src/state/history/revertToBlockVersionMutation.js":
+/*!******************************************************************!*\
+  !*** ./client/src/state/history/revertToBlockVersionMutation.js ***!
+  \******************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.mutation = exports["default"] = exports.config = void 0;
+var _hoc = __webpack_require__(/*! @apollo/client/react/hoc */ "@apollo/client/react/hoc");
+var _graphqlTag = _interopRequireDefault(__webpack_require__(/*! graphql-tag */ "graphql-tag"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const mutation = exports.mutation = (0, _graphqlTag.default)`
 mutation revertBlockToVersion($id:ID!, $fromStage:VersionedStage!, $toStage:VersionedStage!, $fromVersion:Int!) {
   copyBlockToStage(input: {
     id: $id
@@ -106,4 +3292,774 @@ 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<r;o++)if(!e(t[o],n[o]))return!1;return!0}}(d),p=1===s?(n=f,{get:function(e){return a&&n(a.key,e)?a.value:r},put:function(e,t){a={key:e,value:t}},getEntries:function(){return a?[a]:[]},clear:function(){a=void 0}}):function(e,t){var n=[];function o(e){var o=n.findIndex((function(n){return t(e,n.key)}));if(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<t;r++)n[r-1]=arguments[r];return function(){for(var t=arguments.length,r=new Array(t),o=0;o<t;o++)r[o]=arguments[o];var a,l=0,i={memoizeOptions:void 0},d=r.pop();if("object"==typeof d&&(i=d,d=r.pop()),"function"!=typeof d)throw new Error("createSelector expects an output function after the inputs, but received: ["+typeof d+"]");var u=i.memoizeOptions,s=void 0===u?n:u,c=Array.isArray(s)?s:[s],f=function(e){var t=Array.isArray(e[0])?e[0]:e;if(!t.every((function(e){return"function"==typeof e}))){var n=t.map((function(e){return"function"==typeof e?"function "+(e.name||"unnamed")+"()":typeof e})).join(", ");throw new Error("createSelector expects all input-selectors to be functions, but received the following types: ["+n+"]")}return t}(r),p=e.apply(void 0,[function(){return l++,d.apply(null,arguments)}].concat(c)),m=e((function(){for(var e=[],t=f.length,n=0;n<t;n++)e.push(f[n].apply(null,arguments));return a=p.apply(null,e)}));return Object.assign(m,{resultFunc:d,memoizedResultFunc:p,dependencies:f,lastResult:function(){return a},recomputations:function(){return l},resetRecomputations:function(){return l=0}}),m}}var i=l(a),d=function(e,t){if(void 0===t&&(t=i),"object"!=typeof e)throw new Error("createStructuredSelector expects first argument to be an object where each property is a selector, instead received a "+typeof e);var n=Object.keys(e),r=t(n.map((function(t){return e[t]})),(function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return t.reduce((function(e,t,r){return e[n[r]]=t,e}),{})}));return r}},3732:function(e){e.exports=ApolloClientReactHoc},5159:function(e){e.exports=Backend},4510:function(e){e.exports=Config},1042:function(e){e.exports=FieldHolder},8238:function(e){e.exports=FormBuilderLoader},1306:function(e){e.exports=GraphQLTag},6648:function(e){e.exports=Injector},7086:function(e){e.exports=PropTypes},7363:function(e){e.exports=React},2084:function(e){e.exports=ReactDND},1211:function(e){e.exports=ReactDNDHtml5Backend},394:function(e){e.exports=ReactDom},9691:function(e){e.exports=ReactDomClient},1624:function(e){e.exports=ReactRedux},8127:function(e){e.exports=Reactstrap},2827:function(e){e.exports=Redux},5762:function(e){e.exports=ReduxForm},1789:function(e){e.exports=TabsActions},7820:function(e){e.exports=classnames},720:function(e){e.exports=getFormState},4754:function(e){e.exports=i18n},5311:function(e){e.exports=jQuery},7431:function(e){e.exports=withDragDropContext}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var a=t[r]={exports:{}};return e[r](a,a.exports,n),a.exports}n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n(7489),n(7274)}();
\ No newline at end of file
+`;
+const config = exports.config = {
+  props: _ref => {
+    let {
+      mutate,
+      ownProps: {
+        actions
+      }
+    } = _ref;
+    const revertToVersion = (id, fromVersion, fromStage, toStage) => mutate({
+      variables: {
+        id,
+        fromVersion,
+        fromStage,
+        toStage
+      }
+    });
+    return {
+      actions: {
+        ...actions,
+        revertToVersion
+      }
+    };
+  },
+  options: {
+    refetchQueries: ['ReadHistoryViewerBlock']
+  }
+};
+var _default = exports["default"] = (0, _hoc.graphql)(mutation, config);
+
+/***/ }),
+
+/***/ "./client/src/types/elementType.js":
+/*!*****************************************!*\
+  !*** ./client/src/types/elementType.js ***!
+  \*****************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.elementType = void 0;
+var _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ "prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const elementType = exports.elementType = _propTypes.default.shape({
+  id: _propTypes.default.string.isRequired,
+  title: _propTypes.default.string,
+  blockSchema: _propTypes.default.object,
+  inlineEditable: _propTypes.default.bool,
+  published: _propTypes.default.bool,
+  liveVersion: _propTypes.default.bool,
+  version: _propTypes.default.number
+});
+
+/***/ }),
+
+/***/ "./client/src/types/elementTypeType.js":
+/*!*********************************************!*\
+  !*** ./client/src/types/elementTypeType.js ***!
+  \*********************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.elementTypeType = void 0;
+var _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ "prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const elementTypeType = exports.elementTypeType = _propTypes.default.shape({
+  name: _propTypes.default.string,
+  title: _propTypes.default.string,
+  icon: _propTypes.default.string,
+  inlineEditable: _propTypes.default.bool,
+  editTabs: _propTypes.default.arrayOf(_propTypes.default.shape({
+    title: _propTypes.default.string,
+    name: _propTypes.default.string
+  })),
+  config: _propTypes.default.object
+});
+
+/***/ }),
+
+/***/ "./node_modules/memoize-one/dist/memoize-one.esm.js":
+/*!**********************************************************!*\
+  !*** ./node_modules/memoize-one/dist/memoize-one.esm.js ***!
+  \**********************************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": function() { return /* binding */ memoizeOne; }
+/* harmony export */ });
+var safeIsNaN = Number.isNaN ||
+    function ponyfill(value) {
+        return typeof value === 'number' && value !== value;
+    };
+function isEqual(first, second) {
+    if (first === second) {
+        return true;
+    }
+    if (safeIsNaN(first) && safeIsNaN(second)) {
+        return true;
+    }
+    return false;
+}
+function areInputsEqual(newInputs, lastInputs) {
+    if (newInputs.length !== lastInputs.length) {
+        return false;
+    }
+    for (var i = 0; i < newInputs.length; i++) {
+        if (!isEqual(newInputs[i], lastInputs[i])) {
+            return false;
+        }
+    }
+    return true;
+}
+
+function memoizeOne(resultFn, isEqual) {
+    if (isEqual === void 0) { isEqual = areInputsEqual; }
+    var cache = null;
+    function memoized() {
+        var newArgs = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            newArgs[_i] = arguments[_i];
+        }
+        if (cache && cache.lastThis === this && isEqual(newArgs, cache.lastArgs)) {
+            return cache.lastResult;
+        }
+        var lastResult = resultFn.apply(this, newArgs);
+        cache = {
+            lastResult: lastResult,
+            lastArgs: newArgs,
+            lastThis: this,
+        };
+        return lastResult;
+    }
+    memoized.clear = function clear() {
+        cache = null;
+    };
+    return memoized;
+}
+
+
+
+
+/***/ }),
+
+/***/ "./node_modules/reselect/es/defaultMemoize.js":
+/*!****************************************************!*\
+  !*** ./node_modules/reselect/es/defaultMemoize.js ***!
+  \****************************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   createCacheKeyComparator: function() { return /* binding */ createCacheKeyComparator; },
+/* harmony export */   defaultEqualityCheck: function() { return /* binding */ defaultEqualityCheck; },
+/* harmony export */   defaultMemoize: function() { return /* binding */ defaultMemoize; }
+/* harmony export */ });
+// Cache implementation based on Erik Rasmussen's `lru-memoize`:
+// https://github.com/erikras/lru-memoize
+var NOT_FOUND = 'NOT_FOUND';
+
+function createSingletonCache(equals) {
+  var entry;
+  return {
+    get: function get(key) {
+      if (entry && equals(entry.key, key)) {
+        return entry.value;
+      }
+
+      return NOT_FOUND;
+    },
+    put: function put(key, value) {
+      entry = {
+        key: key,
+        value: value
+      };
+    },
+    getEntries: function getEntries() {
+      return entry ? [entry] : [];
+    },
+    clear: function clear() {
+      entry = undefined;
+    }
+  };
+}
+
+function createLruCache(maxSize, equals) {
+  var entries = [];
+
+  function get(key) {
+    var cacheIndex = entries.findIndex(function (entry) {
+      return equals(key, entry.key);
+    }); // We found a cached entry
+
+    if (cacheIndex > -1) {
+      var entry = entries[cacheIndex]; // Cached entry not at top of cache, move it to the top
+
+      if (cacheIndex > 0) {
+        entries.splice(cacheIndex, 1);
+        entries.unshift(entry);
+      }
+
+      return entry.value;
+    } // No entry found in cache, return sentinel
+
+
+    return NOT_FOUND;
+  }
+
+  function put(key, value) {
+    if (get(key) === NOT_FOUND) {
+      // TODO Is unshift slow?
+      entries.unshift({
+        key: key,
+        value: value
+      });
+
+      if (entries.length > maxSize) {
+        entries.pop();
+      }
+    }
+  }
+
+  function getEntries() {
+    return entries;
+  }
+
+  function clear() {
+    entries = [];
+  }
+
+  return {
+    get: get,
+    put: put,
+    getEntries: getEntries,
+    clear: clear
+  };
+}
+
+var defaultEqualityCheck = function defaultEqualityCheck(a, b) {
+  return a === b;
+};
+function createCacheKeyComparator(equalityCheck) {
+  return function areArgumentsShallowlyEqual(prev, next) {
+    if (prev === null || next === null || prev.length !== next.length) {
+      return false;
+    } // Do this in a for loop (and not a `forEach` or an `every`) so we can determine equality as fast as possible.
+
+
+    var length = prev.length;
+
+    for (var i = 0; i < length; i++) {
+      if (!equalityCheck(prev[i], next[i])) {
+        return false;
+      }
+    }
+
+    return true;
+  };
+}
+// defaultMemoize now supports a configurable cache size with LRU behavior,
+// and optional comparison of the result value with existing values
+function defaultMemoize(func, equalityCheckOrOptions) {
+  var providedOptions = typeof equalityCheckOrOptions === 'object' ? equalityCheckOrOptions : {
+    equalityCheck: equalityCheckOrOptions
+  };
+  var _providedOptions$equa = providedOptions.equalityCheck,
+      equalityCheck = _providedOptions$equa === void 0 ? defaultEqualityCheck : _providedOptions$equa,
+      _providedOptions$maxS = providedOptions.maxSize,
+      maxSize = _providedOptions$maxS === void 0 ? 1 : _providedOptions$maxS,
+      resultEqualityCheck = providedOptions.resultEqualityCheck;
+  var comparator = createCacheKeyComparator(equalityCheck);
+  var cache = maxSize === 1 ? createSingletonCache(comparator) : createLruCache(maxSize, comparator); // we reference arguments instead of spreading them for performance reasons
+
+  function memoized() {
+    var value = cache.get(arguments);
+
+    if (value === NOT_FOUND) {
+      // @ts-ignore
+      value = func.apply(null, arguments);
+
+      if (resultEqualityCheck) {
+        var entries = cache.getEntries();
+        var matchingEntry = entries.find(function (entry) {
+          return resultEqualityCheck(entry.value, value);
+        });
+
+        if (matchingEntry) {
+          value = matchingEntry.value;
+        }
+      }
+
+      cache.put(arguments, value);
+    }
+
+    return value;
+  }
+
+  memoized.clearCache = function () {
+    return cache.clear();
+  };
+
+  return memoized;
+}
+
+/***/ }),
+
+/***/ "./node_modules/reselect/es/index.js":
+/*!*******************************************!*\
+  !*** ./node_modules/reselect/es/index.js ***!
+  \*******************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   createSelector: function() { return /* binding */ createSelector; },
+/* harmony export */   createSelectorCreator: function() { return /* binding */ createSelectorCreator; },
+/* harmony export */   createStructuredSelector: function() { return /* binding */ createStructuredSelector; },
+/* harmony export */   defaultEqualityCheck: function() { return /* reexport safe */ _defaultMemoize__WEBPACK_IMPORTED_MODULE_0__.defaultEqualityCheck; },
+/* harmony export */   defaultMemoize: function() { return /* reexport safe */ _defaultMemoize__WEBPACK_IMPORTED_MODULE_0__.defaultMemoize; }
+/* harmony export */ });
+/* harmony import */ var _defaultMemoize__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./defaultMemoize */ "./node_modules/reselect/es/defaultMemoize.js");
+
+
+
+function getDependencies(funcs) {
+  var dependencies = Array.isArray(funcs[0]) ? funcs[0] : funcs;
+
+  if (!dependencies.every(function (dep) {
+    return typeof dep === 'function';
+  })) {
+    var dependencyTypes = dependencies.map(function (dep) {
+      return typeof dep === 'function' ? "function " + (dep.name || 'unnamed') + "()" : typeof dep;
+    }).join(', ');
+    throw new Error("createSelector expects all input-selectors to be functions, but received the following types: [" + dependencyTypes + "]");
+  }
+
+  return dependencies;
+}
+
+function createSelectorCreator(memoize) {
+  for (var _len = arguments.length, memoizeOptionsFromArgs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    memoizeOptionsFromArgs[_key - 1] = arguments[_key];
+  }
+
+  var createSelector = function createSelector() {
+    for (var _len2 = arguments.length, funcs = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      funcs[_key2] = arguments[_key2];
+    }
+
+    var _recomputations = 0;
+
+    var _lastResult; // Due to the intricacies of rest params, we can't do an optional arg after `...funcs`.
+    // So, start by declaring the default value here.
+    // (And yes, the words 'memoize' and 'options' appear too many times in this next sequence.)
+
+
+    var directlyPassedOptions = {
+      memoizeOptions: undefined
+    }; // Normally, the result func or "output selector" is the last arg
+
+    var resultFunc = funcs.pop(); // If the result func is actually an _object_, assume it's our options object
+
+    if (typeof resultFunc === 'object') {
+      directlyPassedOptions = resultFunc; // and pop the real result func off
+
+      resultFunc = funcs.pop();
+    }
+
+    if (typeof resultFunc !== 'function') {
+      throw new Error("createSelector expects an output function after the inputs, but received: [" + typeof resultFunc + "]");
+    } // Determine which set of options we're using. Prefer options passed directly,
+    // but fall back to options given to createSelectorCreator.
+
+
+    var _directlyPassedOption = directlyPassedOptions,
+        _directlyPassedOption2 = _directlyPassedOption.memoizeOptions,
+        memoizeOptions = _directlyPassedOption2 === void 0 ? memoizeOptionsFromArgs : _directlyPassedOption2; // Simplifying assumption: it's unlikely that the first options arg of the provided memoizer
+    // is an array. In most libs I've looked at, it's an equality function or options object.
+    // Based on that, if `memoizeOptions` _is_ an array, we assume it's a full
+    // user-provided array of options. Otherwise, it must be just the _first_ arg, and so
+    // we wrap it in an array so we can apply it.
+
+    var finalMemoizeOptions = Array.isArray(memoizeOptions) ? memoizeOptions : [memoizeOptions];
+    var dependencies = getDependencies(funcs);
+    var memoizedResultFunc = memoize.apply(void 0, [function recomputationWrapper() {
+      _recomputations++; // apply arguments instead of spreading for performance.
+
+      return resultFunc.apply(null, arguments);
+    }].concat(finalMemoizeOptions)); // If a selector is called with the exact same arguments we don't need to traverse our dependencies again.
+
+    var selector = memoize(function dependenciesChecker() {
+      var params = [];
+      var length = dependencies.length;
+
+      for (var i = 0; i < length; i++) {
+        // apply arguments instead of spreading and mutate a local list of params for performance.
+        // @ts-ignore
+        params.push(dependencies[i].apply(null, arguments));
+      } // apply arguments instead of spreading for performance.
+
+
+      _lastResult = memoizedResultFunc.apply(null, params);
+      return _lastResult;
+    });
+    Object.assign(selector, {
+      resultFunc: resultFunc,
+      memoizedResultFunc: memoizedResultFunc,
+      dependencies: dependencies,
+      lastResult: function lastResult() {
+        return _lastResult;
+      },
+      recomputations: function recomputations() {
+        return _recomputations;
+      },
+      resetRecomputations: function resetRecomputations() {
+        return _recomputations = 0;
+      }
+    });
+    return selector;
+  }; // @ts-ignore
+
+
+  return createSelector;
+}
+var createSelector = /* #__PURE__ */createSelectorCreator(_defaultMemoize__WEBPACK_IMPORTED_MODULE_0__.defaultMemoize);
+// Manual definition of state and output arguments
+var createStructuredSelector = function createStructuredSelector(selectors, selectorCreator) {
+  if (selectorCreator === void 0) {
+    selectorCreator = createSelector;
+  }
+
+  if (typeof selectors !== 'object') {
+    throw new Error('createStructuredSelector expects first argument to be an object ' + ("where each property is a selector, instead received a " + typeof selectors));
+  }
+
+  var objectKeys = Object.keys(selectors);
+  var resultSelector = selectorCreator( // @ts-ignore
+  objectKeys.map(function (key) {
+    return selectors[key];
+  }), function () {
+    for (var _len3 = arguments.length, values = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+      values[_key3] = arguments[_key3];
+    }
+
+    return values.reduce(function (composition, value, index) {
+      composition[objectKeys[index]] = value;
+      return composition;
+    }, {});
+  });
+  return resultSelector;
+};
+
+/***/ }),
+
+/***/ "@apollo/client/react/hoc":
+/*!***************************************!*\
+  !*** external "ApolloClientReactHoc" ***!
+  \***************************************/
+/***/ (function(module) {
+
+module.exports = ApolloClientReactHoc;
+
+/***/ }),
+
+/***/ "lib/Config":
+/*!*************************!*\
+  !*** external "Config" ***!
+  \*************************/
+/***/ (function(module) {
+
+module.exports = Config;
+
+/***/ }),
+
+/***/ "components/FieldHolder/FieldHolder":
+/*!******************************!*\
+  !*** external "FieldHolder" ***!
+  \******************************/
+/***/ (function(module) {
+
+module.exports = FieldHolder;
+
+/***/ }),
+
+/***/ "containers/FormBuilderLoader/FormBuilderLoader":
+/*!************************************!*\
+  !*** external "FormBuilderLoader" ***!
+  \************************************/
+/***/ (function(module) {
+
+module.exports = FormBuilderLoader;
+
+/***/ }),
+
+/***/ "graphql-tag":
+/*!*****************************!*\
+  !*** external "GraphQLTag" ***!
+  \*****************************/
+/***/ (function(module) {
+
+module.exports = GraphQLTag;
+
+/***/ }),
+
+/***/ "lib/Injector":
+/*!***************************!*\
+  !*** external "Injector" ***!
+  \***************************/
+/***/ (function(module) {
+
+module.exports = Injector;
+
+/***/ }),
+
+/***/ "prop-types":
+/*!****************************!*\
+  !*** external "PropTypes" ***!
+  \****************************/
+/***/ (function(module) {
+
+module.exports = PropTypes;
+
+/***/ }),
+
+/***/ "react":
+/*!************************!*\
+  !*** external "React" ***!
+  \************************/
+/***/ (function(module) {
+
+module.exports = React;
+
+/***/ }),
+
+/***/ "react-dnd":
+/*!***************************!*\
+  !*** external "ReactDND" ***!
+  \***************************/
+/***/ (function(module) {
+
+module.exports = ReactDND;
+
+/***/ }),
+
+/***/ "react-dnd-html5-backend":
+/*!***************************************!*\
+  !*** external "ReactDNDHtml5Backend" ***!
+  \***************************************/
+/***/ (function(module) {
+
+module.exports = ReactDNDHtml5Backend;
+
+/***/ }),
+
+/***/ "react-dom":
+/*!***************************!*\
+  !*** external "ReactDom" ***!
+  \***************************/
+/***/ (function(module) {
+
+module.exports = ReactDom;
+
+/***/ }),
+
+/***/ "react-dom/client":
+/*!*********************************!*\
+  !*** external "ReactDomClient" ***!
+  \*********************************/
+/***/ (function(module) {
+
+module.exports = ReactDomClient;
+
+/***/ }),
+
+/***/ "react-redux":
+/*!*****************************!*\
+  !*** external "ReactRedux" ***!
+  \*****************************/
+/***/ (function(module) {
+
+module.exports = ReactRedux;
+
+/***/ }),
+
+/***/ "reactstrap":
+/*!*****************************!*\
+  !*** external "Reactstrap" ***!
+  \*****************************/
+/***/ (function(module) {
+
+module.exports = Reactstrap;
+
+/***/ }),
+
+/***/ "redux":
+/*!************************!*\
+  !*** external "Redux" ***!
+  \************************/
+/***/ (function(module) {
+
+module.exports = Redux;
+
+/***/ }),
+
+/***/ "redux-form":
+/*!****************************!*\
+  !*** external "ReduxForm" ***!
+  \****************************/
+/***/ (function(module) {
+
+module.exports = ReduxForm;
+
+/***/ }),
+
+/***/ "state/tabs/TabsActions":
+/*!******************************!*\
+  !*** external "TabsActions" ***!
+  \******************************/
+/***/ (function(module) {
+
+module.exports = TabsActions;
+
+/***/ }),
+
+/***/ "state/toasts/ToastsActions":
+/*!********************************!*\
+  !*** external "ToastsActions" ***!
+  \********************************/
+/***/ (function(module) {
+
+module.exports = ToastsActions;
+
+/***/ }),
+
+/***/ "state/unsavedForms/UnsavedFormsActions":
+/*!**************************************!*\
+  !*** external "UnsavedFormsActions" ***!
+  \**************************************/
+/***/ (function(module) {
+
+module.exports = UnsavedFormsActions;
+
+/***/ }),
+
+/***/ "classnames":
+/*!*****************************!*\
+  !*** external "classnames" ***!
+  \*****************************/
+/***/ (function(module) {
+
+module.exports = classnames;
+
+/***/ }),
+
+/***/ "lib/getFormState":
+/*!*******************************!*\
+  !*** external "getFormState" ***!
+  \*******************************/
+/***/ (function(module) {
+
+module.exports = getFormState;
+
+/***/ }),
+
+/***/ "i18n":
+/*!***********************!*\
+  !*** external "i18n" ***!
+  \***********************/
+/***/ (function(module) {
+
+module.exports = i18n;
+
+/***/ }),
+
+/***/ "jquery":
+/*!*************************!*\
+  !*** external "jQuery" ***!
+  \*************************/
+/***/ (function(module) {
+
+module.exports = jQuery;
+
+/***/ }),
+
+/***/ "lib/withDragDropContext":
+/*!**************************************!*\
+  !*** external "withDragDropContext" ***!
+  \**************************************/
+/***/ (function(module) {
+
+module.exports = withDragDropContext;
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	!function() {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = function(exports, definition) {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	}();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	!function() {
+/******/ 		__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
+/******/ 	}();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	!function() {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = function(exports) {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	}();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+!function() {
+/*!**************************************!*\
+  !*** ./client/src/bundles/bundle.js ***!
+  \**************************************/
+
+
+__webpack_require__(/*! legacy/ElementEditor/entwine */ "./client/src/legacy/ElementEditor/entwine.js");
+__webpack_require__(/*! boot */ "./client/src/boot/index.js");
+}();
+/******/ })()
+;
+//# sourceMappingURL=bundle.js.map
\ No newline at end of file
diff --git a/client/dist/styles/bundle.css b/client/dist/styles/bundle.css
index cd8451c1..e999870d 100644
--- a/client/dist/styles/bundle.css
+++ b/client/dist/styles/bundle.css
@@ -1 +1,498 @@
-.elemental-edit{display:flex;color:inherit}.elemental-edit:hover,.elemental-edit:focus{text-decoration:none;color:inherit}.elemental-editor .col-EditorPreview{padding-left:0}.elemental-preview__detail{display:inline-block;margin-left:.76925rem;margin-top:1px}.elemental-preview__detail h3{font-weight:400;line-height:26px;margin:0;-webkit-font-smoothing:antialiased}.elemental-preview__detail p{align-items:center;display:flex;margin-bottom:0;margin-top:6px}.elemental-preview__detail small{color:#566b8d;font-size:13px}.elemental-preview__thumbnail-image{margin-right:.76925rem}.elemental-preview__thumbnail-image img{border-radius:.192rem}.elemental-preview__thumbnail-image--placeholder{border-radius:0;height:36px;margin-left:-4px}.elemental-preview__icon{color:#566b8d;display:inline-block;flex-direction:row;font-size:2.3rem;width:28px;vertical-align:top;margin-top:-1px}.ss-gridfield-orderable.elemental-editor .col-reorder .handle{opacity:.5;padding:22px 0 0 0}.ss-gridfield-orderable.elemental-editor .col-reorder .handle .icon{font-size:1.3em}.elemental-editor .ss-gridfield-item:hover .handle{opacity:1}.elemental-editor .grid-field__table{margin-bottom:12px}@media(max-width: 991.98px){.elemental-editor .grid-field__table .col-EditorPreview{display:table-cell}}.elemental-report__grid-field .element-editor-header__version-state{bottom:9px;left:14px}.element-editor .form-group:nth-child(1n){display:block}@media(min-width: 992px){.element-editor .form-group:nth-child(1n) .form__field-label,.element-editor .form-group:nth-child(1n) .form__field-holder{flex:0 0 83.33333333%;max-width:83.33333333%;margin-left:0}}.elemental-block__history-tab{margin-top:-1.5385rem}.cms-edit-form .fieldgroup.elemental-area__element--historic{margin-left:0;margin-right:0}.cms-edit-form .fieldgroup.elemental-area__element--historic.form-group{border-top:1px solid #dbe0e9}.cms-edit-form .fieldgroup.elemental-area__element--historic .form__field-holder{flex:0 0 100%;max-width:100%}.elemental-preview{line-height:20px}.elemental-preview--historic{margin-bottom:1rem}.elemental-preview__link{float:right;margin-top:4px}.elemental-preview__link:hover{text-decoration:none}.elemental-preview__link:hover .elemental-preview__link-text{text-decoration:underline}.elemental-preview__link-caret{display:block;float:right;margin-top:-2px;margin-left:2px}div.elemental-area__element--historic.elemental-area__element--historic-inner{background:rgba(0,0,0,0);border:0;padding-left:0;padding-right:0;padding-top:1.5385rem}.elemental-area--read-only{border-bottom:1px solid #dbe0e9;margin-bottom:2.30775rem;margin-top:2.30775rem;margin-left:-1.5385rem;margin-right:-1.5385rem}.history-viewer__version-detail fieldset{overflow:visible}.elemental-report__grid-field .ss-gridfield-item td:first-child{width:1px}.elemental-report__grid-field .col-Icon{font-size:1.5rem}.elemental-report__grid-field .element-item--draft,.elemental-report__grid-field .element-item--modified{bottom:8px;left:14px;height:6px;width:6px}.textcheckboxgroup .input-group-append .form-check-input{margin-left:0;position:relative}.element-editor .action-menu .dropdown-item.disabled{font-style:italic;pointer-events:initial;cursor:not-allowed;color:#6f84a7}.elemental-editor__add-new-block-control{width:20rem}.elemental-editor__add-new-block-control a{line-height:1.85em}.element-editor__element{border-bottom:1px solid #dbe0e9;color:inherit;cursor:pointer;min-height:8rem;padding:.9231rem 1.5385rem 1.8462rem}.element-editor__element:focus,.element-editor__element:hover{box-shadow:0 2px 5px 0 rgba(0,0,0,.1),0 2px 10px 0 rgba(0,0,0,.1);outline-width:0}.element-editor__element:hover .element-editor-header__drag-handle{display:block}.element-editor__element--broken{cursor:default}.element-editor__element--dragging{opacity:.3;cursor:grabbing;cursor:-webkit-grabbing}.elemental-editor-list{background-color:#fff;border-top:1px solid #dbe0e9;margin-left:-1.5385rem;margin-right:-1.5385rem;min-height:calc(8rem + 1px);position:relative;margin-bottom:1.5385rem}.elemental-editor-list--empty{border-bottom:1px solid #dbe0e9;display:flex;align-items:center;justify-content:center}.element-editor-editform{margin-top:.76925rem;cursor:auto;margin-bottom:-1rem}.element-editor-editform .mce-tinymce{box-sizing:border-box}.element-editor-editform__form{width:100%}.element-editor-editform .element-editor-editform__form .form-group .form__field-holder{flex:1 0 100%;max-width:900px}.element-editor-header{display:flex;align-items:center;justify-content:space-between}.element-editor-header__title{font-size:15px;font-weight:400;margin:0 0 0 .76925rem;-webkit-font-smoothing:antialiased;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.element-editor-header__title--none{font-style:italic;color:#6f84a7}.element-editor-header__info,.element-editor-header__actions{align-items:center;display:flex;flex-grow:1}.element-editor-header__info{max-width:calc(100% - 60px)}.element-editor-header__info .badge{color:#cf3f00;background-color:#fff7f0;padding:2px 3px 2px 4px;margin-left:.5rem}.element-editor-header__actions{justify-content:flex-end}.element-editor-header__actions-toggle{padding-top:3px;padding-bottom:3px}.element-editor-header__icon-container{margin-left:-2px;color:#566b8d;font-size:2.154rem;height:28px;line-height:1.5rem}.element-editor-header__icon-container--broken{color:#da273b}.element-editor-header__expand{font-size:1.1rem;margin-left:3px;width:unset}.element-editor-header__version-state{border:1px solid #cf3f00;border-radius:100%;bottom:6px;box-shadow:0 0 1px .5px #fff;display:block;height:8px;left:22px;position:relative;width:8px;z-index:1}.element-editor-header__version-state--draft{background-color:#ff7f22}.element-editor-header__version-state--modified{background-color:#fff7f0}.element-editor-header__drag-handle{display:none;position:absolute;left:5px;cursor:grab;cursor:-webkit-grab}.element-editor-header--simple .element-editor-header__drag-handle{display:block}.element-editor-header--simple .element-editor-header__info{width:460px}.element-editor-header .dropdown-item.active{cursor:default}.element-editor-summary{display:flex;margin-top:.9231rem;margin-left:36px;align-items:center;min-height:2em}.element-editor-summary__thumbnail-image{border-radius:.1536rem;height:36px;margin:-.6154rem .9231rem -.6154rem 0}.element-editor-summary__content{color:#566b8d;line-height:1.3;margin-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.element-editor-summary__content--broken{overflow:visible;white-space:normal}.element-editor__toolbar{margin-bottom:1rem}.element-editor__hover-bar{height:0;display:flex;width:100%;position:relative;align-items:center}.element-editor__hover-bar-area{background-color:rgba(0,0,0,0);min-height:1.8462rem;width:100%;margin:0;padding:0;border:none;outline:none;transition:all ease .2s;position:relative}.element-editor__hover-bar-area:hover,.element-editor__hover-bar-area:focus,.element-editor__hover-bar-area--focus{outline:none}.element-editor__hover-bar-area:hover .element-editor__hover-bar-area-inner,.element-editor__hover-bar-area:focus .element-editor__hover-bar-area-inner,.element-editor__hover-bar-area--focus .element-editor__hover-bar-area-inner{margin:0 20px}.element-editor__hover-bar-area:hover .element-editor__hover-bar-line,.element-editor__hover-bar-area:focus .element-editor__hover-bar-line,.element-editor__hover-bar-area--focus .element-editor__hover-bar-line{opacity:1;border-radius:5px;max-height:5px}.element-editor__hover-bar-area:hover .element-editor__hover-bar-line:before,.element-editor__hover-bar-area:focus .element-editor__hover-bar-line:before,.element-editor__hover-bar-area--focus .element-editor__hover-bar-line:before{transform:translateY(calc(3px - 50%)) scale(1)}.element-editor__hover-bar-area-inner{margin:0 0;display:block;position:relative;transition:all ease .2s}.element-editor__hover-bar-line{background-color:#005ae1;transition:all ease .2s;opacity:0;align-self:center;width:100%;border:0;position:absolute;display:flex;justify-content:flex-end;padding:0;top:50%;transform:translateY(-66%);max-height:0;border-radius:0}.element-editor__hover-bar-line:before{font-size:1.5rem;background-image:radial-gradient(#fff 50%, transparent 50%);position:relative;z-index:2;margin-right:50%;right:-0.5em;display:block;height:1em;transform:translateY(-35%);transform:translateY(calc(-1px - 50%)) scale(0);transition:all ease .2s;color:#005ae1}.elemental-editor-drag-indicator{height:3px;margin:-2px 0 -1px 0;background-color:#29abe2}.elemental-editor-drag-indicator__ball{position:relative;height:7px;width:7px;top:-2px;left:-3px;border-radius:3.5px;background-color:#29abe2}.element-editor--dragging{cursor:grabbing}.element-editor-drag-preview{top:0;left:0;position:fixed;pointer-events:none;z-index:100;background-color:#fff;border:1px solid #ced5e1;padding:.9231rem 1.5385rem;box-shadow:0 2px 5px 0 rgba(0,0,0,.1),0 2px 10px 0 rgba(0,0,0,.1)}.text-checkbox-group-field .form-check{display:inline;padding-left:0;margin-bottom:0}.text-checkbox-group-field--read-only{display:flex}.text-checkbox-group-field--read-only :first-child{flex:1}.text-checkbox-group-field--read-only .show-title{font-style:italic}
+/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[0].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[4]!./client/src/styles/bundle.scss ***!
+  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************/
+.elemental-edit {
+  display: flex;
+  color: inherit;
+}
+.elemental-edit:hover, .elemental-edit:focus {
+  text-decoration: none;
+  color: inherit;
+}
+
+.elemental-editor .col-EditorPreview {
+  padding-left: 0;
+}
+
+.elemental-preview__detail {
+  display: inline-block;
+  margin-left: 0.76925rem;
+  margin-top: 1px;
+}
+.elemental-preview__detail h3 {
+  font-weight: 400;
+  line-height: 26px;
+  margin: 0;
+  -webkit-font-smoothing: antialiased;
+}
+.elemental-preview__detail p {
+  align-items: center;
+  display: flex;
+  margin-bottom: 0;
+  margin-top: 6px;
+}
+.elemental-preview__detail small {
+  color: #566b8d;
+  font-size: 13px;
+}
+
+.elemental-preview__thumbnail-image {
+  margin-right: 0.76925rem;
+}
+.elemental-preview__thumbnail-image img {
+  border-radius: 0.192rem;
+}
+
+.elemental-preview__thumbnail-image--placeholder {
+  border-radius: 0;
+  height: 36px;
+  margin-left: -4px;
+}
+
+.elemental-preview__icon {
+  color: #566b8d;
+  display: inline-block;
+  flex-direction: row;
+  font-size: 2.3rem;
+  width: 28px;
+  vertical-align: top;
+  margin-top: -1px;
+}
+
+.ss-gridfield-orderable.elemental-editor .col-reorder .handle {
+  opacity: 0.5;
+  padding: 22px 0 0 0;
+}
+.ss-gridfield-orderable.elemental-editor .col-reorder .handle .icon {
+  font-size: 1.3em;
+}
+
+.elemental-editor .ss-gridfield-item:hover .handle {
+  opacity: 1;
+}
+.elemental-editor .grid-field__table {
+  margin-bottom: 12px;
+}
+@media (max-width: 991.98px) {
+  .elemental-editor .grid-field__table .col-EditorPreview {
+    display: table-cell;
+  }
+}
+
+.elemental-report__grid-field .element-editor-header__version-state {
+  bottom: 9px;
+  left: 14px;
+}
+
+.element-editor .form-group:nth-child(1n) {
+  display: block;
+}
+@media (min-width: 992px) {
+  .element-editor .form-group:nth-child(1n) .form__field-label,
+  .element-editor .form-group:nth-child(1n) .form__field-holder {
+    flex: 0 0 83.33333333%;
+    max-width: 83.33333333%;
+    margin-left: 0;
+  }
+}
+
+.elemental-block__history-tab {
+  margin-top: -1.5385rem;
+}
+
+.cms-edit-form .fieldgroup.elemental-area__element--historic {
+  margin-left: 0;
+  margin-right: 0;
+}
+.cms-edit-form .fieldgroup.elemental-area__element--historic.form-group {
+  border-top: 1px solid #dbe0e9;
+}
+.cms-edit-form .fieldgroup.elemental-area__element--historic .form__field-holder {
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+
+.elemental-preview {
+  line-height: 20px;
+}
+
+.elemental-preview--historic {
+  margin-bottom: 1rem;
+}
+
+.elemental-preview__link {
+  float: right;
+  margin-top: 4px;
+}
+.elemental-preview__link:hover {
+  text-decoration: none;
+}
+.elemental-preview__link:hover .elemental-preview__link-text {
+  text-decoration: underline;
+}
+.elemental-preview__link-caret {
+  display: block;
+  float: right;
+  margin-top: -2px;
+  margin-left: 2px;
+}
+
+div.elemental-area__element--historic.elemental-area__element--historic-inner {
+  background: transparent;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 1.5385rem;
+}
+
+.elemental-area--read-only {
+  border-bottom: 1px solid #dbe0e9;
+  margin-bottom: 2.30775rem;
+  margin-top: 2.30775rem;
+  margin-left: -1.5385rem;
+  margin-right: -1.5385rem;
+}
+
+.history-viewer__version-detail fieldset {
+  overflow: visible;
+}
+
+.elemental-report__grid-field .ss-gridfield-item td:first-child {
+  width: 1px;
+}
+
+.elemental-report__grid-field .col-Icon {
+  font-size: 1.5rem;
+}
+
+.elemental-report__grid-field .element-item--draft,
+.elemental-report__grid-field .element-item--modified {
+  bottom: 8px;
+  left: 14px;
+  height: 6px;
+  width: 6px;
+}
+
+.textcheckboxgroup .input-group-append .form-check-input {
+  margin-left: 0;
+  position: relative;
+}
+
+.element-editor .action-menu .dropdown-item.disabled {
+  font-style: italic;
+  pointer-events: initial;
+  cursor: not-allowed;
+  color: #6f84a7;
+}
+
+.elemental-editor__add-new-block-control {
+  width: 20rem;
+}
+.elemental-editor__add-new-block-control a {
+  line-height: 1.85em;
+}
+
+.element-editor__element {
+  border-bottom: 1px solid #dbe0e9;
+  color: inherit;
+  cursor: pointer;
+  min-height: 8rem;
+  padding: 0.9231rem 1.5385rem 1.8462rem;
+}
+.element-editor__element:focus, .element-editor__element:hover {
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1), 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+  outline-width: 0;
+}
+.element-editor__element:hover .element-editor-header__drag-handle {
+  display: block;
+}
+.element-editor__element--broken {
+  cursor: default;
+}
+.element-editor__element--dragging {
+  opacity: 0.3;
+  cursor: grabbing;
+  cursor: -webkit-grabbing;
+}
+
+.elemental-editor-list {
+  background-color: #fff;
+  border-top: 1px solid #dbe0e9;
+  margin-left: -1.5385rem;
+  margin-right: -1.5385rem;
+  min-height: calc(8rem + 1px);
+  position: relative;
+  margin-bottom: 1.5385rem;
+}
+.elemental-editor-list--empty {
+  border-bottom: 1px solid #dbe0e9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.element-editor-editform {
+  margin-top: 0.76925rem;
+  cursor: auto;
+  margin-bottom: -1rem;
+}
+.element-editor-editform .mce-tinymce {
+  box-sizing: border-box;
+}
+.element-editor-editform__form {
+  width: 100%;
+}
+.element-editor-editform .element-editor-editform__form .form-group .form__field-holder {
+  flex: 1 0 100%;
+  max-width: 900px;
+}
+.element-editor-editform--rendered-not-visible {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+}
+.element-editor-editform .btn--hidden {
+  display: none;
+}
+.element-editor-editform .text-checkbox-group-field {
+  align-items: flex-start;
+}
+.element-editor-editform .text-checkbox-group-field .form-group {
+  margin-bottom: 0;
+  flex: auto;
+}
+
+.element-editor-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.element-editor-header__title {
+  font-size: 15px;
+  font-weight: 400;
+  margin: 0 0 0 0.76925rem;
+  -webkit-font-smoothing: antialiased;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.element-editor-header__title--none {
+  font-style: italic;
+  color: #6f84a7;
+}
+.element-editor-header__info, .element-editor-header__actions {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+}
+.element-editor-header__info {
+  max-width: calc(100% - 60px);
+}
+.element-editor-header__info .badge {
+  color: #cf3f00;
+  background-color: #fff7f0;
+  padding: 2px 3px 2px 4px;
+  margin-left: 0.5rem;
+}
+.element-editor-header__actions {
+  justify-content: flex-end;
+}
+.element-editor-header__actions-toggle {
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+.element-editor-header__icon-container {
+  margin-left: -2px;
+  color: #566b8d;
+  font-size: 2.154rem;
+  height: 28px;
+  line-height: 1.5rem;
+}
+.element-editor-header__icon-container--broken {
+  color: #da273b;
+}
+.element-editor-header__expand {
+  font-size: 1.1rem;
+  margin-left: 3px;
+  width: unset;
+}
+.element-editor-header__version-state {
+  border: 1px solid #cf3f00;
+  border-radius: 100%;
+  bottom: 6px;
+  box-shadow: 0 0 1px 0.5px #fff;
+  display: block;
+  height: 8px;
+  left: 22px;
+  position: relative;
+  width: 8px;
+  z-index: 1;
+}
+.element-editor-header__version-state--draft {
+  background-color: #ff7f22;
+}
+.element-editor-header__version-state--modified {
+  background-color: #fff7f0;
+}
+.element-editor-header__drag-handle {
+  display: none;
+  position: absolute;
+  left: 5px;
+  cursor: grab;
+  cursor: -webkit-grab;
+}
+.element-editor-header--simple .element-editor-header__drag-handle {
+  display: block;
+}
+.element-editor-header--simple .element-editor-header__info {
+  width: 460px;
+}
+.element-editor-header .dropdown-item.active {
+  cursor: default;
+}
+
+.element-editor-summary {
+  display: flex;
+  margin-top: 0.9231rem;
+  margin-left: 36px;
+  align-items: center;
+  min-height: 2em;
+}
+.element-editor-summary__thumbnail-image {
+  border-radius: 0.1536rem;
+  height: 36px;
+  margin: -0.6154rem 0.9231rem -0.6154rem 0;
+}
+.element-editor-summary__content {
+  color: #566b8d;
+  line-height: 1.3;
+  margin-bottom: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.element-editor-summary__content--broken {
+  overflow: visible;
+  white-space: normal;
+}
+
+.element-editor__toolbar {
+  margin-bottom: 1rem;
+}
+
+.element-editor__hover-bar {
+  height: 0;
+  display: flex;
+  width: 100%;
+  position: relative;
+  align-items: center;
+}
+.element-editor__hover-bar-area {
+  background-color: transparent;
+  min-height: 1.8462rem;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  transition: all ease 0.2s;
+  position: relative;
+}
+.element-editor__hover-bar-area:hover, .element-editor__hover-bar-area:focus, .element-editor__hover-bar-area--focus {
+  outline: none;
+}
+.element-editor__hover-bar-area:hover .element-editor__hover-bar-area-inner, .element-editor__hover-bar-area:focus .element-editor__hover-bar-area-inner, .element-editor__hover-bar-area--focus .element-editor__hover-bar-area-inner {
+  margin: 0 20px;
+}
+.element-editor__hover-bar-area:hover .element-editor__hover-bar-line, .element-editor__hover-bar-area:focus .element-editor__hover-bar-line, .element-editor__hover-bar-area--focus .element-editor__hover-bar-line {
+  opacity: 1;
+  border-radius: 5px;
+  max-height: 5px;
+}
+.element-editor__hover-bar-area:hover .element-editor__hover-bar-line:before, .element-editor__hover-bar-area:focus .element-editor__hover-bar-line:before, .element-editor__hover-bar-area--focus .element-editor__hover-bar-line:before {
+  transform: translateY(calc(3px - 50%)) scale(1);
+}
+.element-editor__hover-bar-area-inner {
+  margin: 0 0;
+  display: block;
+  position: relative;
+  transition: all ease 0.2s;
+}
+.element-editor__hover-bar-line {
+  background-color: #005ae1;
+  transition: all ease 0.2s;
+  opacity: 0;
+  align-self: center;
+  width: 100%;
+  border: 0;
+  position: absolute;
+  display: flex;
+  justify-content: flex-end;
+  padding: 0;
+  top: 50%;
+  transform: translateY(-66%);
+  max-height: 0;
+  border-radius: 0;
+}
+.element-editor__hover-bar-line:before {
+  font-size: 1.5rem;
+  background-image: radial-gradient(#fff 50%, transparent 50%);
+  position: relative;
+  z-index: 2;
+  margin-right: 50%;
+  right: -0.5em;
+  display: block;
+  height: 1em;
+  transform: translateY(-35%);
+  transform: translateY(calc(-1px - 50%)) scale(0);
+  transition: all ease 0.2s;
+  color: #005ae1;
+}
+
+.elemental-editor-drag-indicator {
+  height: 3px;
+  margin: -2px 0 -1px 0;
+  background-color: #29abe2;
+}
+.elemental-editor-drag-indicator__ball {
+  position: relative;
+  height: 7px;
+  width: 7px;
+  top: -2px;
+  left: -3px;
+  border-radius: 3.5px;
+  background-color: #29abe2;
+}
+
+.element-editor--dragging {
+  cursor: grabbing;
+}
+
+.element-editor-drag-preview {
+  top: 0;
+  left: 0;
+  position: fixed;
+  pointer-events: none;
+  z-index: 100;
+  background-color: #fff;
+  border: 1px solid #ced5e1;
+  padding: 0.9231rem 1.5385rem;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1), 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+}
+
+.text-checkbox-group-field .form-check {
+  display: inline;
+  padding-left: 0;
+  margin-bottom: 0;
+}
+.text-checkbox-group-field--read-only {
+  display: flex;
+}
+.text-checkbox-group-field--read-only :first-child {
+  flex: 1;
+}
+.text-checkbox-group-field--read-only .show-title {
+  font-style: italic;
+}
+
+/*# sourceMappingURL=bundle.css.map*/
\ No newline at end of file
diff --git a/client/src/boot/registerTransforms.js b/client/src/boot/registerTransforms.js
index e42c9b4e..75cfd145 100644
--- a/client/src/boot/registerTransforms.js
+++ b/client/src/boot/registerTransforms.js
@@ -6,8 +6,8 @@ import readBlocksForAreaQuery from 'state/editor/readBlocksForAreaQuery';
 import addElementToArea from 'state/editor/addElementMutation';
 import ArchiveAction from 'components/ElementActions/ArchiveAction';
 import DuplicateAction from 'components/ElementActions/DuplicateAction';
-import PublishAction from 'components/ElementActions/PublishAction';
 import SaveAction from 'components/ElementActions/SaveAction';
+import PublishAction from 'components/ElementActions/PublishAction';
 import UnpublishAction from 'components/ElementActions/UnpublishAction';
 
 export default () => {
diff --git a/client/src/components/ElementActions/PublishAction.js b/client/src/components/ElementActions/PublishAction.js
index 60cdf4d7..4a5f5917 100644
--- a/client/src/components/ElementActions/PublishAction.js
+++ b/client/src/components/ElementActions/PublishAction.js
@@ -1,14 +1,10 @@
 /* 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';
+import { ElementContext } from 'components/ElementEditor/Element';
 
 /**
  * Show a toast message reporting whether publication of Element was successful
@@ -37,85 +33,31 @@ const reportPublicationStatus = (type, title, success) => {
   });
 };
 
-/**
- * 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;
-    });
-};
-
 /**
  * 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 (
-      <MenuComponent {...props} />
-    );
-  }
-
-  const { element, formDirty } = props;
+  const {
+    formDirty,
+    onPublishButtonClick,
+    doPublishElement,
+    onAfterPublish,
+    formHasRendered,
+  } = useContext(ElementContext);
+
+  const { element, type, actions } = props;
+
+  const publishElement = () => {
+    // handlePublishBlock is a graphql mutation defined in publishBlockMutation.js
+    actions.handlePublishBlock(element.id)
+      .then(() => reportPublicationStatus(type.title, element.title, true))
+      .catch(() => reportPublicationStatus(type.title, element.title, false));
+    onAfterPublish();
+  };
 
   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 +74,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 (
+      <MenuComponent {...props} />
+    );
+  }
+
   return (
     <MenuComponent {...props}>
       {props.children}
@@ -140,36 +95,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..24525214 100644
--- a/client/src/components/ElementActions/SaveAction.js
+++ b/client/src/components/ElementActions/SaveAction.js
@@ -1,86 +1,28 @@
-import React from 'react';
+import React, { useContext, useEffect } from 'react';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 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 (
-      <MenuComponent {...props} />
-    );
-  }
+  const {
+    doSaveElement,
+    onSaveButtonClick,
+    onAfterSave,
+    formHasRendered,
+    submitForm
+  } = 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 = {
@@ -89,6 +31,20 @@ const SaveAction = (MenuComponent) => (props) => {
     onClick: handleClick,
   };
 
+  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 (
+      <MenuComponent {...props} />
+    );
+  }
+
   return (
     <MenuComponent {...props}>
       {props.children}
@@ -113,16 +69,6 @@ function mapStateToProps(state, ownProps) {
   };
 }
 
-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 compose(connect(mapStateToProps), SaveAction);
diff --git a/client/src/components/ElementEditor/Content.js b/client/src/components/ElementEditor/Content.js
index 451fc140..4573d36a 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,
+      onFormSchemaFetchResponse,
+      onFormSchemaSubmitResponse,
+      ensureFormRendered,
+      formHasRendered,
     } = this.props;
 
+    const extraClass = {
+      'element-editor-editform--collapsed': !previewExpanded,
+      'element-editor-editform--rendered-not-visible': !previewExpanded && (ensureFormRendered || formHasRendered),
+    };
+
     return (
       <div className="element-editor-content">
         {!previewExpanded &&
@@ -35,15 +44,17 @@ class Content extends PureComponent {
             broken={broken}
           />
         }
-        {previewExpanded &&
+        {(previewExpanded || ensureFormRendered || formHasRendered) &&
           // Show inline editable fields
           <InlineEditFormComponent
-            extraClass={{ 'element-editor-editform--collapsed': !previewExpanded }}
+            extraClass={extraClass}
             onClick={(event) => event.stopPropagation()}
             elementId={id}
             activeTab={activeTab}
             onFormInit={onFormInit}
             handleLoadingError={handleLoadingError}
+            onFormSchemaFetchResponse={onFormSchemaFetchResponse}
+            onFormSchemaSubmitResponse={onFormSchemaSubmitResponse}
           />
         }
         {formDirty &&
@@ -69,6 +80,10 @@ Content.propTypes = {
   InlineEditFormComponent: PropTypes.elementType,
   handleLoadingError: PropTypes.func,
   broken: PropTypes.bool,
+  onFormSchemaFetchResponse: PropTypes.func,
+  onFormSchemaSubmitResponse: 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..9984ac83 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 } 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,32 @@ 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.handleFormSchemaFetchResponse = this.handleFormSchemaFetchResponse.bind(this);
+    this.handleFormSchemaSubmitResponse = this.handleFormSchemaSubmitResponse.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.state = {
       previewExpanded: false,
       initialTab: '',
       loadingError: false,
       childRenderingError: false,
+      newTitle: '',
+      justSavedElement: false,
+      justClickedPublishButton: false,
+      doSaveElement: false,
+      doPublishElement: false,
+      ensureFormRendered: false,
+      formHasRendered: false,
+      doSetFormChanged: false,
     };
   }
 
@@ -55,6 +75,34 @@ class Element extends Component {
     }
   }
 
+  componentDidUpdate() {
+    if (this.state.justSavedElement) {
+      this.setState({
+        justSavedElement: false,
+      });
+      if (!this.state.doPublishElement) {
+        this.showSavedElementToast();
+      }
+      // 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();
+    }
+    if (this.state.doSetFormChanged) {
+      this.setState({
+        doSetFormChanged: false,
+      });
+      this.props.setFormChanged();
+    }
+  }
+
+  showSavedElementToast() {
+    const message = i18n.inject(
+      i18n._t('ElementSaveAction.SUCCESS_NOTIFICATION', 'Saved \'{title}\' successfully'),
+      { title: this.state.newTitle }
+    );
+    this.props.actions.toasts.success(message);
+  }
+
   /**
    * Returns the applicable versioned state class names for the element
    *
@@ -215,6 +263,80 @@ class Element extends Component {
     }
   }
 
+  handleSaveButtonClick() {
+    this.setState({
+      ensureFormRendered: true,
+      doSaveElement: true,
+    });
+  }
+
+  handlePublishButtonClick() {
+    this.setState({
+      justClickedPublishButton: true,
+      ensureFormRendered: true,
+    });
+    if (this.props.formDirty) {
+      // Save the element first before publishing, which may trigger validation errors
+      this.props.submitForm();
+    } else {
+      // Just publish the element straight away without saving first
+      this.setState({
+        doPublishElement: true,
+      });
+    }
+  }
+
+  handleAfterSave() {
+    this.setState({
+      doSaveElement: false,
+    });
+  }
+
+  handleAfterPublish() {
+    this.setState({
+      doPublishElement: false,
+    });
+  }
+
+  handleFormSchemaFetchResponse() {
+    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/<ItemID>
+    // Instead of the one used by the POST submission i.e.
+    // admin/elemental-area/elementForm/<LinkID>
+    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.setFormChanged() on the next render rather than straight away
+      // or it will get unset by core code
+      this.setState({
+        doSetFormChanged: true,
+      });
+      return;
+    }
+    this.setState({
+      justSavedElement: true,
+      newTitle: title,
+    });
+    if (this.state.justClickedPublishButton) {
+      this.setState({
+        justClickedPublishButton: false,
+        doPublishElement: true,
+      });
+    }
+  }
+
   render() {
     const {
       element,
@@ -229,6 +351,8 @@ class Element extends Component {
       isDragging,
       isOver,
       onDragEnd,
+      submitForm,
+      formDirty,
     } = this.props;
 
     const { childRenderingError, previewExpanded } = this.state;
@@ -248,6 +372,19 @@ class Element extends Component {
       this.getVersionedStateClassName()
     );
 
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    const providerValue = {
+      submitForm,
+      formDirty,
+      onSaveButtonClick: this.handleSaveButtonClick,
+      onPublishButtonClick: this.handlePublishButtonClick,
+      doSaveElement: this.state.doSaveElement,
+      doPublishElement: this.state.doPublishElement,
+      onAfterSave: this.handleAfterSave,
+      onAfterPublish: this.handleAfterPublish,
+      formHasRendered: this.state.formHasRendered,
+    };
+
     const content = connectDropTarget(<div
       className={elementClassNames}
       onClick={this.handleExpand}
@@ -257,40 +394,46 @@ class Element extends Component {
       title={this.getLinkTitle(type)}
       key={element.id}
     >
-      <HeaderComponent
-        element={element}
-        type={type}
-        areaId={areaId}
-        expandable={type.inlineEditable}
-        link={link}
-        previewExpanded={previewExpanded && !childRenderingError}
-        handleEditTabsClick={this.handleTabClick}
-        activeTab={activeTab}
-        disableTooltip={isDragging}
-        onDragEnd={onDragEnd}
-      />
-
-      {
-        !childRenderingError &&
-        <ContentComponent
-          id={element.id}
-          fileUrl={element.blockSchema.fileURL}
-          fileTitle={element.blockSchema.fileTitle}
-          content={this.getSummary(element, type)}
-          previewExpanded={previewExpanded && !isDragging}
+      <ElementContext.Provider value={providerValue}>
+        <HeaderComponent
+          element={element}
+          type={type}
+          areaId={areaId}
+          expandable={type.inlineEditable}
+          link={link}
+          previewExpanded={previewExpanded && !childRenderingError}
+          handleEditTabsClick={this.handleTabClick}
           activeTab={activeTab}
-          onFormInit={() => this.updateFormTab(activeTab)}
-          handleLoadingError={this.handleLoadingError}
-          broken={type.broken}
+          disableTooltip={isDragging}
+          onDragEnd={onDragEnd}
         />
-      }
 
-      {
-        childRenderingError &&
-        <div className="alert alert-danger mt-2">
-          {i18n._t('ElementalElement.CHILD_RENDERING_ERROR', 'Something went wrong with this block. Please try saving and refreshing the CMS.')}
-        </div>
-      }
+        {
+          !childRenderingError &&
+          <ContentComponent
+            id={element.id}
+            fileUrl={element.blockSchema.fileURL}
+            fileTitle={element.blockSchema.fileTitle}
+            content={this.getSummary(element, type)}
+            previewExpanded={previewExpanded && !isDragging}
+            ensureFormRendered={this.state.ensureFormRendered}
+            formHasRendered={this.state.formHasRendered}
+            activeTab={activeTab}
+            onFormInit={() => this.updateFormTab(activeTab)}
+            handleLoadingError={this.handleLoadingError}
+            broken={type.broken}
+            onFormSchemaFetchResponse={this.handleFormSchemaFetchResponse}
+            onFormSchemaSubmitResponse={this.handleFormSchemaSubmitResponse}
+          />
+        }
+
+        {
+          childRenderingError &&
+          <div className="alert alert-danger mt-2">
+            {i18n._t('ElementalElement.CHILD_RENDERING_ERROR', 'Something went wrong with this block. Please try saving and refreshing the CMS.')}
+          </div>
+        }
+      </ElementContext.Provider>
     </div>);
 
     if (!previewExpanded) {
@@ -305,7 +448,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 +460,7 @@ function mapStateToProps(state, ownProps) {
 
   const tabSetName = tabSet && tabSet.id;
   const uniqueFieldId = `element.${elementName}__${tabSetName}`;
+  const formDirty = state.unsavedForms.find((unsaved) => unsaved.name === `element.${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 +472,7 @@ function mapStateToProps(state, ownProps) {
   return {
     tabSetName,
     activeTab,
+    formDirty,
   };
 }
 
@@ -339,6 +483,18 @@ 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}`));
+    },
+    setFormChanged() {
+      // 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}`));
+    },
+    actions: {
+      toasts: bindActionCreators(toastsActions, dispatch),
+    },
   };
 }
 
diff --git a/client/src/components/ElementEditor/InlineEditForm.js b/client/src/components/ElementEditor/InlineEditForm.js
index bfe75e37..25df7509 100644
--- a/client/src/components/ElementEditor/InlineEditForm.js
+++ b/client/src/components/ElementEditor/InlineEditForm.js
@@ -13,6 +13,8 @@ class InlineEditForm extends PureComponent {
     super(props);
 
     this.handleLoadingError = this.handleLoadingError.bind(this);
+    this.handleLoadingSuccess = this.handleLoadingSuccess.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
 
     this.state = {
       loadingError: null
@@ -41,6 +43,21 @@ 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));
+  }
+
+  handleLoadingSuccess() {
+    this.props.onFormSchemaFetchResponse();
+  }
+
   render() {
     const { elementId, extraClass, onClick, onFormInit, formHasState } = this.props;
     const { loadingError } = this.state;
@@ -48,17 +65,18 @@ class InlineEditForm extends PureComponent {
     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 <button type="submit>" submits this <form>, rather than the <form> for the parent page EditForm
+    const formTag = 'form';
+
     const formProps = {
-      formTag: 'div',
+      formTag,
       schemaUrl,
       identifier: 'element',
       refetchSchemaOnMount: !formHasState,
       onLoadingError: this.handleLoadingError,
-      // This null submit handler is used to prevent the FormBuilder form from submitting when any nested
-      // FormBuilder forms, such as LinkField v4+, are themselves submitted
-      // This FormBuilder form is not submitted in the traditional sense i.e. there is no rendered submit button
-      // instead the inline save button will do its own submission in SaveAction.js
-      onSubmit: () => new Promise(resolve => resolve),
+      onSubmit: this.handleSubmit,
+      onLoadingSuccess: this.handleLoadingSuccess,
     };
 
     if (loadingError) {
@@ -82,6 +100,8 @@ InlineEditForm.propTypes = {
   onClick: PropTypes.func,
   elementId: PropTypes.string,
   handleLoadingError: PropTypes.func,
+  onFormSchemaFetchResponse: PropTypes.func,
+  onFormSchemaSubmitResponse: PropTypes.func,
 };
 
 function mapStateToProps(state, ownProps) {
diff --git a/client/src/components/ElementEditor/InlineEditForm.scss b/client/src/components/ElementEditor/InlineEditForm.scss
index fd7970d4..5e6ffd4d 100644
--- a/client/src/components/ElementEditor/InlineEditForm.scss
+++ b/client/src/components/ElementEditor/InlineEditForm.scss
@@ -25,4 +25,25 @@
       max-width: 900px;
     }
   }
+
+  // Render the form off the screen so that it's not visible
+  // Note that using display:nome will mean the form is not rendered at all and cannot be submitted
+  &--rendered-not-visible {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+  }
+
+  .btn--hidden {
+    display: none;
+  }
+
+  .text-checkbox-group-field {
+    align-items: flex-start;
+  }
+
+  .text-checkbox-group-field .form-group {
+    margin-bottom: 0;
+    flex: auto;
+  }
 }
diff --git a/client/src/components/TextCheckboxGroupField/TextCheckboxGroupField.js b/client/src/components/TextCheckboxGroupField/TextCheckboxGroupField.js
index c8db0573..0d2a1667 100644
--- a/client/src/components/TextCheckboxGroupField/TextCheckboxGroupField.js
+++ b/client/src/components/TextCheckboxGroupField/TextCheckboxGroupField.js
@@ -8,10 +8,13 @@ const TextCheckboxGroupField = (props) => {
   // Map out the children and clone to set the "noHolder" prop on them.
   const childrenWithProps = React.Children.toArray(
     React.Children.map(children, (child, index) => {
-      const additionalProps = { noHolder: true };
+      const additionalProps = {};
 
       if (index === 0) {
         additionalProps.id = props.id;
+        additionalProps.title = null;
+      } else if (index === 1) {
+        additionalProps.noHolder = true;
       }
 
       return React.cloneElement(child, additionalProps);
diff --git a/src/Controllers/ElementalAreaController.php b/src/Controllers/ElementalAreaController.php
index 283b6b89..0a74624f 100644
--- a/src/Controllers/ElementalAreaController.php
+++ b/src/Controllers/ElementalAreaController.php
@@ -5,16 +5,19 @@
 use DNADesign\Elemental\Forms\EditFormFactory;
 use DNADesign\Elemental\Models\BaseElement;
 use DNADesign\Elemental\Services\ElementTypeRegistry;
-use Exception;
-use Psr\Log\LoggerInterface;
 use SilverStripe\CMS\Controllers\CMSMain;
 use SilverStripe\Control\HTTPRequest;
 use SilverStripe\Control\HTTPResponse;
 use SilverStripe\Control\HTTPResponse_Exception;
-use SilverStripe\Core\Convert;
 use SilverStripe\Core\Injector\Injector;
 use SilverStripe\Forms\Form;
+use SilverStripe\ORM\ValidationException;
 use SilverStripe\Security\SecurityToken;
+use SilverStripe\ORM\ValidationResult;
+use SilverStripe\Forms\FormAction;
+use SilverStripe\Forms\FieldList;
+use SilverStripe\Control\Controller;
+use SilverStripe\Dev\Deprecation;
 
 /**
  * Controller for "ElementalArea" - handles loading and saving of in-line edit forms in an elemental area in admin
@@ -28,18 +31,23 @@ class ElementalAreaController extends CMSMain
     private static $ignore_menuitem = true;
 
     private static $url_handlers = [
-        // API access points with structured data
+        'elementForm/$ItemID' => 'elementForm',
         'POST api/saveForm/$ID' => 'apiSaveForm',
         '$FormName/field/$FieldName' => 'formAction',
     ];
 
     private static $allowed_actions = [
         'elementForm',
-        'schema',
         'apiSaveForm',
         'formAction',
     ];
 
+    /**
+     * @var bool Whether the element has been updated during the current request
+     * Remove this if the apiSaveForm() method has been deleted
+     */
+    private $elementUpdated = false;
+
     public function getClientConfig()
     {
         $clientConfig = parent::getClientConfig();
@@ -48,7 +56,7 @@ public function getClientConfig()
             'saveUrl' => $this->Link('api/saveForm'),
             'saveMethod' => 'post',
             'payloadFormat' => 'json',
-            'formNameTemplate' => sprintf(static::FORM_NAME_TEMPLATE ?? '', '{id}'),
+            'formNameTemplate' => sprintf(static::FORM_NAME_TEMPLATE, '{id}'),
         ];
 
         // Configuration that is available per element type
@@ -58,119 +66,240 @@ public function getClientConfig()
     }
 
     /**
-     * @param HTTPRequest|null $request
-     * @return Form
-     * @throws HTTPResponse_Exception
+     * Used for both:
+     * - GET requests to get the FormSchema via `getElementForm()` called from LeftAndMain::schema()
+     * - POST Requests to save the Form. Will be handled by to FormRequestHandler::httpSubmission()
+     * /admin/linkfield/elementForm/<ElementID>
      */
-    public function elementForm(HTTPRequest $request = null)
+    public function elementForm(HTTPRequest $request = null): Form
     {
-        // Get ID either from posted back value, or url parameter
-        if (!$request) {
-            $this->jsonError(400);
-            return null;
-        }
+        // TODO deprecate method param
+        $request = $request ?: $this->getRequest();
+
+        // Respect previous behaviour
+        // This should just be removed later and so that it 404's when BaseElement::get()->byID($id) fails
         $id = $request->param('ID');
         if (!$id) {
             $this->jsonError(400);
             return null;
         }
-        return $this->getElementForm($id) ?: $this->jsonError(404);
+
+        // Note that new elements are added via graphql, so only using this endpoint for editing existing
+        $element = BaseElement::get()->byID($id);
+        if (!$element) {
+            $this->jsonError(404);
+        }
+        if (!$element->canView()) {
+            $this->jsonError(403);
+        }
+        return $this->createElementForm($element);
     }
 
-    /**
-     * @param int $elementID
-     * @return Form|null Returns null if no element exists for the given ID
-     */
-    public function getElementForm($elementID)
+    private function createElementForm(BaseElement $element): Form
     {
+        $id = $element->ID;
         $scaffolder = Injector::inst()->get(EditFormFactory::class);
-        $element = BaseElement::get()->byID($elementID);
-
-        if (!$element) {
-            return null;
-        }
 
         /** @var Form $form */
         $form = $scaffolder->getForm(
             $this,
-            sprintf(static::FORM_NAME_TEMPLATE ?? '', $elementID),
+            sprintf(static::FORM_NAME_TEMPLATE, $id),
             ['Record' => $element]
         );
 
+        $urlSegment = $this->config()->get('url_segment');
+        $form->setFormAction("admin/$urlSegment/elementForm/$id");
+
         if (!$element->canEdit()) {
             $form->makeReadonly();
         }
 
         $form->addExtraClass('element-editor-editform__form');
+        $form->addExtraClass('bypass-entwine');
+
+        // Add a save button to the form
+        // This button needs to be present for the save() method to be called
+        // It will be hidden with CSS via the btn--hidden class
+        $form->setActions(FieldList::create([
+            FormAction::create('save', 'Save')
+                ->addExtraClass('btn--hidden')
+        ]));
+
+        // Set the form request handler to return a FormSchema response during a POST request
+        // This will override the default FormRequestHandler::getAjaxErrorResponse() which isn't useful
+        $form->setValidationResponseCallback(function (ValidationResult $errors) use ($form, $id) {
+            $schemaId = Controller::join_links(
+                $this->Link('schema'),
+                $this->config()->get('url_segment'),
+                $id
+            );
+            return $this->getSchemaResponse($schemaId, $form, $errors);
+        });
 
         return $form;
     }
 
     /**
-     * Save an inline edit form for a block
+     * This method is called from LeftAndMain::schema()
+     * /admin/linkfield/schema/elementForm/<ElementID>
      *
-     * @param HTTPRequest $request
-     * @return HTTPResponse|null JSON encoded string or null if an exception is thrown
-     * @throws HTTPResponse_Exception
+     * @param int $elementID
+     * @return Form|null Returns null if no element exists for the given ID
      */
-    public function apiSaveForm(HTTPRequest $request)
+    public function getElementForm($elementID)
     {
-        // Validate required input data
-        if (!isset($this->urlParams['ID'])) {
-            $this->jsonError(400);
+        $element = BaseElement::get()->byID($elementID);
+        if (!$element) {
             return null;
         }
+        return $this->createElementForm($element);
+    }
 
-        $data = json_decode($request->getBody(), true);
-        if (empty($data)) {
+    /**
+     * Call model validation taking into account the namespaced fields
+     */
+    private function getElementValidationResult(
+        Form $form,
+        array $data,
+        BaseElement $element
+    ): ValidationResult {
+
+        // Remove the pseudo namespaces that were added by EditFormFactory
+        $dataWithoutNamespaces = $this->removeNamespacesFromFields($data, $element->ID);
+
+        // Create a seperate form because we're going to modify it
+        // if we simply updated $form it will mess up the FormSchema response, even if we `clone $form`
+        $formWithoutNamespaces = $this->createElementForm($element);
+
+        // Remove pseudo namespaces from fields so that something like RequiredFields('Title') works
+        foreach ($formWithoutNamespaces->Fields()->flattenFields() as $field) {
+            $rx = '#^PageElements_[0-9]+_#';
+            $namespacedName = $field->getName();
+            if (!preg_match($rx, $namespacedName)) {
+                continue;
+            }
+            $regularName = preg_replace($rx, '', $namespacedName);
+            // If there's an existing field with the same name, remove it
+            // EditFormFactory creates fields so that frontend validation works
+            // e.g. for element #2 there's a "Title" field and a "PageElements_2_Title" field
+            // The namespaced fields are what are POSTed in, so only keep those ones
+            if ($formWithoutNamespaces->Fields()->flattenFields()->fieldByName($regularName)) {
+                $formWithoutNamespaces->Fields()->removeByName($regularName);
+            }
+            // Update the name of the field to remove the namespace
+            $field->setName($regularName);
+        }
+        // Merge submitted data into the form
+        $formWithoutNamespaces->loadDataFrom($dataWithoutNamespaces);
+
+        // Update the element from from data
+        $element->updateFromFormData($dataWithoutNamespaces);
+
+        // Validate the element
+        $validationResult = $element->validate();
+
+        // Create a new ValidationResult with namespaced fields
+        $validationResultWithNameSpaces = ValidationResult::create();
+        foreach ($validationResult->getMessages() as $message) {
+            $validationResultWithNameSpaces->addFieldError(
+                sprintf(EditFormFactory::FIELD_NAMESPACE_TEMPLATE, $element->ID, $message['fieldName']),
+                $message['message'] ?? '',
+                $message['messageType'] ?? ValidationResult::TYPE_ERROR,
+                null,
+                $message['messageCast'] ?? ValidationResult::CAST_TEXT
+            );
+        }
+
+        return $validationResultWithNameSpaces;
+    }
+
+    /**
+     * Arrive here from FormRequestHandler::httpSubmission() during a POST request to
+     * /admin/linkfield/linkForm/<LinkID>
+     * The 'save' method is called because it is the FormAction set on the Form
+     */
+    public function save(array $data, Form $form): HTTPResponse
+    {
+        $request = $this->getRequest();
+
+        // Ensure a valid ID has been passed
+        $id = $request->param('ID');
+        if (!$id) {
+            $this->jsonError(400);
+        }
+        /** @var BaseElement $element */
+        $element = BaseElement::get()->byID($id);
+        if (!$element) {
             $this->jsonError(400);
-            return null;
         }
 
-        // Inject request body as request vars
-        foreach ($data as $key => $value) {
-            $request->offsetSet($key, $value);
+        // Ensure data has being POSTed
+        if (empty($data)) {
+            $this->jsonError(400);
         }
 
         // Check security token
         if (!SecurityToken::inst()->checkRequest($request)) {
             $this->jsonError(400);
-            return null;
         }
 
-        /** @var BaseElement $element */
-        $element = BaseElement::get()->byID($this->urlParams['ID']);
+        // Check permissions
         // Ensure the element can be edited by the current user
-        if (!$element || !$element->canEdit()) {
+        if (!$element->canEdit()) {
             $this->jsonError(403);
-            return null;
         }
 
-        // Remove the pseudo namespaces that were added by the form factory
-        $data = $this->removeNamespacesFromFields($data, $element->ID);
+        // DataObject validation
+        // thrown ValidationException will be caught in FormRequestHandler::httpSubmission()
+        // Note: Form (as opposed to DataObject) validate() is run in FormRequestHandler::httpSubmission()
+        $validationResult = $this->getElementValidationResult($form, $data, $element);
+        if (!$validationResult->isValid()) {
+            throw ValidationException::create($validationResult);
+        }
 
-        try {
-            $updated = false;
+        // Write the data object
+        if ($element->isChanged()) {
+            $element->write();
+            // Track changes so we can return to the client
+            // Remove this code if the apiSaveForm() method has been deleted
+            $this->elementUpdated = true;
+        }
 
-            $element->updateFromFormData($data);
-            // Check if anything will actually be changed before writing
-            if ($element->isChanged()) {
-                $element->write();
-                // Track changes so we can return to the client
-                $updated = true;
-            }
-        } catch (Exception $ex) {
-            Injector::inst()->get(LoggerInterface::class)->debug($ex->getMessage());
+        // Create a new Form because we remove namespaces from fields in getElementValidationResult()
+        $form = $this->createElementForm($element);
 
-            $this->jsonError(500);
-            return null;
-        }
+        // Create and send FormSchema JSON response
+        $schemaID = $form->FormAction();
+        $response = $this->getSchemaResponse($schemaID, $form, $validationResult);
+        return $response;
+    }
 
-        $body = json_encode([
+    /**
+     * Save an inline edit form for a block
+     *
+     * @param HTTPRequest $request
+     * @return HTTPResponse|null JSON encoded string or null if an exception is thrown
+     * @throws HTTPResponse_Exception
+     *
+     * @deprecated 5.3.0 Send a POST request to elementForm/$ItemID instead
+     */
+    public function apiSaveForm(HTTPRequest $request)
+    {
+        Deprecation::notice('5.3.0', 'Send a POST request to elementForm/$ItemID instead');
+        $data = $request->postVars();
+        $id = $request->param('ID');
+        $form = $this->getElementForm($id);
+        if (!$form) {
+            $this->jsonError(400);
+        }
+        // If the following fails validation, a FormSchema response will be returned to the frontend
+        // due to a ValidationException being thrown and then caught in core code
+        $this->save($data, $form);
+        // Send legacy response
+        return $this->jsonSuccess(200, [
             'status' => 'success',
-            'updated' => $updated,
+            'updated' => $this->elementUpdated,
         ]);
-        return HTTPResponse::create($body)->addHeader('Content-Type', 'application/json');
     }
 
     /**
@@ -186,7 +315,7 @@ public function formAction(HTTPRequest $request)
         $formName = $request->param('FormName');
 
         // Get the element ID from the form name
-        $id = substr($formName ?? '', strlen(sprintf(self::FORM_NAME_TEMPLATE ?? '', '')));
+        $id = substr($formName ?? '', strlen(sprintf(self::FORM_NAME_TEMPLATE, '')));
         $form = $this->getElementForm($id);
 
         $field = $form->getRequestHandler()->handleField($request);
@@ -204,7 +333,7 @@ public function formAction(HTTPRequest $request)
     public static function removeNamespacesFromFields(array $data, $elementID)
     {
         $output = [];
-        $template = sprintf(EditFormFactory::FIELD_NAMESPACE_TEMPLATE ?? '', $elementID, '');
+        $template = sprintf(EditFormFactory::FIELD_NAMESPACE_TEMPLATE, $elementID, '');
         foreach ($data as $key => $value) {
             // Only look at fields that match the namespace template
             if (substr($key ?? '', 0, strlen($template ?? '')) !== $template) {
diff --git a/src/Forms/EditFormFactory.php b/src/Forms/EditFormFactory.php
index c8579af7..610052cc 100644
--- a/src/Forms/EditFormFactory.php
+++ b/src/Forms/EditFormFactory.php
@@ -8,6 +8,8 @@
 use SilverStripe\Forms\DefaultFormFactory;
 use SilverStripe\Forms\FieldList;
 use SilverStripe\Forms\HTMLEditor\HTMLEditorField;
+use SilverStripe\ORM\DataObject;
+use SilverStripe\Forms\RequiredFields;
 
 class EditFormFactory extends DefaultFormFactory
 {
@@ -55,6 +57,32 @@ protected function getFormFields(RequestHandler $controller = null, $name, $cont
         return $fields;
     }
 
+    protected function getFormValidator(RequestHandler $controller = null, $name, $context = [])
+    {
+        $compositeValidator = parent::getFormValidator($controller, $name, $context);
+        if (!$compositeValidator) {
+            return null;
+        }
+        $id = $context['Record']->ID;
+        foreach ($compositeValidator->getValidators() as $validator) {
+            if (is_a($validator, RequiredFields::class)) {
+                $requiredFields = $validator->getRequired();
+                foreach ($requiredFields as $requiredField) {
+                    // Add more required fields with appendend field prefixes
+                    // this is done so that front end validation works, at least for RequiredFields
+                    // you'll end up with two sets of required fields:
+                    // - Title -- used for backend validation when inline saving an element
+                    // - PageElements_<ElementID>_Title -- used for frontend js validation onchange()
+                    // note that if a required field is "missing" from submitted data, this is not a
+                    // problem so it's OK to add extra fields here just for frontend validation
+                    $prefixedRequiredField = "PageElements_{$id}_$requiredField";
+                    $validator->addRequiredField($prefixedRequiredField);
+                }
+            }
+        }
+        return $compositeValidator;
+    }
+
     /**
      * Given a {@link FieldList}, give all fields a unique name so they can be used in the same context as
      * other elemental edit forms and the page (or other DataObject) that owns them.
@@ -71,7 +99,7 @@ protected function namespaceFields(FieldList $fields, array $context)
                 // Apply audo-detection of multi-upload before changing the name.
                 $field->setIsMultiUpload($field->getIsMultiUpload());
             }
-            $namespacedName = sprintf(self::FIELD_NAMESPACE_TEMPLATE ?? '', $elementID, $field->getName());
+            $namespacedName = sprintf(self::FIELD_NAMESPACE_TEMPLATE, $elementID, $field->getName());
             $field->setName($namespacedName);
         }
     }