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

React component for creating layouts and content via drag-and-drop blocks.

"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-dnd"),i=require("react-resizable"),d=require("lodash"),a=e(require("react-dnd-html5-backend")),l=e(require("react-dnd-touch-backend")),s=e(require("react-markdown")),c=require("react-color");function u(e,r){var n;return t.__assign({},e,(n={},n[r.id]=r,n))}function h(e,r){var n,o=e[r];if(!o)return e;if(o&&o.parentId){var i=e[o.parentId];if(i){var d=i.childrenIds.findIndex(function(e){return e===o.id});if(d>=0){var a=i.childrenIds.filter(function(e){return e!==o.id});e=u(e,t.__assign({},i,{childrenIds:a}))}}}return t.__assign({},e,(n={},n[r]=void 0,n))}function p(e,t,r,n){if(void 0===n&&(n={}),n[t])return!0;n[t]=!0;var o=e[t];if(!o)return!1;if(o.childrenIds.indexOf(r)>=0)return!0;for(var i=0,d=o.childrenIds;i<d.length;i++){var a=d[i],l=p(e,a,r,n);if(l)return!0}return!1}function f(e,r,n,o){if(!r)return e;if(p(e,r.id,n))return console.warn("node ",r.id," has ",n," as child, so cannot make it into",r.id,"'s parent OR there's a cycle"),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 i=e[r.parentId];if(i){var d=i.childrenIds.filter(function(e){return e!==r.id});e=u(e,t.__assign({},i,{childrenIds:d}))}}var a=e[n];if(a){d=g(a.childrenIds,r.id,o);e=u(e,t.__assign({},a,{childrenIds:d}))}return u(e,t.__assign({},r,{parentId:n}))}function g(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,i=n.afterItemId,d=-1;if(o?d=e.findIndex(function(e){return e===o}):i&&(d=e.findIndex(function(e){return e===i})+1),d>=0){var a=e.slice();return a.splice(d,0,r),a}return e.concat([r])}var v=require("lodash").cloneDeep;function m(e,r){return r?t.__assign({},r,{value:v(r.value),childrenIds:r.childrenIds.slice(),children:r.childrenIds.map(function(t){var r=e[t];return m(e,r)})}):r}function I(e){var r=e.byId,n=(e||{copiedNode:null}).copiedNode;if(!n)return e;n=v(n);var o=y(r,n).byId;if(n.parentId){var i=r[n.parentId];if(i)return t.__assign({},e,{byId:f(o,n,n.parentId,{afterItemId:i.childrenIds[i.childrenIds.length-1]})})}return e}function y(e,r){var n;r.id=b(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 i=0,d=0,a=o;d<a.length;d++){var l=a[d];l.parentId=r.id;var s=y(e,l),c=s.byId,u=s.newId;r.childrenIds[i]=u,e=c,++i}return{byId:e,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 k(e,r){var n=e.byId,o=b(n),i=t.__assign({},n[o],r);return i?t.__assign({},e,{byId:u(n,i)}):e}function w(e,r,n){var o=e.byId,i=t.__assign({},o[r],n);return i?t.__assign({},e,{byId:u(o,i)}):e}function C(e,r){var n=e.byId,o=e.rootNodeId,i=e.focusedNodeId;return o===r?(alert("Cannot destroy root node"),t.__assign({},e,{byId:n,focusedNodeId:i})):t.__assign({},e,{byId:h(n,r),focusedNodeId:i===r?null:i})}function _(e,r,n,o){if(void 0===o&&(o={}),!n)return e;var i=e.byId,d=i[r];return t.__assign({},e,{byId:f(i,t.__assign({},d,{isPlaceHolder:o.isPlaceHolder},o.absolutePos?{top:o.absolutePos.top,left:o.absolutePos.left}:{}),n,o)})}function E(e,r,n){void 0===n&&(n={});var o=e.byId,i=o[r];if(!i)return e;var d=i.parentId;if(!d)return e;var a=o[d];if(!a||!a.parentId)return e;var l=o[a.parentId],s=a.childrenIds.indexOf(r);if(s<0)return e;var c={};if("row"===a.type)if("left"===n.direction){if(0===s)return e;c={beforeItemId:a.childrenIds[s-1]}}else{if("right"!==n.direction){if(l&&"col"===l.type){var u=l.childrenIds.indexOf(a.id);return u>0&&"up"===n.direction?_(e,r,l.childrenIds[u-1]):u<l.childrenIds.length-1&&"down"===n.direction?_(e,r,l.childrenIds[u+1]):e}return e}if(s>=a.childrenIds.length-1)return e;c={afterItemId:a.childrenIds[s+1]}}else if("col"===a.type)if("up"===n.direction){if(0===s)return e;c={beforeItemId:a.childrenIds[s-1]}}else{if("down"!==n.direction){if(l&&"row"===l.type){u=l.childrenIds.indexOf(a.id);return u>0&&"left"===n.direction?_(e,r,l.childrenIds[u-1]):u<l.childrenIds.length-1&&"right"===n.direction?_(e,r,l.childrenIds[u+1]):e}return e}if(s>=a.childrenIds.length-1)return e;c={afterItemId:a.childrenIds[s+1]}}else if("layer"===a.type){var h=("up"===n.direction?-1:"down"===n.direction?1:0)*(n.stepPx||1),p=("left"===n.direction?-1:"right"===n.direction?1:0)*(n.stepPx||1);c={absolutePos:{top:(i.top||0)+h,left:(i.left||0)+p}}}return t.__assign({},e,{byId:f(o,t.__assign({},i,{isPlaceHolder:c.isPlaceHolder},c.absolutePos?{top:c.absolutePos.top,left:c.absolutePos.left}:{}),d,c)})}function x(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 N(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 B(e,t){return t?{left:e.clientX-t.left,top:e.clientY-t.top,width:t.width,height:t.height}:null}function D(e,t){var r=e.clientX,n=e.clientY;return t?{left:r-t.left,top:n-t.top,width:t.width,height:t.height}:null}function R(e,t,r){return void 0===r&&(r={}),function(n){return _(n,e,t,r)}}var P=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return t.__extends(n,e),n.prototype.renderChild=function(e){var t=this.props,r=t.changeBlocks,n=t.getNode,o=t.undoRedoVersion,i=t.focusedNodeId,d=t.renderEditBlock,a=n(e);return a?d({node:a,renderEditBlock:d,undoRedoVersion:o,changeBlocks:r,getNode:n,focusedNodeId:i}):null},n.prototype.render=function(){var e=this,t=this.props,n=t.node,o=t.getNode,i=n.childrenIds,d=(void 0!==n.paddingLeftPercentWidth?n.paddingLeftPercentWidth:.05)*n.width,a=(void 0!==n.paddingTopPercentHeight?n.paddingTopPercentHeight:.05)*n.height;return r.createElement("div",{style:{position:"relative",opacity:this.props.isDragging?.5:1,width:n.width,height:n.height,backgroundColor:n.backgroundColor||"#f5f5f5a3",borderRadius:3}},i.map(function(t){var n=o(t);if(!n)return null;var i=r.createElement("div",{key:"node_"+t,style:{position:"absolute",width:n.width,height:n.height,top:a,left:d,transform:"translate("+n.left+"px,"+n.top+"px)"}},e.renderChild(t));return i}))},n}(r.Component),O=function(e){var n=r.useRef(null),i=o.useDrag({item:{type:"col",id:e.node.id},collect:function(e){return{isDragging:e.isDragging()}}}),d=i[0].isDragging,a=i[1],l=o.useDrop({accept:["col","row","layer","custom","image","markdown"],canDrop:function(e){var t=e.type;return"row"===t||"col"===t||"markdown"===t||"image"===t||"layer"===t||"custom"===t},drop:function(t,r){var n=r.isOver({shallow:!0}),o=r.getClientOffset(),i=r.getSourceClientOffset(),d=r.getInitialClientOffset(),a=r.getInitialSourceClientOffset();if(!(n&&t&&i&&o&&d&&a))return null;var l=D({clientX:o.x,clientY:o.y},c()),s=e.node.childrenIds.length?e.node.childrenIds[e.node.childrenIds.length-1]:void 0;return e.changeBlocks(R(t.id,e.node.id,l?{afterItemId:s,absolutePos:{top:l.top-(d.y-a.y),left:l.left-(d.x-a.x)}}:void 0)),{type:"layer",id:e.node.id}},collect:function(e){var t=e.getItem();return{isOver:e.isOver({shallow:!0}),initialClientOffset:e.getInitialClientOffset(),clientOffset:e.getClientOffset(),dragSourceItemType:t?t.type:"",dragSourceItemId:t?t.id:"",sourceClientOffset:e.getSourceClientOffset(),initialSourceClientOffset:e.getInitialSourceClientOffset()}}}),s=l[1],c=function(){return n.current&&n.current.getBoundingClientRect?n.current.getBoundingClientRect():null};return r.createElement("div",{ref:n,style:{width:"100%",height:"100%"}},r.createElement("div",{ref:s,style:{width:"100%",height:"100%"}},r.createElement("div",{ref:a,style:{width:"100%",height:"100%"}},r.createElement(P,t.__assign({},e,{isDragging:d})))))},S=function(e){var t=e.wantToPlaceNext,r=e.children,o=e.node,i=e.getNode,d=o.childrenIds,a=(void 0!==o.paddingLeftPercentWidth?o.paddingLeftPercentWidth:.05)*o.width,l=(void 0!==o.paddingTopPercentHeight?o.paddingTopPercentHeight:.05)*o.height,s="firstChild"===t?3:0;return n.createElement("div",{key:"col_"+o.id,style:{display:"flex",opacity:e.isDragging?.5:1,flexDirection:"row",width:"100%",height:"100%"}},"left"===t&&n.createElement("div",{style:{height:"100%",width:3,backgroundColor:"green"}}),n.createElement("div",{style:{width:"100%",height:"100%",position:"relative",borderRadius:3,backgroundColor:e.node.isPlaceHolder?"grey":e.node.backgroundColor||"#ffffffa8",borderStyle:"dashed",borderWidth:1}},"firstChild"===t&&n.createElement("div",{style:{height:10,width:"100%",position:"absolute",top:l,left:a,transform:"translate(0,"+s+"px)",backgroundColor:"blue"}}),n.Children.count(r)?r:d.map(function(t){var r=i(t);if(!r)return null;var o=n.createElement("div",{className:"drag-node",key:"node_"+t,style:{position:"absolute",width:r.width,height:r.height,top:l,left:a,transform:"translate(0,"+s+"px)"}},function(t){var r=e.getNode,n=e.changeBlocks,o=e.undoRedoVersion,i=e.focusedNodeId,d=e.renderEditBlock,a=r(t);return a?d({node:a,undoRedoVersion:o,renderEditBlock:d,focusedNodeId:i,changeBlocks:n,getNode:r}):null}(t));return s+=r.height,o}),"lastChild"===t&&n.createElement("div",{style:{top:a,left:l,transform:"translate(0,"+s+"px)",position:"absolute",height:10,width:"100%",backgroundColor:"orange"}})),"right"===t&&n.createElement("div",{style:{height:"100%",width:3,backgroundColor:"white"}}))},W=function(e){var i=r.useRef(null),d=o.useDrag({item:{type:"col",id:e.node.id},collect:function(e){return{isDragging:e.isDragging()}}}),a=d[0].isDragging,l=d[1],s=o.useDrop({accept:["col","row","layer","custom","image","markdown"],canDrop:function(t){var r=e.getNode,n=e.node,o=n.parentId?r(n.parentId):null,i=t.type;return"col"===i&&o&&"row"===o.type||!e.children&&("row"===i||"markdown"===i||"image"===i||"layer"===i||"custom"===i)},drop:function(r,n){var o=n.isOver({shallow:!0});if(!o||!r)return null;if("col"===r.type){var i=g("x"),d=i?{beforeItemId:e.node.id}:{afterItemId:e.node.id};e.changeBlocks(R(r.id,e.node.parentId||"",t.__assign({},d)))}else{i=g("y");var a=e.node.childrenIds,l=a.length;d=l?i?{beforeItemId:a[0]}:{afterItemId:a[l-1]}:null;e.changeBlocks(R(r.id,e.node.id,t.__assign({},d)))}return{type:"col",id:e.node.id}},collect:function(e){var t=e.getItem();return{isOver:e.isOver({shallow:!0}),initialClientOffset:e.getInitialClientOffset(),clientOffset:e.getClientOffset(),dragSourceItemType:t?t.type:"",dragSourceItemId:t?t.id:"",initialSourceClientOffset:e.getInitialSourceClientOffset()}}}),c=s[0],u=c.clientOffset,h=c.dragSourceItemType,p=c.isOver,f=s[1],g=function(e){if(!u||!p)return!1;var t=D({clientX:u.x,clientY:u.y},i.current&&i.current.getBoundingClientRect?i.current.getBoundingClientRect():null),r=t&&("y"===e?t.top/t.height<.45:t.left/t.width<.45);return r},v=function(e){if(!e||!p)return null;if("col"===e){var t=g("x");return t?"left":"right"}var r=g("y");return r?"firstChild":"lastChild"}(h);return n.createElement("div",{ref:i,style:{width:"100%",height:"100%"}},n.createElement("div",{ref:f,style:{width:"100%",height:"100%"}},n.createElement("div",{ref:l,style:{width:"100%",height:"100%"}},n.createElement(S,t.__assign({},e,{wantToPlaceNext:v,isDragging:a})))))},T=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return t.__extends(n,e),n.prototype.render=function(){var e=this.props.children,t=this.props,n=t.wantToPlaceNext,o=t.node,i=t.getNode,d=t.undoRedoVersion,a=t.changeBlocks,l=t.renderEditBlock,s=t.focusedNodeId,c=(void 0!==o.paddingLeftPercentWidth?o.paddingLeftPercentWidth:.05)*o.width,u=(void 0!==o.paddingTopPercentHeight?o.paddingTopPercentHeight:.05)*o.height,h="firstChild"===n?3:0;return r.createElement("div",{key:"row_"+o.id,style:{opacity:this.props.isDragging?.5:1}},"top"===n&&r.createElement("div",{style:{height:3,width:"100%",backgroundColor:"black"}}),r.createElement("div",{style:{position:"relative",height:o.height,width:o.width,borderStyle:"dashed",borderWidth:0,borderBottomWidth:1,backgroundColor:o.isPlaceHolder?"darkgrey":o.backgroundColor||"#b5bbb9b0"}},"firstChild"===n&&r.createElement("div",{style:{height:"100%",width:3,backgroundColor:"blue",position:"absolute",top:u,left:c,transform:"translate("+h+"px,0)"}}),r.Children.count(e)?e:o.childrenIds.map(function(e){var t=i(e);if(!t)return null;var n=r.createElement("div",{className:"drag-node",key:"node_"+t.id,style:{position:"absolute",width:t.width,height:t.height,top:u,left:c,transform:"translate("+h+"px,0)"}},l({node:t,getNode:i,undoRedoVersion:d,focusedNodeId:s,renderEditBlock:l,changeBlocks:a}));return h+=t.width,n}),"lastChild"===n&&r.createElement("div",{style:{position:"absolute",top:u,left:c,transform:"translate("+h+"px,0)",height:"100%",width:3,backgroundColor:"orange"}})),"bottom"===n&&r.createElement("div",{style:{height:3,width:"100%",backgroundColor:"green"}}))},n}(r.Component),M=function(e){var n=r.useRef(null),i=o.useDrag({item:{type:"row",id:e.node.id},collect:function(e){return{isDragging:e.isDragging()}}}),d=i[0].isDragging,a=i[1],l=o.useDrop({accept:["col","row","layer","custom","image","markdown"],canDrop:function(t){var r=e.getNode,n=e.node,o=n.parentId?r(n.parentId):null,i=t.type;return"row"===i&&o&&"col"===o.type||!e.children&&("col"===i||"markdown"===i||"image"===i||"layer"===i||"custom"===i)},drop:function(r,n){var o=n.isOver({shallow:!0});if(!o||!r)return null;if("row"===r.type){var i=f("y"),d=i?{beforeItemId:e.node.id}:{afterItemId:e.node.id};e.changeBlocks(R(r.id,e.node.parentId||"",t.__assign({},d)))}else{i=f("x");var a=e.node.childrenIds,l=a.length;d=l?i?{beforeItemId:a[0]}:{afterItemId:a[l-1]}:null;e.changeBlocks(R(r.id,e.node.id,t.__assign({},d)))}return{type:"row",id:e.node.id}},collect:function(e){var t=e.getItem();return{isOver:e.isOver({shallow:!0}),initialClientOffset:e.getInitialClientOffset(),clientOffset:e.getClientOffset(),dragSourceItemType:t?t.type:"",dragSourceItemId:t?t.id:"",initialSourceClientOffset:e.getInitialSourceClientOffset()}}}),s=l[0],c=s.clientOffset,u=s.dragSourceItemType,h=s.isOver,p=l[1],f=function(e){if(!c||!h)return!1;var t=D({clientX:c.x,clientY:c.y},n.current&&n.current.getBoundingClientRect?n.current.getBoundingClientRect():null),r=t&&("y"===e?t.top/t.height<.3:t.left/t.width<.3);return r},g=function(e){if(!e||!h)return null;if("row"===e){var t=f("y");return t?"top":"bottom"}var r=f("x");return r?"firstChild":"lastChild"}(u);return r.createElement("div",{ref:n,style:{width:"100%",height:"100%"}},r.createElement("div",{ref:p,style:{width:"100%",height:"100%"}},r.createElement("div",{ref:a,style:{width:"100%",height:"100%"}},r.createElement(T,t.__assign({},e,{wantToPlaceNext:g,isDragging:d})))))},L=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},style:{opacity:this.props.isDragging?.5:1,width:"100%",height:"100%",backgroundColor:"violet",padding:5,borderRadius:3}},r.createElement("img",{style:{width:"100%",height:"100%"},src:t.value}))},n}(r.Component),V=function(e){var n=o.useDrag({item:{type:"image",id:e.node.id},collect:function(e){return{isDragging:e.isDragging()}}}),i=n[0].isDragging,d=n[1];return r.createElement("div",{ref:d,style:{width:"100%",height:"100%"}},r.createElement(L,t.__assign({},e,{isDragging:i})))},H=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,i=n.value;return r.createElement("div",{ref:function(t){return e.selfRef=t},style:{opacity:this.props.isDragging?.5:1,width:"100%",height:"100%",backgroundColor:"#ffc0cb75",padding:5,borderRadius:3}},r.createElement("textarea",{className:"form-control",name:"value",placeholder:"Type here...",value:i,style:{width:"95%",height:"95%",outline:"none"},onChange:function(e){return o(n.id,{value:e.target.value})}}))},n}(r.Component),F=function(e){var n=o.useDrag({item:{type:"markdown",id:e.node.id},collect:function(e){return{isDragging:e.isDragging()}}}),i=n[0].isDragging,d=n[1];return r.createElement("div",{ref:d,style:{width:"100%",height:"100%"}},r.createElement(H,t.__assign({},e,{isDragging:i})))},j=function(e){var t=e.node,n=e.renderEditBlock,o=e.getNode,d=e.undoRedoVersion,a=e.changeBlocks,l=e.focusedNodeId,s=e.width,c=e.height;return r.createElement("div",{onClick:function(e){e.stopPropagation(),a(function(e){return x(e,t)})},style:t.id===l?{borderStyle:"dashed",borderWidth:1,borderColor:"orange"}:{}},r.createElement(i.ResizableBox,{className:"box",width:s,height:c,onResizeStart:function(e){e.preventDefault(),e.stopPropagation()},onResize:function(e,r){var n=r.size,o=n.width,i=n.height;a(function(e){return w(e,t.id,{width:o,height:i})})}},"col"===t.type?r.createElement(W,{key:"col_"+t.id,node:t,renderEditBlock:n,getNode:o,changeBlocks:a,focusedNodeId:l,undoRedoVersion:d}):"row"===t.type?r.createElement(M,{key:"row_"+t.id,node:t,renderEditBlock:n,getNode:o,changeBlocks:a,focusedNodeId:l,undoRedoVersion:d}):"markdown"===t.type?r.createElement(F,{node:t,update:function(e,t){return a(function(r){return w(r,e,t)})}}):"layer"===t.type?r.createElement(O,{key:"layer_"+t.id,node:t,renderEditBlock:n,getNode:o,changeBlocks:a,focusedNodeId:l,undoRedoVersion:d}):r.createElement(V,{key:"image_"+t.id,node:t,renderEditBlock:n,getNode:o,changeBlocks:a,focusedNodeId:l,undoRedoVersion:d})))},q=function(e){var t=e.node,n=e.renderEditBlock,o=e.getNode,i=e.changeBlocks,d=e.undoRedoVersion,a=e.focusedNodeId;return r.createElement(j,{width:t.width,height:t.height,renderEditBlock:n,node:t,getNode:o,changeBlocks:i,focusedNodeId:a,undoRedoVersion:d})},z=function(e){function n(){var t=null!==e&&e.apply(this,arguments)||this;return t.haveHtml5DndAPI=function(){var e=!!navigator.userAgent.match("iPhone OS")||!!navigator.userAgent.match("iPad");if(e)return!1;var t=window.document.createElement("div");return"draggable"in t||"ondragstart"in t&&"ondrop"in t}(),t.state={value:t.props.value},t.getNode=function(e){return t.state.value.byId[e]},t.onSendOp=function(e){var r=e(t.state.value);t.setState({value:r})},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:[d.cloneDeep(r.value.byId)].concat(this.state.value.undoStack).slice(0,10)})})},n.prototype.render=function(){var e=this.props.renderEditBlock,t=this.state.value,n=t.byId,i=t.rootNodeId,d=t.undoRedoVersion,s=n[i],c=this.haveHtml5DndAPI?a:l;return r.createElement("div",{style:{position:"relative",width:s.width,height:s.height}},r.createElement(o.DndProvider,{backend:c},r.createElement(W,{key:"col_"+s.id,undoRedoVersion:d,node:s,getNode:this.getNode,changeBlocks:this.onSendOp,focusedNodeId:this.state.value.focusedNodeId,renderEditBlock:e})))},n.defaultProps={renderEditBlock:q,onChange:function(e){}},n}(r.Component);function U(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 A=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:U(e)?"solid":void 0}},X=function(e){var n=e.byId,o=e.node,i=e.renderPreviewBlock,d=void 0===i?Y:i;if(!o)return null;switch(o.type){case"markdown":return r.createElement("div",{key:o.id,style:t.__assign({},A(o),{height:o.height,width:o.width})},r.createElement(s,{source:o.value}));case"layer":return r.createElement("div",{key:o.id,style:t.__assign({position:"relative"},A(o),{height:o.height,width:o.width})},o.childrenIds.map(function(e){var t=n[e];return t?r.createElement("div",{key:t.id,style:{position:"absolute",top:t.top||0,left:t.left||0}},d({byId:n,node:t,renderPreviewBlock:d})):r.createElement("div",null,"Error in layer ",o.id,": child node ",e," not found")}));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({},A(o),{width:o.width,height:o.height,display:"flex",flexDirection:"column"})},o.childrenIds.map(function(e){var t=n[e];return t?d({byId:n,node:t,renderPreviewBlock:d}):r.createElement("div",null,"Error in col ",o.id,": child node ",e," not found")}));case"row":return r.createElement("div",{key:o.id,style:t.__assign({},A(o),{width:o.width,height:o.height,display:"flex",flexDirection:"row"})},o.childrenIds.map(function(e){var t=n[e];return t?d({byId:n,node:t,renderPreviewBlock:d}):r.createElement("div",null,"Error in row ",o.id,": child node ",e," not found")}));case"custom":return null}},Y=function(e){var t=e.byId,n=e.node,o=e.renderPreviewBlock;return r.createElement(X,{key:"node_"+n.id,node:n,byId:t,renderPreviewBlock:o})},J=function(e){var t=e.byId,n=e.node,o=e.onSelect,i=e.navClassName,d=void 0===i?"breadcrumb":i,a=e.itemClassName,l=void 0===a?"breadcrumb-item btn btn-link active":a;if(!n)return null;for(var s=[],c=n.id;c;){var u=t[c];if(!u)break;s.unshift({label:u.type+"-"+u.id,id:u.id}),c=u.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)})))},G=.95;function K(e,r){var n=e.byId,o=e.rootNodeId,i=e.focusedNodeId,d=(r?r.parentId:i)||o,a=n[d],l=["col","layer"];if((!a||l.indexOf(a.type)<0)&&(d=a&&a.parentId||"",a=d?n[d]:a,!a||l.indexOf(a.type)<0))return{error:"Can only add a row inside "+l.join(", ")+", please select a column by clicking on it",value:e};var s=b(n,"row"),c=t.__assign({type:"row",height:100,width:a&&a.width?a.width*G:500,paddingLeftPercentWidth:(1-G)/2,paddingTopPercentHeight:(1-G)/2},r,{id:s,name:s,childrenIds:[]});n=f(n,c,a.id),a=n[d];var u={};if(a&&"col"===a.type&&a&&a.childrenIds.length>=1)for(var h=Math.max(20,a.height/a.childrenIds.length*G),p=0,g=a.childrenIds;p<g.length;p++){var v=g[p];u[v]=t.__assign({},n[v],{height:h})}return{createdBlock:c,value:t.__assign({},e,{byId:t.__assign({},n,u),focusedNodeId:i||c.id})}}function Q(e,r){var n=e.byId,o=e.rootNodeId,i=e.focusedNodeId,d=(r?r.parentId:i)||o,a=n[d],l=["row","layer"];if((!a||l.indexOf(a.type)<0)&&(d=a&&a.parentId||"",a=d?n[d]:a,!a||l.indexOf(a.type)<0))return{error:"Can only add a column inside "+l.join(", ")+", please select a column by clicking on it",value:e};var s=b(n,"col"),c=t.__assign({type:"col",width:100,height:a.height?a.height*G:100,paddingLeftPercentWidth:(1-G)/2,paddingTopPercentHeight:(1-G)/2},r,{id:s,name:s,childrenIds:[]});n=f(n,c,d),a=n[d];var u={};if(a&&"row"===a.type&&a&&a.childrenIds.length>=1)for(var h=Math.max(20,a.width/a.childrenIds.length*G),p=0,g=a.childrenIds;p<g.length;p++){var v=g[p];u[v]=t.__assign({},n[v],{width:h})}return{createdBlock:c,value:t.__assign({},e,{byId:t.__assign({},n,u),focusedNodeId:i||c.id})}}function Z(e,r){var n=e.byId,o=e.rootNodeId,i=e.focusedNodeId,d=(r?r.parentId:i)||o,a=n[d],l=["row","col","layer"];if(!a||l.indexOf(a.type)<0)return{error:"Can only add markdown text inside "+l.join(", "),value:e};var s=b(n,"markdown"),c=t.__assign({type:"markdown",width:Math.max(1,a.width-20),height:Math.max(1,a.height-20)},r,{id:s,name:s,childrenIds:[]});return{createdBlock:c,value:t.__assign({},e,{byId:f(n,c,d),focusedNodeId:c.id})}}function $(e,r){var n=r&&r.value?r.value:window.prompt("Please enter image url","https://lorempixel.com/200/200/");if(null===n)return{error:"no image selected",value:e};var o=e.byId,i=e.rootNodeId,d=e.focusedNodeId,a=(r?r.parentId:d)||i,l=o[a],s=["row","col","layer"];if(!l||s.indexOf(l.type)<0)return{error:"Can only add an image inside "+s.join(", "),value:e};var c=b(o,"image"),u=t.__assign({type:"image",value:n,width:200,height:200},r,{id:c,name:c,childrenIds:[]});return{createdBlock:u,value:t.__assign({},e,{byId:f(o,u,a),focusedNodeId:u.id})}}function ee(e,r){var n=e.byId,o=e.rootNodeId,i=e.focusedNodeId,d=(r?r.parentId:i)||o,a=n[d],l=["row","col","layer"];if(!a||l.indexOf(a.type)<0)return{error:"Can only add a layer inside "+l.join(", "),value:e};var s=b(n,"layer"),c=t.__assign({type:"layer",width:Math.max(1,a.width*G),height:Math.max(1,a.height*G),paddingLeftPercentWidth:(1-G)/2,paddingTopPercentHeight:(1-G)/2},r,{id:s,name:s,childrenIds:[]});return{createdBlock:c,value:t.__assign({},e,{byId:f(n,c,d),focusedNodeId:c.id})}}var te=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,i=o?n[o]:null;t.setState({selectedColor:i&&i.color||null})}},t.renderColorMenuItem=function(e){var r=t.props.value,o=r.byId,i=r.focusedNodeId;if(i){var d=i?o[i]:null;return n.createElement(n.Fragment,null,n.createElement(re,{onClick:function(){return t.toggleMenu(e)},color:d&&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(i,(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(i,(r={},r[e]=t.state.selectedColor,r))}},"Done"),n.createElement(c.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,i=e.value,d=i.byId,a=i.focusedNodeId,l=this.props,s=a?d[a]:null,c=l.focusNode,u=r;return n.createElement("div",null,n.createElement("div",null,n.createElement("button",{"aria-label":"add row",className:u,onClick:function(){return l.addRow()}},"+ Row"),n.createElement("button",{"aria-label":"add column",className:u,onClick:function(){return l.addCol()}},"+ Col"),n.createElement("button",{"aria-label":"add layer",className:u,onClick:function(){return l.addLayer()}},"+ Layer"),n.createElement("button",{"aria-label":"add markdown",className:u,onClick:function(){return l.addMarkDown()}},"+ Text"),n.createElement("button",{"aria-label":"add image",className:u,onClick:function(){return l.addImage()}},"+ Image"),n.createElement("button",{"aria-label":"add image",className:u,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 i=window.prompt("Enter table height (max 400)","300");if(null===i)return e;var d=Math.min(parseInt(o,10),400),a=Math.min(parseInt(i,10),400),l=Q(e,{width:d,height:a,parentId:t}),s=l.value,c=l.createdBlock;if(!c)return e;e=s;for(var u=c.id,h=Math.max(1,Math.min(parseInt(r,10),10)),p=Math.max(1,Math.min(parseInt(n,10),10)),f=0;f<h;++f){var g=K(e,{height:a/h,parentId:u}),v=g.value,m=g.createdBlock;if(!m)break;e=v;for(var I=0;I<p;++I){var y=Q(e,{parentId:m.id,height:m.height,width:m.width/p}),b=y.value,k=y.createdBlock;if(!k)break;e=b}}return e}(l.value,l.value.focusedNodeId))}},"+ Table"),n.createElement("button",{"aria-label":"undo",className:u,onClick:l.undo},"Undo"),n.createElement("button",{"aria-label":"redo",className:u,onClick:l.redo},"Redo")),s&&n.createElement("div",{style:{paddingLeft:15}},this.renderColorMenuItem("color"),this.renderColorMenuItem("backgroundColor"),n.createElement("button",{className:u,onClick:function(){return l.moveInDirection(s.id,"left")}},"⬅️"),n.createElement("button",{className:u,onClick:function(){return l.moveInDirection(s.id,"right")}},"➡️"),n.createElement("button",{className:u,onClick:function(){return l.moveInDirection(s.id,"up")}},"⬆"),n.createElement("button",{className:u,onClick:function(){return l.moveInDirection(s.id,"down")}},"⬇"),n.createElement("button",{className:u,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,i=o?r[o]:void 0;return i&&o?_(e,t,o,{afterItemId:i.childrenIds[i.childrenIds.length-1]}):e}(l.value,l.value.focusedNodeId))}},"FlipToFront"),n.createElement("button",{"aria-label":"copy",className:u,onClick:function(){return l.copyFocused()}},"Copy"),n.createElement("button",{"aria-label":"paste",className:u,onClick:function(){return l.paste()}},"Paste"),n.createElement("button",{"aria-label":"delete",onClick:l.removeFocused},"🗑"),n.createElement("div",null,n.createElement(J,t.__assign({onSelect:function(e){return c(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),re=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 ne=function(e){function n(){var r=null!==e&&e.apply(this,arguments)||this;return r.addRow=function(e){var t=K(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=Z(r.props.value,e),n=t.error,o=t.value;n?alert(n):r.props.onChange(o)},r.addImage=function(e){var t=$(r.props.value,e),n=t.error,o=t.value;n?alert(n):r.props.onChange(o)},r.addLayer=function(e){var t=ee(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(x(n,e,t))},r.create=function(e){r.props.onChange(k(r.props.value,e))},r.updateBlock=function(e,t){r.props.onChange(w(r.props.value,e,t))},r.destroy=function(e){r.props.onChange(C(r.props.value,e))},r.move=function(e,t,n){void 0===n&&(n={}),r.props.onChange(_(r.props.value,e,t,n))},r.moveInDirection=function(e,t){r.props.onChange(E(r.props.value,e,{direction:t}))},r.copyFocused=function(){var e=r.props.value,n=e.byId,o=e.focusedNodeId;if(o){var i=n[o];i&&r.props.onChange(t.__assign({},r.props.value,{copiedNode:m(n,i)}))}},r.paste=function(){r.props.onChange(I(r.props.value))},r.undo=function(){var e=r.props.value,n=e.byId,o=e.undoStack,i=e.redoStack;if(o.length>0){var d=o[0],a=[n].concat(i),l=o.slice(1),s=r.props.value.undoRedoVersion;r.props.onChange(t.__assign({},r.props.value,{undoRedoVersion:s+1,byId:d,undoStack:l,redoStack:a}))}},r.redo=function(){var e=r.props.value,n=e.byId,o=e.undoStack,i=e.redoStack;if(i.length>0){var d=i[0],a=[n].concat(o),l=i.slice(1),s=r.props.value.undoRedoVersion;r.props.onChange(t.__assign({},r.props.value,{undoRedoVersion:s+1,byId:d,undoStack:a,redoStack:l}))}},r}return t.__extends(n,e),n.prototype.render=function(){var e=this,n=this.props,o=n.UiComponent,i=n.onChange,d=n.value,a=n.controlUiProps;return r.createElement(o,t.__assign({value:d,onChange:i,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){var n=d.byId[t];n&&e.focusNode(n,r)},removeFocused:this.removeFocused,updateBlock:this.updateBlock,undo:this.undo,redo:this.redo},a))},n.defaultProps={UiComponent:te},n}(r.Component);exports.AbsoluteLayerBlock=O,exports.BlockBreadCrumbs=J,exports.BlockEditor=z,exports.BlockEditorControl=ne,exports.BlockEditorControlDefaultUI=te,exports.DraggableColBlock=W,exports.DraggableRowBlock=M,exports.ImageBlock=V,exports.MarkdownBlock=F,exports.Preview=X,exports.ResizableBlock=j,exports.addCol=Q,exports.addImage=$,exports.addLayer=ee,exports.addMarkDown=Z,exports.addRow=K,exports.create=k,exports.deepCopy=m,exports.defaultRenderEditBlock=q,exports.defaultRenderPreviewBlock=Y,exports.destroy=C,exports.focusNode=x,exports.getDragPositionRelativeToTarget=B,exports.getDragPositionRelativeToTarget2=D,exports.hasDescendent=p,exports.move=_,exports.moveInDirection=E,exports.newBlockId=b,exports.onDragStart=function(e,t,r){e.stopPropagation();var n=B(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,"")},exports.onDropped=function(e,t,r){void 0===r&&(r={});var n=N(e).draggedNodeId;return function(e){return _(e,n,t,r)}},exports.onDropped2=R,exports.parseTypes=N,exports.paste=I,exports.pasteChild=y,exports.placeNodeInParent=f,exports.reinsertIntoList=g,exports.removeNode=h,exports.update=w,exports.updateNode=u;
//# sourceMappingURL=react-movable-block-editor.cjs.production.js.map