From 9c472b94730b54070dcb42d1d650755616771f49 Mon Sep 17 00:00:00 2001 From: Prev Wong Date: Tue, 14 Jan 2020 00:46:24 +0800 Subject: [PATCH 1/3] fix typo in tutorial --- packages/docs/docs/guides/basic-tutorial.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/docs/docs/guides/basic-tutorial.md b/packages/docs/docs/guides/basic-tutorial.md index 2a92b623f..1cf4dc956 100755 --- a/packages/docs/docs/guides/basic-tutorial.md +++ b/packages/docs/docs/guides/basic-tutorial.md @@ -95,7 +95,6 @@ import Container from "./Container"; export const Card = ({background, padding = 20}) => { return ( -
@@ -104,7 +103,6 @@ export const Card = ({background, padding = 20}) => {
-
) } @@ -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 From dd06fdbea64a0edd39386339f3e748ee6c9b7114 Mon Sep 17 00:00:00 2001 From: Prev Wong Date: Fri, 17 Jan 2020 11:19:17 +0800 Subject: [PATCH 2/3] fix typo, thanks @ackvf --- packages/docs/docs/concepts/user-components.md | 12 ++++++------ packages/docs/docs/overview.md | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/docs/docs/concepts/user-components.md b/packages/docs/docs/concepts/user-components.md index 5dfcbafd8..ec90ca61b 100755 --- a/packages/docs/docs/concepts/user-components.md +++ b/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 ( -
+
connect(drag(dom))}>

{title}

{children} @@ -91,10 +91,10 @@ const Hero = ({title}) => { const { connectors: {connect, drag}, setProp } = useNode(); return ( -
+
connect(drag(dom))}>

{ setProp(props => { - props.text = e.target.innerText; + props.title = e.target.innerText; }) }}>{title}

@@ -102,7 +102,7 @@ const Hero = ({title}) => { } ``` -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 ( -
+
connect(drag(dom))}>

{ setProp(props => { - props.text = e.target.innerText; + props.title = e.target.innerText; }) }}>{title}

diff --git a/packages/docs/docs/overview.md b/packages/docs/docs/overview.md index 90e3a341d..a2b49124a 100755 --- a/packages/docs/docs/overview.md +++ b/packages/docs/docs/overview.md @@ -68,7 +68,7 @@ const TextComponent = ({text}) => { ); return ( -
+
connect(drag(dom))}>

{text}

{ isClicked ? ( @@ -116,7 +116,7 @@ const Container = () => { const { actions: {add}, query: { createNode, node } } = useEditor(); const { id, connectors: {drag, connect}} = useNode(); return ( -
+
connect(drag(dom))}> ... { const { data: {type, props}} = node(id).get(); From cd413fbb35de507e6390fd45bd8f09a6eaeb7ccf Mon Sep 17 00:00:00 2001 From: Prev Wong Date: Fri, 17 Jan 2020 11:19:31 +0800 Subject: [PATCH 3/3] fix typo --- packages/core/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/README.md b/packages/core/README.md index 7c50ad445..60530614e 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -94,7 +94,7 @@ const TextComponent = ({text}) => { ); return ( -