New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-movable-block-editor
Advanced tools
react-movable-block-editor - npm Package Compare versions
Comparing version 0.1.2 to 0.1.3
@@ -15,30 +15,1 @@ import { BlockProps } from '../blocks/BlockProps'; | ||
| } | ||
| export declare function newBlockId(byId: ById, prefix?: string): string; | ||
| export declare function create(value: BlockEditorValue, props: Partial<BlockNode>): { | ||
| byId: any; | ||
| rootNodeId: string; | ||
| focusedNodeId: string | null; | ||
| copiedNode: BlockNode | null; | ||
| }; | ||
| export declare function update(value: BlockEditorValue, nodeId: string, propsToUpdate: Partial<BlockNode>): { | ||
| byId: any; | ||
| rootNodeId: string; | ||
| focusedNodeId: string | null; | ||
| copiedNode: BlockNode | null; | ||
| }; | ||
| export declare function destroy(value: BlockEditorValue, nodeId: string): BlockEditorValue; | ||
| export declare function move(value: BlockEditorValue, nodeId: string, targetParentId: string, opts?: { | ||
| beforeItemId?: string; | ||
| afterItemId?: string; | ||
| isPlaceHolder?: boolean; | ||
| absolutePos?: { | ||
| left: number; | ||
| top: number; | ||
| }; | ||
| }): BlockEditorValue; | ||
| export declare function moveInDirection(value: BlockEditorValue, nodeId: string, moveOpts?: { | ||
| direction?: 'left' | 'right' | 'down' | 'up'; | ||
| distance?: number; | ||
| stepPx?: number; | ||
| }): BlockEditorValue; | ||
| export declare function focusNode(value: BlockEditorValue, node: BlockNode, focus?: boolean): BlockEditorValue; |
| export * from './BlockBreadCrumbs'; | ||
| export * from './BlockEditorControl'; | ||
| export * from './BlockEditorControlDefaultUI'; | ||
| export * from './helpers'; | ||
| export * from './addHelpers'; |
@@ -5,1 +5,2 @@ export * from './BlockEditor'; | ||
| export * from './BlockEditorProps'; | ||
| export * from './helpers'; |
@@ -11,2 +11,3 @@ export declare type BlockNodeType = 'row' | 'col' | 'markdown' | 'image' | 'layer'; | ||
| childrenIds: Array<string>; | ||
| children?: Array<BlockNode>; | ||
| isPlaceHolder?: boolean; | ||
@@ -13,0 +14,0 @@ width: number; |
@@ -131,2 +131,71 @@ 'use strict'; | ||
| function deepCopy(byId, node) { | ||
| if (!node) return node; | ||
| return { ...node, | ||
| value: typeof node.value === 'object' ? { ...node.value | ||
| } : node.value, | ||
| childrenIds: [...node.childrenIds], | ||
| children: node.childrenIds.map(id => deepCopy(byId, byId[id])) | ||
| }; | ||
| } | ||
| function paste(value) { | ||
| const { | ||
| byId, | ||
| copiedNode | ||
| } = value; | ||
| if (!copiedNode) return value; | ||
| const { | ||
| byId: newById | ||
| } = pasteChild(byId, copiedNode); | ||
| console.log('YO YO YO YO', byId, ' NEW COPIED NODE ID: ', copiedNode.id); // add copied node to parent | ||
| if (copiedNode.parentId) { | ||
| const parentNode = byId[copiedNode.parentId]; | ||
| if (parentNode) { | ||
| return { ...value, | ||
| byId: placeNodeInParent(newById, copiedNode, copiedNode.parentId, { | ||
| afterItemId: parentNode.childrenIds[parentNode.childrenIds.length - 1] | ||
| }) | ||
| }; | ||
| } | ||
| } | ||
| return value; | ||
| } | ||
| function pasteChild(byId, copiedNode) { | ||
| console.log('PASTING CHILD...', copiedNode.id); | ||
| copiedNode.id = newBlockId(byId, copiedNode.type); | ||
| console.log('NODE ID NOW', copiedNode.id); | ||
| const children = copiedNode.children; | ||
| copiedNode.children = undefined; | ||
| byId = { ...byId, | ||
| [copiedNode.id]: copiedNode | ||
| }; | ||
| if (children) { | ||
| let idx = 0; | ||
| for (const child of children) { | ||
| child.parentId = copiedNode.id; | ||
| const { | ||
| byId: newById, | ||
| newId: newChildId | ||
| } = pasteChild(byId, child); | ||
| copiedNode.childrenIds[idx] = newChildId; | ||
| console.log('CHILDREN NOW', copiedNode.childrenIds); | ||
| byId = newById; | ||
| ++idx; | ||
| } | ||
| } | ||
| console.log('PASTE CHILD', { | ||
| byId, | ||
| newId: copiedNode.id | ||
| }); | ||
| return { | ||
| byId, | ||
| newId: copiedNode.id | ||
| }; | ||
| } | ||
| function newBlockId(byId, prefix = 'node') { | ||
@@ -1348,3 +1417,3 @@ //TODO better way to create uid | ||
| let newNodeId = newBlockId(byId, 'row'); | ||
| let newNodeId = newBlockId(byId, 'col'); | ||
| const col = { | ||
@@ -1742,39 +1811,9 @@ type: 'col', | ||
| this.props.onChange({ ...this.props.value, | ||
| copiedNode: { ...focusedNode | ||
| } | ||
| copiedNode: deepCopy(byId, focusedNode) | ||
| }); | ||
| } | ||
| }; // TODO: deep pasting, for now just parent block | ||
| }; | ||
| this.paste = () => { | ||
| const { | ||
| value: { | ||
| copiedNode | ||
| } | ||
| } = this.props; | ||
| if (copiedNode && copiedNode.parentId) { | ||
| switch (copiedNode.type) { | ||
| case 'row': | ||
| this.addRow(copiedNode); | ||
| break; | ||
| case 'col': | ||
| this.addCol(copiedNode); | ||
| break; | ||
| case 'image': | ||
| this.addImage(copiedNode); | ||
| break; | ||
| case 'markdown': | ||
| this.addMarkDown(copiedNode); | ||
| break; | ||
| case 'layer': | ||
| this.addLayer(copiedNode); | ||
| break; | ||
| } | ||
| } | ||
| this.props.onChange(paste(this.props.value)); | ||
| }; | ||
@@ -1829,2 +1868,3 @@ } | ||
| exports.create = create; | ||
| exports.deepCopy = deepCopy; | ||
| exports.defaultRenderEditBlock = defaultRenderEditBlock; | ||
@@ -1841,2 +1881,4 @@ exports.destroy = destroy; | ||
| exports.parseTypes = parseTypes; | ||
| exports.paste = paste; | ||
| exports.pasteChild = pasteChild; | ||
| exports.placeNodeInParent = placeNodeInParent; | ||
@@ -1843,0 +1885,0 @@ exports.reinsertIntoList = reinsertIntoList; |
@@ -1,2 +0,2 @@ | ||
| "use strict";var e,t=require("react"),o=require("react-resizable"),r=(e=require("react-markdown"),e&&"object"==typeof e&&"default"in e?e.default:e),n=require("react-color");function d(e,t){return{...e,[t.id]:t}}function i(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=d(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 a(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=d(e,{...o,childrenIds:r})}}const n=e[o];if(n){const o=l(n.childrenIds,t.id,r);e=d(e,{...n,childrenIds:o})}return d(e,{...t,parentId:o})}function l(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[t,...e]}function h(e,t="node"){let o=Object.keys(e).length;for(;e[o];)o++;return t+"_"+o}function c(e,t){let{byId:o}=e,r=h(o);const n={...o[r],...t};return{...e,byId:d(o,n)}}function p(e,t,o){let{byId:r}=e;const n={...r[t],...o};return{...e,byId:d(r,n)}}function u(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:i(o,t),focusedNodeId:n===t?null:n}}function g(e,t,o,r={}){if(!o)return e;const{byId:n}=e,d=n[t];return{...e,byId:a(n,{...d,isPlaceHolder:r.isPlaceHolder,...r.absolutePos?{top:r.absolutePos.top,left:r.absolutePos.left}:{}},o,r)}}function f(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],l=i.childrenIds.indexOf(t);if(l<0)return e;let h={};if("row"===i.type)if("left"===o.direction){if(0===l)return e;h={beforeItemId:i.childrenIds[l-1]}}else{if("right"!==o.direction){if(s&&"col"===s.type){const r=s.childrenIds.indexOf(i.id);return r>0&&"up"===o.direction?g(e,t,s.childrenIds[r-1]):r<s.childrenIds.length-1&&"down"===o.direction?g(e,t,s.childrenIds[r+1]):e}return e}if(l>=i.childrenIds.length-1)return e;h={afterItemId:i.childrenIds[l+1]}}else if("col"===i.type)if("up"===o.direction){if(0===l)return e;h={beforeItemId:i.childrenIds[l-1]}}else{if("down"!==o.direction){if(s&&"row"===s.type){const r=s.childrenIds.indexOf(i.id);return r>0&&"left"===o.direction?g(e,t,s.childrenIds[r-1]):r<s.childrenIds.length-1&&"right"===o.direction?g(e,t,s.childrenIds[r+1]):e}return e}if(l>=i.childrenIds.length-1)return e;h={afterItemId:i.childrenIds[l+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);h={absolutePos:{top:(n.top||0)+e,left:(n.left||0)+t}}}return{...e,byId:a(r,{...n,isPlaceHolder:h.isPlaceHolder,...h.absolutePos?{top:h.absolutePos.top,left:h.absolutePos.left}:{}},d,h)}}function m(e,t,o=!0){if(!t)return e;const{focusedNodeId:r}=e;return{...e,focusedNodeId:o?t.id:r===t.id?null:r}}function y(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 I(e,t){return t?{left:e.clientX-t.left,top:e.clientY-t.top,width:t.width,height:t.height}:null}function v(e,t,o){e.stopPropagation();const r=I(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 b(e,t,o={},r){const{draggedNodeId:n}=y(e);return g(r,n,t,o)}class w 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}=y(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}=y(e.dataTransfer.types);if(o){const t=I(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(b(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=>v(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 C 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}=y(e);return"col"===t||"row"===t||"markdown"===t||"image"===t||"layer"===t}),this.shouldPlaceBefore=((e,t)=>{const o=I(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}=y(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(b(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(b(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}=y(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=>v(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 k 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}=y(e);return"col"===t||"row"===t||"markdown"===t||"image"===t||"layer"===t}),this.shouldPlaceBefore=((e,t)=>{const o=I(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}=y(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(b(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(b(e.dataTransfer.types,this.props.node.id,{isPlaceHolder:t,...d},this.props.value))}}}),this.onDragEnter=(e=>{e.preventDefault()}),this.onDragOver=(e=>{const{draggedNodeType:t}=y(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=>v(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 x 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=>v(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 N 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=>v(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 E=e=>{const{node:r,renderEditBlock:n,value:d,onChange:i,width:s,height:a}=e,{focusedNodeId:l}=d;return t.createElement("div",{onClick:e=>{e.stopPropagation(),i(m(d,r))},style:r.id===l?{borderStyle:"dashed",borderWidth:1,borderColor:"orange"}:{}},t.createElement(o.ResizableBox,{className:"box",width:s,height:a,onResizeStart:e=>{e.preventDefault(),e.stopPropagation()},onResize:(e,{size:t})=>{const{width:o,height:n}=t;i(p(d,r.id,{width:o,height:n}))}},"col"===r.type?t.createElement(C,{key:"col_"+r.id,node:r,renderEditBlock:n,value:d,onChange:i}):"row"===r.type?t.createElement(k,{key:"row_"+r.id,node:r,renderEditBlock:n,value:d,onChange:i}):"markdown"===r.type?t.createElement(N,{node:r,update:(e,t)=>i(p(d,e,t))}):"layer"===r.type?t.createElement(w,{key:"layer_"+r.id,node:r,renderEditBlock:n,value:d,onChange:i}):t.createElement(x,{key:"image_"+r.id,node:r,renderEditBlock:n,value:d,onChange:i})))},D=({node:e,renderEditBlock:o,value:r,onChange:n})=>t.createElement(E,{width:e.width,height:e.height,renderEditBlock:o,node:e,value:r,onChange:n});class B 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(C,{key:"col_"+n.id,node:n,renderEditBlock:e,value:this.state.value,onChange:e=>this.setState({value:e})}))}}function P(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}B.defaultProps={renderEditBlock:D,onChange:e=>{}};const R=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:P(e)?"solid":void 0}),T=e=>{const{node:o,byId:n}=e;if(!o)return null;switch(o.type){case"markdown":return t.createElement("div",{key:o.id,style:{...R(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",...R(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(T,{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:{...R(o),width:o.width,height:o.height,display:"flex",flexDirection:"column"}},o.childrenIds.map(e=>t.createElement(T,{key:"prev_"+e,byId:n,node:n[e]})));case"row":return t.createElement("div",{key:o.id,style:{...R(o),width:o.width,height:o.height,display:"flex",flexDirection:"row"}},o.childrenIds.map(e=>t.createElement(T,{key:"prev_"+e,byId:n,node:n[e]})))}},S=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 W(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 l=h(o,"row");const c={type:"row",height:100,width:i&&i.width?i.width:500,...t,id:l,name:l,childrenIds:[]};o=a(o,c,i.id),i=o[d];const p={};if("col"===i.type&&i&&i.childrenIds.length>=1){const e=i.height/i.childrenIds.length;for(const t of i.childrenIds)p[t]={...o[t],height:e}}return{createdBlock:c,value:{...e,byId:{...o,...p},focusedNodeId:n||c.id}}}function M(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 l=h(o,"row");const c={type:"col",width:100,height:i.height?i.height:100,...t,id:l,name:l,childrenIds:[]};o=a(o,c,d),i=o[d];const p={};if("row"===i.type&&i&&i.childrenIds.length>=1){const e=i.width/i.childrenIds.length;for(const t of i.childrenIds)p[t]={...o[t],width:e}}return{createdBlock:c,value:{...e,byId:{...o,...p},focusedNodeId:n||c.id}}}function O(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 l=h(o,"markdown");const c={type:"markdown",width:Math.max(1,i.width-20),height:Math.max(1,i.height-20),...t,id:l,name:l,childrenIds:[]};return{createdBlock:c,value:{...e,byId:a(o,c,d),focusedNodeId:c.id}}}function L(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 l=["row","col","layer"];if(!s||l.indexOf(s.type)<0)return{error:"Can only add an image inside "+l.join(", "),value:e};let c=h(r,"image");const p={type:"image",value:o,width:Math.max(1,s.width-20),height:Math.max(1,s.height-20),...t,id:c,name:c,childrenIds:[]};return{createdBlock:p,value:{...e,byId:a(r,p,i),focusedNodeId:p.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 l=h(o,"layer");const c={type:"layer",width:Math.max(1,i.width-20),height:Math.max(1,i.height-20),...t,id:l,name:l,childrenIds:[]};return{createdBlock:c,value:{...e,byId:a(o,c,d),focusedNodeId:c.id}}}class j extends t.Component{constructor(){super(...arguments),this.state={selectedMenu:null},this.renderColorMenuItem=((e,o)=>{const{value:{byId:r,focusedNodeId:d}}=this.props,{selectedMenu:i}=this.state;if(!d)return;const s=d?r[d]:null;return t.createElement(t.Fragment,null,t.createElement("div",{style:{borderStyle:"solid",borderWidth:1,backgroundColor:s[e]||"transparent"},onClick:t=>this.toggleMenu(e)},o),i===e&&t.createElement("div",{style:{position:"absolute",zIndex:100}},t.createElement(n.SketchPicker,{color:s[e]||void 0,onChange:({hex:t})=>{this.props.updateBlock(d,{[e]:t}),this.toggleMenu(e)}})))})}toggleMenu(e){this.setState({selectedMenu:this.state.selectedMenu===e?null:e})}render(){const{buttonClassName:e,breadCrumbsProps:o,value:{byId:r,rootNodeId:n,focusedNodeId:d}}=this.props,i=d?r[d]:n||null,{focusNode:s}=this.props;return t.createElement("div",null,t.createElement("div",null,t.createElement("button",{className:e,onClick:()=>this.props.addRow()},"Add Row"),t.createElement("button",{className:e,onClick:()=>this.props.addCol()},"Add Col"),t.createElement("button",{className:e,onClick:this.props.removeFocused},"Remove Selected"),t.createElement("button",{className:e,onClick:()=>this.props.addMarkDown()},"Add Markdown"),t.createElement("button",{className:e,onClick:()=>this.props.addImage()},"Add Image"),t.createElement("button",{className:e,onClick:()=>this.props.addLayer()},"Add Layer")),t.createElement("div",null,t.createElement("button",{className:e,onClick:()=>this.props.copyFocused()},"Copy"),t.createElement("button",{className:e,onClick:()=>this.props.paste()},"Paste")),i&&t.createElement("div",null,this.renderColorMenuItem("color","Text"),this.renderColorMenuItem("backgroundColor","Background"),t.createElement(S,Object.assign({onSelect:e=>s(e,!0),byId:r,node:i},o)),t.createElement("button",{className:e,onClick:()=>this.props.moveInDirection(i.id,"up")},"Move Up"),t.createElement("button",{className:e,onClick:()=>this.props.moveInDirection(i.id,"down")},"Move Down"),t.createElement("button",{className:e,onClick:()=>this.props.moveInDirection(i.id,"left")},"Move Left"),t.createElement("button",{className:e,onClick:()=>this.props.moveInDirection(i.id,"right")},"Move Right")))}}j.defaultProps={buttonClassName:"btn btn default"};class H extends t.Component{constructor(){super(...arguments),this.addRow=(e=>{const{error:t,value:o}=W(this.props.value,e);t?alert(t):this.props.onChange(o)}),this.addCol=(e=>{const{error:t,value:o}=M(this.props.value,e);t?alert(t):this.props.onChange(o)}),this.addMarkDown=(e=>{const{error:t,value:o}=O(this.props.value,e);t?alert(t):this.props.onChange(o)}),this.addImage=(e=>{const{error:t,value:o}=L(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(m(o,e,t))}),this.create=(e=>{this.props.onChange(c(this.props.value,e))}),this.updateBlock=((e,t)=>{this.props.onChange(p(this.props.value,e,t))}),this.destroy=(e=>{this.props.onChange(u(this.props.value,e))}),this.move=((e,t,o={})=>{this.props.onChange(g(this.props.value,e,t,o))}),this.moveInDirection=((e,t)=>{this.props.onChange(f(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:{...o}})}}),this.paste=(()=>{const{value:{copiedNode:e}}=this.props;if(e&&e.parentId)switch(e.type){case"row":this.addRow(e);break;case"col":this.addCol(e);break;case"image":this.addImage(e);break;case"markdown":this.addMarkDown(e);break;case"layer":this.addLayer(e)}})}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))}}H.defaultProps={UiComponent:j},exports.AbsoluteLayerBlock=w,exports.BlockBreadCrumbs=S,exports.BlockEditor=B,exports.BlockEditorControl=H,exports.BlockEditorControlDefaultUI=j,exports.DraggableColBlock=C,exports.DraggableRowBlock=k,exports.ImageBlock=x,exports.MarkdownBlock=N,exports.Preview=T,exports.ResizableBlock=E,exports.addCol=M,exports.addImage=L,exports.addLayer=_,exports.addMarkDown=O,exports.addRow=W,exports.create=c,exports.defaultRenderEditBlock=D,exports.destroy=u,exports.focusNode=m,exports.getDragPositionRelativeToTarget=I,exports.hasDescendent=s,exports.move=g,exports.moveInDirection=f,exports.newBlockId=h,exports.onDragStart=v,exports.onDropped=b,exports.parseTypes=y,exports.placeNodeInParent=a,exports.reinsertIntoList=l,exports.removeNode=i,exports.update=p,exports.updateNode=d; | ||
| "use strict";var e,t=require("react"),o=require("react-resizable"),r=(e=require("react-markdown"),e&&"object"==typeof e&&"default"in e?e.default:e),n=require("react-color");function d(e,t){return{...e,[t.id]:t}}function i(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=d(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 a(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=d(e,{...o,childrenIds:r})}}const n=e[o];if(n){const o=l(n.childrenIds,t.id,r);e=d(e,{...n,childrenIds:o})}return d(e,{...t,parentId:o})}function l(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[t,...e]}function c(e,t){return t?{...t,value:"object"==typeof t.value?{...t.value}:t.value,childrenIds:[...t.childrenIds],children:t.childrenIds.map(t=>c(e,e[t]))}:t}function h(e){const{byId:t,copiedNode:o}=e;if(!o)return e;const{byId:r}=p(t,o);if(console.log("YO YO YO YO",t," NEW COPIED NODE ID: ",o.id),o.parentId){const n=t[o.parentId];if(n)return{...e,byId:a(r,o,o.parentId,{afterItemId:n.childrenIds[n.childrenIds.length-1]})}}return e}function p(e,t){console.log("PASTING CHILD...",t.id),t.id=u(e,t.type),console.log("NODE ID NOW",t.id);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,console.log("CHILDREN NOW",t.childrenIds),e=o,++r}}return console.log("PASTE CHILD",{byId:e,newId:t.id}),{byId:e,newId:t.id}}function u(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=u(o);const n={...o[r],...t};return{...e,byId:d(o,n)}}function f(e,t,o){let{byId:r}=e;const n={...r[t],...o};return{...e,byId:d(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:i(o,t),focusedNodeId:n===t?null:n}}function m(e,t,o,r={}){if(!o)return e;const{byId:n}=e,d=n[t];return{...e,byId:a(n,{...d,isPlaceHolder:r.isPlaceHolder,...r.absolutePos?{top:r.absolutePos.top,left:r.absolutePos.left}:{}},o,r)}}function y(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],l=i.childrenIds.indexOf(t);if(l<0)return e;let c={};if("row"===i.type)if("left"===o.direction){if(0===l)return e;c={beforeItemId:i.childrenIds[l-1]}}else{if("right"!==o.direction){if(s&&"col"===s.type){const r=s.childrenIds.indexOf(i.id);return r>0&&"up"===o.direction?m(e,t,s.childrenIds[r-1]):r<s.childrenIds.length-1&&"down"===o.direction?m(e,t,s.childrenIds[r+1]):e}return e}if(l>=i.childrenIds.length-1)return e;c={afterItemId:i.childrenIds[l+1]}}else if("col"===i.type)if("up"===o.direction){if(0===l)return e;c={beforeItemId:i.childrenIds[l-1]}}else{if("down"!==o.direction){if(s&&"row"===s.type){const r=s.childrenIds.indexOf(i.id);return r>0&&"left"===o.direction?m(e,t,s.childrenIds[r-1]):r<s.childrenIds.length-1&&"right"===o.direction?m(e,t,s.childrenIds[r+1]):e}return e}if(l>=i.childrenIds.length-1)return e;c={afterItemId:i.childrenIds[l+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:a(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 b(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 w(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 k(e,t,o={},r){const{draggedNodeId:n}=b(e);return m(r,n,t,o)}class x 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}=b(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}=b(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(k(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=>w(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}=b(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}=b(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(k(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(k(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}=b(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=>w(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 E 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}=b(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}=b(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(k(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(k(e.dataTransfer.types,this.props.node.id,{isPlaceHolder:t,...d},this.props.value))}}}),this.onDragEnter=(e=>{e.preventDefault()}),this.onDragOver=(e=>{const{draggedNodeType:t}=b(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=>w(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=>w(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 B 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=>w(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:s,height:a}=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:s,height:a,onResizeStart:e=>{e.preventDefault(),e.stopPropagation()},onResize:(e,{size:t})=>{const{width:o,height:n}=t;i(f(d,r.id,{width:o,height:n}))}},"col"===r.type?t.createElement(N,{key:"col_"+r.id,node:r,renderEditBlock:n,value:d,onChange:i}):"row"===r.type?t.createElement(E,{key:"row_"+r.id,node:r,renderEditBlock:n,value:d,onChange:i}):"markdown"===r.type?t.createElement(B,{node:r,update:(e,t)=>i(f(d,e,t))}):"layer"===r.type?t.createElement(x,{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})))},R=({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 T 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 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}T.defaultProps={renderEditBlock:R,onChange:e=>{}};const S=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}),W=e=>{const{node:o,byId:n}=e;if(!o)return null;switch(o.type){case"markdown":return t.createElement("div",{key:o.id,style:{...S(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",...S(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(W,{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:{...S(o),width:o.width,height:o.height,display:"flex",flexDirection:"column"}},o.childrenIds.map(e=>t.createElement(W,{key:"prev_"+e,byId:n,node:n[e]})));case"row":return t.createElement("div",{key:o.id,style:{...S(o),width:o.width,height:o.height,display:"flex",flexDirection:"row"}},o.childrenIds.map(e=>t.createElement(W,{key:"prev_"+e,byId:n,node:n[e]})))}},M=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 L(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 l=u(o,"row");const c={type:"row",height:100,width:i&&i.width?i.width:500,...t,id:l,name:l,childrenIds:[]};o=a(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 _(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 l=u(o,"col");const c={type:"col",width:100,height:i.height?i.height:100,...t,id:l,name:l,childrenIds:[]};o=a(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 l=u(o,"markdown");const c={type:"markdown",width:Math.max(1,i.width-20),height:Math.max(1,i.height-20),...t,id:l,name:l,childrenIds:[]};return{createdBlock:c,value:{...e,byId:a(o,c,d),focusedNodeId:c.id}}}function j(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 l=["row","col","layer"];if(!s||l.indexOf(s.type)<0)return{error:"Can only add an image inside "+l.join(", "),value:e};let c=u(r,"image");const h={type:"image",value:o,width:Math.max(1,s.width-20),height:Math.max(1,s.height-20),...t,id:c,name:c,childrenIds:[]};return{createdBlock:h,value:{...e,byId:a(r,h,i),focusedNodeId:h.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 a layer inside "+s.join(", "),value:e};let l=u(o,"layer");const c={type:"layer",width:Math.max(1,i.width-20),height:Math.max(1,i.height-20),...t,id:l,name:l,childrenIds:[]};return{createdBlock:c,value:{...e,byId:a(o,c,d),focusedNodeId:c.id}}}class A extends t.Component{constructor(){super(...arguments),this.state={selectedMenu:null},this.renderColorMenuItem=((e,o)=>{const{value:{byId:r,focusedNodeId:d}}=this.props,{selectedMenu:i}=this.state;if(!d)return;const s=d?r[d]:null;return t.createElement(t.Fragment,null,t.createElement("div",{style:{borderStyle:"solid",borderWidth:1,backgroundColor:s[e]||"transparent"},onClick:t=>this.toggleMenu(e)},o),i===e&&t.createElement("div",{style:{position:"absolute",zIndex:100}},t.createElement(n.SketchPicker,{color:s[e]||void 0,onChange:({hex:t})=>{this.props.updateBlock(d,{[e]:t}),this.toggleMenu(e)}})))})}toggleMenu(e){this.setState({selectedMenu:this.state.selectedMenu===e?null:e})}render(){const{buttonClassName:e,breadCrumbsProps:o,value:{byId:r,rootNodeId:n,focusedNodeId:d}}=this.props,i=d?r[d]:n||null,{focusNode:s}=this.props;return t.createElement("div",null,t.createElement("div",null,t.createElement("button",{className:e,onClick:()=>this.props.addRow()},"Add Row"),t.createElement("button",{className:e,onClick:()=>this.props.addCol()},"Add Col"),t.createElement("button",{className:e,onClick:this.props.removeFocused},"Remove Selected"),t.createElement("button",{className:e,onClick:()=>this.props.addMarkDown()},"Add Markdown"),t.createElement("button",{className:e,onClick:()=>this.props.addImage()},"Add Image"),t.createElement("button",{className:e,onClick:()=>this.props.addLayer()},"Add Layer")),t.createElement("div",null,t.createElement("button",{className:e,onClick:()=>this.props.copyFocused()},"Copy"),t.createElement("button",{className:e,onClick:()=>this.props.paste()},"Paste")),i&&t.createElement("div",null,this.renderColorMenuItem("color","Text"),this.renderColorMenuItem("backgroundColor","Background"),t.createElement(M,Object.assign({onSelect:e=>s(e,!0),byId:r,node:i},o)),t.createElement("button",{className:e,onClick:()=>this.props.moveInDirection(i.id,"up")},"Move Up"),t.createElement("button",{className:e,onClick:()=>this.props.moveInDirection(i.id,"down")},"Move Down"),t.createElement("button",{className:e,onClick:()=>this.props.moveInDirection(i.id,"left")},"Move Left"),t.createElement("button",{className:e,onClick:()=>this.props.moveInDirection(i.id,"right")},"Move Right")))}}A.defaultProps={buttonClassName:"btn btn default"};class z extends t.Component{constructor(){super(...arguments),this.addRow=(e=>{const{error:t,value:o}=L(this.props.value,e);t?alert(t):this.props.onChange(o)}),this.addCol=(e=>{const{error:t,value:o}=_(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}=j(this.props.value,e);t?alert(t):this.props.onChange(o)}),this.addLayer=(e=>{const{error:t,value:o}=F(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(f(this.props.value,e,t))}),this.destroy=(e=>{this.props.onChange(I(this.props.value,e))}),this.move=((e,t,o={})=>{this.props.onChange(m(this.props.value,e,t,o))}),this.moveInDirection=((e,t)=>{this.props.onChange(y(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:c(e,o)})}}),this.paste=(()=>{this.props.onChange(h(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))}}z.defaultProps={UiComponent:A},exports.AbsoluteLayerBlock=x,exports.BlockBreadCrumbs=M,exports.BlockEditor=T,exports.BlockEditorControl=z,exports.BlockEditorControlDefaultUI=A,exports.DraggableColBlock=N,exports.DraggableRowBlock=E,exports.ImageBlock=D,exports.MarkdownBlock=B,exports.Preview=W,exports.ResizableBlock=P,exports.addCol=_,exports.addImage=j,exports.addLayer=F,exports.addMarkDown=H,exports.addRow=L,exports.create=g,exports.deepCopy=c,exports.defaultRenderEditBlock=R,exports.destroy=I,exports.focusNode=v,exports.getDragPositionRelativeToTarget=C,exports.hasDescendent=s,exports.move=m,exports.moveInDirection=y,exports.newBlockId=u,exports.onDragStart=w,exports.onDropped=k,exports.parseTypes=b,exports.paste=h,exports.pasteChild=p,exports.placeNodeInParent=a,exports.reinsertIntoList=l,exports.removeNode=i,exports.update=f,exports.updateNode=d; | ||
| //# sourceMappingURL=react-movable-block-editor.cjs.production.js.map |
@@ -1,2 +0,2 @@ | ||
| import*as e from"react";import{Component as t,createElement as o,Fragment as r}from"react";import{ResizableBox as d}from"react-resizable";import n 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 d=e[o];if(d){const o=c(d.childrenIds,t.id,r);e=s(e,{...d,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:d}=o;let n=-1;if(r?n=e.findIndex(e=>e===r):d&&(n=e.findIndex(e=>e===d)+1),n>=0){const o=[...e];return o.splice(n,0,t),o}return[t,...e]}function p(e,t="node"){let o=Object.keys(e).length;for(;e[o];)o++;return t+"_"+o}function u(e,t){let{byId:o}=e,r=p(o);const d={...o[r],...t};return{...e,byId:s(o,d)}}function g(e,t,o){let{byId:r}=e;const d={...r[t],...o};return{...e,byId:s(r,d)}}function f(e,t){const{byId:o,rootNodeId:r,focusedNodeId:d}=e;return r===t?(alert("Cannot destroy root node"),{...e,byId:o,focusedNodeId:d}):{...e,byId:a(o,t),focusedNodeId:d===t?null:d}}function y(e,t,o,r={}){if(!o)return e;const{byId:d}=e,n=d[t];return{...e,byId:h(d,{...n,isPlaceHolder:r.isPlaceHolder,...r.absolutePos?{top:r.absolutePos.top,left:r.absolutePos.left}:{}},o,r)}}function I(e,t,o={}){const{byId:r}=e,d=r[t];if(!d)return e;const n=d.parentId;if(!n)return e;const i=r[n];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?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;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?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;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:(d.top||0)+e,left:(d.left||0)+t}}}return{...e,byId:h(r,{...d,isPlaceHolder:l.isPlaceHolder,...l.absolutePos?{top:l.absolutePos.top,left:l.absolutePos.left}:{}},n,l)}}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 b(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),d=o[0].slice("draggednodetype:".length);return{draggedNodeId:r,draggedNodeType:d}}function m(e,t){return t?{left:e.clientX-t.left,top:e.clientY-t.top,width:t.width,height:t.height}:null}function w(e,t,o){e.stopPropagation();const r=m(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 C(e,t,o={},r){const{draggedNodeId:d}=b(e);return y(r,d,t,o)}class k extends t{constructor(){super(...arguments),this.selfRef=null,this.getBoundingRect=(()=>this.selfRef&&this.selfRef.getBoundingClientRect?this.selfRef.getBoundingClientRect():null),this.canDrop=(e=>{const{draggedNodeType:t}=b(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}=b(e.dataTransfer.types);if(o){const t=m(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(C(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,d=t.byId[e];return r({node:d,renderEditBlock:r,value:t,onChange:o})}render(){const{node:e,value:{byId:t}}=this.props,{childrenIds:r}=e;return o("div",{ref:e=>this.selfRef=e,onDragOver:this.onDragOver,onDrop:this.onDrop,draggable:!0,onDragStart:e=>w(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=t[e],d=o("div",{key:"node_"+e,style:{position:"absolute",width:r.width,height:r.height,top:r.top,left:r.left}},this.renderChild(e));return d}))}}class N extends t{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}=b(e);return"col"===t||"row"===t||"markdown"===t||"image"===t||"layer"===t}),this.shouldPlaceBefore=((e,t)=>{const o=m(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}=b(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(C(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,d=r.length,n=d?o?{beforeItemId:r[0]}:{afterItemId:r[d-1]}:null;this.props.onChange(C(e.dataTransfer.types,this.props.node.id,{isPlaceHolder:t,...n},this.props.value))}}),this.onDragEnter=(e=>{e.preventDefault()}),this.onDragOver=(e=>{this.canDrop(e.dataTransfer.types)&&(e.preventDefault(),e.stopPropagation());const{draggedNodeType:t}=b(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,d=t.byId[e];return r({node:d,renderEditBlock:r,value:t,onChange:o})}render(){const{node:e,value:{byId:t}}=this.props,{wantToPlaceNext:r}=this.state,{childrenIds:d}=e;let n="firstChild"===r?3:0;return o("div",{key:"col_"+e.id,style:{display:"flex",flexDirection:"row",width:"100%",height:"100%"}},"left"===r&&o("div",{style:{height:"100%",width:3,backgroundColor:"white"}}),o("div",{ref:e=>this.selfRef=e,onDragOver:this.onDragOver,onDragLeave:this.onDragLeave,onDrop:this.onDrop,onDragEnter:this.onDragEnter,draggable:!0,onDragStart:e=>w(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&&o("div",{style:{height:10,width:"100%",backgroundColor:"blue"}}),d.map(e=>{const r=t[e],d=o("div",{className:"drag-node",key:"node_"+e,style:{position:"absolute",width:r.width,height:r.height,top:n,left:0}},this.renderChild(e));return n+=r.height,d}),"lastChild"===r&&o("div",{style:{top:n,position:"absolute",height:10,width:"100%",backgroundColor:"orange"}})),"right"===r&&o("div",{style:{height:"100%",width:3,backgroundColor:"white"}}))}}class x extends t{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}=b(e);return"col"===t||"row"===t||"markdown"===t||"image"===t||"layer"===t}),this.shouldPlaceBefore=((e,t)=>{const o=m(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}=b(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(C(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,d=r.length,n=d?o?{beforeItemId:r[0]}:{afterItemId:r[d-1]}:null;this.props.onChange(C(e.dataTransfer.types,this.props.node.id,{isPlaceHolder:t,...n},this.props.value))}}}),this.onDragEnter=(e=>{e.preventDefault()}),this.onDragOver=(e=>{const{draggedNodeType:t}=b(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:r,renderEditBlock:d}=this.props,{wantToPlaceNext:n}=this.state;let i="firstChild"===n?3:0;return o("div",{key:"row_"+e.id},"top"===n&&o("div",{style:{height:3,width:"100%",backgroundColor:"black"}}),o("div",{ref:e=>this.selfRef=e,onDragOver:this.onDragOver,onDragLeave:this.onDragLeave,onDragEnter:this.onDragEnter,onDrop:this.onDrop,draggable:!0,onDragStart:e=>w(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"===n&&o("div",{style:{height:"100%",width:3,backgroundColor:"blue"}}),e.childrenIds.map(e=>{const n=t.byId[e],s=o("div",{className:"drag-node",key:"node_"+n.id,style:{position:"absolute",width:n.width,height:n.height,top:0,left:i}},d({node:n,renderEditBlock:d,value:t,onChange:r}));return i+=n.width,s}),"lastChild"===n&&o("div",{style:{position:"absolute",left:i,height:"100%",width:3,backgroundColor:"orange"}})),"bottom"===n&&o("div",{style:{height:3,width:"100%",backgroundColor:"green"}}))}}class D extends t{constructor(){super(...arguments),this.selfRef=null,this.getBoundingRect=(()=>this.selfRef&&this.selfRef.getBoundingClientRect?this.selfRef.getBoundingClientRect():null)}render(){const{node:e}=this.props;return o("div",{ref:e=>this.selfRef=e,draggable:!0,onDragStart:e=>w(e,this.props.node,this.getBoundingRect),style:{width:"100%",height:"100%",backgroundColor:"violet",padding:5,borderRadius:3}},o("img",{style:{width:"100%",height:"100%"},src:e.value}))}}class P extends t{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:r}=e;return o("div",{ref:e=>this.selfRef=e,draggable:!0,onDragStart:e=>w(e,this.props.node,this.getBoundingRect),style:{width:"100%",height:"100%",backgroundColor:"#ffc0cb75",padding:5,borderRadius:3}},o("textarea",{className:"form-control",name:"value",placeholder:"Type here...",value:r,onChange:o=>t(e.id,{value:o.target.value})}))}}const R=e=>{const{node:t,renderEditBlock:r,value:n,onChange:i,width:s,height:a}=e,{focusedNodeId:l}=n;return o("div",{onClick:e=>{e.stopPropagation(),i(v(n,t))},style:t.id===l?{borderStyle:"dashed",borderWidth:1,borderColor:"orange"}:{}},o(d,{className:"box",width:s,height:a,onResizeStart:e=>{e.preventDefault(),e.stopPropagation()},onResize:(e,{size:o})=>{const{width:r,height:d}=o;i(g(n,t.id,{width:r,height:d}))}},"col"===t.type?o(N,{key:"col_"+t.id,node:t,renderEditBlock:r,value:n,onChange:i}):"row"===t.type?o(x,{key:"row_"+t.id,node:t,renderEditBlock:r,value:n,onChange:i}):"markdown"===t.type?o(P,{node:t,update:(e,t)=>i(g(n,e,t))}):"layer"===t.type?o(k,{key:"layer_"+t.id,node:t,renderEditBlock:r,value:n,onChange:i}):o(D,{key:"image_"+t.id,node:t,renderEditBlock:r,value:n,onChange:i})))},B=({node:e,renderEditBlock:t,value:r,onChange:d})=>o(R,{width:e.width,height:e.height,renderEditBlock:t,node:e,value:r,onChange:d});class T extends t{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:r}}=this.state,d=t[r];return o("div",{style:{position:"relative",width:d.width,height:d.height}},o(N,{key:"col_"+d.id,node:d,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}T.defaultProps={renderEditBlock:B,onChange:e=>{}};const W=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}),M=e=>{const{node:t,byId:r}=e;if(!t)return null;switch(t.type){case"markdown":return o("div",{key:t.id,style:{...W(t),height:t.height,width:t.width}},o(n,{source:t.value}));case"layer":return o("div",{key:t.id,style:{position:"relative",...W(t),height:t.height,width:t.width}},t.childrenIds.map(e=>{const t=r[e];return o("div",{key:t.id,style:{position:"absolute",top:t.top||0,left:t.left||0}},o(M,{byId:r,node:r[e]}))}));case"image":return o("div",{key:t.id,style:{height:"100%",width:"100%"}},o("img",{src:t.value}));case"col":return o("div",{key:t.id,style:{...W(t),width:t.width,height:t.height,display:"flex",flexDirection:"column"}},t.childrenIds.map(e=>o(M,{key:"prev_"+e,byId:r,node:r[e]})));case"row":return o("div",{key:t.id,style:{...W(t),width:t.width,height:t.height,display:"flex",flexDirection:"row"}},t.childrenIds.map(e=>o(M,{key:"prev_"+e,byId:r,node:r[e]})))}},O=e=>{const{byId:t,node:r,onSelect:d,navClassName:n="breadcrumb",itemClassName:i="breadcrumb-item btn btn-link active"}=e;if(!r)return null;const s=[];let a=r.id;for(;a;){const e=t[a];if(!e)break;s.unshift({label:`${e.type}-${e.id}`,id:e.id}),a=e.parentId}return o("nav",{"aria-label":"breadcrumb"},o("ol",{className:n},s.map(e=>o("li",{onClick:()=>d(e.id),key:"crumb_"+e.id,className:i,"aria-current":"page"},e.label))))};function E(e,t){let{byId:o,rootNodeId:r}=e;const{focusedNodeId:d}=e;let n=(t?t.parentId:d)||r,i=o[n];const s=["col","layer"];if((!i||s.indexOf(i.type)<0)&&(n=i?i.parentId:null,i=n?o[n]: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=p(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[n];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:d||l.id}}}function L(e,t){let{byId:o,rootNodeId:r}=e;const{focusedNodeId:d}=e;let n=(t?t.parentId:d)||r,i=o[n];const s=["row","layer"];if((!i||s.indexOf(i.type)<0)&&(n=i?i.parentId:null,i=n?o[n]: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=p(o,"row");const l={type:"col",width:100,height:i.height?i.height:100,...t,id:a,name:a,childrenIds:[]};o=h(o,l,n),i=o[n];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:d||l.id}}}function _(e,t){let{byId:o,rootNodeId:r}=e;const{focusedNodeId:d}=e;let n=(t?t.parentId:d)||r,i=o[n];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=p(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,n),focusedNodeId:l.id}}}function j(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:d}=e;const{focusedNodeId:n}=e;let i=(t?t.parentId:n)||d,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=p(r,"image");const c={type:"image",value:o,width:Math.max(1,s.width-20),height:Math.max(1,s.height-20),...t,id:l,name:l,childrenIds:[]};return{createdBlock:c,value:{...e,byId:h(r,c,i),focusedNodeId:c.id}}}function H(e,t){let{byId:o,rootNodeId:r}=e;const{focusedNodeId:d}=e;let n=(t?t.parentId:d)||r,i=o[n];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=p(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,n),focusedNodeId:l.id}}}class F extends t{constructor(){super(...arguments),this.state={selectedMenu:null},this.renderColorMenuItem=((e,t)=>{const{value:{byId:d,focusedNodeId:n}}=this.props,{selectedMenu:s}=this.state;if(!n)return;const a=n?d[n]:null;return o(r,null,o("div",{style:{borderStyle:"solid",borderWidth:1,backgroundColor:a[e]||"transparent"},onClick:t=>this.toggleMenu(e)},t),s===e&&o("div",{style:{position:"absolute",zIndex:100}},o(i,{color:a[e]||void 0,onChange:({hex:t})=>{this.props.updateBlock(n,{[e]:t}),this.toggleMenu(e)}})))})}toggleMenu(e){this.setState({selectedMenu:this.state.selectedMenu===e?null:e})}render(){const{buttonClassName:e,breadCrumbsProps:t,value:{byId:r,rootNodeId:d,focusedNodeId:n}}=this.props,i=n?r[n]:d||null,{focusNode:s}=this.props;return o("div",null,o("div",null,o("button",{className:e,onClick:()=>this.props.addRow()},"Add Row"),o("button",{className:e,onClick:()=>this.props.addCol()},"Add Col"),o("button",{className:e,onClick:this.props.removeFocused},"Remove Selected"),o("button",{className:e,onClick:()=>this.props.addMarkDown()},"Add Markdown"),o("button",{className:e,onClick:()=>this.props.addImage()},"Add Image"),o("button",{className:e,onClick:()=>this.props.addLayer()},"Add Layer")),o("div",null,o("button",{className:e,onClick:()=>this.props.copyFocused()},"Copy"),o("button",{className:e,onClick:()=>this.props.paste()},"Paste")),i&&o("div",null,this.renderColorMenuItem("color","Text"),this.renderColorMenuItem("backgroundColor","Background"),o(O,Object.assign({onSelect:e=>s(e,!0),byId:r,node:i},t)),o("button",{className:e,onClick:()=>this.props.moveInDirection(i.id,"up")},"Move Up"),o("button",{className:e,onClick:()=>this.props.moveInDirection(i.id,"down")},"Move Down"),o("button",{className:e,onClick:()=>this.props.moveInDirection(i.id,"left")},"Move Left"),o("button",{className:e,onClick:()=>this.props.moveInDirection(i.id,"right")},"Move Right")))}}F.defaultProps={buttonClassName:"btn btn default"};class z extends t{constructor(){super(...arguments),this.addRow=(e=>{const{error:t,value:o}=E(this.props.value,e);t?alert(t):this.props.onChange(o)}),this.addCol=(e=>{const{error:t,value:o}=L(this.props.value,e);t?alert(t):this.props.onChange(o)}),this.addMarkDown=(e=>{const{error:t,value:o}=_(this.props.value,e);t?alert(t):this.props.onChange(o)}),this.addImage=(e=>{const{error:t,value:o}=j(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(u(this.props.value,e))}),this.updateBlock=((e,t)=>{this.props.onChange(g(this.props.value,e,t))}),this.destroy=(e=>{this.props.onChange(f(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(I(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:{...o}})}}),this.paste=(()=>{const{value:{copiedNode:e}}=this.props;if(e&&e.parentId)switch(e.type){case"row":this.addRow(e);break;case"col":this.addCol(e);break;case"image":this.addImage(e);break;case"markdown":this.addMarkDown(e);break;case"layer":this.addLayer(e)}})}render(){const{UiComponent:e,onChange:t,value:r,controlUiProps:d}=this.props;return o(e,Object.assign({value:r,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(r.byId[e],t),removeFocused:this.removeFocused,updateBlock:this.updateBlock},d))}}z.defaultProps={UiComponent:F};export{k as AbsoluteLayerBlock,O as BlockBreadCrumbs,T as BlockEditor,z as BlockEditorControl,F as BlockEditorControlDefaultUI,N as DraggableColBlock,x as DraggableRowBlock,D as ImageBlock,P as MarkdownBlock,M as Preview,R as ResizableBlock,L as addCol,j as addImage,H as addLayer,_ as addMarkDown,E as addRow,u as create,B as defaultRenderEditBlock,f as destroy,v as focusNode,m as getDragPositionRelativeToTarget,l as hasDescendent,y as move,I as moveInDirection,p as newBlockId,w as onDragStart,C as onDropped,b as parseTypes,h as placeNodeInParent,c as reinsertIntoList,a as removeNode,g as update,s as updateNode}; | ||
| import*as e from"react";import{Component as t,createElement as o,Fragment as r}from"react";import{ResizableBox as d}from"react-resizable";import n 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 d=e[o];if(d){const o=c(d.childrenIds,t.id,r);e=s(e,{...d,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:d}=o;let n=-1;if(r?n=e.findIndex(e=>e===r):d&&(n=e.findIndex(e=>e===d)+1),n>=0){const o=[...e];return o.splice(n,0,t),o}return[t,...e]}function p(e,t){return t?{...t,value:"object"==typeof t.value?{...t.value}:t.value,childrenIds:[...t.childrenIds],children:t.childrenIds.map(t=>p(e,e[t]))}:t}function u(e){const{byId:t,copiedNode:o}=e;if(!o)return e;const{byId:r}=g(t,o);if(console.log("YO YO YO YO",t," NEW COPIED NODE ID: ",o.id),o.parentId){const d=t[o.parentId];if(d)return{...e,byId:h(r,o,o.parentId,{afterItemId:d.childrenIds[d.childrenIds.length-1]})}}return e}function g(e,t){console.log("PASTING CHILD...",t.id),t.id=f(e,t.type),console.log("NODE ID NOW",t.id);const o=t.children;if(t.children=void 0,e={...e,[t.id]:t},o){let r=0;for(const d of o){d.parentId=t.id;const{byId:o,newId:n}=g(e,d);t.childrenIds[r]=n,console.log("CHILDREN NOW",t.childrenIds),e=o,++r}}return console.log("PASTE CHILD",{byId:e,newId:t.id}),{byId:e,newId:t.id}}function f(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=f(o);const d={...o[r],...t};return{...e,byId:s(o,d)}}function y(e,t,o){let{byId:r}=e;const d={...r[t],...o};return{...e,byId:s(r,d)}}function v(e,t){const{byId:o,rootNodeId:r,focusedNodeId:d}=e;return r===t?(alert("Cannot destroy root node"),{...e,byId:o,focusedNodeId:d}):{...e,byId:a(o,t),focusedNodeId:d===t?null:d}}function b(e,t,o,r={}){if(!o)return e;const{byId:d}=e,n=d[t];return{...e,byId:h(d,{...n,isPlaceHolder:r.isPlaceHolder,...r.absolutePos?{top:r.absolutePos.top,left:r.absolutePos.left}:{}},o,r)}}function m(e,t,o={}){const{byId:r}=e,d=r[t];if(!d)return e;const n=d.parentId;if(!n)return e;const i=r[n];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:(d.top||0)+e,left:(d.left||0)+t}}}return{...e,byId:h(r,{...d,isPlaceHolder:l.isPlaceHolder,...l.absolutePos?{top:l.absolutePos.top,left:l.absolutePos.left}:{}},n,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),d=o[0].slice("draggednodetype:".length);return{draggedNodeId:r,draggedNodeType:d}}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 D(e,t,o={},r){const{draggedNodeId:d}=C(e);return b(r,d,t,o)}class x extends t{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(D(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,d=t.byId[e];return r({node:d,renderEditBlock:r,value:t,onChange:o})}render(){const{node:e,value:{byId:t}}=this.props,{childrenIds:r}=e;return o("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}},r.map(e=>{const r=t[e],d=o("div",{key:"node_"+e,style:{position:"absolute",width:r.width,height:r.height,top:r.top,left:r.left}},this.renderChild(e));return d}))}}class P extends t{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(D(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,d=r.length,n=d?o?{beforeItemId:r[0]}:{afterItemId:r[d-1]}:null;this.props.onChange(D(e.dataTransfer.types,this.props.node.id,{isPlaceHolder:t,...n},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,d=t.byId[e];return r({node:d,renderEditBlock:r,value:t,onChange:o})}render(){const{node:e,value:{byId:t}}=this.props,{wantToPlaceNext:r}=this.state,{childrenIds:d}=e;let n="firstChild"===r?3:0;return o("div",{key:"col_"+e.id,style:{display:"flex",flexDirection:"row",width:"100%",height:"100%"}},"left"===r&&o("div",{style:{height:"100%",width:3,backgroundColor:"white"}}),o("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"===r&&o("div",{style:{height:10,width:"100%",backgroundColor:"blue"}}),d.map(e=>{const r=t[e],d=o("div",{className:"drag-node",key:"node_"+e,style:{position:"absolute",width:r.width,height:r.height,top:n,left:0}},this.renderChild(e));return n+=r.height,d}),"lastChild"===r&&o("div",{style:{top:n,position:"absolute",height:10,width:"100%",backgroundColor:"orange"}})),"right"===r&&o("div",{style:{height:"100%",width:3,backgroundColor:"white"}}))}}class R extends t{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(D(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,d=r.length,n=d?o?{beforeItemId:r[0]}:{afterItemId:r[d-1]}:null;this.props.onChange(D(e.dataTransfer.types,this.props.node.id,{isPlaceHolder:t,...n},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:r,renderEditBlock:d}=this.props,{wantToPlaceNext:n}=this.state;let i="firstChild"===n?3:0;return o("div",{key:"row_"+e.id},"top"===n&&o("div",{style:{height:3,width:"100%",backgroundColor:"black"}}),o("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"===n&&o("div",{style:{height:"100%",width:3,backgroundColor:"blue"}}),e.childrenIds.map(e=>{const n=t.byId[e],s=o("div",{className:"drag-node",key:"node_"+n.id,style:{position:"absolute",width:n.width,height:n.height,top:0,left:i}},d({node:n,renderEditBlock:d,value:t,onChange:r}));return i+=n.width,s}),"lastChild"===n&&o("div",{style:{position:"absolute",left:i,height:"100%",width:3,backgroundColor:"orange"}})),"bottom"===n&&o("div",{style:{height:3,width:"100%",backgroundColor:"green"}}))}}class B extends t{constructor(){super(...arguments),this.selfRef=null,this.getBoundingRect=(()=>this.selfRef&&this.selfRef.getBoundingClientRect?this.selfRef.getBoundingClientRect():null)}render(){const{node:e}=this.props;return o("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}},o("img",{style:{width:"100%",height:"100%"},src:e.value}))}}class T extends t{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:r}=e;return o("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}},o("textarea",{className:"form-control",name:"value",placeholder:"Type here...",value:r,onChange:o=>t(e.id,{value:o.target.value})}))}}const O=e=>{const{node:t,renderEditBlock:r,value:n,onChange:i,width:s,height:a}=e,{focusedNodeId:l}=n;return o("div",{onClick:e=>{e.stopPropagation(),i(w(n,t))},style:t.id===l?{borderStyle:"dashed",borderWidth:1,borderColor:"orange"}:{}},o(d,{className:"box",width:s,height:a,onResizeStart:e=>{e.preventDefault(),e.stopPropagation()},onResize:(e,{size:o})=>{const{width:r,height:d}=o;i(y(n,t.id,{width:r,height:d}))}},"col"===t.type?o(P,{key:"col_"+t.id,node:t,renderEditBlock:r,value:n,onChange:i}):"row"===t.type?o(R,{key:"row_"+t.id,node:t,renderEditBlock:r,value:n,onChange:i}):"markdown"===t.type?o(T,{node:t,update:(e,t)=>i(y(n,e,t))}):"layer"===t.type?o(x,{key:"layer_"+t.id,node:t,renderEditBlock:r,value:n,onChange:i}):o(B,{key:"image_"+t.id,node:t,renderEditBlock:r,value:n,onChange:i})))},S=({node:e,renderEditBlock:t,value:r,onChange:d})=>o(O,{width:e.width,height:e.height,renderEditBlock:t,node:e,value:r,onChange:d});class W extends t{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:r}}=this.state,d=t[r];return o("div",{style:{position:"relative",width:d.width,height:d.height}},o(P,{key:"col_"+d.id,node:d,renderEditBlock:e,value:this.state.value,onChange:e=>this.setState({value:e})}))}}function E(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:S,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:E(e)?"solid":void 0}),L=e=>{const{node:t,byId:r}=e;if(!t)return null;switch(t.type){case"markdown":return o("div",{key:t.id,style:{...M(t),height:t.height,width:t.width}},o(n,{source:t.value}));case"layer":return o("div",{key:t.id,style:{position:"relative",...M(t),height:t.height,width:t.width}},t.childrenIds.map(e=>{const t=r[e];return o("div",{key:t.id,style:{position:"absolute",top:t.top||0,left:t.left||0}},o(L,{byId:r,node:r[e]}))}));case"image":return o("div",{key:t.id,style:{height:"100%",width:"100%"}},o("img",{src:t.value}));case"col":return o("div",{key:t.id,style:{...M(t),width:t.width,height:t.height,display:"flex",flexDirection:"column"}},t.childrenIds.map(e=>o(L,{key:"prev_"+e,byId:r,node:r[e]})));case"row":return o("div",{key:t.id,style:{...M(t),width:t.width,height:t.height,display:"flex",flexDirection:"row"}},t.childrenIds.map(e=>o(L,{key:"prev_"+e,byId:r,node:r[e]})))}},_=e=>{const{byId:t,node:r,onSelect:d,navClassName:n="breadcrumb",itemClassName:i="breadcrumb-item btn btn-link active"}=e;if(!r)return null;const s=[];let a=r.id;for(;a;){const e=t[a];if(!e)break;s.unshift({label:`${e.type}-${e.id}`,id:e.id}),a=e.parentId}return o("nav",{"aria-label":"breadcrumb"},o("ol",{className:n},s.map(e=>o("li",{onClick:()=>d(e.id),key:"crumb_"+e.id,className:i,"aria-current":"page"},e.label))))};function H(e,t){let{byId:o,rootNodeId:r}=e;const{focusedNodeId:d}=e;let n=(t?t.parentId:d)||r,i=o[n];const s=["col","layer"];if((!i||s.indexOf(i.type)<0)&&(n=i?i.parentId:null,i=n?o[n]: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=f(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[n];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:d||l.id}}}function j(e,t){let{byId:o,rootNodeId:r}=e;const{focusedNodeId:d}=e;let n=(t?t.parentId:d)||r,i=o[n];const s=["row","layer"];if((!i||s.indexOf(i.type)<0)&&(n=i?i.parentId:null,i=n?o[n]: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=f(o,"col");const l={type:"col",width:100,height:i.height?i.height:100,...t,id:a,name:a,childrenIds:[]};o=h(o,l,n),i=o[n];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:d||l.id}}}function F(e,t){let{byId:o,rootNodeId:r}=e;const{focusedNodeId:d}=e;let n=(t?t.parentId:d)||r,i=o[n];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=f(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,n),focusedNodeId:l.id}}}function A(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:d}=e;const{focusedNodeId:n}=e;let i=(t?t.parentId:n)||d,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=f(r,"image");const c={type:"image",value:o,width:Math.max(1,s.width-20),height:Math.max(1,s.height-20),...t,id:l,name:l,childrenIds:[]};return{createdBlock:c,value:{...e,byId:h(r,c,i),focusedNodeId:c.id}}}function z(e,t){let{byId:o,rootNodeId:r}=e;const{focusedNodeId:d}=e;let n=(t?t.parentId:d)||r,i=o[n];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=f(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,n),focusedNodeId:l.id}}}class U extends t{constructor(){super(...arguments),this.state={selectedMenu:null},this.renderColorMenuItem=((e,t)=>{const{value:{byId:d,focusedNodeId:n}}=this.props,{selectedMenu:s}=this.state;if(!n)return;const a=n?d[n]:null;return o(r,null,o("div",{style:{borderStyle:"solid",borderWidth:1,backgroundColor:a[e]||"transparent"},onClick:t=>this.toggleMenu(e)},t),s===e&&o("div",{style:{position:"absolute",zIndex:100}},o(i,{color:a[e]||void 0,onChange:({hex:t})=>{this.props.updateBlock(n,{[e]:t}),this.toggleMenu(e)}})))})}toggleMenu(e){this.setState({selectedMenu:this.state.selectedMenu===e?null:e})}render(){const{buttonClassName:e,breadCrumbsProps:t,value:{byId:r,rootNodeId:d,focusedNodeId:n}}=this.props,i=n?r[n]:d||null,{focusNode:s}=this.props;return o("div",null,o("div",null,o("button",{className:e,onClick:()=>this.props.addRow()},"Add Row"),o("button",{className:e,onClick:()=>this.props.addCol()},"Add Col"),o("button",{className:e,onClick:this.props.removeFocused},"Remove Selected"),o("button",{className:e,onClick:()=>this.props.addMarkDown()},"Add Markdown"),o("button",{className:e,onClick:()=>this.props.addImage()},"Add Image"),o("button",{className:e,onClick:()=>this.props.addLayer()},"Add Layer")),o("div",null,o("button",{className:e,onClick:()=>this.props.copyFocused()},"Copy"),o("button",{className:e,onClick:()=>this.props.paste()},"Paste")),i&&o("div",null,this.renderColorMenuItem("color","Text"),this.renderColorMenuItem("backgroundColor","Background"),o(_,Object.assign({onSelect:e=>s(e,!0),byId:r,node:i},t)),o("button",{className:e,onClick:()=>this.props.moveInDirection(i.id,"up")},"Move Up"),o("button",{className:e,onClick:()=>this.props.moveInDirection(i.id,"down")},"Move Down"),o("button",{className:e,onClick:()=>this.props.moveInDirection(i.id,"left")},"Move Left"),o("button",{className:e,onClick:()=>this.props.moveInDirection(i.id,"right")},"Move Right")))}}U.defaultProps={buttonClassName:"btn btn default"};class Y extends t{constructor(){super(...arguments),this.addRow=(e=>{const{error:t,value:o}=H(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}=A(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(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(v(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(m(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:p(e,o)})}}),this.paste=(()=>{this.props.onChange(u(this.props.value))})}render(){const{UiComponent:e,onChange:t,value:r,controlUiProps:d}=this.props;return o(e,Object.assign({value:r,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(r.byId[e],t),removeFocused:this.removeFocused,updateBlock:this.updateBlock},d))}}Y.defaultProps={UiComponent:U};export{x as AbsoluteLayerBlock,_ as BlockBreadCrumbs,W as BlockEditor,Y as BlockEditorControl,U as BlockEditorControlDefaultUI,P as DraggableColBlock,R as DraggableRowBlock,B as ImageBlock,T as MarkdownBlock,L as Preview,O as ResizableBlock,j as addCol,A as addImage,z as addLayer,F as addMarkDown,H as addRow,I as create,p as deepCopy,S as defaultRenderEditBlock,v as destroy,w as focusNode,k as getDragPositionRelativeToTarget,l as hasDescendent,b as move,m as moveInDirection,f as newBlockId,N as onDragStart,D as onDropped,C as parseTypes,u as paste,g as pasteChild,h as placeNodeInParent,c as reinsertIntoList,a as removeNode,y as update,s as updateNode}; | ||
| //# sourceMappingURL=react-movable-block-editor.es.production.js.map |
@@ -130,2 +130,71 @@ (function (global, factory) { | ||
| function deepCopy(byId, node) { | ||
| if (!node) return node; | ||
| return { ...node, | ||
| value: typeof node.value === 'object' ? { ...node.value | ||
| } : node.value, | ||
| childrenIds: [...node.childrenIds], | ||
| children: node.childrenIds.map(id => deepCopy(byId, byId[id])) | ||
| }; | ||
| } | ||
| function paste(value) { | ||
| const { | ||
| byId, | ||
| copiedNode | ||
| } = value; | ||
| if (!copiedNode) return value; | ||
| const { | ||
| byId: newById | ||
| } = pasteChild(byId, copiedNode); | ||
| console.log('YO YO YO YO', byId, ' NEW COPIED NODE ID: ', copiedNode.id); // add copied node to parent | ||
| if (copiedNode.parentId) { | ||
| const parentNode = byId[copiedNode.parentId]; | ||
| if (parentNode) { | ||
| return { ...value, | ||
| byId: placeNodeInParent(newById, copiedNode, copiedNode.parentId, { | ||
| afterItemId: parentNode.childrenIds[parentNode.childrenIds.length - 1] | ||
| }) | ||
| }; | ||
| } | ||
| } | ||
| return value; | ||
| } | ||
| function pasteChild(byId, copiedNode) { | ||
| console.log('PASTING CHILD...', copiedNode.id); | ||
| copiedNode.id = newBlockId(byId, copiedNode.type); | ||
| console.log('NODE ID NOW', copiedNode.id); | ||
| const children = copiedNode.children; | ||
| copiedNode.children = undefined; | ||
| byId = { ...byId, | ||
| [copiedNode.id]: copiedNode | ||
| }; | ||
| if (children) { | ||
| let idx = 0; | ||
| for (const child of children) { | ||
| child.parentId = copiedNode.id; | ||
| const { | ||
| byId: newById, | ||
| newId: newChildId | ||
| } = pasteChild(byId, child); | ||
| copiedNode.childrenIds[idx] = newChildId; | ||
| console.log('CHILDREN NOW', copiedNode.childrenIds); | ||
| byId = newById; | ||
| ++idx; | ||
| } | ||
| } | ||
| console.log('PASTE CHILD', { | ||
| byId, | ||
| newId: copiedNode.id | ||
| }); | ||
| return { | ||
| byId, | ||
| newId: copiedNode.id | ||
| }; | ||
| } | ||
| function newBlockId(byId, prefix = 'node') { | ||
@@ -1347,3 +1416,3 @@ //TODO better way to create uid | ||
| let newNodeId = newBlockId(byId, 'row'); | ||
| let newNodeId = newBlockId(byId, 'col'); | ||
| const col = { | ||
@@ -1741,39 +1810,9 @@ type: 'col', | ||
| this.props.onChange({ ...this.props.value, | ||
| copiedNode: { ...focusedNode | ||
| } | ||
| copiedNode: deepCopy(byId, focusedNode) | ||
| }); | ||
| } | ||
| }; // TODO: deep pasting, for now just parent block | ||
| }; | ||
| this.paste = () => { | ||
| const { | ||
| value: { | ||
| copiedNode | ||
| } | ||
| } = this.props; | ||
| if (copiedNode && copiedNode.parentId) { | ||
| switch (copiedNode.type) { | ||
| case 'row': | ||
| this.addRow(copiedNode); | ||
| break; | ||
| case 'col': | ||
| this.addCol(copiedNode); | ||
| break; | ||
| case 'image': | ||
| this.addImage(copiedNode); | ||
| break; | ||
| case 'markdown': | ||
| this.addMarkDown(copiedNode); | ||
| break; | ||
| case 'layer': | ||
| this.addLayer(copiedNode); | ||
| break; | ||
| } | ||
| } | ||
| this.props.onChange(paste(this.props.value)); | ||
| }; | ||
@@ -1828,2 +1867,3 @@ } | ||
| exports.create = create; | ||
| exports.deepCopy = deepCopy; | ||
| exports.defaultRenderEditBlock = defaultRenderEditBlock; | ||
@@ -1840,2 +1880,4 @@ exports.destroy = destroy; | ||
| exports.parseTypes = parseTypes; | ||
| exports.paste = paste; | ||
| exports.pasteChild = pasteChild; | ||
| exports.placeNodeInParent = placeNodeInParent; | ||
@@ -1842,0 +1884,0 @@ exports.reinsertIntoList = reinsertIntoList; |
@@ -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";function d(e,t){return{...e,[t.id]:t}}function i(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=d(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 a(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=d(e,{...o,childrenIds:r})}}const n=e[o];if(n){const o=l(n.childrenIds,t.id,r);e=d(e,{...n,childrenIds:o})}return d(e,{...t,parentId:o})}function l(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[t,...e]}function c(e,t="node"){let o=Object.keys(e).length;for(;e[o];)o++;return t+"_"+o}function h(e,t){let{byId:o}=e,r=c(o);const n={...o[r],...t};return{...e,byId:d(o,n)}}function p(e,t,o){let{byId:r}=e;const n={...r[t],...o};return{...e,byId:d(r,n)}}function u(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:i(o,t),focusedNodeId:n===t?null:n}}function g(e,t,o,r={}){if(!o)return e;const{byId:n}=e,d=n[t];return{...e,byId:a(n,{...d,isPlaceHolder:r.isPlaceHolder,...r.absolutePos?{top:r.absolutePos.top,left:r.absolutePos.left}:{}},o,r)}}function f(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],l=i.childrenIds.indexOf(t);if(l<0)return e;let c={};if("row"===i.type)if("left"===o.direction){if(0===l)return e;c={beforeItemId:i.childrenIds[l-1]}}else{if("right"!==o.direction){if(s&&"col"===s.type){const r=s.childrenIds.indexOf(i.id);return r>0&&"up"===o.direction?g(e,t,s.childrenIds[r-1]):r<s.childrenIds.length-1&&"down"===o.direction?g(e,t,s.childrenIds[r+1]):e}return e}if(l>=i.childrenIds.length-1)return e;c={afterItemId:i.childrenIds[l+1]}}else if("col"===i.type)if("up"===o.direction){if(0===l)return e;c={beforeItemId:i.childrenIds[l-1]}}else{if("down"!==o.direction){if(s&&"row"===s.type){const r=s.childrenIds.indexOf(i.id);return r>0&&"left"===o.direction?g(e,t,s.childrenIds[r-1]):r<s.childrenIds.length-1&&"right"===o.direction?g(e,t,s.childrenIds[r+1]):e}return e}if(l>=i.childrenIds.length-1)return e;c={afterItemId:i.childrenIds[l+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:a(r,{...n,isPlaceHolder:c.isPlaceHolder,...c.absolutePos?{top:c.absolutePos.top,left:c.absolutePos.left}:{}},d,c)}}function m(e,t,o=!0){if(!t)return e;const{focusedNodeId:r}=e;return{...e,focusedNodeId:o?t.id:r===t.id?null:r}}function y(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 I(e,t){return t?{left:e.clientX-t.left,top:e.clientY-t.top,width:t.width,height:t.height}:null}function v(e,t,o){e.stopPropagation();const r=I(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 b(e,t,o={},r){const{draggedNodeId:n}=y(e);return g(r,n,t,o)}r=r&&r.hasOwnProperty("default")?r.default:r;class w 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}=y(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}=y(e.dataTransfer.types);if(o){const t=I(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(b(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=>v(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 C 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}=y(e);return"col"===t||"row"===t||"markdown"===t||"image"===t||"layer"===t}),this.shouldPlaceBefore=((e,t)=>{const o=I(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}=y(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(b(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(b(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}=y(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=>v(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 k 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}=y(e);return"col"===t||"row"===t||"markdown"===t||"image"===t||"layer"===t}),this.shouldPlaceBefore=((e,t)=>{const o=I(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}=y(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(b(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(b(e.dataTransfer.types,this.props.node.id,{isPlaceHolder:t,...d},this.props.value))}}}),this.onDragEnter=(e=>{e.preventDefault()}),this.onDragOver=(e=>{const{draggedNodeType:t}=y(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=>v(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 N 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=>v(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 E 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=>v(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 D=e=>{const{node:r,renderEditBlock:n,value:d,onChange:i,width:s,height:a}=e,{focusedNodeId:l}=d;return t.createElement("div",{onClick:e=>{e.stopPropagation(),i(m(d,r))},style:r.id===l?{borderStyle:"dashed",borderWidth:1,borderColor:"orange"}:{}},t.createElement(o.ResizableBox,{className:"box",width:s,height:a,onResizeStart:e=>{e.preventDefault(),e.stopPropagation()},onResize:(e,{size:t})=>{const{width:o,height:n}=t;i(p(d,r.id,{width:o,height:n}))}},"col"===r.type?t.createElement(C,{key:"col_"+r.id,node:r,renderEditBlock:n,value:d,onChange:i}):"row"===r.type?t.createElement(k,{key:"row_"+r.id,node:r,renderEditBlock:n,value:d,onChange:i}):"markdown"===r.type?t.createElement(E,{node:r,update:(e,t)=>i(p(d,e,t))}):"layer"===r.type?t.createElement(w,{key:"layer_"+r.id,node:r,renderEditBlock:n,value:d,onChange:i}):t.createElement(N,{key:"image_"+r.id,node:r,renderEditBlock:n,value:d,onChange:i})))},x=({node:e,renderEditBlock:o,value:r,onChange:n})=>t.createElement(D,{width:e.width,height:e.height,renderEditBlock:o,node:e,value:r,onChange:n});class B 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(C,{key:"col_"+n.id,node:n,renderEditBlock:e,value:this.state.value,onChange:e=>this.setState({value:e})}))}}function R(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}B.defaultProps={renderEditBlock:x,onChange:e=>{}};const P=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:R(e)?"solid":void 0}),T=e=>{const{node:o,byId:n}=e;if(!o)return null;switch(o.type){case"markdown":return t.createElement("div",{key:o.id,style:{...P(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",...P(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(T,{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:{...P(o),width:o.width,height:o.height,display:"flex",flexDirection:"column"}},o.childrenIds.map(e=>t.createElement(T,{key:"prev_"+e,byId:n,node:n[e]})));case"row":return t.createElement("div",{key:o.id,style:{...P(o),width:o.width,height:o.height,display:"flex",flexDirection:"row"}},o.childrenIds.map(e=>t.createElement(T,{key:"prev_"+e,byId:n,node:n[e]})))}},S=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 M(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 l=c(o,"row");const h={type:"row",height:100,width:i&&i.width?i.width:500,...t,id:l,name:l,childrenIds:[]};o=a(o,h,i.id),i=o[d];const p={};if("col"===i.type&&i&&i.childrenIds.length>=1){const e=i.height/i.childrenIds.length;for(const t of i.childrenIds)p[t]={...o[t],height:e}}return{createdBlock:h,value:{...e,byId:{...o,...p},focusedNodeId:n||h.id}}}function W(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 l=c(o,"row");const h={type:"col",width:100,height:i.height?i.height:100,...t,id:l,name:l,childrenIds:[]};o=a(o,h,d),i=o[d];const p={};if("row"===i.type&&i&&i.childrenIds.length>=1){const e=i.width/i.childrenIds.length;for(const t of i.childrenIds)p[t]={...o[t],width:e}}return{createdBlock:h,value:{...e,byId:{...o,...p},focusedNodeId:n||h.id}}}function O(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 l=c(o,"markdown");const h={type:"markdown",width:Math.max(1,i.width-20),height:Math.max(1,i.height-20),...t,id:l,name:l,childrenIds:[]};return{createdBlock:h,value:{...e,byId:a(o,h,d),focusedNodeId:h.id}}}function L(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 l=["row","col","layer"];if(!s||l.indexOf(s.type)<0)return{error:"Can only add an image inside "+l.join(", "),value:e};let h=c(r,"image");const p={type:"image",value:o,width:Math.max(1,s.width-20),height:Math.max(1,s.height-20),...t,id:h,name:h,childrenIds:[]};return{createdBlock:p,value:{...e,byId:a(r,p,i),focusedNodeId:p.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 l=c(o,"layer");const h={type:"layer",width:Math.max(1,i.width-20),height:Math.max(1,i.height-20),...t,id:l,name:l,childrenIds:[]};return{createdBlock:h,value:{...e,byId:a(o,h,d),focusedNodeId:h.id}}}class j extends t.Component{constructor(){super(...arguments),this.state={selectedMenu:null},this.renderColorMenuItem=((e,o)=>{const{value:{byId:r,focusedNodeId:d}}=this.props,{selectedMenu:i}=this.state;if(!d)return;const s=d?r[d]:null;return t.createElement(t.Fragment,null,t.createElement("div",{style:{borderStyle:"solid",borderWidth:1,backgroundColor:s[e]||"transparent"},onClick:t=>this.toggleMenu(e)},o),i===e&&t.createElement("div",{style:{position:"absolute",zIndex:100}},t.createElement(n.SketchPicker,{color:s[e]||void 0,onChange:({hex:t})=>{this.props.updateBlock(d,{[e]:t}),this.toggleMenu(e)}})))})}toggleMenu(e){this.setState({selectedMenu:this.state.selectedMenu===e?null:e})}render(){const{buttonClassName:e,breadCrumbsProps:o,value:{byId:r,rootNodeId:n,focusedNodeId:d}}=this.props,i=d?r[d]:n||null,{focusNode:s}=this.props;return t.createElement("div",null,t.createElement("div",null,t.createElement("button",{className:e,onClick:()=>this.props.addRow()},"Add Row"),t.createElement("button",{className:e,onClick:()=>this.props.addCol()},"Add Col"),t.createElement("button",{className:e,onClick:this.props.removeFocused},"Remove Selected"),t.createElement("button",{className:e,onClick:()=>this.props.addMarkDown()},"Add Markdown"),t.createElement("button",{className:e,onClick:()=>this.props.addImage()},"Add Image"),t.createElement("button",{className:e,onClick:()=>this.props.addLayer()},"Add Layer")),t.createElement("div",null,t.createElement("button",{className:e,onClick:()=>this.props.copyFocused()},"Copy"),t.createElement("button",{className:e,onClick:()=>this.props.paste()},"Paste")),i&&t.createElement("div",null,this.renderColorMenuItem("color","Text"),this.renderColorMenuItem("backgroundColor","Background"),t.createElement(S,Object.assign({onSelect:e=>s(e,!0),byId:r,node:i},o)),t.createElement("button",{className:e,onClick:()=>this.props.moveInDirection(i.id,"up")},"Move Up"),t.createElement("button",{className:e,onClick:()=>this.props.moveInDirection(i.id,"down")},"Move Down"),t.createElement("button",{className:e,onClick:()=>this.props.moveInDirection(i.id,"left")},"Move Left"),t.createElement("button",{className:e,onClick:()=>this.props.moveInDirection(i.id,"right")},"Move Right")))}}j.defaultProps={buttonClassName:"btn btn default"};class H extends t.Component{constructor(){super(...arguments),this.addRow=(e=>{const{error:t,value:o}=M(this.props.value,e);t?alert(t):this.props.onChange(o)}),this.addCol=(e=>{const{error:t,value:o}=W(this.props.value,e);t?alert(t):this.props.onChange(o)}),this.addMarkDown=(e=>{const{error:t,value:o}=O(this.props.value,e);t?alert(t):this.props.onChange(o)}),this.addImage=(e=>{const{error:t,value:o}=L(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(m(o,e,t))}),this.create=(e=>{this.props.onChange(h(this.props.value,e))}),this.updateBlock=((e,t)=>{this.props.onChange(p(this.props.value,e,t))}),this.destroy=(e=>{this.props.onChange(u(this.props.value,e))}),this.move=((e,t,o={})=>{this.props.onChange(g(this.props.value,e,t,o))}),this.moveInDirection=((e,t)=>{this.props.onChange(f(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:{...o}})}}),this.paste=(()=>{const{value:{copiedNode:e}}=this.props;if(e&&e.parentId)switch(e.type){case"row":this.addRow(e);break;case"col":this.addCol(e);break;case"image":this.addImage(e);break;case"markdown":this.addMarkDown(e);break;case"layer":this.addLayer(e)}})}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))}}H.defaultProps={UiComponent:j},e.AbsoluteLayerBlock=w,e.BlockBreadCrumbs=S,e.BlockEditor=B,e.BlockEditorControl=H,e.BlockEditorControlDefaultUI=j,e.DraggableColBlock=C,e.DraggableRowBlock=k,e.ImageBlock=N,e.MarkdownBlock=E,e.Preview=T,e.ResizableBlock=D,e.addCol=W,e.addImage=L,e.addLayer=_,e.addMarkDown=O,e.addRow=M,e.create=h,e.defaultRenderEditBlock=x,e.destroy=u,e.focusNode=m,e.getDragPositionRelativeToTarget=I,e.hasDescendent=s,e.move=g,e.moveInDirection=f,e.newBlockId=c,e.onDragStart=v,e.onDropped=b,e.parseTypes=y,e.placeNodeInParent=a,e.reinsertIntoList=l,e.removeNode=i,e.update=p,e.updateNode=d}); | ||
| !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";function d(e,t){return{...e,[t.id]:t}}function i(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=d(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 a(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=d(e,{...o,childrenIds:r})}}const n=e[o];if(n){const o=l(n.childrenIds,t.id,r);e=d(e,{...n,childrenIds:o})}return d(e,{...t,parentId:o})}function l(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[t,...e]}function c(e,t){return t?{...t,value:"object"==typeof t.value?{...t.value}:t.value,childrenIds:[...t.childrenIds],children:t.childrenIds.map(t=>c(e,e[t]))}:t}function h(e){const{byId:t,copiedNode:o}=e;if(!o)return e;const{byId:r}=p(t,o);if(console.log("YO YO YO YO",t," NEW COPIED NODE ID: ",o.id),o.parentId){const n=t[o.parentId];if(n)return{...e,byId:a(r,o,o.parentId,{afterItemId:n.childrenIds[n.childrenIds.length-1]})}}return e}function p(e,t){console.log("PASTING CHILD...",t.id),t.id=u(e,t.type),console.log("NODE ID NOW",t.id);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,console.log("CHILDREN NOW",t.childrenIds),e=o,++r}}return console.log("PASTE CHILD",{byId:e,newId:t.id}),{byId:e,newId:t.id}}function u(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=u(o);const n={...o[r],...t};return{...e,byId:d(o,n)}}function f(e,t,o){let{byId:r}=e;const n={...r[t],...o};return{...e,byId:d(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:i(o,t),focusedNodeId:n===t?null:n}}function m(e,t,o,r={}){if(!o)return e;const{byId:n}=e,d=n[t];return{...e,byId:a(n,{...d,isPlaceHolder:r.isPlaceHolder,...r.absolutePos?{top:r.absolutePos.top,left:r.absolutePos.left}:{}},o,r)}}function y(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],l=i.childrenIds.indexOf(t);if(l<0)return e;let c={};if("row"===i.type)if("left"===o.direction){if(0===l)return e;c={beforeItemId:i.childrenIds[l-1]}}else{if("right"!==o.direction){if(s&&"col"===s.type){const r=s.childrenIds.indexOf(i.id);return r>0&&"up"===o.direction?m(e,t,s.childrenIds[r-1]):r<s.childrenIds.length-1&&"down"===o.direction?m(e,t,s.childrenIds[r+1]):e}return e}if(l>=i.childrenIds.length-1)return e;c={afterItemId:i.childrenIds[l+1]}}else if("col"===i.type)if("up"===o.direction){if(0===l)return e;c={beforeItemId:i.childrenIds[l-1]}}else{if("down"!==o.direction){if(s&&"row"===s.type){const r=s.childrenIds.indexOf(i.id);return r>0&&"left"===o.direction?m(e,t,s.childrenIds[r-1]):r<s.childrenIds.length-1&&"right"===o.direction?m(e,t,s.childrenIds[r+1]):e}return e}if(l>=i.childrenIds.length-1)return e;c={afterItemId:i.childrenIds[l+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:a(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 b(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 w(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 k(e,t,o={},r){const{draggedNodeId:n}=b(e);return m(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}=b(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}=b(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(k(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=>w(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 E 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}=b(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}=b(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(k(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(k(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}=b(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=>w(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 D 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}=b(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}=b(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(k(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(k(e.dataTransfer.types,this.props.node.id,{isPlaceHolder:t,...d},this.props.value))}}}),this.onDragEnter=(e=>{e.preventDefault()}),this.onDragOver=(e=>{const{draggedNodeType:t}=b(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=>w(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 x 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=>w(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 B 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=>w(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:s,height:a}=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:s,height:a,onResizeStart:e=>{e.preventDefault(),e.stopPropagation()},onResize:(e,{size:t})=>{const{width:o,height:n}=t;i(f(d,r.id,{width:o,height:n}))}},"col"===r.type?t.createElement(E,{key:"col_"+r.id,node:r,renderEditBlock:n,value:d,onChange:i}):"row"===r.type?t.createElement(D,{key:"row_"+r.id,node:r,renderEditBlock:n,value:d,onChange:i}):"markdown"===r.type?t.createElement(B,{node:r,update:(e,t)=>i(f(d,e,t))}):"layer"===r.type?t.createElement(N,{key:"layer_"+r.id,node:r,renderEditBlock:n,value:d,onChange:i}):t.createElement(x,{key:"image_"+r.id,node:r,renderEditBlock:n,value:d,onChange:i})))},R=({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 T 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(E,{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}T.defaultProps={renderEditBlock:R,onChange:e=>{}};const S=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}),W=e=>{const{node:o,byId:n}=e;if(!o)return null;switch(o.type){case"markdown":return t.createElement("div",{key:o.id,style:{...S(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",...S(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(W,{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:{...S(o),width:o.width,height:o.height,display:"flex",flexDirection:"column"}},o.childrenIds.map(e=>t.createElement(W,{key:"prev_"+e,byId:n,node:n[e]})));case"row":return t.createElement("div",{key:o.id,style:{...S(o),width:o.width,height:o.height,display:"flex",flexDirection:"row"}},o.childrenIds.map(e=>t.createElement(W,{key:"prev_"+e,byId:n,node:n[e]})))}},M=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 L(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 l=u(o,"row");const c={type:"row",height:100,width:i&&i.width?i.width:500,...t,id:l,name:l,childrenIds:[]};o=a(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 _(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 l=u(o,"col");const c={type:"col",width:100,height:i.height?i.height:100,...t,id:l,name:l,childrenIds:[]};o=a(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 l=u(o,"markdown");const c={type:"markdown",width:Math.max(1,i.width-20),height:Math.max(1,i.height-20),...t,id:l,name:l,childrenIds:[]};return{createdBlock:c,value:{...e,byId:a(o,c,d),focusedNodeId:c.id}}}function j(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 l=["row","col","layer"];if(!s||l.indexOf(s.type)<0)return{error:"Can only add an image inside "+l.join(", "),value:e};let c=u(r,"image");const h={type:"image",value:o,width:Math.max(1,s.width-20),height:Math.max(1,s.height-20),...t,id:c,name:c,childrenIds:[]};return{createdBlock:h,value:{...e,byId:a(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 l=u(o,"layer");const c={type:"layer",width:Math.max(1,i.width-20),height:Math.max(1,i.height-20),...t,id:l,name:l,childrenIds:[]};return{createdBlock:c,value:{...e,byId:a(o,c,d),focusedNodeId:c.id}}}class F extends t.Component{constructor(){super(...arguments),this.state={selectedMenu:null},this.renderColorMenuItem=((e,o)=>{const{value:{byId:r,focusedNodeId:d}}=this.props,{selectedMenu:i}=this.state;if(!d)return;const s=d?r[d]:null;return t.createElement(t.Fragment,null,t.createElement("div",{style:{borderStyle:"solid",borderWidth:1,backgroundColor:s[e]||"transparent"},onClick:t=>this.toggleMenu(e)},o),i===e&&t.createElement("div",{style:{position:"absolute",zIndex:100}},t.createElement(n.SketchPicker,{color:s[e]||void 0,onChange:({hex:t})=>{this.props.updateBlock(d,{[e]:t}),this.toggleMenu(e)}})))})}toggleMenu(e){this.setState({selectedMenu:this.state.selectedMenu===e?null:e})}render(){const{buttonClassName:e,breadCrumbsProps:o,value:{byId:r,rootNodeId:n,focusedNodeId:d}}=this.props,i=d?r[d]:n||null,{focusNode:s}=this.props;return t.createElement("div",null,t.createElement("div",null,t.createElement("button",{className:e,onClick:()=>this.props.addRow()},"Add Row"),t.createElement("button",{className:e,onClick:()=>this.props.addCol()},"Add Col"),t.createElement("button",{className:e,onClick:this.props.removeFocused},"Remove Selected"),t.createElement("button",{className:e,onClick:()=>this.props.addMarkDown()},"Add Markdown"),t.createElement("button",{className:e,onClick:()=>this.props.addImage()},"Add Image"),t.createElement("button",{className:e,onClick:()=>this.props.addLayer()},"Add Layer")),t.createElement("div",null,t.createElement("button",{className:e,onClick:()=>this.props.copyFocused()},"Copy"),t.createElement("button",{className:e,onClick:()=>this.props.paste()},"Paste")),i&&t.createElement("div",null,this.renderColorMenuItem("color","Text"),this.renderColorMenuItem("backgroundColor","Background"),t.createElement(M,Object.assign({onSelect:e=>s(e,!0),byId:r,node:i},o)),t.createElement("button",{className:e,onClick:()=>this.props.moveInDirection(i.id,"up")},"Move Up"),t.createElement("button",{className:e,onClick:()=>this.props.moveInDirection(i.id,"down")},"Move Down"),t.createElement("button",{className:e,onClick:()=>this.props.moveInDirection(i.id,"left")},"Move Left"),t.createElement("button",{className:e,onClick:()=>this.props.moveInDirection(i.id,"right")},"Move Right")))}}F.defaultProps={buttonClassName:"btn btn default"};class A extends t.Component{constructor(){super(...arguments),this.addRow=(e=>{const{error:t,value:o}=L(this.props.value,e);t?alert(t):this.props.onChange(o)}),this.addCol=(e=>{const{error:t,value:o}=_(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}=j(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(g(this.props.value,e))}),this.updateBlock=((e,t)=>{this.props.onChange(f(this.props.value,e,t))}),this.destroy=(e=>{this.props.onChange(I(this.props.value,e))}),this.move=((e,t,o={})=>{this.props.onChange(m(this.props.value,e,t,o))}),this.moveInDirection=((e,t)=>{this.props.onChange(y(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:c(e,o)})}}),this.paste=(()=>{this.props.onChange(h(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))}}A.defaultProps={UiComponent:F},e.AbsoluteLayerBlock=N,e.BlockBreadCrumbs=M,e.BlockEditor=T,e.BlockEditorControl=A,e.BlockEditorControlDefaultUI=F,e.DraggableColBlock=E,e.DraggableRowBlock=D,e.ImageBlock=x,e.MarkdownBlock=B,e.Preview=W,e.ResizableBlock=P,e.addCol=_,e.addImage=j,e.addLayer=z,e.addMarkDown=H,e.addRow=L,e.create=g,e.deepCopy=c,e.defaultRenderEditBlock=R,e.destroy=I,e.focusNode=v,e.getDragPositionRelativeToTarget=C,e.hasDescendent=s,e.move=m,e.moveInDirection=y,e.newBlockId=u,e.onDragStart=w,e.onDropped=k,e.parseTypes=b,e.paste=h,e.pasteChild=p,e.placeNodeInParent=a,e.reinsertIntoList=l,e.removeNode=i,e.update=f,e.updateNode=d}); | ||
| //# sourceMappingURL=react-movable-block-editor.umd.production.js.map |
| { | ||
| "name": "react-movable-block-editor", | ||
| "version": "0.1.2", | ||
| "version": "0.1.3", | ||
| "author": { | ||
@@ -5,0 +5,0 @@ "name": "nyura123" |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Fixed alerts
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Improved metrics
- Number of low quality alerts
- decreased by-20%
4
Worsened metrics
- Total package byte prevSize
- decreased by-1.38%
703073
- Number of package files
- decreased by-12.5%
35
- Lines of code
- decreased by-1.84%
4053
No dependency changes