Merge branch 'develop'

packages/core/README.md

@@ -94,7 +94,7 @@ const TextComponent = ({text}) => {
   );
 
   return (
-    <div ref={connect(drag)}>
+    <div ref={dom => connect(drag(dom))}>
       <h2>{text}</h2>
       {
         isClicked ? (
@@ -142,7 +142,7 @@ const Container = () => {
   const { actions: {add}, query: { createNode, node } } = useEditor();
   const { id, connectors: {drag, connect}} = useNode();
   return (
-    <div ref={connect(drag)}>
+    <div ref={dom => connect(drag(dom))}>
       ...
       <a onClick={() => {
         const { data: {type, props}} = node(id).get();

packages/docs/docs/api/useEditor.md

@@ -39,7 +39,7 @@ const { connectors, actions, query, ...collected } = useEditor(collector);
       ["delete", "(nodeID: NodeId) => void", "Delete the specified Node"],
       ["deserialize", "() => String", "Recreate Nodes from JSON. This will clear all the current Nodes in the editor state with the recreated Nodes"],
       ["move", "(nodeId: NodeId, targetParentId: NodeId, index: number) => void", "Move a Node to the specified parent Node at the given index."],
-      ["setProp", "(nodeId: NodeId, props: Object) => void", "Manipulate the props of the given Node"],
+      ["setProp", "(nodeId: NodeId, update: (props: Object) => void) => void", "Manipulate the props of the given Node"],
       ["setHidden", "(nodeId: NodeId, bool: boolean) => void", "When set to true, the User Component of the specified Node will be hidden, but not removed"],
       ["setCustom", "(nodeId: NodeId, custom: (custom: Object) => void", "Update the given Node's custom properties"],
       ["setOptions", "(options: Object) => void", "Update the editor's options. The options object passed is the same as the <Editor /> props."]
@@ -79,6 +79,29 @@ const Example = () => {
 }
 ```
 
+### Updating props
+```tsx
+import {useEditor} from "@craftjs/core";
+
+const Example = () => {
+  const { selectedNodeId, actions: {setProp} } = useEditor((state) => ({
+    selectedNodeId: state.events.selected
+  }));
+
+  return (
+    <a
+      onClick={_ => {
+        setProp(selectedNodeId, props => {
+          props.text = "new value";
+        });
+      }}
+    >
+      Update
+    </a>
+  )
+}
+```
+
 ### Hiding and Deleting a Node
 ```jsx
 const Example = () => {

packages/docs/docs/concepts/user-components.md

@@ -50,7 +50,7 @@ The first thing we would want to do is to actually let Craft.js to manage the DO
 const Hero = ({title, children}) => {
   const { connectors: {connect, drag} } = useNode();
   return (
-    <div ref={connect(drag)}>
+    <div ref={dom => connect(drag(dom))}>
       <h2>{title}</h2>
       <div>
         {children}
@@ -91,18 +91,18 @@ const Hero = ({title}) => {
   const { connectors: {connect, drag}, setProp } = useNode();
 
   return (
-    <div ref={connect(drag)}>
+    <div ref={dom => connect(drag(dom))}>
       <h2 contentEditable={true} onKeyUp={(e) => {
         setProp(props => {
-          props.text = e.target.innerText;
+          props.title = e.target.innerText;
         })
       }}>{title}</h2>
     </div>
   )
 }
 ```
 
-In the above example, we have updated our `h2` element to be content editable and added an event handler to update the `text` prop as the user visually enters in a new value.
+In the above example, we have updated our `h2` element to be content editable and added an event handler to update the `title` prop as the user visually enters in a new value.
 
 ## Collecting Node's state
 The information stored in a corresponding `Node` could be useful in helping you build more usable components. We can retrieve information from a `Node` by passing a collector function to the `useNode` hook. Every time the values we retrieved via the collector function changes, our component will re-render. This is very much similar to Redux's `connect` pattern.
@@ -117,10 +117,10 @@ const Hero = ({title}) => {
   }));
 
   return (
-    <div ref={connect(drag)}>
+    <div ref={dom => connect(drag(dom))}>
       <h2 contentEditable={isClicked} onKeyUp={(e) => {
         setProp(props => {
-          props.text = e.target.innerText;
+          props.title = e.target.innerText;
         })
       }}>{title}</h2>
     </div>

packages/docs/docs/overview.md

@@ -68,7 +68,7 @@ const TextComponent = ({text}) => {
   );
 
   return (
-    <div ref={connect(drag)}>
+    <div ref={dom => connect(drag(dom))}>
       <h2>{text}</h2>
       {
         isClicked ? (
@@ -116,7 +116,7 @@ const Container = () => {
   const { actions: {add}, query: { createNode, node } } = useEditor();
   const { id, connectors: {drag, connect}} = useNode();
   return (
-    <div ref={connect(drag)}>
+    <div ref={dom => connect(drag(dom))}>
       ...
       <a onClick={() => {
         const { data: {type, props}} = node(id).get();

packages/docs/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0-beta.1",
   "private": true,
   "scripts": {
-    "start-docs": "docusaurus start",
+    "start": "docusaurus start",
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy"