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

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

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