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

Comparing version 0.1.8 to 0.1.9

dist/components/editor/Preview.d.ts

 /// <reference types="react" />
-import { BlockNode } from '../../data';
-export declare const Preview: (props: {
-    byId: any;
+import { ById, BlockNode } from '../../data';
+export interface PreviewProps {
+    byId: ById;
     node: BlockNode;
-}) => JSX.Element | null;
+    renderPreviewBlock: (props: PreviewProps) => any;
+}
+export declare const Preview: ({ byId, node, renderPreviewBlock, }: PreviewProps) => JSX.Element | null;
+export declare const defaultRenderPreviewBlock: ({ byId, node, renderPreviewBlock, }: PreviewProps) => JSX.Element;

dist/data/index.d.ts

@@ -1,5 +0,6 @@
-export declare type BlockNodeType = 'row' | 'col' | 'markdown' | 'image' | 'layer';
+export declare type BlockNodeType = 'row' | 'col' | 'markdown' | 'image' | 'layer' | 'custom';
 export interface BlockNode {
     id: string;
     type: BlockNodeType;
+    customType?: string;
     name: string;
@@ -6,0 +7,0 @@ value?: any;

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

@@ -376,3 +376,3 @@ 'use strict';
       draggedNodeId: 'notanode',
-      draggedNodeType: 'invalidnodetype'
+      draggedNodeType: null
     };
@@ -431,3 +431,3 @@ }
       } = parseTypes(types);
-      return draggedNodeType === 'row' || draggedNodeType === 'col' || draggedNodeType === 'markdown' || draggedNodeType === 'image' || draggedNodeType === 'layer';
+      return draggedNodeType === 'row' || draggedNodeType === 'col' || draggedNodeType === 'markdown' || draggedNodeType === 'image' || draggedNodeType === 'layer' || draggedNodeType === 'custom';
     };
@@ -546,3 +546,3 @@
       } = parseTypes(types);
-      return draggedNodeType === 'col' || draggedNodeType === 'row' || draggedNodeType === 'markdown' || draggedNodeType === 'image' || draggedNodeType === 'layer';
+      return draggedNodeType === 'col' || draggedNodeType === 'row' || draggedNodeType === 'markdown' || draggedNodeType === 'image' || draggedNodeType === 'layer' || draggedNodeType === 'custom';
     };
@@ -768,3 +768,3 @@
       } = parseTypes(types);
-      return draggedNodeType === 'col' || draggedNodeType === 'row' || draggedNodeType === 'markdown' || draggedNodeType === 'image' || draggedNodeType === 'layer';
+      return draggedNodeType === 'col' || draggedNodeType === 'row' || draggedNodeType === 'markdown' || draggedNodeType === 'image' || draggedNodeType === 'layer' || draggedNodeType === 'custom';
     };
@@ -1206,7 +1206,7 @@
 
-const Preview = props => {
-  const {
-    node,
-    byId
-  } = props;
+const Preview = ({
+  byId,
+  node,
+  renderPreviewBlock = defaultRenderPreviewBlock
+}) => {
   if (!node) return null;
@@ -1245,5 +1245,6 @@
           }
-        }, React.createElement(Preview, {
-          byId: byId,
-          node: byId[id]
+        }, renderPreviewBlock({
+          byId,
+          node: byId[id],
+          renderPreviewBlock
         }));
@@ -1273,6 +1274,6 @@ }));
         }
-      }, node.childrenIds.map(id => React.createElement(Preview, {
-        key: 'prev_' + id,
-        byId: byId,
-        node: byId[id]
+      }, node.childrenIds.map(id => renderPreviewBlock({
+        byId,
+        node: byId[id],
+        renderPreviewBlock
       })));
@@ -1290,9 +1291,19 @@
         }
-      }, node.childrenIds.map(id => React.createElement(Preview, {
-        key: 'prev_' + id,
-        byId: byId,
-        node: byId[id]
+      }, node.childrenIds.map(id => renderPreviewBlock({
+        byId,
+        node: byId[id],
+        renderPreviewBlock
       })));
   }
 };
+const defaultRenderPreviewBlock = ({
+  byId,
+  node,
+  renderPreviewBlock
+}) => React.createElement(Preview, {
+  key: 'node_' + node.id,
+  node: node,
+  byId: byId,
+  renderPreviewBlock: renderPreviewBlock
+});
 
@@ -2042,2 +2053,3 @@ const BlockBreadCrumbs = props => {
 exports.defaultRenderEditBlock = defaultRenderEditBlock;
+exports.defaultRenderPreviewBlock = defaultRenderPreviewBlock;
 exports.destroy = destroy;
@@ -2044,0 +2056,0 @@ exports.focusNode = focusNode;

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

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

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

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

@@ -375,3 +375,3 @@ (function (global, factory) {
         draggedNodeId: 'notanode',
-        draggedNodeType: 'invalidnodetype'
+        draggedNodeType: null
       };
@@ -430,3 +430,3 @@ }
         } = parseTypes(types);
-        return draggedNodeType === 'row' || draggedNodeType === 'col' || draggedNodeType === 'markdown' || draggedNodeType === 'image' || draggedNodeType === 'layer';
+        return draggedNodeType === 'row' || draggedNodeType === 'col' || draggedNodeType === 'markdown' || draggedNodeType === 'image' || draggedNodeType === 'layer' || draggedNodeType === 'custom';
       };
@@ -545,3 +545,3 @@
         } = parseTypes(types);
-        return draggedNodeType === 'col' || draggedNodeType === 'row' || draggedNodeType === 'markdown' || draggedNodeType === 'image' || draggedNodeType === 'layer';
+        return draggedNodeType === 'col' || draggedNodeType === 'row' || draggedNodeType === 'markdown' || draggedNodeType === 'image' || draggedNodeType === 'layer' || draggedNodeType === 'custom';
       };
@@ -767,3 +767,3 @@
         } = parseTypes(types);
-        return draggedNodeType === 'col' || draggedNodeType === 'row' || draggedNodeType === 'markdown' || draggedNodeType === 'image' || draggedNodeType === 'layer';
+        return draggedNodeType === 'col' || draggedNodeType === 'row' || draggedNodeType === 'markdown' || draggedNodeType === 'image' || draggedNodeType === 'layer' || draggedNodeType === 'custom';
       };
@@ -1205,7 +1205,7 @@
 
-  const Preview = props => {
-    const {
-      node,
-      byId
-    } = props;
+  const Preview = ({
+    byId,
+    node,
+    renderPreviewBlock = defaultRenderPreviewBlock
+  }) => {
     if (!node) return null;
@@ -1244,5 +1244,6 @@
             }
-          }, React.createElement(Preview, {
-            byId: byId,
-            node: byId[id]
+          }, renderPreviewBlock({
+            byId,
+            node: byId[id],
+            renderPreviewBlock
           }));
@@ -1272,6 +1273,6 @@ }));
           }
-        }, node.childrenIds.map(id => React.createElement(Preview, {
-          key: 'prev_' + id,
-          byId: byId,
-          node: byId[id]
+        }, node.childrenIds.map(id => renderPreviewBlock({
+          byId,
+          node: byId[id],
+          renderPreviewBlock
         })));
@@ -1289,9 +1290,19 @@
           }
-        }, node.childrenIds.map(id => React.createElement(Preview, {
-          key: 'prev_' + id,
-          byId: byId,
-          node: byId[id]
+        }, node.childrenIds.map(id => renderPreviewBlock({
+          byId,
+          node: byId[id],
+          renderPreviewBlock
         })));
     }
   };
+  const defaultRenderPreviewBlock = ({
+    byId,
+    node,
+    renderPreviewBlock
+  }) => React.createElement(Preview, {
+    key: 'node_' + node.id,
+    node: node,
+    byId: byId,
+    renderPreviewBlock: renderPreviewBlock
+  });
 
@@ -2041,2 +2052,3 @@ const BlockBreadCrumbs = props => {
   exports.defaultRenderEditBlock = defaultRenderEditBlock;
+  exports.defaultRenderPreviewBlock = defaultRenderPreviewBlock;
   exports.destroy = destroy;
@@ -2043,0 +2055,0 @@ exports.focusNode = focusNode;

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

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

dist/utils/dragHelpers.d.ts

 import * as React from 'react';
-import { BlockNode } from '../data';
+import { BlockNode, BlockNodeType } from '../data';
 import { BlockEditorValue } from '../components/editor/BlockEditorProps';
@@ -10,3 +10,3 @@ export interface DraggedInfo {
     draggedNodeId: string;
-    draggedNodeType: string;
+    draggedNodeType: BlockNodeType | null;
 };
@@ -13,0 +13,0 @@ export declare function getDragPositionRelativeToTarget(e: React.DragEvent<HTMLDivElement>, targetRect: ClientRect | null): {

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

773471

increased by0.97%

Lines of code

4420

increased by0.71%

No dependency changes