Demo Changes

package.json

@@ -9,8 +9,8 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "peerDependencies": {
-    "react": "16.*",
-    "react-dom": "16.*"
+    "react": "*.*",
+    "react-dom": "*.*"
   },
   "keywords": [
     "Editmode",
@@ -25,6 +25,7 @@
     "axios": "0.20.0",
     "isomorphic-dompurify": "^0.6.0",
     "lodash.kebabcase": "^4.1.1",
+    "react-inlinesvg": "^2.3.0",
     "react-router-dom": "^5.2.0"
   },
   "devDependencies": {
@@ -42,7 +43,7 @@
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-react-jsx": "^6.24.1",
     "extract-text-webpack-plugin": "^3.0.2",
-    "react-art": "^16.13.1",
+    "react-art": "^17.0.2",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.12",
     "webpack-node-externals": "^1.7.2"

src/Chunk.jsx

@@ -3,11 +3,10 @@
 import React from "react";
 import { useChunk } from "./useChunk";
 
-export function Chunk({ children, identifier, src, contentKey, ...props }) {
+export function Chunk({ children, identifier, src, contentKey, field = "", ...props }) {
   const type = src ? "image" : undefined;
   const defaultContent = src || children;
-  const { Component } = useChunk(defaultContent, { identifier, type, contentKey });
-
+  const { Component } = useChunk(defaultContent, { identifier, type, contentKey, field });
   return <Component {...props} />;
 }
 

src/ChunkCollection.jsx

@@ -2,9 +2,7 @@
 import React, { useEffect, useState, useContext } from "react";
 import { ChunkCollectionContext } from "./ChunkCollectionContext";
 import { EditmodeContext } from "./EditmodeContext";
-import { getCachedData, storeCache, computeClassName } from "./utilities";
-import axios from "axios";
-const isBrowser = () => typeof window !== "undefined";
+import { getCachedData, storeCache, computeClassName, api } from "./utilities";
 
 export function ChunkCollection({
   children,
@@ -18,34 +16,30 @@ export function ChunkCollection({
   const [chunks, setChunk] = useState([]);
   const cacheId = identifier + limit + tags.join("");
   // const { collection } = useCollectionData(["Featured Projects"]);
-  const { projectId } = useContext(EditmodeContext);
+  const { projectId, branch } = useContext(EditmodeContext);
 
   useEffect(() => {
     // Get data from localStorage
-    const api = axios.create({
-      baseURL: "https://api2.editmode.com/",
-      headers: {
-        Accept: "application/json",
-        "referrer": isBrowser() ? window.location.href : ""
-      }
-    });
     const cachedChunk = getCachedData(cacheId);
     if (cachedChunk) {
       const data = JSON.parse(cachedChunk);
       setChunk(data);
     }
-
+    let params = new URL(document.location.href).searchParams;
+    const branchId = branch || params.get("em_branch_id") || ""
     const urlParams = new URLSearchParams({
       limit,
       collection_identifier: identifier || contentKey,
       project_id: projectId,
+      branch_id: branchId
     });
 
     tags.forEach((tag) => urlParams.append("tags[]", tag));
 
     api
       .get(`chunks?${urlParams}`)
       .then((res) => {
+        if (res.data.error) throw res.data.error
         storeCache(cacheId, res.data.chunks);
         if (!cachedChunk) setChunk(res.data.chunks);
       })
@@ -63,6 +57,15 @@ export function ChunkCollection({
     ? { ...chunks[0], placeholder: true }
     : {};
 
+  function getChunk(chunk, field) {
+    const fieldChunk = chunk.content.find(c => c.custom_field_name == field)
+    if (fieldChunk && typeof fieldChunk !== 'undefined') {
+      return fieldChunk.content
+    } else {
+      return ""
+    }
+  }
+
   return (
     <div
       className={computeClassName(className, "chunks-collection-wrapper")}
@@ -77,7 +80,11 @@ export function ChunkCollection({
               "chunks-collection-item--wrapper"
             )}
           >
-            {children}
+            {
+              typeof children === 'function' ?
+                children(getChunk, chunk) :
+                children
+            }
           </div>
         </ChunkCollectionContext.Provider>
       ))}
@@ -92,12 +99,18 @@ export function ChunkCollection({
               "chunks-col-placeholder-wrapper chunks-hide"
             )}
           >
-            {children}
+            {
+              typeof children === 'function' ?
+                children(getChunk, placeholderChunk) :
+                children
+            }
           </div>
         </ChunkCollectionContext.Provider>
       )}
     </div>
   );
 }
 
+
+
 export default ChunkCollection;

src/Editmode.jsx

@@ -13,12 +13,11 @@ export function Editmode({ children, projectId, defaultChunks }) {
     window["chunksProjectIdentifier"] = projectId;
 
     const script = document.createElement("script");
-    script.src = "https://static.editmode.com/editmode@2.0.0/dist/editmode.js";
-    script.async = true;
+    script.src = "https://unpkg.com/editmode-magic-editor@0.0.5/dist/magic-editor.js";
     document.body.append(script);
 
     let params = new URL(document.location.href).searchParams;
-    setbranch(params.get("em_branch"));
+    setbranch(params.get("em_branch_id"));
   }, []);
 
   return (

src/index.js

@@ -5,6 +5,7 @@ export { Chunk } from "./Chunk.jsx";
 export { ChunkCollection } from "./ChunkCollection.jsx";
 export { ChunkFieldValue } from "./ChunkFieldValue.jsx";
 export { useChunk } from "./useChunk";
+export { useGetChunk } from "./useGetChunk";
 export { useCollectionChunks } from "./useCollectionChunks";
 export { CustomChunkCollection } from "./CustomChunkCollection.jsx";
 export { ChunkCollectionContext } from "./ChunkCollectionContext.js";

src/useChunk.js

@@ -1,24 +1,24 @@
 // @ts-check
 import { useContext, useEffect, useState, useMemo } from "react";
-import axios from "axios";
 
 import { EditmodeContext } from "./EditmodeContext";
 import {
+  api,
   renderChunk,
   computeContentKey,
   getCachedData,
   storeCache,
 } from "./utilities";
 
-export function useChunk(defaultContent, { identifier, type, contentKey }) {
-  const { projectId, defaultChunks } = useContext(EditmodeContext);
-  const [chunk, setChunk] = useState(undefined);
+export function useChunk(defaultContent, { identifier, type, contentKey, field }) {
+  const { projectId, defaultChunks, branch } = useContext(EditmodeContext);
+  let [chunk, setChunk] = useState(undefined);
 
   if (!contentKey) {
     contentKey = defaultContent ? computeContentKey(defaultContent) : null;
   }
 
-  const cacheId = identifier || contentKey + projectId;
+  let cacheId = identifier || contentKey + projectId + field;
 
   let fallbackChunk;
   if (typeof defaultChunks !== "undefined") {
@@ -37,20 +37,12 @@ export function useChunk(defaultContent, { identifier, type, contentKey }) {
     }, [defaultChunks, identifier]);
   }
 
-  let url = `chunks/${identifier || contentKey}?project_id=${projectId}`;
-
   useEffect(() => {
-    // Render content
-    const api = axios.create({
-      baseURL: "https://api2.editmode.com/",
-      headers: {
-        Accept: "application/json",
-      },
-      params: {
-        referrer: window.location.href,
-      },
-    });
-
+    let params = new URL(document.location.href).searchParams;
+    const branchId = branch || params.get("em_branch_id") || ""
+    const branchParams = branchId && `branch_id=${branchId}` || ""
+    let url = `chunks/${identifier || contentKey}?project_id=${projectId}&${branchParams}`;
+    if (branchId) cacheId += branchId
     let cachedChunk = getCachedData(cacheId);
     let newChunk = cachedChunk
       ? JSON.parse(cachedChunk)
@@ -79,13 +71,33 @@ export function useChunk(defaultContent, { identifier, type, contentKey }) {
     }
   }, [cacheId]);
 
+  // Modify chunk if field is present and chunk_type is collection
+  // e.g. <Chunk identifier="identifier_......" field="Title"/>
+  if ( chunk && chunk.chunk_type == "collection_item" && field) {
+    field = field.toLowerCase();
+    const fieldChunk = chunk.content.find(c =>
+      c.custom_field_identifier.toLowerCase() == field || c.custom_field_name.toLowerCase() == field
+    )
+    if (fieldChunk) {
+      setChunk(fieldChunk) // This will set chunk to fieldChunk, and will be rendered by line: 92
+    } else {
+      return {
+        Component() {
+          return null;
+        },
+      };
+    }
+  }
+
   if (chunk) {
     return {
       Component(props) {
         return renderChunk(chunk, props);
       },
       content: chunk.content,
     };
+
+
   } else {
     return {
       Component() {

src/useCollectionChunks.js

@@ -1,21 +1,11 @@
 import React, { useEffect, useState } from "react";
-import { getCachedData, storeCache } from "./utilities";
-import axios from "axios";
+import { getCachedData, storeCache, api } from "./utilities";
 
 export function useCollectionChunks(identifier, limit = "", tags = []) {
   const [chunks, setChunk] = useState([]);
   const cacheId = identifier + limit + tags.join("");
 
   useEffect(() => {
-    const api = axios.create({
-      baseURL: "https://api2.editmode.com/",
-      headers: {
-        Accept: "application/json",
-      },
-      params: {
-        referrer: window.location.href,
-      },
-    });
     const cachedChunk = getCachedData(cacheId);
     if (cachedChunk) {
       const data = JSON.parse(cachedChunk);

src/useGetChunk.js

@@ -0,0 +1,28 @@
+
+
+import { storeCache, getCachedData, api } from './utilities'
+import { EditmodeContext } from "./EditmodeContext"
+import {useEffect, useState, useContext} from 'react'
+
+export const useGetChunk = (identifier) => {
+  const [projectId, setProject] = useState(null);
+  let [chunk, setChunk] = useState(undefined);
+  const cacheId = identifier + projectId;
+
+  useEffect(() => {
+    setProject(window["chunksProjectIdentifier"])
+    const cachedChunk = getCachedData(cacheId);
+    if (cachedChunk) setChunk(JSON.parse(cachedChunk))
+    let url = `chunks/${identifier}?project_id=${projectId}`;
+
+    api
+      .get(url)
+      .then((res) => {
+        storeCache(cacheId, res.data);
+        if (!cachedChunk) setChunk(res.data)
+      })
+      .catch((error) => console.log(error)); // Set error state
+  }, [cacheId])
+
+  return chunk && chunk.content || ""
+}

src/utilities/api.js

@@ -7,4 +7,4 @@ export const api = axios.create({
     Accept: "application/json",
     "referrer": isBrowser() ? window.location.href : ""
   }
-});
+});

src/utilities/index.js

@@ -3,5 +3,5 @@ export { computeContentKey } from "./computeContentKey";
 export { sanitizeContent } from "./sanitizeContent";
 export { transformImage } from "./transformImage";
 export { computeClassName } from "./computeClassName";
-
+export { api } from "./api";
 export { renderChunk } from "./renderChunk.jsx";

src/utilities/renderChunk.jsx

@@ -1,14 +1,13 @@
 import React from "react";
 import { sanitizeContent, transformImage } from './'
+import SVG from 'react-inlinesvg';
 
 export const renderChunk = (data, props) => {
   const { chunk, parsedChunk } = sanitizeContent(data, props)
   const transformation = props.transformation
   if (transformation && chunk.chunk_type == 'image') {
     chunk.content = transformImage(chunk.content, transformation)
-    console.log(transformImage(chunk.content, transformation))
-  }
-
+  } 
   const defaultprops = {
     "data-chunk": chunk.identifier,
     "data-chunk-editable": true,
@@ -34,14 +33,29 @@ export const renderChunk = (data, props) => {
         class={"editmode-richtext-editor " + props.className}
       />);
     case "image":
-      return (<img
-        {...defaultprops}
-        src={chunk.content}
-        data-chunk-editable={false}
-        alt=""
-        {...props}
-      />);
+      if (isSvg(chunk.content)) {
+        return <SVG 
+          {...defaultprops}
+          src={chunk.content}
+          data-chunk-editable={false}
+          alt=""
+          wrapper="svg"
+          {...props}
+         />
+      } else {
+        return (<img
+          {...defaultprops}
+          src={chunk.content}
+          data-chunk-editable={false}
+          alt=""
+          {...props}
+        />);
+      }
     default:
       return <span {...props}>{parsedChunk}</span>;
   }
 };
+
+function isSvg(url) {
+  return(url.match(/\.(svg)/) != null);
+}