react-movable-block-editor - npm Package Compare versions

Comparing version 0.1.13 to 0.1.14

dist/react-movable-block-editor.cjs.production.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var t=require("tslib"),r=require("react"),n=e(r),o=require("react-resizable"),a=require("lodash"),d=e(require("react-markdown")),i=require("react-color");function l(e,r){var n;return t.__assign({},e,(n={},n[r.id]=r,n))}function s(e,r){var n,o=e[r];if(!o)return e;if(o&&o.parentId){var a=e[o.parentId];if(a){var d=a.childrenIds.findIndex(function(e){return e===o.id});if(d>=0){var i=a.childrenIds.filter(function(e){return e!==o.id});e=l(e,t.__assign({},a,{childrenIds:i}))}}}return t.__assign({},e,(n={},n[r]=void 0,n))}function u(e,t,r){var n=e[t];if(!n)return!1;if(n.childrenIds.indexOf(r)>=0)return!0;for(var o=0,a=n.childrenIds;o<a.length;o++){var d=a[o],i=u(e,d,r);if(i)return!1}return!1}function c(e,r,n,o){if(!r)return e;if(u(e,r.id,n))return console.warn("node ",r.id," has ",n," as child, so cannot make it into",r.id,"'s parent"),e;if(r.id===n)return console.warn("Cannot place into self: ",{id:r.id,newParentId:n}),e;if(r&&r.parentId&&r.parentId!==n){var a=e[r.parentId];if(a){var d=a.childrenIds.filter(function(e){return e!==r.id});e=l(e,t.__assign({},a,{childrenIds:d}))}}var i=e[n];if(i){d=p(i.childrenIds,r.id,o);e=l(e,t.__assign({},i,{childrenIds:d}))}return l(e,t.__assign({},r,{parentId:n}))}function p(e,r,n){if(void 0===n&&(n={}),r===n.beforeItemId||r===n.afterItemId)return console.warn("Cannot place relative to self: ",t.__assign({itemId:r},n)),e;e=e.filter(function(e){return e!==r});var o=n.beforeItemId,a=n.afterItemId,d=-1;if(o?d=e.findIndex(function(e){return e===o}):a&&(d=e.findIndex(function(e){return e===a})+1),d>=0){var i=e.slice();return i.splice(d,0,r),i}return e.concat([r])}var h=require("lodash").cloneDeep;function f(e,r){return r?t.__assign({},r,{value:h(r.value),childrenIds:r.childrenIds.slice(),children:r.childrenIds.map(function(t){return f(e,e[t])})}):r}function g(e){var r=e.byId,n=(e||{copiedNode:null}).copiedNode;if(!n)return e;n=h(n);var o=v(r,n).byId;if(n.parentId){var a=r[n.parentId];if(a)return t.__assign({},e,{byId:c(o,n,n.parentId,{afterItemId:a.childrenIds[a.childrenIds.length-1]})})}return e}function v(e,r){var n;r.id=m(e,r.type);var o=r.children;if(r.children=void 0,e=t.__assign({},e,(n={},n[r.id]=r,n)),o)for(var a=0,d=0,i=o;d<i.length;d++){var l=i[d];l.parentId=r.id;var s=v(e,l),u=s.byId,c=s.newId;r.childrenIds[a]=c,e=u,++a}return{byId:e,newId:r.id}}function m(e,t){void 0===t&&(t="node");for(var r=Object.keys(e).length;e[r];)r++;return t+"_"+r}function y(e,r){var n=e.byId,o=m(n),a=t.__assign({},n[o],r);return t.__assign({},e,{byId:l(n,a)})}function I(e,r,n){var o=e.byId,a=t.__assign({},o[r],n);return t.__assign({},e,{byId:l(o,a)})}function b(e,r){var n=e.byId,o=e.rootNodeId,a=e.focusedNodeId;return o===r?(alert("Cannot destroy root node"),t.__assign({},e,{byId:n,focusedNodeId:a})):t.__assign({},e,{byId:s(n,r),focusedNodeId:a===r?null:a})}function C(e,r,n,o){if(void 0===o&&(o={}),!n)return e;var a=e.byId,d=a[r];return t.__assign({},e,{byId:c(a,t.__assign({},d,{isPlaceHolder:o.isPlaceHolder},o.absolutePos?{top:o.absolutePos.top,left:o.absolutePos.left}:{}),n,o)})}function w(e,r,n){void 0===n&&(n={});var o=e.byId,a=o[r];if(!a)return e;var d=a.parentId;if(!d)return e;var i=o[d];if(!i)return e;var l=o[i.parentId],s=i.childrenIds.indexOf(r);if(s<0)return e;var u={};if("row"===i.type)if("left"===n.direction){if(0===s)return e;u={beforeItemId:i.childrenIds[s-1]}}else{if("right"!==n.direction){if(l&&"col"===l.type){var p=l.childrenIds.indexOf(i.id);return p>0&&"up"===n.direction?C(e,r,l.childrenIds[p-1]):p<l.childrenIds.length-1&&"down"===n.direction?C(e,r,l.childrenIds[p+1]):e}return e}if(s>=i.childrenIds.length-1)return e;u={afterItemId:i.childrenIds[s+1]}}else if("col"===i.type)if("up"===n.direction){if(0===s)return e;u={beforeItemId:i.childrenIds[s-1]}}else{if("down"!==n.direction){if(l&&"row"===l.type){p=l.childrenIds.indexOf(i.id);return p>0&&"left"===n.direction?C(e,r,l.childrenIds[p-1]):p<l.childrenIds.length-1&&"right"===n.direction?C(e,r,l.childrenIds[p+1]):e}return e}if(s>=i.childrenIds.length-1)return e;u={afterItemId:i.childrenIds[s+1]}}else if("layer"===i.type){var h=("up"===n.direction?-1:"down"===n.direction?1:0)*(n.stepPx||1),f=("left"===n.direction?-1:"right"===n.direction?1:0)*(n.stepPx||1);u={absolutePos:{top:(a.top||0)+h,left:(a.left||0)+f}}}return t.__assign({},e,{byId:c(o,t.__assign({},a,{isPlaceHolder:u.isPlaceHolder},u.absolutePos?{top:u.absolutePos.top,left:u.absolutePos.left}:{}),d,u)})}function k(e,r,n){if(void 0===n&&(n=!0),!r)return e;var o=e.focusedNodeId;return t.__assign({},e,{focusedNodeId:n?r.id:o===r.id?null:o})}function _(e){var t=e.filter(function(e){return 0===e.indexOf("draggednodeid:")}),r=e.filter(function(e){return 0===e.indexOf("draggednodetype:")});if(1!==t.length||1!==r.length)return{draggedNodeId:"notanode",draggedNodeType:null};var n=t[0].slice("draggednodeid:".length),o=r[0].slice("draggednodetype:".length);return{draggedNodeId:n,draggedNodeType:o}}function x(e,t){return t?{left:e.clientX-t.left,top:e.clientY-t.top,width:t.width,height:t.height}:null}function N(e,t,r){e.stopPropagation();var n=x(e,r());n&&e.dataTransfer.setData("text/plain",JSON.stringify({startLeft:n.left,startTop:n.top})),e.dataTransfer.setData("draggednodeid:"+t.id,""),e.dataTransfer.setData("draggednodetype:"+t.type,"")}function E(e,t,r,n){void 0===r&&(r={});var o=_(e).draggedNodeId;return C(n,o,t,r)}var B=function(e){function n(){var t=null!==e&&e.apply(this,arguments)||this;return t.selfRef=null,t.getBoundingRect=function(){return t.selfRef&&t.selfRef.getBoundingClientRect?t.selfRef.getBoundingClientRect():null},t.canDrop=function(e){var t=_(e).draggedNodeType;return"row"===t||"col"===t||"markdown"===t||"image"===t||"layer"===t||"custom"===t},t.onDrop=function(e,r){if(void 0===r&&(r=!1),t.canDrop(e.dataTransfer.types)){e.stopPropagation();var n=_(e.dataTransfer.types).draggedNodeId;if(n){var o=x(e,t.getBoundingRect()),a=t.props.node.childrenIds.length?t.props.node.childrenIds[t.props.node.childrenIds.length-1]:void 0,d=JSON.parse(e.dataTransfer.getData("text/plain"));t.props.onChange(E(e.dataTransfer.types,t.props.node.id,o?{afterItemId:a,absolutePos:{top:o.top-d.startTop,left:o.left-d.startLeft}}:void 0,t.props.value))}}},t.onDragEnter=function(e){e.preventDefault()},t.onDragOver=function(e){t.canDrop(e.dataTransfer.types)&&(e.preventDefault(),e.stopPropagation())},t}return t.__extends(n,e),n.prototype.renderChild=function(e){var t=this.props,r=t.value,n=t.onChange,o=t.renderEditBlock,a=r.byId[e];return o({node:a,renderEditBlock:o,value:r,onChange:n})},n.prototype.render=function(){var e=this,t=this.props,n=t.node,o=t.value.byId,a=n.childrenIds;return r.createElement("div",{ref:function(t){return e.selfRef=t},onDragOver:this.onDragOver,onDrop:this.onDrop,draggable:!0,onDragStart:function(t){return N(t,e.props.node,e.getBoundingRect)},style:{position:"relative",width:n.width,height:n.height,backgroundColor:n.backgroundColor||"#f5f5f5a3",borderRadius:3}},a.map(function(t){var n=o[t],a=r.createElement("div",{key:"node_"+t,style:{position:"absolute",width:n.width,height:n.height,top:n.top,left:n.left}},e.renderChild(t));return a}))},n}(r.Component),D=function(e){function n(){var r=null!==e&&e.apply(this,arguments)||this;return r.selfRef=null,r.state={wantToPlaceNext:null},r.getBoundingRect=function(){return r.selfRef&&r.selfRef.getBoundingClientRect?r.selfRef.getBoundingClientRect():null},r.canDrop=function(e){var t=r.props,n=t.value.byId,o=t.node,a=o.parentId?n[o.parentId]:null,d=_(e).draggedNodeType;return"col"===d&&a&&"row"===a.type||!r.props.children&&("row"===d||"markdown"===d||"image"===d||"layer"===d||"custom"===d)},r.shouldPlaceBefore=function(e,t){var n=x(e,r.getBoundingRect()),o=n&&("y"===t?n.top/n.height<.45:n.left/n.width<.45);return o},r.onDrop=function(e,n){if(void 0===n&&(n=!1),r.canDrop(e.dataTransfer.types)){e.stopPropagation(),n||null===r.state.wantToPlaceNext||r.setState({wantToPlaceNext:null});var o=_(e.dataTransfer.types),a=o.draggedNodeId,d=o.draggedNodeType;if(a)if("col"===d){var i=r.shouldPlaceBefore(e,"x"),l=i?{beforeItemId:r.props.node.id}:{afterItemId:r.props.node.id};r.props.onChange(E(e.dataTransfer.types,r.props.node.parentId||"",t.__assign({},l,{isPlaceHolder:n}),r.props.value))}else{i=r.shouldPlaceBefore(e,"y");var s=r.props.node.childrenIds,u=s.length;l=u?i?{beforeItemId:s[0]}:{afterItemId:s[u-1]}:null;r.props.onChange(E(e.dataTransfer.types,r.props.node.id,t.__assign({isPlaceHolder:n},l),r.props.value))}}},r.onDragEnter=function(e){e.preventDefault()},r.onDragOver=function(e){if(r.canDrop(e.dataTransfer.types)){e.preventDefault(),e.stopPropagation();var t=_(e.dataTransfer.types).draggedNodeType;if("col"===t){var n=r.shouldPlaceBefore(e,"x");n&&"left"!==r.state.wantToPlaceNext?r.setState({wantToPlaceNext:"left"}):n||"right"===r.state.wantToPlaceNext||r.setState({wantToPlaceNext:"right"})}else{n=r.shouldPlaceBefore(e,"y");r.setState({wantToPlaceNext:n?"firstChild":"lastChild"})}}},r.onDragLeave=function(e){null!==r.state.wantToPlaceNext&&r.setState({wantToPlaceNext:null})},r}return t.__extends(n,e),n.prototype.renderChild=function(e){var t=this.props,r=t.value,n=t.onChange,o=t.renderEditBlock,a=r.byId[e];return o({node:a,renderEditBlock:o,value:r,onChange:n})},n.prototype.render=function(){var e=this,t=this.props.children,n=this.props,o=n.node,a=n.value.byId,d=this.state.wantToPlaceNext,i=o.childrenIds,l="firstChild"===d?3:0;return r.createElement("div",{key:"col_"+o.id,style:{display:"flex",flexDirection:"row",width:"100%",height:"100%"}},"left"===d&&r.createElement("div",{style:{height:"100%",width:3,backgroundColor:"white"}}),r.createElement("div",{ref:function(t){return e.selfRef=t},onDragOver:this.onDragOver,onDragLeave:this.onDragLeave,onDrop:this.onDrop,onDragEnter:this.onDragEnter,draggable:!0,onDragStart:function(t){return N(t,e.props.node,e.getBoundingRect)},style:{width:"100%",height:"100%",borderRadius:3,backgroundColor:this.props.node.isPlaceHolder?"grey":this.props.node.backgroundColor||"#ffffffa8",borderStyle:"solid",borderWidth:1}},"firstChild"===d&&r.createElement("div",{style:{height:10,width:"100%",backgroundColor:"blue"}}),r.Children.count(t)?t:i.map(function(t){var n=a[t],o=r.createElement("div",{className:"drag-node",key:"node_"+t,style:{position:"absolute",width:n.width,height:n.height,top:l,left:0}},e.renderChild(t));return l+=n.height,o}),"lastChild"===d&&r.createElement("div",{style:{top:l,position:"absolute",height:10,width:"100%",backgroundColor:"orange"}})),"right"===d&&r.createElement("div",{style:{height:"100%",width:3,backgroundColor:"white"}}))},n}(r.Component),P=function(e){function n(){var r=null!==e&&e.apply(this,arguments)||this;return r.state={wantToPlaceNext:null},r.selfRef=null,r.getBoundingRect=function(){return r.selfRef&&r.selfRef.getBoundingClientRect?r.selfRef.getBoundingClientRect():null},r.canDrop=function(e){var t=_(e).draggedNodeType,n=r.props,o=n.value.byId,a=n.node,d=a.parentId?o[a.parentId]:null;return"row"===t&&d&&"col"===d.type||!r.props.children&&("col"===t||"markdown"===t||"image"===t||"layer"===t||"custom"===t)},r.shouldPlaceBefore=function(e,t){var n=x(e,r.getBoundingRect()),o=n&&("y"===t?n.top/n.height<.3:n.left/n.width<.3);return o},r.onDrop=function(e,n){if(void 0===n&&(n=!1),r.canDrop(e.dataTransfer.types)){e.stopPropagation(),n||null===r.state.wantToPlaceNext||r.setState({wantToPlaceNext:null});var o=_(e.dataTransfer.types),a=o.draggedNodeId,d=o.draggedNodeType;if(a){var i=r.shouldPlaceBefore(e,"y");if("row"===d){var l=i?{beforeItemId:r.props.node.id}:{afterItemId:r.props.node.id};r.props.onChange(E(e.dataTransfer.types,r.props.node.parentId||"",t.__assign({},l,{isPlaceHolder:n}),r.props.value))}else{var s=r.shouldPlaceBefore(e,"x"),u=r.props.node.childrenIds,c=u.length;l=c?s?{beforeItemId:u[0]}:{afterItemId:u[c-1]}:null;r.props.onChange(E(e.dataTransfer.types,r.props.node.id,t.__assign({isPlaceHolder:n},l),r.props.value))}}}},r.onDragEnter=function(e){e.preventDefault()},r.onDragOver=function(e){var t=_(e.dataTransfer.types).draggedNodeType;if(r.canDrop(e.dataTransfer.types))if(e.preventDefault(),e.stopPropagation(),"row"===t){var n=r.shouldPlaceBefore(e,"y");n&&"top"!==r.state.wantToPlaceNext?r.setState({wantToPlaceNext:"top"}):n||"bottom"===r.state.wantToPlaceNext||r.setState({wantToPlaceNext:"bottom"})}else{n=r.shouldPlaceBefore(e,"x");r.setState({wantToPlaceNext:n?"firstChild":"lastChild"})}},r.onDragLeave=function(e){null!==r.state.wantToPlaceNext&&r.setState({wantToPlaceNext:null})},r}return t.__extends(n,e),n.prototype.render=function(){var e=this,t=this.props.children,n=this.props,o=n.node,a=n.value,d=n.onChange,i=n.renderEditBlock,l=this.state.wantToPlaceNext,s="firstChild"===l?3:0;return r.createElement("div",{key:"row_"+o.id},"top"===l&&r.createElement("div",{style:{height:3,width:"100%",backgroundColor:"black"}}),r.createElement("div",{ref:function(t){return e.selfRef=t},onDragOver:this.onDragOver,onDragLeave:this.onDragLeave,onDragEnter:this.onDragEnter,onDrop:this.onDrop,draggable:!0,onDragStart:function(t){return N(t,e.props.node,e.getBoundingRect)},style:{position:"relative",height:o.height,width:o.width,borderStyle:"dashed",borderWidth:0,borderBottomWidth:1,backgroundColor:o.isPlaceHolder?"darkgrey":o.backgroundColor||"#b5bbb9b0"}},"firstChild"===l&&r.createElement("div",{style:{height:"100%",width:3,backgroundColor:"blue"}}),r.Children.count(t)?t:o.childrenIds.map(function(e){var t=a.byId[e],n=r.createElement("div",{className:"drag-node",key:"node_"+t.id,style:{position:"absolute",width:t.width,height:t.height,top:0,left:s}},i({node:t,renderEditBlock:i,value:a,onChange:d}));return s+=t.width,n}),"lastChild"===l&&r.createElement("div",{style:{position:"absolute",left:s,height:"100%",width:3,backgroundColor:"orange"}})),"bottom"===l&&r.createElement("div",{style:{height:3,width:"100%",backgroundColor:"green"}}))},n}(r.Component),R=function(e){function n(){var t=null!==e&&e.apply(this,arguments)||this;return t.selfRef=null,t.getBoundingRect=function(){return t.selfRef&&t.selfRef.getBoundingClientRect?t.selfRef.getBoundingClientRect():null},t}return t.__extends(n,e),n.prototype.render=function(){var e=this,t=this.props.node;return r.createElement("div",{ref:function(t){return e.selfRef=t},draggable:!0,onDragStart:function(t){return N(t,e.props.node,e.getBoundingRect)},style:{width:"100%",height:"100%",backgroundColor:"violet",padding:5,borderRadius:3}},r.createElement("img",{style:{width:"100%",height:"100%"},src:t.value}))},n}(r.Component),T=function(e){function n(){var t=null!==e&&e.apply(this,arguments)||this;return t.selfRef=null,t.getBoundingRect=function(){return t.selfRef&&t.selfRef.getBoundingClientRect?t.selfRef.getBoundingClientRect():null},t}return t.__extends(n,e),n.prototype.render=function(){var e=this,t=this.props,n=t.node,o=t.update,a=n.value;return r.createElement("div",{ref:function(t){return e.selfRef=t},draggable:!0,onDragStart:function(t){return N(t,e.props.node,e.getBoundingRect)},style:{width:"100%",height:"100%",backgroundColor:"#ffc0cb75",padding:5,borderRadius:3}},r.createElement("textarea",{className:"form-control",name:"value",placeholder:"Type here...",value:a,onChange:function(e){return o(n.id,{value:e.target.value})}}))},n}(r.Component),S=function(e){var t=e.node,n=e.renderEditBlock,a=e.value,d=e.onChange,i=e.width,l=e.height,s=a.focusedNodeId;return r.createElement("div",{onClick:function(e){e.stopPropagation(),d(k(a,t))},style:t.id===s?{borderStyle:"dashed",borderWidth:1,borderColor:"orange"}:{}},r.createElement(o.ResizableBox,{className:"box",width:i,height:l,onResizeStart:function(e){e.preventDefault(),e.stopPropagation()},onResize:function(e,r){var n=r.size,o=n.width,i=n.height;d(I(a,t.id,{width:o,height:i}))}},"col"===t.type?r.createElement(D,{key:"col_"+t.id,node:t,renderEditBlock:n,value:a,onChange:d}):"row"===t.type?r.createElement(P,{key:"row_"+t.id,node:t,renderEditBlock:n,value:a,onChange:d}):"markdown"===t.type?r.createElement(T,{node:t,update:function(e,t){return d(I(a,e,t))}}):"layer"===t.type?r.createElement(B,{key:"layer_"+t.id,node:t,renderEditBlock:n,value:a,onChange:d}):r.createElement(R,{key:"image_"+t.id,node:t,renderEditBlock:n,value:a,onChange:d})))},W=function(e){var t=e.node,n=e.renderEditBlock,o=e.value,a=e.onChange;return r.createElement(S,{width:t.width,height:t.height,renderEditBlock:n,node:t,value:o,onChange:a})},M=function(e){function n(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={value:t.props.value},t}return t.__extends(n,e),n.prototype.componentDidMount=function(){if(this.props.onChange){var e=this.state.value;this.props.onChange(e)}},n.prototype.componentDidUpdate=function(e,r){if(this.props.onChange&&this.state.value!==r.value&&this.state.value!==this.props.value){var n=this.state.value;this.props.onChange(n)}else this.props.value&&e.value!==this.props.value&&this.props.value!==this.state.value&&this.setState({value:this.props.value});this.state.value.byId!==r.value.byId&&this.state.value.undoStack===r.value.undoStack&&(console.log("ADD TO UNDO STACK....!!!",a.cloneDeep(r.value.byId)),this.setState({value:t.__assign({},this.state.value,{undoStack:[r.value.byId].concat(this.state.value.undoStack)})}))},n.prototype.render=function(){var e=this,t=this.props.renderEditBlock,n=this.state.value,o=n.byId,a=n.rootNodeId,d=o[a];return r.createElement("div",{style:{position:"relative",width:d.width,height:d.height}},r.createElement(D,{key:"col_"+d.id,node:d,renderEditBlock:t,value:this.state.value,onChange:function(t){return e.setState({value:t})}}))},n.defaultProps={renderEditBlock:W,onChange:function(e){}},n}(r.Component);function O(e){return!!e.borderWidth&&e.borderWidth>0||!!e.borderTopWidth&&e.borderTopWidth>0||!!e.borderBottomWidth&&e.borderBottomWidth>0||!!e.borderLeftWidth&&e.borderLeftWidth>0||!!e.borderRightWidth&&e.borderRightWidth>0}var L=function(e){return{color:e.color||void 0,display:e.display||void 0,flexDirection:e.flexDirection||void 0,justifyContent:e.justifyContent||void 0,alignItems:e.alignItems||void 0,backgroundColor:e.backgroundColor||void 0,borderWidth:void 0!==e.borderWidth?e.borderWidth:0,borderTopWidth:void 0!==e.borderTopWidth?e.borderTopWidth:void 0,borderBottomWidth:void 0!==e.borderBottomWidth?e.borderBottomWidth:void 0,borderLeftWidth:void 0!==e.borderLeftWidth?e.borderLeftWidth:void 0,borderRightWidth:void 0!==e.borderRightWidth?e.borderRightWidth:void 0,borderStyle:e.borderStyle?e.borderStyle||void 0:O(e)?"solid":void 0}},F=function(e){var n=e.byId,o=e.node,a=e.renderPreviewBlock,i=void 0===a?j:a;if(!o)return null;switch(o.type){case"markdown":return r.createElement("div",{key:o.id,style:t.__assign({},L(o),{height:o.height,width:o.width})},r.createElement(d,{source:o.value}));case"layer":return r.createElement("div",{key:o.id,style:t.__assign({position:"relative"},L(o),{height:o.height,width:o.width})},o.childrenIds.map(function(e){var t=n[e];return r.createElement("div",{key:t.id,style:{position:"absolute",top:t.top||0,left:t.left||0}},i({byId:n,node:n[e],renderPreviewBlock:i}))}));case"image":return r.createElement("div",{key:o.id,style:{height:"100%",width:"100%"}},r.createElement("img",{src:o.value}));case"col":return r.createElement("div",{key:o.id,style:t.__assign({},L(o),{width:o.width,height:o.height,display:"flex",flexDirection:"column"})},o.childrenIds.map(function(e){return i({byId:n,node:n[e],renderPreviewBlock:i})}));case"row":return r.createElement("div",{key:o.id,style:t.__assign({},L(o),{width:o.width,height:o.height,display:"flex",flexDirection:"row"})},o.childrenIds.map(function(e){return i({byId:n,node:n[e],renderPreviewBlock:i})}));case"custom":return null}},j=function(e){var t=e.byId,n=e.node,o=e.renderPreviewBlock;return r.createElement(F,{key:"node_"+n.id,node:n,byId:t,renderPreviewBlock:o})},H=function(e){var t=e.byId,n=e.node,o=e.onSelect,a=e.navClassName,d=void 0===a?"breadcrumb":a,i=e.itemClassName,l=void 0===i?"breadcrumb-item btn btn-link active":i;if(!n)return null;for(var s=[],u=n.id;u;){var c=t[u];if(!c)break;s.unshift({label:c.type+"-"+c.id,id:c.id}),u=c.parentId}return r.createElement("nav",{"aria-label":"breadcrumb"},r.createElement("ol",{className:d},s.map(function(e){return r.createElement("li",{onClick:function(){return o(e.id)},key:"crumb_"+e.id,className:l,"aria-current":"page"},e.label)})))};function z(e,r){var n=e.byId,o=e.rootNodeId,a=e.focusedNodeId,d=(r?r.parentId:a)||o,i=n[d],l=["col","layer"];if((!i||l.indexOf(i.type)<0)&&(d=i?i.parentId:null,i=d?n[d]:i,!i||l.indexOf(i.type)<0))return{error:"Can only add a row inside "+l.join(", ")+", please select a column by clicking on it",value:e};var s=m(n,"row"),u=t.__assign({type:"row",height:100,width:i&&i.width?i.width:500},r,{id:s,name:s,childrenIds:[]});n=c(n,u,i.id),i=n[d];var p={};if("col"===i.type&&i&&i.childrenIds.length>=1)for(var h=i.height/i.childrenIds.length,f=0,g=i.childrenIds;f<g.length;f++){var v=g[f];p[v]=t.__assign({},n[v],{height:h})}return{createdBlock:u,value:t.__assign({},e,{byId:t.__assign({},n,p),focusedNodeId:a||u.id})}}function q(e,r){var n=e.byId,o=e.rootNodeId,a=e.focusedNodeId,d=(r?r.parentId:a)||o,i=n[d],l=["row","layer"];if((!i||l.indexOf(i.type)<0)&&(d=i?i.parentId:null,i=d?n[d]:i,!i||l.indexOf(i.type)<0))return{error:"Can only add a column inside "+l.join(", ")+", please select a column by clicking on it",value:e};var s=m(n,"col"),u=t.__assign({type:"col",width:100,height:i.height?i.height:100},r,{id:s,name:s,childrenIds:[]});n=c(n,u,d),i=n[d];var p={};if("row"===i.type&&i&&i.childrenIds.length>=1)for(var h=i.width/i.childrenIds.length,f=0,g=i.childrenIds;f<g.length;f++){var v=g[f];p[v]=t.__assign({},n[v],{width:h})}return{createdBlock:u,value:t.__assign({},e,{byId:t.__assign({},n,p),focusedNodeId:a||u.id})}}function U(e,r){var n=e.byId,o=e.rootNodeId,a=e.focusedNodeId,d=(r?r.parentId:a)||o,i=n[d],l=["row","col","layer"];if(!i||l.indexOf(i.type)<0)return{error:"Can only add markdown text inside "+l.join(", "),value:e};var s=m(n,"markdown"),u=t.__assign({type:"markdown",width:Math.max(1,i.width-20),height:Math.max(1,i.height-20)},r,{id:s,name:s,childrenIds:[]});return{createdBlock:u,value:t.__assign({},e,{byId:c(n,u,d),focusedNodeId:u.id})}}function A(e,r){var n=r&&r.value?r.value:window.prompt("Please enter image url","http://lorempixel.com/200/200/");if(null===n)return{error:"no image selected",value:e};var o=e.byId,a=e.rootNodeId,d=e.focusedNodeId,i=(r?r.parentId:d)||a,l=o[i],s=["row","col","layer"];if(!l||s.indexOf(l.type)<0)return{error:"Can only add an image inside "+s.join(", "),value:e};var u=m(o,"image"),p=t.__assign({type:"image",value:n,width:200,height:200},r,{id:u,name:u,childrenIds:[]});return{createdBlock:p,value:t.__assign({},e,{byId:c(o,p,i),focusedNodeId:p.id})}}function J(e,r){var n=e.byId,o=e.rootNodeId,a=e.focusedNodeId,d=(r?r.parentId:a)||o,i=n[d],l=["row","col","layer"];if(!i||l.indexOf(i.type)<0)return{error:"Can only add a layer inside "+l.join(", "),value:e};var s=m(n,"layer"),u=t.__assign({type:"layer",width:Math.max(1,i.width-20),height:Math.max(1,i.height-20)},r,{id:s,name:s,childrenIds:[]});return{createdBlock:u,value:t.__assign({},e,{byId:c(n,u,d),focusedNodeId:u.id})}}var K=function(e){function r(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={selectedMenu:null,selectedColor:null},t.toggleMenu=function(e){if(t.setState({selectedMenu:t.state.selectedMenu===e?null:e}),"color"===e||"backgroundColor"===e){var r=t.props.value,n=r.byId,o=r.focusedNodeId,a=o?n[o]:null;t.setState({selectedColor:a?a.color:void 0})}},t.renderColorMenuItem=function(e){var r=t.props.value,o=r.byId,a=r.focusedNodeId;if(a){var d=a?o[a]:null;return n.createElement(n.Fragment,null,n.createElement(X,{onClick:function(){return t.toggleMenu(e)},color:d[e]}),t.state.selectedMenu===e&&n.createElement("div",{style:{position:"absolute",zIndex:100,backgroundColor:"white"}},n.createElement("button",{className:t.props.buttonClassName,onClick:function(){var r;t.props.updateBlock(a,(r={},r[e]=void 0,r)),t.toggleMenu(e)}},"Clear"),n.createElement("button",{className:t.props.buttonClassName,onClick:function(){var r;t.toggleMenu(e),t.props.updateBlock(a,(r={},r[e]=t.state.selectedColor,r))}},"Done"),n.createElement(i.SketchPicker,{color:t.state.selectedColor||void 0,onChangeComplete:function(e){var r=e.hex;t.setState({selectedColor:r})}})))}},t}return t.__extends(r,e),r.prototype.render=function(){var e=this.props,r=e.buttonClassName,o=e.breadCrumbsProps,a=e.value,d=a.byId,i=a.focusedNodeId,l=this.props,s=i?d[i]:null,u=l.focusNode,c=r;return n.createElement("div",null,n.createElement("div",null,n.createElement("button",{"aria-label":"add row",className:c,onClick:function(){return l.addRow()}},"+ Row"),n.createElement("button",{"aria-label":"add column",className:c,onClick:function(){return l.addCol()}},"+ Col"),n.createElement("button",{"aria-label":"add layer",className:c,onClick:function(){return l.addLayer()}},"+ Layer"),n.createElement("button",{"aria-label":"add markdown",className:c,onClick:function(){return l.addMarkDown()}},"+ Text"),n.createElement("button",{"aria-label":"add image",className:c,onClick:function(){return l.addImage()}},"+ Image"),n.createElement("button",{"aria-label":"add image",className:c,onClick:function(){l.onChange(function(e,t){if(!t)return alert("Please select node to add table to"),e;var r=window.prompt("Enter number or rows (max 10)","5");if(null===r)return e;var n=window.prompt("Enter number or columns (max 10)","5");if(null===n)return e;var o=window.prompt("Enter table width (max 400)","300");if(null===o)return e;var a=window.prompt("Enter table height (max 400)","300");if(null===a)return e;var d=Math.min(parseInt(o,10),400),i=Math.min(parseInt(a,10),400),l=q(e,{width:d,height:i,parentId:t}),s=l.value,u=l.createdBlock;if(!u)return e;e=s;for(var c=u.id,p=Math.max(1,Math.min(parseInt(r,10),10)),h=Math.max(1,Math.min(parseInt(n,10),10)),f=0;f<p;++f){var g=z(e,{height:i/p,parentId:c}),v=g.value,m=g.createdBlock;if(!m)break;e=v;for(var y=0;y<h;++y){var I=q(e,{parentId:m.id,height:m.height,width:m.width/h}),b=I.value,C=I.createdBlock;if(!C)break;e=b}}return e}(l.value,l.value.focusedNodeId))}},"+ Table"),n.createElement("button",{"aria-label":"undo",className:c,onClick:l.undo},"Undo"),n.createElement("button",{"aria-label":"redo",className:c,onClick:l.redo},"Redo")),s&&n.createElement("div",{style:{paddingLeft:15}},this.renderColorMenuItem("color"),this.renderColorMenuItem("backgroundColor"),n.createElement("button",{className:c,onClick:function(){return l.moveInDirection(s.id,"left")}},"⬅️"),n.createElement("button",{className:c,onClick:function(){return l.moveInDirection(s.id,"right")}},"➡️"),n.createElement("button",{className:c,onClick:function(){return l.moveInDirection(s.id,"up")}},"⬆"),n.createElement("button",{className:c,onClick:function(){return l.moveInDirection(s.id,"down")}},"⬇"),n.createElement("button",{className:c,onClick:function(){return l.onChange(function(e,t){if(!t)return e;var r=e.byId,n=r[t];if(!n)return e;var o=n.parentId,a=r[o];return a?C(e,t,o,{afterItemId:a.childrenIds[a.childrenIds.length-1]}):e}(l.value,l.value.focusedNodeId))}},"FlipToFront"),n.createElement("button",{"aria-label":"copy",className:c,onClick:function(){return l.copyFocused()}},"Copy"),n.createElement("button",{"aria-label":"paste",className:c,onClick:function(){return l.paste()}},"Paste"),n.createElement("button",{"aria-label":"delete",onClick:l.removeFocused},"🗑"),n.createElement("div",null,n.createElement(H,t.__assign({onSelect:function(e){return u(e,!0)},byId:d,node:s},o))),n.createElement("div",{style:{paddingBottom:20}},[{prop:"width",numeric:!0},{prop:"height",numeric:!0},{prop:"top",numeric:!0},{prop:"left",numeric:!0},{prop:"borderWidth",numeric:!0},{prop:"borderTopWidth",numeric:!0},{prop:"borderBottomWidth",numeric:!0},{prop:"borderLeftWidth",numeric:!0},{prop:"borderRightWidth",numeric:!0},{prop:"borderStyle",numeric:!1}].map(function(e){return n.createElement("div",{style:{display:"inline-block",marginRight:10},className:"form-group"},n.createElement("label",{style:{marginRight:5},htmlFor:e.prop,className:"form-label"},e.prop),n.createElement("input",{name:e.prop,className:"form-control",key:"prop_"+e.prop,value:void 0===s[e.prop]?"":s[e.prop],onChange:(t=s.id,r=e.prop,o=e.numeric,function(e){var n;l.updateBlock(t,(n={},n[r]=o?e.target.value?parseInt(e.target.value,10):void 0:e.target.value,n))}),type:e.numeric?"numeric":void 0}));var t,r,o}))))},r}(n.Component),X=function(e){return n.createElement("button",{style:{borderWidth:1,fontSize:11,borderStyle:"solid",justifyContent:"flex-start"},onClick:e.onClick},n.createElement("div",{style:{display:"flex"}},n.createElement("div",{style:{borderWidth:1,borderRadius:3,borderStyle:"solid",width:20,height:20,backgroundColor:e.color||void 0}})," ",e.color?"":"none"))};var Y=function(e){function n(){var r=null!==e&&e.apply(this,arguments)||this;return r.addRow=function(e){var t=z(r.props.value,e),n=t.error,o=t.value;n?alert(n):r.props.onChange(o)},r.addCol=function(e){var t=q(r.props.value,e),n=t.error,o=t.value;n?alert(n):r.props.onChange(o)},r.addMarkDown=function(e){var t=U(r.props.value,e),n=t.error,o=t.value;n?alert(n):r.props.onChange(o)},r.addImage=function(e){var t=A(r.props.value,e),n=t.error,o=t.value;n?alert(n):r.props.onChange(o)},r.addLayer=function(e){var t=J(r.props.value,e),n=t.error,o=t.value;n?alert(n):r.props.onChange(o)},r.removeFocused=function(){var e=r.props.value.focusedNodeId;e&&r.destroy(e)},r.focusNode=function(e,t){void 0===t&&(t=!0);var n=r.props.value;r.props.onChange(k(n,e,t))},r.create=function(e){r.props.onChange(y(r.props.value,e))},r.updateBlock=function(e,t){r.props.onChange(I(r.props.value,e,t))},r.destroy=function(e){r.props.onChange(b(r.props.value,e))},r.move=function(e,t,n){void 0===n&&(n={}),r.props.onChange(C(r.props.value,e,t,n))},r.moveInDirection=function(e,t){r.props.onChange(w(r.props.value,e,{direction:t}))},r.copyFocused=function(){var e=r.props.value,n=e.byId,o=e.focusedNodeId;if(o){var a=n[o];r.props.onChange(t.__assign({},r.props.value,{copiedNode:f(n,a)}))}},r.paste=function(){r.props.onChange(g(r.props.value))},r.undo=function(){var e=r.props.value,n=e.byId,o=e.undoStack,a=e.redoStack;if(o.length>0){var d=o[0],i=[n].concat(a),l=o.slice(1);r.props.onChange(t.__assign({},r.props.value,{byId:d,undoStack:l,redoStack:i}))}},r.redo=function(){var e=r.props.value,n=e.byId,o=e.undoStack,a=e.redoStack;if(a.length>0){var d=a[0],i=[n].concat(o),l=a.slice(1);r.props.onChange(t.__assign({},r.props.value,{byId:d,undoStack:i,redoStack:l}))}},r}return t.__extends(n,e),n.prototype.render=function(){var e=this,n=this.props,o=n.UiComponent,a=n.onChange,d=n.value,i=n.controlUiProps;return r.createElement(o,t.__assign({value:d,onChange:a,addRow:this.addRow,addCol:this.addCol,addImage:this.addImage,addLayer:this.addLayer,addMarkDown:this.addMarkDown,moveInDirection:this.moveInDirection,copyFocused:this.copyFocused,paste:this.paste,focusNode:function(t,r){return e.focusNode(d.byId[t],r)},removeFocused:this.removeFocused,updateBlock:this.updateBlock,undo:this.undo,redo:this.redo},i))},n.defaultProps={UiComponent:K},n}(r.Component);exports.AbsoluteLayerBlock=B,exports.BlockBreadCrumbs=H,exports.BlockEditor=M,exports.BlockEditorControl=Y,exports.BlockEditorControlDefaultUI=K,exports.DraggableColBlock=D,exports.DraggableRowBlock=P,exports.ImageBlock=R,exports.MarkdownBlock=T,exports.Preview=F,exports.ResizableBlock=S,exports.addCol=q,exports.addImage=A,exports.addLayer=J,exports.addMarkDown=U,exports.addRow=z,exports.create=y,exports.deepCopy=f,exports.defaultRenderEditBlock=W,exports.defaultRenderPreviewBlock=j,exports.destroy=b,exports.focusNode=k,exports.getDragPositionRelativeToTarget=x,exports.hasDescendent=u,exports.move=C,exports.moveInDirection=w,exports.newBlockId=m,exports.onDragStart=N,exports.onDropped=E,exports.parseTypes=_,exports.paste=g,exports.pasteChild=v,exports.placeNodeInParent=c,exports.reinsertIntoList=p,exports.removeNode=s,exports.update=I,exports.updateNode=l;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var t=require("tslib"),r=require("react"),n=e(r),o=require("react-resizable"),a=require("lodash"),d=e(require("react-markdown")),i=require("react-color");function l(e,r){var n;return t.__assign({},e,(n={},n[r.id]=r,n))}function s(e,r){var n,o=e[r];if(!o)return e;if(o&&o.parentId){var a=e[o.parentId];if(a){var d=a.childrenIds.findIndex(function(e){return e===o.id});if(d>=0){var i=a.childrenIds.filter(function(e){return e!==o.id});e=l(e,t.__assign({},a,{childrenIds:i}))}}}return t.__assign({},e,(n={},n[r]=void 0,n))}function u(e,t,r){var n=e[t];if(!n)return!1;if(n.childrenIds.indexOf(r)>=0)return!0;for(var o=0,a=n.childrenIds;o<a.length;o++){var d=a[o],i=u(e,d,r);if(i)return!1}return!1}function c(e,r,n,o){if(!r)return e;if(u(e,r.id,n))return console.warn("node ",r.id," has ",n," as child, so cannot make it into",r.id,"'s parent"),e;if(r.id===n)return console.warn("Cannot place into self: ",{id:r.id,newParentId:n}),e;if(r&&r.parentId&&r.parentId!==n){var a=e[r.parentId];if(a){var d=a.childrenIds.filter(function(e){return e!==r.id});e=l(e,t.__assign({},a,{childrenIds:d}))}}var i=e[n];if(i){d=p(i.childrenIds,r.id,o);e=l(e,t.__assign({},i,{childrenIds:d}))}return l(e,t.__assign({},r,{parentId:n}))}function p(e,r,n){if(void 0===n&&(n={}),r===n.beforeItemId||r===n.afterItemId)return console.warn("Cannot place relative to self: ",t.__assign({itemId:r},n)),e;e=e.filter(function(e){return e!==r});var o=n.beforeItemId,a=n.afterItemId,d=-1;if(o?d=e.findIndex(function(e){return e===o}):a&&(d=e.findIndex(function(e){return e===a})+1),d>=0){var i=e.slice();return i.splice(d,0,r),i}return e.concat([r])}var h=require("lodash").cloneDeep;function f(e,r){return r?t.__assign({},r,{value:h(r.value),childrenIds:r.childrenIds.slice(),children:r.childrenIds.map(function(t){return f(e,e[t])})}):r}function g(e){var r=e.byId,n=(e||{copiedNode:null}).copiedNode;if(!n)return e;n=h(n);var o=v(r,n).byId;if(n.parentId){var a=r[n.parentId];if(a)return t.__assign({},e,{byId:c(o,n,n.parentId,{afterItemId:a.childrenIds[a.childrenIds.length-1]})})}return e}function v(e,r){var n;r.id=m(e,r.type);var o=r.children;if(r.children=void 0,e=t.__assign({},e,(n={},n[r.id]=r,n)),o)for(var a=0,d=0,i=o;d<i.length;d++){var l=i[d];l.parentId=r.id;var s=v(e,l),u=s.byId,c=s.newId;r.childrenIds[a]=c,e=u,++a}return{byId:e,newId:r.id}}function m(e,t){void 0===t&&(t="node");for(var r=Object.keys(e).length;e[r];)r++;return t+"_"+r}function y(e,r){var n=e.byId,o=m(n),a=t.__assign({},n[o],r);return t.__assign({},e,{byId:l(n,a)})}function I(e,r,n){var o=e.byId,a=t.__assign({},o[r],n);return t.__assign({},e,{byId:l(o,a)})}function b(e,r){var n=e.byId,o=e.rootNodeId,a=e.focusedNodeId;return o===r?(alert("Cannot destroy root node"),t.__assign({},e,{byId:n,focusedNodeId:a})):t.__assign({},e,{byId:s(n,r),focusedNodeId:a===r?null:a})}function C(e,r,n,o){if(void 0===o&&(o={}),!n)return e;var a=e.byId,d=a[r];return t.__assign({},e,{byId:c(a,t.__assign({},d,{isPlaceHolder:o.isPlaceHolder},o.absolutePos?{top:o.absolutePos.top,left:o.absolutePos.left}:{}),n,o)})}function w(e,r,n){void 0===n&&(n={});var o=e.byId,a=o[r];if(!a)return e;var d=a.parentId;if(!d)return e;var i=o[d];if(!i)return e;var l=o[i.parentId],s=i.childrenIds.indexOf(r);if(s<0)return e;var u={};if("row"===i.type)if("left"===n.direction){if(0===s)return e;u={beforeItemId:i.childrenIds[s-1]}}else{if("right"!==n.direction){if(l&&"col"===l.type){var p=l.childrenIds.indexOf(i.id);return p>0&&"up"===n.direction?C(e,r,l.childrenIds[p-1]):p<l.childrenIds.length-1&&"down"===n.direction?C(e,r,l.childrenIds[p+1]):e}return e}if(s>=i.childrenIds.length-1)return e;u={afterItemId:i.childrenIds[s+1]}}else if("col"===i.type)if("up"===n.direction){if(0===s)return e;u={beforeItemId:i.childrenIds[s-1]}}else{if("down"!==n.direction){if(l&&"row"===l.type){p=l.childrenIds.indexOf(i.id);return p>0&&"left"===n.direction?C(e,r,l.childrenIds[p-1]):p<l.childrenIds.length-1&&"right"===n.direction?C(e,r,l.childrenIds[p+1]):e}return e}if(s>=i.childrenIds.length-1)return e;u={afterItemId:i.childrenIds[s+1]}}else if("layer"===i.type){var h=("up"===n.direction?-1:"down"===n.direction?1:0)*(n.stepPx||1),f=("left"===n.direction?-1:"right"===n.direction?1:0)*(n.stepPx||1);u={absolutePos:{top:(a.top||0)+h,left:(a.left||0)+f}}}return t.__assign({},e,{byId:c(o,t.__assign({},a,{isPlaceHolder:u.isPlaceHolder},u.absolutePos?{top:u.absolutePos.top,left:u.absolutePos.left}:{}),d,u)})}function k(e,r,n){if(void 0===n&&(n=!0),!r)return e;var o=e.focusedNodeId;return t.__assign({},e,{focusedNodeId:n?r.id:o===r.id?null:o})}function _(e){var t=e.filter(function(e){return 0===e.indexOf("draggednodeid:")}),r=e.filter(function(e){return 0===e.indexOf("draggednodetype:")});if(1!==t.length||1!==r.length)return{draggedNodeId:"notanode",draggedNodeType:null};var n=t[0].slice("draggednodeid:".length),o=r[0].slice("draggednodetype:".length);return{draggedNodeId:n,draggedNodeType:o}}function x(e,t){return t?{left:e.clientX-t.left,top:e.clientY-t.top,width:t.width,height:t.height}:null}function N(e,t,r){e.stopPropagation();var n=x(e,r());n&&e.dataTransfer.setData("text/plain",JSON.stringify({startLeft:n.left,startTop:n.top})),e.dataTransfer.setData("draggednodeid:"+t.id,""),e.dataTransfer.setData("draggednodetype:"+t.type,"")}function E(e,t,r,n){void 0===r&&(r={});var o=_(e).draggedNodeId;return C(n,o,t,r)}var B=function(e){function n(){var t=null!==e&&e.apply(this,arguments)||this;return t.selfRef=null,t.getBoundingRect=function(){return t.selfRef&&t.selfRef.getBoundingClientRect?t.selfRef.getBoundingClientRect():null},t.canDrop=function(e){var t=_(e).draggedNodeType;return"row"===t||"col"===t||"markdown"===t||"image"===t||"layer"===t||"custom"===t},t.onDrop=function(e,r){if(void 0===r&&(r=!1),t.canDrop(e.dataTransfer.types)){e.stopPropagation();var n=_(e.dataTransfer.types).draggedNodeId;if(n){var o=x(e,t.getBoundingRect()),a=t.props.node.childrenIds.length?t.props.node.childrenIds[t.props.node.childrenIds.length-1]:void 0,d=JSON.parse(e.dataTransfer.getData("text/plain"));t.props.onChange(E(e.dataTransfer.types,t.props.node.id,o?{afterItemId:a,absolutePos:{top:o.top-d.startTop,left:o.left-d.startLeft}}:void 0,t.props.value))}}},t.onDragEnter=function(e){e.preventDefault()},t.onDragOver=function(e){t.canDrop(e.dataTransfer.types)&&(e.preventDefault(),e.stopPropagation())},t}return t.__extends(n,e),n.prototype.renderChild=function(e){var t=this.props,r=t.value,n=t.onChange,o=t.renderEditBlock,a=r.byId[e];return o({node:a,renderEditBlock:o,value:r,onChange:n})},n.prototype.render=function(){var e=this,t=this.props,n=t.node,o=t.value.byId,a=n.childrenIds;return r.createElement("div",{ref:function(t){return e.selfRef=t},onDragOver:this.onDragOver,onDrop:this.onDrop,draggable:!0,onDragStart:function(t){return N(t,e.props.node,e.getBoundingRect)},style:{position:"relative",width:n.width,height:n.height,backgroundColor:n.backgroundColor||"#f5f5f5a3",borderRadius:3}},a.map(function(t){var n=o[t],a=r.createElement("div",{key:"node_"+t,style:{position:"absolute",width:n.width,height:n.height,top:n.top,left:n.left}},e.renderChild(t));return a}))},n}(r.Component),D=function(e){function n(){var r=null!==e&&e.apply(this,arguments)||this;return r.selfRef=null,r.state={wantToPlaceNext:null},r.getBoundingRect=function(){return r.selfRef&&r.selfRef.getBoundingClientRect?r.selfRef.getBoundingClientRect():null},r.canDrop=function(e){var t=r.props,n=t.value.byId,o=t.node,a=o.parentId?n[o.parentId]:null,d=_(e).draggedNodeType;return"col"===d&&a&&"row"===a.type||!r.props.children&&("row"===d||"markdown"===d||"image"===d||"layer"===d||"custom"===d)},r.shouldPlaceBefore=function(e,t){var n=x(e,r.getBoundingRect()),o=n&&("y"===t?n.top/n.height<.45:n.left/n.width<.45);return o},r.onDrop=function(e,n){if(void 0===n&&(n=!1),r.canDrop(e.dataTransfer.types)){e.stopPropagation(),n||null===r.state.wantToPlaceNext||r.setState({wantToPlaceNext:null});var o=_(e.dataTransfer.types),a=o.draggedNodeId,d=o.draggedNodeType;if(a)if("col"===d){var i=r.shouldPlaceBefore(e,"x"),l=i?{beforeItemId:r.props.node.id}:{afterItemId:r.props.node.id};r.props.onChange(E(e.dataTransfer.types,r.props.node.parentId||"",t.__assign({},l,{isPlaceHolder:n}),r.props.value))}else{i=r.shouldPlaceBefore(e,"y");var s=r.props.node.childrenIds,u=s.length;l=u?i?{beforeItemId:s[0]}:{afterItemId:s[u-1]}:null;r.props.onChange(E(e.dataTransfer.types,r.props.node.id,t.__assign({isPlaceHolder:n},l),r.props.value))}}},r.onDragEnter=function(e){e.preventDefault()},r.onDragOver=function(e){if(r.canDrop(e.dataTransfer.types)){e.preventDefault(),e.stopPropagation();var t=_(e.dataTransfer.types).draggedNodeType;if("col"===t){var n=r.shouldPlaceBefore(e,"x");n&&"left"!==r.state.wantToPlaceNext?r.setState({wantToPlaceNext:"left"}):n||"right"===r.state.wantToPlaceNext||r.setState({wantToPlaceNext:"right"})}else{n=r.shouldPlaceBefore(e,"y");r.setState({wantToPlaceNext:n?"firstChild":"lastChild"})}}},r.onDragLeave=function(e){null!==r.state.wantToPlaceNext&&r.setState({wantToPlaceNext:null})},r}return t.__extends(n,e),n.prototype.renderChild=function(e){var t=this.props,r=t.value,n=t.onChange,o=t.renderEditBlock,a=r.byId[e];return o({node:a,renderEditBlock:o,value:r,onChange:n})},n.prototype.render=function(){var e=this,t=this.props.children,n=this.props,o=n.node,a=n.value.byId,d=this.state.wantToPlaceNext,i=o.childrenIds,l="firstChild"===d?3:0;return r.createElement("div",{key:"col_"+o.id,style:{display:"flex",flexDirection:"row",width:"100%",height:"100%"}},"left"===d&&r.createElement("div",{style:{height:"100%",width:3,backgroundColor:"white"}}),r.createElement("div",{ref:function(t){return e.selfRef=t},onDragOver:this.onDragOver,onDragLeave:this.onDragLeave,onDrop:this.onDrop,onDragEnter:this.onDragEnter,draggable:!0,onDragStart:function(t){return N(t,e.props.node,e.getBoundingRect)},style:{width:"100%",height:"100%",borderRadius:3,backgroundColor:this.props.node.isPlaceHolder?"grey":this.props.node.backgroundColor||"#ffffffa8",borderStyle:"solid",borderWidth:1}},"firstChild"===d&&r.createElement("div",{style:{height:10,width:"100%",backgroundColor:"blue"}}),r.Children.count(t)?t:i.map(function(t){var n=a[t],o=r.createElement("div",{className:"drag-node",key:"node_"+t,style:{position:"absolute",width:n.width,height:n.height,top:l,left:0}},e.renderChild(t));return l+=n.height,o}),"lastChild"===d&&r.createElement("div",{style:{top:l,position:"absolute",height:10,width:"100%",backgroundColor:"orange"}})),"right"===d&&r.createElement("div",{style:{height:"100%",width:3,backgroundColor:"white"}}))},n}(r.Component),P=function(e){function n(){var r=null!==e&&e.apply(this,arguments)||this;return r.state={wantToPlaceNext:null},r.selfRef=null,r.getBoundingRect=function(){return r.selfRef&&r.selfRef.getBoundingClientRect?r.selfRef.getBoundingClientRect():null},r.canDrop=function(e){var t=_(e).draggedNodeType,n=r.props,o=n.value.byId,a=n.node,d=a.parentId?o[a.parentId]:null;return"row"===t&&d&&"col"===d.type||!r.props.children&&("col"===t||"markdown"===t||"image"===t||"layer"===t||"custom"===t)},r.shouldPlaceBefore=function(e,t){var n=x(e,r.getBoundingRect()),o=n&&("y"===t?n.top/n.height<.3:n.left/n.width<.3);return o},r.onDrop=function(e,n){if(void 0===n&&(n=!1),r.canDrop(e.dataTransfer.types)){e.stopPropagation(),n||null===r.state.wantToPlaceNext||r.setState({wantToPlaceNext:null});var o=_(e.dataTransfer.types),a=o.draggedNodeId,d=o.draggedNodeType;if(a){var i=r.shouldPlaceBefore(e,"y");if("row"===d){var l=i?{beforeItemId:r.props.node.id}:{afterItemId:r.props.node.id};r.props.onChange(E(e.dataTransfer.types,r.props.node.parentId||"",t.__assign({},l,{isPlaceHolder:n}),r.props.value))}else{var s=r.shouldPlaceBefore(e,"x"),u=r.props.node.childrenIds,c=u.length;l=c?s?{beforeItemId:u[0]}:{afterItemId:u[c-1]}:null;r.props.onChange(E(e.dataTransfer.types,r.props.node.id,t.__assign({isPlaceHolder:n},l),r.props.value))}}}},r.onDragEnter=function(e){e.preventDefault()},r.onDragOver=function(e){var t=_(e.dataTransfer.types).draggedNodeType;if(r.canDrop(e.dataTransfer.types))if(e.preventDefault(),e.stopPropagation(),"row"===t){var n=r.shouldPlaceBefore(e,"y");n&&"top"!==r.state.wantToPlaceNext?r.setState({wantToPlaceNext:"top"}):n||"bottom"===r.state.wantToPlaceNext||r.setState({wantToPlaceNext:"bottom"})}else{n=r.shouldPlaceBefore(e,"x");r.setState({wantToPlaceNext:n?"firstChild":"lastChild"})}},r.onDragLeave=function(e){null!==r.state.wantToPlaceNext&&r.setState({wantToPlaceNext:null})},r}return t.__extends(n,e),n.prototype.render=function(){var e=this,t=this.props.children,n=this.props,o=n.node,a=n.value,d=n.onChange,i=n.renderEditBlock,l=this.state.wantToPlaceNext,s="firstChild"===l?3:0;return r.createElement("div",{key:"row_"+o.id},"top"===l&&r.createElement("div",{style:{height:3,width:"100%",backgroundColor:"black"}}),r.createElement("div",{ref:function(t){return e.selfRef=t},onDragOver:this.onDragOver,onDragLeave:this.onDragLeave,onDragEnter:this.onDragEnter,onDrop:this.onDrop,draggable:!0,onDragStart:function(t){return N(t,e.props.node,e.getBoundingRect)},style:{position:"relative",height:o.height,width:o.width,borderStyle:"dashed",borderWidth:0,borderBottomWidth:1,backgroundColor:o.isPlaceHolder?"darkgrey":o.backgroundColor||"#b5bbb9b0"}},"firstChild"===l&&r.createElement("div",{style:{height:"100%",width:3,backgroundColor:"blue"}}),r.Children.count(t)?t:o.childrenIds.map(function(e){var t=a.byId[e],n=r.createElement("div",{className:"drag-node",key:"node_"+t.id,style:{position:"absolute",width:t.width,height:t.height,top:0,left:s}},i({node:t,renderEditBlock:i,value:a,onChange:d}));return s+=t.width,n}),"lastChild"===l&&r.createElement("div",{style:{position:"absolute",left:s,height:"100%",width:3,backgroundColor:"orange"}})),"bottom"===l&&r.createElement("div",{style:{height:3,width:"100%",backgroundColor:"green"}}))},n}(r.Component),R=function(e){function n(){var t=null!==e&&e.apply(this,arguments)||this;return t.selfRef=null,t.getBoundingRect=function(){return t.selfRef&&t.selfRef.getBoundingClientRect?t.selfRef.getBoundingClientRect():null},t}return t.__extends(n,e),n.prototype.render=function(){var e=this,t=this.props.node;return r.createElement("div",{ref:function(t){return e.selfRef=t},draggable:!0,onDragStart:function(t){return N(t,e.props.node,e.getBoundingRect)},style:{width:"100%",height:"100%",backgroundColor:"violet",padding:5,borderRadius:3}},r.createElement("img",{style:{width:"100%",height:"100%"},src:t.value}))},n}(r.Component),T=function(e){function n(){var t=null!==e&&e.apply(this,arguments)||this;return t.selfRef=null,t.getBoundingRect=function(){return t.selfRef&&t.selfRef.getBoundingClientRect?t.selfRef.getBoundingClientRect():null},t}return t.__extends(n,e),n.prototype.render=function(){var e=this,t=this.props,n=t.node,o=t.update,a=n.value;return r.createElement("div",{ref:function(t){return e.selfRef=t},draggable:!0,onDragStart:function(t){return N(t,e.props.node,e.getBoundingRect)},style:{width:"100%",height:"100%",backgroundColor:"#ffc0cb75",padding:5,borderRadius:3}},r.createElement("textarea",{className:"form-control",name:"value",placeholder:"Type here...",value:a,onChange:function(e){return o(n.id,{value:e.target.value})}}))},n}(r.Component),S=function(e){var t=e.node,n=e.renderEditBlock,a=e.value,d=e.onChange,i=e.width,l=e.height,s=a.focusedNodeId;return r.createElement("div",{onClick:function(e){e.stopPropagation(),d(k(a,t))},style:t.id===s?{borderStyle:"dashed",borderWidth:1,borderColor:"orange"}:{}},r.createElement(o.ResizableBox,{className:"box",width:i,height:l,onResizeStart:function(e){e.preventDefault(),e.stopPropagation()},onResize:function(e,r){var n=r.size,o=n.width,i=n.height;d(I(a,t.id,{width:o,height:i}))}},"col"===t.type?r.createElement(D,{key:"col_"+t.id,node:t,renderEditBlock:n,value:a,onChange:d}):"row"===t.type?r.createElement(P,{key:"row_"+t.id,node:t,renderEditBlock:n,value:a,onChange:d}):"markdown"===t.type?r.createElement(T,{node:t,update:function(e,t){return d(I(a,e,t))}}):"layer"===t.type?r.createElement(B,{key:"layer_"+t.id,node:t,renderEditBlock:n,value:a,onChange:d}):r.createElement(R,{key:"image_"+t.id,node:t,renderEditBlock:n,value:a,onChange:d})))},W=function(e){var t=e.node,n=e.renderEditBlock,o=e.value,a=e.onChange;return r.createElement(S,{width:t.width,height:t.height,renderEditBlock:n,node:t,value:o,onChange:a})},M=function(e){function n(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={value:t.props.value},t}return t.__extends(n,e),n.prototype.componentDidMount=function(){if(this.props.onChange){var e=this.state.value;this.props.onChange(e)}},n.prototype.componentDidUpdate=function(e,r){if(this.props.onChange&&this.state.value!==r.value&&this.state.value!==this.props.value){var n=this.state.value;this.props.onChange(n)}else this.props.value&&e.value!==this.props.value&&this.props.value!==this.state.value&&this.setState({value:this.props.value});this.state.value.byId!==r.value.byId&&this.state.value.undoStack===r.value.undoStack&&this.setState({value:t.__assign({},this.state.value,{undoStack:[a.cloneDeep(r.value.byId)].concat(this.state.value.undoStack).slice(0,10)})})},n.prototype.render=function(){var e=this,t=this.props.renderEditBlock,n=this.state.value,o=n.byId,a=n.rootNodeId,d=o[a];return r.createElement("div",{style:{position:"relative",width:d.width,height:d.height}},r.createElement(D,{key:"col_"+d.id,node:d,renderEditBlock:t,value:this.state.value,onChange:function(t){return e.setState({value:t})}}))},n.defaultProps={renderEditBlock:W,onChange:function(e){}},n}(r.Component);function O(e){return!!e.borderWidth&&e.borderWidth>0||!!e.borderTopWidth&&e.borderTopWidth>0||!!e.borderBottomWidth&&e.borderBottomWidth>0||!!e.borderLeftWidth&&e.borderLeftWidth>0||!!e.borderRightWidth&&e.borderRightWidth>0}var L=function(e){return{color:e.color||void 0,display:e.display||void 0,flexDirection:e.flexDirection||void 0,justifyContent:e.justifyContent||void 0,alignItems:e.alignItems||void 0,backgroundColor:e.backgroundColor||void 0,borderWidth:void 0!==e.borderWidth?e.borderWidth:0,borderTopWidth:void 0!==e.borderTopWidth?e.borderTopWidth:void 0,borderBottomWidth:void 0!==e.borderBottomWidth?e.borderBottomWidth:void 0,borderLeftWidth:void 0!==e.borderLeftWidth?e.borderLeftWidth:void 0,borderRightWidth:void 0!==e.borderRightWidth?e.borderRightWidth:void 0,borderStyle:e.borderStyle?e.borderStyle||void 0:O(e)?"solid":void 0}},F=function(e){var n=e.byId,o=e.node,a=e.renderPreviewBlock,i=void 0===a?j:a;if(!o)return null;switch(o.type){case"markdown":return r.createElement("div",{key:o.id,style:t.__assign({},L(o),{height:o.height,width:o.width})},r.createElement(d,{source:o.value}));case"layer":return r.createElement("div",{key:o.id,style:t.__assign({position:"relative"},L(o),{height:o.height,width:o.width})},o.childrenIds.map(function(e){var t=n[e];return r.createElement("div",{key:t.id,style:{position:"absolute",top:t.top||0,left:t.left||0}},i({byId:n,node:n[e],renderPreviewBlock:i}))}));case"image":return r.createElement("div",{key:o.id,style:{height:"100%",width:"100%"}},r.createElement("img",{src:o.value}));case"col":return r.createElement("div",{key:o.id,style:t.__assign({},L(o),{width:o.width,height:o.height,display:"flex",flexDirection:"column"})},o.childrenIds.map(function(e){return i({byId:n,node:n[e],renderPreviewBlock:i})}));case"row":return r.createElement("div",{key:o.id,style:t.__assign({},L(o),{width:o.width,height:o.height,display:"flex",flexDirection:"row"})},o.childrenIds.map(function(e){return i({byId:n,node:n[e],renderPreviewBlock:i})}));case"custom":return null}},j=function(e){var t=e.byId,n=e.node,o=e.renderPreviewBlock;return r.createElement(F,{key:"node_"+n.id,node:n,byId:t,renderPreviewBlock:o})},H=function(e){var t=e.byId,n=e.node,o=e.onSelect,a=e.navClassName,d=void 0===a?"breadcrumb":a,i=e.itemClassName,l=void 0===i?"breadcrumb-item btn btn-link active":i;if(!n)return null;for(var s=[],u=n.id;u;){var c=t[u];if(!c)break;s.unshift({label:c.type+"-"+c.id,id:c.id}),u=c.parentId}return r.createElement("nav",{"aria-label":"breadcrumb"},r.createElement("ol",{className:d},s.map(function(e){return r.createElement("li",{onClick:function(){return o(e.id)},key:"crumb_"+e.id,className:l,"aria-current":"page"},e.label)})))};function z(e,r){var n=e.byId,o=e.rootNodeId,a=e.focusedNodeId,d=(r?r.parentId:a)||o,i=n[d],l=["col","layer"];if((!i||l.indexOf(i.type)<0)&&(d=i?i.parentId:null,i=d?n[d]:i,!i||l.indexOf(i.type)<0))return{error:"Can only add a row inside "+l.join(", ")+", please select a column by clicking on it",value:e};var s=m(n,"row"),u=t.__assign({type:"row",height:100,width:i&&i.width?i.width:500},r,{id:s,name:s,childrenIds:[]});n=c(n,u,i.id),i=n[d];var p={};if("col"===i.type&&i&&i.childrenIds.length>=1)for(var h=i.height/i.childrenIds.length,f=0,g=i.childrenIds;f<g.length;f++){var v=g[f];p[v]=t.__assign({},n[v],{height:h})}return{createdBlock:u,value:t.__assign({},e,{byId:t.__assign({},n,p),focusedNodeId:a||u.id})}}function q(e,r){var n=e.byId,o=e.rootNodeId,a=e.focusedNodeId,d=(r?r.parentId:a)||o,i=n[d],l=["row","layer"];if((!i||l.indexOf(i.type)<0)&&(d=i?i.parentId:null,i=d?n[d]:i,!i||l.indexOf(i.type)<0))return{error:"Can only add a column inside "+l.join(", ")+", please select a column by clicking on it",value:e};var s=m(n,"col"),u=t.__assign({type:"col",width:100,height:i.height?i.height:100},r,{id:s,name:s,childrenIds:[]});n=c(n,u,d),i=n[d];var p={};if("row"===i.type&&i&&i.childrenIds.length>=1)for(var h=i.width/i.childrenIds.length,f=0,g=i.childrenIds;f<g.length;f++){var v=g[f];p[v]=t.__assign({},n[v],{width:h})}return{createdBlock:u,value:t.__assign({},e,{byId:t.__assign({},n,p),focusedNodeId:a||u.id})}}function U(e,r){var n=e.byId,o=e.rootNodeId,a=e.focusedNodeId,d=(r?r.parentId:a)||o,i=n[d],l=["row","col","layer"];if(!i||l.indexOf(i.type)<0)return{error:"Can only add markdown text inside "+l.join(", "),value:e};var s=m(n,"markdown"),u=t.__assign({type:"markdown",width:Math.max(1,i.width-20),height:Math.max(1,i.height-20)},r,{id:s,name:s,childrenIds:[]});return{createdBlock:u,value:t.__assign({},e,{byId:c(n,u,d),focusedNodeId:u.id})}}function J(e,r){var n=r&&r.value?r.value:window.prompt("Please enter image url","http://lorempixel.com/200/200/");if(null===n)return{error:"no image selected",value:e};var o=e.byId,a=e.rootNodeId,d=e.focusedNodeId,i=(r?r.parentId:d)||a,l=o[i],s=["row","col","layer"];if(!l||s.indexOf(l.type)<0)return{error:"Can only add an image inside "+s.join(", "),value:e};var u=m(o,"image"),p=t.__assign({type:"image",value:n,width:200,height:200},r,{id:u,name:u,childrenIds:[]});return{createdBlock:p,value:t.__assign({},e,{byId:c(o,p,i),focusedNodeId:p.id})}}function A(e,r){var n=e.byId,o=e.rootNodeId,a=e.focusedNodeId,d=(r?r.parentId:a)||o,i=n[d],l=["row","col","layer"];if(!i||l.indexOf(i.type)<0)return{error:"Can only add a layer inside "+l.join(", "),value:e};var s=m(n,"layer"),u=t.__assign({type:"layer",width:Math.max(1,i.width-20),height:Math.max(1,i.height-20)},r,{id:s,name:s,childrenIds:[]});return{createdBlock:u,value:t.__assign({},e,{byId:c(n,u,d),focusedNodeId:u.id})}}var X=function(e){function r(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={selectedMenu:null,selectedColor:null},t.toggleMenu=function(e){if(t.setState({selectedMenu:t.state.selectedMenu===e?null:e}),"color"===e||"backgroundColor"===e){var r=t.props.value,n=r.byId,o=r.focusedNodeId,a=o?n[o]:null;t.setState({selectedColor:a?a.color:void 0})}},t.renderColorMenuItem=function(e){var r=t.props.value,o=r.byId,a=r.focusedNodeId;if(a){var d=a?o[a]:null;return n.createElement(n.Fragment,null,n.createElement(Y,{onClick:function(){return t.toggleMenu(e)},color:d[e]}),t.state.selectedMenu===e&&n.createElement("div",{style:{position:"absolute",zIndex:100,backgroundColor:"white"}},n.createElement("button",{className:t.props.buttonClassName,onClick:function(){var r;t.props.updateBlock(a,(r={},r[e]=void 0,r)),t.toggleMenu(e)}},"Clear"),n.createElement("button",{className:t.props.buttonClassName,onClick:function(){var r;t.toggleMenu(e),t.props.updateBlock(a,(r={},r[e]=t.state.selectedColor,r))}},"Done"),n.createElement(i.SketchPicker,{color:t.state.selectedColor||void 0,onChangeComplete:function(e){var r=e.hex;t.setState({selectedColor:r})}})))}},t}return t.__extends(r,e),r.prototype.render=function(){var e=this.props,r=e.buttonClassName,o=e.breadCrumbsProps,a=e.value,d=a.byId,i=a.focusedNodeId,l=this.props,s=i?d[i]:null,u=l.focusNode,c=r;return n.createElement("div",null,n.createElement("div",null,n.createElement("button",{"aria-label":"add row",className:c,onClick:function(){return l.addRow()}},"+ Row"),n.createElement("button",{"aria-label":"add column",className:c,onClick:function(){return l.addCol()}},"+ Col"),n.createElement("button",{"aria-label":"add layer",className:c,onClick:function(){return l.addLayer()}},"+ Layer"),n.createElement("button",{"aria-label":"add markdown",className:c,onClick:function(){return l.addMarkDown()}},"+ Text"),n.createElement("button",{"aria-label":"add image",className:c,onClick:function(){return l.addImage()}},"+ Image"),n.createElement("button",{"aria-label":"add image",className:c,onClick:function(){l.onChange(function(e,t){if(!t)return alert("Please select node to add table to"),e;var r=window.prompt("Enter number or rows (max 10)","5");if(null===r)return e;var n=window.prompt("Enter number or columns (max 10)","5");if(null===n)return e;var o=window.prompt("Enter table width (max 400)","300");if(null===o)return e;var a=window.prompt("Enter table height (max 400)","300");if(null===a)return e;var d=Math.min(parseInt(o,10),400),i=Math.min(parseInt(a,10),400),l=q(e,{width:d,height:i,parentId:t}),s=l.value,u=l.createdBlock;if(!u)return e;e=s;for(var c=u.id,p=Math.max(1,Math.min(parseInt(r,10),10)),h=Math.max(1,Math.min(parseInt(n,10),10)),f=0;f<p;++f){var g=z(e,{height:i/p,parentId:c}),v=g.value,m=g.createdBlock;if(!m)break;e=v;for(var y=0;y<h;++y){var I=q(e,{parentId:m.id,height:m.height,width:m.width/h}),b=I.value,C=I.createdBlock;if(!C)break;e=b}}return e}(l.value,l.value.focusedNodeId))}},"+ Table"),n.createElement("button",{"aria-label":"undo",className:c,onClick:l.undo},"Undo"),n.createElement("button",{"aria-label":"redo",className:c,onClick:l.redo},"Redo")),s&&n.createElement("div",{style:{paddingLeft:15}},this.renderColorMenuItem("color"),this.renderColorMenuItem("backgroundColor"),n.createElement("button",{className:c,onClick:function(){return l.moveInDirection(s.id,"left")}},"⬅️"),n.createElement("button",{className:c,onClick:function(){return l.moveInDirection(s.id,"right")}},"➡️"),n.createElement("button",{className:c,onClick:function(){return l.moveInDirection(s.id,"up")}},"⬆"),n.createElement("button",{className:c,onClick:function(){return l.moveInDirection(s.id,"down")}},"⬇"),n.createElement("button",{className:c,onClick:function(){return l.onChange(function(e,t){if(!t)return e;var r=e.byId,n=r[t];if(!n)return e;var o=n.parentId,a=r[o];return a?C(e,t,o,{afterItemId:a.childrenIds[a.childrenIds.length-1]}):e}(l.value,l.value.focusedNodeId))}},"FlipToFront"),n.createElement("button",{"aria-label":"copy",className:c,onClick:function(){return l.copyFocused()}},"Copy"),n.createElement("button",{"aria-label":"paste",className:c,onClick:function(){return l.paste()}},"Paste"),n.createElement("button",{"aria-label":"delete",onClick:l.removeFocused},"🗑"),n.createElement("div",null,n.createElement(H,t.__assign({onSelect:function(e){return u(e,!0)},byId:d,node:s},o))),n.createElement("div",{style:{paddingBottom:20}},[{prop:"width",numeric:!0},{prop:"height",numeric:!0},{prop:"top",numeric:!0},{prop:"left",numeric:!0},{prop:"borderWidth",numeric:!0},{prop:"borderTopWidth",numeric:!0},{prop:"borderBottomWidth",numeric:!0},{prop:"borderLeftWidth",numeric:!0},{prop:"borderRightWidth",numeric:!0},{prop:"borderStyle",numeric:!1}].map(function(e){return n.createElement("div",{key:e.prop,style:{display:"inline-block",marginRight:10},className:"form-group"},n.createElement("label",{style:{marginRight:5},htmlFor:e.prop,className:"form-label"},e.prop),n.createElement("input",{name:e.prop,className:"form-control",key:"prop_"+e.prop,value:void 0===s[e.prop]?"":s[e.prop],onChange:(t=s.id,r=e.prop,o=e.numeric,function(e){var n;l.updateBlock(t,(n={},n[r]=o?e.target.value?parseInt(e.target.value,10):void 0:e.target.value,n))}),type:e.numeric?"numeric":void 0}));var t,r,o}))))},r}(n.Component),Y=function(e){return n.createElement("button",{style:{borderWidth:1,fontSize:11,borderStyle:"solid",justifyContent:"flex-start"},onClick:e.onClick},n.createElement("div",{style:{display:"flex"}},n.createElement("div",{style:{borderWidth:1,borderRadius:3,borderStyle:"solid",width:20,height:20,backgroundColor:e.color||void 0}})," ",e.color?"":"none"))};var G=function(e){function n(){var r=null!==e&&e.apply(this,arguments)||this;return r.addRow=function(e){var t=z(r.props.value,e),n=t.error,o=t.value;n?alert(n):r.props.onChange(o)},r.addCol=function(e){var t=q(r.props.value,e),n=t.error,o=t.value;n?alert(n):r.props.onChange(o)},r.addMarkDown=function(e){var t=U(r.props.value,e),n=t.error,o=t.value;n?alert(n):r.props.onChange(o)},r.addImage=function(e){var t=J(r.props.value,e),n=t.error,o=t.value;n?alert(n):r.props.onChange(o)},r.addLayer=function(e){var t=A(r.props.value,e),n=t.error,o=t.value;n?alert(n):r.props.onChange(o)},r.removeFocused=function(){var e=r.props.value.focusedNodeId;e&&r.destroy(e)},r.focusNode=function(e,t){void 0===t&&(t=!0);var n=r.props.value;r.props.onChange(k(n,e,t))},r.create=function(e){r.props.onChange(y(r.props.value,e))},r.updateBlock=function(e,t){r.props.onChange(I(r.props.value,e,t))},r.destroy=function(e){r.props.onChange(b(r.props.value,e))},r.move=function(e,t,n){void 0===n&&(n={}),r.props.onChange(C(r.props.value,e,t,n))},r.moveInDirection=function(e,t){r.props.onChange(w(r.props.value,e,{direction:t}))},r.copyFocused=function(){var e=r.props.value,n=e.byId,o=e.focusedNodeId;if(o){var a=n[o];r.props.onChange(t.__assign({},r.props.value,{copiedNode:f(n,a)}))}},r.paste=function(){r.props.onChange(g(r.props.value))},r.undo=function(){var e=r.props.value,n=e.byId,o=e.undoStack,a=e.redoStack;if(o.length>0){var d=o[0],i=[n].concat(a),l=o.slice(1);r.props.onChange(t.__assign({},r.props.value,{byId:d,undoStack:l,redoStack:i}))}},r.redo=function(){var e=r.props.value,n=e.byId,o=e.undoStack,a=e.redoStack;if(a.length>0){var d=a[0],i=[n].concat(o),l=a.slice(1);r.props.onChange(t.__assign({},r.props.value,{byId:d,undoStack:i,redoStack:l}))}},r}return t.__extends(n,e),n.prototype.render=function(){var e=this,n=this.props,o=n.UiComponent,a=n.onChange,d=n.value,i=n.controlUiProps;return r.createElement(o,t.__assign({value:d,onChange:a,addRow:this.addRow,addCol:this.addCol,addImage:this.addImage,addLayer:this.addLayer,addMarkDown:this.addMarkDown,moveInDirection:this.moveInDirection,copyFocused:this.copyFocused,paste:this.paste,focusNode:function(t,r){return e.focusNode(d.byId[t],r)},removeFocused:this.removeFocused,updateBlock:this.updateBlock,undo:this.undo,redo:this.redo},i))},n.defaultProps={UiComponent:X},n}(r.Component);exports.AbsoluteLayerBlock=B,exports.BlockBreadCrumbs=H,exports.BlockEditor=M,exports.BlockEditorControl=G,exports.BlockEditorControlDefaultUI=X,exports.DraggableColBlock=D,exports.DraggableRowBlock=P,exports.ImageBlock=R,exports.MarkdownBlock=T,exports.Preview=F,exports.ResizableBlock=S,exports.addCol=q,exports.addImage=J,exports.addLayer=A,exports.addMarkDown=U,exports.addRow=z,exports.create=y,exports.deepCopy=f,exports.defaultRenderEditBlock=W,exports.defaultRenderPreviewBlock=j,exports.destroy=b,exports.focusNode=k,exports.getDragPositionRelativeToTarget=x,exports.hasDescendent=u,exports.move=C,exports.moveInDirection=w,exports.newBlockId=m,exports.onDragStart=N,exports.onDropped=E,exports.parseTypes=_,exports.paste=g,exports.pasteChild=v,exports.placeNodeInParent=c,exports.reinsertIntoList=p,exports.removeNode=s,exports.update=I,exports.updateNode=l;
 //# sourceMappingURL=react-movable-block-editor.cjs.production.js.map

dist/react-movable-block-editor.es.production.js

@@ -1,2 +0,2 @@
-import{__assign as e,__extends as t}from"tslib";import*as r from"react";import n,{createElement as o,Component as d,Children as a}from"react";import{ResizableBox as i}from"react-resizable";import{cloneDeep as l}from"lodash-es";import u from"react-markdown";import{SketchPicker as s}from"react-color";function c(t,r){var n;return e({},t,(n={},n[r.id]=r,n))}function p(t,r){var n,o=t[r];if(!o)return t;if(o&&o.parentId){var d=t[o.parentId];if(d){var a=d.childrenIds.findIndex(function(e){return e===o.id});if(a>=0){var i=d.childrenIds.filter(function(e){return e!==o.id});t=c(t,e({},d,{childrenIds:i}))}}}return e({},t,(n={},n[r]=void 0,n))}function h(e,t,r){var n=e[t];if(!n)return!1;if(n.childrenIds.indexOf(r)>=0)return!0;for(var o=0,d=n.childrenIds;o<d.length;o++){var a=d[o],i=h(e,a,r);if(i)return!1}return!1}function f(t,r,n,o){if(!r)return t;if(h(t,r.id,n))return console.warn("node ",r.id," has ",n," as child, so cannot make it into",r.id,"'s parent"),t;if(r.id===n)return console.warn("Cannot place into self: ",{id:r.id,newParentId:n}),t;if(r&&r.parentId&&r.parentId!==n){var d=t[r.parentId];if(d){var a=d.childrenIds.filter(function(e){return e!==r.id});t=c(t,e({},d,{childrenIds:a}))}}var i=t[n];if(i){a=v(i.childrenIds,r.id,o);t=c(t,e({},i,{childrenIds:a}))}return c(t,e({},r,{parentId:n}))}function v(t,r,n){if(void 0===n&&(n={}),r===n.beforeItemId||r===n.afterItemId)return console.warn("Cannot place relative to self: ",e({itemId:r},n)),t;t=t.filter(function(e){return e!==r});var o=n.beforeItemId,d=n.afterItemId,a=-1;if(o?a=t.findIndex(function(e){return e===o}):d&&(a=t.findIndex(function(e){return e===d})+1),a>=0){var i=t.slice();return i.splice(a,0,r),i}return t.concat([r])}var g=require("lodash-es").cloneDeep;function y(t,r){return r?e({},r,{value:g(r.value),childrenIds:r.childrenIds.slice(),children:r.childrenIds.map(function(e){return y(t,t[e])})}):r}function I(t){var r=t.byId,n=(t||{copiedNode:null}).copiedNode;if(!n)return t;n=g(n);var o=m(r,n).byId;if(n.parentId){var d=r[n.parentId];if(d)return e({},t,{byId:f(o,n,n.parentId,{afterItemId:d.childrenIds[d.childrenIds.length-1]})})}return t}function m(t,r){var n;r.id=b(t,r.type);var o=r.children;if(r.children=void 0,t=e({},t,(n={},n[r.id]=r,n)),o)for(var d=0,a=0,i=o;a<i.length;a++){var l=i[a];l.parentId=r.id;var u=m(t,l),s=u.byId,c=u.newId;r.childrenIds[d]=c,t=s,++d}return{byId:t,newId:r.id}}function b(e,t){void 0===t&&(t="node");for(var r=Object.keys(e).length;e[r];)r++;return t+"_"+r}function w(t,r){var n=t.byId,o=b(n),d=e({},n[o],r);return e({},t,{byId:c(n,d)})}function C(t,r,n){var o=t.byId,d=e({},o[r],n);return e({},t,{byId:c(o,d)})}function k(t,r){var n=t.byId,o=t.rootNodeId,d=t.focusedNodeId;return o===r?(alert("Cannot destroy root node"),e({},t,{byId:n,focusedNodeId:d})):e({},t,{byId:p(n,r),focusedNodeId:d===r?null:d})}function N(t,r,n,o){if(void 0===o&&(o={}),!n)return t;var d=t.byId,a=d[r];return e({},t,{byId:f(d,e({},a,{isPlaceHolder:o.isPlaceHolder},o.absolutePos?{top:o.absolutePos.top,left:o.absolutePos.left}:{}),n,o)})}function D(t,r,n){void 0===n&&(n={});var o=t.byId,d=o[r];if(!d)return t;var a=d.parentId;if(!a)return t;var i=o[a];if(!i)return t;var l=o[i.parentId],u=i.childrenIds.indexOf(r);if(u<0)return t;var s={};if("row"===i.type)if("left"===n.direction){if(0===u)return t;s={beforeItemId:i.childrenIds[u-1]}}else{if("right"!==n.direction){if(l&&"col"===l.type){var c=l.childrenIds.indexOf(i.id);return c>0&&"up"===n.direction?N(t,r,l.childrenIds[c-1]):c<l.childrenIds.length-1&&"down"===n.direction?N(t,r,l.childrenIds[c+1]):t}return t}if(u>=i.childrenIds.length-1)return t;s={afterItemId:i.childrenIds[u+1]}}else if("col"===i.type)if("up"===n.direction){if(0===u)return t;s={beforeItemId:i.childrenIds[u-1]}}else{if("down"!==n.direction){if(l&&"row"===l.type){c=l.childrenIds.indexOf(i.id);return c>0&&"left"===n.direction?N(t,r,l.childrenIds[c-1]):c<l.childrenIds.length-1&&"right"===n.direction?N(t,r,l.childrenIds[c+1]):t}return t}if(u>=i.childrenIds.length-1)return t;s={afterItemId:i.childrenIds[u+1]}}else if("layer"===i.type){var p=("up"===n.direction?-1:"down"===n.direction?1:0)*(n.stepPx||1),h=("left"===n.direction?-1:"right"===n.direction?1:0)*(n.stepPx||1);s={absolutePos:{top:(d.top||0)+p,left:(d.left||0)+h}}}return e({},t,{byId:f(o,e({},d,{isPlaceHolder:s.isPlaceHolder},s.absolutePos?{top:s.absolutePos.top,left:s.absolutePos.left}:{}),a,s)})}function B(t,r,n){if(void 0===n&&(n=!0),!r)return t;var o=t.focusedNodeId;return e({},t,{focusedNodeId:n?r.id:o===r.id?null:o})}function P(e){var t=e.filter(function(e){return 0===e.indexOf("draggednodeid:")}),r=e.filter(function(e){return 0===e.indexOf("draggednodetype:")});if(1!==t.length||1!==r.length)return{draggedNodeId:"notanode",draggedNodeType:null};var n=t[0].slice("draggednodeid:".length),o=r[0].slice("draggednodetype:".length);return{draggedNodeId:n,draggedNodeType:o}}function x(e,t){return t?{left:e.clientX-t.left,top:e.clientY-t.top,width:t.width,height:t.height}:null}function R(e,t,r){e.stopPropagation();var n=x(e,r());n&&e.dataTransfer.setData("text/plain",JSON.stringify({startLeft:n.left,startTop:n.top})),e.dataTransfer.setData("draggednodeid:"+t.id,""),e.dataTransfer.setData("draggednodetype:"+t.type,"")}function T(e,t,r,n){void 0===r&&(r={});var o=P(e).draggedNodeId;return N(n,o,t,r)}var E=function(e){function r(){var t=null!==e&&e.apply(this,arguments)||this;return t.selfRef=null,t.getBoundingRect=function(){return t.selfRef&&t.selfRef.getBoundingClientRect?t.selfRef.getBoundingClientRect():null},t.canDrop=function(e){var t=P(e).draggedNodeType;return"row"===t||"col"===t||"markdown"===t||"image"===t||"layer"===t||"custom"===t},t.onDrop=function(e,r){if(void 0===r&&(r=!1),t.canDrop(e.dataTransfer.types)){e.stopPropagation();var n=P(e.dataTransfer.types).draggedNodeId;if(n){var o=x(e,t.getBoundingRect()),d=t.props.node.childrenIds.length?t.props.node.childrenIds[t.props.node.childrenIds.length-1]:void 0,a=JSON.parse(e.dataTransfer.getData("text/plain"));t.props.onChange(T(e.dataTransfer.types,t.props.node.id,o?{afterItemId:d,absolutePos:{top:o.top-a.startTop,left:o.left-a.startLeft}}:void 0,t.props.value))}}},t.onDragEnter=function(e){e.preventDefault()},t.onDragOver=function(e){t.canDrop(e.dataTransfer.types)&&(e.preventDefault(),e.stopPropagation())},t}return t(r,e),r.prototype.renderChild=function(e){var t=this.props,r=t.value,n=t.onChange,o=t.renderEditBlock,d=r.byId[e];return o({node:d,renderEditBlock:o,value:r,onChange:n})},r.prototype.render=function(){var e=this,t=this.props,r=t.node,n=t.value.byId,d=r.childrenIds;return o("div",{ref:function(t){return e.selfRef=t},onDragOver:this.onDragOver,onDrop:this.onDrop,draggable:!0,onDragStart:function(t){return R(t,e.props.node,e.getBoundingRect)},style:{position:"relative",width:r.width,height:r.height,backgroundColor:r.backgroundColor||"#f5f5f5a3",borderRadius:3}},d.map(function(t){var r=n[t],d=o("div",{key:"node_"+t,style:{position:"absolute",width:r.width,height:r.height,top:r.top,left:r.left}},e.renderChild(t));return d}))},r}(d),S=function(r){function n(){var t=null!==r&&r.apply(this,arguments)||this;return t.selfRef=null,t.state={wantToPlaceNext:null},t.getBoundingRect=function(){return t.selfRef&&t.selfRef.getBoundingClientRect?t.selfRef.getBoundingClientRect():null},t.canDrop=function(e){var r=t.props,n=r.value.byId,o=r.node,d=o.parentId?n[o.parentId]:null,a=P(e).draggedNodeType;return"col"===a&&d&&"row"===d.type||!t.props.children&&("row"===a||"markdown"===a||"image"===a||"layer"===a||"custom"===a)},t.shouldPlaceBefore=function(e,r){var n=x(e,t.getBoundingRect()),o=n&&("y"===r?n.top/n.height<.45:n.left/n.width<.45);return o},t.onDrop=function(r,n){if(void 0===n&&(n=!1),t.canDrop(r.dataTransfer.types)){r.stopPropagation(),n||null===t.state.wantToPlaceNext||t.setState({wantToPlaceNext:null});var o=P(r.dataTransfer.types),d=o.draggedNodeId,a=o.draggedNodeType;if(d)if("col"===a){var i=t.shouldPlaceBefore(r,"x"),l=i?{beforeItemId:t.props.node.id}:{afterItemId:t.props.node.id};t.props.onChange(T(r.dataTransfer.types,t.props.node.parentId||"",e({},l,{isPlaceHolder:n}),t.props.value))}else{i=t.shouldPlaceBefore(r,"y");var u=t.props.node.childrenIds,s=u.length;l=s?i?{beforeItemId:u[0]}:{afterItemId:u[s-1]}:null;t.props.onChange(T(r.dataTransfer.types,t.props.node.id,e({isPlaceHolder:n},l),t.props.value))}}},t.onDragEnter=function(e){e.preventDefault()},t.onDragOver=function(e){if(t.canDrop(e.dataTransfer.types)){e.preventDefault(),e.stopPropagation();var r=P(e.dataTransfer.types).draggedNodeType;if("col"===r){var n=t.shouldPlaceBefore(e,"x");n&&"left"!==t.state.wantToPlaceNext?t.setState({wantToPlaceNext:"left"}):n||"right"===t.state.wantToPlaceNext||t.setState({wantToPlaceNext:"right"})}else{n=t.shouldPlaceBefore(e,"y");t.setState({wantToPlaceNext:n?"firstChild":"lastChild"})}}},t.onDragLeave=function(e){null!==t.state.wantToPlaceNext&&t.setState({wantToPlaceNext:null})},t}return t(n,r),n.prototype.renderChild=function(e){var t=this.props,r=t.value,n=t.onChange,o=t.renderEditBlock,d=r.byId[e];return o({node:d,renderEditBlock:o,value:r,onChange:n})},n.prototype.render=function(){var e=this,t=this.props.children,r=this.props,n=r.node,d=r.value.byId,i=this.state.wantToPlaceNext,l=n.childrenIds,u="firstChild"===i?3:0;return o("div",{key:"col_"+n.id,style:{display:"flex",flexDirection:"row",width:"100%",height:"100%"}},"left"===i&&o("div",{style:{height:"100%",width:3,backgroundColor:"white"}}),o("div",{ref:function(t){return e.selfRef=t},onDragOver:this.onDragOver,onDragLeave:this.onDragLeave,onDrop:this.onDrop,onDragEnter:this.onDragEnter,draggable:!0,onDragStart:function(t){return R(t,e.props.node,e.getBoundingRect)},style:{width:"100%",height:"100%",borderRadius:3,backgroundColor:this.props.node.isPlaceHolder?"grey":this.props.node.backgroundColor||"#ffffffa8",borderStyle:"solid",borderWidth:1}},"firstChild"===i&&o("div",{style:{height:10,width:"100%",backgroundColor:"blue"}}),a.count(t)?t:l.map(function(t){var r=d[t],n=o("div",{className:"drag-node",key:"node_"+t,style:{position:"absolute",width:r.width,height:r.height,top:u,left:0}},e.renderChild(t));return u+=r.height,n}),"lastChild"===i&&o("div",{style:{top:u,position:"absolute",height:10,width:"100%",backgroundColor:"orange"}})),"right"===i&&o("div",{style:{height:"100%",width:3,backgroundColor:"white"}}))},n}(d),W=function(r){function n(){var t=null!==r&&r.apply(this,arguments)||this;return t.state={wantToPlaceNext:null},t.selfRef=null,t.getBoundingRect=function(){return t.selfRef&&t.selfRef.getBoundingClientRect?t.selfRef.getBoundingClientRect():null},t.canDrop=function(e){var r=P(e).draggedNodeType,n=t.props,o=n.value.byId,d=n.node,a=d.parentId?o[d.parentId]:null;return"row"===r&&a&&"col"===a.type||!t.props.children&&("col"===r||"markdown"===r||"image"===r||"layer"===r||"custom"===r)},t.shouldPlaceBefore=function(e,r){var n=x(e,t.getBoundingRect()),o=n&&("y"===r?n.top/n.height<.3:n.left/n.width<.3);return o},t.onDrop=function(r,n){if(void 0===n&&(n=!1),t.canDrop(r.dataTransfer.types)){r.stopPropagation(),n||null===t.state.wantToPlaceNext||t.setState({wantToPlaceNext:null});var o=P(r.dataTransfer.types),d=o.draggedNodeId,a=o.draggedNodeType;if(d){var i=t.shouldPlaceBefore(r,"y");if("row"===a){var l=i?{beforeItemId:t.props.node.id}:{afterItemId:t.props.node.id};t.props.onChange(T(r.dataTransfer.types,t.props.node.parentId||"",e({},l,{isPlaceHolder:n}),t.props.value))}else{var u=t.shouldPlaceBefore(r,"x"),s=t.props.node.childrenIds,c=s.length;l=c?u?{beforeItemId:s[0]}:{afterItemId:s[c-1]}:null;t.props.onChange(T(r.dataTransfer.types,t.props.node.id,e({isPlaceHolder:n},l),t.props.value))}}}},t.onDragEnter=function(e){e.preventDefault()},t.onDragOver=function(e){var r=P(e.dataTransfer.types).draggedNodeType;if(t.canDrop(e.dataTransfer.types))if(e.preventDefault(),e.stopPropagation(),"row"===r){var n=t.shouldPlaceBefore(e,"y");n&&"top"!==t.state.wantToPlaceNext?t.setState({wantToPlaceNext:"top"}):n||"bottom"===t.state.wantToPlaceNext||t.setState({wantToPlaceNext:"bottom"})}else{n=t.shouldPlaceBefore(e,"x");t.setState({wantToPlaceNext:n?"firstChild":"lastChild"})}},t.onDragLeave=function(e){null!==t.state.wantToPlaceNext&&t.setState({wantToPlaceNext:null})},t}return t(n,r),n.prototype.render=function(){var e=this,t=this.props.children,r=this.props,n=r.node,d=r.value,i=r.onChange,l=r.renderEditBlock,u=this.state.wantToPlaceNext,s="firstChild"===u?3:0;return o("div",{key:"row_"+n.id},"top"===u&&o("div",{style:{height:3,width:"100%",backgroundColor:"black"}}),o("div",{ref:function(t){return e.selfRef=t},onDragOver:this.onDragOver,onDragLeave:this.onDragLeave,onDragEnter:this.onDragEnter,onDrop:this.onDrop,draggable:!0,onDragStart:function(t){return R(t,e.props.node,e.getBoundingRect)},style:{position:"relative",height:n.height,width:n.width,borderStyle:"dashed",borderWidth:0,borderBottomWidth:1,backgroundColor:n.isPlaceHolder?"darkgrey":n.backgroundColor||"#b5bbb9b0"}},"firstChild"===u&&o("div",{style:{height:"100%",width:3,backgroundColor:"blue"}}),a.count(t)?t:n.childrenIds.map(function(e){var t=d.byId[e],r=o("div",{className:"drag-node",key:"node_"+t.id,style:{position:"absolute",width:t.width,height:t.height,top:0,left:s}},l({node:t,renderEditBlock:l,value:d,onChange:i}));return s+=t.width,r}),"lastChild"===u&&o("div",{style:{position:"absolute",left:s,height:"100%",width:3,backgroundColor:"orange"}})),"bottom"===u&&o("div",{style:{height:3,width:"100%",backgroundColor:"green"}}))},n}(d),O=function(e){function r(){var t=null!==e&&e.apply(this,arguments)||this;return t.selfRef=null,t.getBoundingRect=function(){return t.selfRef&&t.selfRef.getBoundingClientRect?t.selfRef.getBoundingClientRect():null},t}return t(r,e),r.prototype.render=function(){var e=this,t=this.props.node;return o("div",{ref:function(t){return e.selfRef=t},draggable:!0,onDragStart:function(t){return R(t,e.props.node,e.getBoundingRect)},style:{width:"100%",height:"100%",backgroundColor:"violet",padding:5,borderRadius:3}},o("img",{style:{width:"100%",height:"100%"},src:t.value}))},r}(d),M=function(e){function r(){var t=null!==e&&e.apply(this,arguments)||this;return t.selfRef=null,t.getBoundingRect=function(){return t.selfRef&&t.selfRef.getBoundingClientRect?t.selfRef.getBoundingClientRect():null},t}return t(r,e),r.prototype.render=function(){var e=this,t=this.props,r=t.node,n=t.update,d=r.value;return o("div",{ref:function(t){return e.selfRef=t},draggable:!0,onDragStart:function(t){return R(t,e.props.node,e.getBoundingRect)},style:{width:"100%",height:"100%",backgroundColor:"#ffc0cb75",padding:5,borderRadius:3}},o("textarea",{className:"form-control",name:"value",placeholder:"Type here...",value:d,onChange:function(e){return n(r.id,{value:e.target.value})}}))},r}(d),L=function(e){var t=e.node,r=e.renderEditBlock,n=e.value,d=e.onChange,a=e.width,l=e.height,u=n.focusedNodeId;return o("div",{onClick:function(e){e.stopPropagation(),d(B(n,t))},style:t.id===u?{borderStyle:"dashed",borderWidth:1,borderColor:"orange"}:{}},o(i,{className:"box",width:a,height:l,onResizeStart:function(e){e.preventDefault(),e.stopPropagation()},onResize:function(e,r){var o=r.size,a=o.width,i=o.height;d(C(n,t.id,{width:a,height:i}))}},"col"===t.type?o(S,{key:"col_"+t.id,node:t,renderEditBlock:r,value:n,onChange:d}):"row"===t.type?o(W,{key:"row_"+t.id,node:t,renderEditBlock:r,value:n,onChange:d}):"markdown"===t.type?o(M,{node:t,update:function(e,t){return d(C(n,e,t))}}):"layer"===t.type?o(E,{key:"layer_"+t.id,node:t,renderEditBlock:r,value:n,onChange:d}):o(O,{key:"image_"+t.id,node:t,renderEditBlock:r,value:n,onChange:d})))},_=function(e){var t=e.node,r=e.renderEditBlock,n=e.value,d=e.onChange;return o(L,{width:t.width,height:t.height,renderEditBlock:r,node:t,value:n,onChange:d})},F=function(r){function n(){var e=null!==r&&r.apply(this,arguments)||this;return e.state={value:e.props.value},e}return t(n,r),n.prototype.componentDidMount=function(){if(this.props.onChange){var e=this.state.value;this.props.onChange(e)}},n.prototype.componentDidUpdate=function(t,r){if(this.props.onChange&&this.state.value!==r.value&&this.state.value!==this.props.value){var n=this.state.value;this.props.onChange(n)}else this.props.value&&t.value!==this.props.value&&this.props.value!==this.state.value&&this.setState({value:this.props.value});this.state.value.byId!==r.value.byId&&this.state.value.undoStack===r.value.undoStack&&(console.log("ADD TO UNDO STACK....!!!",l(r.value.byId)),this.setState({value:e({},this.state.value,{undoStack:[r.value.byId].concat(this.state.value.undoStack)})}))},n.prototype.render=function(){var e=this,t=this.props.renderEditBlock,r=this.state.value,n=r.byId,d=r.rootNodeId,a=n[d];return o("div",{style:{position:"relative",width:a.width,height:a.height}},o(S,{key:"col_"+a.id,node:a,renderEditBlock:t,value:this.state.value,onChange:function(t){return e.setState({value:t})}}))},n.defaultProps={renderEditBlock:_,onChange:function(e){}},n}(d);function H(e){return!!e.borderWidth&&e.borderWidth>0||!!e.borderTopWidth&&e.borderTopWidth>0||!!e.borderBottomWidth&&e.borderBottomWidth>0||!!e.borderLeftWidth&&e.borderLeftWidth>0||!!e.borderRightWidth&&e.borderRightWidth>0}var j=function(e){return{color:e.color||void 0,display:e.display||void 0,flexDirection:e.flexDirection||void 0,justifyContent:e.justifyContent||void 0,alignItems:e.alignItems||void 0,backgroundColor:e.backgroundColor||void 0,borderWidth:void 0!==e.borderWidth?e.borderWidth:0,borderTopWidth:void 0!==e.borderTopWidth?e.borderTopWidth:void 0,borderBottomWidth:void 0!==e.borderBottomWidth?e.borderBottomWidth:void 0,borderLeftWidth:void 0!==e.borderLeftWidth?e.borderLeftWidth:void 0,borderRightWidth:void 0!==e.borderRightWidth?e.borderRightWidth:void 0,borderStyle:e.borderStyle?e.borderStyle||void 0:H(e)?"solid":void 0}},z=function(t){var r=t.byId,n=t.node,d=t.renderPreviewBlock,a=void 0===d?U:d;if(!n)return null;switch(n.type){case"markdown":return o("div",{key:n.id,style:e({},j(n),{height:n.height,width:n.width})},o(u,{source:n.value}));case"layer":return o("div",{key:n.id,style:e({position:"relative"},j(n),{height:n.height,width:n.width})},n.childrenIds.map(function(e){var t=r[e];return o("div",{key:t.id,style:{position:"absolute",top:t.top||0,left:t.left||0}},a({byId:r,node:r[e],renderPreviewBlock:a}))}));case"image":return o("div",{key:n.id,style:{height:"100%",width:"100%"}},o("img",{src:n.value}));case"col":return o("div",{key:n.id,style:e({},j(n),{width:n.width,height:n.height,display:"flex",flexDirection:"column"})},n.childrenIds.map(function(e){return a({byId:r,node:r[e],renderPreviewBlock:a})}));case"row":return o("div",{key:n.id,style:e({},j(n),{width:n.width,height:n.height,display:"flex",flexDirection:"row"})},n.childrenIds.map(function(e){return a({byId:r,node:r[e],renderPreviewBlock:a})}));case"custom":return null}},U=function(e){var t=e.byId,r=e.node,n=e.renderPreviewBlock;return o(z,{key:"node_"+r.id,node:r,byId:t,renderPreviewBlock:n})},A=function(e){var t=e.byId,r=e.node,n=e.onSelect,d=e.navClassName,a=void 0===d?"breadcrumb":d,i=e.itemClassName,l=void 0===i?"breadcrumb-item btn btn-link active":i;if(!r)return null;for(var u=[],s=r.id;s;){var c=t[s];if(!c)break;u.unshift({label:c.type+"-"+c.id,id:c.id}),s=c.parentId}return o("nav",{"aria-label":"breadcrumb"},o("ol",{className:a},u.map(function(e){return o("li",{onClick:function(){return n(e.id)},key:"crumb_"+e.id,className:l,"aria-current":"page"},e.label)})))};function J(t,r){var n=t.byId,o=t.rootNodeId,d=t.focusedNodeId,a=(r?r.parentId:d)||o,i=n[a],l=["col","layer"];if((!i||l.indexOf(i.type)<0)&&(a=i?i.parentId:null,i=a?n[a]:i,!i||l.indexOf(i.type)<0))return{error:"Can only add a row inside "+l.join(", ")+", please select a column by clicking on it",value:t};var u=b(n,"row"),s=e({type:"row",height:100,width:i&&i.width?i.width:500},r,{id:u,name:u,childrenIds:[]});n=f(n,s,i.id),i=n[a];var c={};if("col"===i.type&&i&&i.childrenIds.length>=1)for(var p=i.height/i.childrenIds.length,h=0,v=i.childrenIds;h<v.length;h++){var g=v[h];c[g]=e({},n[g],{height:p})}return{createdBlock:s,value:e({},t,{byId:e({},n,c),focusedNodeId:d||s.id})}}function q(t,r){var n=t.byId,o=t.rootNodeId,d=t.focusedNodeId,a=(r?r.parentId:d)||o,i=n[a],l=["row","layer"];if((!i||l.indexOf(i.type)<0)&&(a=i?i.parentId:null,i=a?n[a]:i,!i||l.indexOf(i.type)<0))return{error:"Can only add a column inside "+l.join(", ")+", please select a column by clicking on it",value:t};var u=b(n,"col"),s=e({type:"col",width:100,height:i.height?i.height:100},r,{id:u,name:u,childrenIds:[]});n=f(n,s,a),i=n[a];var c={};if("row"===i.type&&i&&i.childrenIds.length>=1)for(var p=i.width/i.childrenIds.length,h=0,v=i.childrenIds;h<v.length;h++){var g=v[h];c[g]=e({},n[g],{width:p})}return{createdBlock:s,value:e({},t,{byId:e({},n,c),focusedNodeId:d||s.id})}}function K(t,r){var n=t.byId,o=t.rootNodeId,d=t.focusedNodeId,a=(r?r.parentId:d)||o,i=n[a],l=["row","col","layer"];if(!i||l.indexOf(i.type)<0)return{error:"Can only add markdown text inside "+l.join(", "),value:t};var u=b(n,"markdown"),s=e({type:"markdown",width:Math.max(1,i.width-20),height:Math.max(1,i.height-20)},r,{id:u,name:u,childrenIds:[]});return{createdBlock:s,value:e({},t,{byId:f(n,s,a),focusedNodeId:s.id})}}function X(t,r){var n=r&&r.value?r.value:window.prompt("Please enter image url","http://lorempixel.com/200/200/");if(null===n)return{error:"no image selected",value:t};var o=t.byId,d=t.rootNodeId,a=t.focusedNodeId,i=(r?r.parentId:a)||d,l=o[i],u=["row","col","layer"];if(!l||u.indexOf(l.type)<0)return{error:"Can only add an image inside "+u.join(", "),value:t};var s=b(o,"image"),c=e({type:"image",value:n,width:200,height:200},r,{id:s,name:s,childrenIds:[]});return{createdBlock:c,value:e({},t,{byId:f(o,c,i),focusedNodeId:c.id})}}function Y(t,r){var n=t.byId,o=t.rootNodeId,d=t.focusedNodeId,a=(r?r.parentId:d)||o,i=n[a],l=["row","col","layer"];if(!i||l.indexOf(i.type)<0)return{error:"Can only add a layer inside "+l.join(", "),value:t};var u=b(n,"layer"),s=e({type:"layer",width:Math.max(1,i.width-20),height:Math.max(1,i.height-20)},r,{id:u,name:u,childrenIds:[]});return{createdBlock:s,value:e({},t,{byId:f(n,s,a),focusedNodeId:s.id})}}var G=function(r){function o(){var e=null!==r&&r.apply(this,arguments)||this;return e.state={selectedMenu:null,selectedColor:null},e.toggleMenu=function(t){if(e.setState({selectedMenu:e.state.selectedMenu===t?null:t}),"color"===t||"backgroundColor"===t){var r=e.props.value,n=r.byId,o=r.focusedNodeId,d=o?n[o]:null;e.setState({selectedColor:d?d.color:void 0})}},e.renderColorMenuItem=function(t){var r=e.props.value,o=r.byId,d=r.focusedNodeId;if(d){var a=d?o[d]:null;return n.createElement(n.Fragment,null,n.createElement(Q,{onClick:function(){return e.toggleMenu(t)},color:a[t]}),e.state.selectedMenu===t&&n.createElement("div",{style:{position:"absolute",zIndex:100,backgroundColor:"white"}},n.createElement("button",{className:e.props.buttonClassName,onClick:function(){var r;e.props.updateBlock(d,(r={},r[t]=void 0,r)),e.toggleMenu(t)}},"Clear"),n.createElement("button",{className:e.props.buttonClassName,onClick:function(){var r;e.toggleMenu(t),e.props.updateBlock(d,(r={},r[t]=e.state.selectedColor,r))}},"Done"),n.createElement(s,{color:e.state.selectedColor||void 0,onChangeComplete:function(t){var r=t.hex;e.setState({selectedColor:r})}})))}},e}return t(o,r),o.prototype.render=function(){var t=this.props,r=t.buttonClassName,o=t.breadCrumbsProps,d=t.value,a=d.byId,i=d.focusedNodeId,l=this.props,u=i?a[i]:null,s=l.focusNode,c=r;return n.createElement("div",null,n.createElement("div",null,n.createElement("button",{"aria-label":"add row",className:c,onClick:function(){return l.addRow()}},"+ Row"),n.createElement("button",{"aria-label":"add column",className:c,onClick:function(){return l.addCol()}},"+ Col"),n.createElement("button",{"aria-label":"add layer",className:c,onClick:function(){return l.addLayer()}},"+ Layer"),n.createElement("button",{"aria-label":"add markdown",className:c,onClick:function(){return l.addMarkDown()}},"+ Text"),n.createElement("button",{"aria-label":"add image",className:c,onClick:function(){return l.addImage()}},"+ Image"),n.createElement("button",{"aria-label":"add image",className:c,onClick:function(){l.onChange(function(e,t){if(!t)return alert("Please select node to add table to"),e;var r=window.prompt("Enter number or rows (max 10)","5");if(null===r)return e;var n=window.prompt("Enter number or columns (max 10)","5");if(null===n)return e;var o=window.prompt("Enter table width (max 400)","300");if(null===o)return e;var d=window.prompt("Enter table height (max 400)","300");if(null===d)return e;var a=Math.min(parseInt(o,10),400),i=Math.min(parseInt(d,10),400),l=q(e,{width:a,height:i,parentId:t}),u=l.value,s=l.createdBlock;if(!s)return e;e=u;for(var c=s.id,p=Math.max(1,Math.min(parseInt(r,10),10)),h=Math.max(1,Math.min(parseInt(n,10),10)),f=0;f<p;++f){var v=J(e,{height:i/p,parentId:c}),g=v.value,y=v.createdBlock;if(!y)break;e=g;for(var I=0;I<h;++I){var m=q(e,{parentId:y.id,height:y.height,width:y.width/h}),b=m.value,w=m.createdBlock;if(!w)break;e=b}}return e}(l.value,l.value.focusedNodeId))}},"+ Table"),n.createElement("button",{"aria-label":"undo",className:c,onClick:l.undo},"Undo"),n.createElement("button",{"aria-label":"redo",className:c,onClick:l.redo},"Redo")),u&&n.createElement("div",{style:{paddingLeft:15}},this.renderColorMenuItem("color"),this.renderColorMenuItem("backgroundColor"),n.createElement("button",{className:c,onClick:function(){return l.moveInDirection(u.id,"left")}},"⬅️"),n.createElement("button",{className:c,onClick:function(){return l.moveInDirection(u.id,"right")}},"➡️"),n.createElement("button",{className:c,onClick:function(){return l.moveInDirection(u.id,"up")}},"⬆"),n.createElement("button",{className:c,onClick:function(){return l.moveInDirection(u.id,"down")}},"⬇"),n.createElement("button",{className:c,onClick:function(){return l.onChange(function(e,t){if(!t)return e;var r=e.byId,n=r[t];if(!n)return e;var o=n.parentId,d=r[o];return d?N(e,t,o,{afterItemId:d.childrenIds[d.childrenIds.length-1]}):e}(l.value,l.value.focusedNodeId))}},"FlipToFront"),n.createElement("button",{"aria-label":"copy",className:c,onClick:function(){return l.copyFocused()}},"Copy"),n.createElement("button",{"aria-label":"paste",className:c,onClick:function(){return l.paste()}},"Paste"),n.createElement("button",{"aria-label":"delete",onClick:l.removeFocused},"🗑"),n.createElement("div",null,n.createElement(A,e({onSelect:function(e){return s(e,!0)},byId:a,node:u},o))),n.createElement("div",{style:{paddingBottom:20}},[{prop:"width",numeric:!0},{prop:"height",numeric:!0},{prop:"top",numeric:!0},{prop:"left",numeric:!0},{prop:"borderWidth",numeric:!0},{prop:"borderTopWidth",numeric:!0},{prop:"borderBottomWidth",numeric:!0},{prop:"borderLeftWidth",numeric:!0},{prop:"borderRightWidth",numeric:!0},{prop:"borderStyle",numeric:!1}].map(function(e){return n.createElement("div",{style:{display:"inline-block",marginRight:10},className:"form-group"},n.createElement("label",{style:{marginRight:5},htmlFor:e.prop,className:"form-label"},e.prop),n.createElement("input",{name:e.prop,className:"form-control",key:"prop_"+e.prop,value:void 0===u[e.prop]?"":u[e.prop],onChange:(t=u.id,r=e.prop,o=e.numeric,function(e){var n;l.updateBlock(t,(n={},n[r]=o?e.target.value?parseInt(e.target.value,10):void 0:e.target.value,n))}),type:e.numeric?"numeric":void 0}));var t,r,o}))))},o}(n.Component),Q=function(e){return n.createElement("button",{style:{borderWidth:1,fontSize:11,borderStyle:"solid",justifyContent:"flex-start"},onClick:e.onClick},n.createElement("div",{style:{display:"flex"}},n.createElement("div",{style:{borderWidth:1,borderRadius:3,borderStyle:"solid",width:20,height:20,backgroundColor:e.color||void 0}})," ",e.color?"":"none"))};var V=function(r){function n(){var t=null!==r&&r.apply(this,arguments)||this;return t.addRow=function(e){var r=J(t.props.value,e),n=r.error,o=r.value;n?alert(n):t.props.onChange(o)},t.addCol=function(e){var r=q(t.props.value,e),n=r.error,o=r.value;n?alert(n):t.props.onChange(o)},t.addMarkDown=function(e){var r=K(t.props.value,e),n=r.error,o=r.value;n?alert(n):t.props.onChange(o)},t.addImage=function(e){var r=X(t.props.value,e),n=r.error,o=r.value;n?alert(n):t.props.onChange(o)},t.addLayer=function(e){var r=Y(t.props.value,e),n=r.error,o=r.value;n?alert(n):t.props.onChange(o)},t.removeFocused=function(){var e=t.props.value.focusedNodeId;e&&t.destroy(e)},t.focusNode=function(e,r){void 0===r&&(r=!0);var n=t.props.value;t.props.onChange(B(n,e,r))},t.create=function(e){t.props.onChange(w(t.props.value,e))},t.updateBlock=function(e,r){t.props.onChange(C(t.props.value,e,r))},t.destroy=function(e){t.props.onChange(k(t.props.value,e))},t.move=function(e,r,n){void 0===n&&(n={}),t.props.onChange(N(t.props.value,e,r,n))},t.moveInDirection=function(e,r){t.props.onChange(D(t.props.value,e,{direction:r}))},t.copyFocused=function(){var r=t.props.value,n=r.byId,o=r.focusedNodeId;if(o){var d=n[o];t.props.onChange(e({},t.props.value,{copiedNode:y(n,d)}))}},t.paste=function(){t.props.onChange(I(t.props.value))},t.undo=function(){var r=t.props.value,n=r.byId,o=r.undoStack,d=r.redoStack;if(o.length>0){var a=o[0],i=[n].concat(d),l=o.slice(1);t.props.onChange(e({},t.props.value,{byId:a,undoStack:l,redoStack:i}))}},t.redo=function(){var r=t.props.value,n=r.byId,o=r.undoStack,d=r.redoStack;if(d.length>0){var a=d[0],i=[n].concat(o),l=d.slice(1);t.props.onChange(e({},t.props.value,{byId:a,undoStack:i,redoStack:l}))}},t}return t(n,r),n.prototype.render=function(){var t=this,r=this.props,n=r.UiComponent,d=r.onChange,a=r.value,i=r.controlUiProps;return o(n,e({value:a,onChange:d,addRow:this.addRow,addCol:this.addCol,addImage:this.addImage,addLayer:this.addLayer,addMarkDown:this.addMarkDown,moveInDirection:this.moveInDirection,copyFocused:this.copyFocused,paste:this.paste,focusNode:function(e,r){return t.focusNode(a.byId[e],r)},removeFocused:this.removeFocused,updateBlock:this.updateBlock,undo:this.undo,redo:this.redo},i))},n.defaultProps={UiComponent:G},n}(d);export{E as AbsoluteLayerBlock,A as BlockBreadCrumbs,F as BlockEditor,V as BlockEditorControl,G as BlockEditorControlDefaultUI,S as DraggableColBlock,W as DraggableRowBlock,O as ImageBlock,M as MarkdownBlock,z as Preview,L as ResizableBlock,q as addCol,X as addImage,Y as addLayer,K as addMarkDown,J as addRow,w as create,y as deepCopy,_ as defaultRenderEditBlock,U as defaultRenderPreviewBlock,k as destroy,B as focusNode,x as getDragPositionRelativeToTarget,h as hasDescendent,N as move,D as moveInDirection,b as newBlockId,R as onDragStart,T as onDropped,P as parseTypes,I as paste,m as pasteChild,f as placeNodeInParent,v as reinsertIntoList,p as removeNode,C as update,c as updateNode};
+import{__assign as e,__extends as t}from"tslib";import*as r from"react";import n,{createElement as o,Component as d,Children as a}from"react";import{ResizableBox as i}from"react-resizable";import{cloneDeep as l}from"lodash-es";import u from"react-markdown";import{SketchPicker as s}from"react-color";function c(t,r){var n;return e({},t,(n={},n[r.id]=r,n))}function p(t,r){var n,o=t[r];if(!o)return t;if(o&&o.parentId){var d=t[o.parentId];if(d){var a=d.childrenIds.findIndex(function(e){return e===o.id});if(a>=0){var i=d.childrenIds.filter(function(e){return e!==o.id});t=c(t,e({},d,{childrenIds:i}))}}}return e({},t,(n={},n[r]=void 0,n))}function h(e,t,r){var n=e[t];if(!n)return!1;if(n.childrenIds.indexOf(r)>=0)return!0;for(var o=0,d=n.childrenIds;o<d.length;o++){var a=d[o],i=h(e,a,r);if(i)return!1}return!1}function f(t,r,n,o){if(!r)return t;if(h(t,r.id,n))return console.warn("node ",r.id," has ",n," as child, so cannot make it into",r.id,"'s parent"),t;if(r.id===n)return console.warn("Cannot place into self: ",{id:r.id,newParentId:n}),t;if(r&&r.parentId&&r.parentId!==n){var d=t[r.parentId];if(d){var a=d.childrenIds.filter(function(e){return e!==r.id});t=c(t,e({},d,{childrenIds:a}))}}var i=t[n];if(i){a=v(i.childrenIds,r.id,o);t=c(t,e({},i,{childrenIds:a}))}return c(t,e({},r,{parentId:n}))}function v(t,r,n){if(void 0===n&&(n={}),r===n.beforeItemId||r===n.afterItemId)return console.warn("Cannot place relative to self: ",e({itemId:r},n)),t;t=t.filter(function(e){return e!==r});var o=n.beforeItemId,d=n.afterItemId,a=-1;if(o?a=t.findIndex(function(e){return e===o}):d&&(a=t.findIndex(function(e){return e===d})+1),a>=0){var i=t.slice();return i.splice(a,0,r),i}return t.concat([r])}var g=require("lodash-es").cloneDeep;function y(t,r){return r?e({},r,{value:g(r.value),childrenIds:r.childrenIds.slice(),children:r.childrenIds.map(function(e){return y(t,t[e])})}):r}function I(t){var r=t.byId,n=(t||{copiedNode:null}).copiedNode;if(!n)return t;n=g(n);var o=m(r,n).byId;if(n.parentId){var d=r[n.parentId];if(d)return e({},t,{byId:f(o,n,n.parentId,{afterItemId:d.childrenIds[d.childrenIds.length-1]})})}return t}function m(t,r){var n;r.id=b(t,r.type);var o=r.children;if(r.children=void 0,t=e({},t,(n={},n[r.id]=r,n)),o)for(var d=0,a=0,i=o;a<i.length;a++){var l=i[a];l.parentId=r.id;var u=m(t,l),s=u.byId,c=u.newId;r.childrenIds[d]=c,t=s,++d}return{byId:t,newId:r.id}}function b(e,t){void 0===t&&(t="node");for(var r=Object.keys(e).length;e[r];)r++;return t+"_"+r}function w(t,r){var n=t.byId,o=b(n),d=e({},n[o],r);return e({},t,{byId:c(n,d)})}function C(t,r,n){var o=t.byId,d=e({},o[r],n);return e({},t,{byId:c(o,d)})}function k(t,r){var n=t.byId,o=t.rootNodeId,d=t.focusedNodeId;return o===r?(alert("Cannot destroy root node"),e({},t,{byId:n,focusedNodeId:d})):e({},t,{byId:p(n,r),focusedNodeId:d===r?null:d})}function N(t,r,n,o){if(void 0===o&&(o={}),!n)return t;var d=t.byId,a=d[r];return e({},t,{byId:f(d,e({},a,{isPlaceHolder:o.isPlaceHolder},o.absolutePos?{top:o.absolutePos.top,left:o.absolutePos.left}:{}),n,o)})}function B(t,r,n){void 0===n&&(n={});var o=t.byId,d=o[r];if(!d)return t;var a=d.parentId;if(!a)return t;var i=o[a];if(!i)return t;var l=o[i.parentId],u=i.childrenIds.indexOf(r);if(u<0)return t;var s={};if("row"===i.type)if("left"===n.direction){if(0===u)return t;s={beforeItemId:i.childrenIds[u-1]}}else{if("right"!==n.direction){if(l&&"col"===l.type){var c=l.childrenIds.indexOf(i.id);return c>0&&"up"===n.direction?N(t,r,l.childrenIds[c-1]):c<l.childrenIds.length-1&&"down"===n.direction?N(t,r,l.childrenIds[c+1]):t}return t}if(u>=i.childrenIds.length-1)return t;s={afterItemId:i.childrenIds[u+1]}}else if("col"===i.type)if("up"===n.direction){if(0===u)return t;s={beforeItemId:i.childrenIds[u-1]}}else{if("down"!==n.direction){if(l&&"row"===l.type){c=l.childrenIds.indexOf(i.id);return c>0&&"left"===n.direction?N(t,r,l.childrenIds[c-1]):c<l.childrenIds.length-1&&"right"===n.direction?N(t,r,l.childrenIds[c+1]):t}return t}if(u>=i.childrenIds.length-1)return t;s={afterItemId:i.childrenIds[u+1]}}else if("layer"===i.type){var p=("up"===n.direction?-1:"down"===n.direction?1:0)*(n.stepPx||1),h=("left"===n.direction?-1:"right"===n.direction?1:0)*(n.stepPx||1);s={absolutePos:{top:(d.top||0)+p,left:(d.left||0)+h}}}return e({},t,{byId:f(o,e({},d,{isPlaceHolder:s.isPlaceHolder},s.absolutePos?{top:s.absolutePos.top,left:s.absolutePos.left}:{}),a,s)})}function D(t,r,n){if(void 0===n&&(n=!0),!r)return t;var o=t.focusedNodeId;return e({},t,{focusedNodeId:n?r.id:o===r.id?null:o})}function P(e){var t=e.filter(function(e){return 0===e.indexOf("draggednodeid:")}),r=e.filter(function(e){return 0===e.indexOf("draggednodetype:")});if(1!==t.length||1!==r.length)return{draggedNodeId:"notanode",draggedNodeType:null};var n=t[0].slice("draggednodeid:".length),o=r[0].slice("draggednodetype:".length);return{draggedNodeId:n,draggedNodeType:o}}function x(e,t){return t?{left:e.clientX-t.left,top:e.clientY-t.top,width:t.width,height:t.height}:null}function R(e,t,r){e.stopPropagation();var n=x(e,r());n&&e.dataTransfer.setData("text/plain",JSON.stringify({startLeft:n.left,startTop:n.top})),e.dataTransfer.setData("draggednodeid:"+t.id,""),e.dataTransfer.setData("draggednodetype:"+t.type,"")}function T(e,t,r,n){void 0===r&&(r={});var o=P(e).draggedNodeId;return N(n,o,t,r)}var E=function(e){function r(){var t=null!==e&&e.apply(this,arguments)||this;return t.selfRef=null,t.getBoundingRect=function(){return t.selfRef&&t.selfRef.getBoundingClientRect?t.selfRef.getBoundingClientRect():null},t.canDrop=function(e){var t=P(e).draggedNodeType;return"row"===t||"col"===t||"markdown"===t||"image"===t||"layer"===t||"custom"===t},t.onDrop=function(e,r){if(void 0===r&&(r=!1),t.canDrop(e.dataTransfer.types)){e.stopPropagation();var n=P(e.dataTransfer.types).draggedNodeId;if(n){var o=x(e,t.getBoundingRect()),d=t.props.node.childrenIds.length?t.props.node.childrenIds[t.props.node.childrenIds.length-1]:void 0,a=JSON.parse(e.dataTransfer.getData("text/plain"));t.props.onChange(T(e.dataTransfer.types,t.props.node.id,o?{afterItemId:d,absolutePos:{top:o.top-a.startTop,left:o.left-a.startLeft}}:void 0,t.props.value))}}},t.onDragEnter=function(e){e.preventDefault()},t.onDragOver=function(e){t.canDrop(e.dataTransfer.types)&&(e.preventDefault(),e.stopPropagation())},t}return t(r,e),r.prototype.renderChild=function(e){var t=this.props,r=t.value,n=t.onChange,o=t.renderEditBlock,d=r.byId[e];return o({node:d,renderEditBlock:o,value:r,onChange:n})},r.prototype.render=function(){var e=this,t=this.props,r=t.node,n=t.value.byId,d=r.childrenIds;return o("div",{ref:function(t){return e.selfRef=t},onDragOver:this.onDragOver,onDrop:this.onDrop,draggable:!0,onDragStart:function(t){return R(t,e.props.node,e.getBoundingRect)},style:{position:"relative",width:r.width,height:r.height,backgroundColor:r.backgroundColor||"#f5f5f5a3",borderRadius:3}},d.map(function(t){var r=n[t],d=o("div",{key:"node_"+t,style:{position:"absolute",width:r.width,height:r.height,top:r.top,left:r.left}},e.renderChild(t));return d}))},r}(d),S=function(r){function n(){var t=null!==r&&r.apply(this,arguments)||this;return t.selfRef=null,t.state={wantToPlaceNext:null},t.getBoundingRect=function(){return t.selfRef&&t.selfRef.getBoundingClientRect?t.selfRef.getBoundingClientRect():null},t.canDrop=function(e){var r=t.props,n=r.value.byId,o=r.node,d=o.parentId?n[o.parentId]:null,a=P(e).draggedNodeType;return"col"===a&&d&&"row"===d.type||!t.props.children&&("row"===a||"markdown"===a||"image"===a||"layer"===a||"custom"===a)},t.shouldPlaceBefore=function(e,r){var n=x(e,t.getBoundingRect()),o=n&&("y"===r?n.top/n.height<.45:n.left/n.width<.45);return o},t.onDrop=function(r,n){if(void 0===n&&(n=!1),t.canDrop(r.dataTransfer.types)){r.stopPropagation(),n||null===t.state.wantToPlaceNext||t.setState({wantToPlaceNext:null});var o=P(r.dataTransfer.types),d=o.draggedNodeId,a=o.draggedNodeType;if(d)if("col"===a){var i=t.shouldPlaceBefore(r,"x"),l=i?{beforeItemId:t.props.node.id}:{afterItemId:t.props.node.id};t.props.onChange(T(r.dataTransfer.types,t.props.node.parentId||"",e({},l,{isPlaceHolder:n}),t.props.value))}else{i=t.shouldPlaceBefore(r,"y");var u=t.props.node.childrenIds,s=u.length;l=s?i?{beforeItemId:u[0]}:{afterItemId:u[s-1]}:null;t.props.onChange(T(r.dataTransfer.types,t.props.node.id,e({isPlaceHolder:n},l),t.props.value))}}},t.onDragEnter=function(e){e.preventDefault()},t.onDragOver=function(e){if(t.canDrop(e.dataTransfer.types)){e.preventDefault(),e.stopPropagation();var r=P(e.dataTransfer.types).draggedNodeType;if("col"===r){var n=t.shouldPlaceBefore(e,"x");n&&"left"!==t.state.wantToPlaceNext?t.setState({wantToPlaceNext:"left"}):n||"right"===t.state.wantToPlaceNext||t.setState({wantToPlaceNext:"right"})}else{n=t.shouldPlaceBefore(e,"y");t.setState({wantToPlaceNext:n?"firstChild":"lastChild"})}}},t.onDragLeave=function(e){null!==t.state.wantToPlaceNext&&t.setState({wantToPlaceNext:null})},t}return t(n,r),n.prototype.renderChild=function(e){var t=this.props,r=t.value,n=t.onChange,o=t.renderEditBlock,d=r.byId[e];return o({node:d,renderEditBlock:o,value:r,onChange:n})},n.prototype.render=function(){var e=this,t=this.props.children,r=this.props,n=r.node,d=r.value.byId,i=this.state.wantToPlaceNext,l=n.childrenIds,u="firstChild"===i?3:0;return o("div",{key:"col_"+n.id,style:{display:"flex",flexDirection:"row",width:"100%",height:"100%"}},"left"===i&&o("div",{style:{height:"100%",width:3,backgroundColor:"white"}}),o("div",{ref:function(t){return e.selfRef=t},onDragOver:this.onDragOver,onDragLeave:this.onDragLeave,onDrop:this.onDrop,onDragEnter:this.onDragEnter,draggable:!0,onDragStart:function(t){return R(t,e.props.node,e.getBoundingRect)},style:{width:"100%",height:"100%",borderRadius:3,backgroundColor:this.props.node.isPlaceHolder?"grey":this.props.node.backgroundColor||"#ffffffa8",borderStyle:"solid",borderWidth:1}},"firstChild"===i&&o("div",{style:{height:10,width:"100%",backgroundColor:"blue"}}),a.count(t)?t:l.map(function(t){var r=d[t],n=o("div",{className:"drag-node",key:"node_"+t,style:{position:"absolute",width:r.width,height:r.height,top:u,left:0}},e.renderChild(t));return u+=r.height,n}),"lastChild"===i&&o("div",{style:{top:u,position:"absolute",height:10,width:"100%",backgroundColor:"orange"}})),"right"===i&&o("div",{style:{height:"100%",width:3,backgroundColor:"white"}}))},n}(d),W=function(r){function n(){var t=null!==r&&r.apply(this,arguments)||this;return t.state={wantToPlaceNext:null},t.selfRef=null,t.getBoundingRect=function(){return t.selfRef&&t.selfRef.getBoundingClientRect?t.selfRef.getBoundingClientRect():null},t.canDrop=function(e){var r=P(e).draggedNodeType,n=t.props,o=n.value.byId,d=n.node,a=d.parentId?o[d.parentId]:null;return"row"===r&&a&&"col"===a.type||!t.props.children&&("col"===r||"markdown"===r||"image"===r||"layer"===r||"custom"===r)},t.shouldPlaceBefore=function(e,r){var n=x(e,t.getBoundingRect()),o=n&&("y"===r?n.top/n.height<.3:n.left/n.width<.3);return o},t.onDrop=function(r,n){if(void 0===n&&(n=!1),t.canDrop(r.dataTransfer.types)){r.stopPropagation(),n||null===t.state.wantToPlaceNext||t.setState({wantToPlaceNext:null});var o=P(r.dataTransfer.types),d=o.draggedNodeId,a=o.draggedNodeType;if(d){var i=t.shouldPlaceBefore(r,"y");if("row"===a){var l=i?{beforeItemId:t.props.node.id}:{afterItemId:t.props.node.id};t.props.onChange(T(r.dataTransfer.types,t.props.node.parentId||"",e({},l,{isPlaceHolder:n}),t.props.value))}else{var u=t.shouldPlaceBefore(r,"x"),s=t.props.node.childrenIds,c=s.length;l=c?u?{beforeItemId:s[0]}:{afterItemId:s[c-1]}:null;t.props.onChange(T(r.dataTransfer.types,t.props.node.id,e({isPlaceHolder:n},l),t.props.value))}}}},t.onDragEnter=function(e){e.preventDefault()},t.onDragOver=function(e){var r=P(e.dataTransfer.types).draggedNodeType;if(t.canDrop(e.dataTransfer.types))if(e.preventDefault(),e.stopPropagation(),"row"===r){var n=t.shouldPlaceBefore(e,"y");n&&"top"!==t.state.wantToPlaceNext?t.setState({wantToPlaceNext:"top"}):n||"bottom"===t.state.wantToPlaceNext||t.setState({wantToPlaceNext:"bottom"})}else{n=t.shouldPlaceBefore(e,"x");t.setState({wantToPlaceNext:n?"firstChild":"lastChild"})}},t.onDragLeave=function(e){null!==t.state.wantToPlaceNext&&t.setState({wantToPlaceNext:null})},t}return t(n,r),n.prototype.render=function(){var e=this,t=this.props.children,r=this.props,n=r.node,d=r.value,i=r.onChange,l=r.renderEditBlock,u=this.state.wantToPlaceNext,s="firstChild"===u?3:0;return o("div",{key:"row_"+n.id},"top"===u&&o("div",{style:{height:3,width:"100%",backgroundColor:"black"}}),o("div",{ref:function(t){return e.selfRef=t},onDragOver:this.onDragOver,onDragLeave:this.onDragLeave,onDragEnter:this.onDragEnter,onDrop:this.onDrop,draggable:!0,onDragStart:function(t){return R(t,e.props.node,e.getBoundingRect)},style:{position:"relative",height:n.height,width:n.width,borderStyle:"dashed",borderWidth:0,borderBottomWidth:1,backgroundColor:n.isPlaceHolder?"darkgrey":n.backgroundColor||"#b5bbb9b0"}},"firstChild"===u&&o("div",{style:{height:"100%",width:3,backgroundColor:"blue"}}),a.count(t)?t:n.childrenIds.map(function(e){var t=d.byId[e],r=o("div",{className:"drag-node",key:"node_"+t.id,style:{position:"absolute",width:t.width,height:t.height,top:0,left:s}},l({node:t,renderEditBlock:l,value:d,onChange:i}));return s+=t.width,r}),"lastChild"===u&&o("div",{style:{position:"absolute",left:s,height:"100%",width:3,backgroundColor:"orange"}})),"bottom"===u&&o("div",{style:{height:3,width:"100%",backgroundColor:"green"}}))},n}(d),M=function(e){function r(){var t=null!==e&&e.apply(this,arguments)||this;return t.selfRef=null,t.getBoundingRect=function(){return t.selfRef&&t.selfRef.getBoundingClientRect?t.selfRef.getBoundingClientRect():null},t}return t(r,e),r.prototype.render=function(){var e=this,t=this.props.node;return o("div",{ref:function(t){return e.selfRef=t},draggable:!0,onDragStart:function(t){return R(t,e.props.node,e.getBoundingRect)},style:{width:"100%",height:"100%",backgroundColor:"violet",padding:5,borderRadius:3}},o("img",{style:{width:"100%",height:"100%"},src:t.value}))},r}(d),O=function(e){function r(){var t=null!==e&&e.apply(this,arguments)||this;return t.selfRef=null,t.getBoundingRect=function(){return t.selfRef&&t.selfRef.getBoundingClientRect?t.selfRef.getBoundingClientRect():null},t}return t(r,e),r.prototype.render=function(){var e=this,t=this.props,r=t.node,n=t.update,d=r.value;return o("div",{ref:function(t){return e.selfRef=t},draggable:!0,onDragStart:function(t){return R(t,e.props.node,e.getBoundingRect)},style:{width:"100%",height:"100%",backgroundColor:"#ffc0cb75",padding:5,borderRadius:3}},o("textarea",{className:"form-control",name:"value",placeholder:"Type here...",value:d,onChange:function(e){return n(r.id,{value:e.target.value})}}))},r}(d),L=function(e){var t=e.node,r=e.renderEditBlock,n=e.value,d=e.onChange,a=e.width,l=e.height,u=n.focusedNodeId;return o("div",{onClick:function(e){e.stopPropagation(),d(D(n,t))},style:t.id===u?{borderStyle:"dashed",borderWidth:1,borderColor:"orange"}:{}},o(i,{className:"box",width:a,height:l,onResizeStart:function(e){e.preventDefault(),e.stopPropagation()},onResize:function(e,r){var o=r.size,a=o.width,i=o.height;d(C(n,t.id,{width:a,height:i}))}},"col"===t.type?o(S,{key:"col_"+t.id,node:t,renderEditBlock:r,value:n,onChange:d}):"row"===t.type?o(W,{key:"row_"+t.id,node:t,renderEditBlock:r,value:n,onChange:d}):"markdown"===t.type?o(O,{node:t,update:function(e,t){return d(C(n,e,t))}}):"layer"===t.type?o(E,{key:"layer_"+t.id,node:t,renderEditBlock:r,value:n,onChange:d}):o(M,{key:"image_"+t.id,node:t,renderEditBlock:r,value:n,onChange:d})))},_=function(e){var t=e.node,r=e.renderEditBlock,n=e.value,d=e.onChange;return o(L,{width:t.width,height:t.height,renderEditBlock:r,node:t,value:n,onChange:d})},F=function(r){function n(){var e=null!==r&&r.apply(this,arguments)||this;return e.state={value:e.props.value},e}return t(n,r),n.prototype.componentDidMount=function(){if(this.props.onChange){var e=this.state.value;this.props.onChange(e)}},n.prototype.componentDidUpdate=function(t,r){if(this.props.onChange&&this.state.value!==r.value&&this.state.value!==this.props.value){var n=this.state.value;this.props.onChange(n)}else this.props.value&&t.value!==this.props.value&&this.props.value!==this.state.value&&this.setState({value:this.props.value});this.state.value.byId!==r.value.byId&&this.state.value.undoStack===r.value.undoStack&&this.setState({value:e({},this.state.value,{undoStack:[l(r.value.byId)].concat(this.state.value.undoStack).slice(0,10)})})},n.prototype.render=function(){var e=this,t=this.props.renderEditBlock,r=this.state.value,n=r.byId,d=r.rootNodeId,a=n[d];return o("div",{style:{position:"relative",width:a.width,height:a.height}},o(S,{key:"col_"+a.id,node:a,renderEditBlock:t,value:this.state.value,onChange:function(t){return e.setState({value:t})}}))},n.defaultProps={renderEditBlock:_,onChange:function(e){}},n}(d);function H(e){return!!e.borderWidth&&e.borderWidth>0||!!e.borderTopWidth&&e.borderTopWidth>0||!!e.borderBottomWidth&&e.borderBottomWidth>0||!!e.borderLeftWidth&&e.borderLeftWidth>0||!!e.borderRightWidth&&e.borderRightWidth>0}var j=function(e){return{color:e.color||void 0,display:e.display||void 0,flexDirection:e.flexDirection||void 0,justifyContent:e.justifyContent||void 0,alignItems:e.alignItems||void 0,backgroundColor:e.backgroundColor||void 0,borderWidth:void 0!==e.borderWidth?e.borderWidth:0,borderTopWidth:void 0!==e.borderTopWidth?e.borderTopWidth:void 0,borderBottomWidth:void 0!==e.borderBottomWidth?e.borderBottomWidth:void 0,borderLeftWidth:void 0!==e.borderLeftWidth?e.borderLeftWidth:void 0,borderRightWidth:void 0!==e.borderRightWidth?e.borderRightWidth:void 0,borderStyle:e.borderStyle?e.borderStyle||void 0:H(e)?"solid":void 0}},z=function(t){var r=t.byId,n=t.node,d=t.renderPreviewBlock,a=void 0===d?U:d;if(!n)return null;switch(n.type){case"markdown":return o("div",{key:n.id,style:e({},j(n),{height:n.height,width:n.width})},o(u,{source:n.value}));case"layer":return o("div",{key:n.id,style:e({position:"relative"},j(n),{height:n.height,width:n.width})},n.childrenIds.map(function(e){var t=r[e];return o("div",{key:t.id,style:{position:"absolute",top:t.top||0,left:t.left||0}},a({byId:r,node:r[e],renderPreviewBlock:a}))}));case"image":return o("div",{key:n.id,style:{height:"100%",width:"100%"}},o("img",{src:n.value}));case"col":return o("div",{key:n.id,style:e({},j(n),{width:n.width,height:n.height,display:"flex",flexDirection:"column"})},n.childrenIds.map(function(e){return a({byId:r,node:r[e],renderPreviewBlock:a})}));case"row":return o("div",{key:n.id,style:e({},j(n),{width:n.width,height:n.height,display:"flex",flexDirection:"row"})},n.childrenIds.map(function(e){return a({byId:r,node:r[e],renderPreviewBlock:a})}));case"custom":return null}},U=function(e){var t=e.byId,r=e.node,n=e.renderPreviewBlock;return o(z,{key:"node_"+r.id,node:r,byId:t,renderPreviewBlock:n})},J=function(e){var t=e.byId,r=e.node,n=e.onSelect,d=e.navClassName,a=void 0===d?"breadcrumb":d,i=e.itemClassName,l=void 0===i?"breadcrumb-item btn btn-link active":i;if(!r)return null;for(var u=[],s=r.id;s;){var c=t[s];if(!c)break;u.unshift({label:c.type+"-"+c.id,id:c.id}),s=c.parentId}return o("nav",{"aria-label":"breadcrumb"},o("ol",{className:a},u.map(function(e){return o("li",{onClick:function(){return n(e.id)},key:"crumb_"+e.id,className:l,"aria-current":"page"},e.label)})))};function q(t,r){var n=t.byId,o=t.rootNodeId,d=t.focusedNodeId,a=(r?r.parentId:d)||o,i=n[a],l=["col","layer"];if((!i||l.indexOf(i.type)<0)&&(a=i?i.parentId:null,i=a?n[a]:i,!i||l.indexOf(i.type)<0))return{error:"Can only add a row inside "+l.join(", ")+", please select a column by clicking on it",value:t};var u=b(n,"row"),s=e({type:"row",height:100,width:i&&i.width?i.width:500},r,{id:u,name:u,childrenIds:[]});n=f(n,s,i.id),i=n[a];var c={};if("col"===i.type&&i&&i.childrenIds.length>=1)for(var p=i.height/i.childrenIds.length,h=0,v=i.childrenIds;h<v.length;h++){var g=v[h];c[g]=e({},n[g],{height:p})}return{createdBlock:s,value:e({},t,{byId:e({},n,c),focusedNodeId:d||s.id})}}function X(t,r){var n=t.byId,o=t.rootNodeId,d=t.focusedNodeId,a=(r?r.parentId:d)||o,i=n[a],l=["row","layer"];if((!i||l.indexOf(i.type)<0)&&(a=i?i.parentId:null,i=a?n[a]:i,!i||l.indexOf(i.type)<0))return{error:"Can only add a column inside "+l.join(", ")+", please select a column by clicking on it",value:t};var u=b(n,"col"),s=e({type:"col",width:100,height:i.height?i.height:100},r,{id:u,name:u,childrenIds:[]});n=f(n,s,a),i=n[a];var c={};if("row"===i.type&&i&&i.childrenIds.length>=1)for(var p=i.width/i.childrenIds.length,h=0,v=i.childrenIds;h<v.length;h++){var g=v[h];c[g]=e({},n[g],{width:p})}return{createdBlock:s,value:e({},t,{byId:e({},n,c),focusedNodeId:d||s.id})}}function Y(t,r){var n=t.byId,o=t.rootNodeId,d=t.focusedNodeId,a=(r?r.parentId:d)||o,i=n[a],l=["row","col","layer"];if(!i||l.indexOf(i.type)<0)return{error:"Can only add markdown text inside "+l.join(", "),value:t};var u=b(n,"markdown"),s=e({type:"markdown",width:Math.max(1,i.width-20),height:Math.max(1,i.height-20)},r,{id:u,name:u,childrenIds:[]});return{createdBlock:s,value:e({},t,{byId:f(n,s,a),focusedNodeId:s.id})}}function A(t,r){var n=r&&r.value?r.value:window.prompt("Please enter image url","http://lorempixel.com/200/200/");if(null===n)return{error:"no image selected",value:t};var o=t.byId,d=t.rootNodeId,a=t.focusedNodeId,i=(r?r.parentId:a)||d,l=o[i],u=["row","col","layer"];if(!l||u.indexOf(l.type)<0)return{error:"Can only add an image inside "+u.join(", "),value:t};var s=b(o,"image"),c=e({type:"image",value:n,width:200,height:200},r,{id:s,name:s,childrenIds:[]});return{createdBlock:c,value:e({},t,{byId:f(o,c,i),focusedNodeId:c.id})}}function G(t,r){var n=t.byId,o=t.rootNodeId,d=t.focusedNodeId,a=(r?r.parentId:d)||o,i=n[a],l=["row","col","layer"];if(!i||l.indexOf(i.type)<0)return{error:"Can only add a layer inside "+l.join(", "),value:t};var u=b(n,"layer"),s=e({type:"layer",width:Math.max(1,i.width-20),height:Math.max(1,i.height-20)},r,{id:u,name:u,childrenIds:[]});return{createdBlock:s,value:e({},t,{byId:f(n,s,a),focusedNodeId:s.id})}}var K=function(r){function o(){var e=null!==r&&r.apply(this,arguments)||this;return e.state={selectedMenu:null,selectedColor:null},e.toggleMenu=function(t){if(e.setState({selectedMenu:e.state.selectedMenu===t?null:t}),"color"===t||"backgroundColor"===t){var r=e.props.value,n=r.byId,o=r.focusedNodeId,d=o?n[o]:null;e.setState({selectedColor:d?d.color:void 0})}},e.renderColorMenuItem=function(t){var r=e.props.value,o=r.byId,d=r.focusedNodeId;if(d){var a=d?o[d]:null;return n.createElement(n.Fragment,null,n.createElement(Q,{onClick:function(){return e.toggleMenu(t)},color:a[t]}),e.state.selectedMenu===t&&n.createElement("div",{style:{position:"absolute",zIndex:100,backgroundColor:"white"}},n.createElement("button",{className:e.props.buttonClassName,onClick:function(){var r;e.props.updateBlock(d,(r={},r[t]=void 0,r)),e.toggleMenu(t)}},"Clear"),n.createElement("button",{className:e.props.buttonClassName,onClick:function(){var r;e.toggleMenu(t),e.props.updateBlock(d,(r={},r[t]=e.state.selectedColor,r))}},"Done"),n.createElement(s,{color:e.state.selectedColor||void 0,onChangeComplete:function(t){var r=t.hex;e.setState({selectedColor:r})}})))}},e}return t(o,r),o.prototype.render=function(){var t=this.props,r=t.buttonClassName,o=t.breadCrumbsProps,d=t.value,a=d.byId,i=d.focusedNodeId,l=this.props,u=i?a[i]:null,s=l.focusNode,c=r;return n.createElement("div",null,n.createElement("div",null,n.createElement("button",{"aria-label":"add row",className:c,onClick:function(){return l.addRow()}},"+ Row"),n.createElement("button",{"aria-label":"add column",className:c,onClick:function(){return l.addCol()}},"+ Col"),n.createElement("button",{"aria-label":"add layer",className:c,onClick:function(){return l.addLayer()}},"+ Layer"),n.createElement("button",{"aria-label":"add markdown",className:c,onClick:function(){return l.addMarkDown()}},"+ Text"),n.createElement("button",{"aria-label":"add image",className:c,onClick:function(){return l.addImage()}},"+ Image"),n.createElement("button",{"aria-label":"add image",className:c,onClick:function(){l.onChange(function(e,t){if(!t)return alert("Please select node to add table to"),e;var r=window.prompt("Enter number or rows (max 10)","5");if(null===r)return e;var n=window.prompt("Enter number or columns (max 10)","5");if(null===n)return e;var o=window.prompt("Enter table width (max 400)","300");if(null===o)return e;var d=window.prompt("Enter table height (max 400)","300");if(null===d)return e;var a=Math.min(parseInt(o,10),400),i=Math.min(parseInt(d,10),400),l=X(e,{width:a,height:i,parentId:t}),u=l.value,s=l.createdBlock;if(!s)return e;e=u;for(var c=s.id,p=Math.max(1,Math.min(parseInt(r,10),10)),h=Math.max(1,Math.min(parseInt(n,10),10)),f=0;f<p;++f){var v=q(e,{height:i/p,parentId:c}),g=v.value,y=v.createdBlock;if(!y)break;e=g;for(var I=0;I<h;++I){var m=X(e,{parentId:y.id,height:y.height,width:y.width/h}),b=m.value,w=m.createdBlock;if(!w)break;e=b}}return e}(l.value,l.value.focusedNodeId))}},"+ Table"),n.createElement("button",{"aria-label":"undo",className:c,onClick:l.undo},"Undo"),n.createElement("button",{"aria-label":"redo",className:c,onClick:l.redo},"Redo")),u&&n.createElement("div",{style:{paddingLeft:15}},this.renderColorMenuItem("color"),this.renderColorMenuItem("backgroundColor"),n.createElement("button",{className:c,onClick:function(){return l.moveInDirection(u.id,"left")}},"⬅️"),n.createElement("button",{className:c,onClick:function(){return l.moveInDirection(u.id,"right")}},"➡️"),n.createElement("button",{className:c,onClick:function(){return l.moveInDirection(u.id,"up")}},"⬆"),n.createElement("button",{className:c,onClick:function(){return l.moveInDirection(u.id,"down")}},"⬇"),n.createElement("button",{className:c,onClick:function(){return l.onChange(function(e,t){if(!t)return e;var r=e.byId,n=r[t];if(!n)return e;var o=n.parentId,d=r[o];return d?N(e,t,o,{afterItemId:d.childrenIds[d.childrenIds.length-1]}):e}(l.value,l.value.focusedNodeId))}},"FlipToFront"),n.createElement("button",{"aria-label":"copy",className:c,onClick:function(){return l.copyFocused()}},"Copy"),n.createElement("button",{"aria-label":"paste",className:c,onClick:function(){return l.paste()}},"Paste"),n.createElement("button",{"aria-label":"delete",onClick:l.removeFocused},"🗑"),n.createElement("div",null,n.createElement(J,e({onSelect:function(e){return s(e,!0)},byId:a,node:u},o))),n.createElement("div",{style:{paddingBottom:20}},[{prop:"width",numeric:!0},{prop:"height",numeric:!0},{prop:"top",numeric:!0},{prop:"left",numeric:!0},{prop:"borderWidth",numeric:!0},{prop:"borderTopWidth",numeric:!0},{prop:"borderBottomWidth",numeric:!0},{prop:"borderLeftWidth",numeric:!0},{prop:"borderRightWidth",numeric:!0},{prop:"borderStyle",numeric:!1}].map(function(e){return n.createElement("div",{key:e.prop,style:{display:"inline-block",marginRight:10},className:"form-group"},n.createElement("label",{style:{marginRight:5},htmlFor:e.prop,className:"form-label"},e.prop),n.createElement("input",{name:e.prop,className:"form-control",key:"prop_"+e.prop,value:void 0===u[e.prop]?"":u[e.prop],onChange:(t=u.id,r=e.prop,o=e.numeric,function(e){var n;l.updateBlock(t,(n={},n[r]=o?e.target.value?parseInt(e.target.value,10):void 0:e.target.value,n))}),type:e.numeric?"numeric":void 0}));var t,r,o}))))},o}(n.Component),Q=function(e){return n.createElement("button",{style:{borderWidth:1,fontSize:11,borderStyle:"solid",justifyContent:"flex-start"},onClick:e.onClick},n.createElement("div",{style:{display:"flex"}},n.createElement("div",{style:{borderWidth:1,borderRadius:3,borderStyle:"solid",width:20,height:20,backgroundColor:e.color||void 0}})," ",e.color?"":"none"))};var V=function(r){function n(){var t=null!==r&&r.apply(this,arguments)||this;return t.addRow=function(e){var r=q(t.props.value,e),n=r.error,o=r.value;n?alert(n):t.props.onChange(o)},t.addCol=function(e){var r=X(t.props.value,e),n=r.error,o=r.value;n?alert(n):t.props.onChange(o)},t.addMarkDown=function(e){var r=Y(t.props.value,e),n=r.error,o=r.value;n?alert(n):t.props.onChange(o)},t.addImage=function(e){var r=A(t.props.value,e),n=r.error,o=r.value;n?alert(n):t.props.onChange(o)},t.addLayer=function(e){var r=G(t.props.value,e),n=r.error,o=r.value;n?alert(n):t.props.onChange(o)},t.removeFocused=function(){var e=t.props.value.focusedNodeId;e&&t.destroy(e)},t.focusNode=function(e,r){void 0===r&&(r=!0);var n=t.props.value;t.props.onChange(D(n,e,r))},t.create=function(e){t.props.onChange(w(t.props.value,e))},t.updateBlock=function(e,r){t.props.onChange(C(t.props.value,e,r))},t.destroy=function(e){t.props.onChange(k(t.props.value,e))},t.move=function(e,r,n){void 0===n&&(n={}),t.props.onChange(N(t.props.value,e,r,n))},t.moveInDirection=function(e,r){t.props.onChange(B(t.props.value,e,{direction:r}))},t.copyFocused=function(){var r=t.props.value,n=r.byId,o=r.focusedNodeId;if(o){var d=n[o];t.props.onChange(e({},t.props.value,{copiedNode:y(n,d)}))}},t.paste=function(){t.props.onChange(I(t.props.value))},t.undo=function(){var r=t.props.value,n=r.byId,o=r.undoStack,d=r.redoStack;if(o.length>0){var a=o[0],i=[n].concat(d),l=o.slice(1);t.props.onChange(e({},t.props.value,{byId:a,undoStack:l,redoStack:i}))}},t.redo=function(){var r=t.props.value,n=r.byId,o=r.undoStack,d=r.redoStack;if(d.length>0){var a=d[0],i=[n].concat(o),l=d.slice(1);t.props.onChange(e({},t.props.value,{byId:a,undoStack:i,redoStack:l}))}},t}return t(n,r),n.prototype.render=function(){var t=this,r=this.props,n=r.UiComponent,d=r.onChange,a=r.value,i=r.controlUiProps;return o(n,e({value:a,onChange:d,addRow:this.addRow,addCol:this.addCol,addImage:this.addImage,addLayer:this.addLayer,addMarkDown:this.addMarkDown,moveInDirection:this.moveInDirection,copyFocused:this.copyFocused,paste:this.paste,focusNode:function(e,r){return t.focusNode(a.byId[e],r)},removeFocused:this.removeFocused,updateBlock:this.updateBlock,undo:this.undo,redo:this.redo},i))},n.defaultProps={UiComponent:K},n}(d);export{E as AbsoluteLayerBlock,J as BlockBreadCrumbs,F as BlockEditor,V as BlockEditorControl,K as BlockEditorControlDefaultUI,S as DraggableColBlock,W as DraggableRowBlock,M as ImageBlock,O as MarkdownBlock,z as Preview,L as ResizableBlock,X as addCol,A as addImage,G as addLayer,Y as addMarkDown,q as addRow,w as create,y as deepCopy,_ as defaultRenderEditBlock,U as defaultRenderPreviewBlock,k as destroy,D as focusNode,x as getDragPositionRelativeToTarget,h as hasDescendent,N as move,B as moveInDirection,b as newBlockId,R as onDragStart,T as onDropped,P as parseTypes,I as paste,m as pasteChild,f as placeNodeInParent,v as reinsertIntoList,p as removeNode,C as update,c as updateNode};
 //# sourceMappingURL=react-movable-block-editor.es.production.js.map

dist/react-movable-block-editor.umd.production.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("tslib"),require("react"),require("react-resizable"),require("lodash-es"),require("react-markdown"),require("react-color")):"function"==typeof define&&define.amd?define(["exports","tslib","react","react-resizable","lodash-es","react-markdown","react-color"],t):(e=e||self,t(e["react-movable-block-editor"]={},e.tslib_1,e.React,e.reactResizable,e.lodashEs,e.MarkDown,e.reactColor))}(this,function(e,t,r,n,o,a,d){"use strict";var i="default"in r?r.default:r;function l(e,r){var n;return t.__assign({},e,(n={},n[r.id]=r,n))}function s(e,r){var n,o=e[r];if(!o)return e;if(o&&o.parentId){var a=e[o.parentId];if(a){var d=a.childrenIds.findIndex(function(e){return e===o.id});if(d>=0){var i=a.childrenIds.filter(function(e){return e!==o.id});e=l(e,t.__assign({},a,{childrenIds:i}))}}}return t.__assign({},e,(n={},n[r]=void 0,n))}function u(e,t,r){var n=e[t];if(!n)return!1;if(n.childrenIds.indexOf(r)>=0)return!0;for(var o=0,a=n.childrenIds;o<a.length;o++){var d=a[o],i=u(e,d,r);if(i)return!1}return!1}function c(e,r,n,o){if(!r)return e;if(u(e,r.id,n))return console.warn("node ",r.id," has ",n," as child, so cannot make it into",r.id,"'s parent"),e;if(r.id===n)return console.warn("Cannot place into self: ",{id:r.id,newParentId:n}),e;if(r&&r.parentId&&r.parentId!==n){var a=e[r.parentId];if(a){var d=a.childrenIds.filter(function(e){return e!==r.id});e=l(e,t.__assign({},a,{childrenIds:d}))}}var i=e[n];if(i){d=p(i.childrenIds,r.id,o);e=l(e,t.__assign({},i,{childrenIds:d}))}return l(e,t.__assign({},r,{parentId:n}))}function p(e,r,n){if(void 0===n&&(n={}),r===n.beforeItemId||r===n.afterItemId)return console.warn("Cannot place relative to self: ",t.__assign({itemId:r},n)),e;e=e.filter(function(e){return e!==r});var o=n.beforeItemId,a=n.afterItemId,d=-1;if(o?d=e.findIndex(function(e){return e===o}):a&&(d=e.findIndex(function(e){return e===a})+1),d>=0){var i=e.slice();return i.splice(d,0,r),i}return e.concat([r])}a=a&&a.hasOwnProperty("default")?a.default:a;var h=require("lodash-es").cloneDeep;function f(e,r){return r?t.__assign({},r,{value:h(r.value),childrenIds:r.childrenIds.slice(),children:r.childrenIds.map(function(t){return f(e,e[t])})}):r}function g(e){var r=e.byId,n=(e||{copiedNode:null}).copiedNode;if(!n)return e;n=h(n);var o=v(r,n).byId;if(n.parentId){var a=r[n.parentId];if(a)return t.__assign({},e,{byId:c(o,n,n.parentId,{afterItemId:a.childrenIds[a.childrenIds.length-1]})})}return e}function v(e,r){var n;r.id=m(e,r.type);var o=r.children;if(r.children=void 0,e=t.__assign({},e,(n={},n[r.id]=r,n)),o)for(var a=0,d=0,i=o;d<i.length;d++){var l=i[d];l.parentId=r.id;var s=v(e,l),u=s.byId,c=s.newId;r.childrenIds[a]=c,e=u,++a}return{byId:e,newId:r.id}}function m(e,t){void 0===t&&(t="node");for(var r=Object.keys(e).length;e[r];)r++;return t+"_"+r}function y(e,r){var n=e.byId,o=m(n),a=t.__assign({},n[o],r);return t.__assign({},e,{byId:l(n,a)})}function I(e,r,n){var o=e.byId,a=t.__assign({},o[r],n);return t.__assign({},e,{byId:l(o,a)})}function b(e,r){var n=e.byId,o=e.rootNodeId,a=e.focusedNodeId;return o===r?(alert("Cannot destroy root node"),t.__assign({},e,{byId:n,focusedNodeId:a})):t.__assign({},e,{byId:s(n,r),focusedNodeId:a===r?null:a})}function C(e,r,n,o){if(void 0===o&&(o={}),!n)return e;var a=e.byId,d=a[r];return t.__assign({},e,{byId:c(a,t.__assign({},d,{isPlaceHolder:o.isPlaceHolder},o.absolutePos?{top:o.absolutePos.top,left:o.absolutePos.left}:{}),n,o)})}function w(e,r,n){void 0===n&&(n={});var o=e.byId,a=o[r];if(!a)return e;var d=a.parentId;if(!d)return e;var i=o[d];if(!i)return e;var l=o[i.parentId],s=i.childrenIds.indexOf(r);if(s<0)return e;var u={};if("row"===i.type)if("left"===n.direction){if(0===s)return e;u={beforeItemId:i.childrenIds[s-1]}}else{if("right"!==n.direction){if(l&&"col"===l.type){var p=l.childrenIds.indexOf(i.id);return p>0&&"up"===n.direction?C(e,r,l.childrenIds[p-1]):p<l.childrenIds.length-1&&"down"===n.direction?C(e,r,l.childrenIds[p+1]):e}return e}if(s>=i.childrenIds.length-1)return e;u={afterItemId:i.childrenIds[s+1]}}else if("col"===i.type)if("up"===n.direction){if(0===s)return e;u={beforeItemId:i.childrenIds[s-1]}}else{if("down"!==n.direction){if(l&&"row"===l.type){p=l.childrenIds.indexOf(i.id);return p>0&&"left"===n.direction?C(e,r,l.childrenIds[p-1]):p<l.childrenIds.length-1&&"right"===n.direction?C(e,r,l.childrenIds[p+1]):e}return e}if(s>=i.childrenIds.length-1)return e;u={afterItemId:i.childrenIds[s+1]}}else if("layer"===i.type){var h=("up"===n.direction?-1:"down"===n.direction?1:0)*(n.stepPx||1),f=("left"===n.direction?-1:"right"===n.direction?1:0)*(n.stepPx||1);u={absolutePos:{top:(a.top||0)+h,left:(a.left||0)+f}}}return t.__assign({},e,{byId:c(o,t.__assign({},a,{isPlaceHolder:u.isPlaceHolder},u.absolutePos?{top:u.absolutePos.top,left:u.absolutePos.left}:{}),d,u)})}function k(e,r,n){if(void 0===n&&(n=!0),!r)return e;var o=e.focusedNodeId;return t.__assign({},e,{focusedNodeId:n?r.id:o===r.id?null:o})}function _(e){var t=e.filter(function(e){return 0===e.indexOf("draggednodeid:")}),r=e.filter(function(e){return 0===e.indexOf("draggednodetype:")});if(1!==t.length||1!==r.length)return{draggedNodeId:"notanode",draggedNodeType:null};var n=t[0].slice("draggednodeid:".length),o=r[0].slice("draggednodetype:".length);return{draggedNodeId:n,draggedNodeType:o}}function N(e,t){return t?{left:e.clientX-t.left,top:e.clientY-t.top,width:t.width,height:t.height}:null}function E(e,t,r){e.stopPropagation();var n=N(e,r());n&&e.dataTransfer.setData("text/plain",JSON.stringify({startLeft:n.left,startTop:n.top})),e.dataTransfer.setData("draggednodeid:"+t.id,""),e.dataTransfer.setData("draggednodetype:"+t.type,"")}function B(e,t,r,n){void 0===r&&(r={});var o=_(e).draggedNodeId;return C(n,o,t,r)}var D=function(e){function n(){var t=null!==e&&e.apply(this,arguments)||this;return t.selfRef=null,t.getBoundingRect=function(){return t.selfRef&&t.selfRef.getBoundingClientRect?t.selfRef.getBoundingClientRect():null},t.canDrop=function(e){var t=_(e).draggedNodeType;return"row"===t||"col"===t||"markdown"===t||"image"===t||"layer"===t||"custom"===t},t.onDrop=function(e,r){if(void 0===r&&(r=!1),t.canDrop(e.dataTransfer.types)){e.stopPropagation();var n=_(e.dataTransfer.types).draggedNodeId;if(n){var o=N(e,t.getBoundingRect()),a=t.props.node.childrenIds.length?t.props.node.childrenIds[t.props.node.childrenIds.length-1]:void 0,d=JSON.parse(e.dataTransfer.getData("text/plain"));t.props.onChange(B(e.dataTransfer.types,t.props.node.id,o?{afterItemId:a,absolutePos:{top:o.top-d.startTop,left:o.left-d.startLeft}}:void 0,t.props.value))}}},t.onDragEnter=function(e){e.preventDefault()},t.onDragOver=function(e){t.canDrop(e.dataTransfer.types)&&(e.preventDefault(),e.stopPropagation())},t}return t.__extends(n,e),n.prototype.renderChild=function(e){var t=this.props,r=t.value,n=t.onChange,o=t.renderEditBlock,a=r.byId[e];return o({node:a,renderEditBlock:o,value:r,onChange:n})},n.prototype.render=function(){var e=this,t=this.props,n=t.node,o=t.value.byId,a=n.childrenIds;return r.createElement("div",{ref:function(t){return e.selfRef=t},onDragOver:this.onDragOver,onDrop:this.onDrop,draggable:!0,onDragStart:function(t){return E(t,e.props.node,e.getBoundingRect)},style:{position:"relative",width:n.width,height:n.height,backgroundColor:n.backgroundColor||"#f5f5f5a3",borderRadius:3}},a.map(function(t){var n=o[t],a=r.createElement("div",{key:"node_"+t,style:{position:"absolute",width:n.width,height:n.height,top:n.top,left:n.left}},e.renderChild(t));return a}))},n}(r.Component),x=function(e){function n(){var r=null!==e&&e.apply(this,arguments)||this;return r.selfRef=null,r.state={wantToPlaceNext:null},r.getBoundingRect=function(){return r.selfRef&&r.selfRef.getBoundingClientRect?r.selfRef.getBoundingClientRect():null},r.canDrop=function(e){var t=r.props,n=t.value.byId,o=t.node,a=o.parentId?n[o.parentId]:null,d=_(e).draggedNodeType;return"col"===d&&a&&"row"===a.type||!r.props.children&&("row"===d||"markdown"===d||"image"===d||"layer"===d||"custom"===d)},r.shouldPlaceBefore=function(e,t){var n=N(e,r.getBoundingRect()),o=n&&("y"===t?n.top/n.height<.45:n.left/n.width<.45);return o},r.onDrop=function(e,n){if(void 0===n&&(n=!1),r.canDrop(e.dataTransfer.types)){e.stopPropagation(),n||null===r.state.wantToPlaceNext||r.setState({wantToPlaceNext:null});var o=_(e.dataTransfer.types),a=o.draggedNodeId,d=o.draggedNodeType;if(a)if("col"===d){var i=r.shouldPlaceBefore(e,"x"),l=i?{beforeItemId:r.props.node.id}:{afterItemId:r.props.node.id};r.props.onChange(B(e.dataTransfer.types,r.props.node.parentId||"",t.__assign({},l,{isPlaceHolder:n}),r.props.value))}else{i=r.shouldPlaceBefore(e,"y");var s=r.props.node.childrenIds,u=s.length;l=u?i?{beforeItemId:s[0]}:{afterItemId:s[u-1]}:null;r.props.onChange(B(e.dataTransfer.types,r.props.node.id,t.__assign({isPlaceHolder:n},l),r.props.value))}}},r.onDragEnter=function(e){e.preventDefault()},r.onDragOver=function(e){if(r.canDrop(e.dataTransfer.types)){e.preventDefault(),e.stopPropagation();var t=_(e.dataTransfer.types).draggedNodeType;if("col"===t){var n=r.shouldPlaceBefore(e,"x");n&&"left"!==r.state.wantToPlaceNext?r.setState({wantToPlaceNext:"left"}):n||"right"===r.state.wantToPlaceNext||r.setState({wantToPlaceNext:"right"})}else{n=r.shouldPlaceBefore(e,"y");r.setState({wantToPlaceNext:n?"firstChild":"lastChild"})}}},r.onDragLeave=function(e){null!==r.state.wantToPlaceNext&&r.setState({wantToPlaceNext:null})},r}return t.__extends(n,e),n.prototype.renderChild=function(e){var t=this.props,r=t.value,n=t.onChange,o=t.renderEditBlock,a=r.byId[e];return o({node:a,renderEditBlock:o,value:r,onChange:n})},n.prototype.render=function(){var e=this,t=this.props.children,n=this.props,o=n.node,a=n.value.byId,d=this.state.wantToPlaceNext,i=o.childrenIds,l="firstChild"===d?3:0;return r.createElement("div",{key:"col_"+o.id,style:{display:"flex",flexDirection:"row",width:"100%",height:"100%"}},"left"===d&&r.createElement("div",{style:{height:"100%",width:3,backgroundColor:"white"}}),r.createElement("div",{ref:function(t){return e.selfRef=t},onDragOver:this.onDragOver,onDragLeave:this.onDragLeave,onDrop:this.onDrop,onDragEnter:this.onDragEnter,draggable:!0,onDragStart:function(t){return E(t,e.props.node,e.getBoundingRect)},style:{width:"100%",height:"100%",borderRadius:3,backgroundColor:this.props.node.isPlaceHolder?"grey":this.props.node.backgroundColor||"#ffffffa8",borderStyle:"solid",borderWidth:1}},"firstChild"===d&&r.createElement("div",{style:{height:10,width:"100%",backgroundColor:"blue"}}),r.Children.count(t)?t:i.map(function(t){var n=a[t],o=r.createElement("div",{className:"drag-node",key:"node_"+t,style:{position:"absolute",width:n.width,height:n.height,top:l,left:0}},e.renderChild(t));return l+=n.height,o}),"lastChild"===d&&r.createElement("div",{style:{top:l,position:"absolute",height:10,width:"100%",backgroundColor:"orange"}})),"right"===d&&r.createElement("div",{style:{height:"100%",width:3,backgroundColor:"white"}}))},n}(r.Component),P=function(e){function n(){var r=null!==e&&e.apply(this,arguments)||this;return r.state={wantToPlaceNext:null},r.selfRef=null,r.getBoundingRect=function(){return r.selfRef&&r.selfRef.getBoundingClientRect?r.selfRef.getBoundingClientRect():null},r.canDrop=function(e){var t=_(e).draggedNodeType,n=r.props,o=n.value.byId,a=n.node,d=a.parentId?o[a.parentId]:null;return"row"===t&&d&&"col"===d.type||!r.props.children&&("col"===t||"markdown"===t||"image"===t||"layer"===t||"custom"===t)},r.shouldPlaceBefore=function(e,t){var n=N(e,r.getBoundingRect()),o=n&&("y"===t?n.top/n.height<.3:n.left/n.width<.3);return o},r.onDrop=function(e,n){if(void 0===n&&(n=!1),r.canDrop(e.dataTransfer.types)){e.stopPropagation(),n||null===r.state.wantToPlaceNext||r.setState({wantToPlaceNext:null});var o=_(e.dataTransfer.types),a=o.draggedNodeId,d=o.draggedNodeType;if(a){var i=r.shouldPlaceBefore(e,"y");if("row"===d){var l=i?{beforeItemId:r.props.node.id}:{afterItemId:r.props.node.id};r.props.onChange(B(e.dataTransfer.types,r.props.node.parentId||"",t.__assign({},l,{isPlaceHolder:n}),r.props.value))}else{var s=r.shouldPlaceBefore(e,"x"),u=r.props.node.childrenIds,c=u.length;l=c?s?{beforeItemId:u[0]}:{afterItemId:u[c-1]}:null;r.props.onChange(B(e.dataTransfer.types,r.props.node.id,t.__assign({isPlaceHolder:n},l),r.props.value))}}}},r.onDragEnter=function(e){e.preventDefault()},r.onDragOver=function(e){var t=_(e.dataTransfer.types).draggedNodeType;if(r.canDrop(e.dataTransfer.types))if(e.preventDefault(),e.stopPropagation(),"row"===t){var n=r.shouldPlaceBefore(e,"y");n&&"top"!==r.state.wantToPlaceNext?r.setState({wantToPlaceNext:"top"}):n||"bottom"===r.state.wantToPlaceNext||r.setState({wantToPlaceNext:"bottom"})}else{n=r.shouldPlaceBefore(e,"x");r.setState({wantToPlaceNext:n?"firstChild":"lastChild"})}},r.onDragLeave=function(e){null!==r.state.wantToPlaceNext&&r.setState({wantToPlaceNext:null})},r}return t.__extends(n,e),n.prototype.render=function(){var e=this,t=this.props.children,n=this.props,o=n.node,a=n.value,d=n.onChange,i=n.renderEditBlock,l=this.state.wantToPlaceNext,s="firstChild"===l?3:0;return r.createElement("div",{key:"row_"+o.id},"top"===l&&r.createElement("div",{style:{height:3,width:"100%",backgroundColor:"black"}}),r.createElement("div",{ref:function(t){return e.selfRef=t},onDragOver:this.onDragOver,onDragLeave:this.onDragLeave,onDragEnter:this.onDragEnter,onDrop:this.onDrop,draggable:!0,onDragStart:function(t){return E(t,e.props.node,e.getBoundingRect)},style:{position:"relative",height:o.height,width:o.width,borderStyle:"dashed",borderWidth:0,borderBottomWidth:1,backgroundColor:o.isPlaceHolder?"darkgrey":o.backgroundColor||"#b5bbb9b0"}},"firstChild"===l&&r.createElement("div",{style:{height:"100%",width:3,backgroundColor:"blue"}}),r.Children.count(t)?t:o.childrenIds.map(function(e){var t=a.byId[e],n=r.createElement("div",{className:"drag-node",key:"node_"+t.id,style:{position:"absolute",width:t.width,height:t.height,top:0,left:s}},i({node:t,renderEditBlock:i,value:a,onChange:d}));return s+=t.width,n}),"lastChild"===l&&r.createElement("div",{style:{position:"absolute",left:s,height:"100%",width:3,backgroundColor:"orange"}})),"bottom"===l&&r.createElement("div",{style:{height:3,width:"100%",backgroundColor:"green"}}))},n}(r.Component),R=function(e){function n(){var t=null!==e&&e.apply(this,arguments)||this;return t.selfRef=null,t.getBoundingRect=function(){return t.selfRef&&t.selfRef.getBoundingClientRect?t.selfRef.getBoundingClientRect():null},t}return t.__extends(n,e),n.prototype.render=function(){var e=this,t=this.props.node;return r.createElement("div",{ref:function(t){return e.selfRef=t},draggable:!0,onDragStart:function(t){return E(t,e.props.node,e.getBoundingRect)},style:{width:"100%",height:"100%",backgroundColor:"violet",padding:5,borderRadius:3}},r.createElement("img",{style:{width:"100%",height:"100%"},src:t.value}))},n}(r.Component),T=function(e){function n(){var t=null!==e&&e.apply(this,arguments)||this;return t.selfRef=null,t.getBoundingRect=function(){return t.selfRef&&t.selfRef.getBoundingClientRect?t.selfRef.getBoundingClientRect():null},t}return t.__extends(n,e),n.prototype.render=function(){var e=this,t=this.props,n=t.node,o=t.update,a=n.value;return r.createElement("div",{ref:function(t){return e.selfRef=t},draggable:!0,onDragStart:function(t){return E(t,e.props.node,e.getBoundingRect)},style:{width:"100%",height:"100%",backgroundColor:"#ffc0cb75",padding:5,borderRadius:3}},r.createElement("textarea",{className:"form-control",name:"value",placeholder:"Type here...",value:a,onChange:function(e){return o(n.id,{value:e.target.value})}}))},n}(r.Component),S=function(e){var t=e.node,o=e.renderEditBlock,a=e.value,d=e.onChange,i=e.width,l=e.height,s=a.focusedNodeId;return r.createElement("div",{onClick:function(e){e.stopPropagation(),d(k(a,t))},style:t.id===s?{borderStyle:"dashed",borderWidth:1,borderColor:"orange"}:{}},r.createElement(n.ResizableBox,{className:"box",width:i,height:l,onResizeStart:function(e){e.preventDefault(),e.stopPropagation()},onResize:function(e,r){var n=r.size,o=n.width,i=n.height;d(I(a,t.id,{width:o,height:i}))}},"col"===t.type?r.createElement(x,{key:"col_"+t.id,node:t,renderEditBlock:o,value:a,onChange:d}):"row"===t.type?r.createElement(P,{key:"row_"+t.id,node:t,renderEditBlock:o,value:a,onChange:d}):"markdown"===t.type?r.createElement(T,{node:t,update:function(e,t){return d(I(a,e,t))}}):"layer"===t.type?r.createElement(D,{key:"layer_"+t.id,node:t,renderEditBlock:o,value:a,onChange:d}):r.createElement(R,{key:"image_"+t.id,node:t,renderEditBlock:o,value:a,onChange:d})))},W=function(e){var t=e.node,n=e.renderEditBlock,o=e.value,a=e.onChange;return r.createElement(S,{width:t.width,height:t.height,renderEditBlock:n,node:t,value:o,onChange:a})},M=function(e){function n(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={value:t.props.value},t}return t.__extends(n,e),n.prototype.componentDidMount=function(){if(this.props.onChange){var e=this.state.value;this.props.onChange(e)}},n.prototype.componentDidUpdate=function(e,r){if(this.props.onChange&&this.state.value!==r.value&&this.state.value!==this.props.value){var n=this.state.value;this.props.onChange(n)}else this.props.value&&e.value!==this.props.value&&this.props.value!==this.state.value&&this.setState({value:this.props.value});this.state.value.byId!==r.value.byId&&this.state.value.undoStack===r.value.undoStack&&(console.log("ADD TO UNDO STACK....!!!",o.cloneDeep(r.value.byId)),this.setState({value:t.__assign({},this.state.value,{undoStack:[r.value.byId].concat(this.state.value.undoStack)})}))},n.prototype.render=function(){var e=this,t=this.props.renderEditBlock,n=this.state.value,o=n.byId,a=n.rootNodeId,d=o[a];return r.createElement("div",{style:{position:"relative",width:d.width,height:d.height}},r.createElement(x,{key:"col_"+d.id,node:d,renderEditBlock:t,value:this.state.value,onChange:function(t){return e.setState({value:t})}}))},n.defaultProps={renderEditBlock:W,onChange:function(e){}},n}(r.Component);function O(e){return!!e.borderWidth&&e.borderWidth>0||!!e.borderTopWidth&&e.borderTopWidth>0||!!e.borderBottomWidth&&e.borderBottomWidth>0||!!e.borderLeftWidth&&e.borderLeftWidth>0||!!e.borderRightWidth&&e.borderRightWidth>0}var L=function(e){return{color:e.color||void 0,display:e.display||void 0,flexDirection:e.flexDirection||void 0,justifyContent:e.justifyContent||void 0,alignItems:e.alignItems||void 0,backgroundColor:e.backgroundColor||void 0,borderWidth:void 0!==e.borderWidth?e.borderWidth:0,borderTopWidth:void 0!==e.borderTopWidth?e.borderTopWidth:void 0,borderBottomWidth:void 0!==e.borderBottomWidth?e.borderBottomWidth:void 0,borderLeftWidth:void 0!==e.borderLeftWidth?e.borderLeftWidth:void 0,borderRightWidth:void 0!==e.borderRightWidth?e.borderRightWidth:void 0,borderStyle:e.borderStyle?e.borderStyle||void 0:O(e)?"solid":void 0}},F=function(e){var n=e.byId,o=e.node,d=e.renderPreviewBlock,i=void 0===d?j:d;if(!o)return null;switch(o.type){case"markdown":return r.createElement("div",{key:o.id,style:t.__assign({},L(o),{height:o.height,width:o.width})},r.createElement(a,{source:o.value}));case"layer":return r.createElement("div",{key:o.id,style:t.__assign({position:"relative"},L(o),{height:o.height,width:o.width})},o.childrenIds.map(function(e){var t=n[e];return r.createElement("div",{key:t.id,style:{position:"absolute",top:t.top||0,left:t.left||0}},i({byId:n,node:n[e],renderPreviewBlock:i}))}));case"image":return r.createElement("div",{key:o.id,style:{height:"100%",width:"100%"}},r.createElement("img",{src:o.value}));case"col":return r.createElement("div",{key:o.id,style:t.__assign({},L(o),{width:o.width,height:o.height,display:"flex",flexDirection:"column"})},o.childrenIds.map(function(e){return i({byId:n,node:n[e],renderPreviewBlock:i})}));case"row":return r.createElement("div",{key:o.id,style:t.__assign({},L(o),{width:o.width,height:o.height,display:"flex",flexDirection:"row"})},o.childrenIds.map(function(e){return i({byId:n,node:n[e],renderPreviewBlock:i})}));case"custom":return null}},j=function(e){var t=e.byId,n=e.node,o=e.renderPreviewBlock;return r.createElement(F,{key:"node_"+n.id,node:n,byId:t,renderPreviewBlock:o})},z=function(e){var t=e.byId,n=e.node,o=e.onSelect,a=e.navClassName,d=void 0===a?"breadcrumb":a,i=e.itemClassName,l=void 0===i?"breadcrumb-item btn btn-link active":i;if(!n)return null;for(var s=[],u=n.id;u;){var c=t[u];if(!c)break;s.unshift({label:c.type+"-"+c.id,id:c.id}),u=c.parentId}return r.createElement("nav",{"aria-label":"breadcrumb"},r.createElement("ol",{className:d},s.map(function(e){return r.createElement("li",{onClick:function(){return o(e.id)},key:"crumb_"+e.id,className:l,"aria-current":"page"},e.label)})))};function H(e,r){var n=e.byId,o=e.rootNodeId,a=e.focusedNodeId,d=(r?r.parentId:a)||o,i=n[d],l=["col","layer"];if((!i||l.indexOf(i.type)<0)&&(d=i?i.parentId:null,i=d?n[d]:i,!i||l.indexOf(i.type)<0))return{error:"Can only add a row inside "+l.join(", ")+", please select a column by clicking on it",value:e};var s=m(n,"row"),u=t.__assign({type:"row",height:100,width:i&&i.width?i.width:500},r,{id:s,name:s,childrenIds:[]});n=c(n,u,i.id),i=n[d];var p={};if("col"===i.type&&i&&i.childrenIds.length>=1)for(var h=i.height/i.childrenIds.length,f=0,g=i.childrenIds;f<g.length;f++){var v=g[f];p[v]=t.__assign({},n[v],{height:h})}return{createdBlock:u,value:t.__assign({},e,{byId:t.__assign({},n,p),focusedNodeId:a||u.id})}}function q(e,r){var n=e.byId,o=e.rootNodeId,a=e.focusedNodeId,d=(r?r.parentId:a)||o,i=n[d],l=["row","layer"];if((!i||l.indexOf(i.type)<0)&&(d=i?i.parentId:null,i=d?n[d]:i,!i||l.indexOf(i.type)<0))return{error:"Can only add a column inside "+l.join(", ")+", please select a column by clicking on it",value:e};var s=m(n,"col"),u=t.__assign({type:"col",width:100,height:i.height?i.height:100},r,{id:s,name:s,childrenIds:[]});n=c(n,u,d),i=n[d];var p={};if("row"===i.type&&i&&i.childrenIds.length>=1)for(var h=i.width/i.childrenIds.length,f=0,g=i.childrenIds;f<g.length;f++){var v=g[f];p[v]=t.__assign({},n[v],{width:h})}return{createdBlock:u,value:t.__assign({},e,{byId:t.__assign({},n,p),focusedNodeId:a||u.id})}}function U(e,r){var n=e.byId,o=e.rootNodeId,a=e.focusedNodeId,d=(r?r.parentId:a)||o,i=n[d],l=["row","col","layer"];if(!i||l.indexOf(i.type)<0)return{error:"Can only add markdown text inside "+l.join(", "),value:e};var s=m(n,"markdown"),u=t.__assign({type:"markdown",width:Math.max(1,i.width-20),height:Math.max(1,i.height-20)},r,{id:s,name:s,childrenIds:[]});return{createdBlock:u,value:t.__assign({},e,{byId:c(n,u,d),focusedNodeId:u.id})}}function A(e,r){var n=r&&r.value?r.value:window.prompt("Please enter image url","http://lorempixel.com/200/200/");if(null===n)return{error:"no image selected",value:e};var o=e.byId,a=e.rootNodeId,d=e.focusedNodeId,i=(r?r.parentId:d)||a,l=o[i],s=["row","col","layer"];if(!l||s.indexOf(l.type)<0)return{error:"Can only add an image inside "+s.join(", "),value:e};var u=m(o,"image"),p=t.__assign({type:"image",value:n,width:200,height:200},r,{id:u,name:u,childrenIds:[]});return{createdBlock:p,value:t.__assign({},e,{byId:c(o,p,i),focusedNodeId:p.id})}}function J(e,r){var n=e.byId,o=e.rootNodeId,a=e.focusedNodeId,d=(r?r.parentId:a)||o,i=n[d],l=["row","col","layer"];if(!i||l.indexOf(i.type)<0)return{error:"Can only add a layer inside "+l.join(", "),value:e};var s=m(n,"layer"),u=t.__assign({type:"layer",width:Math.max(1,i.width-20),height:Math.max(1,i.height-20)},r,{id:s,name:s,childrenIds:[]});return{createdBlock:u,value:t.__assign({},e,{byId:c(n,u,d),focusedNodeId:u.id})}}var K=function(e){function r(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={selectedMenu:null,selectedColor:null},t.toggleMenu=function(e){if(t.setState({selectedMenu:t.state.selectedMenu===e?null:e}),"color"===e||"backgroundColor"===e){var r=t.props.value,n=r.byId,o=r.focusedNodeId,a=o?n[o]:null;t.setState({selectedColor:a?a.color:void 0})}},t.renderColorMenuItem=function(e){var r=t.props.value,n=r.byId,o=r.focusedNodeId;if(o){var a=o?n[o]:null;return i.createElement(i.Fragment,null,i.createElement(X,{onClick:function(){return t.toggleMenu(e)},color:a[e]}),t.state.selectedMenu===e&&i.createElement("div",{style:{position:"absolute",zIndex:100,backgroundColor:"white"}},i.createElement("button",{className:t.props.buttonClassName,onClick:function(){var r;t.props.updateBlock(o,(r={},r[e]=void 0,r)),t.toggleMenu(e)}},"Clear"),i.createElement("button",{className:t.props.buttonClassName,onClick:function(){var r;t.toggleMenu(e),t.props.updateBlock(o,(r={},r[e]=t.state.selectedColor,r))}},"Done"),i.createElement(d.SketchPicker,{color:t.state.selectedColor||void 0,onChangeComplete:function(e){var r=e.hex;t.setState({selectedColor:r})}})))}},t}return t.__extends(r,e),r.prototype.render=function(){var e=this.props,r=e.buttonClassName,n=e.breadCrumbsProps,o=e.value,a=o.byId,d=o.focusedNodeId,l=this.props,s=d?a[d]:null,u=l.focusNode,c=r;return i.createElement("div",null,i.createElement("div",null,i.createElement("button",{"aria-label":"add row",className:c,onClick:function(){return l.addRow()}},"+ Row"),i.createElement("button",{"aria-label":"add column",className:c,onClick:function(){return l.addCol()}},"+ Col"),i.createElement("button",{"aria-label":"add layer",className:c,onClick:function(){return l.addLayer()}},"+ Layer"),i.createElement("button",{"aria-label":"add markdown",className:c,onClick:function(){return l.addMarkDown()}},"+ Text"),i.createElement("button",{"aria-label":"add image",className:c,onClick:function(){return l.addImage()}},"+ Image"),i.createElement("button",{"aria-label":"add image",className:c,onClick:function(){l.onChange(function(e,t){if(!t)return alert("Please select node to add table to"),e;var r=window.prompt("Enter number or rows (max 10)","5");if(null===r)return e;var n=window.prompt("Enter number or columns (max 10)","5");if(null===n)return e;var o=window.prompt("Enter table width (max 400)","300");if(null===o)return e;var a=window.prompt("Enter table height (max 400)","300");if(null===a)return e;var d=Math.min(parseInt(o,10),400),i=Math.min(parseInt(a,10),400),l=q(e,{width:d,height:i,parentId:t}),s=l.value,u=l.createdBlock;if(!u)return e;e=s;for(var c=u.id,p=Math.max(1,Math.min(parseInt(r,10),10)),h=Math.max(1,Math.min(parseInt(n,10),10)),f=0;f<p;++f){var g=H(e,{height:i/p,parentId:c}),v=g.value,m=g.createdBlock;if(!m)break;e=v;for(var y=0;y<h;++y){var I=q(e,{parentId:m.id,height:m.height,width:m.width/h}),b=I.value,C=I.createdBlock;if(!C)break;e=b}}return e}(l.value,l.value.focusedNodeId))}},"+ Table"),i.createElement("button",{"aria-label":"undo",className:c,onClick:l.undo},"Undo"),i.createElement("button",{"aria-label":"redo",className:c,onClick:l.redo},"Redo")),s&&i.createElement("div",{style:{paddingLeft:15}},this.renderColorMenuItem("color"),this.renderColorMenuItem("backgroundColor"),i.createElement("button",{className:c,onClick:function(){return l.moveInDirection(s.id,"left")}},"⬅️"),i.createElement("button",{className:c,onClick:function(){return l.moveInDirection(s.id,"right")}},"➡️"),i.createElement("button",{className:c,onClick:function(){return l.moveInDirection(s.id,"up")}},"⬆"),i.createElement("button",{className:c,onClick:function(){return l.moveInDirection(s.id,"down")}},"⬇"),i.createElement("button",{className:c,onClick:function(){return l.onChange(function(e,t){if(!t)return e;var r=e.byId,n=r[t];if(!n)return e;var o=n.parentId,a=r[o];return a?C(e,t,o,{afterItemId:a.childrenIds[a.childrenIds.length-1]}):e}(l.value,l.value.focusedNodeId))}},"FlipToFront"),i.createElement("button",{"aria-label":"copy",className:c,onClick:function(){return l.copyFocused()}},"Copy"),i.createElement("button",{"aria-label":"paste",className:c,onClick:function(){return l.paste()}},"Paste"),i.createElement("button",{"aria-label":"delete",onClick:l.removeFocused},"🗑"),i.createElement("div",null,i.createElement(z,t.__assign({onSelect:function(e){return u(e,!0)},byId:a,node:s},n))),i.createElement("div",{style:{paddingBottom:20}},[{prop:"width",numeric:!0},{prop:"height",numeric:!0},{prop:"top",numeric:!0},{prop:"left",numeric:!0},{prop:"borderWidth",numeric:!0},{prop:"borderTopWidth",numeric:!0},{prop:"borderBottomWidth",numeric:!0},{prop:"borderLeftWidth",numeric:!0},{prop:"borderRightWidth",numeric:!0},{prop:"borderStyle",numeric:!1}].map(function(e){return i.createElement("div",{style:{display:"inline-block",marginRight:10},className:"form-group"},i.createElement("label",{style:{marginRight:5},htmlFor:e.prop,className:"form-label"},e.prop),i.createElement("input",{name:e.prop,className:"form-control",key:"prop_"+e.prop,value:void 0===s[e.prop]?"":s[e.prop],onChange:(t=s.id,r=e.prop,n=e.numeric,function(e){var o;l.updateBlock(t,(o={},o[r]=n?e.target.value?parseInt(e.target.value,10):void 0:e.target.value,o))}),type:e.numeric?"numeric":void 0}));var t,r,n}))))},r}(i.Component),X=function(e){return i.createElement("button",{style:{borderWidth:1,fontSize:11,borderStyle:"solid",justifyContent:"flex-start"},onClick:e.onClick},i.createElement("div",{style:{display:"flex"}},i.createElement("div",{style:{borderWidth:1,borderRadius:3,borderStyle:"solid",width:20,height:20,backgroundColor:e.color||void 0}})," ",e.color?"":"none"))};var Y=function(e){function n(){var r=null!==e&&e.apply(this,arguments)||this;return r.addRow=function(e){var t=H(r.props.value,e),n=t.error,o=t.value;n?alert(n):r.props.onChange(o)},r.addCol=function(e){var t=q(r.props.value,e),n=t.error,o=t.value;n?alert(n):r.props.onChange(o)},r.addMarkDown=function(e){var t=U(r.props.value,e),n=t.error,o=t.value;n?alert(n):r.props.onChange(o)},r.addImage=function(e){var t=A(r.props.value,e),n=t.error,o=t.value;n?alert(n):r.props.onChange(o)},r.addLayer=function(e){var t=J(r.props.value,e),n=t.error,o=t.value;n?alert(n):r.props.onChange(o)},r.removeFocused=function(){var e=r.props.value.focusedNodeId;e&&r.destroy(e)},r.focusNode=function(e,t){void 0===t&&(t=!0);var n=r.props.value;r.props.onChange(k(n,e,t))},r.create=function(e){r.props.onChange(y(r.props.value,e))},r.updateBlock=function(e,t){r.props.onChange(I(r.props.value,e,t))},r.destroy=function(e){r.props.onChange(b(r.props.value,e))},r.move=function(e,t,n){void 0===n&&(n={}),r.props.onChange(C(r.props.value,e,t,n))},r.moveInDirection=function(e,t){r.props.onChange(w(r.props.value,e,{direction:t}))},r.copyFocused=function(){var e=r.props.value,n=e.byId,o=e.focusedNodeId;if(o){var a=n[o];r.props.onChange(t.__assign({},r.props.value,{copiedNode:f(n,a)}))}},r.paste=function(){r.props.onChange(g(r.props.value))},r.undo=function(){var e=r.props.value,n=e.byId,o=e.undoStack,a=e.redoStack;if(o.length>0){var d=o[0],i=[n].concat(a),l=o.slice(1);r.props.onChange(t.__assign({},r.props.value,{byId:d,undoStack:l,redoStack:i}))}},r.redo=function(){var e=r.props.value,n=e.byId,o=e.undoStack,a=e.redoStack;if(a.length>0){var d=a[0],i=[n].concat(o),l=a.slice(1);r.props.onChange(t.__assign({},r.props.value,{byId:d,undoStack:i,redoStack:l}))}},r}return t.__extends(n,e),n.prototype.render=function(){var e=this,n=this.props,o=n.UiComponent,a=n.onChange,d=n.value,i=n.controlUiProps;return r.createElement(o,t.__assign({value:d,onChange:a,addRow:this.addRow,addCol:this.addCol,addImage:this.addImage,addLayer:this.addLayer,addMarkDown:this.addMarkDown,moveInDirection:this.moveInDirection,copyFocused:this.copyFocused,paste:this.paste,focusNode:function(t,r){return e.focusNode(d.byId[t],r)},removeFocused:this.removeFocused,updateBlock:this.updateBlock,undo:this.undo,redo:this.redo},i))},n.defaultProps={UiComponent:K},n}(r.Component);e.AbsoluteLayerBlock=D,e.BlockBreadCrumbs=z,e.BlockEditor=M,e.BlockEditorControl=Y,e.BlockEditorControlDefaultUI=K,e.DraggableColBlock=x,e.DraggableRowBlock=P,e.ImageBlock=R,e.MarkdownBlock=T,e.Preview=F,e.ResizableBlock=S,e.addCol=q,e.addImage=A,e.addLayer=J,e.addMarkDown=U,e.addRow=H,e.create=y,e.deepCopy=f,e.defaultRenderEditBlock=W,e.defaultRenderPreviewBlock=j,e.destroy=b,e.focusNode=k,e.getDragPositionRelativeToTarget=N,e.hasDescendent=u,e.move=C,e.moveInDirection=w,e.newBlockId=m,e.onDragStart=E,e.onDropped=B,e.parseTypes=_,e.paste=g,e.pasteChild=v,e.placeNodeInParent=c,e.reinsertIntoList=p,e.removeNode=s,e.update=I,e.updateNode=l});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("tslib"),require("react"),require("react-resizable"),require("lodash-es"),require("react-markdown"),require("react-color")):"function"==typeof define&&define.amd?define(["exports","tslib","react","react-resizable","lodash-es","react-markdown","react-color"],t):(e=e||self,t(e["react-movable-block-editor"]={},e.tslib_1,e.React,e.reactResizable,e.lodashEs,e.MarkDown,e.reactColor))}(this,function(e,t,r,n,o,a,d){"use strict";var i="default"in r?r.default:r;function l(e,r){var n;return t.__assign({},e,(n={},n[r.id]=r,n))}function s(e,r){var n,o=e[r];if(!o)return e;if(o&&o.parentId){var a=e[o.parentId];if(a){var d=a.childrenIds.findIndex(function(e){return e===o.id});if(d>=0){var i=a.childrenIds.filter(function(e){return e!==o.id});e=l(e,t.__assign({},a,{childrenIds:i}))}}}return t.__assign({},e,(n={},n[r]=void 0,n))}function u(e,t,r){var n=e[t];if(!n)return!1;if(n.childrenIds.indexOf(r)>=0)return!0;for(var o=0,a=n.childrenIds;o<a.length;o++){var d=a[o],i=u(e,d,r);if(i)return!1}return!1}function c(e,r,n,o){if(!r)return e;if(u(e,r.id,n))return console.warn("node ",r.id," has ",n," as child, so cannot make it into",r.id,"'s parent"),e;if(r.id===n)return console.warn("Cannot place into self: ",{id:r.id,newParentId:n}),e;if(r&&r.parentId&&r.parentId!==n){var a=e[r.parentId];if(a){var d=a.childrenIds.filter(function(e){return e!==r.id});e=l(e,t.__assign({},a,{childrenIds:d}))}}var i=e[n];if(i){d=p(i.childrenIds,r.id,o);e=l(e,t.__assign({},i,{childrenIds:d}))}return l(e,t.__assign({},r,{parentId:n}))}function p(e,r,n){if(void 0===n&&(n={}),r===n.beforeItemId||r===n.afterItemId)return console.warn("Cannot place relative to self: ",t.__assign({itemId:r},n)),e;e=e.filter(function(e){return e!==r});var o=n.beforeItemId,a=n.afterItemId,d=-1;if(o?d=e.findIndex(function(e){return e===o}):a&&(d=e.findIndex(function(e){return e===a})+1),d>=0){var i=e.slice();return i.splice(d,0,r),i}return e.concat([r])}a=a&&a.hasOwnProperty("default")?a.default:a;var h=require("lodash-es").cloneDeep;function f(e,r){return r?t.__assign({},r,{value:h(r.value),childrenIds:r.childrenIds.slice(),children:r.childrenIds.map(function(t){return f(e,e[t])})}):r}function g(e){var r=e.byId,n=(e||{copiedNode:null}).copiedNode;if(!n)return e;n=h(n);var o=v(r,n).byId;if(n.parentId){var a=r[n.parentId];if(a)return t.__assign({},e,{byId:c(o,n,n.parentId,{afterItemId:a.childrenIds[a.childrenIds.length-1]})})}return e}function v(e,r){var n;r.id=m(e,r.type);var o=r.children;if(r.children=void 0,e=t.__assign({},e,(n={},n[r.id]=r,n)),o)for(var a=0,d=0,i=o;d<i.length;d++){var l=i[d];l.parentId=r.id;var s=v(e,l),u=s.byId,c=s.newId;r.childrenIds[a]=c,e=u,++a}return{byId:e,newId:r.id}}function m(e,t){void 0===t&&(t="node");for(var r=Object.keys(e).length;e[r];)r++;return t+"_"+r}function y(e,r){var n=e.byId,o=m(n),a=t.__assign({},n[o],r);return t.__assign({},e,{byId:l(n,a)})}function I(e,r,n){var o=e.byId,a=t.__assign({},o[r],n);return t.__assign({},e,{byId:l(o,a)})}function b(e,r){var n=e.byId,o=e.rootNodeId,a=e.focusedNodeId;return o===r?(alert("Cannot destroy root node"),t.__assign({},e,{byId:n,focusedNodeId:a})):t.__assign({},e,{byId:s(n,r),focusedNodeId:a===r?null:a})}function C(e,r,n,o){if(void 0===o&&(o={}),!n)return e;var a=e.byId,d=a[r];return t.__assign({},e,{byId:c(a,t.__assign({},d,{isPlaceHolder:o.isPlaceHolder},o.absolutePos?{top:o.absolutePos.top,left:o.absolutePos.left}:{}),n,o)})}function w(e,r,n){void 0===n&&(n={});var o=e.byId,a=o[r];if(!a)return e;var d=a.parentId;if(!d)return e;var i=o[d];if(!i)return e;var l=o[i.parentId],s=i.childrenIds.indexOf(r);if(s<0)return e;var u={};if("row"===i.type)if("left"===n.direction){if(0===s)return e;u={beforeItemId:i.childrenIds[s-1]}}else{if("right"!==n.direction){if(l&&"col"===l.type){var p=l.childrenIds.indexOf(i.id);return p>0&&"up"===n.direction?C(e,r,l.childrenIds[p-1]):p<l.childrenIds.length-1&&"down"===n.direction?C(e,r,l.childrenIds[p+1]):e}return e}if(s>=i.childrenIds.length-1)return e;u={afterItemId:i.childrenIds[s+1]}}else if("col"===i.type)if("up"===n.direction){if(0===s)return e;u={beforeItemId:i.childrenIds[s-1]}}else{if("down"!==n.direction){if(l&&"row"===l.type){p=l.childrenIds.indexOf(i.id);return p>0&&"left"===n.direction?C(e,r,l.childrenIds[p-1]):p<l.childrenIds.length-1&&"right"===n.direction?C(e,r,l.childrenIds[p+1]):e}return e}if(s>=i.childrenIds.length-1)return e;u={afterItemId:i.childrenIds[s+1]}}else if("layer"===i.type){var h=("up"===n.direction?-1:"down"===n.direction?1:0)*(n.stepPx||1),f=("left"===n.direction?-1:"right"===n.direction?1:0)*(n.stepPx||1);u={absolutePos:{top:(a.top||0)+h,left:(a.left||0)+f}}}return t.__assign({},e,{byId:c(o,t.__assign({},a,{isPlaceHolder:u.isPlaceHolder},u.absolutePos?{top:u.absolutePos.top,left:u.absolutePos.left}:{}),d,u)})}function k(e,r,n){if(void 0===n&&(n=!0),!r)return e;var o=e.focusedNodeId;return t.__assign({},e,{focusedNodeId:n?r.id:o===r.id?null:o})}function _(e){var t=e.filter(function(e){return 0===e.indexOf("draggednodeid:")}),r=e.filter(function(e){return 0===e.indexOf("draggednodetype:")});if(1!==t.length||1!==r.length)return{draggedNodeId:"notanode",draggedNodeType:null};var n=t[0].slice("draggednodeid:".length),o=r[0].slice("draggednodetype:".length);return{draggedNodeId:n,draggedNodeType:o}}function N(e,t){return t?{left:e.clientX-t.left,top:e.clientY-t.top,width:t.width,height:t.height}:null}function E(e,t,r){e.stopPropagation();var n=N(e,r());n&&e.dataTransfer.setData("text/plain",JSON.stringify({startLeft:n.left,startTop:n.top})),e.dataTransfer.setData("draggednodeid:"+t.id,""),e.dataTransfer.setData("draggednodetype:"+t.type,"")}function B(e,t,r,n){void 0===r&&(r={});var o=_(e).draggedNodeId;return C(n,o,t,r)}var D=function(e){function n(){var t=null!==e&&e.apply(this,arguments)||this;return t.selfRef=null,t.getBoundingRect=function(){return t.selfRef&&t.selfRef.getBoundingClientRect?t.selfRef.getBoundingClientRect():null},t.canDrop=function(e){var t=_(e).draggedNodeType;return"row"===t||"col"===t||"markdown"===t||"image"===t||"layer"===t||"custom"===t},t.onDrop=function(e,r){if(void 0===r&&(r=!1),t.canDrop(e.dataTransfer.types)){e.stopPropagation();var n=_(e.dataTransfer.types).draggedNodeId;if(n){var o=N(e,t.getBoundingRect()),a=t.props.node.childrenIds.length?t.props.node.childrenIds[t.props.node.childrenIds.length-1]:void 0,d=JSON.parse(e.dataTransfer.getData("text/plain"));t.props.onChange(B(e.dataTransfer.types,t.props.node.id,o?{afterItemId:a,absolutePos:{top:o.top-d.startTop,left:o.left-d.startLeft}}:void 0,t.props.value))}}},t.onDragEnter=function(e){e.preventDefault()},t.onDragOver=function(e){t.canDrop(e.dataTransfer.types)&&(e.preventDefault(),e.stopPropagation())},t}return t.__extends(n,e),n.prototype.renderChild=function(e){var t=this.props,r=t.value,n=t.onChange,o=t.renderEditBlock,a=r.byId[e];return o({node:a,renderEditBlock:o,value:r,onChange:n})},n.prototype.render=function(){var e=this,t=this.props,n=t.node,o=t.value.byId,a=n.childrenIds;return r.createElement("div",{ref:function(t){return e.selfRef=t},onDragOver:this.onDragOver,onDrop:this.onDrop,draggable:!0,onDragStart:function(t){return E(t,e.props.node,e.getBoundingRect)},style:{position:"relative",width:n.width,height:n.height,backgroundColor:n.backgroundColor||"#f5f5f5a3",borderRadius:3}},a.map(function(t){var n=o[t],a=r.createElement("div",{key:"node_"+t,style:{position:"absolute",width:n.width,height:n.height,top:n.top,left:n.left}},e.renderChild(t));return a}))},n}(r.Component),x=function(e){function n(){var r=null!==e&&e.apply(this,arguments)||this;return r.selfRef=null,r.state={wantToPlaceNext:null},r.getBoundingRect=function(){return r.selfRef&&r.selfRef.getBoundingClientRect?r.selfRef.getBoundingClientRect():null},r.canDrop=function(e){var t=r.props,n=t.value.byId,o=t.node,a=o.parentId?n[o.parentId]:null,d=_(e).draggedNodeType;return"col"===d&&a&&"row"===a.type||!r.props.children&&("row"===d||"markdown"===d||"image"===d||"layer"===d||"custom"===d)},r.shouldPlaceBefore=function(e,t){var n=N(e,r.getBoundingRect()),o=n&&("y"===t?n.top/n.height<.45:n.left/n.width<.45);return o},r.onDrop=function(e,n){if(void 0===n&&(n=!1),r.canDrop(e.dataTransfer.types)){e.stopPropagation(),n||null===r.state.wantToPlaceNext||r.setState({wantToPlaceNext:null});var o=_(e.dataTransfer.types),a=o.draggedNodeId,d=o.draggedNodeType;if(a)if("col"===d){var i=r.shouldPlaceBefore(e,"x"),l=i?{beforeItemId:r.props.node.id}:{afterItemId:r.props.node.id};r.props.onChange(B(e.dataTransfer.types,r.props.node.parentId||"",t.__assign({},l,{isPlaceHolder:n}),r.props.value))}else{i=r.shouldPlaceBefore(e,"y");var s=r.props.node.childrenIds,u=s.length;l=u?i?{beforeItemId:s[0]}:{afterItemId:s[u-1]}:null;r.props.onChange(B(e.dataTransfer.types,r.props.node.id,t.__assign({isPlaceHolder:n},l),r.props.value))}}},r.onDragEnter=function(e){e.preventDefault()},r.onDragOver=function(e){if(r.canDrop(e.dataTransfer.types)){e.preventDefault(),e.stopPropagation();var t=_(e.dataTransfer.types).draggedNodeType;if("col"===t){var n=r.shouldPlaceBefore(e,"x");n&&"left"!==r.state.wantToPlaceNext?r.setState({wantToPlaceNext:"left"}):n||"right"===r.state.wantToPlaceNext||r.setState({wantToPlaceNext:"right"})}else{n=r.shouldPlaceBefore(e,"y");r.setState({wantToPlaceNext:n?"firstChild":"lastChild"})}}},r.onDragLeave=function(e){null!==r.state.wantToPlaceNext&&r.setState({wantToPlaceNext:null})},r}return t.__extends(n,e),n.prototype.renderChild=function(e){var t=this.props,r=t.value,n=t.onChange,o=t.renderEditBlock,a=r.byId[e];return o({node:a,renderEditBlock:o,value:r,onChange:n})},n.prototype.render=function(){var e=this,t=this.props.children,n=this.props,o=n.node,a=n.value.byId,d=this.state.wantToPlaceNext,i=o.childrenIds,l="firstChild"===d?3:0;return r.createElement("div",{key:"col_"+o.id,style:{display:"flex",flexDirection:"row",width:"100%",height:"100%"}},"left"===d&&r.createElement("div",{style:{height:"100%",width:3,backgroundColor:"white"}}),r.createElement("div",{ref:function(t){return e.selfRef=t},onDragOver:this.onDragOver,onDragLeave:this.onDragLeave,onDrop:this.onDrop,onDragEnter:this.onDragEnter,draggable:!0,onDragStart:function(t){return E(t,e.props.node,e.getBoundingRect)},style:{width:"100%",height:"100%",borderRadius:3,backgroundColor:this.props.node.isPlaceHolder?"grey":this.props.node.backgroundColor||"#ffffffa8",borderStyle:"solid",borderWidth:1}},"firstChild"===d&&r.createElement("div",{style:{height:10,width:"100%",backgroundColor:"blue"}}),r.Children.count(t)?t:i.map(function(t){var n=a[t],o=r.createElement("div",{className:"drag-node",key:"node_"+t,style:{position:"absolute",width:n.width,height:n.height,top:l,left:0}},e.renderChild(t));return l+=n.height,o}),"lastChild"===d&&r.createElement("div",{style:{top:l,position:"absolute",height:10,width:"100%",backgroundColor:"orange"}})),"right"===d&&r.createElement("div",{style:{height:"100%",width:3,backgroundColor:"white"}}))},n}(r.Component),P=function(e){function n(){var r=null!==e&&e.apply(this,arguments)||this;return r.state={wantToPlaceNext:null},r.selfRef=null,r.getBoundingRect=function(){return r.selfRef&&r.selfRef.getBoundingClientRect?r.selfRef.getBoundingClientRect():null},r.canDrop=function(e){var t=_(e).draggedNodeType,n=r.props,o=n.value.byId,a=n.node,d=a.parentId?o[a.parentId]:null;return"row"===t&&d&&"col"===d.type||!r.props.children&&("col"===t||"markdown"===t||"image"===t||"layer"===t||"custom"===t)},r.shouldPlaceBefore=function(e,t){var n=N(e,r.getBoundingRect()),o=n&&("y"===t?n.top/n.height<.3:n.left/n.width<.3);return o},r.onDrop=function(e,n){if(void 0===n&&(n=!1),r.canDrop(e.dataTransfer.types)){e.stopPropagation(),n||null===r.state.wantToPlaceNext||r.setState({wantToPlaceNext:null});var o=_(e.dataTransfer.types),a=o.draggedNodeId,d=o.draggedNodeType;if(a){var i=r.shouldPlaceBefore(e,"y");if("row"===d){var l=i?{beforeItemId:r.props.node.id}:{afterItemId:r.props.node.id};r.props.onChange(B(e.dataTransfer.types,r.props.node.parentId||"",t.__assign({},l,{isPlaceHolder:n}),r.props.value))}else{var s=r.shouldPlaceBefore(e,"x"),u=r.props.node.childrenIds,c=u.length;l=c?s?{beforeItemId:u[0]}:{afterItemId:u[c-1]}:null;r.props.onChange(B(e.dataTransfer.types,r.props.node.id,t.__assign({isPlaceHolder:n},l),r.props.value))}}}},r.onDragEnter=function(e){e.preventDefault()},r.onDragOver=function(e){var t=_(e.dataTransfer.types).draggedNodeType;if(r.canDrop(e.dataTransfer.types))if(e.preventDefault(),e.stopPropagation(),"row"===t){var n=r.shouldPlaceBefore(e,"y");n&&"top"!==r.state.wantToPlaceNext?r.setState({wantToPlaceNext:"top"}):n||"bottom"===r.state.wantToPlaceNext||r.setState({wantToPlaceNext:"bottom"})}else{n=r.shouldPlaceBefore(e,"x");r.setState({wantToPlaceNext:n?"firstChild":"lastChild"})}},r.onDragLeave=function(e){null!==r.state.wantToPlaceNext&&r.setState({wantToPlaceNext:null})},r}return t.__extends(n,e),n.prototype.render=function(){var e=this,t=this.props.children,n=this.props,o=n.node,a=n.value,d=n.onChange,i=n.renderEditBlock,l=this.state.wantToPlaceNext,s="firstChild"===l?3:0;return r.createElement("div",{key:"row_"+o.id},"top"===l&&r.createElement("div",{style:{height:3,width:"100%",backgroundColor:"black"}}),r.createElement("div",{ref:function(t){return e.selfRef=t},onDragOver:this.onDragOver,onDragLeave:this.onDragLeave,onDragEnter:this.onDragEnter,onDrop:this.onDrop,draggable:!0,onDragStart:function(t){return E(t,e.props.node,e.getBoundingRect)},style:{position:"relative",height:o.height,width:o.width,borderStyle:"dashed",borderWidth:0,borderBottomWidth:1,backgroundColor:o.isPlaceHolder?"darkgrey":o.backgroundColor||"#b5bbb9b0"}},"firstChild"===l&&r.createElement("div",{style:{height:"100%",width:3,backgroundColor:"blue"}}),r.Children.count(t)?t:o.childrenIds.map(function(e){var t=a.byId[e],n=r.createElement("div",{className:"drag-node",key:"node_"+t.id,style:{position:"absolute",width:t.width,height:t.height,top:0,left:s}},i({node:t,renderEditBlock:i,value:a,onChange:d}));return s+=t.width,n}),"lastChild"===l&&r.createElement("div",{style:{position:"absolute",left:s,height:"100%",width:3,backgroundColor:"orange"}})),"bottom"===l&&r.createElement("div",{style:{height:3,width:"100%",backgroundColor:"green"}}))},n}(r.Component),R=function(e){function n(){var t=null!==e&&e.apply(this,arguments)||this;return t.selfRef=null,t.getBoundingRect=function(){return t.selfRef&&t.selfRef.getBoundingClientRect?t.selfRef.getBoundingClientRect():null},t}return t.__extends(n,e),n.prototype.render=function(){var e=this,t=this.props.node;return r.createElement("div",{ref:function(t){return e.selfRef=t},draggable:!0,onDragStart:function(t){return E(t,e.props.node,e.getBoundingRect)},style:{width:"100%",height:"100%",backgroundColor:"violet",padding:5,borderRadius:3}},r.createElement("img",{style:{width:"100%",height:"100%"},src:t.value}))},n}(r.Component),T=function(e){function n(){var t=null!==e&&e.apply(this,arguments)||this;return t.selfRef=null,t.getBoundingRect=function(){return t.selfRef&&t.selfRef.getBoundingClientRect?t.selfRef.getBoundingClientRect():null},t}return t.__extends(n,e),n.prototype.render=function(){var e=this,t=this.props,n=t.node,o=t.update,a=n.value;return r.createElement("div",{ref:function(t){return e.selfRef=t},draggable:!0,onDragStart:function(t){return E(t,e.props.node,e.getBoundingRect)},style:{width:"100%",height:"100%",backgroundColor:"#ffc0cb75",padding:5,borderRadius:3}},r.createElement("textarea",{className:"form-control",name:"value",placeholder:"Type here...",value:a,onChange:function(e){return o(n.id,{value:e.target.value})}}))},n}(r.Component),S=function(e){var t=e.node,o=e.renderEditBlock,a=e.value,d=e.onChange,i=e.width,l=e.height,s=a.focusedNodeId;return r.createElement("div",{onClick:function(e){e.stopPropagation(),d(k(a,t))},style:t.id===s?{borderStyle:"dashed",borderWidth:1,borderColor:"orange"}:{}},r.createElement(n.ResizableBox,{className:"box",width:i,height:l,onResizeStart:function(e){e.preventDefault(),e.stopPropagation()},onResize:function(e,r){var n=r.size,o=n.width,i=n.height;d(I(a,t.id,{width:o,height:i}))}},"col"===t.type?r.createElement(x,{key:"col_"+t.id,node:t,renderEditBlock:o,value:a,onChange:d}):"row"===t.type?r.createElement(P,{key:"row_"+t.id,node:t,renderEditBlock:o,value:a,onChange:d}):"markdown"===t.type?r.createElement(T,{node:t,update:function(e,t){return d(I(a,e,t))}}):"layer"===t.type?r.createElement(D,{key:"layer_"+t.id,node:t,renderEditBlock:o,value:a,onChange:d}):r.createElement(R,{key:"image_"+t.id,node:t,renderEditBlock:o,value:a,onChange:d})))},W=function(e){var t=e.node,n=e.renderEditBlock,o=e.value,a=e.onChange;return r.createElement(S,{width:t.width,height:t.height,renderEditBlock:n,node:t,value:o,onChange:a})},M=function(e){function n(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={value:t.props.value},t}return t.__extends(n,e),n.prototype.componentDidMount=function(){if(this.props.onChange){var e=this.state.value;this.props.onChange(e)}},n.prototype.componentDidUpdate=function(e,r){if(this.props.onChange&&this.state.value!==r.value&&this.state.value!==this.props.value){var n=this.state.value;this.props.onChange(n)}else this.props.value&&e.value!==this.props.value&&this.props.value!==this.state.value&&this.setState({value:this.props.value});this.state.value.byId!==r.value.byId&&this.state.value.undoStack===r.value.undoStack&&this.setState({value:t.__assign({},this.state.value,{undoStack:[o.cloneDeep(r.value.byId)].concat(this.state.value.undoStack).slice(0,10)})})},n.prototype.render=function(){var e=this,t=this.props.renderEditBlock,n=this.state.value,o=n.byId,a=n.rootNodeId,d=o[a];return r.createElement("div",{style:{position:"relative",width:d.width,height:d.height}},r.createElement(x,{key:"col_"+d.id,node:d,renderEditBlock:t,value:this.state.value,onChange:function(t){return e.setState({value:t})}}))},n.defaultProps={renderEditBlock:W,onChange:function(e){}},n}(r.Component);function O(e){return!!e.borderWidth&&e.borderWidth>0||!!e.borderTopWidth&&e.borderTopWidth>0||!!e.borderBottomWidth&&e.borderBottomWidth>0||!!e.borderLeftWidth&&e.borderLeftWidth>0||!!e.borderRightWidth&&e.borderRightWidth>0}var L=function(e){return{color:e.color||void 0,display:e.display||void 0,flexDirection:e.flexDirection||void 0,justifyContent:e.justifyContent||void 0,alignItems:e.alignItems||void 0,backgroundColor:e.backgroundColor||void 0,borderWidth:void 0!==e.borderWidth?e.borderWidth:0,borderTopWidth:void 0!==e.borderTopWidth?e.borderTopWidth:void 0,borderBottomWidth:void 0!==e.borderBottomWidth?e.borderBottomWidth:void 0,borderLeftWidth:void 0!==e.borderLeftWidth?e.borderLeftWidth:void 0,borderRightWidth:void 0!==e.borderRightWidth?e.borderRightWidth:void 0,borderStyle:e.borderStyle?e.borderStyle||void 0:O(e)?"solid":void 0}},F=function(e){var n=e.byId,o=e.node,d=e.renderPreviewBlock,i=void 0===d?j:d;if(!o)return null;switch(o.type){case"markdown":return r.createElement("div",{key:o.id,style:t.__assign({},L(o),{height:o.height,width:o.width})},r.createElement(a,{source:o.value}));case"layer":return r.createElement("div",{key:o.id,style:t.__assign({position:"relative"},L(o),{height:o.height,width:o.width})},o.childrenIds.map(function(e){var t=n[e];return r.createElement("div",{key:t.id,style:{position:"absolute",top:t.top||0,left:t.left||0}},i({byId:n,node:n[e],renderPreviewBlock:i}))}));case"image":return r.createElement("div",{key:o.id,style:{height:"100%",width:"100%"}},r.createElement("img",{src:o.value}));case"col":return r.createElement("div",{key:o.id,style:t.__assign({},L(o),{width:o.width,height:o.height,display:"flex",flexDirection:"column"})},o.childrenIds.map(function(e){return i({byId:n,node:n[e],renderPreviewBlock:i})}));case"row":return r.createElement("div",{key:o.id,style:t.__assign({},L(o),{width:o.width,height:o.height,display:"flex",flexDirection:"row"})},o.childrenIds.map(function(e){return i({byId:n,node:n[e],renderPreviewBlock:i})}));case"custom":return null}},j=function(e){var t=e.byId,n=e.node,o=e.renderPreviewBlock;return r.createElement(F,{key:"node_"+n.id,node:n,byId:t,renderPreviewBlock:o})},z=function(e){var t=e.byId,n=e.node,o=e.onSelect,a=e.navClassName,d=void 0===a?"breadcrumb":a,i=e.itemClassName,l=void 0===i?"breadcrumb-item btn btn-link active":i;if(!n)return null;for(var s=[],u=n.id;u;){var c=t[u];if(!c)break;s.unshift({label:c.type+"-"+c.id,id:c.id}),u=c.parentId}return r.createElement("nav",{"aria-label":"breadcrumb"},r.createElement("ol",{className:d},s.map(function(e){return r.createElement("li",{onClick:function(){return o(e.id)},key:"crumb_"+e.id,className:l,"aria-current":"page"},e.label)})))};function H(e,r){var n=e.byId,o=e.rootNodeId,a=e.focusedNodeId,d=(r?r.parentId:a)||o,i=n[d],l=["col","layer"];if((!i||l.indexOf(i.type)<0)&&(d=i?i.parentId:null,i=d?n[d]:i,!i||l.indexOf(i.type)<0))return{error:"Can only add a row inside "+l.join(", ")+", please select a column by clicking on it",value:e};var s=m(n,"row"),u=t.__assign({type:"row",height:100,width:i&&i.width?i.width:500},r,{id:s,name:s,childrenIds:[]});n=c(n,u,i.id),i=n[d];var p={};if("col"===i.type&&i&&i.childrenIds.length>=1)for(var h=i.height/i.childrenIds.length,f=0,g=i.childrenIds;f<g.length;f++){var v=g[f];p[v]=t.__assign({},n[v],{height:h})}return{createdBlock:u,value:t.__assign({},e,{byId:t.__assign({},n,p),focusedNodeId:a||u.id})}}function q(e,r){var n=e.byId,o=e.rootNodeId,a=e.focusedNodeId,d=(r?r.parentId:a)||o,i=n[d],l=["row","layer"];if((!i||l.indexOf(i.type)<0)&&(d=i?i.parentId:null,i=d?n[d]:i,!i||l.indexOf(i.type)<0))return{error:"Can only add a column inside "+l.join(", ")+", please select a column by clicking on it",value:e};var s=m(n,"col"),u=t.__assign({type:"col",width:100,height:i.height?i.height:100},r,{id:s,name:s,childrenIds:[]});n=c(n,u,d),i=n[d];var p={};if("row"===i.type&&i&&i.childrenIds.length>=1)for(var h=i.width/i.childrenIds.length,f=0,g=i.childrenIds;f<g.length;f++){var v=g[f];p[v]=t.__assign({},n[v],{width:h})}return{createdBlock:u,value:t.__assign({},e,{byId:t.__assign({},n,p),focusedNodeId:a||u.id})}}function U(e,r){var n=e.byId,o=e.rootNodeId,a=e.focusedNodeId,d=(r?r.parentId:a)||o,i=n[d],l=["row","col","layer"];if(!i||l.indexOf(i.type)<0)return{error:"Can only add markdown text inside "+l.join(", "),value:e};var s=m(n,"markdown"),u=t.__assign({type:"markdown",width:Math.max(1,i.width-20),height:Math.max(1,i.height-20)},r,{id:s,name:s,childrenIds:[]});return{createdBlock:u,value:t.__assign({},e,{byId:c(n,u,d),focusedNodeId:u.id})}}function J(e,r){var n=r&&r.value?r.value:window.prompt("Please enter image url","http://lorempixel.com/200/200/");if(null===n)return{error:"no image selected",value:e};var o=e.byId,a=e.rootNodeId,d=e.focusedNodeId,i=(r?r.parentId:d)||a,l=o[i],s=["row","col","layer"];if(!l||s.indexOf(l.type)<0)return{error:"Can only add an image inside "+s.join(", "),value:e};var u=m(o,"image"),p=t.__assign({type:"image",value:n,width:200,height:200},r,{id:u,name:u,childrenIds:[]});return{createdBlock:p,value:t.__assign({},e,{byId:c(o,p,i),focusedNodeId:p.id})}}function A(e,r){var n=e.byId,o=e.rootNodeId,a=e.focusedNodeId,d=(r?r.parentId:a)||o,i=n[d],l=["row","col","layer"];if(!i||l.indexOf(i.type)<0)return{error:"Can only add a layer inside "+l.join(", "),value:e};var s=m(n,"layer"),u=t.__assign({type:"layer",width:Math.max(1,i.width-20),height:Math.max(1,i.height-20)},r,{id:s,name:s,childrenIds:[]});return{createdBlock:u,value:t.__assign({},e,{byId:c(n,u,d),focusedNodeId:u.id})}}var X=function(e){function r(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={selectedMenu:null,selectedColor:null},t.toggleMenu=function(e){if(t.setState({selectedMenu:t.state.selectedMenu===e?null:e}),"color"===e||"backgroundColor"===e){var r=t.props.value,n=r.byId,o=r.focusedNodeId,a=o?n[o]:null;t.setState({selectedColor:a?a.color:void 0})}},t.renderColorMenuItem=function(e){var r=t.props.value,n=r.byId,o=r.focusedNodeId;if(o){var a=o?n[o]:null;return i.createElement(i.Fragment,null,i.createElement(Y,{onClick:function(){return t.toggleMenu(e)},color:a[e]}),t.state.selectedMenu===e&&i.createElement("div",{style:{position:"absolute",zIndex:100,backgroundColor:"white"}},i.createElement("button",{className:t.props.buttonClassName,onClick:function(){var r;t.props.updateBlock(o,(r={},r[e]=void 0,r)),t.toggleMenu(e)}},"Clear"),i.createElement("button",{className:t.props.buttonClassName,onClick:function(){var r;t.toggleMenu(e),t.props.updateBlock(o,(r={},r[e]=t.state.selectedColor,r))}},"Done"),i.createElement(d.SketchPicker,{color:t.state.selectedColor||void 0,onChangeComplete:function(e){var r=e.hex;t.setState({selectedColor:r})}})))}},t}return t.__extends(r,e),r.prototype.render=function(){var e=this.props,r=e.buttonClassName,n=e.breadCrumbsProps,o=e.value,a=o.byId,d=o.focusedNodeId,l=this.props,s=d?a[d]:null,u=l.focusNode,c=r;return i.createElement("div",null,i.createElement("div",null,i.createElement("button",{"aria-label":"add row",className:c,onClick:function(){return l.addRow()}},"+ Row"),i.createElement("button",{"aria-label":"add column",className:c,onClick:function(){return l.addCol()}},"+ Col"),i.createElement("button",{"aria-label":"add layer",className:c,onClick:function(){return l.addLayer()}},"+ Layer"),i.createElement("button",{"aria-label":"add markdown",className:c,onClick:function(){return l.addMarkDown()}},"+ Text"),i.createElement("button",{"aria-label":"add image",className:c,onClick:function(){return l.addImage()}},"+ Image"),i.createElement("button",{"aria-label":"add image",className:c,onClick:function(){l.onChange(function(e,t){if(!t)return alert("Please select node to add table to"),e;var r=window.prompt("Enter number or rows (max 10)","5");if(null===r)return e;var n=window.prompt("Enter number or columns (max 10)","5");if(null===n)return e;var o=window.prompt("Enter table width (max 400)","300");if(null===o)return e;var a=window.prompt("Enter table height (max 400)","300");if(null===a)return e;var d=Math.min(parseInt(o,10),400),i=Math.min(parseInt(a,10),400),l=q(e,{width:d,height:i,parentId:t}),s=l.value,u=l.createdBlock;if(!u)return e;e=s;for(var c=u.id,p=Math.max(1,Math.min(parseInt(r,10),10)),h=Math.max(1,Math.min(parseInt(n,10),10)),f=0;f<p;++f){var g=H(e,{height:i/p,parentId:c}),v=g.value,m=g.createdBlock;if(!m)break;e=v;for(var y=0;y<h;++y){var I=q(e,{parentId:m.id,height:m.height,width:m.width/h}),b=I.value,C=I.createdBlock;if(!C)break;e=b}}return e}(l.value,l.value.focusedNodeId))}},"+ Table"),i.createElement("button",{"aria-label":"undo",className:c,onClick:l.undo},"Undo"),i.createElement("button",{"aria-label":"redo",className:c,onClick:l.redo},"Redo")),s&&i.createElement("div",{style:{paddingLeft:15}},this.renderColorMenuItem("color"),this.renderColorMenuItem("backgroundColor"),i.createElement("button",{className:c,onClick:function(){return l.moveInDirection(s.id,"left")}},"⬅️"),i.createElement("button",{className:c,onClick:function(){return l.moveInDirection(s.id,"right")}},"➡️"),i.createElement("button",{className:c,onClick:function(){return l.moveInDirection(s.id,"up")}},"⬆"),i.createElement("button",{className:c,onClick:function(){return l.moveInDirection(s.id,"down")}},"⬇"),i.createElement("button",{className:c,onClick:function(){return l.onChange(function(e,t){if(!t)return e;var r=e.byId,n=r[t];if(!n)return e;var o=n.parentId,a=r[o];return a?C(e,t,o,{afterItemId:a.childrenIds[a.childrenIds.length-1]}):e}(l.value,l.value.focusedNodeId))}},"FlipToFront"),i.createElement("button",{"aria-label":"copy",className:c,onClick:function(){return l.copyFocused()}},"Copy"),i.createElement("button",{"aria-label":"paste",className:c,onClick:function(){return l.paste()}},"Paste"),i.createElement("button",{"aria-label":"delete",onClick:l.removeFocused},"🗑"),i.createElement("div",null,i.createElement(z,t.__assign({onSelect:function(e){return u(e,!0)},byId:a,node:s},n))),i.createElement("div",{style:{paddingBottom:20}},[{prop:"width",numeric:!0},{prop:"height",numeric:!0},{prop:"top",numeric:!0},{prop:"left",numeric:!0},{prop:"borderWidth",numeric:!0},{prop:"borderTopWidth",numeric:!0},{prop:"borderBottomWidth",numeric:!0},{prop:"borderLeftWidth",numeric:!0},{prop:"borderRightWidth",numeric:!0},{prop:"borderStyle",numeric:!1}].map(function(e){return i.createElement("div",{key:e.prop,style:{display:"inline-block",marginRight:10},className:"form-group"},i.createElement("label",{style:{marginRight:5},htmlFor:e.prop,className:"form-label"},e.prop),i.createElement("input",{name:e.prop,className:"form-control",key:"prop_"+e.prop,value:void 0===s[e.prop]?"":s[e.prop],onChange:(t=s.id,r=e.prop,n=e.numeric,function(e){var o;l.updateBlock(t,(o={},o[r]=n?e.target.value?parseInt(e.target.value,10):void 0:e.target.value,o))}),type:e.numeric?"numeric":void 0}));var t,r,n}))))},r}(i.Component),Y=function(e){return i.createElement("button",{style:{borderWidth:1,fontSize:11,borderStyle:"solid",justifyContent:"flex-start"},onClick:e.onClick},i.createElement("div",{style:{display:"flex"}},i.createElement("div",{style:{borderWidth:1,borderRadius:3,borderStyle:"solid",width:20,height:20,backgroundColor:e.color||void 0}})," ",e.color?"":"none"))};var G=function(e){function n(){var r=null!==e&&e.apply(this,arguments)||this;return r.addRow=function(e){var t=H(r.props.value,e),n=t.error,o=t.value;n?alert(n):r.props.onChange(o)},r.addCol=function(e){var t=q(r.props.value,e),n=t.error,o=t.value;n?alert(n):r.props.onChange(o)},r.addMarkDown=function(e){var t=U(r.props.value,e),n=t.error,o=t.value;n?alert(n):r.props.onChange(o)},r.addImage=function(e){var t=J(r.props.value,e),n=t.error,o=t.value;n?alert(n):r.props.onChange(o)},r.addLayer=function(e){var t=A(r.props.value,e),n=t.error,o=t.value;n?alert(n):r.props.onChange(o)},r.removeFocused=function(){var e=r.props.value.focusedNodeId;e&&r.destroy(e)},r.focusNode=function(e,t){void 0===t&&(t=!0);var n=r.props.value;r.props.onChange(k(n,e,t))},r.create=function(e){r.props.onChange(y(r.props.value,e))},r.updateBlock=function(e,t){r.props.onChange(I(r.props.value,e,t))},r.destroy=function(e){r.props.onChange(b(r.props.value,e))},r.move=function(e,t,n){void 0===n&&(n={}),r.props.onChange(C(r.props.value,e,t,n))},r.moveInDirection=function(e,t){r.props.onChange(w(r.props.value,e,{direction:t}))},r.copyFocused=function(){var e=r.props.value,n=e.byId,o=e.focusedNodeId;if(o){var a=n[o];r.props.onChange(t.__assign({},r.props.value,{copiedNode:f(n,a)}))}},r.paste=function(){r.props.onChange(g(r.props.value))},r.undo=function(){var e=r.props.value,n=e.byId,o=e.undoStack,a=e.redoStack;if(o.length>0){var d=o[0],i=[n].concat(a),l=o.slice(1);r.props.onChange(t.__assign({},r.props.value,{byId:d,undoStack:l,redoStack:i}))}},r.redo=function(){var e=r.props.value,n=e.byId,o=e.undoStack,a=e.redoStack;if(a.length>0){var d=a[0],i=[n].concat(o),l=a.slice(1);r.props.onChange(t.__assign({},r.props.value,{byId:d,undoStack:i,redoStack:l}))}},r}return t.__extends(n,e),n.prototype.render=function(){var e=this,n=this.props,o=n.UiComponent,a=n.onChange,d=n.value,i=n.controlUiProps;return r.createElement(o,t.__assign({value:d,onChange:a,addRow:this.addRow,addCol:this.addCol,addImage:this.addImage,addLayer:this.addLayer,addMarkDown:this.addMarkDown,moveInDirection:this.moveInDirection,copyFocused:this.copyFocused,paste:this.paste,focusNode:function(t,r){return e.focusNode(d.byId[t],r)},removeFocused:this.removeFocused,updateBlock:this.updateBlock,undo:this.undo,redo:this.redo},i))},n.defaultProps={UiComponent:X},n}(r.Component);e.AbsoluteLayerBlock=D,e.BlockBreadCrumbs=z,e.BlockEditor=M,e.BlockEditorControl=G,e.BlockEditorControlDefaultUI=X,e.DraggableColBlock=x,e.DraggableRowBlock=P,e.ImageBlock=R,e.MarkdownBlock=T,e.Preview=F,e.ResizableBlock=S,e.addCol=q,e.addImage=J,e.addLayer=A,e.addMarkDown=U,e.addRow=H,e.create=y,e.deepCopy=f,e.defaultRenderEditBlock=W,e.defaultRenderPreviewBlock=j,e.destroy=b,e.focusNode=k,e.getDragPositionRelativeToTarget=N,e.hasDescendent=u,e.move=C,e.moveInDirection=w,e.newBlockId=m,e.onDragStart=E,e.onDropped=B,e.parseTypes=_,e.paste=g,e.pasteChild=v,e.placeNodeInParent=c,e.reinsertIntoList=p,e.removeNode=s,e.update=I,e.updateNode=l});
 //# sourceMappingURL=react-movable-block-editor.umd.production.js.map

package.json

 {
   "name": "react-movable-block-editor",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "author": {
@@ -5,0 +5,0 @@ "name": "nyura123"

No alert changes

Improved metrics

Lines of code

4741

increased by0.04%

Worsened metrics

Total package byte prevSize

837543

No dependency changes