Merge branch 'fix-docs-typo' into 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/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/guides/basic-tutorial.md

@@ -95,7 +95,6 @@ import Container from "./Container";
 export const Card = ({background, padding = 20}) => {
   return (
     <Container background={background} padding={padding}>
-      <Container background={background} padding={padding}>
       <div className="text-only">
         <Text text="Title" fontSize={20} />
         <Text text="Subtitle" fontSize={15} />
@@ -104,7 +103,6 @@ export const Card = ({background, padding = 20}) => {
         <Button size="small" text="Learn more" variant="contained" color="primary" />
       </div>
     </Container>
-    </Container>
   )
 }
 
@@ -953,7 +951,7 @@ export const SettingsPanel = () => {
 ```
 Now, we have to make our Delete button work. We can achieve this by using the `delete` action available from the `useEditor` hook.
 
-Also, it's important to note that not all nodes are deletable - if we try to delete an undeletable Node, it'll result in an error. Hence, it's good to make use of the [helper](/craft.js/docs/api/helpers) methods which helps describe a Node. In our case, we would like to know if the currently selected Node is deletable before actually displaying the "Delete" button. We can access the helper methods via the `is` query in the `useEditor` hook.
+Also, it's important to note that not all nodes are deletable - if we try to delete an undeletable Node, it'll result in an error. Hence, it's good to make use of the [helper](/craft.js/docs/api/helpers) methods which helps describe a Node. In our case, we would like to know if the currently selected Node is deletable before actually displaying the "Delete" button. We can access the helper methods via the `node` query in the `useEditor` hook.
 
 ```jsx {13,27-37}
 // components/SettingsPanel.js

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();