Skip to content

Commit f1a7b05

Browse files
prevwongprevwong
committed
chore: update stable docs
1 parent 171a075 commit f1a7b05

File tree

14 files changed

+289
-295
lines changed

14 files changed

+289
-295
lines changed

‎packages/core/README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ A simple user component can easily be defined as such:
4747
import {useNode} from "@craftjs/core";
4848

4949
const TextComponent = ({text}) => {
50-
const { connectors:{drag} } = useNode();
50+
const { connectors: {drag} } = useNode();
5151

5252
return (
5353
<div ref={drag}>
@@ -87,7 +87,7 @@ In the following example, when the user clicks on a component, we'll display a m
8787
import {useNode} from "@craftjs/core";
8888

8989
const TextComponent = ({text}) => {
90-
const { connectors:{ connect, drag }, isClicked, setProp } = useNode(
90+
const { connectors: { connect, drag }, isClicked, actions: {setProp} } = useNode(
9191
(state) => ({
9292
isClicked: state.event.selected,
9393
})
@@ -140,7 +140,7 @@ Craft.js provides an expressive API which allows you to easily read and manipula
140140
import {useEditor, useNode} from "@craftjs/core";
141141
const Container = () => {
142142
const { actions: {add}, query: { createNode, node } } = useEditor();
143-
const { id, connectors: {drag, connect}} = useNode();
143+
const { id, connectors: {drag, connect} } = useNode();
144144
return (
145145
<div ref={dom => connect(drag(dom))}>
146146
...
@@ -163,7 +163,7 @@ The editor's state can be serialized into JSON which you can then apply a compre
163163
164164
```jsx
165165
const SaveButton = () => {
166-
const { query } = useManager();
166+
const { query } = useEditor();
167167
return <a onClick={() => console.log(query.serialize()) }>Get JSON</a>
168168
}
169169
```

‎packages/docs/docs/overview.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ A simple user component can easily be defined as such:
2121
import {useNode} from "@craftjs/core";
2222

2323
const TextComponent = ({text}) => {
24-
const { connectors:{drag} } = useNode();
24+
const { connectors: {drag} } = useNode();
2525

2626
return (
2727
<div ref={drag}>
@@ -61,7 +61,7 @@ In the following example, when the user clicks on a component, we'll display a m
6161
import {useNode} from "@craftjs/core";
6262

6363
const TextComponent = ({text}) => {
64-
const { connectors:{ connect, drag }, isClicked, actions: {setProp} } = useNode(
64+
const { connectors: { connect, drag }, isClicked, actions: {setProp} } = useNode(
6565
(state) => ({
6666
isClicked: state.event.selected,
6767
})
@@ -114,7 +114,7 @@ Craft.js provides an expressive API which allows you to easily read and manipula
114114
import {useEditor, useNode} from "@craftjs/core";
115115
const Container = () => {
116116
const { actions: {add}, query: { createNode, node } } = useEditor();
117-
const { id, connectors: {drag, connect}} = useNode();
117+
const { id, connectors: {drag, connect} } = useNode();
118118
return (
119119
<div ref={dom => connect(drag(dom))}>
120120
...

‎packages/docs/versioned_docs/version-0.1.0-beta.7/api/Editor.md

+27-26
Original file line numberDiff line numberDiff line change
@@ -17,37 +17,12 @@ Creates the context that stores the editor state.
1717
["enabled?", "boolean", "Optional. If set to false, all editing capabilities will be disabled"],
1818
["indicator?", 'Record<"success" | "error", String>', "Optional. The colour to use for the drop indicator. The colour set in 'success' will be used when the indicator shows a droppable location; otherwise the colour set in 'error' will be used."],
1919
["onRender?", "React.ComponentType<{element: React.ReactElement}>", "Optional. Specify a custom component to render every User Element in the editor."],
20-
["onNodesChange?", "() => void", "Optional. A callback method when the values of any of the nodes in the state changes"]
20+
["onNodesChange?", "(query: QueryMethods) => void", "Optional. A callback method when the values of any of the nodes in the state changes"]
2121
]} />
2222

2323

2424
## Examples
2525

26-
### The default screen
27-
```tsx {9,10,16,17}
28-
import {Editor, Frame, Element} from "@craftjs/core";
29-
30-
const App = () => {
31-
return (
32-
<div>
33-
<h2>My App!</h2>
34-
<Editor>
35-
<h2>My Page Editor</h2>
36-
<Frame>
37-
<Element is={Container} canvas> // defines the Root Node
38-
<h2>Drag me around</h2>
39-
<MyComp text="You can drag me around too" />
40-
<Element is="div" style={{background: "#333" }}>
41-
<p>You can't drag me because the Element above is not a canvas </p>
42-
</Element>
43-
</Element>
44-
</Frame>
45-
</Editor>
46-
</div>
47-
)
48-
}
49-
```
50-
5126
### Custom render user elements
5227
By default, every user element is rendered just as it is. However, if you'd like to, for example, wrap every user element inside a `div`, you can do so through the `onRender` prop:
5328

@@ -79,6 +54,8 @@ In the above example, every user element will now be wrapped in a black `div`.
7954

8055
### Specifying the Drop Indicator colour
8156

57+
You could change the colours of the drag and drop indicators like so:
58+
8259
```jsx {6-9}
8360
import {Editor} from "@craftjs/core";
8461

@@ -100,3 +77,27 @@ const App = () => {
10077
)
10178
}
10279
```
80+
81+
82+
### Callback when Nodes change
83+
84+
Perform a callback whenever the Nodes in the editor is updated/changed
85+
86+
```jsx {6-11}
87+
import {Editor} from "@craftjs/core";
88+
89+
const App = () => {
90+
return (
91+
<Editor
92+
// Save the updated JSON whenever the Nodes has been changed
93+
onNodesChange={query => {
94+
const json = query.serialize();
95+
// save to server
96+
axios.post('/saveJSON', { json });
97+
}}
98+
>
99+
..
100+
</Editor>
101+
)
102+
}
103+
```

‎packages/docs/versioned_docs/version-0.1.0-beta.7/api/Element.md

+11-80
Original file line numberDiff line numberDiff line change
@@ -8,56 +8,26 @@ import {API, Badge} from "@site/src/components";
88

99
<Badge type="component" />
1010

11-
Defines a Node to create for a given User Element
11+
Defines the Node for a given User Element
1212

1313
## Reference
1414
### Props
1515
<API items={[
1616
["is", "React.ElementType", "The User Element to render"],
17-
["id", "String", "Required if the &lt;Node /&gt; is being created inside a User Component"],
17+
["id", "String", "Required if the &lt;Element /&gt; is being created inside a User Component"],
1818
["canvas", "boolean", "If true, a Canvas Node will be created."],
1919
["custom", "Record<string, any>", "Sets the Node's custom properties"],
2020
["hidden", "boolean", "Sets the Node's hidden property. If true, this will hide the Node"],
2121
["...elementProps", "Object", "The props of the element specified in 'is'"],
2222
]} />
2323

2424

25-
## When to specify `id`
26-
You only need to specify the `id` prop when you are defining Nodes **inside** a User Component's render method.
27-
```jsx {6,7,9,12,24-25}
28-
const App = () => {
29-
return (
30-
<Craft resolver={{MyComp, Container}}>
31-
<h2>My Page Editor</h2>
32-
<Frame>
33-
<Element is="div"> // not required
34-
<Element is={MyComp} /> // not required
35-
<div>
36-
<Element is="div" /> // not required
37-
</div>
38-
<Container>
39-
<Element is="div" /> // not required
40-
</Container>
41-
</Element>
42-
</Frame>
43-
</Craft>
44-
)
45-
}
25+
## Usage
4626

47-
const Container = () => {
48-
return (
49-
<div>
50-
<h2>Container</h2>
51-
<Element id="Top" is="div" /> // required
52-
<Element id="Bottom" is={MyComp} /> // required
53-
</div>
54-
)
55-
}
56-
```
27+
### Configure Nodes in &lt;Frame /&gt;
5728

58-
## Examples
29+
Since the `<Frame />` component creates a Node automatically for all of its children elements, thus the `<Element />` component can be used to simply configure the values of the Node that is being created.
5930

60-
### Basics
6131
```jsx
6232
import {Craft, Frame, Element} from "@craftjs/core";
6333

@@ -82,52 +52,9 @@ const App = () => {
8252
}
8353
```
8454

85-
### User Component
86-
```jsx
87-
88-
const Container = ({children}) => {
89-
return (
90-
<div>
91-
<h2>I am a container user component, drop stuff in here</h2>
92-
{children}
93-
</div>
94-
)
95-
}
55+
### Defining Linked Nodes
9656

97-
Container.craft = {
98-
rules: {
99-
// Only allow the Container to be dragged when it has at least 2 children
100-
// This is only applied when the Container is being managed by a Node that is a child of a Canvas Node
101-
canDrag: (node) => node.data.props.children.length >= 2,
102-
103-
// Only allow the incoming Node to be dropped in the Container if its a "h1" or a "Container" user element
104-
// This is only applied when the Container is being managed by a Canvas Node
105-
canMoveIn: (incomingChildNode, node) => ["h1", Container].includes(incomingChildNode.data.type),
106-
107-
// Don't allow child Nodes that are "h1" to be dragged out of the Container
108-
// This is only applied when the Container is being managed by a Canvas Node
109-
canMoveOut: (incomingChildNode, node) => incomingChildNode.data.type != "h1"
110-
}
111-
}
112-
113-
const App = () => {
114-
return (
115-
<div>
116-
<h2>My App!</h2>
117-
<Craft resolver={{Container}}>
118-
<h2>My Page Editor</h2>
119-
<Frame>
120-
<Element is={Container}>
121-
<h2>Text</h2>
122-
</Element>
123-
</Frame>
124-
</Craft>
125-
</div>
126-
)
127-
}
128-
```
129-
130-
### Defining nodes in User Components
57+
When used inside a User Component, `<Element />` works identically as used inside `<Frame />` but because there isn't a Node in-place, thus it has to create a new Linked Node - which is essentially a Node that is linked to the Node of the containing User Component via an arbitary `id`:
13158

13259
```jsx {5}
13360
const Hero = () => {
@@ -142,6 +69,10 @@ const Hero = () => {
14269
}
14370
```
14471
72+
> `<Element />` used inside User Component must specify an `id` prop
73+
74+
75+
## Examples
14576
14677
### Setting `custom` properties
14778

‎packages/docs/versioned_docs/version-0.1.0-beta.7/api/Frame.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const { connectors, setProp, ...collected } = useNode(collector);
1818

1919
## Reference
2020
### Props
21-
Both props specifies the initial screen to render. You must specify at least one of them (`json` takes precendence over `children`).
21+
Both props specifies the initial screen to render. You must specify at least one of them (`data` takes precendence over `children`).
2222

2323
<API items={[
2424
["children?", "React.ReactElement", "Creates the initial screen using React Elements. The element defined here will be the Root Node"],

0 commit comments

Comments
 (0)