Merge pull request #3 from Editmode-app/useChunk

Author: ericclemmons

.gitignore

@@ -1,3 +1,4 @@
 .env*
+dist
 node_modules
 package-lock.json

.prettierrc

@@ -0,0 +1 @@
+{}

README.md

@@ -3,7 +3,9 @@
 Editmode allows you to turn plain text in your React app into easily inline-editable bits of content that can be managed by anyone with no technical knowledge.
 
 ## Installation
+
 Use npm to install Editmode:
+
 ```
 npm install editmode-react
 ```
@@ -12,40 +14,46 @@ npm install editmode-react
 
 ### Step 1:
 
-Within your React app, navigate to the index file within your src directory. 
-Import the Editmode wrapper and wrap your App within. 
+Within your React app, navigate to the index file within your src directory.
+Import the Editmode wrapper and wrap your App within.
 
-```
+```js
 import { Editmode } from "editmode-react";
 
+// 👉 `project_id` can be found in the URL:
+// https://editmode.com/projects/{project_id}/chunks
+
 ReactDOM.render(
   <React>
-     <Editmode>
-        <App />
-     </Editmode>
+    <Editmode projectId={project_id}>
+      <App />
+    </Editmode>
   </React>,
-document.getElementById("root")
+  document.getElementById("root")
 );
 ```
 
-
 ### Step 2:
 
 #### Rendering a chunk:
 
-If you have already created the chunk you would like to render on the Editmode CMS, you can simply pass the identifier as a prop and begin editing. 
+If you have already created the chunk you would like to render on the Editmode CMS, you can simply pass the identifier as a prop and begin editing.
 You can provide default content as a fallback should anything go wrong trying to retrieve the data from the API:
 
-```
+```js
 import { Chunk } from "editmode-react";
 
 function Example() {
-	return (
-	  <div>
-	     <p> <Chunk identifier="cnk_123"/> </p>
-	     <p> <Chunk identifier="cnk_321"> I have default content </Chunk> </p>
-	  </div>
-	);
+  return (
+    <div>
+      <p>
+        <Chunk identifier="cnk_123" />
+      </p>
+      <p>
+        <Chunk identifier="cnk_321"> I have default content </Chunk>
+      </p>
+    </div>
+  );
 }
 ```
 
@@ -56,23 +64,24 @@ Alternatively, if you are using one of our **text editor plugins** and would lik
 Chunk collections are simply a way to categorise chunks and can be used to render repeatable content.
 Each collection can contain many properties and each property can hold different types of information.
 
-A good use case example would be creating a "Team Member" collection. It may have `Full Name`,  `Title` and `Headshot` properties. Within your React app, you may want to display the name, title and headshot of all your team members (ie all chunks within the Team Member collection). You can do this by passing the chunk collection identifier as a prop to the ChunkCollection component. To render the name, title and headshot for each team member, pass the identifiers for each property as a prop to the ChunkProperty component: 
+A good use case example would be creating a "Team Member" collection. It may have `Full Name`, `Title` and `Headshot` properties. Within your React app, you may want to display the name, title and headshot of all your team members (ie all chunks within the Team Member collection). You can do this by passing the chunk collection identifier as a prop to the ChunkCollection component. To render the name, title and headshot for each team member, pass the identifiers for each property as a prop to the ChunkFieldValue component:
 
-```
-import { ChunkCollection, ChunkProperty } from "editmode-react";
+```js
+import { ChunkCollection, ChunkFieldValue } from "editmode-react";
 
 function Example() {
 	return (
 	   <section className="meet_the_team">
 	       <ChunkCollection identifier="lst_123" className="team_member">
-		  <h2> <ChunkProperty identifier="prop_001" className="name"/> <h2>
-		  <h5> <ChunkProperty identifier="prop_002" className="title"/> </h5>
-		  <ChunkProperty identifier="prop_003" className="headshot"/>
+		  <h2> <ChunkFieldValue identifier="prop_001" className="name"/> <h2>
+		  <h5> <ChunkFieldValue identifier="prop_002" className="title"/> </h5>
+		  <ChunkFieldValue identifier="prop_003" className="headshot"/>
 	       </ChunkCollection>
 	   </section>
 	);
 }
 ```
+
 This will render editable headings containing the name and title and an image containing the headshot for every person in the "Team Member" collection.
 
 ### Step 3:
@@ -94,6 +103,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

dist/main.js

@@ -23,8 +23,10 @@
   "author": "Megan Ennis",
   "license": "ISC",
   "dependencies": {
+    "@emotion/hash": "^0.8.0",
     "axios": "^0.19.2",
     "dompurify": "^2.0.11",
+    "lodash-es": "^4.17.15",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   },

package.json

@@ -1,44 +1,12 @@
-import React from "react";
-import axios from "axios";
-import { renderChunk } from "./utils/renderChunk.jsx";
-import { BranchContext } from "./Editmode.jsx";
+// @ts-check
 
-class Chunk extends React.Component {
-  constructor(props) {
-    super();
-    this.identifier = props.identifier;
-    this.state = {
-      chunk_data: {}
-    };
-  }
+import { useChunk } from "./useChunk";
 
-  componentDidMount() {
-    let branch = this.context;
-    axios
-      .get(`https://www.editmode.app/api/v1/chunks/${this.identifier}`, branch)
-      .then(res => {
-        this.setState({
-          chunk_data: res.data
-        });
-      })
-      .catch(err =>
-        console.log(
-          `Something went wrong trying to retrieve chunk data: ${err}.Have you provided the correct Editmode identifier as a prop to your Chunk component instance?`
-        )
-      );
-  }
+export function Chunk({ children, className, identifier }) {
+  const chunk = useChunk(children, { identifier });
 
-  render() {
-    return (
-      <>
-        {this.state.chunk_data.identifier
-          ? renderChunk(this.state.chunk_data, this.props.className)
-          : this.props.children}
-      </>
-    );
-  }
+  return chunk.element;
 }
 
-Chunk.contextType = BranchContext;
-
-export default Chunk;
+// Here for backwards-compatibility, but named exports are preferred
+export default Chunk;

src/Chunk.jsx

@@ -1,27 +1,32 @@
+// @ts-check
+
 import React from "react";
 import axios from "axios";
-import { BranchContext } from "./Editmode.jsx";
-export const CollectionContext = React.createContext();
+import { Context } from "./Context";
+
+export const CollectionContext = React.createContext(null);
 
 class ChunkCollection extends React.Component {
   constructor(props) {
-    super();
+    super(props);
+
     this.identifier = props.identifier;
     this.state = {
-      chunks: []
+      chunks: [],
     };
   }
 
   componentDidMount() {
     axios
-      .get(`https://www.editmode.app/api/v1/chunks/`, {
+      .get(`https://api.editmode.com/`, {
         params: { collection_identifier: this.props.identifier },
-        em_branch: this.context.em_branch
+        // @ts-ignore
+        em_branch: this.context.branch,
       })
-      .then(res => {
+      .then((res) => {
         this.setState({ chunks: res.data.chunks });
       })
-      .catch(err =>
+      .catch((err) =>
         console.log(
           `Something went wrong trying to retrieve chunk collection: ${err}. Have you provided the correct Editmode identifier as a prop to your ChunkCollection component instance?`
         )
@@ -30,7 +35,7 @@ class ChunkCollection extends React.Component {
 
   render() {
     return this.state.chunks.length ? (
-      this.state.chunks.map(cnk => {
+      this.state.chunks.map((cnk) => {
         return (
           <CollectionContext.Provider value={cnk.content} key={cnk.identifier}>
             <div
@@ -48,6 +53,6 @@ class ChunkCollection extends React.Component {
   }
 }
 
-ChunkCollection.contextType = BranchContext;
+ChunkCollection.contextType = Context;
 
-export default ChunkCollection;
+export default ChunkCollection;

src/ChunkCollection.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import { renderChunk } from "./utils/renderChunk.jsx";
 import { CollectionContext } from "./ChunkCollection.jsx";
 
-export default class ChunkProperty extends React.Component {
+export default class ChunkFieldValue extends React.Component {
   constructor(props) {
     super();
     this.identifier = props.identifier;
@@ -23,4 +23,4 @@ export default class ChunkProperty extends React.Component {
       </CollectionContext.Consumer>
     );
   }
-}
+}

src/ChunkProperty.jsx renamed to src/ChunkFieldValue.jsx

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+
+export const Context = createContext({
+  branch: null,
+  projectId: null,
+});

src/Context.js

@@ -1,19 +1,28 @@
-import React from "react";
-export const BranchContext = React.createContext();
+// @ts-check
+import React, { useEffect } from "react";
+import { Context } from "./Context";
 
-function Editmode(props) {
-  let script = document.createElement("script");
-  script.src = "https://www.editmode.app/assets/chunks.js";
-  script.async = true;
-  document.body.append(script);
+export function Editmode({ children, projectId }) {
+  if (!projectId) {
+    throw new Error("<Editmode projectId={...}> is missing a valid projectId");
+  }
 
-  let params = new URL(document.location).searchParams;
-  let em_branch = params.get("em_branch");
+  useEffect(() => {
+    window["chunksProjectIdentifier"] = "prj_yvskxAScvL8x";
+
+    const script = document.createElement("script");
+    script.src = "https://static.editmode.com/editmode@^1.0.0/dist/editmode.js";
+    script.async = true;
+    document.body.append(script);
+  }, []);
+
+  let params = new URL(document.location.href).searchParams;
+  let branch = params.get("em_branch");
 
   return (
-    <BranchContext.Provider value={{ em_branch }}>
-      {props.children}
-    </BranchContext.Provider>
+    <Context.Provider value={{ branch, projectId }}>
+      {children}
+    </Context.Provider>
   );
 }
-export default Editmode;
+export default Editmode;